forms-reactive/dist/forms-reactive/p-56653049.entry.js

Reactive Form Web Component

import{r as t,c as s,w as i,h as e,H as n,e as o}from"./p-3e1171f6.js";import{r}from"./p-c1432a35.js";import{i as a}from"./p-15a24f88.js";import{c as h,h as c}from"./p-100c2286.js";import{g as l}from"./p-9c83f640.js";const d=":host{--ripple-color:currentColor;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:grid;grid-auto-columns:1fr;position:relative;align-items:stretch;justify-content:center;width:100%;background:var(--background);font-family:var(--ion-font-family, inherit);text-align:center;contain:paint;user-select:none}:host(.segment-scrollable){justify-content:start;width:auto;overflow-x:auto;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)}";const u=d;const f=":host{--ripple-color:currentColor;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:grid;grid-auto-columns:1fr;position:relative;align-items:stretch;justify-content:center;width:100%;background:var(--background);font-family:var(--ion-font-family, inherit);text-align:center;contain:paint;user-select:none}:host(.segment-scrollable){justify-content:start;width:auto;overflow-x:auto;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}";const g=f;const m=class{constructor(i){t(this,i);this.ionChange=s(this,"ionChange",7);this.ionSelect=s(this,"ionSelect",7);this.ionStyle=s(this,"ionStyle",7);this.segmentViewEl=null;this.onClick=t=>{const s=t.target;const i=this.checked;if(s.tagName==="ION-SEGMENT"){return}this.value=s.value;if(s!==i){this.emitValueChange()}if(this.segmentViewEl){this.updateSegmentView();if(this.scrollable&&i){this.checkButton(i,s)}}else if(this.scrollable||!this.swipeGesture){if(i){this.checkButton(i,s)}else{this.setCheckedClasses()}}};this.onSlottedItemsChange=()=>{this.valueChanged(this.value)};this.getSegmentButton=t=>{var s,i;const e=this.getButtons().filter((t=>!t.disabled));const n=e.findIndex((t=>t===document.activeElement));switch(t){case"first":return e[0];case"last":return e[e.length-1];case"next":return(s=e[n+1])!==null&&s!==void 0?s:e[0];case"previous":return(i=e[n-1])!==null&&i!==void 0?i:e[e.length-1];default:return null}};this.activated=false;this.color=undefined;this.disabled=false;this.scrollable=false;this.swipeGesture=true;this.value=undefined;this.selectOnFocus=false}colorChanged(t,s){if(s===undefined&&t!==undefined||s!==undefined&&t===undefined){this.emitStyle()}}swipeGestureChanged(){this.gestureChanged()}valueChanged(t,s){if(this.segmentViewEl&&t===undefined){this.value=this.getButtons()[0].value;return}if(s!==undefined&&t!==undefined){const i=this.getButtons();const e=i.find((t=>t.value===s));const n=i.find((s=>s.value===t));if(e&&n){if(!this.segmentViewEl){this.checkButton(e,n)}else if(this.triggerScrollOnValueChange!==false){this.updateSegmentView()}}}else if(t!==undefined&&s===undefined&&this.segmentViewEl){this.updateSegmentView()}this.ionSelect.emit({value:t});if(!this.segmentViewEl){this.scrollActiveButtonIntoView()}this.triggerScrollOnValueChange=undefined}disabledChanged(){this.gestureChanged();if(!this.segmentViewEl){const t=this.getButtons();for(const s of t){s.disabled=this.disabled}}else{this.segmentViewEl.disabled=this.disabled}}gestureChanged(){if(this.gesture){this.gesture.enable(!this.scrollable&&!this.disabled&&this.swipeGesture)}}connectedCallback(){this.emitStyle();this.segmentViewEl=this.getSegmentView()}disconnectedCallback(){this.segmentViewEl=null}componentWillLoad(){this.emitStyle()}async componentDidLoad(){this.segmentViewEl=this.getSegmentView();this.setCheckedClasses();r((()=>{this.scrollActiveButtonIntoView(false)}));this.gesture=(await import("./p-52ed752a.js")).createGesture({el:this.el,gestureName:"segment",gesturePriority:100,threshold:0,passive:false,onStart:t=>this.onStart(t),onMove:t=>this.onMove(t),onEnd:t=>this.onEnd(t)});this.gestureChanged();if(this.disabled){this.disabledChanged()}this.updateSegmentView(false)}onStart(t){this.valueBeforeGesture=this.value;this.activate(t)}onMove(t){this.setNextIndex(t)}onEnd(t){this.setActivated(false);this.setNextIndex(t,true);t.event.stopImmediatePropagation();const s=this.value;if(s!==undefined){if(this.valueBeforeGesture!==s){this.emitValueChange();this.updateSegmentView()}}this.valueBeforeGesture=undefined}emitValueChange(){const{value:t}=this;this.ionChange.emit({value:t})}getButtons(){return Array.from(this.el.querySelectorAll("ion-segment-button"))}get checked(){return this.getButtons().find((t=>t.value===this.value))}setActivated(t){const s=this.getButtons();s.forEach((s=>{s.classList.toggle("segment-button-activated",t)}));this.activated=t}activate(t){const s=t.event.target;const i=this.getButtons();const e=i.find((t=>t.value===this.value));if(s.tagName!=="ION-SEGMENT-BUTTON"){return}if(!e){this.value=s.value;this.setCheckedClasses()}if(this.value===s.value){this.setActivated(true)}}getIndicator(t){const s=t.shadowRoot||t;return s.querySelector(".segment-button-indicator")}checkButton(t,s){const e=this.getIndicator(t);const n=this.getIndicator(s);if(e===null||n===null){return}const o=e.getBoundingClientRect();const r=n.getBoundingClientRect();const a=o.width/r.width;const h=o.left-r.left;const c=`translate3d(${h}px, 0, 0) scaleX(${a})`;i((()=>{n.classList.remove("segment-button-indicator-animated");n.style.setProperty("transform",c);n.getBoundingClientRect();n.classList.add("segment-button-indicator-animated");n.style.setProperty("transform","");this.scrollActiveButtonIntoView(true)}));this.value=s.value;this.setCheckedClasses()}setCheckedClasses(){const t=this.getButtons();const s=t.findIndex((t=>t.value===this.value));const i=s+1;for(const s of t){s.classList.remove("segment-button-after-checked")}if(i<t.length){t[i].classList.add("segment-button-after-checked")}}getSegmentView(){const t=this.getButtons();const s=t.find((t=>t.contentId));const i=document.querySelector(`ion-segment-content[id="${s===null||s===void 0?void 0:s.contentId}"]`);return i===null||i===void 0?void 0:i.closest("ion-segment-view")}handleSegmentViewScroll(t){const{scrollRatio:s,isManualScroll:i}=t.detail;if(!i){return}const e=t.target;const n=this.segmentViewEl;const o=this.el;if(t.composedPath().includes(n)||(e===null||e===void 0?void 0:e.contains(o))){const t=this.getButtons();if(!t.length)return;const i=t.findIndex((t=>t.value===this.value));const e=t[i];const n=Math.round(s*(t.length-1));if(this.lastNextIndex===undefined||this.lastNextIndex!==n){this.lastNextIndex=n;this.triggerScrollOnValueChange=false;this.checkButton(e,t[n]);this.emitValueChange()}}}updateSegmentView(t=true){const s=this.getButtons();const i=s.find((t=>t.value===this.value));if(!(i===null||i===void 0?void 0:i.contentId)){return}const e=this.segmentViewEl;if(e){e.setContent(i.contentId,t)}}scrollActiveButtonIntoView(t=true){const{scrollable:s,value:i,el:e}=this;if(s){const s=this.getButtons();const n=s.find((t=>t.value===i));if(n!==undefined){const s=e.getBoundingClientRect();const i=n.getBoundingClientRect();const o=i.x-s.x;const r=o-s.width/2+i.width/2;const a=e.scrollLeft+r;e.scrollTo({top:0,left:a,behavior:t?"smooth":"instant"})}}}setNextIndex(t,s=false){const i=a(this.el);const e=this.activated;const n=this.getButtons();const o=n.findIndex((t=>t.value===this.value));const r=n[o];let h;let c;if(o===-1){return}const l=r.getBoundingClientRect();const d=l.left;const u=l.width;const f=t.currentX;const g=l.top+l.height/2;const m=this.el.getRootNode();const b=m.elementFromPoint(f,g);const v=i?f>d+u:f<d;const p=i?f<d:f>d+u;if(e&&!s){if(v){const t=o-1;if(t>=0){c=t}}else if(p){if(e&&!s){const t=o+1;if(t<n.length){c=t}}}if(c!==undefined&&!n[c].disabled){h=n[c]}}if(!e&&s){h=b}if(h!=null){if(h.tagName==="ION-SEGMENT"){return false}if(r!==h){this.checkButton(r,h)}}return true}emitStyle(){this.ionStyle.emit({segment:true})}onKeyDown(t){const s=a(this.el);let i=this.selectOnFocus;let e;switch(t.key){case"ArrowRight":t.preventDefault();e=s?this.getSegmentButton("previous"):this.getSegmentButton("next");break;case"ArrowLeft":t.preventDefault();e=s?this.getSegmentButton("next"):this.getSegmentButton("previous");break;case"Home":t.preventDefault();e=this.getSegmentButton("first");break;case"End":t.preventDefault();e=this.getSegmentButton("last");break;case" ":case"Enter":t.preventDefault();e=document.activeElement;i=true}if(!e){return}if(i){const t=this.checked;this.checkButton(t||e,e);if(e!==t){this.emitValueChange()}}e.setFocus()}render(){const t=l(this);return e(n,{key:"a64e39352050b516f7dc82ce95a4bcff8431d1d0",role:"tablist",onClick:this.onClick,class:h(this.color,{[t]:true,"in-toolbar":c("ion-toolbar",this.el),"in-toolbar-color":c("ion-toolbar[color]",this.el),"segment-activated":this.activated,"segment-disabled":this.disabled,"segment-scrollable":this.scrollable})},e("slot",{key:"bb3f3ec30e59e0461fa620d8961ab730cc802a4e",onSlotchange:this.onSlottedItemsChange}))}get el(){return o(this)}static get watchers(){return{color:["colorChanged"],swipeGesture:["swipeGestureChanged"],value:["valueChanged"],disabled:["disabledChanged"]}}};m.style={ios:u,md:g};export{m as ion_segment};
//# sourceMappingURL=p-56653049.entry.js.map