@ionic/core/dist/ionic/4m739wpj.sc.entry.js

Base components for Ionic

const e=window.Ionic.h;import{c as t}from"./chunk-7c632336.js";class n{constructor(){this.disabled=!1,this.scrollable=!1}valueChanged(e){this.updateButtons(),this.ionChange.emit({value:e})}segmentClick(e){this.value=e.target.value}componentWillLoad(){this.emitStyle()}componentDidLoad(){if(null==this.value){const e=this.getButtons().find(e=>e.checked);e&&(this.value=e.value)}this.updateButtons()}emitStyle(){this.ionStyle.emit({segment:!0})}updateButtons(){const e=this.value;for(const t of this.getButtons())t.checked=t.value===e}getButtons(){return Array.from(this.el.querySelectorAll("ion-segment-button"))}hostData(){return{class:Object.assign({},t(this.color),{"segment-disabled":this.disabled,"segment-scrollable":this.scrollable})}}static get is(){return"ion-segment"}static get encapsulation(){return"scoped"}static get properties(){return{color:{type:String,attr:"color"},disabled:{type:Boolean,attr:"disabled"},el:{elementRef:!0},mode:{type:String,attr:"mode"},scrollable:{type:Boolean,attr:"scrollable"},value:{type:String,attr:"value",mutable:!0,watchCallbacks:["valueChanged"]}}}static get events(){return[{name:"ionChange",method:"ionChange",bubbles:!0,cancelable:!0,composed:!0},{name:"ionStyle",method:"ionStyle",bubbles:!0,cancelable:!0,composed:!0}]}static get listeners(){return[{name:"ionSelect",method:"segmentClick"}]}static get style(){return".sc-ion-segment-ios-h{--indicator-color-checked:initial;--ripple-color:initial;--color-activated:initial;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;font-family:var(--ion-font-family,inherit);text-align:center}.sc-ion-segment-ios-s > .segment-button-disabled, .segment-disabled.sc-ion-segment-ios-h{pointer-events:none}.segment-scrollable.sc-ion-segment-ios-h{-ms-flex-pack:start;justify-content:start;width:auto;overflow-x:scroll}.segment-scrollable.sc-ion-segment-ios-h::-webkit-scrollbar{display:none}.sc-ion-segment-ios-h{--background:transparent;--background-hover:rgba(var(--ion-color-primary-rgb,56,128,255),0.1);--background-activated:rgba(var(--ion-color-primary-rgb,56,128,255),0.16);--background-checked:var(--ion-color-primary,#3880ff);--color:var(--ion-color-primary,#3880ff);--color-checked:var(--ion-color-primary-contrast,#fff);--color-disabled:rgba(var(--ion-color-primary-rgb,56,128,255),0.3);--color-checked-disabled:rgba(var(--ion-color-primary-contrast-rgb,255,255,255),0.3);--border-color:var(--ion-color-primary,#3880ff);--indicator-color:transparent}.segment-disabled.sc-ion-segment-ios-h{opacity:.3}.sc-ion-segment-ios-h.ion-color.sc-ion-segment-ios-s > ion-segment-button{--border-color:var(--ion-color-base);--background-hover:rgba(var(--ion-color-base-rgb),0.04);background:transparent;color:var(--ion-color-base)}.sc-ion-segment-ios-h.ion-color.sc-ion-segment-ios-s > .activated{background:rgba(var(--ion-color-base-rgb),.16);color:var(--ion-color-base)}.sc-ion-segment-ios-h.ion-color.sc-ion-segment-ios-s > .segment-button-checked, .sc-ion-segment-ios-h.ion-color.sc-ion-segment-ios-s > .segment-button-checked.activated{background:var(--ion-color-base);color:var(--ion-color-contrast)}.sc-ion-segment-ios-h.ion-color.sc-ion-segment-ios-s > .segment-button-disabled{color:rgba(var(--ion-color-base-rgb),.3)}.sc-ion-segment-ios-h.ion-color.sc-ion-segment-ios-s > .segment-button-checked.segment-button-disabled{color:rgba(var(--ion-color-contrast-rgb),.3)}.sc-ion-segment-ios-hion-toolbar.sc-ion-segment-ios-s > ion-segment-button, ion-toolbar .sc-ion-segment-ios-h.sc-ion-segment-ios-s > ion-segment-button{max-width:100px;font-size:12px;line-height:22px}.sc-ion-segment-ios-hion-toolbar:not(.ion-color).sc-ion-segment-ios-s > ion-segment-button, ion-toolbar .sc-ion-segment-ios-h:not(.ion-color).sc-ion-segment-ios-s > ion-segment-button{border-color:var(--ion-toolbar-color-checked,var(--border-color));color:var(--ion-toolbar-color-unchecked,var(--color))}.sc-ion-segment-ios-hion-toolbar:not(.ion-color).sc-ion-segment-ios-s > .segment-button-checked, ion-toolbar .sc-ion-segment-ios-h:not(.ion-color).sc-ion-segment-ios-s > .segment-button-checked{color:var(--ion-toolbar-color-checked,var(--color-checked))}.sc-ion-segment-ios-hion-toolbar.ion-color:not(.ion-color).sc-ion-segment-ios-s > ion-segment-button, ion-toolbar.ion-color .sc-ion-segment-ios-h:not(.ion-color).sc-ion-segment-ios-s > ion-segment-button{--color:var(--ion-color-contrast);--color-disabled:rgba(var(--ion-color-contrast-rgb),0.3);--color-checked:var(--ion-color-base);--color-checked-disabled:rgba(var(--ion-color-contrast-rgb),0.3);--background-hover:rgba(var(--ion-color-contrast-rgb),0.1);--background-activated:rgba(var(--ion-color-contrast-rgb),0.16);--background-checked:var(--ion-color-contrast);--border-color:var(--ion-color-contrast)}"}static get styleMode(){return"ios"}}let s=0;class l{constructor(){this.checked=!1,this.disabled=!1,this.layout="icon-top",this.value="ion-sb-"+s++}checkedChanged(e,t){e&&!t&&this.ionSelect.emit()}onClick(){this.checked=!0}get hasLabel(){return!!this.el.querySelector("ion-label")}get hasIcon(){return!!this.el.querySelector("ion-icon")}hostData(){const{checked:e,disabled:t,hasIcon:n,hasLabel:s,layout:l}=this;return{"aria-disabled":t?"true":null,class:{"segment-button-has-label":s,"segment-button-has-icon":n,"segment-button-has-label-only":s&&!n,"segment-button-has-icon-only":n&&!s,"segment-button-disabled":t,"segment-button-checked":e,[`segment-button-layout-${l}`]:!0,"ion-activatable":!0,"ion-activatable-instant":!0}}}render(){return[e("button",{type:"button","aria-pressed":this.checked?"true":null,class:"button-native",disabled:this.disabled},e("slot",null),"md"===this.mode&&e("ion-ripple-effect",null)),e("div",{class:"segment-button-indicator"})]}static get is(){return"ion-segment-button"}static get encapsulation(){return"shadow"}static get properties(){return{checked:{type:Boolean,attr:"checked",mutable:!0,watchCallbacks:["checkedChanged"]},disabled:{type:Boolean,attr:"disabled"},el:{elementRef:!0},layout:{type:String,attr:"layout"},mode:{type:String,attr:"mode"},value:{type:String,attr:"value"}}}static get events(){return[{name:"ionSelect",method:"ionSelect",bubbles:!0,cancelable:!0,composed:!0}]}static get listeners(){return[{name:"click",method:"onClick"}]}static get style(){return".sc-ion-segment-button-ios-h{--padding-start:0;--padding-end:0;--padding-top:0;--padding-bottom:0;-ms-flex:1 0 auto;flex:1 0 auto;-ms-flex-direction:column;flex-direction:column;height:auto;border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);color:var(--color);text-decoration:none;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;-webkit-font-kerning:none;font-kerning:none}.sc-ion-segment-button-ios-h:first-of-type{border-top-left-radius:var(--border-radius);border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:var(--border-radius)}[dir=rtl].sc-ion-segment-button-ios-h:first-of-type{border-top-left-radius:0;border-top-right-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius);border-bottom-left-radius:0}.sc-ion-segment-button-ios-h:not(:first-of-type){border-left-width:0}.sc-ion-segment-button-ios-h:last-of-type{border-top-left-radius:0;border-top-right-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius);border-bottom-left-radius:0}[dir=rtl].sc-ion-segment-button-ios-h:last-of-type{border-top-left-radius:var(--border-radius);border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:var(--border-radius)}.button-native.sc-ion-segment-button-ios{border-radius:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration: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);display:-ms-flexbox;display:flex;position:relative;-ms-flex-direction:inherit;flex-direction:inherit;-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;cursor:pointer}\@supports ((-webkit-margin-start:0) or (margin-inline-start:0)) or (-webkit-margin-start:0){.button-native.sc-ion-segment-button-ios{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);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)}}.segment-button-indicator.sc-ion-segment-button-ios{-ms-flex-item-align:end;align-self:flex-end;width:100%;height:2px;background-color:var(--indicator-color);opacity:1}.segment-button-checked.sc-ion-segment-button-ios-h{background:var(--background-checked);color:var(--color-checked)}.segment-button-checked.sc-ion-segment-button-ios-h   .segment-button-indicator.sc-ion-segment-button-ios{background-color:var(--indicator-color-checked,var(--color-checked))}.activated.sc-ion-segment-button-ios-h{color:var(--color-activated,var(--color))}.segment-button-disabled.sc-ion-segment-button-ios-h{color:var(--color-disabled)}.segment-button-disabled.segment-button-checked.sc-ion-segment-button-ios-h{color:var(--color-checked-disabled)}.sc-ion-segment-button-ios-s > ion-icon{-ms-flex-order:-1;order:-1}.sc-ion-segment-button-ios-s > 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}.segment-button-layout-icon-start.sc-ion-segment-button-ios-h{-ms-flex-direction:row;flex-direction:row}.segment-button-layout-icon-end.sc-ion-segment-button-ios-h{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.segment-button-layout-icon-bottom.sc-ion-segment-button-ios-h{-ms-flex-direction:column-reverse;flex-direction:column-reverse}.sc-ion-segment-button-ios-h.segment-button-layout-icon-hide .sc-ion-segment-button-ios-s > ion-icon, .sc-ion-segment-button-ios-h.segment-button-layout-label-hide .sc-ion-segment-button-ios-s > ion-label{display:none}ion-ripple-effect.sc-ion-segment-button-ios{color:var(--ripple-color,var(--color-checked))}.sc-ion-segment-button-ios-h{--border-radius:4px;--border-width:1px;--border-style:solid;--transition:100ms all linear;min-height:24px;font-size:13px;line-height:37px}.segment-button-indicator.sc-ion-segment-button-ios{display:none}.sc-ion-segment-button-ios-s > ion-icon{font-size:26px}.sc-ion-segment-button-ios-h.segment-button-layout-icon-start .sc-ion-segment-button-ios-s > ion-label{margin-left:2px;margin-right:0}\@supports ((-webkit-margin-start:0) or (margin-inline-start:0)) or (-webkit-margin-start:0){.sc-ion-segment-button-ios-h.segment-button-layout-icon-start .sc-ion-segment-button-ios-s > ion-label{margin-left:unset;margin-right:unset;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:0;margin-inline-end:0}}.sc-ion-segment-button-ios-h.segment-button-layout-icon-end .sc-ion-segment-button-ios-s > ion-label{margin-left:0;margin-right:2px}\@supports ((-webkit-margin-start:0) or (margin-inline-start:0)) or (-webkit-margin-start:0){.sc-ion-segment-button-ios-h.segment-button-layout-icon-end .sc-ion-segment-button-ios-s > ion-label{margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:2px;margin-inline-end:2px}}\@media (any-hover:hover){.sc-ion-segment-button-ios-h:hover:not(.segment-button-checked){background:var(--background-hover)}}.activated.sc-ion-segment-button-ios-h{background:var(--background-activated)}.segment-button-checked.activated.sc-ion-segment-button-ios-h{background:var(--background-checked);color:var(--color-checked)}"}static get styleMode(){return"ios"}}export{n as IonSegment,l as IonSegmentButton};