@six-group/ui-library 0.0.0-insider.9277796 → 0.0.0-insider.d16ec8e

package/dist/ui-library/p-5b3e6eb7.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as s,H as n,g as o}from"./p-187fbba0.js";const r=":host{display:grid;grid-template-columns:repeat(var(--no-of-columns), 1fr);grid-column-gap:1rem}";const e=class{constructor(s){t(this,s);this.columns=undefined}handleColumnsChange(){if(typeof this.columns!=="number"||this.columns===0){this.columns=12}this.host.style.setProperty("--no-of-columns",String(this.columns))}componentWillLoad(){this.handleColumnsChange()}render(){return s(n,null,s("slot",null))}get host(){return o(this)}static get watchers(){return{columns:["handleColumnsChange"]}}};e.style=r;export{e as six_layout_grid};
+//# sourceMappingURL=p-5b3e6eb7.entry.js.map

package/dist/ui-library/p-5b3e6eb7.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sixLayoutGridCss","SixLayoutGrid","handleColumnsChange","this","columns","host","style","setProperty","String","componentWillLoad","render","h","Host"],"sources":["./src/components/six-layout-grid/six-layout-grid.scss?tag=six-layout-grid&encapsulation=shadow","./src/components/six-layout-grid/six-layout-grid.tsx"],"sourcesContent":[":host {\n  display: grid;\n  grid-template-columns: repeat(var(--no-of-columns), 1fr);\n  grid-column-gap: 1rem;\n}\n","import { Component, Element, h, Host, Prop, Watch } from '@stencil/core';\n\n/**\n * @since 1.01\n * @status stable\n *\n * @slot - The grid's content\n */\n\n@Component({\n  tag: 'six-layout-grid',\n  styleUrl: 'six-layout-grid.scss',\n  shadow: true,\n})\nexport class SixLayoutGrid {\n  @Element() host!: HTMLSixLayoutGridElement;\n\n  /** Set the number of grid columns */\n  @Prop({ mutable: true }) columns?: number;\n\n  @Watch('columns')\n  handleColumnsChange() {\n    if (typeof this.columns !== 'number' || this.columns === 0) {\n      this.columns = 12;\n    }\n    this.host.style.setProperty('--no-of-columns', String(this.columns));\n  }\n\n  componentWillLoad() {\n    this.handleColumnsChange();\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAmB,mG,MCcZC,EAAa,M,gDAOxBC,sBACE,UAAWC,KAAKC,UAAY,UAAYD,KAAKC,UAAY,EAAG,CAC1DD,KAAKC,QAAU,E,CAEjBD,KAAKE,KAAKC,MAAMC,YAAY,kBAAmBC,OAAOL,KAAKC,S,CAG7DK,oBACEN,KAAKD,qB,CAGPQ,SACE,OACEC,EAACC,EAAI,KACHD,EAAA,a"}

package/dist/ui-library/{p-8a970a40.entry.js → p-5c1dd25a.entry.js}

@@ -1,2 +1,2 @@
-import{r as o,h as t,g as l}from"./p-ac4f4d45.js";import{F as r}from"./p-79eee01b.js";import{h as e}from"./p-b4dfb7cf.js";const s=':host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none}.form-control--has-label .form-control__label{display:inline-block;color:var(--six-input-label-color);font-weight:var(--six-font-weight-bold);margin-bottom:var(--six-spacing-x-small)}.form-control--has-label .form-control__label__required::after{color:var(--six-color-danger-800);content:"*"}.form-control--has-label.form-control--small .form-control__label{font-size:var(--six-input-label-font-size-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--six-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control_label{font-size:var(--six-input-label-font-size-large)}.form-control--has-help-text .form-control__help-text{display:block;color:var(--six-input-help-text-color);margin-top:var(--six-spacing-x-small)}.form-control--has-help-text .form-control__help-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--has-error-text .form-control__error-text{display:block;color:var(--six-color-danger-800);margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text .form-control__error-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text.form-control--small .form-control__error-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-error-text.form-control--medium .form-control__error-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-error-text.form-control--large .form-control__error-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--disabled .form-control__help-text{color:var(--six-input-help-text-color-disabled)}.form-control--disabled .form-control__label{color:var(--six-input-label-color-disabled)}.form-control--invalid:not(.form-control--disabled) .form-control__label{color:var(--six-input-label-color)}:host{display:block}';let i=0;const a=class{constructor(t){o(this,t);this.wrapperLabelId=`label-${++i}`;this.labelId=`label-label-${i}`;this.helpTextId=`label-help-text-${i}`;this.hasHelpTextSlot=false;this.hasLabelSlot=false;this.size="medium";this.label="";this.helpText="";this.disabled=false;this.required=undefined}handleLabelChange(){this.handleSlotChange()}connectedCallback(){this.handleSlotChange=this.handleSlotChange.bind(this);this.host.shadowRoot.addEventListener("slotchange",this.handleSlotChange)}componentWillLoad(){this.handleSlotChange()}disconnectedCallback(){this.host.shadowRoot.removeEventListener("slotchange",this.handleSlotChange)}handleSlotChange(){this.hasLabelSlot=e(this.host,"label");this.hasHelpTextSlot=e(this.host,"help-text")}render(){return t(r,{inputId:this.wrapperLabelId,label:this.label,labelId:this.labelId,hasLabelSlot:this.hasLabelSlot,helpTextId:this.helpTextId,helpText:this.helpText,hasHelpTextSlot:this.hasHelpTextSlot,size:this.size,disabled:this.disabled,required:this.required},t("slot",null))}get host(){return l(this)}static get watchers(){return{helpText:["handleLabelChange"],label:["handleLabelChange"]}}};a.style=s;export{a as six_group_label};
-//# sourceMappingURL=p-8a970a40.entry.js.map
+import{r as o,h as t,g as l}from"./p-187fbba0.js";import{F as r}from"./p-b183e44f.js";import{h as e}from"./p-d87a6f4d.js";const s=':host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none}.form-control--has-label .form-control__label{display:inline-block;color:var(--six-input-label-color);font-weight:var(--six-font-weight-bold);margin-bottom:var(--six-spacing-x-small)}.form-control--has-label .form-control__label__required::after{color:var(--six-color-danger-800);content:"*"}.form-control--has-label.form-control--small .form-control__label{font-size:var(--six-input-label-font-size-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--six-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control_label{font-size:var(--six-input-label-font-size-large)}.form-control--has-help-text .form-control__help-text{display:block;color:var(--six-input-help-text-color);margin-top:var(--six-spacing-x-small)}.form-control--has-help-text .form-control__help-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--has-error-text .form-control__error-text{display:block;color:var(--six-color-danger-800);margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text .form-control__error-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text.form-control--small .form-control__error-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-error-text.form-control--medium .form-control__error-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-error-text.form-control--large .form-control__error-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--disabled .form-control__help-text{color:var(--six-input-help-text-color-disabled)}.form-control--disabled .form-control__label{color:var(--six-input-label-color-disabled)}.form-control--invalid:not(.form-control--disabled) .form-control__label{color:var(--six-input-label-color)}:host{display:block}';let i=0;const a=class{constructor(t){o(this,t);this.wrapperLabelId=`label-${++i}`;this.labelId=`label-label-${i}`;this.helpTextId=`label-help-text-${i}`;this.handleSlotChange=()=>{this.hasLabelSlot=e(this.host,"label");this.hasHelpTextSlot=e(this.host,"help-text")};this.hasHelpTextSlot=false;this.hasLabelSlot=false;this.size="medium";this.label="";this.helpText="";this.disabled=false;this.required=false}handleLabelChange(){this.handleSlotChange()}connectedCallback(){var o;(o=this.host.shadowRoot)===null||o===void 0?void 0:o.addEventListener("slotchange",this.handleSlotChange)}componentWillLoad(){this.handleSlotChange()}disconnectedCallback(){var o;(o=this.host.shadowRoot)===null||o===void 0?void 0:o.removeEventListener("slotchange",this.handleSlotChange)}render(){return t(r,{inputId:this.wrapperLabelId,label:this.label,labelId:this.labelId,hasLabelSlot:this.hasLabelSlot,helpTextId:this.helpTextId,helpText:this.helpText,hasHelpTextSlot:this.hasHelpTextSlot,size:this.size,disabled:this.disabled,required:this.required},t("slot",null))}get host(){return l(this)}static get watchers(){return{helpText:["handleLabelChange"],label:["handleLabelChange"]}}};a.style=s;export{a as six_group_label};
+//# sourceMappingURL=p-5c1dd25a.entry.js.map

package/dist/ui-library/p-5c1dd25a.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sixGroupLabelCss","id","SixGroupLabel","this","wrapperLabelId","labelId","helpTextId","handleSlotChange","hasLabelSlot","hasSlot","host","hasHelpTextSlot","handleLabelChange","connectedCallback","_a","shadowRoot","addEventListener","componentWillLoad","disconnectedCallback","removeEventListener","render","h","FormControl","inputId","label","helpText","size","disabled","required"],"sources":["./src/components/six-group-label/six-group-label.scss?tag=six-group-label&encapsulation=shadow","./src/components/six-group-label/six-group-label.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n  display: block;\n}\n","import { Component, Element, h, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\n\nlet id = 0;\n\n/**\n * @since 1.1\n * @status stable\n *\n * @slot label - The wrapped component's label. Alternatively, you can use the label prop.\n * @slot help-text - Help text that describes how to use the input.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n *\n * @part base - The component's base wrapper.\n * @part form-control - The form control that wraps the label, textarea, and help text.\n * @part label - The label of wrapped component.\n * @part help-text - The help text of the wrapped component.\n */\n@Component({\n  tag: 'six-group-label',\n  styleUrl: 'six-group-label.scss',\n  shadow: true,\n})\nexport class SixGroupLabel {\n  private wrapperLabelId = `label-${++id}`;\n  private labelId = `label-label-${id}`;\n  private helpTextId = `label-help-text-${id}`;\n\n  @Element() host!: HTMLSixGroupLabelElement;\n\n  @State() hasHelpTextSlot = false;\n  @State() hasLabelSlot = false;\n\n  /** The label's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** The wrapper label's label. Alternatively, you can use the label slot. */\n  @Prop() label = '';\n\n  /** The wrapper label's help text. Alternatively, you can use the help-text slot. */\n  @Prop() helpText = '';\n\n  /** Set to true to disable the label. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The label's required attribute. */\n  @Prop({ reflect: true }) required = false;\n\n  @Watch('helpText')\n  @Watch('label')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  connectedCallback() {\n    this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  disconnectedCallback() {\n    this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n  }\n\n  private handleSlotChange = () => {\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n    this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n  };\n\n  render() {\n    return (\n      <FormControl\n        inputId={this.wrapperLabelId}\n        label={this.label}\n        labelId={this.labelId}\n        hasLabelSlot={this.hasLabelSlot}\n        helpTextId={this.helpTextId}\n        helpText={this.helpText}\n        hasHelpTextSlot={this.hasHelpTextSlot}\n        size={this.size}\n        disabled={this.disabled}\n        required={this.required}\n      >\n        <slot></slot>\n      </FormControl>\n    );\n  }\n}\n"],"mappings":"0HAAA,MAAMA,EAAmB,u7ECIzB,IAAIC,EAAK,E,MAoBIC,EAAa,M,yBAChBC,KAAAC,eAAiB,WAAWH,IAC5BE,KAAAE,QAAU,eAAeJ,IACzBE,KAAAG,WAAa,mBAAmBL,IAwChCE,KAAAI,iBAAmB,KACzBJ,KAAKK,aAAeC,EAAQN,KAAKO,KAAM,SACvCP,KAAKQ,gBAAkBF,EAAQN,KAAKO,KAAM,YAAY,E,qBAtC7B,M,kBACH,M,UAGsC,S,WAG9C,G,cAGG,G,cAGiB,M,cAGA,K,CAIpCE,oBACET,KAAKI,kB,CAGPM,oB,OACEC,EAAAX,KAAKO,KAAKK,cAAU,MAAAD,SAAA,SAAAA,EAAEE,iBAAiB,aAAcb,KAAKI,iB,CAG5DU,oBACEd,KAAKI,kB,CAGPW,uB,OACEJ,EAAAX,KAAKO,KAAKK,cAAU,MAAAD,SAAA,SAAAA,EAAEK,oBAAoB,aAAchB,KAAKI,iB,CAQ/Da,SACE,OACEC,EAACC,EAAW,CACVC,QAASpB,KAAKC,eACdoB,MAAOrB,KAAKqB,MACZnB,QAASF,KAAKE,QACdG,aAAcL,KAAKK,aACnBF,WAAYH,KAAKG,WACjBmB,SAAUtB,KAAKsB,SACfd,gBAAiBR,KAAKQ,gBACtBe,KAAMvB,KAAKuB,KACXC,SAAUxB,KAAKwB,SACfC,SAAUzB,KAAKyB,UAEfP,EAAA,a"}

package/dist/ui-library/p-5c60227f.entry.js

@@ -0,0 +1,2 @@
+import{r as i,c as t,h as s,g as a}from"./p-187fbba0.js";import{u as o,l as e}from"./p-eb8f05a9.js";import{h as l}from"./p-d87a6f4d.js";import{i as r,M as n}from"./p-ba74863a.js";const h=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{--width:31rem;display:contents}.dialog{display:flex;align-items:center;justify-content:center;position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--six-z-index-dialog);color:var(--six-color-web-rock-900)}.dialog:not(.dialog--visible){position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.dialog__panel{display:flex;flex-direction:column;z-index:2;width:var(--width);max-width:calc(100% - var(--six-spacing-xx-large));max-height:calc(100% - var(--six-spacing-xx-large));background-color:var(--six-panel-background-color);border-radius:var(--six-border-radius-medium);box-shadow:var(--six-shadow-x-large);opacity:0;transform:scale(0.8);transition:var(--six-transition-medium) opacity, var(--six-transition-medium) transform}.dialog__panel:focus{outline:none}@media screen and (max-width: 420px){.dialog__panel{max-height:80vh}}.dialog--open .dialog__panel{display:flex;opacity:1;transform:none}.dialog__header{flex:0 0 auto;display:flex}.dialog__title{flex:1 1 auto;font-size:var(--six-font-size-x-large);font-weight:var(--six-font-weight-bold);line-height:var(--six-line-height-dense);padding:var(--six-spacing-large) var(--six-spacing-large) var(--six-spacing-small)}.dialog__close{flex:0 0 auto;display:flex;align-items:center;font-size:var(--six-font-size-x-large);padding:0 var(--six-spacing-x-small)}.dialog__body{flex:1 1 auto;padding:var(--six-spacing-small) var(--six-spacing-large) var(--six-spacing-large);overflow:auto;-webkit-overflow-scrolling:touch}.dialog__footer{flex:0 0 auto;text-align:right;padding:var(--six-spacing-large)}.dialog__footer ::slotted(six-button:not(:first-of-type)){margin-left:var(--six-spacing-xx-small)}.dialog:not(.dialog--has-footer) .dialog__footer{display:none}.dialog__overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--six-overlay-background-color);opacity:0;transition:var(--six-transition-medium) opacity}.dialog--open .dialog__overlay{opacity:0.8}";const d=r();let g=0;const c=class{constructor(s){i(this,s);this.sixShow=t(this,"six-dialog-show",7);this.sixAfterShow=t(this,"six-dialog-after-show",7);this.sixHide=t(this,"six-dialog-hide",7);this.sixAfterHide=t(this,"six-dialog-after-hide",7);this.sixInitialFocus=t(this,"six-dialog-initial-focus",7);this.sixOverlayDismiss=t(this,"six-dialog-overlay-dismiss",7);this.componentId=`dialog-${++g}`;this.willShow=false;this.willHide=false;this.handleCloseClick=()=>{this.hide()};this.handleKeyDown=i=>{if(i.key==="Escape"){this.hide()}};this.handleOverlayClick=()=>{const i=this.sixOverlayDismiss.emit();if(!i.defaultPrevented){this.hide()}};this.handleSlotChange=()=>{this.hasFooter=l(this.host,"footer")};this.handleTransitionEnd=i=>{const t=i.target;if(i.propertyName==="opacity"&&t.classList.contains("dialog__panel")){this.isVisible=this.open;this.willShow=false;this.willHide=false;this.open?this.sixAfterShow.emit():this.sixAfterHide.emit()}};this.hasFooter=false;this.isVisible=false;this.open=false;this.label="";this.noHeader=false}handleOpenChange(){this.open?this.show():this.hide()}connectedCallback(){this.modal=new n(this.host,{onFocusOut:()=>{var i;return(i=this.panel)===null||i===void 0?void 0:i.focus()}})}componentWillLoad(){this.handleSlotChange();if(this.open){this.show()}}disconnectedCallback(){o(this.host)}async show(){if(this.willShow||this.modal==null||this.panel==null||this.dialog==null){return}const i=this.panel;const t=this.sixShow.emit();if(t.defaultPrevented){this.open=false;return}this.willShow=true;this.isVisible=true;this.open=true;this.modal.activate();e(this.host);if(this.open){if(d){requestAnimationFrame((()=>{const t=this.sixInitialFocus.emit();if(!t.defaultPrevented){i.focus({preventScroll:true})}}))}else{this.dialog.addEventListener("transitionend",(()=>{const t=this.sixInitialFocus.emit();if(!t.defaultPrevented){i.focus()}}),{once:true})}}}async hide(){if(this.willHide||this.modal==null){return}const i=this.sixHide.emit();if(i.defaultPrevented){this.open=true;return}this.willHide=true;this.open=false;this.modal.deactivate();o(this.host)}render(){return s("div",{ref:i=>this.dialog=i,part:"base",class:{dialog:true,"dialog--open":this.open,"dialog--visible":this.isVisible,"dialog--has-footer":this.hasFooter},onKeyDown:this.handleKeyDown,onTransitionEnd:this.handleTransitionEnd},s("div",{part:"overlay",class:"dialog__overlay",onClick:this.handleOverlayClick}),s("div",{ref:i=>this.panel=i,part:"panel",class:"dialog__panel",role:"dialog","aria-modal":"true","aria-hidden":this.open?"false":"true","aria-label":this.noHeader?this.label:null,"aria-labelledby":!this.noHeader?`${this.componentId}-title`:null,tabIndex:0},!this.noHeader&&s("header",{part:"header",class:"dialog__header"},s("span",{part:"title",class:"dialog__title",id:`${this.componentId}-title`},s("slot",{name:"label"},this.label||String.fromCharCode(65279))),s("six-icon-button",{exportparts:"base:close-button",class:"dialog__close",name:"close",onClick:this.handleCloseClick})),s("div",{part:"body",class:"dialog__body"},s("slot",null)),s("footer",{part:"footer",class:"dialog__footer"},s("slot",{name:"footer",onSlotchange:this.handleSlotChange}))))}get host(){return a(this)}static get watchers(){return{open:["handleOpenChange"]}}};c.style=h;export{c as six_dialog};
+//# sourceMappingURL=p-5c60227f.entry.js.map

package/dist/ui-library/p-5c60227f.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sixDialogCss","hasPreventScroll","isPreventScrollSupported","id","SixDialog","this","componentId","willShow","willHide","handleCloseClick","hide","handleKeyDown","event","key","handleOverlayClick","sixOverlayDismiss","emit","defaultPrevented","handleSlotChange","hasFooter","hasSlot","host","handleTransitionEnd","target","propertyName","classList","contains","isVisible","open","sixAfterShow","sixAfterHide","handleOpenChange","show","connectedCallback","modal","Modal","onFocusOut","_a","panel","focus","componentWillLoad","disconnectedCallback","unlockBodyScrolling","async","dialog","sixShow","activate","lockBodyScrolling","requestAnimationFrame","sixInitialFocus","preventScroll","addEventListener","once","sixHide","deactivate","render","h","ref","el","part","class","onKeyDown","onTransitionEnd","onClick","role","noHeader","label","tabIndex","name","String","fromCharCode","exportparts","onSlotchange"],"sources":["./src/components/six-dialog/six-dialog.scss?tag=six-dialog&encapsulation=shadow","./src/components/six-dialog/six-dialog.tsx"],"sourcesContent":["@import 'src/global/component';\n@import 'src/global/mixins/hidden';\n\n/**\n * @prop --width: The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.\n */\n:host {\n  --width: 31rem;\n\n  display: contents;\n}\n\n.dialog {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: var(--six-z-index-dialog);\n  color: var(--six-color-web-rock-900);\n\n  &:not(.dialog--visible) {\n    @include hidden;\n  }\n}\n\n.dialog__panel {\n  display: flex;\n  flex-direction: column;\n  z-index: 2;\n  width: var(--width);\n  max-width: calc(100% - var(--six-spacing-xx-large));\n  max-height: calc(100% - var(--six-spacing-xx-large));\n  background-color: var(--six-panel-background-color);\n  border-radius: var(--six-border-radius-medium);\n  box-shadow: var(--six-shadow-x-large);\n  opacity: 0;\n  transform: scale(0.8);\n  transition: var(--six-transition-medium) opacity, var(--six-transition-medium) transform;\n\n  &:focus {\n    outline: none;\n  }\n}\n\n// Ensure there's enough vertical padding for phones that don't update vh when chrome appears (e.g. iPhone)\n@media screen and (max-width: 420px) {\n  .dialog__panel {\n    max-height: 80vh;\n  }\n}\n\n.dialog--open .dialog__panel {\n  display: flex;\n  opacity: 1;\n  transform: none;\n}\n\n.dialog__header {\n  flex: 0 0 auto;\n  display: flex;\n}\n\n.dialog__title {\n  flex: 1 1 auto;\n  font-size: var(--six-font-size-x-large);\n  font-weight: var(--six-font-weight-bold);\n  line-height: var(--six-line-height-dense);\n  padding: var(--six-spacing-large) var(--six-spacing-large) var(--six-spacing-small);\n}\n\n.dialog__close {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: var(--six-font-size-x-large);\n  padding: 0 var(--six-spacing-x-small);\n}\n\n.dialog__body {\n  flex: 1 1 auto;\n  padding: var(--six-spacing-small) var(--six-spacing-large) var(--six-spacing-large);\n  overflow: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n.dialog__footer {\n  flex: 0 0 auto;\n  text-align: right;\n  padding: var(--six-spacing-large);\n\n  ::slotted(six-button:not(:first-of-type)) {\n    margin-left: var(--six-spacing-xx-small);\n  }\n}\n\n.dialog:not(.dialog--has-footer) .dialog__footer {\n  display: none;\n}\n\n.dialog__overlay {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: var(--six-overlay-background-color);\n  opacity: 0;\n  transition: var(--six-transition-medium) opacity;\n}\n\n.dialog--open .dialog__overlay {\n  opacity: 0.8;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport { hasSlot } from '../../utils/slot';\nimport { isPreventScrollSupported } from '../../utils/support';\nimport Modal from '../../utils/modal';\nimport { EmptyPayload } from '../../utils/types';\n\nconst hasPreventScroll = isPreventScrollSupported();\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The dialog's content.\n * @slot label - The dialog's label. Alternatively, you can use the label prop.\n * @slot footer - The dialog's footer, usually one or more buttons representing various options.\n *\n * @part base - The component's base wrapper.\n * @part overlay - The overlay.\n * @part panel - The dialog panel (where the dialog and its content is rendered).\n * @part header - The dialog header.\n * @part title - The dialog title.\n * @part close-button - The close button.\n * @part body - The dialog body.\n * @part footer - The dialog footer.\n *\n */\n@Component({\n  tag: 'six-dialog',\n  styleUrl: 'six-dialog.scss',\n  shadow: true,\n})\nexport class SixDialog {\n  private componentId = `dialog-${++id}`;\n  private dialog?: HTMLElement;\n  private modal?: Modal;\n  private panel?: HTMLElement;\n  private willShow = false;\n  private willHide = false;\n\n  @Element() host!: HTMLSixDialogElement;\n\n  @State() hasFooter = false;\n  @State() isVisible = false;\n\n  /** Indicates whether the dialog is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /**\n   * The dialog's label as displayed in the header. You should always include a relevant label even when using\n   * `no-header`, as it is required for proper accessibility.\n   */\n  @Prop() label = '';\n\n  /**\n   * Set to true to disable the header. This will also remove the default close button, so please ensure you provide an\n   * easy, accessible way for users to dismiss the dialog.\n   */\n  @Prop() noHeader = false;\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  /** Emitted when the dialog opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event({ eventName: 'six-dialog-show' }) sixShow!: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the dialog opens and all transitions are complete. */\n  @Event({ eventName: 'six-dialog-after-show' }) sixAfterShow!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the dialog closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event({ eventName: 'six-dialog-hide' }) sixHide!: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the dialog closes and all transitions are complete. */\n  @Event({ eventName: 'six-dialog-after-hide' }) sixAfterHide!: EventEmitter<EmptyPayload>;\n\n  /**\n   * Emitted when the dialog opens and the panel gains focus. Calling `event.preventDefault()` will prevent focus and\n   * allow you to set it on a different element in the dialog, such as an input or button.\n   */\n  @Event({ eventName: 'six-dialog-initial-focus' }) sixInitialFocus!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the dialog from closing. */\n  @Event({ eventName: 'six-dialog-overlay-dismiss' }) sixOverlayDismiss!: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    this.modal = new Modal(this.host, {\n      onFocusOut: () => this.panel?.focus(),\n    });\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n\n    // Show on init if open\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  disconnectedCallback() {\n    unlockBodyScrolling(this.host);\n  }\n\n  /** Shows the dialog */\n  @Method()\n  async show() {\n    if (this.willShow || this.modal == null || this.panel == null || this.dialog == null) {\n      return;\n    }\n    const panel = this.panel;\n\n    const sixShow = this.sixShow.emit();\n    if (sixShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.willShow = true;\n    this.isVisible = true;\n    this.open = true;\n    this.modal.activate();\n\n    lockBodyScrolling(this.host);\n\n    if (this.open) {\n      if (hasPreventScroll) {\n        // Wait for the next frame before setting initial focus so the dialog is technically visible\n        requestAnimationFrame(() => {\n          const sixInitialFocus = this.sixInitialFocus.emit();\n          if (!sixInitialFocus.defaultPrevented) {\n            panel.focus({ preventScroll: true });\n          }\n        });\n      } else {\n        // Once Safari supports { preventScroll: true } we can remove this nasty little hack, but until then we need to\n        // wait for the transition to complete before setting focus, otherwise the panel may render in a buggy way its\n        // out of view initially.\n        //\n        // Fiddle: https://jsfiddle.net/g6buoafq/1/\n        // Safari: https://bugs.webkit.org/show_bug.cgi?id=178583\n        //\n        this.dialog.addEventListener(\n          'transitionend',\n          () => {\n            const sixInitialFocus = this.sixInitialFocus.emit();\n            if (!sixInitialFocus.defaultPrevented) {\n              panel.focus();\n            }\n          },\n          { once: true }\n        );\n      }\n    }\n  }\n\n  /** Hides the dialog */\n  @Method()\n  async hide() {\n    if (this.willHide || this.modal == null) {\n      return;\n    }\n\n    const sixHide = this.sixHide.emit();\n    if (sixHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.willHide = true;\n    this.open = false;\n    this.modal.deactivate();\n\n    unlockBodyScrolling(this.host);\n  }\n\n  private handleCloseClick = () => {\n    this.hide();\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Escape') {\n      this.hide();\n    }\n  };\n\n  private handleOverlayClick = () => {\n    const sixOverlayDismiss = this.sixOverlayDismiss.emit();\n\n    if (!sixOverlayDismiss.defaultPrevented) {\n      this.hide();\n    }\n  };\n\n  private handleSlotChange = () => {\n    this.hasFooter = hasSlot(this.host, 'footer');\n  };\n\n  private handleTransitionEnd = (event: TransitionEvent) => {\n    const target = event.target as HTMLElement;\n\n    // Ensure we only emit one event when the target element is no longer visible\n    if (event.propertyName === 'opacity' && target.classList.contains('dialog__panel')) {\n      this.isVisible = this.open;\n      this.willShow = false;\n      this.willHide = false;\n      this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n    }\n  };\n\n  render() {\n    return (\n      <div\n        ref={(el) => (this.dialog = el)}\n        part=\"base\"\n        class={{\n          dialog: true,\n          'dialog--open': this.open,\n          'dialog--visible': this.isVisible,\n          'dialog--has-footer': this.hasFooter,\n        }}\n        onKeyDown={this.handleKeyDown}\n        onTransitionEnd={this.handleTransitionEnd}\n      >\n        <div part=\"overlay\" class=\"dialog__overlay\" onClick={this.handleOverlayClick} />\n\n        <div\n          ref={(el) => (this.panel = el)}\n          part=\"panel\"\n          class=\"dialog__panel\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-hidden={this.open ? 'false' : 'true'}\n          aria-label={this.noHeader ? this.label : null}\n          aria-labelledby={!this.noHeader ? `${this.componentId}-title` : null}\n          tabIndex={0}\n        >\n          {!this.noHeader && (\n            <header part=\"header\" class=\"dialog__header\">\n              <span part=\"title\" class=\"dialog__title\" id={`${this.componentId}-title`}>\n                <slot name=\"label\">\n                  {/* If there's no label, use an invisible character to prevent the heading from collapsing */}\n                  {this.label || String.fromCharCode(65279)}\n                </slot>\n              </span>\n              <six-icon-button\n                exportparts=\"base:close-button\"\n                class=\"dialog__close\"\n                name=\"close\"\n                onClick={this.handleCloseClick}\n              />\n            </header>\n          )}\n\n          <div part=\"body\" class=\"dialog__body\">\n            <slot />\n          </div>\n\n          <footer part=\"footer\" class=\"dialog__footer\">\n            <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n          </footer>\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/ui-library/p-5dc40a6a.entry.js

@@ -0,0 +1,2 @@
+import{r as i,c as s,h as l,g as e}from"./p-187fbba0.js";const o=".sc-six-file-upload-h{position:relative;box-sizing:border-box}.sc-six-file-upload-h *.sc-six-file-upload,.sc-six-file-upload-h *.sc-six-file-upload:before,.sc-six-file-upload-h *.sc-six-file-upload:after{box-sizing:inherit}.sc-six-file-upload-h{position:static;display:block}.six-file-upload.sc-six-file-upload six-card.sc-six-file-upload{box-shadow:none;padding:0;width:100%}.six-file-upload.sc-six-file-upload six-card.kyc-file-upload__container--compact.sc-six-file-upload{width:inherit}.six-file-upload__label--highlighted.sc-six-file-upload{color:var(--six-color-action-600)}.six-file-upload__container--full.sc-six-file-upload{border:dashed 1px var(--six-color-web-rock-500)}.six-file-upload__label-icon.sc-six-file-upload{margin-right:0.5rem}.six-file-upload__drop-zone.sc-six-file-upload{padding:2rem 0;display:flex;justify-content:center;width:100%;transition:background-color 0.3s}.six-file-upload__drop-zone--compact.sc-six-file-upload{padding:0}.six-file-upload__input.sc-six-file-upload{cursor:pointer;position:absolute;top:0;left:0;width:100%;user-select:none;height:100%;opacity:0;outline:none}.six-file-upload--disabled.sc-six-file-upload .six-file-upload__drop-zone.sc-six-file-upload{background-color:var(--six-color-inactive)}.six-file-upload.sc-six-file-upload:not(.six-file-upload--disabled) .six-file-upload__drop-zone.sc-six-file-upload:hover,.six-file-upload__drop-zone--hover.sc-six-file-upload{background-color:var(--six-color-action-light-to-be-defined)}.six-file-upload.sc-six-file-upload:not(.six-file-upload--disabled) .six-file-upload__drop-zone.sc-six-file-upload:hover.six-file-upload__drop-zone--compact,.six-file-upload__drop-zone--hover.six-file-upload__drop-zone--compact.sc-six-file-upload{background-color:inherit}.six-file-upload--disabled.sc-six-file-upload .six-file-upload__input.sc-six-file-upload{cursor:not-allowed}";const a=class{constructor(l){i(this,l);this.success=s(this,"six-file-upload-success",7);this.failure=s(this,"six-file-upload-failure",7);this.handleFiles=i=>{if(this.disabled||i.length===0){return}if(!this.multiple&&i.length>1){return this.failure.emit({reason:"Only one file is allowed."})}for(const s of i){if(s==null){return}let l=[];if(this.accept!=null){l=this.accept.replace(/\s/g,"").split(",")}if(l.length>0&&l.indexOf(s.type)===-1){const s=i.length>1?"One or more files have invalid MIME type.":"File has invalid MIME type.";return this.failure.emit({reason:s})}if(this.maxFileSize!=null&&s.size>this.maxFileSize){const s=i.length>1?"One or more files are too big":"File is too big.";return this.failure.emit({reason:s})}}const s=this.multiple?{files:i}:{file:i[0]};this.success.emit(s)};this.onChange=()=>{var i;if(((i=this.fileInput)===null||i===void 0?void 0:i.files)!=null){const i=this.fileInput.files;this.handleFiles(i);this.fileInput.value=""}};this.isOver=false;this.compact=false;this.label=undefined;this.disabled=false;this.accept=undefined;this.multiple=false;this.maxFileSize=undefined}dragenterHandler(){if(!this.disabled){this.isOver=true}}dragoverHandler(){if(!this.disabled){this.isOver=true}}dragleaveHandler(){if(!this.disabled){this.isOver=false}}dropHandler({dataTransfer:i}){if(!this.disabled){this.isOver=false;if(i!=null){this.handleFiles(i.files)}}}componentDidLoad(){["dragenter","dragover","dragleave","drop"].forEach((i=>{this.host.addEventListener(i,this.preventDefaults,false);document.body.addEventListener(i,this.preventDefaults,false)}))}disconnectedCallback(){["dragenter","dragover","dragleave","drop"].forEach((i=>{this.host.removeEventListener(i,this.preventDefaults,false);document.body.removeEventListener(i,this.preventDefaults,false)}))}preventDefaults(i){i.preventDefault();i.stopPropagation()}renderLabel(){var i;return(i=this.label)!==null&&i!==void 0?i:this.compact?"Upload":l("span",null,"Drop files to upload, or ",l("span",{class:"six-file-upload__label--highlighted"},"browse"))}render(){const i=this.compact?"six-button":"six-card";return l("div",{class:{"six-file-upload":true,"six-file-upload--disabled":this.disabled}},l(i,{class:{"six-file-upload__container--compact":this.compact,"six-file-upload__container--full":!this.compact}},this.compact&&l("span",{slot:"prefix"},l("six-icon",{class:"six-file-upload__label-icon"},"arrow_circle_up")),l("div",{class:{"six-file-upload__drop-zone":true,"six-file-upload__drop-zone--hover":this.isOver,"six-file-upload__drop-zone--compact":this.compact}},l("span",null,this.renderLabel()),l("input",{class:"six-file-upload__input",type:"file",name:"resume",disabled:this.disabled,accept:this.accept,multiple:this.multiple,onChange:this.onChange,ref:i=>this.fileInput=i}))))}get host(){return e(this)}};a.style=o;export{a as six_file_upload};
+//# sourceMappingURL=p-5dc40a6a.entry.js.map

package/dist/ui-library/p-5dc40a6a.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sixFileUploadCss","SixFileUpload","this","handleFiles","files","disabled","length","multiple","failure","emit","reason","file","acceptedTypesList","accept","replace","split","indexOf","type","maxFileSize","size","eventPayload","success","onChange","_a","fileInput","value","dragenterHandler","isOver","dragoverHandler","dragleaveHandler","dropHandler","dataTransfer","componentDidLoad","forEach","eventName","host","addEventListener","preventDefaults","document","body","disconnectedCallback","removeEventListener","e","preventDefault","stopPropagation","renderLabel","label","compact","h","class","render","Container","slot","name","ref","el"],"sources":["./src/components/six-file-upload/six-file-upload.scss?tag=six-file-upload&encapsulation=scoped","./src/components/six-file-upload/six-file-upload.tsx"],"sourcesContent":["@import 'src/global/component';\n\n$over-color: var(--six-color-action-light-to-be-defined);\n$disabled-color: var(--six-color-inactive);\n$transition: 0.3s;\n$margin: 1rem;\n\n:host {\n  position: static;\n  display: block;\n}\n\n.six-file-upload {\n  six-card {\n    box-shadow: none;\n    padding: 0;\n    width: 100%;\n\n    &.kyc-file-upload__container--compact {\n      width: inherit;\n    }\n  }\n\n  &__label {\n    &--highlighted {\n      color: var(--six-color-action-600);\n    }\n  }\n\n  &__container {\n    &--full {\n      border: dashed 1px var(--six-color-web-rock-500);\n    }\n  }\n\n  &__label-icon {\n    margin-right: 0.5rem;\n  }\n\n  &__drop-zone {\n    padding: 2rem 0;\n    display: flex;\n    justify-content: center;\n    width: 100%;\n    transition: background-color $transition;\n\n    &--compact {\n      padding: 0;\n    }\n  }\n\n  &__input {\n    cursor: pointer;\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    user-select: none;\n    height: 100%;\n    opacity: 0;\n    outline: none;\n  }\n\n  &--disabled &__drop-zone {\n    background-color: $disabled-color;\n  }\n\n  &:not(.six-file-upload--disabled) &__drop-zone:hover,\n  &__drop-zone--hover {\n    background-color: $over-color;\n\n    &.six-file-upload__drop-zone--compact {\n      background-color: inherit;\n    }\n  }\n\n  &--disabled &__input {\n    cursor: not-allowed;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Prop, State } from '@stencil/core';\n\ninterface ISingleFile {\n  file: File;\n}\n\ninterface IMultipleFiles {\n  files: FileList;\n}\n\nexport type SixFileUploadSuccessPayload = ISingleFile | IMultipleFiles;\n\nexport interface SixFileUploadFailurePayload {\n  reason: string;\n}\n\n/**\n * @since 2.0.0\n * @status experimental\n *\n */\n@Component({\n  tag: 'six-file-upload',\n  styleUrl: 'six-file-upload.scss',\n  scoped: true,\n  shadow: false,\n})\nexport class SixFileUpload {\n  @Element() readonly host!: HTMLSixFileUploadElement;\n\n  private fileInput?: HTMLInputElement;\n\n  @State() isOver = false;\n\n  /** Set to true if file control should be small. */\n  @Prop() readonly compact: boolean = false;\n\n  /** Label of the drop area. */\n  @Prop() readonly label?: string;\n\n  /** Set when button is disabled. */\n  @Prop() readonly disabled = false;\n\n  /** Accepted MIME-Types. */\n  @Prop() readonly accept?: string;\n\n  /** More than one file allowed. */\n  @Prop() readonly multiple = false;\n\n  /** Allowed max file size in bytes. */\n  @Prop() readonly maxFileSize?: number;\n\n  /** Triggers when a file is added. */\n  @Event({ eventName: 'six-file-upload-success' }) success!: EventEmitter<SixFileUploadSuccessPayload>;\n\n  /** Triggers when an uploaded file doesn't match MIME type or max file size. */\n  @Event({ eventName: 'six-file-upload-failure' }) failure!: EventEmitter<SixFileUploadFailurePayload>;\n\n  @Listen('dragenter', { capture: false })\n  dragenterHandler() {\n    if (!this.disabled) {\n      this.isOver = true;\n    }\n  }\n\n  @Listen('dragover', { capture: false })\n  dragoverHandler() {\n    if (!this.disabled) {\n      this.isOver = true;\n    }\n  }\n\n  @Listen('dragleave', { capture: false })\n  dragleaveHandler() {\n    if (!this.disabled) {\n      this.isOver = false;\n    }\n  }\n\n  @Listen('drop', { capture: false })\n  dropHandler({ dataTransfer }: DragEvent) {\n    if (!this.disabled) {\n      this.isOver = false;\n      if (dataTransfer != null) {\n        this.handleFiles(dataTransfer.files);\n      }\n    }\n  }\n\n  private handleFiles = (files: FileList) => {\n    if (this.disabled || files.length === 0) {\n      return;\n    }\n\n    if (!this.multiple && files.length > 1) {\n      return this.failure.emit({ reason: 'Only one file is allowed.' });\n    }\n\n    for (const file of files) {\n      if (file == null) {\n        return;\n      }\n\n      let acceptedTypesList: string[] = [];\n      if (this.accept != null) {\n        acceptedTypesList = this.accept.replace(/\\s/g, '').split(',');\n      }\n\n      if (acceptedTypesList.length > 0 && acceptedTypesList.indexOf(file.type) === -1) {\n        const reason = files.length > 1 ? 'One or more files have invalid MIME type.' : 'File has invalid MIME type.';\n        return this.failure.emit({ reason });\n      }\n\n      if (this.maxFileSize != null && file.size > this.maxFileSize) {\n        const reason = files.length > 1 ? 'One or more files are too big' : 'File is too big.';\n        return this.failure.emit({ reason });\n      }\n    }\n\n    const eventPayload: SixFileUploadSuccessPayload = this.multiple ? { files } : { file: files[0] };\n    this.success.emit(eventPayload);\n  };\n\n  componentDidLoad() {\n    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {\n      this.host.addEventListener(eventName, this.preventDefaults, false);\n      document.body.addEventListener(eventName, this.preventDefaults, false);\n    });\n  }\n\n  disconnectedCallback() {\n    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {\n      this.host.removeEventListener(eventName, this.preventDefaults, false);\n      document.body.removeEventListener(eventName, this.preventDefaults, false);\n    });\n  }\n\n  private preventDefaults(e: Event) {\n    e.preventDefault();\n    e.stopPropagation();\n  }\n\n  private onChange = () => {\n    if (this.fileInput?.files != null) {\n      const files = this.fileInput.files;\n      this.handleFiles(files);\n      this.fileInput.value = '';\n    }\n  };\n\n  private renderLabel() {\n    return (\n      this.label ??\n      (this.compact ? (\n        'Upload'\n      ) : (\n        <span>\n          Drop files to upload, or <span class=\"six-file-upload__label--highlighted\">browse</span>\n        </span>\n      ))\n    );\n  }\n\n  render() {\n    const Container = this.compact ? 'six-button' : 'six-card';\n\n    return (\n      <div\n        class={{\n          'six-file-upload': true,\n          'six-file-upload--disabled': this.disabled,\n        }}\n      >\n        <Container\n          class={{\n            'six-file-upload__container--compact': this.compact,\n            'six-file-upload__container--full': !this.compact,\n          }}\n        >\n          {this.compact && (\n            <span slot=\"prefix\">\n              <six-icon class=\"six-file-upload__label-icon\">arrow_circle_up</six-icon>\n            </span>\n          )}\n          <div\n            class={{\n              'six-file-upload__drop-zone': true,\n              'six-file-upload__drop-zone--hover': this.isOver,\n              'six-file-upload__drop-zone--compact': this.compact,\n            }}\n          >\n            <span>{this.renderLabel()}</span>\n            <input\n              class=\"six-file-upload__input\"\n              type=\"file\"\n              name=\"resume\"\n              disabled={this.disabled}\n              accept={this.accept}\n              multiple={this.multiple}\n              onChange={this.onChange}\n              ref={(el) => (this.fileInput = el)}\n            />\n          </div>\n        </Container>\n      </div>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/ui-library/{p-dd3c76f1.entry.js → p-649017db.entry.js}

@@ -1,2 +1,2 @@
-import{r as i,h as t}from"./p-ac4f4d45.js";const o=':host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:inline}.material-icons{vertical-align:middle;font-weight:normal;font-style:normal;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:"liga"}.material-icons-filled{font-family:"Material Icons"}.material-icons-outlined{font-family:"Material Icons Outlined"}.icon--xsmall{font-size:12px}.icon--small{font-size:18px}.icon--medium{font-size:24px}.icon--large{font-size:36px}.icon--xlarge{font-size:48px}.icon--xxlarge{font-size:72px}.icon--xxxlarge{font-size:96px}.icon--inherit{font-size:1.5em}';const e=class{constructor(t){i(this,t);this.size="inherit";this.filled=false}render(){return t("i",{class:{"material-icons":true,"material-icons-outlined":!this.filled,"material-icons-filled":this.filled,"icon--xsmall":this.size==="xSmall","icon--small":this.size==="small","icon--medium":this.size==="medium","icon--large":this.size==="large","icon--xlarge":this.size==="xLarge","icon--xxlarge":this.size==="xxLarge","icon--xxxlarge":this.size==="xxxLarge","icon--inherit":this.size==="inherit"}},t("slot",null))}};e.style=o;export{e as six_icon};
-//# sourceMappingURL=p-dd3c76f1.entry.js.map
+import{r as i,h as t}from"./p-187fbba0.js";const o=':host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:inline}.material-icons{vertical-align:middle;font-weight:normal;font-style:normal;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:"liga"}.material-icons-filled{font-family:"Material Icons"}.material-icons-outlined{font-family:"Material Icons Outlined"}.icon--xsmall{font-size:12px}.icon--small{font-size:18px}.icon--medium{font-size:24px}.icon--large{font-size:36px}.icon--xlarge{font-size:48px}.icon--xxlarge{font-size:72px}.icon--xxxlarge{font-size:96px}.icon--inherit{font-size:1.5em}';const e=class{constructor(t){i(this,t);this.size="inherit";this.filled=false}render(){return t("i",{class:{"material-icons":true,"material-icons-outlined":!this.filled,"material-icons-filled":this.filled,"icon--xsmall":this.size==="xSmall","icon--small":this.size==="small","icon--medium":this.size==="medium","icon--large":this.size==="large","icon--xlarge":this.size==="xLarge","icon--xxlarge":this.size==="xxLarge","icon--xxxlarge":this.size==="xxxLarge","icon--inherit":this.size==="inherit"}},t("slot",null))}};e.style=o;export{e as six_icon};
+//# sourceMappingURL=p-649017db.entry.js.map

package/dist/ui-library/p-713684c7.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as i,h as s,g as n}from"./p-187fbba0.js";import{P as e}from"./p-bf4a35ec.js";import{E as o}from"./p-02d5a6d8.js";import{b as r,a as h}from"./p-d87a6f4d.js";import{D as l,a as d}from"./p-8cf72af6.js";function a(t){const i=t.tabIndex;return i>-1}function u(t){if(a(t)){return t}if(t.shadowRoot!=null){const i=[...t.shadowRoot.children].find((t=>a(t)));if(i!=null){return i}}if(t.children!=null){return[...t.children].map((t=>u(t))).at(0)}return undefined}const f=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:inline-block}.dropdown{position:relative}.dropdown__trigger{display:block}.dropdown__positioner{position:absolute;z-index:var(--six-z-index-dropdown)}.dropdown__positioner__filtered{width:100%}.dropdown__panel{max-height:50vh;font-family:var(--six-font-sans);font-size:var(--six-font-size-small);font-weight:var(--six-font-weight-normal);color:var(--color);background-color:var(--six-panel-background-color);border-radius:var(--six-border-radius-medium);box-shadow:var(--six-elevation-2dp);opacity:0;overflow:auto;overscroll-behavior:none;pointer-events:none;transform:scale(0.9);transition:var(--six-transition-fast) opacity, var(--six-transition-fast) transform;scrollbar-width:thin}.filter-hidden{display:none}.dropdown__positioner[data-popper-placement^=top] .dropdown__panel{transform-origin:bottom}.dropdown__positioner[data-popper-placement^=bottom] .dropdown__panel{transform-origin:top}.dropdown__positioner[data-popper-placement^=left] .dropdown__panel{transform-origin:right}.dropdown__positioner[data-popper-placement^=right] .dropdown__panel{transform-origin:left}.dropdown__positioner.popover-visible .dropdown__panel{opacity:1;transform:none;pointer-events:all}";const c=t=>i=>(i===null||i===void 0?void 0:i.tagName.toLowerCase())===t.toLowerCase();const p=c("six-menu");const v=c("six-menu-item");let m=0;const w=class{constructor(n){t(this,n);this.sixShow=i(this,"six-dropdown-show",7);this.sixAfterShow=i(this,"six-dropdown-after-show",7);this.sixHide=i(this,"six-dropdown-hide",7);this.sixAfterHide=i(this,"six-dropdown-after-hide",7);this.sixAutoFilter=i(this,"six-dropdown-auto-filter-fired",7);this.sixAsyncFilterFired=i(this,"six-async-filter-fired",7);this.sixScroll=i(this,"six-dropdown-scroll",7);this.componentId=`dropdown-${++m}`;this.isVisible=false;this.hasBeenInitialized=false;this.eventListeners=new o;this.getMenuItems=()=>{if(this.filteredOptions.length>0){return this.filteredOptions.map((t=>s("six-menu-item",{value:t.value},t.label)))}if(this.panel==null)return[];const[t]=r(this.panel);return r(t)||Array.from(t.querySelectorAll("six-menu-item"))};this.handleFilterInputChange=()=>{var t,i;if(this.filterInputElement==null)return;const s=((i=(t=this.filterInputElement.value)===null||t===void 0?void 0:t.toLowerCase())===null||i===void 0?void 0:i.trim())||"";if(this.filteredOptions.length>0){this.handleFilteringForAttributeItems(s)}else{this.handleFilteringForSlotItems(s)}this.sixAutoFilter.emit({filterValue:s})};this.handleDocumentKeyDown=t=>{var i;const s=t;if(s.key==="Escape"){void this.hide();this.focusOnTrigger();return}if(this.filterInputElement===((i=this.host.shadowRoot)===null||i===void 0?void 0:i.activeElement)){if(s.key==="ArrowDown"){const t=this.getMenuItems().find((t=>t.style.display!=="none"));if(t!=null){t.setFocus()}}}if(s.key==="Tab"){if(this.open&&document.activeElement!=null&&v(document.activeElement)){s.preventDefault();void this.hide();this.focusOnTrigger();return}setTimeout((()=>{var t,i;const s=this.container.getRootNode()instanceof ShadowRoot?(i=(t=document.activeElement)===null||t===void 0?void 0:t.shadowRoot)===null||i===void 0?void 0:i.activeElement:document.activeElement;if((s===null||s===void 0?void 0:s.closest(this.container.tagName.toLowerCase()))!==this.container){void this.hide();return}}))}};this.handleDocumentMouseDown=t=>{const i=t.composedPath();if(!i.includes(this.container)){void this.hide();return}};this.handlePanelSelect=t=>{const i=t.target;if(this.closeOnSelect&&p(i)){void this.hide();this.focusOnTrigger()}};this.handleTriggerClick=()=>{this.open?this.hide():this.show()};this.handleTriggerKeyDown=t=>{if(t.key==="Escape"){this.focusOnTrigger();void this.hide();return}if(!this.disableHideOnEnterAndSpace&&[" ","Enter"].includes(t.key)){t.preventDefault();this.open?void this.hide():void this.show();return}const i=this.getMenu();if(["ArrowDown","ArrowUp"].includes(t.key)){t.preventDefault();if(!this.open){void this.show()}if(i==null){return}const s=[...i.querySelectorAll("six-menu-item")];const n=s.at(0);const e=s.at(s.length-1);if(t.key==="ArrowDown"&&n!=null){n.setFocus();return}if(t.key==="ArrowUp"&&e!=null){e.setFocus();return}}const s=["Tab","Shift","Meta","Ctrl","Alt"];if(this.open&&i!=null&&!s.includes(t.key)){void i.typeToSelect(t.key);return}};this.handleTriggerKeyUp=t=>{if(t.key===" "){t.preventDefault()}};this.handleTriggerSlotChange=()=>{this.updateAccessibleTrigger()};this.handleDropdownScroll=()=>{if(this.panel==null)return;this.sixScroll.emit({scrollHeight:this.panel.scrollHeight,scrollTop:this.panel.scrollTop,scrollbarHeight:this.panel.offsetHeight*(this.panel.offsetHeight/this.panel.scrollHeight),scrollRatio:this.panel.scrollTop/(this.panel.scrollHeight-this.panel.clientHeight)})};this.open=false;this.placement="bottom-start";this.closeOnSelect=true;this.distance=0;this.skidding=0;this.hoist=false;this.containingElement=undefined;this.filter=false;this.asyncFilter=false;this.filterPlaceholder="Filter...";this.autofocusFilter=true;this.filterDebounce=l;this.disableHideOnEnterAndSpace=false;this.options=[];this.virtualScroll=false;this.filteredOptions=[]}get hasFilterEnabled(){return this.filter||this.asyncFilter}get container(){return this.containingElement||this.host}handleOpenChange(){this.open?this.show():this.hide();this.updateAccessibleTrigger()}handlePopoverOptionsChange(){if(this.popover==null)return;this.popover.setOptions({strategy:this.hoist?"fixed":"absolute",placement:this.placement,distance:this.distance,skidding:this.skidding})}handleOptionsChange(){if(Array.isArray(this.options)){this.filteredOptions=[...this.options]}}connectedCallback(){if(this.virtualScroll&&this.options===null){console.error("Options must be defined when using virtual scrolling")}if(Array.isArray(this.options)){this.filteredOptions=[...this.options]}if(this.hasBeenInitialized&&this.popover==null){this.initializePopover()}}componentDidLoad(){this.hasBeenInitialized=true;this.initializePopover();if(this.open){void this.show()}if(this.filter){this.setupFiltering(this.handleFilterInputChange)}else if(this.asyncFilter){this.setupFiltering((()=>{var t,i;return this.sixAsyncFilterFired.emit({filterValue:(i=(t=this.filterInputElement)===null||t===void 0?void 0:t.value)!==null&&i!==void 0?i:""})}))}}initializePopover(){if(this.trigger==null||this.positioner==null)return;const t=()=>{if(this.filter&&this.filterInputElement!=null){this.filterInputElement.value="";if(this.filteredOptions.length>0){this.filteredOptions=[...this.options]}else{const t=this.getMenuItems();t.forEach((t=>t.style.display="unset"))}}this.sixAfterHide.emit()};const i=async()=>{var t;if(this.hasFilterEnabled&&this.autofocusFilter){await((t=this.filterInputElement)===null||t===void 0?void 0:t.setFocus())}this.sixAfterShow.emit()};const s=()=>{if(!this.open&&this.panel!=null){this.panel.scrollTop=0}};this.popover=new e(this.trigger,this.positioner,{strategy:this.hoist?"fixed":"absolute",placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.panel,onAfterHide:t,onAfterShow:i,onTransitionEnd:s})}setupFiltering(t){if(this.filterInputElement!=null){this.eventListeners.add(this.filterInputElement,"six-input-input",d(t,this.filterDebounce))}}handleFilteringForAttributeItems(t){if(t===""&&Array.isArray(this.options)){this.filteredOptions=[...this.options];return}this.filteredOptions=this.options.filter((i=>{var s,n,e,o;return i.label&&((n=(s=String(i.label))===null||s===void 0?void 0:s.toLowerCase())===null||n===void 0?void 0:n.includes(t))||i.value&&((o=(e=String(i.value))===null||e===void 0?void 0:e.toLowerCase())===null||o===void 0?void 0:o.includes(t))}))}handleFilteringForSlotItems(t){const i=this.getMenuItems();i.forEach((async i=>{var s,n,e,o;const r=((n=(s=i===null||i===void 0?void 0:i.value)===null||s===void 0?void 0:s.toLowerCase())===null||n===void 0?void 0:n.includes(t))||((o=(e=await(i===null||i===void 0?void 0:i.getTextLabel()))===null||e===void 0?void 0:e.toLowerCase())===null||o===void 0?void 0:o.includes(t));i.style.display=r?"unset":"none"}))}disconnectedCallback(){var t;this.eventListeners.removeAll();void this.hide();(t=this.popover)===null||t===void 0?void 0:t.destroy();this.popover=undefined}async show(){if(this.isVisible||this.popover==null||this.panel==null){return}const t=this.sixShow.emit();if(t.defaultPrevented){this.open=false;return}this.eventListeners.add(this.panel,"six-menu-item-selected",this.handlePanelSelect);this.eventListeners.add(document,"keydown",this.handleDocumentKeyDown);this.eventListeners.add(document,"mousedown",this.handleDocumentMouseDown);this.isVisible=true;this.open=true;this.popover.show()}async hide(){if(!this.isVisible||this.panel==null||this.popover==null){return}const t=this.sixHide.emit();if(t.defaultPrevented){this.open=true;return}this.eventListeners.remove(this.panel,"six-menu-item-selected",this.handlePanelSelect);this.eventListeners.remove(document,"keydown",this.handleDocumentKeyDown);this.eventListeners.remove(document,"mousedown",this.handleDocumentMouseDown);this.isVisible=false;this.open=false;this.popover.hide()}focusOnTrigger(){if(this.trigger==null)return;const[t]=r(this.trigger);if(t!=null){if(typeof t.setFocus==="function"){t.setFocus()}else if(typeof t.focus==="function"){t.focus()}}}getMenu(){if(this.panel==null)return;return r(this.panel).filter(p).at(0)}async reposition(){if(!this.open||this.popover==null){return}this.popover.reposition()}updateAccessibleTrigger(){if(this.trigger==null)return;const t=r(this.trigger).map(u).at(0);if(t!=null){t.setAttribute("aria-haspopup","true");t.setAttribute("aria-expanded",this.open?"true":"false")}}render(){return s("div",{part:"base",id:this.componentId,class:{dropdown:true,"dropdown--open":this.open}},s("span",{part:"trigger",class:"dropdown__trigger",ref:t=>this.trigger=t,onClick:this.handleTriggerClick,onKeyDown:this.handleTriggerKeyDown,onKeyUp:this.handleTriggerKeyUp},s("slot",{name:"trigger",onSlotchange:this.handleTriggerSlotChange})),s("div",{ref:t=>this.positioner=t,class:{dropdown__positioner:true,dropdown__positioner__filtered:(this.filter||this.asyncFilter)&&!this.hoist}},this.hasFilterEnabled&&s("six-input",{class:{"filter-hidden":!this.open},"aria-hidden":this.open?"false":"true",ref:t=>this.filterInputElement=t,placeholder:this.filterPlaceholder}),s("div",{ref:t=>this.panel=t,part:"panel",class:"dropdown__panel",role:"menu","aria-hidden":this.open?"false":"true","aria-labelledby":this.componentId,onScroll:this.handleDropdownScroll},s("slot",null),this.filteredOptions.length>0&&s("six-menu",{part:"menu",items:this.filteredOptions,virtualScroll:this.virtualScroll}))))}get host(){return n(this)}static get watchers(){return{open:["handleOpenChange"],distance:["handlePopoverOptionsChange"],hoist:["handlePopoverOptionsChange"],placement:["handlePopoverOptionsChange"],skidding:["handlePopoverOptionsChange"],options:["handleOptionsChange"]}}};w.style=f;const g=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block}.menu{padding:0 0;border:none;box-shadow:var(--six-elevation-2dp)}.menu:focus{outline:none}.menu--noshadow{box-shadow:none}.menu__wrapper--scrollable{overflow-y:auto}";const b=t=>{var i,s,n;return(n=(s=(i=t===null||t===void 0?void 0:t.shadowRoot)===null||i===void 0?void 0:i.querySelector(".menu-item"))===null||s===void 0?void 0:s.classList)===null||n===void 0?void 0:n.contains("menu-item--focused")};const x=t=>(t===null||t===void 0?void 0:t.tagName.toLowerCase())==="six-menu-item";const _=({value:t,label:i})=>s("six-menu-item",{value:t},i);const y=5;const A=64;const k=class{constructor(s){t(this,s);this.sixMenuItemSelected=i(this,"six-menu-item-selected",7);this.eventListeners=new o;this.typeToSelectString="";this.handleScrolling=()=>{if(this.menuWrapper==null)return;this.scrollingIndex=Math.floor(this.menuWrapper.scrollTop/this.sixMenuItemHeight)};this.removeBoxShadow=false;this.items=null;this.itemsShown=undefined;this.virtualScroll=false;this.itemSize=10;this.scrollingDebounce=15;this.scrollingIndex=0;this.sixMenuItemHeight=A}connectedCallback(){this.handleClick=this.handleClick.bind(this);this.handleKeyDown=this.handleKeyDown.bind(this)}componentWillLoad(){if(this.items===null){return}}componentDidLoad(){this.setupForVirtualScrollingAfterRendering()}disconnectedCallback(){this.eventListeners.removeAll()}async typeToSelect(t){var i;clearTimeout(this.typeToSelectTimeout);this.typeToSelectTimeout=setTimeout((()=>this.typeToSelectString=""),750);this.typeToSelectString+=t.toLowerCase();const s=this.getItems();for(const t of s){const s=(i=t.shadowRoot)===null||i===void 0?void 0:i.querySelector("slot:not([name])");const n=h(s).toLowerCase().trim();if(n.substring(0,this.typeToSelectString.length)===this.typeToSelectString){t.setFocus();break}}}getItemsShown(){var t;const i=this.virtualScroll?y:0;return(t=this.itemsShown)!==null&&t!==void 0?t:i}setupForVirtualScrollingAfterRendering(){var t,i;if(!this.virtualScroll||this.menuWrapper==null)return;this.eventListeners.add(this.menuWrapper,"scroll",d(this.handleScrolling,this.scrollingDebounce));const s=(i=(t=this.menu)===null||t===void 0?void 0:t.querySelector("six-menu-item"))===null||i===void 0?void 0:i.clientHeight;if(s!=null&&s>0){this.sixMenuItemHeight=s}}getItems(){if(this.menu==null)return[];if(this.items!=null){return this.items.map(_)}const t=this.menu.querySelector("slot");if(t==null)return[];return[...t.assignedElements({flatten:true})].filter((t=>x(t)&&!t.disabled))}getActiveItemIndex(){const t=this.getItems();const i=this.getActiveItem();if(i!=null){const s=t.indexOf(i);if(s>-1){return s}}const s=this.extractItemsFromDOM();return s.findIndex(b)}getActiveItem(){var t;const i=this.getItems().find((t=>t===document.activeElement));if(i!=null){return i}return(t=this.extractItemsFromDOM())===null||t===void 0?void 0:t.find(b)}extractItemsFromDOM(){var t,i;return Array.from((i=(t=this.host.shadowRoot)===null||t===void 0?void 0:t.querySelectorAll("six-menu-item"))!==null&&i!==void 0?i:[])}setActiveItem(t){t===null||t===void 0?void 0:t.setFocus()}handleClick(t){const i=t.target;const s=i.closest("six-menu-item");if(s&&!s.disabled){this.sixMenuItemSelected.emit({name:s.value,item:s})}}handleKeyDown(t){if(t.key==="Enter"){const i=this.getActiveItem();t.preventDefault();if(i!=null){this.sixMenuItemSelected.emit({name:i.value,item:i})}}if(t.key===" "){t.preventDefault()}if(["ArrowDown","ArrowUp","Home","End"].includes(t.key)){const i=this.items===null?this.getItems():this.extractItemsFromDOM();let s=this.getActiveItemIndex();if(i.length>0){t.preventDefault();if(t.key==="ArrowDown"){s++}else if(t.key==="ArrowUp"){s--}else if(t.key==="Home"){s=0}else if(t.key==="End"){s=i.length-1}if(s<0)s=0;if(s>i.length-1)s=i.length-1;this.setActiveItem(i[s]);return}}void this.typeToSelect(t.key)}getMenuWrapperStyle(){var t;const i={};if(this.getItemsShown()>0){i.height=`${((t=this.getItemsShown())!==null&&t!==void 0?t:0)*this.sixMenuItemHeight}px`}return Object.assign({},i)}getMenuContainerStyle(){const t={};if(this.virtualScroll){t.transform=`translateY(${this.sixMenuItemHeight*this.scrollingIndex}px)`}return Object.assign({},t)}getScrollbarGhostStyle(){const t={};if(this.virtualScroll&&this.items!==null){t.height=`${this.items.length*this.sixMenuItemHeight-this.itemSize*this.sixMenuItemHeight}px`}return Object.assign({},t)}renderItems(){if(this.items===undefined||this.items===null){return}if(!this.virtualScroll){return this.items.map(_)}return this.items.slice(this.scrollingIndex,Math.min(this.items.length,this.itemSize+this.scrollingIndex)).map(_)}render(){return s("div",{ref:t=>this.menuWrapper=t,style:this.getMenuWrapperStyle(),part:"wrapper",class:{menu:true,"menu--noshadow":this.removeBoxShadow,"menu__wrapper--scrollable":this.getItemsShown()>0}},s("div",{ref:t=>this.menu=t,part:"base",role:"menu",onClick:this.handleClick,onKeyDown:this.handleKeyDown,tabIndex:0,style:this.getMenuContainerStyle()},s("slot",null),this.renderItems()),this.virtualScroll&&s("div",{style:this.getScrollbarGhostStyle()}))}get host(){return n(this)}};k.style=g;export{w as six_dropdown,k as six_menu};
+//# sourceMappingURL=p-713684c7.entry.js.map

package/dist/ui-library/p-713684c7.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["isTabbable","el","tabIndex","getNearestTabbableElement","shadowRoot","tabbableShadowChild","children","find","e","map","at","undefined","sixDropdownCss","isTagName","name","tagName","toLowerCase","isSixMenu","isSixMenuItem","id","SixDropdown","this","componentId","isVisible","hasBeenInitialized","eventListeners","EventListeners","getMenuItems","filteredOptions","length","option","h","value","label","panel","getSlotChildren","Array","from","querySelectorAll","handleFilterInputChange","filterInputElement","lowerCaseFilterTerm","_b","_a","trim","handleFilteringForAttributeItems","handleFilteringForSlotItems","sixAutoFilter","emit","filterValue","handleDocumentKeyDown","event","keyboardEvent","key","hide","focusOnTrigger","host","activeElement","item","style","display","setFocus","open","document","preventDefault","setTimeout","container","getRootNode","ShadowRoot","closest","handleDocumentMouseDown","path","composedPath","includes","handlePanelSelect","target","closeOnSelect","handleTriggerClick","show","handleTriggerKeyDown","disableHideOnEnterAndSpace","menu","getMenu","menuItems","firstMenuItem","lastMenuItem","ignoredKeys","typeToSelect","handleTriggerKeyUp","handleTriggerSlotChange","updateAccessibleTrigger","handleDropdownScroll","sixScroll","scrollHeight","scrollTop","scrollbarHeight","offsetHeight","scrollRatio","clientHeight","DEFAULT_DEBOUNCE_FAST","hasFilterEnabled","filter","asyncFilter","containingElement","handleOpenChange","handlePopoverOptionsChange","popover","setOptions","strategy","hoist","placement","distance","skidding","handleOptionsChange","isArray","options","connectedCallback","virtualScroll","console","error","initializePopover","componentDidLoad","setupFiltering","sixAsyncFilterFired","trigger","positioner","onAfterHide","forEach","sixAfterHide","onAfterShow","async","autofocusFilter","sixAfterShow","onTransitionEnd","Popover","transitionElement","callback","add","debounce","filterDebounce","String","_d","_c","menuItem","elementContainsFilterTerm","getTextLabel","disconnectedCallback","removeAll","destroy","sixShow","defaultPrevented","sixHide","remove","focus","reposition","accessibleTrigger","setAttribute","render","part","class","dropdown","ref","onClick","onKeyDown","onKeyUp","onSlotchange","dropdown__positioner","dropdown__positioner__filtered","placeholder","filterPlaceholder","role","onScroll","items","sixMenuCss","isFocusedMenuItem","querySelector","classList","contains","isSIXMenuItemElement","mapToMenuItem","DEFAULT_NUMBER_OF_ITEMS_SHOWN_FOR_VIRTUAL_SCROLLING","DEFAULT_SIX_MENU_ITEM_HEIGHT","SixMenu","typeToSelectString","handleScrolling","menuWrapper","scrollingIndex","Math","floor","sixMenuItemHeight","handleClick","bind","handleKeyDown","componentWillLoad","setupForVirtualScrollingAfterRendering","clearTimeout","typeToSelectTimeout","getItems","slot","getTextContent","substring","getItemsShown","defaultItemsShown","itemsShown","scrollingDebounce","menuItemHeight","assignedElements","flatten","disabled","getActiveItemIndex","selectedItem","getActiveItem","itemIndex","indexOf","sixMenuItems","extractItemsFromDOM","findIndex","i","setActiveItem","clickedItem","sixMenuItemSelected","activeItem","indexOfActiveItem","getMenuWrapperStyle","styles","height","Object","assign","getMenuContainerStyle","transform","getScrollbarGhostStyle","itemSize","renderItems","slice","min","removeBoxShadow"],"sources":["./src/utils/tabbable.ts","./src/components/six-dropdown/six-dropdown.scss?tag=six-dropdown&encapsulation=shadow","./src/components/six-dropdown/six-dropdown.tsx","./src/components/six-menu/six-menu.scss?tag=six-menu&encapsulation=shadow","./src/components/six-menu/six-menu.tsx"],"sourcesContent":["export function isTabbable(el: HTMLElement) {\n  const tabIndex = el.tabIndex;\n  return tabIndex > -1;\n}\n\nexport function getNearestTabbableElement(el: HTMLElement): HTMLElement | undefined {\n  // Check the element\n  if (isTabbable(el)) {\n    return el;\n  }\n\n  // Check the element's shadow root\n  if (el.shadowRoot != null) {\n    const tabbableShadowChild = [...el.shadowRoot.children].find((e) => isTabbable(e as HTMLElement)) as HTMLElement;\n    if (tabbableShadowChild != null) {\n      return tabbableShadowChild;\n    }\n  }\n\n  // Check the element's children\n  if (el.children != null) {\n    return [...el.children].map((e) => getNearestTabbableElement(e as HTMLElement)).at(0);\n  }\n\n  return undefined;\n}\n","@import 'src/global/component';\n@import 'src/global/mixins/scrollbar';\n\n:host {\n  display: inline-block;\n}\n\n.dropdown {\n  position: relative;\n}\n\n.dropdown__trigger {\n  display: block;\n}\n\n.dropdown__positioner {\n  position: absolute;\n  z-index: var(--six-z-index-dropdown);\n\n  &__filtered {\n    width: 100%;\n  }\n}\n\n.dropdown__panel {\n  max-height: 50vh;\n  font-family: var(--six-font-sans);\n  font-size: var(--six-font-size-small);\n  font-weight: var(--six-font-weight-normal);\n  color: var(--color);\n  background-color: var(--six-panel-background-color);\n  border-radius: var(--six-border-radius-medium);\n  box-shadow: var(--six-elevation-2dp);\n  opacity: 0;\n  overflow: auto;\n  overscroll-behavior: none;\n  pointer-events: none;\n  transform: scale(0.9);\n  transition: var(--six-transition-fast) opacity, var(--six-transition-fast) transform;\n  // fix for firefox scrollbar\n  scrollbar-width: thin;\n}\n\n.filter-hidden {\n  display: none;\n}\n\n.dropdown__positioner {\n  &[data-popper-placement^='top'] .dropdown__panel {\n    transform-origin: bottom;\n  }\n\n  &[data-popper-placement^='bottom'] .dropdown__panel {\n    transform-origin: top;\n  }\n\n  &[data-popper-placement^='left'] .dropdown__panel {\n    transform-origin: right;\n  }\n\n  &[data-popper-placement^='right'] .dropdown__panel {\n    transform-origin: left;\n  }\n\n  &.popover-visible .dropdown__panel {\n    opacity: 1;\n    transform: none;\n    pointer-events: all;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { getNearestTabbableElement } from '../../utils/tabbable';\nimport Popover from '../../utils/popover';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { getSlotChildren } from '../../utils/slot';\nimport { debounce, DEFAULT_DEBOUNCE_FAST } from '../../utils/execution-control';\nimport { EmptyPayload } from '../../utils/types';\nimport { SixMenuItemData } from '../six-menu/six-menu';\n\nexport interface SixDropdownAutoFilterPayload {\n  filterValue: string;\n}\n\nexport interface SixDropdownAsyncFilterPayload {\n  filterValue: string;\n}\n\nexport interface SixDropdownScrollPayload {\n  scrollHeight: number;\n  scrollTop: number;\n  scrollbarHeight: number;\n  scrollRatio: number;\n}\n\nconst isTagName =\n  (name: string) =>\n  <T extends Element>(el?: T) =>\n    el?.tagName.toLowerCase() === name.toLowerCase();\nconst isSixMenu = isTagName('six-menu');\nconst isSixMenuItem = isTagName('six-menu-item');\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot trigger - The dropdown's trigger, usually a `<six-button>` element.\n * @slot - The dropdown's content.\n *\n * @part base - The component's base wrapper.\n * @part trigger - The container that wraps the trigger.\n * @part panel - The panel that gets shown when the dropdown is open.\n */\n\n@Component({\n  tag: 'six-dropdown',\n  styleUrl: 'six-dropdown.scss',\n  shadow: true,\n})\nexport class SixDropdown {\n  private componentId = `dropdown-${++id}`;\n  private isVisible = false;\n  private panel?: HTMLElement;\n  private positioner?: HTMLElement;\n  private popover?: Popover;\n  private trigger?: HTMLElement;\n  private hasBeenInitialized = false;\n\n  // the input element shown in the dropdown when filter is set to true\n  private filterInputElement?: HTMLSixInputElement;\n\n  @Element() host!: HTMLSixDropdownElement;\n\n  /** Indicates whether the dropdown is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /**\n   * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\n   * inside the viewport.\n   */\n  @Prop() placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'bottom-start';\n\n  /** Determines whether the dropdown should hide when a menu item is selected. */\n  @Prop() closeOnSelect = true;\n\n  /** The distance in pixels from which to offset the panel away from its trigger. */\n  @Prop() distance = 0;\n\n  /** The distance in pixels from which to offset the panel along its trigger. */\n  @Prop() skidding = 0;\n\n  /**\n   * Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n   * `overflow: auto|scroll`.\n   */\n  @Prop() hoist = false;\n\n  /** The dropdown will close when the user interacts outside of this element (e.g. clicking). */\n  @Prop() containingElement?: HTMLElement;\n\n  /**\n   * Set to true to allow auto filtering for entries in the dropdown.\n   * With this flag the dropdown will automatically filter itsel.\n   * If you need to coordinate the shown elements yourself,\n   * e.g. because you need to call an endpoint use asyncFilter instead\n   */\n  @Prop() filter = false;\n\n  /**\n   * Set to true to allow async filtering.\n   * When you enter something in the search field the component will only emit an event but not filter any elements itself.\n   * You can then simply listen to the 'six-async-filter-fired' event to manage the shown menu-items yourself\n   */\n  @Prop() asyncFilter = false;\n\n  /** The filter's placeholder text. */\n  @Prop() filterPlaceholder = 'Filter...';\n\n  /** By default the search field will be focused when opening a dropdown with filtering enabled. */\n  @Prop() autofocusFilter = true;\n\n  get hasFilterEnabled() {\n    return this.filter || this.asyncFilter;\n  }\n\n  /** The debounce for the filter callbacks. */\n  @Prop() filterDebounce = DEFAULT_DEBOUNCE_FAST;\n\n  /** The panel can be opend/closed by pressing the spacebar or the enter key. In some cases you might want to avoid this */\n  @Prop() disableHideOnEnterAndSpace = false;\n\n  /** Set the options to be shown in the dropdown (alternative to setting the elements via html)*/\n  @Prop() options: SixMenuItemData[] = [];\n\n  /** Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around)\n   *  are actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot. */\n  @Prop() virtualScroll = false;\n\n  get container() {\n    return this.containingElement || this.host;\n  }\n\n  /** Emitted when the dropdown opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event({ eventName: 'six-dropdown-show' }) sixShow!: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the dropdown opens and all transitions are complete. */\n  @Event({ eventName: 'six-dropdown-after-show' }) sixAfterShow!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the dropdown closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event({ eventName: 'six-dropdown-hide' }) sixHide!: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the dropdown closes and all transitions are complete. */\n  @Event({ eventName: 'six-dropdown-after-hide' }) sixAfterHide!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the auto filter is triggered */\n  @Event({ eventName: 'six-dropdown-auto-filter-fired' }) sixAutoFilter!: EventEmitter<SixDropdownAutoFilterPayload>;\n\n  /** Emitted when the async filter is triggered */\n  @Event({ eventName: 'six-async-filter-fired' }) sixAsyncFilterFired!: EventEmitter<SixDropdownAsyncFilterPayload>;\n\n  /** Emitted when the user scrolls inside dropdown panel.*/\n  @Event({ eventName: 'six-dropdown-scroll' }) sixScroll!: EventEmitter<SixDropdownScrollPayload>;\n\n  private eventListeners = new EventListeners();\n\n  // internal representation of options, so we don't have to make options mutable\n  @State() filteredOptions: SixMenuItemData[] = [];\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n    this.updateAccessibleTrigger();\n  }\n\n  @Watch('distance')\n  @Watch('hoist')\n  @Watch('placement')\n  @Watch('skidding')\n  handlePopoverOptionsChange() {\n    if (this.popover == null) return;\n\n    this.popover.setOptions({\n      strategy: this.hoist ? 'fixed' : 'absolute',\n      placement: this.placement,\n      distance: this.distance,\n      skidding: this.skidding,\n    });\n  }\n\n  @Watch('options')\n  handleOptionsChange() {\n    if (Array.isArray(this.options)) {\n      this.filteredOptions = [...this.options];\n    }\n  }\n\n  connectedCallback() {\n    if (this.virtualScroll && this.options === null) {\n      console.error('Options must be defined when using virtual scrolling');\n    }\n\n    if (Array.isArray(this.options)) {\n      this.filteredOptions = [...this.options];\n    }\n\n    if (this.hasBeenInitialized && this.popover == null) {\n      // there was a weird bug when using six-dropdown inside an ag-grid filter. When closing the ag-grid filter\n      // disconnectedCallback() is executed. However, since componentDidLoad() will not be rerendered the popover had\n      // no longer a connected transitionEnd callback to the dropdown. To fix this, we have this sanity check here,\n      // to re-initialize the popover in case the component has already been initialized but the popover is undefined.\n      this.initializePopover();\n    }\n  }\n\n  componentDidLoad() {\n    this.hasBeenInitialized = true;\n    this.initializePopover();\n\n    // Show on init if open\n    if (this.open) {\n      void this.show();\n    }\n\n    if (this.filter) {\n      this.setupFiltering(this.handleFilterInputChange);\n    } else if (this.asyncFilter) {\n      this.setupFiltering(() => this.sixAsyncFilterFired.emit({ filterValue: this.filterInputElement?.value ?? '' }));\n    }\n  }\n\n  private initializePopover() {\n    if (this.trigger == null || this.positioner == null) return;\n    const onAfterHide = () => {\n      if (this.filter && this.filterInputElement != null) {\n        this.filterInputElement.value = '';\n\n        if (this.filteredOptions.length > 0) {\n          this.filteredOptions = [...this.options];\n        } else {\n          const menuItems = this.getMenuItems();\n          menuItems.forEach((item) => (item.style.display = 'unset'));\n        }\n      }\n\n      this.sixAfterHide.emit();\n    };\n\n    const onAfterShow = async () => {\n      if (this.hasFilterEnabled && this.autofocusFilter) {\n        // if dropdown filter is enabled we should autofocus the search field\n        await this.filterInputElement?.setFocus();\n      }\n\n      this.sixAfterShow.emit();\n    };\n\n    const onTransitionEnd = () => {\n      if (!this.open && this.panel != null) {\n        this.panel.scrollTop = 0;\n      }\n    };\n\n    this.popover = new Popover(this.trigger, this.positioner, {\n      strategy: this.hoist ? 'fixed' : 'absolute',\n      placement: this.placement,\n      distance: this.distance,\n      skidding: this.skidding,\n      transitionElement: this.panel,\n      onAfterHide,\n      onAfterShow,\n      onTransitionEnd,\n    });\n  }\n\n  private setupFiltering(callback: () => void) {\n    if (this.filterInputElement != null) {\n      this.eventListeners.add(this.filterInputElement, 'six-input-input', debounce(callback, this.filterDebounce));\n    }\n  }\n\n  private getMenuItems = (): HTMLSixMenuItemElement[] => {\n    if (this.filteredOptions.length > 0) {\n      return this.filteredOptions.map((option) => <six-menu-item value={option.value}>{option.label}</six-menu-item>);\n    }\n    if (this.panel == null) return [];\n\n    const [panel] = getSlotChildren<HTMLSixMenuElement>(this.panel);\n\n    // the menu-items can be in a slot e.g. in six-select or direct children of the panel\n    return getSlotChildren(panel) || Array.from(panel.querySelectorAll('six-menu-item'));\n  };\n\n  private handleFilterInputChange = () => {\n    if (this.filterInputElement == null) return;\n\n    const lowerCaseFilterTerm = this.filterInputElement.value?.toLowerCase()?.trim() || '';\n\n    if (this.filteredOptions.length > 0) {\n      this.handleFilteringForAttributeItems(lowerCaseFilterTerm);\n    } else {\n      this.handleFilteringForSlotItems(lowerCaseFilterTerm);\n    }\n\n    this.sixAutoFilter.emit({ filterValue: lowerCaseFilterTerm });\n  };\n\n  private handleFilteringForAttributeItems(lowerCaseFilterTerm: string) {\n    if (lowerCaseFilterTerm === '' && Array.isArray(this.options)) {\n      this.filteredOptions = [...this.options];\n      return;\n    }\n\n    this.filteredOptions = this.options.filter(\n      (option) =>\n        (option.label && String(option.label)?.toLowerCase()?.includes(lowerCaseFilterTerm)) ||\n        (option.value && String(option.value)?.toLowerCase()?.includes(lowerCaseFilterTerm))\n    );\n  }\n\n  private handleFilteringForSlotItems(lowerCaseFilterTerm: string) {\n    const menuItems = this.getMenuItems();\n    menuItems.forEach(async (menuItem) => {\n      // hide all elements which don't contain the entered substring\n      const elementContainsFilterTerm =\n        menuItem?.value?.toLowerCase()?.includes(lowerCaseFilterTerm) ||\n        (await menuItem?.getTextLabel())?.toLowerCase()?.includes(lowerCaseFilterTerm);\n\n      menuItem.style.display = elementContainsFilterTerm ? 'unset' : 'none';\n    });\n  }\n\n  disconnectedCallback() {\n    this.eventListeners.removeAll();\n\n    void this.hide();\n    this.popover?.destroy();\n    this.popover = undefined;\n  }\n\n  /** Shows the dropdown panel */\n  @Method()\n  async show() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (this.isVisible || this.popover == null || this.panel == null) {\n      return;\n    }\n\n    const sixShow = this.sixShow.emit();\n    if (sixShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.eventListeners.add(this.panel, 'six-menu-item-selected', this.handlePanelSelect);\n    this.eventListeners.add(document, 'keydown', this.handleDocumentKeyDown);\n    this.eventListeners.add(document, 'mousedown', this.handleDocumentMouseDown);\n\n    this.isVisible = true;\n    this.open = true;\n    this.popover.show();\n  }\n\n  /** Hides the dropdown panel */\n  @Method()\n  async hide() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (!this.isVisible || this.panel == null || this.popover == null) {\n      return;\n    }\n\n    const sixHide = this.sixHide.emit();\n    if (sixHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.eventListeners.remove(this.panel, 'six-menu-item-selected', this.handlePanelSelect);\n    this.eventListeners.remove(document, 'keydown', this.handleDocumentKeyDown);\n    this.eventListeners.remove(document, 'mousedown', this.handleDocumentMouseDown);\n\n    this.isVisible = false;\n    this.open = false;\n    this.popover.hide();\n  }\n\n  private focusOnTrigger() {\n    if (this.trigger == null) return;\n    const [trigger] = getSlotChildren<HTMLSixButtonElement>(this.trigger);\n    if (trigger != null) {\n      if (typeof trigger.setFocus === 'function') {\n        trigger.setFocus();\n      } else if (typeof trigger.focus === 'function') {\n        trigger.focus();\n      }\n    }\n  }\n\n  private getMenu(): HTMLSixMenuElement | undefined {\n    if (this.panel == null) return;\n    return getSlotChildren<HTMLSixMenuElement>(this.panel).filter(isSixMenu).at(0);\n  }\n\n  /**\n   * Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu\n   * is activated.\n   */\n  @Method()\n  async reposition() {\n    if (!this.open || this.popover == null) {\n      return;\n    }\n    this.popover.reposition();\n  }\n\n  private handleDocumentKeyDown = (event: Event) => {\n    const keyboardEvent = event as KeyboardEvent;\n    // Close when escape is pressed\n    if (keyboardEvent.key === 'Escape') {\n      void this.hide();\n      this.focusOnTrigger();\n      return;\n    }\n\n    if (this.filterInputElement === this.host.shadowRoot?.activeElement) {\n      if (keyboardEvent.key === 'ArrowDown') {\n        const item = this.getMenuItems().find((item) => item.style.display !== 'none');\n        if (item != null) {\n          item.setFocus();\n        }\n      }\n    }\n\n    // Handle tabbing\n    if (keyboardEvent.key === 'Tab') {\n      // Tabbing within an open menu should close the dropdown and refocus the trigger\n      if (this.open && document.activeElement != null && isSixMenuItem(document.activeElement)) {\n        keyboardEvent.preventDefault();\n        void this.hide();\n        this.focusOnTrigger();\n        return;\n      }\n\n      // Tabbing outside the containing element closes the panel\n      //\n      // If the dropdown is used within a shadow DOM, we need to obtain the activeElement within that shadowRoot,\n      // otherwise `document.activeElement` will only return the name of the parent shadow DOM element.\n      setTimeout(() => {\n        const activeElement =\n          this.container.getRootNode() instanceof ShadowRoot\n            ? document.activeElement?.shadowRoot?.activeElement\n            : document.activeElement;\n\n        if (activeElement?.closest(this.container.tagName.toLowerCase()) !== this.container) {\n          void this.hide();\n          return;\n        }\n      });\n    }\n  };\n\n  private handleDocumentMouseDown = (event: Event) => {\n    // Close when clicking outside the containing element\n    const path = event.composedPath() as EventTarget[];\n    if (!path.includes(this.container)) {\n      void this.hide();\n      return;\n    }\n  };\n\n  private handlePanelSelect = (event: Event) => {\n    const target = event.target as HTMLElement;\n\n    // Hide the dropdown when a menu item is selected\n    if (this.closeOnSelect && isSixMenu(target)) {\n      void this.hide();\n      this.focusOnTrigger();\n    }\n  };\n\n  private handleTriggerClick = () => {\n    this.open ? this.hide() : this.show();\n  };\n\n  private handleTriggerKeyDown = (event: KeyboardEvent) => {\n    // Close when escape or tab is pressed\n    if (event.key === 'Escape') {\n      this.focusOnTrigger();\n      void this.hide();\n      return;\n    }\n\n    // When spacebar/enter is pressed, show the panel but don't focus on the menu. This let's the user press the same\n    // key again to hide the menu in case they don't want to make a selection.\n    if (!this.disableHideOnEnterAndSpace && [' ', 'Enter'].includes(event.key)) {\n      event.preventDefault();\n      this.open ? void this.hide() : void this.show();\n      return;\n    }\n\n    const menu = this.getMenu();\n\n    // When up/down is pressed, we make the assumption that the user is familiar with the menu and plans to make a\n    // selection. Rather than toggle the panel, we focus on the menu (if one exists) and activate the first item for\n    // faster navigation.\n    if (['ArrowDown', 'ArrowUp'].includes(event.key)) {\n      event.preventDefault();\n\n      // Show the menu if it's not already open\n      if (!this.open) {\n        void this.show();\n      }\n\n      if (menu == null) {\n        return;\n      }\n      const menuItems = [...menu.querySelectorAll('six-menu-item')];\n      const firstMenuItem = menuItems.at(0);\n      const lastMenuItem = menuItems.at(menuItems.length - 1);\n\n      // Focus on a menu item\n      if (event.key === 'ArrowDown' && firstMenuItem != null) {\n        firstMenuItem.setFocus();\n        return;\n      }\n\n      if (event.key === 'ArrowUp' && lastMenuItem != null) {\n        lastMenuItem.setFocus();\n        return;\n      }\n    }\n\n    // Other keys bring focus to the menu and initiate type-to-select behavior\n    const ignoredKeys = ['Tab', 'Shift', 'Meta', 'Ctrl', 'Alt'];\n    if (this.open && menu != null && !ignoredKeys.includes(event.key)) {\n      void menu.typeToSelect(event.key);\n      return;\n    }\n  };\n\n  private handleTriggerKeyUp = (event: KeyboardEvent) => {\n    // Prevent space from triggering a click event in Firefox\n    if (event.key === ' ') {\n      event.preventDefault();\n    }\n  };\n\n  private handleTriggerSlotChange = () => {\n    this.updateAccessibleTrigger();\n  };\n\n  private handleDropdownScroll = () => {\n    if (this.panel == null) return;\n\n    this.sixScroll.emit({\n      scrollHeight: this.panel.scrollHeight,\n      scrollTop: this.panel.scrollTop,\n      scrollbarHeight: this.panel.offsetHeight * (this.panel.offsetHeight / this.panel.scrollHeight),\n      scrollRatio: this.panel.scrollTop / (this.panel.scrollHeight - this.panel.clientHeight),\n    });\n  };\n\n  //\n  // Slotted triggers can be arbitrary content, but we need to link them to the dropdown panel with `aria-haspopup` and\n  // `aria-expanded`. These must be applied to the \"accessible trigger\" (the tabbable portion of the trigger element\n  // that gets slotted in) so screen readers will understand them. The accessible trigger could be the slotted element,\n  // a child of the slotted element, or an element in the slotted element's shadow root.\n  //\n  // For example, the accessible trigger of an <sl-button> is a <button> located inside its shadow root.\n  //\n  // To determine this, we assume the first tabbable element in the trigger slot is the \"accessible trigger.\"\n  //\n  private updateAccessibleTrigger() {\n    if (this.trigger == null) return;\n\n    const accessibleTrigger = getSlotChildren(this.trigger).map(getNearestTabbableElement).at(0);\n    if (accessibleTrigger != null) {\n      accessibleTrigger.setAttribute('aria-haspopup', 'true');\n      accessibleTrigger.setAttribute('aria-expanded', this.open ? 'true' : 'false');\n    }\n  }\n\n  render() {\n    return (\n      <div\n        part=\"base\"\n        id={this.componentId}\n        class={{\n          dropdown: true,\n          'dropdown--open': this.open,\n        }}\n      >\n        <span\n          part=\"trigger\"\n          class=\"dropdown__trigger\"\n          ref={(el) => (this.trigger = el)}\n          onClick={this.handleTriggerClick}\n          onKeyDown={this.handleTriggerKeyDown}\n          onKeyUp={this.handleTriggerKeyUp}\n        >\n          <slot name=\"trigger\" onSlotchange={this.handleTriggerSlotChange} />\n        </span>\n\n        {/* Position the panel with a wrapper since the popover makes use of `translate`. This let's us add transitions\n        on the panel without interfering with the position. */}\n        <div\n          ref={(el) => (this.positioner = el)}\n          class={{\n            dropdown__positioner: true,\n            dropdown__positioner__filtered: (this.filter || this.asyncFilter) && !this.hoist,\n          }}\n        >\n          {this.hasFilterEnabled && (\n            <six-input\n              class={{\n                'filter-hidden': !this.open,\n              }}\n              aria-hidden={this.open ? 'false' : 'true'}\n              ref={(el) => (this.filterInputElement = el)}\n              placeholder={this.filterPlaceholder}\n            />\n          )}\n          <div\n            ref={(el) => (this.panel = el)}\n            part=\"panel\"\n            class=\"dropdown__panel\"\n            role=\"menu\"\n            aria-hidden={this.open ? 'false' : 'true'}\n            aria-labelledby={this.componentId}\n            onScroll={this.handleDropdownScroll}\n          >\n            <slot />\n            {this.filteredOptions.length > 0 && (\n              <six-menu part=\"menu\" items={this.filteredOptions} virtualScroll={this.virtualScroll}></six-menu>\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n","@import 'src/global/component';\n\n:host {\n  display: block;\n}\n\n.menu {\n  padding: 0 0;\n  border: none;\n  box-shadow: var(--six-elevation-2dp);\n\n  &:focus {\n    outline: none;\n  }\n\n  &--noshadow {\n    box-shadow: none;\n  }\n\n  &__wrapper {\n    &--scrollable {\n      overflow-y: auto;\n    }\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport { getTextContent } from '../../utils/slot';\nimport { StyleDeclaration } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { debounce } from '../../utils/execution-control';\n\nexport interface SixMenuItemData {\n  label: string;\n  value: string;\n}\n\nexport interface SixMenuItemSelectedPayload {\n  name: string;\n  item: HTMLSixMenuItemElement;\n}\n\nconst isFocusedMenuItem = (menuItem: HTMLSixMenuItemElement) =>\n  menuItem?.shadowRoot?.querySelector('.menu-item')?.classList?.contains('menu-item--focused');\n\nconst isSIXMenuItemElement = (el?: Element): el is HTMLSixMenuItemElement =>\n  el?.tagName.toLowerCase() === 'six-menu-item';\n\nconst mapToMenuItem = ({ value, label }: SixMenuItemData) => <six-menu-item value={value}>{label}</six-menu-item>;\n\nconst DEFAULT_NUMBER_OF_ITEMS_SHOWN_FOR_VIRTUAL_SCROLLING = 5;\n\nconst DEFAULT_SIX_MENU_ITEM_HEIGHT = 64;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The menu's content, including menu items, menu dividers, and menu labels.\n *\n * @part base - The component's base wrapper.\n */\n@Component({\n  tag: 'six-menu',\n  styleUrl: 'six-menu.scss',\n  shadow: true,\n})\nexport class SixMenu {\n  private readonly eventListeners = new EventListeners();\n\n  private menu?: HTMLElement;\n  private menuWrapper?: HTMLElement;\n  private typeToSelectString = '';\n  private typeToSelectTimeout?: number;\n\n  @Element() host!: HTMLSixMenuElement;\n\n  /** Emitted when a menu item is selected. */\n  @Event({ eventName: 'six-menu-item-selected' }) sixMenuItemSelected!: EventEmitter<SixMenuItemSelectedPayload>;\n\n  /** Set to true to remove the box-shadow */\n  @Prop() removeBoxShadow = false;\n\n  /** Set the options to be shown in the dropdown */\n  @Prop() items: SixMenuItemData[] | null = null;\n\n  /** Defines how many items should be shown. If the number of items is larger than this property a scrollbar will be shown */\n  @Prop() itemsShown?: number;\n\n  /** Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around)\n   *  are actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot. */\n  @Prop() virtualScroll = false;\n\n  /**\n   * Used for virtual scrolling\n   * Define how many items should be rendered in the DOM when using virtual scrolling\n   */\n  @Prop() itemSize = 10;\n\n  /**\n   * Used for virtual scrolling\n   * Define the debounce for listening on scrolling changes in milliseconds.\n   * The lower the number the more sensitive the component reacts to scrolling changes.\n   */\n  @Prop() scrollingDebounce = 15;\n\n  /**\n   * Used to calculate which items should be rendered in the DOM\n   */\n  @State()\n  private scrollingIndex = 0;\n\n  // set a default item height, this variable will be updated with the real value after the first render.\n  // However, it's necessary to have a default value because we can only fetch the proper height after the first render\n  @State()\n  sixMenuItemHeight = DEFAULT_SIX_MENU_ITEM_HEIGHT;\n\n  connectedCallback() {\n    this.handleClick = this.handleClick.bind(this);\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n  }\n\n  componentWillLoad() {\n    if (this.items === null) {\n      return;\n    }\n  }\n\n  private handleScrolling = () => {\n    if (this.menuWrapper == null) return;\n    // for performance improvements we only update the DOM if the scrollRatio change \"enough\"\n    this.scrollingIndex = Math.floor(this.menuWrapper.scrollTop / this.sixMenuItemHeight);\n  };\n\n  componentDidLoad() {\n    this.setupForVirtualScrollingAfterRendering();\n  }\n\n  disconnectedCallback() {\n    this.eventListeners.removeAll();\n  }\n\n  /**\n   * Initiates type-to-select logic, which automatically selects an option based on what the user is currently typing.\n   * The key passed will be appended to the internal query and the selection will be updated. After a brief period, the\n   * internal query is cleared automatically. This method is intended to be used with the keydown event. Useful for\n   * enabling type-to-select when the menu doesn't have focus.\n   */\n  @Method()\n  async typeToSelect(key: string) {\n    clearTimeout(this.typeToSelectTimeout);\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore\n    this.typeToSelectTimeout = setTimeout(() => (this.typeToSelectString = ''), 750);\n    this.typeToSelectString += key.toLowerCase();\n    const items = this.getItems();\n    for (const item of items) {\n      const slot = item.shadowRoot?.querySelector('slot:not([name])') as HTMLSlotElement;\n      const label = getTextContent(slot).toLowerCase().trim();\n      if (label.substring(0, this.typeToSelectString.length) === this.typeToSelectString) {\n        item.setFocus();\n        break;\n      }\n    }\n  }\n\n  private getItemsShown(): number {\n    const defaultItemsShown = this.virtualScroll ? DEFAULT_NUMBER_OF_ITEMS_SHOWN_FOR_VIRTUAL_SCROLLING : 0;\n    return this.itemsShown ?? defaultItemsShown;\n  }\n\n  private setupForVirtualScrollingAfterRendering() {\n    if (!this.virtualScroll || this.menuWrapper == null) return;\n\n    this.eventListeners.add(this.menuWrapper, 'scroll', debounce(this.handleScrolling, this.scrollingDebounce));\n\n    // set menu height to proper height once the item is rendered.\n    const menuItemHeight = this.menu?.querySelector('six-menu-item')?.clientHeight;\n    if (menuItemHeight != null && menuItemHeight > 0) {\n      this.sixMenuItemHeight = menuItemHeight;\n    }\n  }\n\n  private getItems(): HTMLSixMenuItemElement[] {\n    if (this.menu == null) return [];\n\n    if (this.items != null) {\n      return this.items.map(mapToMenuItem);\n    }\n\n    const slot = this.menu.querySelector('slot');\n    if (slot == null) return [];\n    return [...slot.assignedElements({ flatten: true })].filter(\n      (el): el is HTMLSixMenuItemElement => isSIXMenuItemElement(el) && !el.disabled\n    );\n  }\n\n  private getActiveItemIndex() {\n    const items = this.getItems();\n    const selectedItem = this.getActiveItem();\n    if (selectedItem != null) {\n      const itemIndex = items.indexOf(selectedItem);\n      if (itemIndex > -1) {\n        return itemIndex;\n      }\n    }\n    const sixMenuItems = this.extractItemsFromDOM();\n    return sixMenuItems.findIndex(isFocusedMenuItem);\n  }\n\n  private getActiveItem(): HTMLSixMenuItemElement | undefined {\n    const activeElement = this.getItems().find((i) => i === document.activeElement);\n    if (activeElement != null) {\n      return activeElement;\n    }\n    return this.extractItemsFromDOM()?.find(isFocusedMenuItem);\n  }\n\n  private extractItemsFromDOM() {\n    return Array.from(this.host.shadowRoot?.querySelectorAll('six-menu-item') ?? []);\n  }\n\n  private setActiveItem(item: HTMLSixMenuItemElement) {\n    item?.setFocus();\n  }\n\n  private handleClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n    const clickedItem = target.closest('six-menu-item');\n    if (clickedItem && !clickedItem.disabled) {\n      this.sixMenuItemSelected.emit({ name: clickedItem.value, item: clickedItem });\n    }\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    // Make a selection when pressing enter\n    if (event.key === 'Enter') {\n      const activeItem = this.getActiveItem();\n      event.preventDefault();\n\n      if (activeItem != null) {\n        this.sixMenuItemSelected.emit({ name: activeItem.value, item: activeItem });\n      }\n    }\n\n    // Prevent scrolling when space is pressed\n    if (event.key === ' ') {\n      event.preventDefault();\n    }\n\n    // Move the selection when pressing down or up\n    if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {\n      const items = this.items === null ? this.getItems() : this.extractItemsFromDOM();\n\n      let indexOfActiveItem = this.getActiveItemIndex();\n\n      if (items.length > 0) {\n        event.preventDefault();\n\n        if (event.key === 'ArrowDown') {\n          indexOfActiveItem++;\n        } else if (event.key === 'ArrowUp') {\n          indexOfActiveItem--;\n        } else if (event.key === 'Home') {\n          indexOfActiveItem = 0;\n        } else if (event.key === 'End') {\n          indexOfActiveItem = items.length - 1;\n        }\n\n        if (indexOfActiveItem < 0) indexOfActiveItem = 0;\n        if (indexOfActiveItem > items.length - 1) indexOfActiveItem = items.length - 1;\n\n        this.setActiveItem(items[indexOfActiveItem]);\n\n        return;\n      }\n    }\n\n    void this.typeToSelect(event.key);\n  }\n\n  private getMenuWrapperStyle() {\n    const styles: Partial<StyleDeclaration> = {};\n    if (this.getItemsShown() > 0) {\n      // calculate the proper height to show the correct number of items\n      styles.height = `${(this.getItemsShown() ?? 0) * this.sixMenuItemHeight}px`;\n    }\n    return {\n      ...styles,\n    };\n  }\n\n  private getMenuContainerStyle() {\n    const styles: Partial<StyleDeclaration> = {};\n\n    if (this.virtualScroll) {\n      // calculate height of content are if all items would be rendered so the scrollbar has the proper size\n      styles.transform = `translateY(${this.sixMenuItemHeight * this.scrollingIndex}px)`;\n    }\n\n    return {\n      ...styles,\n    };\n  }\n\n  private getScrollbarGhostStyle() {\n    const styles: Partial<StyleDeclaration> = {};\n\n    if (this.virtualScroll && this.items !== null) {\n      styles.height = `${this.items.length * this.sixMenuItemHeight - this.itemSize * this.sixMenuItemHeight}px`;\n    }\n\n    return {\n      ...styles,\n    };\n  }\n\n  private renderItems() {\n    if (this.items === undefined || this.items === null) {\n      return;\n    }\n\n    if (!this.virtualScroll) {\n      return this.items.map(mapToMenuItem);\n    }\n\n    return this.items\n      .slice(this.scrollingIndex, Math.min(this.items.length, this.itemSize + this.scrollingIndex))\n      .map(mapToMenuItem);\n  }\n\n  render() {\n    return (\n      <div\n        ref={(el) => (this.menuWrapper = el)}\n        style={this.getMenuWrapperStyle()}\n        part=\"wrapper\"\n        class={{\n          menu: true,\n          'menu--noshadow': this.removeBoxShadow,\n          'menu__wrapper--scrollable': this.getItemsShown() > 0,\n        }}\n      >\n        <div\n          ref={(el) => (this.menu = el)}\n          part=\"base\"\n          role=\"menu\"\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n          tabIndex={0}\n          style={this.getMenuContainerStyle()}\n        >\n          <slot />\n          {this.renderItems()}\n        </div>\n        {this.virtualScroll && <div style={this.getScrollbarGhostStyle()} />}\n      </div>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/ui-library/{p-c30f9e0b.entry.js → p-73325eec.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as s,h as a,H as i,g as o}from"./p-ac4f4d45.js";const e=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:inline-block}.tab{display:inline-flex;align-items:center;font-family:var(--six-font-family);font-size:var(--six-font-size-small);font-weight:var(--six-font-weight-semibold);border-radius:4px;color:var(--six-tab-color);padding:var(--six-spacing-medium) var(--six-spacing-large);white-space:nowrap;user-select:none;cursor:pointer;transition:var(--six-transition-fast) box-shadow, var(--six-transition-fast) color}.tab:focus{outline:none}.tab:focus:not(.tab--disabled){color:var(--six-tab-color-active)}.tab.tab--active:not(.tab--disabled){color:var(--six-tab-color-active);font-weight:var(--six-font-weight-bold)}.tab.tab--closable{padding-right:var(--six-spacing-small)}.tab.tab--disabled{color:var(--six-tab-color-disabled);cursor:not-allowed}.tab:hover:not(.tab--disabled){color:var(--six-tab-color-hover)}.tab__close-button{font-size:var(--six-font-size-large);margin-left:var(--six-spacing-xx-small)}.tab__close-button::part(base){padding:var(--six-spacing-xxx-small)}";let r=0;const l=class{constructor(a){t(this,a);this.sixClose=s(this,"six-tab-close",7);this.componentId=`tab-${++r}`;this.panel="";this.active=false;this.closable=false;this.disabled=false}connectedCallback(){this.handleCloseClick=this.handleCloseClick.bind(this)}async setFocus(t){this.tab.focus(t)}async removeFocus(){this.tab.blur()}handleCloseClick(){this.sixClose.emit()}render(){return a(i,{id:this.host.id||this.componentId},a("div",{part:"base",ref:t=>this.tab=t,class:{tab:true,"tab--active":this.active,"tab--closable":this.closable,"tab--disabled":this.disabled},role:"tab","aria-disabled":this.disabled?"true":"false","aria-selected":this.active?"true":"false",tabindex:this.disabled||!this.active?"-1":"0"},a("slot",null),this.closable&&a("six-icon-button",{name:"close",size:"xSmall",exportparts:"base:close-button",class:"tab__close-button",onClick:this.handleCloseClick,tabIndex:-1,"aria-hidden":"true"})))}get host(){return o(this)}};l.style=e;export{l as six_tab};
-//# sourceMappingURL=p-c30f9e0b.entry.js.map
+import{r as t,c as s,h as a,H as i,g as o}from"./p-187fbba0.js";const e=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:inline-block}.tab{display:inline-flex;align-items:center;font-family:var(--six-font-family);font-size:var(--six-font-size-small);font-weight:var(--six-font-weight-semibold);border-radius:4px;color:var(--six-tab-color);padding:var(--six-spacing-medium) var(--six-spacing-large);white-space:nowrap;user-select:none;cursor:pointer;transition:var(--six-transition-fast) box-shadow, var(--six-transition-fast) color}.tab:focus{outline:none}.tab:focus:not(.tab--disabled){color:var(--six-tab-color-active)}.tab.tab--active:not(.tab--disabled){color:var(--six-tab-color-active);font-weight:var(--six-font-weight-bold)}.tab.tab--closable{padding-right:var(--six-spacing-small)}.tab.tab--disabled{color:var(--six-tab-color-disabled);cursor:not-allowed}.tab:hover:not(.tab--disabled){color:var(--six-tab-color-hover)}.tab__close-button{font-size:var(--six-font-size-large);margin-left:var(--six-spacing-xx-small)}.tab__close-button::part(base){padding:var(--six-spacing-xxx-small)}";let r=0;const l=class{constructor(a){t(this,a);this.sixClose=s(this,"six-tab-close",7);this.componentId=`tab-${++r}`;this.panel="";this.active=false;this.closable=false;this.disabled=false}connectedCallback(){this.handleCloseClick=this.handleCloseClick.bind(this)}async setFocus(t){var s;(s=this.tab)===null||s===void 0?void 0:s.focus(t)}async removeFocus(){var t;(t=this.tab)===null||t===void 0?void 0:t.blur()}handleCloseClick(){this.sixClose.emit()}render(){return a(i,{id:this.host.id||this.componentId},a("div",{part:"base",ref:t=>this.tab=t,class:{tab:true,"tab--active":this.active,"tab--closable":this.closable,"tab--disabled":this.disabled},role:"tab","aria-disabled":this.disabled?"true":"false","aria-selected":this.active?"true":"false",tabindex:this.disabled||!this.active?"-1":"0"},a("slot",null),this.closable&&a("six-icon-button",{name:"close",size:"xSmall",exportparts:"base:close-button",class:"tab__close-button",onClick:this.handleCloseClick,tabIndex:-1,"aria-hidden":"true"})))}get host(){return o(this)}};l.style=e;export{l as six_tab};
+//# sourceMappingURL=p-73325eec.entry.js.map

package/dist/ui-library/p-73325eec.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sixTabCss","id","SixTab","this","componentId","connectedCallback","handleCloseClick","bind","async","options","_a","tab","focus","blur","sixClose","emit","render","h","Host","host","part","ref","el","class","active","closable","disabled","role","tabindex","name","size","exportparts","onClick","tabIndex"],"sources":["./src/components/six-tab/six-tab.scss?tag=six-tab&encapsulation=shadow","./src/components/six-tab/six-tab.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: inline-block;\n}\n\n.tab {\n  display: inline-flex;\n  align-items: center;\n  font-family: var(--six-font-family);\n  font-size: var(--six-font-size-small);\n  font-weight: var(--six-font-weight-semibold);\n  border-radius: 4px;\n  color: var(--six-tab-color);\n  padding: var(--six-spacing-medium) var(--six-spacing-large);\n  white-space: nowrap;\n  user-select: none;\n  cursor: pointer;\n  transition: var(--six-transition-fast) box-shadow, var(--six-transition-fast) color;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus:not(.tab--disabled) {\n    color: var(--six-tab-color-active);\n  }\n\n  &.tab--active:not(.tab--disabled) {\n    color: var(--six-tab-color-active);\n    font-weight: var(--six-font-weight-bold);\n  }\n\n  &.tab--closable {\n    padding-right: var(--six-spacing-small);\n  }\n\n  &.tab--disabled {\n    color: var(--six-tab-color-disabled);\n    cursor: not-allowed;\n  }\n\n  &:hover:not(.tab--disabled) {\n    color: var(--six-tab-color-hover);\n  }\n}\n\n.tab__close-button {\n  font-size: var(--six-font-size-large);\n  margin-left: var(--six-spacing-xx-small);\n\n  &::part(base) {\n    padding: var(--six-spacing-xxx-small);\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The tab's label.\n *\n * @part base - The component's base wrapper.\n * @part close-button - The close button, which is the icon button's base wrapper.\n */\n\n@Component({\n  tag: 'six-tab',\n  styleUrl: 'six-tab.scss',\n  shadow: true,\n})\nexport class SixTab {\n  private componentId = `tab-${++id}`;\n  private tab?: HTMLElement;\n\n  @Element() host!: HTMLSixTabElement;\n\n  /** The name of the tab panel the tab will control. The panel must be located in the same tab group. */\n  @Prop({ reflect: true }) panel = '';\n\n  /** Set to true to draw the tab in an active state. */\n  @Prop({ reflect: true }) active = false;\n\n  /** When true, the tab will be rendered with a close icon. */\n  @Prop() closable = false;\n\n  /** Set to true to draw the tab in a disabled state. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Emitted when the tab is closable and the close button is activated. */\n  @Event({ eventName: 'six-tab-close' }) sixClose!: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    this.handleCloseClick = this.handleCloseClick.bind(this);\n  }\n\n  /** Sets focus to the tab. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.tab?.focus(options);\n  }\n\n  /** Removes focus from the tab. */\n  @Method()\n  async removeFocus() {\n    this.tab?.blur();\n  }\n\n  private handleCloseClick() {\n    this.sixClose.emit();\n  }\n\n  render() {\n    return (\n      // If the user didn't provide an ID, we'll set one so we can link tabs and tab panels with aria labels\n      <Host id={this.host.id || this.componentId}>\n        <div\n          part=\"base\"\n          ref={(el) => (this.tab = el)}\n          class={{\n            tab: true,\n\n            // States\n            'tab--active': this.active,\n            'tab--closable': this.closable,\n            'tab--disabled': this.disabled,\n          }}\n          role=\"tab\"\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          aria-selected={this.active ? 'true' : 'false'}\n          tabindex={this.disabled || !this.active ? '-1' : '0'}\n        >\n          <slot />\n          {this.closable && (\n            <six-icon-button\n              name=\"close\"\n              size=\"xSmall\"\n              exportparts=\"base:close-button\"\n              class=\"tab__close-button\"\n              onClick={this.handleCloseClick}\n              tabIndex={-1}\n              aria-hidden=\"true\"\n            />\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAY,kkCCGlB,IAAIC,EAAK,E,MAmBIC,EAAM,M,iEACTC,KAAAC,YAAc,SAASH,I,WAME,G,YAGC,M,cAGf,M,cAGiB,K,CAKpCI,oBACEF,KAAKG,iBAAmBH,KAAKG,iBAAiBC,KAAKJ,K,CAKrDK,eAAeC,G,OACbC,EAAAP,KAAKQ,OAAG,MAAAD,SAAA,SAAAA,EAAEE,MAAMH,E,CAKlBD,oB,OACEE,EAAAP,KAAKQ,OAAG,MAAAD,SAAA,SAAAA,EAAEG,M,CAGJP,mBACNH,KAAKW,SAASC,M,CAGhBC,SACE,OAEEC,EAACC,EAAI,CAACjB,GAAIE,KAAKgB,KAAKlB,IAAME,KAAKC,aAC7Ba,EAAA,OACEG,KAAK,OACLC,IAAMC,GAAQnB,KAAKQ,IAAMW,EACzBC,MAAO,CACLZ,IAAK,KAGL,cAAeR,KAAKqB,OACpB,gBAAiBrB,KAAKsB,SACtB,gBAAiBtB,KAAKuB,UAExBC,KAAK,MAAK,gBACKxB,KAAKuB,SAAW,OAAS,QAAO,gBAChCvB,KAAKqB,OAAS,OAAS,QACtCI,SAAUzB,KAAKuB,WAAavB,KAAKqB,OAAS,KAAO,KAEjDP,EAAA,aACCd,KAAKsB,UACJR,EAAA,mBACEY,KAAK,QACLC,KAAK,SACLC,YAAY,oBACZR,MAAM,oBACNS,QAAS7B,KAAKG,iBACd2B,UAAW,EAAC,cACA,U"}

package/dist/ui-library/p-7639c68e.entry.js

@@ -0,0 +1,2 @@
+import{r,c as a,h as i}from"./p-187fbba0.js";const s=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:inline-block}.tag{display:flex;align-items:center;border:solid 1px;font-family:var(--six-font-family);line-height:1;white-space:nowrap;user-select:none;cursor:default}.tag__clear::part(base){color:inherit;padding:0}.tag--info{color:var(--six-color-white);background-color:var(--six-color-web-rock-900);border-color:var(--six-color-web-rock-900)}.tag--success{color:var(--six-color-web-rock-900);border-color:var(--six-color-success-500);background-color:var(--six-color-success-500)}.tag--primary{color:var(--six-color-web-rock-900);border-color:var(--six-color-clay-50);background-color:var(--six-color-clay-50)}.tag--warning{color:var(--six-color-web-rock-900);border-color:var(--six-color-warning-700);background-color:var(--six-color-warning-700)}.tag--danger{color:var(--six-color-white);border-color:var(--six-color-danger-800);background-color:var(--six-color-danger-800)}.tag--action{color:var(--six-color-white);border-color:var(--six-color-action-500);background-color:var(--six-color-action-500)}.tag--small{font-size:var(--six-button-font-size-small);height:calc(var(--six-height-small) * 0.8);line-height:calc(var(--six-height-small) - var(--six-border-width) * 2);border-radius:var(--six-input-border-radius-small);padding:0 var(--six-spacing-x-small)}.tag--small .tag__clear{margin-left:var(--six-spacing-xx-small);margin-right:calc(-1 * var(--six-spacing-xxx-small))}.tag--medium{font-size:var(--six-button-font-size-medium);height:calc(var(--six-height-medium) * 0.8);line-height:calc(var(--six-height-medium) - var(--six-border-width) * 2);border-radius:var(--six-input-border-radius-medium);padding:0 var(--six-spacing-small)}.tag--medium .tag__clear{margin-left:var(--six-spacing-xx-small);margin-right:calc(-1 * var(--six-spacing-xx-small))}.tag--large{font-size:var(--six-button-font-size-large);height:calc(var(--six-height-large) * 0.8);line-height:calc(var(--six-height-large) - var(--six-border-width) * 2);border-radius:var(--six-input-border-radius-large);padding:0 var(--six-spacing-medium)}.tag--large .tag__clear{margin-left:var(--six-spacing-xx-small);margin-right:calc(-1 * var(--six-spacing-x-small))}.tag--pill{border-radius:var(--six-border-radius-pill)}";const o=class{constructor(i){r(this,i);this.sixClear=a(this,"six-tag-clear",7);this.handleClearClick=()=>{this.sixClear.emit()};this.type="primary";this.size="medium";this.pill=false;this.clearable=false}render(){return i("span",{part:"base",class:{tag:true,"tag--primary":this.type==="primary","tag--success":this.type==="success","tag--info":this.type==="info","tag--warning":this.type==="warning","tag--danger":this.type==="danger","tag--action":this.type==="action","tag--text":this.type==="text","tag--small":this.size==="small","tag--medium":this.size==="medium","tag--large":this.size==="large","tag--pill":this.pill,"tag--clear":this.clearable}},i("span",{part:"content",class:"tag__content"},i("slot",null)),this.clearable&&i("six-icon-button",{exportparts:"base:clear-button",size:"xSmall",name:"clear",class:"tag__clear",onClick:this.handleClearClick}))}};o.style=s;export{o as six_tag};
+//# sourceMappingURL=p-7639c68e.entry.js.map

package/dist/ui-library/p-7639c68e.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sixTagCss","SixTag","this","handleClearClick","sixClear","emit","render","h","part","class","tag","type","size","pill","clearable","exportparts","name","onClick"],"sources":["./src/components/six-tag/six-tag.scss?tag=six-tag&encapsulation=shadow","./src/components/six-tag/six-tag.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: inline-block;\n}\n\n.tag {\n  display: flex;\n  align-items: center;\n  border: solid 1px;\n  font-family: var(--six-font-family);\n  line-height: 1;\n  white-space: nowrap;\n  user-select: none;\n  cursor: default;\n}\n\n.tag__clear::part(base) {\n  color: inherit;\n  padding: 0;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Type modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.tag--info {\n  color: var(--six-color-white);\n  background-color: var(--six-color-web-rock-900);\n  border-color: var(--six-color-web-rock-900);\n}\n\n.tag--success {\n  color: var(--six-color-web-rock-900);\n  border-color: var(--six-color-success-500);\n  background-color: var(--six-color-success-500);\n}\n\n.tag--primary {\n  color: var(--six-color-web-rock-900);\n  border-color: var(--six-color-clay-50);\n  background-color: var(--six-color-clay-50);\n}\n\n.tag--warning {\n  color: var(--six-color-web-rock-900);\n  border-color: var(--six-color-warning-700);\n  background-color: var(--six-color-warning-700);\n}\n\n.tag--danger {\n  color: var(--six-color-white);\n  border-color: var(--six-color-danger-800);\n  background-color: var(--six-color-danger-800);\n}\n\n.tag--action {\n  color: var(--six-color-white);\n  border-color: var(--six-color-action-500);\n  background-color: var(--six-color-action-500);\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Size modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.tag--small {\n  font-size: var(--six-button-font-size-small);\n  height: calc(var(--six-height-small) * 0.8);\n  line-height: calc(var(--six-height-small) - var(--six-border-width) * 2);\n  border-radius: var(--six-input-border-radius-small);\n  padding: 0 var(--six-spacing-x-small);\n\n  .tag__clear {\n    margin-left: var(--six-spacing-xx-small);\n    margin-right: calc(-1 * var(--six-spacing-xxx-small));\n  }\n}\n\n.tag--medium {\n  font-size: var(--six-button-font-size-medium);\n  height: calc(var(--six-height-medium) * 0.8);\n  line-height: calc(var(--six-height-medium) - var(--six-border-width) * 2);\n  border-radius: var(--six-input-border-radius-medium);\n  padding: 0 var(--six-spacing-small);\n\n  .tag__clear {\n    margin-left: var(--six-spacing-xx-small);\n    margin-right: calc(-1 * var(--six-spacing-xx-small));\n  }\n}\n\n.tag--large {\n  font-size: var(--six-button-font-size-large);\n  height: calc(var(--six-height-large) * 0.8);\n  line-height: calc(var(--six-height-large) - var(--six-border-width) * 2);\n  border-radius: var(--six-input-border-radius-large);\n  padding: 0 var(--six-spacing-medium);\n\n  .tag__clear {\n    margin-left: var(--six-spacing-xx-small);\n    margin-right: calc(-1 * var(--six-spacing-x-small));\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pill modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.tag--pill {\n  border-radius: var(--six-border-radius-pill);\n}\n","import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The tag's content.\n *\n * @part base - The component's base wrapper.\n * @part content - The tag content.\n * @part clear-button - The clear button.\n */\n\n@Component({\n  tag: 'six-tag',\n  styleUrl: 'six-tag.scss',\n  shadow: true,\n})\nexport class SixTag {\n  /** The tag's type. */\n  @Prop({ reflect: true }) type: 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'action' | 'text' = 'primary';\n\n  /** The tag's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Set to true to draw a pill-style tag with rounded edges. */\n  @Prop({ reflect: true }) pill = false;\n\n  /** Set to true to make the tag clearable. */\n  @Prop({ reflect: true }) clearable = false;\n\n  /** Emitted when the clear button is activated. */\n  @Event({ eventName: 'six-tag-clear' }) sixClear!: EventEmitter<EmptyPayload>;\n\n  private handleClearClick = () => {\n    this.sixClear.emit();\n  };\n\n  render() {\n    return (\n      <span\n        part=\"base\"\n        class={{\n          tag: true,\n\n          // Types\n          'tag--primary': this.type === 'primary',\n          'tag--success': this.type === 'success',\n          'tag--info': this.type === 'info',\n          'tag--warning': this.type === 'warning',\n          'tag--danger': this.type === 'danger',\n          'tag--action': this.type === 'action',\n          'tag--text': this.type === 'text',\n\n          // Sizes\n          'tag--small': this.size === 'small',\n          'tag--medium': this.size === 'medium',\n          'tag--large': this.size === 'large',\n\n          // Modifers\n          'tag--pill': this.pill,\n          'tag--clear': this.clearable,\n        }}\n      >\n        <span part=\"content\" class=\"tag__content\">\n          <slot />\n        </span>\n\n        {this.clearable && (\n          <six-icon-button\n            exportparts=\"base:clear-button\"\n            size=\"xSmall\"\n            name=\"clear\"\n            class=\"tag__clear\"\n            onClick={this.handleClearClick}\n          />\n        )}\n      </span>\n    );\n  }\n}\n"],"mappings":"6CAAA,MAAMA,EAAY,qwE,MCqBLC,EAAM,M,iEAgBTC,KAAAC,iBAAmB,KACzBD,KAAKE,SAASC,MAAM,E,UAfqF,U,UAG7C,S,UAG9B,M,eAGK,K,CASrCC,SACE,OACEC,EAAA,QACEC,KAAK,OACLC,MAAO,CACLC,IAAK,KAGL,eAAgBR,KAAKS,OAAS,UAC9B,eAAgBT,KAAKS,OAAS,UAC9B,YAAaT,KAAKS,OAAS,OAC3B,eAAgBT,KAAKS,OAAS,UAC9B,cAAeT,KAAKS,OAAS,SAC7B,cAAeT,KAAKS,OAAS,SAC7B,YAAaT,KAAKS,OAAS,OAG3B,aAAcT,KAAKU,OAAS,QAC5B,cAAeV,KAAKU,OAAS,SAC7B,aAAcV,KAAKU,OAAS,QAG5B,YAAaV,KAAKW,KAClB,aAAcX,KAAKY,YAGrBP,EAAA,QAAMC,KAAK,UAAUC,MAAM,gBACzBF,EAAA,cAGDL,KAAKY,WACJP,EAAA,mBACEQ,YAAY,oBACZH,KAAK,SACLI,KAAK,QACLP,MAAM,aACNQ,QAASf,KAAKC,mB"}

package/dist/ui-library/p-764f56dd.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as i,g as s}from"./p-187fbba0.js";import{I as n,a as r}from"./p-25a3bf57.js";import{D as h,b as o,a as c}from"./p-8cf72af6.js";import{E as u}from"./p-02d5a6d8.js";const l=".item_picker__container{width:2.5em;display:flex;flex-wrap:wrap;justify-content:center}.item_picker__content{font-size:1.5rem}.item_picker__btn{cursor:pointer;width:2.5em;height:2.5em;display:flex;vertical-align:middle;align-items:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:var(--six-color-web-rock-500)}.item_picker__btn:hover{background-color:var(--six-color-web-rock-100);border-radius:100%}.item_picker__btn:active{color:var(--six-color-web-rock-400)}.item_picker__btn--disabled{color:var(--six-color-web-rock-300);cursor:not-allowed}.item_picker__btn--disabled:hover{background-color:initial}.item_picker__btn--disabled:active{color:var(--six-color-web-rock-300)}";const a="ABCDEFGHIJKLMNOPQRSTUVWXYZ";const d=[...a].flatMap((t=>[t,t.toLowerCase()]));const m={alphabet:d,letterIndexes:Object.fromEntries(d.map(((t,e)=>[t,e])))};const p={alphabet:[...a].flatMap((t=>[t])),letterIndexes:Object.fromEntries([...a].map(((t,e)=>[t,e])))};const b={alphabet:[...a.toLowerCase()].flatMap((t=>[t])),letterIndexes:Object.fromEntries([...a.toLowerCase()].map(((t,e)=>[t,e])))};const f=t=>Object.fromEntries([...t].map(((t,e)=>[t,e])));const g=`[SIX-ITEM-PICKER]`;const x=(t,e)=>t-e;const _=(t,e)=>t+e;const v="debounced-item-picker";const I=class{constructor(i){t(this,i);this.sixChange=e(this,"six-item-picker-change",7);this.sixChangeDebounced=e(this,"six-item-picker-change-debounced",7);this.eventListeners=new u;this.handleSixItemPickerChangeDebounced=()=>{this.sixChangeDebounced.emit(this.value)};this.value="";this.type=n.NUMBER;this.min=undefined;this.max=undefined;this.roundtrip=true;this.step=1;this.items=undefined;this.padded=false;this.paddingLength=2;this.paddingChar="0";this.paddingDirection=r.BEFORE;this.timeout=h;this.interval=o;this.debounce=h;this._items=[];this._itemIndexes={}}handleValueChange(){this.setup()}debounceChanged(){this.eventListeners.removeByIdentifier(v);this.eventListeners.add(this.host,"six-item-picker-change",c(this.handleSixItemPickerChangeDebounced,this.debounce),v)}handleSetChange(){this.setup();this.min=this._items[0];this.max=this.getLastStringItem()}componentWillLoad(){this.setup()}componentDidLoad(){this.eventListeners.add(this.host,"six-item-picker-change",c(this.handleSixItemPickerChangeDebounced,this.debounce),v)}disconnectedCallback(){this.eventListeners.removeAll()}setup(){if(this.isNumber()){this.setupNumberItems()}else{this.setUpStringItems()}}setupNumberItems(){var t;if(this.isInvalidNumber()){console.warn(`${g} Expected number but value is not a number: "${this.value}"`);console.info(`${g} Will set value to either minimum or if not provided to zero.`);this.value=(t=this.min)!==null&&t!==void 0?t:0}}setUpStringItems(){this._items=this.getStringItems();this._itemIndexes=this.getItemIndexes();const t=this._items.find((t=>String(t)===String(this.value)))===undefined;if(t){console.warn(`${g} Expected item from item set but value was not found in set: "${this.value}"`);console.info(`${g} Will set value to either minimum or if not provided to "${this._items[0]}".`);this.value=this._items[0]}if(this.min===undefined){if(!this.roundtrip){console.warn(`${g} Expected a min value`);console.info(`${g} Will set min value to ${this._items[0]}`)}this.min=this._items[0]}if(this.max===undefined){const t=this.getLastStringItem();if(!this.roundtrip){console.warn(`${g} Expected a min value if roundtrip is enabled`);console.info(`${g} Will set min value to ${t}`)}this.max=t}}getLastStringItem(){return this._items[this._items.length-1]}getStringItems(){switch(this.type){case n.NUMBER:console.warn(`${g}: unexpected type ${this.type}`);return[];case n.LETTER:return m.alphabet;case n.CAPITAL_LETTER:return p.alphabet;case n.LOWER_LETTER:return b.alphabet;case n.CUSTOM:if(this.items==null||this.items.length===0){console.warn(`${g}: no items defined for type ${this.type}`);return[]}return this.items}}getItemIndexes(){switch(this.type){case n.NUMBER:console.warn(`${g}: unexpected type ${this.type}`);return{};case n.LETTER:return m.letterIndexes;case n.CAPITAL_LETTER:return p.letterIndexes;case n.LOWER_LETTER:return b.letterIndexes;case n.CUSTOM:return f(this._items)}}previousItem(){if(this.isNumber()){this.previousNumber()}else{this.previousStringItem()}this.sixChange.emit(this.value)}previousNumber(){this.changeValue({isNextItemAllowed:()=>!this.isPreviousNumberDisabled(),getNextItem:()=>Number(this.value)-this.step,getRoundtripItem:()=>Number(this.max),isRoundtripPossible:()=>this.max===undefined&&this.roundtrip})}previousStringItem(){const t=String(this.value);const e=String(this.min);this.changeValue({isNextItemAllowed:()=>e===undefined||this.getStringItemIndex(t)>this.getStringItemIndex(e),getNextItem:()=>this.getNextItemByOperation(x),getRoundtripItem:()=>String(this.max),isRoundtripPossible:()=>this.max==null&&this.roundtrip})}nextItem(){if(this.isNumber()){this.nextNumber()}else{this.nextStringItem()}this.sixChange.emit(this.value)}nextNumber(){this.changeValue({isNextItemAllowed:()=>!this.isNextNumberDisabled(),getNextItem:()=>Number(this.value)+this.step,getRoundtripItem:()=>Number(this.min),isRoundtripPossible:()=>this.min===undefined&&this.roundtrip})}getStringItemIndex(t){return this._itemIndexes[t]}nextStringItem(){const t=String(this.value);const e=String(this.max);this.changeValue({isNextItemAllowed:()=>e===undefined||this.getStringItemIndex(t)<this.getStringItemIndex(e),getNextItem:()=>this.getNextItemByOperation(_),getRoundtripItem:()=>String(this.min),isRoundtripPossible:()=>this.min===undefined&&this.roundtrip})}getNextItemByOperation(t){const e=String(this.value);const i=t(this.getStringItemIndex(e),this.step);const s=this._items.length;const n=(i%s+s)%s;return this._items[n]}changeValue(t){if(t.isNextItemAllowed()){this.value=t.getNextItem();return}if(t.isRoundtripPossible()){console.error(`${g} Item picker is expected to perform a roundtrip, but either max or min value is missing so a roundtrip is not possible`);return}if(this.roundtrip){this.value=t.getRoundtripItem();return}console.warn(`${g} Roundtrip is not allowed, but was still triggered, please report this issue to the developer of six-item-picker`)}isNumber(){return this.type===n.NUMBER}isInvalidNumber(){return this.value===""||isNaN(this.value)}isNextDisabled(){if(this.roundtrip){return false}if(this.isNumber()){return this.isNextNumberDisabled()}else{return this._itemIndexes[String(this.value)]+this.step>this._itemIndexes[String(this.max)]}}isNextNumberDisabled(){var t;return Number(this.value)+this.step>((t=this.max)!==null&&t!==void 0?t:Infinity)}isPrevDisabled(){if(this.roundtrip){return false}if(this.isNumber()){return this.isPreviousNumberDisabled()}else{return this._itemIndexes[String(this.value)]-this.step<this._itemIndexes[String(this.min)]}}isPreviousNumberDisabled(){var t;return Number(this.value)-this.step<((t=this.min)!==null&&t!==void 0?t:-Infinity)}onMouseDownNext(){if(this.isNextDisabled()){return}this.nextItem();this._timeoutNext=setTimeout((()=>{this._intervalNext=setInterval((()=>{this.nextItem()}),this.interval)}),this.timeout)}onMouseUpNext(){clearTimeout(this._timeoutNext);clearInterval(this._intervalNext)}onMouseDownPrev(){if(this.isPrevDisabled()){return}this.previousItem();this._timeoutPrev=setTimeout((()=>{this._intervalPrev=setInterval((()=>{this.previousItem()}),this.interval)}),this.timeout)}onMouseUpPrev(){clearTimeout(this._timeoutPrev);clearInterval(this._intervalPrev)}getFormattedValue(){if(this.value===undefined||this.value===null){return this.value}if(!this.padded){return this.value}if(this.paddingDirection===r.BEFORE){return String(this.value).padStart(this.paddingLength,this.paddingChar)}else if(this.paddingDirection===r.AFTER){return String(this.value).padEnd(this.paddingLength,this.paddingChar)}return this.value}render(){return i("div",{part:"container",class:"item_picker__container"},i("div",{part:"up",class:{item_picker__btn:true,"item_picker__btn--disabled":this.isNextDisabled()},onMouseDown:()=>this.onMouseDownNext(),onMouseUp:()=>this.onMouseUpNext()},i("six-icon",{size:"large"},"expand_less")),i("div",{part:"content",class:"item_picker__content"},this.getFormattedValue()),i("div",{part:"down",class:{item_picker__btn:true,"item_picker__btn--disabled":this.isPrevDisabled()},onMouseDown:()=>this.onMouseDownPrev(),onMouseUp:()=>this.onMouseUpPrev()},i("six-icon",{size:"large"},"expand_more")))}get host(){return s(this)}static get watchers(){return{value:["handleValueChange"],debounce:["debounceChanged"],items:["handleSetChange"]}}};I.style=l;export{I as six_item_picker};
+//# sourceMappingURL=p-764f56dd.entry.js.map

package/dist/ui-library/p-764f56dd.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sixItemPickerCss","uppercaseLetters","upperAndLowercaseLetters","flatMap","c","toLowerCase","ALPHABET","alphabet","letterIndexes","Object","fromEntries","map","i","CAPITAL_ALPHABET","LOWERCASE_ALPHABET","createItemIndexes","arr","TAG","subtract","a","b","add","DEBOUNCE_ITEM_PICKER_LISTENER","SixItemPicker","this","eventListeners","EventListeners","handleSixItemPickerChangeDebounced","sixChangeDebounced","emit","value","ItemPickerType","NUMBER","ItemPickerPaddingDirection","BEFORE","DEFAULT_DEBOUNCE_FAST","DEFAULT_DEBOUNCE_INSANELY_FAST","handleValueChange","setup","debounceChanged","removeByIdentifier","host","debounce","handleSetChange","min","_items","max","getLastStringItem","componentWillLoad","componentDidLoad","disconnectedCallback","removeAll","isNumber","setupNumberItems","setUpStringItems","isInvalidNumber","console","warn","info","_a","getStringItems","_itemIndexes","getItemIndexes","itemsMissValue","find","String","undefined","roundtrip","maxItem","length","type","LETTER","CAPITAL_LETTER","LOWER_LETTER","CUSTOM","items","previousItem","previousNumber","previousStringItem","sixChange","changeValue","isNextItemAllowed","isPreviousNumberDisabled","getNextItem","Number","step","getRoundtripItem","isRoundtripPossible","minLetter","getStringItemIndex","getNextItemByOperation","nextItem","nextNumber","nextStringItem","isNextNumberDisabled","char","maxLetter","operation","nextIndexCandidate","numberOfItems","nextIndex","params","error","isNaN","isNextDisabled","Infinity","isPrevDisabled","onMouseDownNext","_timeoutNext","setTimeout","_intervalNext","setInterval","interval","timeout","onMouseUpNext","clearTimeout","clearInterval","onMouseDownPrev","_timeoutPrev","_intervalPrev","onMouseUpPrev","getFormattedValue","padded","paddingDirection","padStart","paddingLength","paddingChar","AFTER","padEnd","render","h","part","class","item_picker__btn","onMouseDown","onMouseUp","size"],"sources":["./src/components/six-item-picker/six-item-picker.scss?tag=six-item-picker&encapsulation=shadow","./src/components/six-item-picker/six-item-picker.tsx"],"sourcesContent":[".item_picker {\n  &__container {\n    width: 2.5em;\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: center;\n  }\n\n  &__content {\n    font-size: 1.5rem;\n  }\n\n  &__btn {\n    cursor: pointer;\n    width: 2.5em;\n    height: 2.5em;\n    display: flex;\n    vertical-align: middle;\n    align-items: center;\n    justify-content: center;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n    color: var(--six-color-web-rock-500);\n\n    &:hover {\n      background-color: var(--six-color-web-rock-100);\n      border-radius: 100%;\n    }\n\n    &:active {\n      color: var(--six-color-web-rock-400);\n    }\n\n    &--disabled {\n      color: var(--six-color-web-rock-300);\n      cursor: not-allowed;\n\n      &:hover {\n        background-color: initial;\n      }\n\n      &:active {\n        color: var(--six-color-web-rock-300);\n      }\n    }\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport { ItemPickerPaddingDirection, ItemPickerType } from './types';\nimport { debounce, DEFAULT_DEBOUNCE_FAST, DEFAULT_DEBOUNCE_INSANELY_FAST } from '../../utils/execution-control';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { TimePeriod } from '../../utils/time.util';\n\ninterface Alphabet {\n  alphabet: string[];\n  letterIndexes: Record<string, number>;\n}\n\nconst uppercaseLetters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';\nconst upperAndLowercaseLetters = [...uppercaseLetters].flatMap((c) => [c, c.toLowerCase()]);\nconst ALPHABET: Alphabet = {\n  alphabet: upperAndLowercaseLetters,\n  letterIndexes: Object.fromEntries(upperAndLowercaseLetters.map((c, i) => [c, i])),\n};\nconst CAPITAL_ALPHABET: Alphabet = {\n  alphabet: [...uppercaseLetters].flatMap((c) => [c]),\n  letterIndexes: Object.fromEntries([...uppercaseLetters].map((c, i) => [c, i])),\n};\nconst LOWERCASE_ALPHABET: Alphabet = {\n  alphabet: [...uppercaseLetters.toLowerCase()].flatMap((c) => [c]),\n  letterIndexes: Object.fromEntries([...uppercaseLetters.toLowerCase()].map((c, i) => [c, i])),\n};\n\nconst createItemIndexes = (arr: string[]): Record<string, number> => {\n  return Object.fromEntries([...arr].map((c, i) => [c, i]));\n};\n\nconst TAG = `[SIX-ITEM-PICKER]`;\n\nconst subtract = (a: number, b: number) => a - b;\nconst add = (a: number, b: number) => a + b;\n\nexport type SixItemPickerChangePayload = number | string | boolean | TimePeriod;\n\nconst DEBOUNCE_ITEM_PICKER_LISTENER = 'debounced-item-picker';\n\n/**\n * @since 2.0.0\n * @status experimental\n * @part container - The whole component container\n * @part up - The up button\n * @part content - The content area\n * @part down - The down button\n *\n */\n@Component({\n  tag: 'six-item-picker',\n  styleUrl: 'six-item-picker.scss',\n  shadow: true,\n})\nexport class SixItemPicker {\n  private readonly eventListeners = new EventListeners();\n\n  @Element() host!: HTMLSixItemPickerElement;\n\n  /** The item picker's value attribute. */\n  @Prop({ mutable: true, reflect: true }) value: number | string = '';\n\n  /** The type of items you want to rotate through. */\n  @Prop() type: ItemPickerType = ItemPickerType.NUMBER;\n\n  /** The minimum value allowed to pick. */\n  @Prop({ reflect: true, mutable: true }) min?: number | string;\n\n  /** The maximum value allowed to pick. */\n  @Prop({ reflect: true, mutable: true }) max?: number | string;\n\n  /** Define whether the picker should to a roundtrip i.e. start at max when reaching min and vice versa. */\n  @Prop({ reflect: true }) roundtrip = true;\n\n  /** Defines how many steps should be taken when navigating */\n  @Prop({ reflect: true }) step = 1;\n\n  /** Defines a custom list of items you can iterate through */\n  @Prop() items?: string[];\n\n  /** Defines whether the items should be padded */\n  @Prop() padded = false;\n\n  /** Defines the length of the padded area */\n  @Prop() paddingLength = 2;\n\n  /** Defines the character used for padding */\n  @Prop() paddingChar = '0';\n\n  /** Defines whether the padding should be before or after the value. You can either use 'before' or 'after'. By default,\n   * before is selected */\n  @Prop() paddingDirection: ItemPickerPaddingDirection = ItemPickerPaddingDirection.BEFORE;\n\n  /**\n   * Set the amount of time, in milliseconds, to wait to trigger faster switching between items.\n   */\n  @Prop() timeout = DEFAULT_DEBOUNCE_FAST;\n\n  /**\n   * Set the amount of time, in milliseconds, to wait between switching to next item when mouse button is held pressed.\n   */\n  @Prop() interval = DEFAULT_DEBOUNCE_INSANELY_FAST;\n\n  /**\n   * Emitted when the item picker's value changes\n   */\n  @Event({ eventName: 'six-item-picker-change' }) sixChange!: EventEmitter<SixItemPickerChangePayload>;\n\n  /**\n   * Emitted when the item picker's value changes, but debounced\n   */\n  @Event({ eventName: 'six-item-picker-change-debounced' })\n  sixChangeDebounced!: EventEmitter<SixItemPickerChangePayload>;\n\n  /**\n   * Set the amount of time, in milliseconds, to wait to trigger the `six-item-picker-change-debounced` event.\n   * If you want your change debounce event to not trigger when keeping the nav button pressed before, make sure debounce\n   * is a bit bigger than timeout, otherwise keeping the button pressed will trigger the event twice: once you click\n   * (and keep pressed) and once you release\n   */\n  @Prop() debounce = DEFAULT_DEBOUNCE_FAST;\n\n  @Watch('value')\n  handleValueChange() {\n    this.setup();\n  }\n\n  @Watch('debounce')\n  protected debounceChanged() {\n    this.eventListeners.removeByIdentifier(DEBOUNCE_ITEM_PICKER_LISTENER);\n    this.eventListeners.add(\n      this.host,\n      'six-item-picker-change',\n      debounce(this.handleSixItemPickerChangeDebounced, this.debounce),\n      DEBOUNCE_ITEM_PICKER_LISTENER\n    );\n  }\n\n  @Watch('items')\n  handleSetChange() {\n    this.setup();\n    this.min = this._items[0];\n    this.max = this.getLastStringItem();\n  }\n\n  @State() _items: string[] = [];\n  @State() _itemIndexes: Record<string, number> = {};\n\n  // used for fast increasing when keeping the mouse button held down\n  private _timeoutNext!: ReturnType<typeof setTimeout>;\n  private _intervalNext!: ReturnType<typeof setInterval>;\n\n  private _timeoutPrev!: ReturnType<typeof setTimeout>;\n  private _intervalPrev!: ReturnType<typeof setInterval>;\n\n  componentWillLoad() {\n    this.setup();\n  }\n\n  componentDidLoad() {\n    this.eventListeners.add(\n      this.host,\n      'six-item-picker-change',\n      debounce(this.handleSixItemPickerChangeDebounced, this.debounce),\n      DEBOUNCE_ITEM_PICKER_LISTENER\n    );\n  }\n\n  disconnectedCallback() {\n    this.eventListeners.removeAll();\n  }\n\n  private handleSixItemPickerChangeDebounced = () => {\n    this.sixChangeDebounced.emit(this.value);\n  };\n\n  private setup() {\n    if (this.isNumber()) {\n      this.setupNumberItems();\n    } else {\n      this.setUpStringItems();\n    }\n  }\n\n  private setupNumberItems() {\n    if (this.isInvalidNumber()) {\n      console.warn(`${TAG} Expected number but value is not a number: \"${this.value}\"`);\n      console.info(`${TAG} Will set value to either minimum or if not provided to zero.`);\n      this.value = this.min ?? 0;\n    }\n  }\n\n  private setUpStringItems() {\n    this._items = this.getStringItems();\n    this._itemIndexes = this.getItemIndexes();\n    const itemsMissValue = this._items.find((i) => String(i) === String(this.value)) === undefined;\n    if (itemsMissValue) {\n      console.warn(`${TAG} Expected item from item set but value was not found in set: \"${this.value}\"`);\n      console.info(`${TAG} Will set value to either minimum or if not provided to \"${this._items[0]}\".`);\n      this.value = this._items[0];\n    }\n\n    if (this.min === undefined) {\n      if (!this.roundtrip) {\n        console.warn(`${TAG} Expected a min value`);\n        console.info(`${TAG} Will set min value to ${this._items[0]}`);\n      }\n      this.min = this._items[0];\n    }\n\n    if (this.max === undefined) {\n      const maxItem = this.getLastStringItem();\n      if (!this.roundtrip) {\n        console.warn(`${TAG} Expected a min value if roundtrip is enabled`);\n        console.info(`${TAG} Will set min value to ${maxItem}`);\n      }\n      this.max = maxItem;\n    }\n  }\n\n  private getLastStringItem() {\n    return this._items[this._items.length - 1];\n  }\n\n  private getStringItems(): string[] {\n    switch (this.type) {\n      case ItemPickerType.NUMBER:\n        console.warn(`${TAG}: unexpected type ${this.type}`);\n        return [];\n      case ItemPickerType.LETTER:\n        return ALPHABET.alphabet;\n      case ItemPickerType.CAPITAL_LETTER:\n        return CAPITAL_ALPHABET.alphabet;\n      case ItemPickerType.LOWER_LETTER:\n        return LOWERCASE_ALPHABET.alphabet;\n      case ItemPickerType.CUSTOM:\n        if (this.items == null || this.items.length === 0) {\n          console.warn(`${TAG}: no items defined for type ${this.type}`);\n          return [];\n        }\n        return this.items;\n    }\n  }\n\n  private getItemIndexes(): Record<string, number> {\n    switch (this.type) {\n      case ItemPickerType.NUMBER:\n        console.warn(`${TAG}: unexpected type ${this.type}`);\n        return {};\n      case ItemPickerType.LETTER:\n        return ALPHABET.letterIndexes;\n      case ItemPickerType.CAPITAL_LETTER:\n        return CAPITAL_ALPHABET.letterIndexes;\n      case ItemPickerType.LOWER_LETTER:\n        return LOWERCASE_ALPHABET.letterIndexes;\n      case ItemPickerType.CUSTOM:\n        return createItemIndexes(this._items);\n    }\n  }\n\n  private previousItem() {\n    if (this.isNumber()) {\n      this.previousNumber();\n    } else {\n      this.previousStringItem();\n    }\n\n    this.sixChange.emit(this.value);\n  }\n\n  private previousNumber() {\n    this.changeValue({\n      isNextItemAllowed: () => !this.isPreviousNumberDisabled(),\n      getNextItem: () => Number(this.value) - this.step,\n      getRoundtripItem: () => Number(this.max),\n      isRoundtripPossible: () => this.max === undefined && this.roundtrip,\n    });\n  }\n\n  private previousStringItem() {\n    const value = String(this.value);\n    const minLetter = String(this.min);\n\n    this.changeValue({\n      isNextItemAllowed: () =>\n        minLetter === undefined || this.getStringItemIndex(value) > this.getStringItemIndex(minLetter),\n      getNextItem: () => this.getNextItemByOperation(subtract),\n      getRoundtripItem: () => String(this.max),\n      isRoundtripPossible: () => this.max == null && this.roundtrip,\n    });\n  }\n\n  private nextItem() {\n    if (this.isNumber()) {\n      this.nextNumber();\n    } else {\n      this.nextStringItem();\n    }\n\n    this.sixChange.emit(this.value);\n  }\n\n  private nextNumber() {\n    this.changeValue({\n      isNextItemAllowed: () => !this.isNextNumberDisabled(),\n      getNextItem: () => Number(this.value) + this.step,\n      getRoundtripItem: () => Number(this.min),\n      isRoundtripPossible: () => this.min === undefined && this.roundtrip,\n    });\n  }\n\n  private getStringItemIndex(char: string): number {\n    return this._itemIndexes[char];\n  }\n\n  private nextStringItem() {\n    const value = String(this.value);\n    const maxLetter = String(this.max);\n\n    this.changeValue({\n      isNextItemAllowed: () =>\n        maxLetter === undefined || this.getStringItemIndex(value) < this.getStringItemIndex(maxLetter),\n      getNextItem: () => this.getNextItemByOperation(add),\n      getRoundtripItem: () => String(this.min),\n      isRoundtripPossible: () => this.min === undefined && this.roundtrip,\n    });\n  }\n\n  private getNextItemByOperation(operation: (a: number, b: number) => number) {\n    const value = String(this.value);\n    const nextIndexCandidate = operation(this.getStringItemIndex(value), this.step);\n    const numberOfItems = this._items.length;\n    const nextIndex = ((nextIndexCandidate % numberOfItems) + numberOfItems) % numberOfItems;\n    return this._items[nextIndex];\n  }\n\n  private changeValue(params: {\n    getNextItem: () => number | string;\n    isNextItemAllowed: () => boolean;\n    getRoundtripItem: () => number | string;\n    isRoundtripPossible: () => boolean;\n  }) {\n    if (params.isNextItemAllowed()) {\n      this.value = params.getNextItem();\n      return;\n    }\n\n    if (params.isRoundtripPossible()) {\n      console.error(\n        `${TAG} Item picker is expected to perform a roundtrip, but either max or min value is missing so a roundtrip is not possible`\n      );\n      return;\n    }\n\n    if (this.roundtrip) {\n      this.value = params.getRoundtripItem();\n      return;\n    }\n\n    console.warn(\n      `${TAG} Roundtrip is not allowed, but was still triggered, please report this issue to the developer of six-item-picker`\n    );\n  }\n\n  private isNumber() {\n    return this.type === ItemPickerType.NUMBER;\n  }\n\n  private isInvalidNumber() {\n    return this.value === '' || isNaN(this.value as number);\n  }\n\n  private isNextDisabled() {\n    if (this.roundtrip) {\n      return false;\n    }\n\n    if (this.isNumber()) {\n      return this.isNextNumberDisabled();\n    } else {\n      return this._itemIndexes[String(this.value)] + this.step > this._itemIndexes[String(this.max)];\n    }\n  }\n\n  private isNextNumberDisabled() {\n    return Number(this.value) + this.step > (this.max ?? Infinity);\n  }\n\n  private isPrevDisabled() {\n    if (this.roundtrip) {\n      return false;\n    }\n\n    if (this.isNumber()) {\n      return this.isPreviousNumberDisabled();\n    } else {\n      return this._itemIndexes[String(this.value)] - this.step < this._itemIndexes[String(this.min)];\n    }\n  }\n\n  private isPreviousNumberDisabled() {\n    return Number(this.value) - this.step < (this.min ?? -Infinity);\n  }\n\n  private onMouseDownNext() {\n    if (this.isNextDisabled()) {\n      return;\n    }\n\n    this.nextItem();\n\n    this._timeoutNext = setTimeout(() => {\n      this._intervalNext = setInterval(() => {\n        this.nextItem();\n      }, this.interval);\n    }, this.timeout);\n  }\n\n  private onMouseUpNext() {\n    clearTimeout(this._timeoutNext);\n    clearInterval(this._intervalNext);\n  }\n\n  private onMouseDownPrev() {\n    if (this.isPrevDisabled()) {\n      return;\n    }\n\n    this.previousItem();\n\n    this._timeoutPrev = setTimeout(() => {\n      this._intervalPrev = setInterval(() => {\n        this.previousItem();\n      }, this.interval);\n    }, this.timeout);\n  }\n\n  private onMouseUpPrev() {\n    clearTimeout(this._timeoutPrev);\n    clearInterval(this._intervalPrev);\n  }\n\n  private getFormattedValue() {\n    if (this.value === undefined || this.value === null) {\n      return this.value;\n    }\n\n    if (!this.padded) {\n      return this.value;\n    }\n\n    if (this.paddingDirection === ItemPickerPaddingDirection.BEFORE) {\n      return String(this.value).padStart(this.paddingLength, this.paddingChar);\n    } else if (this.paddingDirection === ItemPickerPaddingDirection.AFTER) {\n      return String(this.value).padEnd(this.paddingLength, this.paddingChar);\n    }\n\n    return this.value;\n  }\n\n  render() {\n    return (\n      <div part=\"container\" class=\"item_picker__container\">\n        <div\n          part=\"up\"\n          class={{\n            item_picker__btn: true,\n            'item_picker__btn--disabled': this.isNextDisabled(),\n          }}\n          onMouseDown={() => this.onMouseDownNext()}\n          onMouseUp={() => this.onMouseUpNext()}\n        >\n          <six-icon size=\"large\">expand_less</six-icon>\n        </div>\n        <div part=\"content\" class=\"item_picker__content\">\n          {this.getFormattedValue()}\n        </div>\n        <div\n          part=\"down\"\n          class={{\n            item_picker__btn: true,\n            'item_picker__btn--disabled': this.isPrevDisabled(),\n          }}\n          onMouseDown={() => this.onMouseDownPrev()}\n          onMouseUp={() => this.onMouseUpPrev()}\n        >\n          <six-icon size=\"large\">expand_more</six-icon>\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/ui-library/{p-e19a6c95.entry.js → p-886a35ee.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,h as i}from"./p-ac4f4d45.js";const s=":host{display:block}.sidebar-item{font-size:0.9rem;color:var(--six-sidebar-color);cursor:pointer;padding:8px 8px 16px 16px;font-family:var(--six-font-family)}.sidebar-item:hover:not(.sidebar-item--disabled){color:var(--six-color-web-rock-600)}.sidebar-item.sidebar-item--disabled{outline:none;color:var(--six-input-color-disabled);cursor:not-allowed}.sidebar-item.sidebar-item--selected{font-weight:var(--six-font-weight-bold)}";const r=class{constructor(i){e(this,i);this.value="";this.selected=false;this.disabled=false}render(){return i("div",{class:{"sidebar-item":true,"sidebar-item--selected":this.selected,"sidebar-item--disabled":this.disabled},role:"menuitem","aria-selected":this.selected?"true":"false","aria-disabled":this.disabled?"true":"false"},i("slot",null))}};r.style=s;export{r as six_sidebar_item};
-//# sourceMappingURL=p-e19a6c95.entry.js.map
+import{r as e,h as i}from"./p-187fbba0.js";const s=":host{display:block}.sidebar-item{font-size:0.9rem;color:var(--six-sidebar-color);cursor:pointer;padding:8px 8px 16px 16px;font-family:var(--six-font-family)}.sidebar-item:hover:not(.sidebar-item--disabled){color:var(--six-color-web-rock-600)}.sidebar-item.sidebar-item--disabled{outline:none;color:var(--six-input-color-disabled);cursor:not-allowed}.sidebar-item.sidebar-item--selected{font-weight:var(--six-font-weight-bold)}";const r=class{constructor(i){e(this,i);this.value="";this.selected=false;this.disabled=false}render(){return i("div",{class:{"sidebar-item":true,"sidebar-item--selected":this.selected,"sidebar-item--disabled":this.disabled},role:"menuitem","aria-selected":this.selected?"true":"false","aria-disabled":this.disabled?"true":"false"},i("slot",null))}};r.style=s;export{r as six_sidebar_item};
+//# sourceMappingURL=p-886a35ee.entry.js.map

package/dist/ui-library/p-8cf72af6.js

@@ -0,0 +1,2 @@
+const t=35;const s=300;const o=(t,o=s)=>{let e;return s=>{clearTimeout(e);e=setTimeout((()=>t(s)),o)}};const e=(t,s)=>{const e=t._original||t;const n=o(e.emit.bind(e),s);return{_original:t,emit:n}};export{s as D,o as a,t as b,e as d};
+//# sourceMappingURL=p-8cf72af6.js.map

package/dist/ui-library/p-8cf72af6.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["DEFAULT_DEBOUNCE_INSANELY_FAST","DEFAULT_DEBOUNCE_FAST","debounce","callback","timeout","timer","args","clearTimeout","setTimeout","debounceEvent","event","original","_original","emit","bind"],"sources":["./src/utils/execution-control.ts"],"sourcesContent":["import { EventEmitter } from '@stencil/core';\n\nexport const DEFAULT_DEBOUNCE_INSANELY_FAST = 35;\nexport const DEFAULT_DEBOUNCE_FAST = 300;\n\n/**\n * Debounce function to implement a timeframe to wait for no new changes before executing a callback\n\n *  example usages:\n *    debounce(() => saveInput());\n *    debounce(() => saveInput(), 750);\n *    this.searchInput.addEventListener('six-input-input', debounce((event) => this.searchInputChange(event)));\n *\n *  regarding default timeout check https://lawsofux.com/doherty-threshold/\n *\n * @param callback\n * @param timeout\n */\nexport const debounce = <T>(callback: (x: T) => void, timeout = DEFAULT_DEBOUNCE_FAST) => {\n  let timer: number;\n  return (args: T) => {\n    clearTimeout(timer);\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore\n    timer = setTimeout(() => callback(args), timeout);\n  };\n};\n\n/**\n * Debounce an event\n *\n * @param event\n * @param timeout\n */\nexport const debounceEvent = (event: EventEmitter, timeout: number): EventEmitter => {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const original = (event as any)._original || event;\n  const emit = debounce(original.emit.bind(original), timeout) as (_: unknown) => CustomEvent;\n  return {\n    _original: event,\n    emit: emit,\n  } as EventEmitter;\n};\n"],"mappings":"MAEaA,EAAiC,G,MACjCC,EAAwB,I,MAexBC,EAAW,CAAIC,EAA0BC,EAAUH,KAC9D,IAAII,EACJ,OAAQC,IACNC,aAAaF,GAGbA,EAAQG,YAAW,IAAML,EAASG,IAAOF,EAAQ,CAClD,E,MASUK,EAAgB,CAACC,EAAqBN,KAEjD,MAAMO,EAAYD,EAAcE,WAAaF,EAC7C,MAAMG,EAAOX,EAASS,EAASE,KAAKC,KAAKH,GAAWP,GACpD,MAAO,CACLQ,UAAWF,EACXG,KAAMA,EACS,S"}

package/dist/ui-library/p-8d6f4311.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as i,h as e,g as r}from"./p-187fbba0.js";import{u as s,l as a}from"./p-eb8f05a9.js";import{h as o}from"./p-d87a6f4d.js";import{i as n,M as h}from"./p-ba74863a.js";const l=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{--size:25rem;display:contents}.drawer{top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden}.drawer:not(.drawer--visible){position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.drawer--contained{position:absolute;z-index:initial}.drawer--fixed{position:fixed;z-index:var(--six-z-index-drawer)}.drawer__panel{position:absolute;display:flex;flex-direction:column;z-index:2;max-width:100%;max-height:100%;background-color:var(--six-drawer-background-color);color:var(--six-drawer-color);box-shadow:var(--six-shadow-x-large);transition:var(--six-transition-medium) transform;overflow:auto;pointer-events:all}.drawer__panel:focus{outline:none}.drawer--top .drawer__panel{top:0;right:auto;bottom:auto;left:0;width:100%;height:var(--size);transform:translate(0, -100%)}.drawer--right .drawer__panel{top:0;right:0;bottom:auto;left:auto;width:var(--size);height:100%;transform:translate(100%, 0)}.drawer--bottom .drawer__panel{top:auto;right:auto;bottom:0;left:0;width:100%;height:var(--size);transform:translate(0, 100%)}.drawer--left .drawer__panel{top:0;right:auto;bottom:auto;left:0;width:var(--size);height:100%;transform:translate(-100%, 0)}.drawer--open .drawer__panel{transform:none}.drawer__header{display:flex}.drawer__title{flex:1 1 auto;font-size:var(--six-font-size-large);line-height:var(--six-line-height-dense);padding:var(--six-spacing-large)}.drawer__close{flex:0 0 auto;display:flex;align-items:center;font-size:var(--six-font-size-x-large);padding:0 var(--six-spacing-large)}.drawer__body{flex:1 1 auto;padding:var(--six-spacing-large);overflow:auto;-webkit-overflow-scrolling:touch}.drawer__footer{text-align:right;padding:var(--six-spacing-large)}.drawer__footer ::slotted(six-button:not(:last-of-type)){margin-right:var(--six-spacing-x-small)}.drawer:not(.drawer--has-footer) .drawer__footer{display:none}.drawer__overlay{display:block;position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--six-overlay-background-color);opacity:0;transition:var(--six-transition-medium) opacity;pointer-events:all}.drawer--contained .drawer__overlay{position:absolute}.drawer--open .drawer__overlay{opacity:0.4}";const d=n();let f=0;const p=class{constructor(e){t(this,e);this.sixShow=i(this,"six-drawer-show",7);this.sixAfterShow=i(this,"six-drawer-after-show",7);this.sixHide=i(this,"six-drawer-hide",7);this.sixAfterHide=i(this,"six-drawer-after-hide",7);this.sixInitialFocus=i(this,"six-drawer-initial-focus",7);this.sixOverlayDismiss=i(this,"six-drawer-overlay-dismiss",7);this.componentId=`drawer-${++f}`;this.willShow=false;this.willHide=false;this.handleCloseClick=()=>{this.hide()};this.handleKeyDown=t=>{if(t.key==="Escape"){this.hide()}};this.handleOverlayClick=()=>{const t=this.sixOverlayDismiss.emit();if(!t.defaultPrevented){this.hide()}};this.handleSlotChange=()=>{this.hasFooter=o(this.host,"footer")};this.handleTransitionEnd=t=>{const i=t.target;if(t.propertyName==="transform"&&i.classList.contains("drawer__panel")){this.resetTransitionVariables()}};this.hasFooter=false;this.isVisible=false;this.open=false;this.label="";this.placement="right";this.contained=false;this.noHeader=false}handleOpenChange(){this.open?this.show():this.hide()}connectedCallback(){this.modal=new h(this.host,{onFocusOut:()=>{var t;return this.contained?null:(t=this.panel)===null||t===void 0?void 0:t.focus()}})}componentWillLoad(){this.handleSlotChange();if(this.open){this.show();this.resetTransitionVariables()}}disconnectedCallback(){s(this.host)}async show(){if(this.willShow||this.modal==null||this.panel==null||this.drawer==null){return}const t=this.panel;const i=this.sixShow.emit();if(i.defaultPrevented){this.open=false;return}this.willShow=true;this.isVisible=true;this.open=true;if(!this.contained){this.modal.activate();a(this.host)}if(this.open){if(d){requestAnimationFrame((()=>{const i=this.sixInitialFocus.emit();if(!i.defaultPrevented){t.focus({preventScroll:true})}}))}else{this.drawer.addEventListener("transitionend",(()=>{const i=this.sixInitialFocus.emit();if(!i.defaultPrevented){t.focus()}}),{once:true})}}}async hide(){if(this.willHide||this.modal==null){return}const t=this.sixHide.emit();if(t.defaultPrevented){this.open=true;return}this.willHide=true;this.open=false;this.modal.deactivate();s(this.host)}resetTransitionVariables(){this.isVisible=this.open;this.willShow=false;this.willHide=false;this.open?this.sixAfterShow.emit():this.sixAfterHide.emit()}render(){return e("div",{ref:t=>this.drawer=t,part:"base",class:{drawer:true,"drawer--open":this.open,"drawer--visible":this.isVisible,"drawer--top":this.placement==="top","drawer--right":this.placement==="right","drawer--bottom":this.placement==="bottom","drawer--left":this.placement==="left","drawer--contained":this.contained,"drawer--fixed":!this.contained,"drawer--has-footer":this.hasFooter},onKeyDown:this.handleKeyDown,onTransitionEnd:this.handleTransitionEnd},e("div",{part:"overlay",class:"drawer__overlay",onClick:this.handleOverlayClick,tabIndex:-1}),e("div",{ref:t=>this.panel=t,part:"panel",class:"drawer__panel",role:"dialog","aria-modal":"true","aria-hidden":this.open?"false":"true","aria-label":this.noHeader?this.label:null,"aria-labelledby":!this.noHeader?`${this.componentId}-title`:null,tabIndex:0},!this.noHeader&&e("header",{part:"header",class:"drawer__header"},e("span",{part:"title",class:"drawer__title",id:`${this.componentId}-title`},e("slot",{name:"label"},this.label||String.fromCharCode(65279))),e("six-icon-button",{exportparts:"base:close-button",class:"drawer__close",name:"x",onClick:this.handleCloseClick})),e("div",{part:"body",class:"drawer__body"},e("slot",null)),e("footer",{part:"footer",class:"drawer__footer"},e("slot",{name:"footer",onSlotchange:this.handleSlotChange}))))}get host(){return r(this)}static get watchers(){return{open:["handleOpenChange"]}}};p.style=l;export{p as six_drawer};
+//# sourceMappingURL=p-8d6f4311.entry.js.map