test-isc/dist/ionic-selectable/p-10983f53.entry.js

An Ionic component similar to Ionic Select, that allows to search items, including async search, group, add, edit, delete items, and much more.

import{r as i,d as t,h as r,H as o,e}from"./p-aa742337.js";import{g as n}from"./p-bdcea876.js";import"./p-54ff9b40.js";import{c as a}from"./p-1e402e69.js";import"./p-f3a0c163.js";import{B as s,i as c,p as d,a as p,d as l,e as h,s as m}from"./p-a894deec.js";import{g as b}from"./p-5b51185b.js";const k=i=>{const t=a(),r=a(),o=a();return r.addElement(i.querySelector("ion-backdrop")).fromTo("opacity",.01,"var(--backdrop-opacity)").beforeStyles({"pointer-events":"none"}).afterClearStyles(["pointer-events"]),o.addElement(i.querySelector(".picker-wrapper")).fromTo("transform","translateY(100%)","translateY(0%)"),t.addElement(i).easing("cubic-bezier(.36,.66,.04,1)").duration(400).addAnimation([r,o])},g=i=>{const t=a(),r=a(),o=a();return r.addElement(i.querySelector("ion-backdrop")).fromTo("opacity","var(--backdrop-opacity)",.01),o.addElement(i.querySelector(".picker-wrapper")).fromTo("transform","translateY(0%)","translateY(100%)"),t.addElement(i).easing("cubic-bezier(.36,.66,.04,1)").duration(400).addAnimation([r,o])},u=class{constructor(r){i(this,r),this.presented=!1,this.keyboardClose=!0,this.buttons=[],this.columns=[],this.duration=0,this.showBackdrop=!0,this.backdropDismiss=!0,this.animated=!0,this.onBackdropTap=()=>{this.dismiss(void 0,s)},this.dispatchCancelHandler=i=>{if(c(i.detail.role)){const i=this.buttons.find(i=>"cancel"===i.role);this.callButtonHandler(i)}},d(this.el),this.didPresent=t(this,"ionPickerDidPresent",7),this.willPresent=t(this,"ionPickerWillPresent",7),this.willDismiss=t(this,"ionPickerWillDismiss",7),this.didDismiss=t(this,"ionPickerDidDismiss",7)}async present(){await p(this,"pickerEnter",k,k,void 0),this.duration>0&&(this.durationTimeout=setTimeout(()=>this.dismiss(),this.duration))}dismiss(i,t){return this.durationTimeout&&clearTimeout(this.durationTimeout),l(this,i,t,"pickerLeave",g,g)}onDidDismiss(){return h(this.el,"ionPickerDidDismiss")}onWillDismiss(){return h(this.el,"ionPickerWillDismiss")}getColumn(i){return Promise.resolve(this.columns.find(t=>t.name===i))}async buttonClick(i){const t=i.role;return c(t)?this.dismiss(void 0,t):await this.callButtonHandler(i)?this.dismiss(this.getSelected(),i.role):Promise.resolve()}async callButtonHandler(i){return!i||!1!==await m(i.handler,this.getSelected())}getSelected(){const i={};return this.columns.forEach((t,r)=>{const o=void 0!==t.selectedIndex?t.options[t.selectedIndex]:void 0;i[t.name]={text:o?o.text:void 0,value:o?o.value:void 0,columnIndex:r}}),i}render(){const i=n(this);return r(o,{"aria-modal":"true",tabindex:"-1",class:Object.assign({[i]:!0,["picker-"+i]:!0},b(this.cssClass)),style:{zIndex:""+(2e4+this.overlayIndex)},onIonBackdropTap:this.onBackdropTap,onIonPickerWillDismiss:this.dispatchCancelHandler},r("ion-backdrop",{visible:this.showBackdrop,tappable:this.backdropDismiss}),r("div",{class:"picker-wrapper",role:"dialog"},r("div",{class:"picker-toolbar"},this.buttons.map(i=>r("div",{class:f(i)},r("button",{type:"button",onClick:()=>this.buttonClick(i),class:v(i)},i.text)))),r("div",{class:"picker-columns"},r("div",{class:"picker-above-highlight"}),this.presented&&this.columns.map(i=>r("ion-picker-column",{col:i})),r("div",{class:"picker-below-highlight"}))))}get el(){return e(this)}},f=i=>({["picker-toolbar-"+i.role]:void 0!==i.role,"picker-toolbar-button":!0}),v=i=>Object.assign({"picker-button":!0,"ion-activatable":!0},b(i.cssClass));u.style={md:".sc-ion-picker-md-h{--border-radius:0;--border-style:solid;--min-width:auto;--width:100%;--max-width:500px;--min-height:auto;--max-height:auto;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;left:0;top:0;display:block;position:absolute;width:100%;height:100%;font-family:var(--ion-font-family, inherit);contain:strict;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1001}[dir=rtl].sc-ion-picker-md-h,[dir=rtl] .sc-ion-picker-md-h{left:unset;right:unset;right:0}.overlay-hidden.sc-ion-picker-md-h{display:none}.picker-wrapper.sc-ion-picker-md{border-radius:var(--border-radius);left:0;right:0;bottom:0;margin-left:auto;margin-right:auto;margin-top:auto;margin-bottom:auto;-webkit-transform:translate3d(0,  100%,  0);transform:translate3d(0,  100%,  0);display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);contain:strict;overflow:hidden;z-index:10}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.picker-wrapper.sc-ion-picker-md{margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto}}.picker-toolbar.sc-ion-picker-md{width:100%;background:transparent;contain:strict;z-index:1}.picker-button.sc-ion-picker-md{border:0;font-family:inherit}.picker-button.sc-ion-picker-md:active,.picker-button.sc-ion-picker-md:focus{outline:none}.picker-columns.sc-ion-picker-md{display:-ms-flexbox;display:flex;position:relative;-ms-flex-pack:center;justify-content:center;margin-bottom:var(--ion-safe-area-bottom, 0);contain:strict;direction:ltr;overflow:hidden}.picker-above-highlight.sc-ion-picker-md,.picker-below-highlight.sc-ion-picker-md{display:none;pointer-events:none}.sc-ion-picker-md-h{--background:var(--ion-background-color, #fff);--border-width:0.55px 0 0;--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))));--height:260px;--backdrop-opacity:var(--ion-backdrop-opacity, 0.26);color:var(--ion-item-color, var(--ion-text-color, #000))}.picker-toolbar.sc-ion-picker-md{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;height:44px}.picker-button.sc-ion-picker-md,.picker-button.ion-activated.sc-ion-picker-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:1.1em;padding-right:1.1em;padding-top:0;padding-bottom:0;height:44px;background:transparent;color:var(--ion-color-primary, #3880ff);font-size:14px;font-weight:500;text-transform:uppercase;-webkit-box-shadow:none;box-shadow:none}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.picker-button.sc-ion-picker-md,.picker-button.ion-activated.sc-ion-picker-md{padding-left:unset;padding-right:unset;-webkit-padding-start:1.1em;padding-inline-start:1.1em;-webkit-padding-end:1.1em;padding-inline-end:1.1em}}.picker-columns.sc-ion-picker-md{height:216px;-webkit-perspective:1800px;perspective:1800px}.picker-above-highlight.sc-ion-picker-md{left:0;top:0;-webkit-transform:translate3d(0,  0,  90px);transform:translate3d(0,  0,  90px);position:absolute;width:100%;height:81px;border-bottom:1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))));background:-webkit-gradient(linear, left top, left bottom, color-stop(20%, var(--ion-background-color, #fff)), to(rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8)));background:linear-gradient(to bottom, var(--ion-background-color, #fff) 20%, rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8) 100%);z-index:10}[dir=rtl].sc-ion-picker-md .picker-above-highlight.sc-ion-picker-md,[dir=rtl].sc-ion-picker-md-h .picker-above-highlight.sc-ion-picker-md,[dir=rtl] .sc-ion-picker-md-h .picker-above-highlight.sc-ion-picker-md{left:unset;right:unset;right:0}.picker-below-highlight.sc-ion-picker-md{left:0;top:115px;-webkit-transform:translate3d(0,  0,  90px);transform:translate3d(0,  0,  90px);position:absolute;width:100%;height:119px;border-top:1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))));background:-webkit-gradient(linear, left bottom, left top, color-stop(30%, var(--ion-background-color, #fff)), to(rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8)));background:linear-gradient(to top, var(--ion-background-color, #fff) 30%, rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8) 100%);z-index:11}[dir=rtl].sc-ion-picker-md .picker-below-highlight.sc-ion-picker-md,[dir=rtl].sc-ion-picker-md-h .picker-below-highlight.sc-ion-picker-md,[dir=rtl] .sc-ion-picker-md-h .picker-below-highlight.sc-ion-picker-md{left:unset;right:unset;right:0}"};export{u as ion_picker}