1 line
43 KiB
Plaintext
1 line
43 KiB
Plaintext
{"version":3,"sources":["./node_modules/@ionic/core/dist/esm/ion-segment_2.entry.js"],"names":[],"mappings":";;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAA6H;AACnD;AAChB;AACsB;;AAEhF,6BAA6B,4BAA4B,kCAAkC,mCAAmC,oBAAoB,aAAa,kBAAkB,uBAAuB,oBAAoB,qBAAqB,uBAAuB,WAAW,6BAA6B,4CAA4C,kBAAkB,cAAc,yBAAyB,sBAAsB,qBAAqB,iBAAiB,2BAA2B,oBAAoB,sBAAsB,WAAW,gBAAgB,8CAA8C,aAAa,MAAM,6DAA6D,kBAAkB,gBAAgB,UAAU,kBAAkB,kDAAkD,mBAAmB,iBAAiB,kBAAkB,aAAa,gBAAgB,WAAW,+FAA+F,mBAAmB,kBAAkB,mBAAmB,0BAA0B,yBAAyB,wBAAwB,wBAAwB,mCAAmC,oEAAoE,yCAAyC,qDAAqD;;AAE5zC,4BAA4B,4BAA4B,kCAAkC,mCAAmC,oBAAoB,aAAa,kBAAkB,uBAAuB,oBAAoB,qBAAqB,uBAAuB,WAAW,6BAA6B,4CAA4C,kBAAkB,cAAc,yBAAyB,sBAAsB,qBAAqB,iBAAiB,2BAA2B,oBAAoB,sBAAsB,WAAW,gBAAgB,8CAA8C,aAAa,MAAM,yBAAyB,yDAAyD,eAAe;;AAEltB;AACA;AACA,QAAQ,4DAAgB;AACxB,yBAAyB,4DAAW;AACpC,yBAAyB,4DAAW;AACpC,wBAAwB,4DAAW;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,6BAA6B,QAAQ;AACrC;AACA;AACA,qCAAqC,QAAQ;AAC7C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8BAA8B,yJAA6B;AAC3D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iCAAiC,QAAQ;AACzC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,gCAAgC,2DAAM,iCAAiC,2DAAM;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,OAAO,GAAG,8DAAY;AACrC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,uCAAuC,UAAU,gBAAgB,WAAW;AAC5E,QAAQ,4DAAS;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA,qBAAqB,mEAAU;AAC/B,gBAAgB,4DAAC,CAAC,oDAAI,GAAG,+BAA+B,4DAAkB;AAC1E;AACA,8BAA8B,4DAAW;AACzC,oCAAoC,4DAAW;AAC/C;AACA;AACA;AACA,aAAa,GAAG,EAAE,4DAAC;AACnB;A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","file":"31-es2015.js","sourcesContent":["import { r as registerInstance, e as createEvent, c as writeTask, h, H as Host, i as getElement } from './index-92848855.js';\nimport { c as config, b as getIonMode } from './ionic-global-23e7365a.js';\nimport { p as pointerCoord } from './helpers-5c745fbd.js';\nimport { c as createColorClasses, h as hostContext } from './theme-5641d27f.js';\n\nconst segmentIosCss = \":host{--ripple-color:currentColor;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:-ms-flexbox;display:flex;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}: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){margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;width:auto}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.in-toolbar){margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end: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)}\";\n\nconst segmentMdCss = \":host{--ripple-color:currentColor;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:-ms-flexbox;display:flex;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}:host(.segment-scrollable::-webkit-scrollbar){display:none}:host{--background:transparent}:host(.segment-scrollable) ::slotted(ion-segment-button){min-width:auto}\";\n\nconst Segment = class {\n constructor(hostRef) {\n registerInstance(this, hostRef);\n this.ionChange = createEvent(this, \"ionChange\", 7);\n this.ionSelect = createEvent(this, \"ionSelect\", 7);\n this.ionStyle = createEvent(this, \"ionStyle\", 7);\n this.didInit = false;\n this.activated = false;\n /**\n * If `true`, the user cannot interact with the segment.\n */\n this.disabled = false;\n /**\n * If `true`, the segment buttons will overflow and the user can swipe to see them.\n * In addition, this will disable the gesture to drag the indicator between the buttons\n * in order to swipe to see hidden buttons.\n */\n this.scrollable = false;\n this.onClick = (ev) => {\n const current = ev.target;\n const previous = this.checked;\n this.value = current.value;\n if (this.scrollable) {\n if (previous) {\n this.checkButton(previous, current);\n }\n else {\n this.setCheckedClasses();\n }\n }\n this.checked = current;\n };\n }\n valueChanged(value, oldValue) {\n this.ionSelect.emit({ value });\n if (oldValue !== '' || this.didInit) {\n if (!this.activated) {\n this.ionChange.emit({ value });\n }\n else {\n this.valueAfterGesture = value;\n }\n }\n }\n disabledChanged() {\n this.gestureChanged();\n const buttons = this.getButtons();\n for (const button of buttons) {\n button.disabled = this.disabled;\n }\n }\n gestureChanged() {\n if (this.gesture && !this.scrollable) {\n this.gesture.enable(!this.disabled);\n }\n }\n connectedCallback() {\n this.emitStyle();\n }\n componentWillLoad() {\n this.emitStyle();\n }\n async componentDidLoad() {\n this.setCheckedClasses();\n this.gesture = (await import('./index-eea61379.js')).createGesture({\n el: this.el,\n gestureName: 'segment',\n gesturePriority: 100,\n threshold: 0,\n passive: false,\n onStart: ev => this.onStart(ev),\n onMove: ev => this.onMove(ev),\n onEnd: ev => this.onEnd(ev),\n });\n this.gesture.enable(!this.scrollable);\n this.gestureChanged();\n if (this.disabled) {\n this.disabledChanged();\n }\n this.didInit = true;\n }\n onStart(detail) {\n this.activate(detail);\n }\n onMove(detail) {\n this.setNextIndex(detail);\n }\n onEnd(detail) {\n this.setActivated(false);\n const checkedValidButton = this.setNextIndex(detail, true);\n detail.event.stopImmediatePropagation();\n if (checkedValidButton) {\n this.addRipple(detail);\n }\n const value = this.valueAfterGesture;\n if (value !== undefined) {\n this.ionChange.emit({ value });\n this.valueAfterGesture = undefined;\n }\n }\n getButtons() {\n return Array.from(this.el.querySelectorAll('ion-segment-button'));\n }\n /**\n * The gesture blocks the segment button ripple. This\n * function adds the ripple based on the checked segment\n * and where the cursor ended.\n */\n addRipple(detail) {\n const useRippleEffect = config.getBoolean('animated', true) && config.getBoolean('rippleEffect', true);\n if (!useRippleEffect) {\n return;\n }\n const buttons = this.getButtons();\n const checked = buttons.find(button => button.value === this.value);\n const root = checked.shadowRoot || checked;\n const ripple = root.querySelector('ion-ripple-effect');\n if (!ripple) {\n return;\n }\n const { x, y } = pointerCoord(detail.event);\n ripple.addRipple(x, y).then(remove => remove());\n }\n /*\n * Activate both the segment and the buttons\n * due to a bug with ::slotted in Safari\n */\n setActivated(activated) {\n const buttons = this.getButtons();\n buttons.forEach(button => {\n if (activated) {\n button.classList.add('segment-button-activated');\n }\n else {\n button.classList.remove('segment-button-activated');\n }\n });\n this.activated = activated;\n }\n activate(detail) {\n const clicked = detail.event.target;\n const buttons = this.getButtons();\n const checked = buttons.find(button => button.value === this.value);\n // Make sure we are only checking for activation on a segment button\n // since disabled buttons will get the click on the segment\n if (clicked.tagName !== 'ION-SEGMENT-BUTTON') {\n return;\n }\n // If there are no checked buttons, set the current button to checked\n if (!checked) {\n this.value = clicked.value;\n this.setCheckedClasses();\n }\n // If the gesture began on the clicked button with the indicator\n // then we should activate the indicator\n if (this.value === clicked.value) {\n this.setActivated(true);\n }\n }\n getIndicator(button) {\n const root = button.shadowRoot || button;\n return root.querySelector('.segment-button-indicator');\n }\n checkButton(previous, current) {\n const previousIndicator = this.getIndicator(previous);\n const currentIndicator = this.getIndicator(current);\n if (previousIndicator === null || currentIndicator === null) {\n return;\n }\n const previousClientRect = previousIndicator.getBoundingClientRect();\n const currentClientRect = currentIndicator.getBoundingClientRect();\n const widthDelta = previousClientRect.width / currentClientRect.width;\n const xPosition = previousClientRect.left - currentClientRect.left;\n // Scale the indicator width to match the previous indicator width\n // and translate it on top of the previous indicator\n const transform = `translate(${xPosition}px, 0) scaleX(${widthDelta})`;\n writeTask(() => {\n // Remove the transition before positioning on top of the previous indicator\n currentIndicator.classList.remove('segment-button-indicator-animated');\n currentIndicator.style.setProperty('transform', transform);\n // Force a repaint to ensure the transform happens\n currentIndicator.getBoundingClientRect();\n // Add the transition to move the indicator into place\n currentIndicator.classList.add('segment-button-indicator-animated');\n // Remove the transform to slide the indicator back to the button clicked\n currentIndicator.style.setProperty('transform', '');\n });\n this.value = current.value;\n this.setCheckedClasses();\n }\n setCheckedClasses() {\n const buttons = this.getButtons();\n const index = buttons.findIndex(button => button.value === this.value);\n const next = index + 1;\n // Keep track of the currently checked button\n this.checked = buttons.find(button => button.value === this.value);\n for (const button of buttons) {\n button.classList.remove('segment-button-after-checked');\n }\n if (next < buttons.length) {\n buttons[next].classList.add('segment-button-after-checked');\n }\n }\n setNextIndex(detail, isEnd = false) {\n const isRTL = document.dir === 'rtl';\n const activated = this.activated;\n const buttons = this.getButtons();\n const index = buttons.findIndex(button => button.value === this.value);\n const previous = buttons[index];\n let current;\n let nextIndex;\n if (index === -1) {\n return;\n }\n // Get the element that the touch event started on in case\n // it was the checked button, then we will move the indicator\n const rect = previous.getBoundingClientRect();\n const left = rect.left;\n const width = rect.width;\n // Get the element that the gesture is on top of based on the currentX of the\n // gesture event and the Y coordinate of the starting element, since the gesture\n // can move up and down off of the segment\n const currentX = detail.currentX;\n const previousY = rect.top + (rect.height / 2);\n const nextEl = document.elementFromPoint(currentX, previousY);\n const decreaseIndex = isRTL ? currentX > (left + width) : currentX < left;\n const increaseIndex = isRTL ? currentX < left : currentX > (left + width);\n // If the indicator is currently activated then we have started the gesture\n // on top of the checked button so we need to slide the indicator\n // by checking the button next to it as we move\n if (activated && !isEnd) {\n // Decrease index, move left in LTR & right in RTL\n if (decreaseIndex) {\n const newIndex = index - 1;\n if (newIndex >= 0) {\n nextIndex = newIndex;\n }\n // Increase index, moves right in LTR & left in RTL\n }\n else if (increaseIndex) {\n if (activated && !isEnd) {\n const newIndex = index + 1;\n if (newIndex < buttons.length) {\n nextIndex = newIndex;\n }\n }\n }\n if (nextIndex !== undefined && !buttons[nextIndex].disabled) {\n current = buttons[nextIndex];\n }\n }\n // If the indicator is not activated then we will just set the indicator\n // to the element where the gesture ended\n if (!activated && isEnd) {\n current = nextEl;\n }\n /* tslint:disable-next-line */\n if (current != null) {\n /**\n * If current element is ion-segment then that means\n * user tried to select a disabled ion-segment-button,\n * and we should not update the ripple.\n */\n if (current.tagName === 'ION-SEGMENT') {\n return false;\n }\n if (previous !== current) {\n this.checkButton(previous, current);\n }\n }\n return true;\n }\n emitStyle() {\n this.ionStyle.emit({\n 'segment': true\n });\n }\n render() {\n const mode = getIonMode(this);\n return (h(Host, { onClick: this.onClick, class: createColorClasses(this.color, {\n [mode]: true,\n 'in-toolbar': hostContext('ion-toolbar', this.el),\n 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),\n 'segment-activated': this.activated,\n 'segment-disabled': this.disabled,\n 'segment-scrollable': this.scrollable\n }) }, h(\"slot\", null)));\n }\n get el() { return getElement(this); }\n static get watchers() { return {\n \"value\": [\"valueChanged\"],\n \"disabled\": [\"disabledChanged\"]\n }; }\n};\nSegment.style = {\n ios: segmentIosCss,\n md: segmentMdCss\n};\n\nconst 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:1 1 auto;flex:1 1 auto;-ms-flex-direction:column;flex-direction:column;height:auto;background:var(--background);color:var(--color);text-decoration:none;text-overflow:ellipsis;white-space:nowrap;-webkit-font-kerning:none;font-kerning:none;cursor:pointer}.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;margin-left:var(--margin-start);margin-right:var(--margin-end);margin-top:var(--margin-top);margin-bottom:var(--margin-bottom);padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);-webkit-transform:translate(0, 0);transform:translate(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}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.button-native{margin-left:unset;margin-right:unset;-webkit-margin-start:var(--margin-start);margin-inline-start:var(--margin-start);-webkit-margin-end:var(--margin-end);margin-inline-end:var(--margin-end)}}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.button-native{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.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)}@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;line-height:22px;text-overflow:ellipsis;white-space:nowrap;-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;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, #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-preferred-size:0;flex-basis:0;-ms-flex-direction:row;flex-direction:row;min-width:70px;min-height:28px;-webkit-transform:translate(0, 0);transform:translate(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}: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){margin-left:2px;margin-right:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.segment-button-layout-icon-start) ::slotted(ion-label){margin-left:unset;margin-right:unset;-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){margin-left:0;margin-right:2px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.segment-button-layout-icon-end) ::slotted(ion-label){margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:2px;margin-inline-end:2px}}.segment-button-indicator{padding-left:2px;padding-right:2px;left:0;right:0;top:0;bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.segment-button-indicator{padding-left:unset;padding-right:unset;-webkit-padding-start:2px;padding-inline-start:2px;-webkit-padding-end:2px;padding-inline-end:2px}}.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}: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, #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, #fff)))}:host(.in-toolbar-color) .segment-button-indicator-background{background:#fff}: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)}}\";\n\nconst 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:1 1 auto;flex:1 1 auto;-ms-flex-direction:column;flex-direction:column;height:auto;background:var(--background);color:var(--color);text-decoration:none;text-overflow:ellipsis;white-space:nowrap;-webkit-font-kerning:none;font-kerning:none;cursor:pointer}.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;margin-left:var(--margin-start);margin-right:var(--margin-end);margin-top:var(--margin-top);margin-bottom:var(--margin-bottom);padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);-webkit-transform:translate(0, 0);transform:translate(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}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.button-native{margin-left:unset;margin-right:unset;-webkit-margin-start:var(--margin-start);margin-inline-start:var(--margin-start);-webkit-margin-end:var(--margin-end);margin-inline-end:var(--margin-end)}}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.button-native{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.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)}@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;line-height:22px;text-overflow:ellipsis;white-space:nowrap;-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;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, #3880ff);--indicator-box-shadow:none;--indicator-color:var(--color-checked);--indicator-height:2px;--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;max-width:360px;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, #3880ff));--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){margin-left:8px;margin-right:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.segment-button-layout-icon-start) ::slotted(ion-label){margin-left:unset;margin-right:unset;-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){margin-left:0;margin-right:8px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.segment-button-layout-icon-end) ::slotted(ion-label){margin-left:unset;margin-right:unset;-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)}\";\n\nlet ids = 0;\nconst SegmentButton = class {\n constructor(hostRef) {\n registerInstance(this, hostRef);\n this.segmentEl = null;\n this.checked = false;\n /**\n * If `true`, the user cannot interact with the segment button.\n */\n this.disabled = false;\n /**\n * Set the layout of the text and icon in the segment.\n */\n this.layout = 'icon-top';\n /**\n * The type of the button.\n */\n this.type = 'button';\n /**\n * The value of the segment button.\n */\n this.value = 'ion-sb-' + (ids++);\n this.updateState = () => {\n if (this.segmentEl) {\n this.checked = this.segmentEl.value === this.value;\n }\n };\n }\n connectedCallback() {\n const segmentEl = this.segmentEl = this.el.closest('ion-segment');\n if (segmentEl) {\n this.updateState();\n segmentEl.addEventListener('ionSelect', this.updateState);\n }\n }\n disconnectedCallback() {\n const segmentEl = this.segmentEl;\n if (segmentEl) {\n segmentEl.removeEventListener('ionSelect', this.updateState);\n this.segmentEl = null;\n }\n }\n get hasLabel() {\n return !!this.el.querySelector('ion-label');\n }\n get hasIcon() {\n return !!this.el.querySelector('ion-icon');\n }\n render() {\n const { checked, type, disabled, hasIcon, hasLabel, layout } = this;\n const mode = getIonMode(this);\n return (h(Host, { \"aria-disabled\": disabled ? 'true' : null, class: {\n [mode]: true,\n 'in-toolbar': hostContext('ion-toolbar', this.el),\n 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),\n 'in-segment': hostContext('ion-segment', this.el),\n 'in-segment-color': hostContext('ion-segment[color]', this.el),\n 'segment-button-has-label': hasLabel,\n 'segment-button-has-icon': hasIcon,\n 'segment-button-has-label-only': hasLabel && !hasIcon,\n 'segment-button-has-icon-only': hasIcon && !hasLabel,\n 'segment-button-disabled': disabled,\n 'segment-button-checked': checked,\n [`segment-button-layout-${layout}`]: true,\n 'ion-activatable': true,\n 'ion-activatable-instant': true,\n 'ion-focusable': true,\n } }, h(\"button\", { type: type, \"aria-pressed\": checked ? 'true' : 'false', class: \"button-native\", part: \"native\", disabled: disabled }, h(\"span\", { class: \"button-inner\" }, h(\"slot\", null)), mode === 'md' && h(\"ion-ripple-effect\", null)), h(\"div\", { part: \"indicator\", class: {\n 'segment-button-indicator': true,\n 'segment-button-indicator-animated': true\n } }, h(\"div\", { part: \"indicator-background\", class: \"segment-button-indicator-background\" }))));\n }\n get el() { return getElement(this); }\n};\nSegmentButton.style = {\n ios: segmentButtonIosCss,\n md: segmentButtonMdCss\n};\n\nexport { Segment as ion_segment, SegmentButton as ion_segment_button };\n"],"sourceRoot":"webpack:///"} |