1import { 2 isRTL 3} from "./chunk-HQELVUGY.js"; 4import { 5 createColorClasses, 6 hostContext 7} from "./chunk-C5CEXBFJ.js"; 8import { 9 getIonMode 10} from "./chunk-4U6KKISA.js"; 11import { 12 addEventListener, 13 inheritAttributes, 14 raf, 15 removeEventListener 16} from "./chunk-NUJSO76P.js"; 17import { 18 Host, 19 createEvent, 20 forceUpdate, 21 getElement, 22 h, 23 printIonError, 24 printIonWarning, 25 registerInstance, 26 writeTask 27} from "./chunk-ASEYXBYK.js"; 28import { 29 __async 30} from "./chunk-QQUUYUXS.js"; 31 32// node_modules/@ionic/core/dist/esm/ion-segment_2.entry.js 33var segmentIosCss = () => `:host{--ripple-color:currentColor;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:grid;grid-auto-columns:1fr;position:relative;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:center;justify-content:center;width:100%;background:var(--background);font-family:var(--ion-font-family, inherit);text-align:center;contain:paint;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(.segment-scrollable){-ms-flex-pack:start;justify-content:start;width:auto;overflow-x:auto;grid-auto-columns:minmax(-webkit-min-content, 1fr);grid-auto-columns:minmax(min-content, 1fr)}:host(.segment-scrollable::-webkit-scrollbar){display:none}:host{--background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.065);border-radius:8px;overflow:hidden;z-index:0}:host(.ion-color){background:rgba(var(--ion-color-base-rgb), 0.065)}:host(.in-toolbar){-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0;width:auto}:host(.in-toolbar:not(.ion-color)){background:var(--ion-toolbar-segment-background, var(--background))}:host(.in-toolbar-color:not(.ion-color)){background:rgba(var(--ion-color-contrast-rgb), 0.11)}`; 34var segmentMdCss = () => `:host{--ripple-color:currentColor;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:grid;grid-auto-columns:1fr;position:relative;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:center;justify-content:center;width:100%;background:var(--background);font-family:var(--ion-font-family, inherit);text-align:center;contain:paint;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(.segment-scrollable){-ms-flex-pack:start;justify-content:start;width:auto;overflow-x:auto;grid-auto-columns:minmax(-webkit-min-content, 1fr);grid-auto-columns:minmax(min-content, 1fr)}:host(.segment-scrollable::-webkit-scrollbar){display:none}:host{--background:transparent;grid-auto-columns:minmax(auto, 360px)}:host(.in-toolbar){min-height:var(--min-height)}:host(.segment-scrollable) ::slotted(ion-segment-button){min-width:auto}`; 35var Segment = class { 36 constructor(hostRef) { 37 registerInstance(this, hostRef); 38 this.ionChange = createEvent(this, "ionChange", 7); 39 this.ionSelect = createEvent(this, "ionSelect", 7); 40 this.ionStyle = createEvent(this, "ionStyle", 7); 41 this.segmentViewEl = null; 42 this.activated = false; 43 this.disabled = false; 44 this.scrollable = false; 45 this.swipeGesture = true; 46 this.selectOnFocus = false; 47 this.onClick = (ev) => { 48 const current = ev.target; 49 const previous = this.checked; 50 if (current.tagName === "ION-SEGMENT") { 51 return; 52 } 53 this.value = current.value; 54 if (current !== previous) { 55 this.emitValueChange(); 56 } 57 if (this.segmentViewEl) { 58 this.updateSegmentView(); 59 if (this.scrollable && previous) { 60 this.checkButton(previous, current); 61 } 62 } else if (this.scrollable || !this.swipeGesture) { 63 if (previous) { 64 this.checkButton(previous, current); 65 } else { 66 this.setCheckedClasses(); 67 } 68 } 69 }; 70 this.onSlottedItemsChange = () => { 71 this.valueChanged(this.value); 72 }; 73 this.getSegmentButton = (selector) => { 74 var _a, _b; 75 const buttons = this.getButtons().filter((button) => !button.disabled); 76 const currIndex = buttons.findIndex((button) => button === document.activeElement); 77 switch (selector) { 78 case "first": 79 return buttons[0]; 80 case "last": 81 return buttons[buttons.length - 1]; 82 case "next": 83 return (_a = buttons[currIndex + 1]) !== null && _a !== void 0 ? _a : buttons[0]; 84 case "previous": 85 return (_b = buttons[currIndex - 1]) !== null && _b !== void 0 ? _b : buttons[buttons.length - 1]; 86 default: 87 return null; 88 } 89 }; 90 } 91 colorChanged(value, oldValue) { 92 if (oldValue === void 0 && value !== void 0 || oldValue !== void 0 && value === void 0) { 93 this.emitStyle(); 94 } 95 } 96 swipeGestureChanged() { 97 this.gestureChanged(); 98 } 99 valueChanged(value, oldValue) { 100 if (this.segmentViewEl && value === void 0) { 101 this.value = this.getButtons()[0].value; 102 return; 103 } 104 if (oldValue !== void 0 && value !== void 0) { 105 const buttons = this.getButtons(); 106 const previous = buttons.find((button) => button.value === oldValue); 107 const current = buttons.find((button) => button.value === value); 108 if (previous && current) { 109 if (!this.segmentViewEl) { 110 this.checkButton(previous, current); 111 } else if (this.triggerScrollOnValueChange !== false) { 112 this.updateSegmentView(); 113 } 114 } 115 } else if (value !== void 0 && oldValue === void 0 && this.segmentViewEl) { 116 this.updateSegmentView(); 117 } 118 this.ionSelect.emit({ value }); 119 if (!this.segmentViewEl) { 120 this.scrollActiveButtonIntoView(); 121 } 122 this.triggerScrollOnValueChange = void 0; 123 } 124 disabledChanged() { 125 this.gestureChanged(); 126 if (!this.segmentViewEl) { 127 const buttons = this.getButtons(); 128 for (const button of buttons) { 129 button.disabled = this.disabled; 130 } 131 } else { 132 this.segmentViewEl.disabled = this.disabled; 133 } 134 } 135 gestureChanged() { 136 if (this.gesture) { 137 this.gesture.enable(!this.scrollable && !this.disabled && this.swipeGesture); 138 } 139 } 140 connectedCallback() { 141 this.emitStyle();
142 this.segmentViewEl = this.getSegmentView(); 143 } 144 disconnectedCallback() { 145 this.segmentViewEl = null; 146 } 147 componentWillLoad() { 148 this.emitStyle(); 149 } 150 componentDidLoad() { 151 return __async(this, null, function* () { 152 this.segmentViewEl = this.getSegmentView(); 153 this.setCheckedClasses(); 154 raf(() => { 155 this.scrollActiveButtonIntoView(false); 156 }); 157 this.gesture = (yield import("./chunk-SKTRZW4N.js")).createGesture({ 158 el: this.el, 159 gestureName: "segment", 160 gesturePriority: 100, 161 threshold: 0, 162 passive: false, 163 onStart: (ev) => this.onStart(ev), 164 onMove: (ev) => this.onMove(ev), 165 onEnd: (ev) => this.onEnd(ev) 166 }); 167 this.gestureChanged(); 168 if (this.disabled) { 169 this.disabledChanged(); 170 } 171 this.updateSegmentView(false); 172 }); 173 } 174 onStart(detail) { 175 this.valueBeforeGesture = this.value; 176 this.activate(detail); 177 } 178 onMove(detail) { 179 this.setNextIndex(detail); 180 } 181 onEnd(detail) { 182 this.setActivated(false); 183 this.setNextIndex(detail, true); 184 detail.event.stopImmediatePropagation(); 185 const value = this.value; 186 if (value !== void 0) { 187 if (this.valueBeforeGesture !== value) { 188 this.emitValueChange(); 189 this.updateSegmentView(); 190 } 191 } 192 this.valueBeforeGesture = void 0; 193 } 194 /** 195 * Emits an `ionChange` event. 196 * 197 * This API should be called for user committed changes. 198 * This API should not be used for external value changes. 199 */ 200 emitValueChange() { 201 const { value } = this; 202 this.ionChange.emit({ value }); 203 } 204 getButtons() { 205 return Array.from(this.el.querySelectorAll("ion-segment-button")); 206 } 207 get checked() { 208 return this.getButtons().find((button) => button.value === this.value); 209 } 210 /* 211 * Activate both the segment and the buttons 212 * due to a bug with ::slotted in Safari 213 */ 214 setActivated(activated) { 215 const buttons = this.getButtons(); 216 buttons.forEach((button) => { 217 button.classList.toggle("segment-button-activated", activated); 218 }); 219 this.activated = activated; 220 } 221 activate(detail) { 222 const clicked = detail.event.target; 223 const buttons = this.getButtons(); 224 const checked = buttons.find((button) => button.value === this.value); 225 if (clicked.tagName !== "ION-SEGMENT-BUTTON") { 226 return; 227 } 228 if (!checked) { 229 this.value = clicked.value; 230 this.setCheckedClasses(); 231 } 232 if (this.value === clicked.value) { 233 this.setActivated(true); 234 } 235 } 236 getIndicator(button) { 237 const root = button.shadowRoot || button; 238 return root.querySelector(".segment-button-indicator"); 239 } 240 checkButton(previous, current) { 241 const previousIndicator = this.getIndicator(previous); 242 const currentIndicator = this.getIndicator(current); 243 if (previousIndicator === null || currentIndicator === null) { 244 return; 245 } 246 const previousClientRect = previousIndicator.getBoundingClientRect(); 247 const currentClientRect = currentIndicator.getBoundingClientRect(); 248 const widthDelta = previousClientRect.width / currentClientRect.width; 249 const xPosition = previousClientRect.left - currentClientRect.left; 250 const transform = `translate3d(${xPosition}px, 0, 0) scaleX(${widthDelta})`; 251 writeTask(() => { 252 currentIndicator.classList.remove("segment-button-indicator-animated"); 253 currentIndicator.style.setProperty("transform", transform); 254 currentIndicator.getBoundingClientRect(); 255 currentIndicator.classList.add("segment-button-indicator-animated"); 256 currentIndicator.style.setProperty("transform", ""); 257 this.scrollActiveButtonIntoView(true); 258 }); 259 this.value = current.value; 260 this.setCheckedClasses(); 261 } 262 setCheckedClasses() { 263 const buttons = this.getButtons(); 264 const index = buttons.findIndex((button) => button.value === this.value); 265 const next = index + 1; 266 for (const button of buttons) { 267 button.classList.remove("segment-button-after-checked"); 268 } 269 if (next < buttons.length) { 270 buttons[next].classList.add("segment-button-after-checked"); 271 } 272 } 273 getSegmentView() { 274 const buttons = this.getButtons(); 275 const firstContentId = buttons.find((button) => button.contentId); 276 const segmentContent = document.querySelector(`ion-segment-content[id="${firstContentId === null || firstContentId === void 0 ? void 0 : firstContentId.contentId}"]`); 277 return segmentContent === null || segmentContent === void 0 ? void 0 : segmentContent.closest("ion-segment-view"); 278 } 279 handleSegmentViewScroll(ev) { 280 const { scrollRatio, isManualScroll } = ev.detail; 281 if (!isManualScroll) { 282 return; 283 } 284 const dispatchedFrom = ev.target; 285 const segmentViewEl = this.segmentViewEl; 286 const segmentEl = this.el;
vendor: 4,040 bytes, lines 287-401
287 if (ev.composedPath().includes(segmentViewEl) || (dispatchedFrom === null || dispatchedFrom === void 0 ? void 0 : dispatchedFrom.contains(segmentEl))) { 288 const buttons = this.getButtons(); 289 if (!buttons.length) 290 return; 291 const index = buttons.findIndex((button) => button.value === this.value); 292 const current = buttons[index]; 293 const nextIndex = Math.round(scrollRatio * (buttons.length - 1)); 294 if (this.lastNextIndex === void 0 || this.lastNextIndex !== nextIndex) { 295 this.lastNextIndex = nextIndex; 296 this.triggerScrollOnValueChange = false; 297 this.checkButton(current, buttons[nextIndex]); 298 this.emitValueChange(); 299 } 300 } 301 } 302 /** 303 * Finds the related segment view and sets its current content 304 * based on the selected segment button. This method 305 * should be called on initial load of the segment, 306 * after the gesture is completed (if dragging between segments) 307 * and when a segment button is clicked directly. 308 */ 309 updateSegmentView(smoothScroll = true) { 310 const buttons = this.getButtons(); 311 const button = buttons.find((btn) => btn.value === this.value); 312 if (!(button === null || button === void 0 ? void 0 : button.contentId)) { 313 return; 314 } 315 const segmentView = this.segmentViewEl; 316 if (segmentView) { 317 segmentView.setContent(button.contentId, smoothScroll); 318 } 319 } 320 scrollActiveButtonIntoView(smoothScroll = true) { 321 const { scrollable, value, el } = this; 322 if (scrollable) { 323 const buttons = this.getButtons(); 324 const activeButton = buttons.find((button) => button.value === value); 325 if (activeButton !== void 0) { 326 const scrollContainerBox = el.getBoundingClientRect(); 327 const activeButtonBox = activeButton.getBoundingClientRect(); 328 const activeButtonLeft = activeButtonBox.x - scrollContainerBox.x; 329 const centeredX = activeButtonLeft - scrollContainerBox.width / 2 + activeButtonBox.width / 2; 330 const newScrollPosition = el.scrollLeft + centeredX; 331 el.scrollTo({ 332 top: 0, 333 left: newScrollPosition, 334 behavior: smoothScroll ? "smooth" : "instant" 335 }); 336 } 337 } 338 } 339 setNextIndex(detail, isEnd = false) { 340 const rtl = isRTL(this.el); 341 const activated = this.activated; 342 const buttons = this.getButtons(); 343 const index = buttons.findIndex((button) => button.value === this.value); 344 const previous = buttons[index]; 345 let current; 346 let nextIndex; 347 if (index === -1) { 348 return; 349 } 350 const rect = previous.getBoundingClientRect(); 351 const left = rect.left; 352 const width = rect.width; 353 const currentX = detail.currentX; 354 const previousY = rect.top + rect.height / 2; 355 const root = this.el.getRootNode(); 356 const nextEl = root.elementFromPoint(currentX, previousY); 357 const decreaseIndex = rtl ? currentX > left + width : currentX < left; 358 const increaseIndex = rtl ? currentX < left : currentX > left + width; 359 if (activated && !isEnd) { 360 if (decreaseIndex) { 361 const newIndex = index - 1; 362 if (newIndex >= 0) { 363 nextIndex = newIndex; 364 } 365 } else if (increaseIndex) { 366 if (activated && !isEnd) { 367 const newIndex = index + 1; 368 if (newIndex < buttons.length) { 369 nextIndex = newIndex; 370 } 371 } 372 } 373 if (nextIndex !== void 0 && !buttons[nextIndex].disabled) { 374 current = buttons[nextIndex]; 375 } 376 } 377 if (!activated && isEnd) { 378 current = nextEl; 379 } 380 if (current != null) { 381 if (current.tagName === "ION-SEGMENT") { 382 return false; 383 } 384 if (previous !== current) { 385 this.checkButton(previous, current); 386 } 387 } 388 return true; 389 } 390 emitStyle() { 391 this.ionStyle.emit({ 392 segment: true 393 }); 394 } 395 onKeyDown(ev) { 396 const rtl = isRTL(this.el); 397 let keyDownSelectsButton = this.selectOnFocus; 398 let current; 399 switch (ev.key) { 400 case "ArrowRight": 401 ev.preventDefault();
vendor: 8,687 bytes, lines 402-469
402 current = rtl ? this.getSegmentButton("previous") : this.getSegmentButton("next"); 403 break; 404 case "ArrowLeft": 405 ev.preventDefault(); 406 current = rtl ? this.getSegmentButton("next") : this.getSegmentButton("previous"); 407 break; 408 case "Home": 409 ev.preventDefault(); 410 current = this.getSegmentButton("first"); 411 break; 412 case "End": 413 ev.preventDefault(); 414 current = this.getSegmentButton("last"); 415 break; 416 case " ": 417 case "Enter": 418 ev.preventDefault(); 419 current = document.activeElement; 420 keyDownSelectsButton = true; 421 } 422 if (!current) { 423 return; 424 } 425 if (keyDownSelectsButton) { 426 const previous = this.checked; 427 this.checkButton(previous || current, current); 428 if (current !== previous) { 429 this.emitValueChange(); 430 } 431 } 432 current.setFocus(); 433 } 434 render() { 435 const mode = getIonMode(this); 436 return h(Host, { key: "725cc37b25c539fa5e3ae8d90530ae33ededc3de", role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, { 437 [mode]: true, 438 "in-toolbar": hostContext("ion-toolbar", this.el), 439 "in-toolbar-color": hostContext("ion-toolbar[color]", this.el), 440 "segment-activated": this.activated, 441 "segment-disabled": this.disabled, 442 "segment-scrollable": this.scrollable 443 }) }, h("slot", { key: "c51cf7ea50325866a9367d214e12bc3754870335", onSlotchange: this.onSlottedItemsChange })); 444 } 445 get el() { 446 return getElement(this); 447 } 448 static get watchers() { 449 return { 450 "color": [{ 451 "colorChanged": 0 452 }], 453 "swipeGesture": [{ 454 "swipeGestureChanged": 0 455 }], 456 "value": [{ 457 "valueChanged": 0 458 }], 459 "disabled": [{ 460 "disabledChanged": 0 461 }] 462 }; 463 } 464}; 465Segment.style = { 466 ios: segmentIosCss(), 467 md: segmentMdCss() 468}; 469var segmentButtonIosCss = () => `:host{--color:initial;--color-hover:var(--color);--color-checked:var(--color);--color-disabled:var(--color);--padding-start:0;--padding-end:0;--padding-top:0;--padding-bottom:0;border-radius:var(--border-radius);display:-ms-flexbox;display:flex;position:relative;-ms-flex-direction:column;flex-direction:column;height:auto;background:var(--background);color:var(--color);text-decoration:none;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;grid-row:1;-webkit-font-kerning:none;font-kerning:none}.button-native{border-radius:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;-webkit-margin-start:var(--margin-start);margin-inline-start:var(--margin-start);-webkit-margin-end:var(--margin-end);margin-inline-end:var(--margin-end);margin-top:var(--margin-top);margin-bottom:var(--margin-bottom);-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);display:-ms-flexbox;display:flex;position:relative;-ms-flex-direction:inherit;flex-direction:inherit;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;min-width:inherit;max-width:inherit;height:auto;min-height:inherit;max-height:inherit;-webkit-transition:var(--transition);transition:var(--transition);border:none;outline:none;background:transparent;contain:content;pointer-events:none;overflow:hidden;z-index:2}.button-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:"";opacity:0}.button-inner{display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:inherit;flex-flow:inherit;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;z-index:1}:host(.segment-button-checked){background:var(--background-checked);color:var(--color-checked)}:host(.segment-button-disabled){cursor:default;pointer-events:none}:host(.ion-focused) .button-native{color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}:host(:focus){outline:none}@media (any-hover: hover){:host(:hover) .button-native{color:var(--color-hover)}:host(:hover) .button-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}:host(.segment-button-checked:hover) .button-native{color:var(--color-checked)}}::slotted(ion-icon){-ms-flex-negative:0;flex-shrink:0;-ms-flex-order:-1;order:-1;pointer-events:none}::slotted(ion-label){display:block;-ms-flex-item-align:center;align-self:center;max-width:100%;line-height:22px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box;pointer-events:none}:host(.segment-button-layout-icon-top) .button-native{-ms-flex-direction:column;flex-direction:column}:host(.segment-button-layout-icon-start) .button-native{-ms-flex-direction:row;flex-direction:row}:host(.segment-button-layout-icon-end) .button-native{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.segment-button-layout-icon-bottom) .button-native{-ms-flex-direction:column-reverse;flex-direction:column-reverse}:host(.segment-button-layout-icon-hide) ::slotted(ion-icon){display:none}:host(.segment-button-layout-label-hide) ::slotted(ion-label){display:none}ion-ripple-effect{color:var(--ripple-color, var(--color-checked))}.segment-button-indicator{-webkit-transform-origin:left;transform-origin:left;position:absolute;opacity:0;-webkit-box-sizing:border-box;box-sizing:border-box;will-change:transform, opacity;pointer-events:none}.segment-button-indicator-background{width:100%;height:var(--indicator-height);-webkit-transform:var(--indicator-transform);transform:var(--indicator-transform);-webkit-box-shadow:var(--indicator-box-shadow);box-shadow:var(--indicator-box-shadow);pointer-events:none}.segment-button-indicator-animated{-webkit-transition:var(--indicator-transition);transition:var(--indicator-transition)}:host(.segment-button-checked) .segment-button-indicator{opacity:1}@media (prefers-reduced-motion: reduce){.segment-button-indicator-background{-webkit-transform:none;transform:none}.segment-button-indicator-animated{-webkit-transition:none;transition:none}}:host{--background:none;--background-checked:none;--background-hover:none;--background-hover-opacity:0;--background-focused:none;--background-focused-opacity:0;--border-radius:7px;--border-width:1px;--border-color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.12);--border-style:solid;--indicator-box-shadow:0 0 5px rgba(0, 0, 0, 0.16);--indicator-color:var(--ion-color-step-350, var(--ion-background-color-step-350, var(--ion-background-color, #fff)));--indicator-height:100%;--indicator-transition:transform 260ms cubic-bezier(0.4, 0, 0.2, 1);--indicator-transform:none;--transition:100ms all linear;--padding-top:0;--padding-end:13px;--padding-bottom:0;--padding-start:13px;margin-top:2px;margin-bottom:2px;position:relative;-ms-flex-direction:row;flex-direction:row;min-width:70px;min-height:28px;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);font-size:13px;font-weight:450;line-height:37px}:host::before{margin-left:0;margin-right:0;margin-top:5px;margin-bottom:5px;-webkit-transition:160ms opacity ease-in-out;transition:160ms opacity ease-in-out;-webkit-transition-delay:100ms;transition-delay:100ms;border-left:var(--border-width) var(--border-style) var(--border-color);content:"";opacity:1;will-change:opacity}:host(:first-of-type)::before{border-left-color:transparent}:host(.segment-button-disabled){opacity:0.3}::slotted(ion-icon){font-size:24px}:host(.segment-button-layout-icon-start) ::slotted(ion-label){-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:0;margin-inline-end:0}:host(.segment-button-layout-icon-end) ::slotted(ion-label){-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:2px;margin-inline-end:2px}.segment-button-indicator{-webkit-padding-start:2px;padding-inline-start:2px;-webkit-padding-end:2px;padding-inline-end:2px;left:0;right:0;top:0;bottom:0}.segment-button-indicator-background{border-radius:var(--border-radius);background:var(--indicator-color)}.segment-button-indicator-background{-webkit-transition:var(--indicator-transition);transition:var(--indicator-transition)}:host(.segment-button-checked)::before,:host(.segment-button-after-checked)::before{opacity:0}
469:host(.segment-button-checked){z-index:-1}:host(.segment-button-activated){--indicator-transform:scale(0.95)}:host(.ion-focused) .button-native{opacity:0.7}@media (any-hover: hover){:host(:hover) .button-native{opacity:0.5}:host(.segment-button-checked:hover) .button-native{opacity:1}}:host(.in-segment-color){background:none;color:var(--ion-text-color, #000)}:host(.in-segment-color) .segment-button-indicator-background{background:var(--ion-color-step-350, var(--ion-background-color-step-350, var(--ion-background-color, #fff)))}@media (any-hover: hover){:host(.in-segment-color:hover) .button-native,:host(.in-segment-color.segment-button-checked:hover) .button-native{color:var(--ion-text-color, #000)}}:host(.in-toolbar:not(.in-segment-color)){--background-checked:var(--ion-toolbar-segment-background-checked, none);--color:var(--ion-toolbar-segment-color, var(--ion-toolbar-color), initial);--color-checked:var(--ion-toolbar-segment-color-checked, var(--ion-toolbar-color), initial);--indicator-color:var(--ion-toolbar-segment-indicator-color, var(--ion-color-step-350, var(--ion-background-color-step-350, var(--ion-background-color, #fff))))}:host(.in-toolbar-color) .segment-button-indicator-background{background:var(--ion-color-contrast)}:host(.in-toolbar-color:not(.in-segment-color)) .button-native{color:var(--ion-color-contrast)}:host(.in-toolbar-color.segment-button-checked:not(.in-segment-color)) .button-native{color:var(--ion-color-base)}@media (any-hover: hover){:host(.in-toolbar-color:not(.in-segment-color):hover) .button-native{color:var(--ion-color-contrast)}:host(.in-toolbar-color.segment-button-checked:not(.in-segment-color):hover) .button-native{color:var(--ion-color-base)}}`; 470var segmentButtonMdCss = () => `:host{--color:initial;--color-hover:var(--color);--color-checked:var(--color);--color-disabled:var(--color);--padding-start:0;--padding-end:0;--padding-top:0;--padding-bottom:0;border-radius:var(--border-radius);display:-ms-flexbox;display:flex;position:relative;-ms-flex-direction:column;flex-direction:column;height:auto;background:var(--background);color:var(--color);text-decoration:none;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;grid-row:1;-webkit-font-kerning:none;font-kerning:none}.button-native{border-radius:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;-webkit-margin-start:var(--margin-start);margin-inline-start:var(--margin-start);-webkit-margin-end:var(--margin-end);margin-inline-end:var(--margin-end);margin-top:var(--margin-top);margin-bottom:var(--margin-bottom);-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);display:-ms-flexbox;display:flex;position:relative;-ms-flex-direction:inherit;flex-direction:inherit;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;min-width:inherit;max-width:inherit;height:auto;min-height:inherit;max-height:inherit;-webkit-transition:var(--transition);transition:var(--transition);border:none;outline:none;background:transparent;contain:content;pointer-events:none;overflow:hidden;z-index:2}.button-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:"";opacity:0}.button-inner{display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:inherit;flex-flow:inherit;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;z-index:1}:host(.segment-button-checked){background:var(--background-checked);color:var(--color-checked)}:host(.segment-button-disabled){cursor:default;pointer-events:none}:host(.ion-focused) .button-native{color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}:host(:focus){outline:none}@media (any-hover: hover){:host(:hover) .button-native{color:var(--color-hover)}:host(:hover) .button-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}:host(.segment-button-checked:hover) .button-native{color:var(--color-checked)}}::slotted(ion-icon){-ms-flex-negative:0;flex-shrink:0;-ms-flex-order:-1;order:-1;pointer-events:none}::slotted(ion-label){display:block;-ms-flex-item-align:center;align-self:center;max-width:100%;line-height:22px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box;pointer-events:none}:host(.segment-button-layout-icon-top) .button-native{-ms-flex-direction:column;flex-direction:column}:host(.segment-button-layout-icon-start) .button-native{-ms-flex-direction:row;flex-direction:row}:host(.segment-button-layout-icon-end) .button-native{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.segment-button-layout-icon-bottom) .button-native{-ms-flex-direction:column-reverse;flex-direction:column-reverse}:host(.segment-button-layout-icon-hide) ::slotted(ion-icon){display:none}:host(.segment-button-layout-label-hide) ::slotted(ion-label){display:none}ion-ripple-effect{color:var(--ripple-color, var(--color-checked))}.segment-button-indicator{-webkit-transform-origin:left;transform-origin:left;position:absolute;opacity:0;-webkit-box-sizing:border-box;box-sizing:border-box;will-change:transform, opacity;pointer-events:none}.segment-button-indicator-background{width:100%;height:var(--indicator-height);-webkit-transform:var(--indicator-transform);transform:var(--indicator-transform);-webkit-box-shadow:var(--indicator-box-shadow);box-shadow:var(--indicator-box-shadow);pointer-events:none}.segment-button-indicator-animated{-webkit-transition:var(--indicator-transition);transition:var(--indicator-transition)}:host(.segment-button-checked) .segment-button-indicator{opacity:1}@media (prefers-reduced-motion: reduce){.segment-button-indicator-background{-webkit-transform:none;transform:none}.segment-button-indicator-animated{-webkit-transition:none;transition:none}}:host{--background:none;--background-checked:none;--background-hover:var(--color-checked);--background-focused:var(--color-checked);--background-activated-opacity:0;--background-focused-opacity:.12;--background-hover-opacity:.04;--color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.6);--color-checked:var(--ion-color-primary, #0054e9);--indicator-box-shadow:none;--indicator-color:var(--color-checked);--indicator-height:2px;
470--indicator-transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1);--indicator-transform:none;--padding-top:0;--padding-end:16px;--padding-bottom:0;--padding-start:16px;--transition:color 0.15s linear 0s, opacity 0.15s linear 0s;min-width:90px;min-height:48px;border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);font-size:14px;font-weight:500;letter-spacing:0.06em;line-height:40px;text-transform:uppercase}:host(.segment-button-disabled){opacity:0.3}:host(.in-segment-color){background:none;color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.6)}:host(.in-segment-color) ion-ripple-effect{color:var(--ion-color-base)}:host(.in-segment-color) .segment-button-indicator-background{background:var(--ion-color-base)}:host(.in-segment-color.segment-button-checked) .button-native{color:var(--ion-color-base)}:host(.in-segment-color.ion-focused) .button-native::after{background:var(--ion-color-base)}@media (any-hover: hover){:host(.in-segment-color:hover) .button-native{color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.6)}:host(.in-segment-color:hover) .button-native::after{background:var(--ion-color-base)}:host(.in-segment-color.segment-button-checked:hover) .button-native{color:var(--ion-color-base)}}:host(.in-toolbar:not(.in-segment-color)){--background:var(--ion-toolbar-segment-background, none);--background-checked:var(--ion-toolbar-segment-background-checked, none);--color:var(--ion-toolbar-segment-color, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.6));--color-checked:var(--ion-toolbar-segment-color-checked, var(--ion-color-primary, #0054e9));--indicator-color:var(--ion-toolbar-segment-color-checked, var(--color-checked))}:host(.in-toolbar-color:not(.in-segment-color)) .button-native{color:rgba(var(--ion-color-contrast-rgb), 0.6)}:host(.in-toolbar-color.segment-button-checked:not(.in-segment-color)) .button-native{color:var(--ion-color-contrast)}@media (any-hover: hover){:host(.in-toolbar-color:not(.in-segment-color)) .button-native::after{background:var(--ion-color-contrast)}}::slotted(ion-icon){margin-top:12px;margin-bottom:12px;font-size:24px}::slotted(ion-label){margin-top:12px;margin-bottom:12px}:host(.segment-button-layout-icon-top) ::slotted(ion-label),:host(.segment-button-layout-icon-bottom) ::slotted(ion-icon){margin-top:0}:host(.segment-button-layout-icon-top) ::slotted(ion-icon),:host(.segment-button-layout-icon-bottom) ::slotted(ion-label){margin-bottom:0}:host(.segment-button-layout-icon-start) ::slotted(ion-label){-webkit-margin-start:8px;margin-inline-start:8px;-webkit-margin-end:0;margin-inline-end:0}:host(.segment-button-layout-icon-end) ::slotted(ion-label){-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:8px;margin-inline-end:8px}:host(.segment-button-has-icon-only) ::slotted(ion-icon){margin-top:12px;margin-bottom:12px}:host(.segment-button-has-label-only) ::slotted(ion-label){margin-top:12px;margin-bottom:12px}.segment-button-indicator{left:0;right:0;bottom:0}.segment-button-indicator-background{background:var(--indicator-color)}:host(.in-toolbar:not(.in-segment-color)) .segment-button-indicator-background{background:var(--ion-toolbar-segment-indicator-color, var(--indicator-color))}:host(.in-toolbar-color:not(.in-segment-color)) .segment-button-indicator-background{background:var(--ion-color-contrast)}`; 471var ids = 0; 472var SegmentButton = class { 473 constructor(hostRef) { 474 registerInstance(this, hostRef); 475 this.segmentEl = null; 476 this.inheritedAttributes = {}; 477 this.checked = false; 478 this.disabled = false; 479 this.layout = "icon-top"; 480 this.type = "button"; 481 this.value = "ion-sb-" + ids++; 482 this.updateStyle = () => { 483 forceUpdate(this); 484 }; 485 this.updateState = () => { 486 const { segmentEl } = this; 487 if (segmentEl) { 488 this.checked = segmentEl.value === this.value; 489 if (segmentEl.disabled) { 490 this.disabled = true; 491 } 492 } 493 }; 494 } 495 valueChanged() { 496 this.updateState(); 497 } 498 connectedCallback() { 499 const segmentEl = this.segmentEl = this.el.closest("ion-segment"); 500 if (segmentEl) { 501 this.updateState(); 502 addEventListener(segmentEl, "ionSelect", this.updateState); 503 addEventListener(segmentEl, "ionStyle", this.updateStyle); 504 } 505 if (this.contentId && this.disabled) { 506 printIonWarning(`[ion-segment-button] - Segment buttons cannot be disabled
506when associated with an <ion-segment-content>.`); 507 this.disabled = false; 508 } 509 } 510 disconnectedCallback() { 511 const segmentEl = this.segmentEl; 512 if (segmentEl) { 513 removeEventListener(segmentEl, "ionSelect", this.updateState); 514 removeEventListener(segmentEl, "ionStyle", this.updateStyle); 515 this.segmentEl = null; 516 } 517 } 518 componentWillLoad() { 519 this.inheritedAttributes = Object.assign({}, inheritAttributes(this.el, ["aria-label"])); 520 if (!this.contentId) 521 return; 522 const segmentContent = document.getElementById(this.contentId); 523 if (!segmentContent) { 524 printIonError(`[ion-segment-button] - Unable to find Segment Content with id="${this.contentId}".`); 525 return; 526 } 527 if (segmentContent.tagName !== "ION-SEGMENT-CONTENT") { 528 printIonError(`[ion-segment-button] - Element with id="${this.contentId}" is not an <ion-segment-content> element.`); 529 return; 530 } 531 } 532 get hasLabel() { 533 return !!this.el.querySelector("ion-label"); 534 } 535 get hasIcon() { 536 return !!this.el.querySelector("ion-icon"); 537 } 538 /** 539 * @internal 540 * Focuses the native <button> element 541 * inside of ion-segment-button. 542 */ 543 setFocus() { 544 return __async(this, null, function* () { 545 const { nativeEl } = this; 546 if (nativeEl !== void 0) { 547 nativeEl.focus(); 548 } 549 }); 550 } 551 render() { 552 const { checked, type, disabled, hasIcon, hasLabel, layout, segmentEl } = this; 553 const mode = getIonMode(this); 554 const hasSegmentColor = () => (segmentEl === null || segmentEl === void 0 ? void 0 : segmentEl.color) !== void 0; 555 return h(Host, { key: "f69e2a24198a7c57543dbe66902da039a6569c64", class: { 556 [mode]: true, 557 "in-toolbar": hostContext("ion-toolbar", this.el), 558 "in-toolbar-color": hostContext("ion-toolbar[color]", this.el), 559 "in-segment": hostContext("ion-segment", this.el), 560 "in-segment-color": hasSegmentColor(), 561 "segment-button-has-label": hasLabel, 562 "segment-button-has-icon": hasIcon, 563 "segment-button-has-label-only": hasLabel && !hasIcon, 564 "segment-button-has-icon-only": hasIcon && !hasLabel, 565 "segment-button-disabled": disabled, 566 "segment-button-checked": checked, 567 [`segment-button-layout-${layout}`]: true, 568 "ion-activatable": true, 569 "ion-activatable-instant": true, 570 "ion-focusable": true 571 } }, h("button", Object.assign({ key: "0a6fea3a374074af19f7ece0ba3a7cf1e269ab6d", "aria-selected": checked ? "true" : "false", role: "tab", ref: (el) => this.nativeEl = el, type, class: "button-native", part: "native", disabled }, this.inheritedAttributes), h("span", { key: "991018a38c59a6f3d76b2e952e5569c874d2c13e", class: "button-inner" }, h("slot", { key: "23c547c80108025027b913c7fcbec189286627a3" })), mode === "md" && h("ion-ripple-effect", { key: "7faa9d06ab6aa7346d16b0b6808979759a79650c" })), h("div", { key: "0d61badf2c227dc38e20185b2b2bb590a5efa434", part: "indicator", class: "segment-button-indicator segment-button-indicator-animated" }, h("div", { key: "a84035752b78491c344179d1e61d109fb4bd1cf1", part: "indicator-background", class: "segment-button-indicator-background" }))); 572 } 573 get el() { 574 return getElement(this); 575 } 576 static get watchers() { 577 return { 578 "value": [{ 579 "valueChanged": 0 580 }] 581 }; 582 } 583}; 584SegmentButton.style = { 585 ios: segmentButtonIosCss(), 586 md: segmentButtonMdCss() 587}; 588export { 589 Segment as ion_segment, 590 SegmentButton as ion_segment_button 591};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.