@six-group/ui-library 0.0.0-insider.0052ba1

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

@@ -0,0 +1,2 @@
+import{r as s,h as e}from"./p-JoG9I7EO.js";const o=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{display:block}.menu-label{font-family:var(--six-font-sans);font-size:var(--six-font-size-small);font-weight:var(--six-font-weight-normal);line-height:var(--six-line-height-normal);letter-spacing:var(--six-letter-spacing-normal);color:var(--six-input-label-color);padding:var(--six-spacing-xx-small) var(--six-spacing-small);user-select:none}";const i=class{constructor(e){s(this,e)}render(){return e("div",{key:"ac09a02af0b1d088f83877d5065b9b747032be77",part:"base",class:"menu-label"},e("slot",{key:"a4f45f90b223d3951bdb5a36b8667d67bcbf1fc7"}))}};i.style=o;export{i as six_menu_label};
+//# sourceMappingURL=p-5b52d097.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["sixMenuLabelCss","SixMenuLabel","render","h","key","part","class"],"sources":["src/components/six-menu-label/six-menu-label.scss?tag=six-menu-label&encapsulation=shadow","src/components/six-menu-label/six-menu-label.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: block;\n}\n\n.menu-label {\n  font-family: var(--six-font-sans);\n  font-size: var(--six-font-size-small);\n  font-weight: var(--six-font-weight-normal);\n  line-height: var(--six-line-height-normal);\n  letter-spacing: var(--six-letter-spacing-normal);\n  color: var(--six-input-label-color);\n  padding: var(--six-spacing-xx-small) var(--six-spacing-small);\n  user-select: none;\n}\n","import { Component, h } from '@stencil/core';\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 label's content.\n *\n * @part base - The component's base wrapper.\n */\n\n@Component({\n  tag: 'six-menu-label',\n  styleUrl: 'six-menu-label.scss',\n  shadow: true,\n})\nexport class SixMenuLabel {\n  render() {\n    return (\n      <div part=\"base\" class=\"menu-label\">\n        <slot />\n      </div>\n    );\n  }\n}\n"],"mappings":"2CAAA,MAAMA,EAAkB,kkB,MCkBXC,EAAY,M,yBACvB,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,KAAK,OAAOC,MAAM,cACrBH,EAAQ,QAAAC,IAAA,6C","ignoreList":[]}

package/dist/ui-library/p-65e53a1b.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as s}from"./p-JoG9I7EO.js";const e=":host{display:block}six-button::part(base){border:none;padding-right:0}six-button[disabled]::part(base){color:var(--six-color-web-rock-600);background-color:transparent}six-button::part(label){border:none;font-weight:var(--six-font-weight-bold);font-size:var(--six-font-size-small);padding-left:0}six-button:focus::part(base),six-button:hover::part(base),six-button:active::part(base){background-color:initial;border-color:initial}six-button:hover::part(base),six-button:active::part(base){color:var(--six-header-selected-app-color-hover)}";const a=class{constructor(s){t(this,s);this.caret=false;this.disabled=false;this.loading=false;this.submit=false;this.reset=false}render(){return s("six-button",{key:"f24f383b4bfab7416a6da813c08fe42905560d32",type:"secondary",caret:this.caret,disabled:this.disabled,loading:this.loading,submit:this.submit,reset:this.reset},s("slot",{key:"0c5dff4023b79b26d0e7c8d79adb78223d4df61c",name:"suffix",slot:"suffix"}),s("slot",{key:"cdf0bf1a34a284066e288c1b138afcedb02c7e4a",name:"prefix",slot:"prefix"}),s("slot",{key:"c5e704b918a9e2395a61f40fdbf3ac74da97285f"}))}};a.style=e;export{a as six_header_menu_button};
+//# sourceMappingURL=p-65e53a1b.entry.js.map

package/dist/ui-library/p-65e53a1b.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sixHeaderMenuButtonCss","SixHeaderMenuButton","constructor","hostRef","this","caret","disabled","loading","submit","reset","render","h","key","type","name","slot"],"sources":["src/components/six-header-menu-button/six-header-menu-button.scss?tag=six-header-menu-button&encapsulation=shadow","src/components/six-header-menu-button/six-header-menu-button.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\nsix-button::part(base) {\n  border: none;\n  padding-right: 0;\n}\n\nsix-button[disabled]::part(base) {\n  color: var(--six-color-web-rock-600);\n  background-color: transparent;\n}\n\nsix-button::part(label) {\n  border: none;\n  font-weight: var(--six-font-weight-bold);\n  font-size: var(--six-font-size-small);\n  padding-left: 0;\n}\n\nsix-button:focus::part(base),\nsix-button:hover::part(base),\nsix-button:active::part(base) {\n  background-color: initial;\n  border-color: initial;\n}\n\nsix-button:hover::part(base),\nsix-button:active::part(base) {\n  color: var(--six-header-selected-app-color-hover);\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @since 4.2.7\n * @status stable\n */\n\n@Component({\n  tag: 'six-header-menu-button',\n  styleUrl: 'six-header-menu-button.scss',\n  shadow: true,\n})\nexport class SixHeaderMenuButton {\n  /** Set to true to draw the button with a caret for use with dropdowns, popovers, etc. */\n  @Prop() caret = false;\n\n  /** Set to true to disable the button. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Set to true to draw the button in a loading state. */\n  @Prop({ reflect: true }) loading = false;\n\n  /** Indicates if activating the button should submit the form. Ignored when `href` is set. */\n  @Prop({ reflect: true }) submit = false;\n\n  /** Indicates if activating the button should reset the form. */\n  @Prop({ reflect: true }) reset = false;\n\n  render() {\n    return (\n      <six-button\n        type=\"secondary\"\n        caret={this.caret}\n        disabled={this.disabled}\n        loading={this.loading}\n        submit={this.submit}\n        reset={this.reset}\n      >\n        <slot name=\"suffix\" slot=\"suffix\"></slot>\n        <slot name=\"prefix\" slot=\"prefix\"></slot>\n        <slot />\n      </six-button>\n    );\n  }\n}\n"],"mappings":"2CAAA,MAAMA,EAAyB,8hB,MCYlBC,EAAmB,MALhC,WAAAC,CAAAC,G,UAOUC,KAAKC,MAAG,MAGSD,KAAQE,SAAG,MAGXF,KAAOG,QAAG,MAGVH,KAAMI,OAAG,MAGTJ,KAAKK,MAAG,KAkBlC,CAhBC,MAAAC,GACE,OACEC,EAAA,cAAAC,IAAA,2CACEC,KAAK,YACLR,MAAOD,KAAKC,MACZC,SAAUF,KAAKE,SACfC,QAASH,KAAKG,QACdC,OAAQJ,KAAKI,OACbC,MAAOL,KAAKK,OAEZE,EAAA,QAAAC,IAAA,2CAAME,KAAK,SAASC,KAAK,WACzBJ,EAAA,QAAAC,IAAA,2CAAME,KAAK,SAASC,KAAK,WACzBJ,EAAQ,QAAAC,IAAA,6C","ignoreList":[]}

package/dist/ui-library/p-6607d03a.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as s,g as i}from"./p-JoG9I7EO.js";import{h as o,a as l,g as r}from"./p-j3oIB5oT.js";import{F as a}from"./p-Dg9366Gk.js";import{E as n}from"./p-C4h4qpGl.js";import{D as c,a as h}from"./p-CKhg9ibv.js";import{a as d}from"./p-1oJarDAY.js";function u(e,t){if(t){if(Array.isArray(e)){return e.filter((e=>typeof e==="string"))}else if(typeof e==="string"&&e.length>0){return[e]}else{return[]}}else{if(typeof e==="string"){return e}else{return""}}}function f(e){return u(e,true)}function b(e,t){if(Array.isArray(e)&&Array.isArray(t)){return e.length===t.length&&e.every(((e,s)=>e===t[s]))}else if(typeof e==="string"&&typeof t==="string"){return e===t}return false}const p=':host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none;text-align:left}.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:"*";transform:scale(1.1);margin-left:var(--six-spacing-xxx-small);position:absolute}.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;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,.select{display:block}.select__box{display:inline-flex;align-items:center;justify-content:start;position:relative;width:100%;font-family:var(--six-font-family);font-weight:var(--six-input-font-weight);font-size:var(--six-input-font-size-medium);letter-spacing:var(--six-input-letter-spacing);background-color:var(--six-input-background-color);border:solid var(--six-border-width) var(--six-input-border-color);vertical-align:middle;transition:var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;cursor:pointer}.select__box--line{border:none;border-bottom:solid var(--six-border-width) var(--six-input-border-color)}.select__box--autocomplete{border:none;overflow:initial}.select:not(.select--disabled) .select__box:hover{background-color:var(--six-input-background-color-hover);color:var(--six-input-color-hover);border-bottom-color:var(--six-input-border-color-hover)}.select:not(.select--disabled) .select__box:hover:not(.select__box--line){border-color:var(--six-input-border-color-hover)}.select:not(.select--disabled) .select__box:focus{background-color:var(--six-input-background-color-focus);outline:none;color:var(--six-input-color-focus);border-bottom-color:var(--six-input-border-color-focus);box-shadow:0 1px 0 0 var(--six-input-border-color-focus)}.select:not(.select--disabled) .select__box:focus:not(.select__box--line){border-color:var(--six-input-border-color-focus);box-shadow:var(--six-input-focus-shadow)}.select--disabled .select__box{background-color:var(--six-input-background-color-disabled);color:var(--six-input-color-disabled);cursor:not-allowed;outline:none}.select--disabled .select__box:not(.select__box--line){border-color:var(--six-input-border-color-disabled)}.select--disabled .select__clear{pointer-events:none}.select--invalid:not(.select--disabled):not(.select--focused) .select__box{border-bottom-color:var(--six-input-border-color-danger)}.select--invalid:not(.select--disabled):not(.select--focused) .select__box:not(.input--line){border-color:var(--six-input-border-color-danger)}.display__values{display:flex;flex:1 1 auto;align-items:center;user-select:none;overflow:hidden;scrollbar-width:none;-ms-overflow-style:none}.display__values::-webkit-scrollbar{width:0;height:0}.display__values-values{flex:0 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.display__values-and-counter{display:flex;overflow:hidden}.select__clear{flex-shrink:0;flex-grow:0;display:inline}.select__icon{flex-shrink:0;flex-grow:0;display:inline;transition:var(--six-transition-medium) transform ease}.select--open .select__icon{transform:rotate(-180deg)}.placeholder{color:var(--six-input-placeholder-color)}.select--disabled .placeholder{color:var(--six-input-placeholder-color-disabled)}.select__input{position:absolute;top:0;left:0;width:100%;height:100%}.select--small .select__box{border-radius:var(--six-input-border-radius-small);font-size:var(--six-input-font-size-small);min-height:var(--six-height-small)}.select--small .select__box--line{border:none;border-bottom:solid var(--six-border-width) var(--six-input-border-color)}.select--small .display__values{margin:0 0 0 var(--six-input-spacing-small)}.select--small .select__clear{margin-right:var(--six-spacing-xxx-small)}.select--small .select__icon{margin-right:var(--six-spacing-x-small)}.select--medium .select__box{border-radius:var(--six-input-border-radius-medium);font-size:var(--six-input-font-size-medium);min-height:var(--six-height-medium)}.select--medium .select__box--line{border:none;border-bottom:solid var(--six-border-width) var(--six-input-border-color)}.select--medium .display__values{margin:0 0 0 var(--six-input-spacing-medium)}.select--medium .select__clear{margin-right:var(--six-spacing-xxx-small)}.select--medium .select__icon{margin-right:var(--six-spacing-x-small)}.select--large .select__box{border-radius:var(--six-input-border-radius-large);font-size:var(--six-input-font-size-large);min-height:var(--six-height-large)}.select--large .select__box--line{border:none;border-bottom:solid var(--six-border-width) var(--six-input-border-color)}.select--large .display__values{margin:0 0 0 var(--six-input-spacing-large)}.select--large .select__clear{margin-right:var(--six-spacing-xxx-small)}.select--large .select__icon{margin-right:var(--six-spacing-x-small)}.select--pill.select--small .select__box{border-radius:var(--six-height-small)}.select--pill.select--medium .select__box{border-radius:var(--six-height-medium)}.select--pill.select--large .select__box{border-radius:var(--six-height-large)}.select__menu{width:100%}.select__menu--hidden{display:none}six-icon-button::part(base){padding-top:0;padding-bottom:0}.selection-container--border{border-bottom:solid var(--six-border-width) var(--six-menu-divider-color);padding-top:var(--six-spacing-xx-small);padding-bottom:var(--six-spacing-xx-small)}.display-value--hidden{display:none}.overflow-count{color:var(--six-color-web-rock-600);padding-left:var(--six-spacing-x-small)}.overflow-count-hidden{display:none}.separator--hidden{display:none}.select-all{border-top:1px solid var(--six-color-web-rock-300);display:flex;justify-content:end}';let x=0;const m=class{constructor(i){e(this,i);this.sixChange=t(this,"six-select-change");this.sixFocus=t(this,"six-select-focus");this.sixBlur=t(this,"six-select-blur");this.inputId=`select-${++x}`;this.labelId=`select-label-${x}`;this.helpTextId=`select-help-text-${x}`;this.errorTextId=`select-error-text-${x}`;this.eventListeners=new n;this.activeItemIndex=-1;this.resizeObserver=new ResizeObserver((()=>this.updateDisplayedValues()));this.hasFocus=false;this.hasHelpTextSlot=false;this.hasLabelSlot=false;this.hasErrorTextSlot=false;this.isOpen=false;this.displayedValues=[];this.selectionContainerItems=[];this.multiple=false;this.selectAllButton=false;this.disabled=false;this.name="";this.placeholder="";this.size="medium";this.hoist=false;this.value="";this.pill=false;this.helpText="";this.required=false;this.clearable=false;this.label="";this.errorText="";this.invalid=false;this.line=false;this.filter=false;this.asyncFilter=false;this.autocomplete=false;this.inputDebounce=c;this.options=null;this.virtualScroll=false;this.handleBlur=()=>{this.hasFocus=false;this.sixBlur.emit()};this.handleFocus=()=>{this.hasFocus=true;this.sixFocus.emit()};this.handleClearClick=async e=>{var t;e.stopPropagation();await this.clearValues();await((t=this.dropdown)===null||t===void 0?void 0:t.show());await this.setFocus();this.sixChange.emit({value:this.value,isSelected:true})};this.handleKeyDown=e=>{var t,s,i,o;if(this.virtualScroll||this.autocomplete){return}if(["Control","Escape"].includes(e.key)){return}const l=this.getVisibleItems();if(this.isOpen&&this.multiple&&e.code==="KeyA"&&e.ctrlKey){e.preventDefault();this.selectAll();return}if(e.key==="Tab"){if(this.isOpen){(t=this.dropdown)===null||t===void 0?void 0:t.hide()}return}if(e.key===" "&&!this.multiple){return}if(this.activeItemIndex>=0&&["Enter"," "].includes(e.key)){const t=l.at(this.activeItemIndex);e.preventDefault();t===null||t===void 0?void 0:t.click();return}if(["ArrowDown","ArrowUp","Home","End"].includes(e.key)){if(!this.isOpen){(s=this.dropdown)===null||s===void 0?void 0:s.show()}if(l.length>0){e.preventDefault();if(e.key==="ArrowDown"){this.activeItemIndex++}else if(e.key==="ArrowUp"){this.activeItemIndex--}else if(e.key==="Home"){this.activeItemIndex=0}else if(e.key==="End"){this.activeItemIndex=l.length-1}if(this.activeItemIndex<0)this.activeItemIndex=0;if(this.activeItemIndex>l.length-1)this.activeItemIndex=l.length-1;(i=l.at(this.activeItemIndex))===null||i===void 0?void 0:i.setFocus()}}if(!this.isOpen){e.stopPropagation();e.preventDefault();(o=this.dropdown)===null||o===void 0?void 0:o.show()}};this.handleLabelClick=()=>{var e;(e=this.box)===null||e===void 0?void 0:e.focus()};this.handleMenuSelect=e=>{const t=e.detail.item;if(this.multiple){t.checked=!t.checked}else{this.getItems().forEach((e=>e.checked=false));t.checked=true}this.syncValueFromItems();this.sixChange.emit({value:this.value,isSelected:true})};this.handleMenuShow=e=>{if(this.disabled){e.preventDefault();return}this.activeItemIndex=-1;if(!this.virtualScroll&&this.multiple){const e=this.getItems();e.forEach((e=>e.style.display="unset"));const t=v(f(this.value),e);t.forEach((e=>e.style.display="none"));this.selectionContainerItems=t.map((e=>s("six-menu-item",{key:e.value,checked:true,value:e.value,checkType:this.multiple?"checkbox":"check",onClick:t=>{t.stopPropagation();if(!this.disabled){const s=t.target;const i=s.checked;s.checked=!i;e.checked=!i;this.syncValueFromItems();this.sixChange.emit({value:this.value,isSelected:true})}}},this.getSlottedItem(e,"prefix"),this.getItemLabel(e),this.getSlottedItem(e,"suffix"))))}this.isOpen=true};this.handleMenuHide=()=>{this.isOpen=false;if(this.multiple){this.handleBlur()}};this.handleSlotChange=()=>{this.hasHelpTextSlot=o(this.host,"help-text");this.hasLabelSlot=o(this.host,"label");this.hasErrorTextSlot=o(this.host,"error-text");this.syncItemsFromValue()}}handleDisabledChange(){var e;if(this.disabled&&this.isOpen){(e=this.dropdown)===null||e===void 0?void 0:e.hide()}}handleLabelChange(){this.handleSlotChange()}handleMultipleChange(){this.value=u(this.value,this.multiple);this.syncItemsFromValue()}async handleValueChange(){const e=u(this.value,this.multiple);if(!b(this.value,e)){this.value=e}await this.syncItemsFromValue()}connectedCallback(){var e;if(this.virtualScroll&&this.options===null){console.error("Options must be defined when using virtual scrolling")}(e=this.host.shadowRoot)===null||e===void 0?void 0:e.addEventListener("slotchange",this.handleSlotChange);this.eventListeners.forward("six-select-change","change",this.host);this.eventListeners.forward("six-select-blur","blur",this.host);this.eventListeners.forward("six-select-focus","focus",this.host);if(this.displayValuesContainer){this.resizeObserver.observe(this.displayValuesContainer)}}componentWillLoad(){this.value=u(this.value,this.multiple);this.handleSlotChange()}componentDidLoad(){if(this.displayValuesContainer){this.resizeObserver.observe(this.displayValuesContainer)}requestAnimationFrame((()=>this.syncItemsFromValue()));if(this.autocomplete&&this.autocompleteInput!=null){const e=this.autocompleteInput;this.eventListeners.add(e,"six-input-input",h((t=>{var s;this.value=e.value;this.sixChange.emit({value:this.value,isSelected:false});t.stopPropagation();if(this.virtualScroll||this.value.length>0){(s=this.dropdown)===null||s===void 0?void 0:s.show()}}),this.inputDebounce));const t=this.displayedValues.join(", ");e.value=t}}disconnectedCallback(){var e;this.resizeObserver.disconnect();(e=this.host.shadowRoot)===null||e===void 0?void 0:e.removeEventListener("slotchange",this.handleSlotChange);this.eventListeners.removeAll()}async setFocus(e){var t;this.hasFocus=true;(t=this.box)===null||t===void 0?void 0:t.focus(e)}getItemLabel(e){var t,s;const i=(t=e.shadowRoot)===null||t===void 0?void 0:t.querySelector("slot:not([name])");if(i!=null){return l(i)}else{return(s=e.textContent)!==null&&s!==void 0?s:""}}getSlottedItem(e,t){const i=r(e,t);if(i==null){return null}const o=Object.fromEntries([...i.attributes].map((e=>[e.name,e.value])));return s(i.tagName.toLowerCase(),Object.assign(Object.assign({},o),{innerHTML:i.innerHTML}))}getItems(){if(this.options!==null&&this.menu!=null&&this.menu.shadowRoot!=null){return[...this.menu.shadowRoot.querySelectorAll("six-menu-item")]}return[...this.host.querySelectorAll("six-menu-item")]}getVisibleItems(){const e=this.getSelectionContainerItems();const t=this.getItems();return[...e,...t].filter((e=>e.style.display!=="none"))}getSelectionContainerItems(){var e;return[...((e=this.host.shadowRoot)===null||e===void 0?void 0:e.querySelectorAll("six-menu-item"))||[]]}async clearValues(){this.value=this.multiple?[]:"";this.selectionContainerItems=[];await this.syncItemsFromValue()}selectAll(){const e=this.getVisibleItems();const t=this.hasDeselectedOptions();e.filter((e=>!e.disabled)).forEach((e=>e.checked=t));const s=e.filter((e=>e.checked)).map((e=>e.value));this.value=t?s:[];this.sixChange.emit({value:this.value,isSelected:true})}async syncItemsFromValue(){const e=this.getSelectionContainerItems();const t=this.getItems();const s=u(this.value,this.multiple);e.forEach((e=>{e.checkType=this.multiple?"checkbox":"check";if(Array.isArray(s)){e.checked=s.some((t=>t===e.value))}else{e.checked=s===e.value}}));t.forEach((e=>{e.checkType=this.multiple?"checkbox":"check";if(Array.isArray(s)){e.checked=s.some((t=>t===e.value))}else{e.checked=s===e.value}}));const i=v(f(this.value),t);this.displayedValues=i.map((e=>this.getItemLabel(e)));if(this.autocomplete&&this.autocompleteInput!=null&&!this.hasFocus){const e=this.displayedValues.join(", ");this.autocompleteInput.value=e}requestAnimationFrame((()=>{this.updateDisplayedValues()}))}syncValueFromItems(){const e=this.getItems();const t=e.filter((e=>e.checked)).map((e=>e.value));if(this.multiple){this.value=t}else{this.value=t.length>0?t[0]:""}}updateDisplayedValues(){var e,t;const s=[...(t=(e=this.displayValuesContainer)===null||e===void 0?void 0:e.querySelectorAll(".display-value"))!==null&&t!==void 0?t:[]];if(this.displayValuesContainer==null||s.length===0||this.overflowCount==null){return}s.forEach((e=>{z(e);k(e)}));const i=s[s.length-1].querySelector(".separator");if(i==null)return;let o=_(this.displayValuesContainer)+_(i);let{fitCount:l,overflowCount:r}=g(s,o);if(r===0){T(this.overflowCount);y(s,l)}else{S(this.overflowCount,r+1);A(this.overflowCount);o=o-_(this.overflowCount);({fitCount:l,overflowCount:r}=g(s,o));S(this.overflowCount,r);y(s,l)}}render(){var e;const t=this.hasSelection();const i=this.getItems();const o=i.length>0;const l=this.hasDeselectedOptions();let r=false;let n=o;if(this.clearable&&t){r=true;n=false}return s(a,{key:"9312ec8e2cedbb88f1404d6ddb2f8e67a952f6da",inputId:this.inputId,label:this.label,labelId:this.labelId,hasLabelSlot:this.hasLabelSlot,helpTextId:this.helpTextId,helpText:this.helpText,hasHelpTextSlot:this.hasHelpTextSlot,errorTextId:this.errorTextId,errorText:this.errorText,errorTextCount:this.errorTextCount,hasErrorTextSlot:this.hasErrorTextSlot,size:this.size,onLabelClick:this.handleLabelClick,disabled:this.disabled,required:this.required,displayError:this.invalid},s("six-dropdown",{key:"77887d36593e973b83d80aec7fcb51c9f85d9d0c",part:"base",ref:e=>this.dropdown=e,hoist:this.hoist,matchTriggerWidth:true,closeOnSelect:!this.multiple,containingElement:this.host,disableHideOnEnterAndSpace:this.autocomplete,class:{select:true,"select--open":this.isOpen,"select--empty":((e=this.value)===null||e===void 0?void 0:e.length)===0,"select--focused":this.hasFocus,"select--clearable":this.clearable,"select--disabled":this.disabled,"select--multiple":this.multiple,"select--has-tags":this.multiple&&t,"select--placeholder-visible":this.displayedValues.length===0,"select--small":this.size==="small","select--medium":this.size==="medium","select--large":this.size==="large","select--pill":this.pill,"select--invalid":this.invalid},onKeyDown:this.handleKeyDown,"onSix-dropdown-show":this.handleMenuShow,"onSix-dropdown-hide":this.handleMenuHide,filterPlaceholder:this.filterPlaceholder,filterDebounce:this.filterDebounce,filter:this.filter,asyncFilter:this.asyncFilter,virtualScroll:this.virtualScroll},s("div",{key:"afddffa7f575127a3c53b2bd23f996809adb9844",slot:"trigger",ref:e=>this.box=e,id:this.inputId,class:{select__box:true,"select__box--line":this.line,"select__box--autocomplete":this.autocomplete},role:"combobox","aria-labelledby":this.labelId,"aria-describedby":this.helpTextId,"aria-haspopup":"true","aria-expanded":this.isOpen?"true":"false",tabIndex:this.disabled?-1:0,onBlur:this.handleBlur,onFocus:this.handleFocus},s("div",{key:"21b0e4ccb4535037e197b7dbd9a23f0bc37cf5f8",class:"display__values",ref:e=>this.displayValuesContainer=e},this.displayedValues.length>0?s("span",{class:"display__values-and-counter"},s("span",{class:"display__values-values"},this.displayedValues.map((e=>s("span",{key:e,class:"display-value"},e,s("span",{class:{separator:true}},", "))))),s("span",{ref:e=>this.overflowCount=e,class:"overflow-count"},"+10")):s("span",{class:"placeholder"},this.placeholder)),r&&s("six-icon-button",{key:"4dfa510d19ed31997002b1eefff2e467a34b5fd0",exportparts:"base:clear-button",class:"select__clear",name:"clear",size:"small",onClick:this.handleClearClick,tabindex:"-1"}),n&&s("span",{key:"f03b60a3935c809d9f98342ad7b27698abaf537c",part:"icon",class:"select__icon"},s("six-icon",{key:"271b8b90377be367a38abe77df0b5ae60960b9a8",size:"medium"},"expand_more")),s("six-input",{key:"0a8a3e663dd316f38e0d62625cd6c824022b0fd1",ref:e=>this.autocompleteInput=e,class:{select__input:true,"sr-only":!this.autocomplete},"aria-hidden":"true",required:this.required,onFocus:this.handleFocus,clearable:this.clearable,placeholder:this.placeholder,pill:this.pill,disabled:this.disabled,size:this.size,tabIndex:-1})),s("div",{key:"a5fe2da3ed21d2e8cacbeb84ada7538f960b182e",class:{"selection-container":true,"selection-container--border":this.selectionContainerItems.length>0&&i.length!==this.selectionContainerItems.length}},this.selectionContainerItems),s("six-menu",{key:"ba0c95940b5af32bdd1a8f5f65e4ea6f81ee5bb1",ref:e=>this.menu=e,part:"menu",class:{select__menu:true,"select__menu--hidden":!o},"onSix-menu-item-selected":this.handleMenuSelect,items:this.options,virtualScroll:this.virtualScroll,"remove-box-shadow":true,"disable-keyboard-handling":true},s("slot",{key:"f6be5fd5f9070395df4e165f0f912d274ffcc4b5",onSlotchange:this.handleSlotChange})),this.multiple&&this.selectAllButton&&s("div",{key:"bc6fe23ff6e09d9cb1c9709dc78199600d08cb3f",class:"select-all",slot:"dropdown-footer"},s("six-button",{key:"4ac03af8a7233ed46ac2d9e4ed515a79387a2d2b",type:"link",onClick:()=>this.selectAll()},this.selectAllText==null?D(l):this.selectAllText))))}hasSelection(){return this.multiple?this.value.length>0:this.value!==""}hasDeselectedOptions(){return this.getVisibleItems().some((e=>!e.disabled&&!e.checked))}get host(){return i(this)}static get watchers(){return{disabled:["handleDisabledChange"],helpText:["handleLabelChange"],errorText:["handleLabelChange"],label:["handleLabelChange"],multiple:["handleMultipleChange"],value:["handleValueChange"]}}};function v(e,t){return t.filter((t=>e.includes(t.value)))}function _(e){return e.getBoundingClientRect().width}function g(e,t){let s=0;let i=0;for(let o=0;o<e.length;o++){const l=e[o];const r=_(l);if(o===0&&r>t){i=1;break}s+=r;if(s>t){break}else{i+=1}}const o=e.length-i;return{fitCount:i,overflowCount:o}}function y(e,t){if(e.length>0){e.slice(0,t).forEach(((e,t,s)=>{z(e);const i=t===s.length-1;if(i){w(e)}else{k(e)}}));e.slice(t).forEach((e=>{C(e);k(e)}))}}function w(e){var t;(t=e.querySelector(".separator"))===null||t===void 0?void 0:t.classList.add("separator--hidden")}function k(e){var t;(t=e.querySelector(".separator"))===null||t===void 0?void 0:t.classList.remove("separator--hidden")}function z(e){e.classList.remove("display-value--hidden")}function C(e){e.classList.add("display-value--hidden")}function S(e,t){e.textContent=`+${t}`}function A(e){e.classList.remove("overflow-count-hidden")}function T(e){e.classList.add("overflow-count-hidden")}function D(e){const t=d();switch(t){case"de":return e?"Alle auswählen":"Alle abwählen";case"fr":return e?"Tout sélectionner":"Tout désélectionner";case"it":return e?"Seleziona tutto":"Deseleziona tutto";case"en":return e?"Select all":"Deselect all";case"es":return e?"Seleccionar todo":"Deseleccionar todo"}}m.style=p;export{m as six_select};
+//# sourceMappingURL=p-6607d03a.entry.js.map

package/dist/ui-library/p-6607d03a.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["convertToValidValue","value","multiple","Array","isArray","filter","element","length","convertToValidArrayValue","valueEquals","a","b","every","index","sixSelectCss","id","SixSelect","constructor","hostRef","this","inputId","labelId","helpTextId","errorTextId","eventListeners","EventListeners","activeItemIndex","resizeObserver","ResizeObserver","updateDisplayedValues","hasFocus","hasHelpTextSlot","hasLabelSlot","hasErrorTextSlot","isOpen","displayedValues","selectionContainerItems","selectAllButton","disabled","name","placeholder","size","hoist","pill","helpText","required","clearable","label","errorText","invalid","line","asyncFilter","autocomplete","inputDebounce","DEFAULT_DEBOUNCE_FAST","options","virtualScroll","handleBlur","sixBlur","emit","handleFocus","sixFocus","handleClearClick","async","event","stopPropagation","clearValues","_a","dropdown","show","setFocus","sixChange","isSelected","handleKeyDown","includes","key","items","getVisibleItems","code","ctrlKey","preventDefault","selectAll","hide","activeItem","at","click","_b","_c","_d","handleLabelClick","box","focus","handleMenuSelect","currentItem","detail","item","checked","getItems","forEach","i","syncValueFromItems","handleMenuShow","mainItems","style","display","checkedItems","getCheckedItems","map","h","checkType","onClick","menuItem","target","isChecked","getSlottedItem","getItemLabel","handleMenuHide","handleSlotChange","hasSlot","host","syncItemsFromValue","handleDisabledChange","handleLabelChange","handleMultipleChange","handleValueChange","newValue","connectedCallback","console","error","shadowRoot","addEventListener","forward","displayValuesContainer","observe","componentWillLoad","componentDidLoad","requestAnimationFrame","autocompleteInput","add","debounce","selectedLabel","join","disconnectedCallback","disconnect","removeEventListener","removeAll","slot","querySelector","getTextContent","textContent","slotName","slottedElement","getSlot","attributes","Object","fromEntries","attr","tagName","toLowerCase","assign","innerHTML","menu","querySelectorAll","getSelectionContainerItems","visibleItems","hasDeselectedOptions","option","some","val","checkedValues","displayValueOptions","overflowCount","d","showDisplayValue","showSeparator","separator","availableWidth","getWidth","fitCount","computeFitCount","hideOverflowCount","showFittingValues","setOverflowCount","showOverflowCount","render","hasSelection","hasMenuItems","showClear","showExpand","FormControl","errorTextCount","onLabelClick","displayError","part","ref","el","matchTriggerWidth","closeOnSelect","containingElement","disableHideOnEnterAndSpace","class","select","onKeyDown","filterPlaceholder","filterDebounce","select__box","role","tabIndex","onBlur","onFocus","exportparts","tabindex","select__input","select__menu","onSlotchange","type","selectAllText","selectAllDefaultText","opt","getBoundingClientRect","width","accumulatedWidth","displayOption","slice","displayValue","list","isLast","hideSeparator","hideDisplayValue","displayValueOption","classList","remove","count","lang","getLanguage"],"sources":["src/components/six-select/util.ts","src/components/six-select/six-select.scss?tag=six-select&encapsulation=shadow","src/components/six-select/six-select.tsx"],"sourcesContent":["export interface MenuItem {\n  value: string;\n}\n\nexport function getValue(value: unknown, multiple: boolean, menuItems: MenuItem[]): string | string[] {\n  if (multiple) {\n    if (Array.isArray(value)) {\n      return getSelectedValues(value, menuItems);\n    } else {\n      return getSelectedValuesFromString(value, menuItems);\n    }\n  }\n\n  return getSelectedMenuItem(value, menuItems)?.value ?? '';\n}\n\nexport function isValidValue(value: unknown, multiple: boolean, menuItems: MenuItem[]): boolean {\n  if (value === '') {\n    return true;\n  }\n\n  if (multiple) {\n    if (Array.isArray(value)) {\n      if (value.length === 0) {\n        return true;\n      }\n      return getSelectedValues(value, menuItems).length === value.length;\n    }\n    return getSelectedValuesFromString(value, menuItems).length > 0;\n  }\n\n  return getSelectedMenuItem(value, menuItems) != null;\n}\n\nexport function convertToValidValue(value: unknown, multiple: boolean): string | string[] {\n  if (multiple) {\n    if (Array.isArray(value)) {\n      return value.filter((element) => typeof element === 'string');\n    } else if (typeof value === 'string' && value.length > 0) {\n      return [value];\n    } else {\n      return [];\n    }\n  } else {\n    if (typeof value === 'string') {\n      return value;\n    } else {\n      return '';\n    }\n  }\n}\n\nexport function convertToValidArrayValue(value: unknown): string[] {\n  return convertToValidValue(value, true) as string[];\n}\n\nexport function valueEquals(a: string | string[], b: string | string[]): boolean {\n  if (Array.isArray(a) && Array.isArray(b)) {\n    return a.length === b.length && a.every((element, index) => element === b[index]);\n  } else if (typeof a === 'string' && typeof b === 'string') {\n    return a === b;\n  }\n  return false;\n}\n\nexport function isValueEmpty(value: string | string[]): boolean {\n  if (Array.isArray(value)) {\n    return value.length === 0;\n  }\n  return value === '';\n}\n\nfunction getSelectedValues(values: unknown[], menuItems: MenuItem[]): string[] {\n  return menuItems.filter((menuItem) => values.includes(menuItem.value)).map((menuItem) => menuItem.value);\n}\n\nfunction getSelectedValuesFromString(value: unknown, menuItems: MenuItem[]): string[] {\n  return menuItems.filter((menuItem) => value === menuItem.value).map((menuItem) => menuItem.value);\n}\n\nfunction getSelectedMenuItem(value: unknown, menuItems: MenuItem[]): MenuItem | undefined {\n  return menuItems.find((item) => value === item.value);\n}\n","@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n@import 'src/global/mixins/hidden';\n@import 'src/global/mixins/hide-scrollbar';\n\n:host,\n.select {\n  display: block;\n}\n\n.select__box {\n  display: inline-flex;\n  align-items: center;\n  justify-content: start;\n  position: relative;\n  width: 100%;\n  font-family: var(--six-font-family);\n  font-weight: var(--six-input-font-weight);\n  font-size: var(--six-input-font-size-medium);\n  letter-spacing: var(--six-input-letter-spacing);\n  background-color: var(--six-input-background-color);\n  border: solid var(--six-border-width) var(--six-input-border-color);\n  vertical-align: middle;\n  transition:\n    var(--six-transition-fast) color,\n    var(--six-transition-fast) border,\n    var(--six-transition-fast) box-shadow;\n  cursor: pointer;\n\n  &--line {\n    border: none;\n    border-bottom: solid var(--six-border-width) var(--six-input-border-color);\n  }\n\n  &--autocomplete {\n    border: none;\n    overflow: initial;\n  }\n}\n\n.select:not(.select--disabled) .select__box:hover {\n  background-color: var(--six-input-background-color-hover);\n  color: var(--six-input-color-hover);\n\n  border-bottom-color: var(--six-input-border-color-hover);\n\n  &:not(.select__box--line) {\n    border-color: var(--six-input-border-color-hover);\n  }\n}\n\n.select:not(.select--disabled) .select__box:focus {\n  background-color: var(--six-input-background-color-focus);\n  outline: none;\n  color: var(--six-input-color-focus);\n\n  border-bottom-color: var(--six-input-border-color-focus);\n  box-shadow: 0 1px 0 0 var(--six-input-border-color-focus);\n\n  &:not(.select__box--line) {\n    border-color: var(--six-input-border-color-focus);\n    box-shadow: var(--six-input-focus-shadow);\n  }\n}\n\n.select--disabled {\n  .select__box {\n    background-color: var(--six-input-background-color-disabled);\n    color: var(--six-input-color-disabled);\n    cursor: not-allowed;\n    outline: none;\n\n    &:not(.select__box--line) {\n      border-color: var(--six-input-border-color-disabled);\n    }\n  }\n\n  .select__clear {\n    pointer-events: none;\n  }\n}\n\n.select--invalid:not(.select--disabled):not(.select--focused) {\n  .select__box {\n    border-bottom-color: var(--six-input-border-color-danger);\n\n    &:not(.input--line) {\n      border-color: var(--six-input-border-color-danger);\n    }\n  }\n}\n\n.display__values {\n  display: flex;\n  flex: 1 1 auto;\n  align-items: center;\n  user-select: none;\n  overflow: hidden;\n  @include hide-scrollbar;\n}\n\n.display__values-values {\n  flex: 0 1 auto;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.display__values-and-counter {\n  display: flex;\n  overflow: hidden;\n}\n\n.select__clear {\n  flex-shrink: 0;\n  flex-grow: 0;\n  display: inline;\n}\n\n.select__icon {\n  flex-shrink: 0;\n  flex-grow: 0;\n  display: inline;\n  transition: var(--six-transition-medium) transform ease;\n}\n\n.select--open .select__icon {\n  transform: rotate(-180deg);\n}\n\n// Placeholder\n.placeholder {\n  color: var(--six-input-placeholder-color);\n}\n\n.select--disabled .placeholder {\n  color: var(--six-input-placeholder-color-disabled);\n}\n\n.select__input {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Size modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.select--small {\n  .select__box {\n    border-radius: var(--six-input-border-radius-small);\n    font-size: var(--six-input-font-size-small);\n    min-height: var(--six-height-small);\n\n    &--line {\n      border: none;\n      border-bottom: solid var(--six-border-width) var(--six-input-border-color);\n    }\n  }\n\n  .display__values {\n    margin: 0 0 0 var(--six-input-spacing-small);\n  }\n\n  .select__clear {\n    margin-right: var(--six-spacing-xxx-small);\n  }\n\n  .select__icon {\n    margin-right: var(--six-spacing-x-small);\n  }\n}\n\n.select--medium {\n  .select__box {\n    border-radius: var(--six-input-border-radius-medium);\n    font-size: var(--six-input-font-size-medium);\n    min-height: var(--six-height-medium);\n\n    &--line {\n      border: none;\n      border-bottom: solid var(--six-border-width) var(--six-input-border-color);\n    }\n  }\n\n  .display__values {\n    margin: 0 0 0 var(--six-input-spacing-medium);\n  }\n\n  .select__clear {\n    margin-right: var(--six-spacing-xxx-small);\n  }\n\n  .select__icon {\n    margin-right: var(--six-spacing-x-small);\n  }\n}\n\n.select--large {\n  .select__box {\n    border-radius: var(--six-input-border-radius-large);\n    font-size: var(--six-input-font-size-large);\n    min-height: var(--six-height-large);\n\n    &--line {\n      border: none;\n      border-bottom: solid var(--six-border-width) var(--six-input-border-color);\n    }\n  }\n\n  .display__values {\n    margin: 0 0 0 var(--six-input-spacing-large);\n  }\n\n  .select__clear {\n    margin-right: var(--six-spacing-xxx-small);\n  }\n\n  .select__icon {\n    margin-right: var(--six-spacing-x-small);\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pill modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.select--pill {\n  &.select--small .select__box {\n    border-radius: var(--six-height-small);\n  }\n\n  &.select--medium .select__box {\n    border-radius: var(--six-height-medium);\n  }\n\n  &.select--large .select__box {\n    border-radius: var(--six-height-large);\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Menu\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n.select {\n  &__menu {\n    width: 100%;\n\n    &--hidden {\n      // hide the menu panel if there are no menu items\n      display: none;\n    }\n  }\n}\n\n// fixes problem where six-select height changes when size=\"small\" and clearing button is visible\nsix-icon-button::part(base) {\n  padding-top: 0;\n  padding-bottom: 0;\n}\n\n.selection-container--border {\n  border-bottom: solid var(--six-border-width) var(--six-menu-divider-color);\n  padding-top: var(--six-spacing-xx-small);\n  padding-bottom: var(--six-spacing-xx-small);\n}\n\n.display-value--hidden {\n  display: none;\n}\n\n.overflow-count {\n  color: var(--six-color-web-rock-600);\n  padding-left: var(--six-spacing-x-small);\n}\n\n.overflow-count-hidden {\n  display: none;\n}\n\n.separator--hidden {\n  display: none;\n}\n\n.select-all {\n  border-top: 1px solid var(--six-color-web-rock-300);\n  display: flex;\n  justify-content: end;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { getSlot, getTextContent, hasSlot } from '../../utils/slot';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { debounce, DEFAULT_DEBOUNCE_FAST } from '../../utils/execution-control';\nimport { SixMenuItemData } from '../six-menu/six-menu';\nimport { getLanguage } from '../../utils/error-messages';\nimport { convertToValidArrayValue, convertToValidValue, valueEquals } from './util';\n\nexport interface SixSelectChangePayload {\n  value: string | string[];\n  isSelected: boolean;\n}\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 select's options in the form of menu items.\n * @slot label - The select's label. Alternatively, you can use the label prop.\n * @slot help-text - Help text that describes how to use the select.\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 clear-button - The input's clear button, exported from six-input.\n * @part form-control - The form control that wraps the label, input, and help text.\n * @part help-text - The select's help text.\n * @part icon - The select's icon.\n * @part label - The select's label.\n * @part menu - The select menu, a six-menu element.\n * @part tag - The multiselect option, a six-tag element.\n * @part tags - The container in which multiselect options are rendered.\n */\n\n@Component({\n  tag: 'six-select',\n  styleUrl: 'six-select.scss',\n  shadow: true,\n})\nexport class SixSelect {\n  private box?: HTMLElement;\n  private menu?: HTMLElement;\n  private dropdown?: HTMLSixDropdownElement;\n  private displayValuesContainer?: HTMLElement;\n  private overflowCount?: HTMLElement;\n  private autocompleteInput?: HTMLSixInputElement;\n  private inputId = `select-${++id}`;\n  private labelId = `select-label-${id}`;\n  private helpTextId = `select-help-text-${id}`;\n  private errorTextId = `select-error-text-${id}`;\n  private eventListeners = new EventListeners();\n  private activeItemIndex = -1;\n  private resizeObserver = new ResizeObserver(() => this.updateDisplayedValues());\n\n  @Element() host!: HTMLSixSelectElement;\n\n  @State() hasFocus = false;\n  @State() hasHelpTextSlot = false;\n  @State() hasLabelSlot = false;\n  @State() hasErrorTextSlot = false;\n  @State() isOpen = false;\n  @State() displayedValues: string[] = [];\n\n  /** Menu items shown in the selection container.  */\n  @State() selectionContainerItems: HTMLSixMenuItemElement[] = [];\n\n  /** Set to true to enable multiselect. */\n  @Prop() multiple = false;\n\n  /** Enables the select all button. */\n  @Prop() selectAllButton = false;\n\n  /**\n   * Custom text for the \"select all\" button. Defaults to \"Select all\" and equivalents in supported languages.\n   */\n  @Prop() selectAllText?: string;\n\n  /** Set to true to disable the select control. */\n  @Prop() disabled = false;\n\n  /** The select's name. */\n  @Prop() name = '';\n\n  /** The select's placeholder text. */\n  @Prop() placeholder = '';\n\n  /** The filter's placeholder text. */\n  @Prop() filterPlaceholder?: string;\n\n  /** The debounce for the filter callbacks. */\n  @Prop() filterDebounce?: number;\n\n  /** The select's size. */\n  @Prop() size: 'small' | 'medium' | 'large' = 'medium';\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 value of the control. This will be a string or an array depending on `multiple`. */\n  @Prop({ mutable: true }) value: string | string[] = '';\n\n  /** Set to true to draw a pill-style select with rounded edges. */\n  @Prop() pill = false;\n\n  /** The select's help text. Alternatively, you can use the help-text slot. */\n  @Prop() helpText = '';\n\n  /** Set to true to show an asterisk beneath the label. */\n  @Prop() required = false;\n\n  /** Set to true to add a clear button when the select is populated. */\n  @Prop() clearable = false;\n\n  /** The label text. */\n  @Prop() label = '';\n\n  /** The error message shown, if `invalid` is set to true.  */\n  @Prop() errorText: string | string[] = '';\n\n  /** The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 */\n  @Prop() errorTextCount?: number;\n\n  /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */\n  @Prop({ reflect: true }) invalid = false;\n\n  /** Set to render as line */\n  @Prop() line = false;\n\n  /** Set to true to allow filtering for entries in the dropdown */\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  /**\n   * Set to true to turn the six-select into an autocomplete.\n   */\n  @Prop() autocomplete = false;\n\n  /** The debounce for when the input changes for autocompletes should be emitted */\n  @Prop() inputDebounce = DEFAULT_DEBOUNCE_FAST;\n\n  /** Set the options to be shown in the dropdown (alternative to setting the elements via html) */\n  @Prop() options: SixMenuItemData[] | null = null;\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  @Watch('disabled')\n  handleDisabledChange() {\n    if (this.disabled && this.isOpen) {\n      this.dropdown?.hide();\n    }\n  }\n\n  @Watch('helpText')\n  @Watch('errorText')\n  @Watch('label')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  @Watch('multiple')\n  handleMultipleChange() {\n    this.value = convertToValidValue(this.value, this.multiple);\n    this.syncItemsFromValue();\n  }\n\n  @Watch('value')\n  async handleValueChange() {\n    const newValue = convertToValidValue(this.value, this.multiple);\n    if (!valueEquals(this.value, newValue)) {\n      this.value = newValue;\n    }\n    await this.syncItemsFromValue();\n  }\n\n  /** Emitted when the control's value changes. */\n  @Event({ eventName: 'six-select-change' }) sixChange!: EventEmitter<SixSelectChangePayload>;\n\n  /** Emitted when the control gains focus. */\n  @Event({ eventName: 'six-select-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control loses focus. */\n  @Event({ eventName: 'six-select-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    if (this.virtualScroll && this.options === null) {\n      console.error('Options must be defined when using virtual scrolling');\n    }\n\n    this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.forward('six-select-change', 'change', this.host);\n    this.eventListeners.forward('six-select-blur', 'blur', this.host);\n    this.eventListeners.forward('six-select-focus', 'focus', this.host);\n    if (this.displayValuesContainer) {\n      this.resizeObserver.observe(this.displayValuesContainer);\n    }\n  }\n\n  componentWillLoad() {\n    this.value = convertToValidValue(this.value, this.multiple);\n    this.handleSlotChange();\n  }\n\n  componentDidLoad() {\n    if (this.displayValuesContainer) {\n      this.resizeObserver.observe(this.displayValuesContainer);\n    }\n\n    // We need to do an initial sync after the component has rendered, so this will suppress the re-render warning\n    requestAnimationFrame(() => this.syncItemsFromValue());\n\n    if (this.autocomplete && this.autocompleteInput != null) {\n      const autocompleteInput = this.autocompleteInput;\n      this.eventListeners.add(\n        autocompleteInput,\n        'six-input-input',\n        debounce((event) => {\n          this.value = autocompleteInput.value;\n          this.sixChange.emit({ value: this.value, isSelected: false });\n          event.stopPropagation();\n\n          if (this.virtualScroll || this.value.length > 0) {\n            this.dropdown?.show();\n          }\n        }, this.inputDebounce)\n      );\n\n      const selectedLabel = this.displayedValues.join(', ');\n      autocompleteInput.value = selectedLabel;\n    }\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver.disconnect();\n    this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.removeAll();\n  }\n\n  /** Sets focus on the select. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.hasFocus = true;\n    this.box?.focus(options);\n  }\n\n  private getItemLabel(item: HTMLSixMenuItemElement): string {\n    const slot = item.shadowRoot?.querySelector('slot:not([name])') as HTMLSlotElement;\n    if (slot != null) {\n      return getTextContent(slot);\n    } else {\n      // bugfix/COMSLI-203-six-select-value-is-not-updated-if-the-slot-is-changed\n      return item.textContent ?? '';\n    }\n  }\n\n  private getSlottedItem(item: HTMLSixMenuItemElement, slotName: 'prefix' | 'suffix') {\n    const slottedElement = getSlot(item, slotName);\n    if (slottedElement == null) {\n      return null;\n    }\n    const attributes = Object.fromEntries([...slottedElement.attributes].map((attr) => [attr.name, attr.value]));\n\n    return h(slottedElement.tagName.toLowerCase(), {\n      ...attributes,\n      innerHTML: slottedElement.innerHTML,\n    });\n  }\n\n  private getItems(): HTMLSixMenuItemElement[] {\n    if (this.options !== null && this.menu != null && this.menu.shadowRoot != null) {\n      return [...this.menu.shadowRoot.querySelectorAll('six-menu-item')];\n    }\n\n    return [...this.host.querySelectorAll('six-menu-item')];\n  }\n\n  private getVisibleItems(): HTMLSixMenuItemElement[] {\n    const selectionContainerItems = this.getSelectionContainerItems();\n    const mainItems = this.getItems();\n    return [...selectionContainerItems, ...mainItems].filter((i) => i.style.display !== 'none');\n  }\n\n  private getSelectionContainerItems() {\n    return [...(this.host.shadowRoot?.querySelectorAll('six-menu-item') || [])];\n  }\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.sixBlur.emit();\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.sixFocus.emit();\n  };\n\n  private handleClearClick = async (event: MouseEvent) => {\n    event.stopPropagation();\n    await this.clearValues();\n    await this.dropdown?.show();\n    await this.setFocus();\n    this.sixChange.emit({ value: this.value, isSelected: true });\n  };\n\n  private async clearValues() {\n    this.value = this.multiple ? [] : '';\n    this.selectionContainerItems = [];\n    await this.syncItemsFromValue();\n  }\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.virtualScroll || this.autocomplete) {\n      return;\n    }\n\n    if (['Control', 'Escape'].includes(event.key)) {\n      return;\n    }\n\n    const items = this.getVisibleItems();\n\n    // Ctrl-A selects all items\n    if (this.isOpen && this.multiple && event.code === 'KeyA' && event.ctrlKey) {\n      event.preventDefault();\n      this.selectAll();\n      return;\n    }\n\n    // Tabbing out of the control closes it\n    if (event.key === 'Tab') {\n      if (this.isOpen) {\n        this.dropdown?.hide();\n      }\n      return;\n    }\n\n    if (event.key === ' ' && !this.multiple) {\n      return;\n    }\n\n    // Enter and Space selects the active item\n    if (this.activeItemIndex >= 0 && ['Enter', ' '].includes(event.key)) {\n      const activeItem = items.at(this.activeItemIndex);\n      event.preventDefault();\n      activeItem?.click();\n      return;\n    }\n\n    // Move the selection when pressing up or down\n    if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {\n      // Show the menu if it's not already open\n      if (!this.isOpen) {\n        this.dropdown?.show();\n      }\n\n      if (items.length > 0) {\n        event.preventDefault();\n\n        if (event.key === 'ArrowDown') {\n          this.activeItemIndex++;\n        } else if (event.key === 'ArrowUp') {\n          this.activeItemIndex--;\n        } else if (event.key === 'Home') {\n          this.activeItemIndex = 0;\n        } else if (event.key === 'End') {\n          this.activeItemIndex = items.length - 1;\n        }\n\n        if (this.activeItemIndex < 0) this.activeItemIndex = 0;\n        if (this.activeItemIndex > items.length - 1) this.activeItemIndex = items.length - 1;\n\n        items.at(this.activeItemIndex)?.setFocus();\n      }\n    }\n\n    // All other keys open the menu\n    if (!this.isOpen) {\n      event.stopPropagation();\n      event.preventDefault();\n      this.dropdown?.show();\n    }\n  };\n\n  private selectAll() {\n    const visibleItems = this.getVisibleItems();\n    const hasDeselectedOptions = this.hasDeselectedOptions();\n    visibleItems.filter((option) => !option.disabled).forEach((option) => (option.checked = hasDeselectedOptions));\n    const checkedItems = visibleItems.filter((option) => option.checked).map((option) => option.value);\n    this.value = hasDeselectedOptions ? checkedItems : [];\n    this.sixChange.emit({ value: this.value, isSelected: true });\n  }\n\n  private handleLabelClick = () => {\n    this.box?.focus();\n  };\n\n  private handleMenuSelect = (event: CustomEvent) => {\n    const currentItem = event.detail.item as HTMLSixMenuItemElement;\n    if (this.multiple) {\n      currentItem.checked = !currentItem.checked;\n    } else {\n      this.getItems().forEach((i) => (i.checked = false));\n      currentItem.checked = true;\n    }\n    this.syncValueFromItems();\n    this.sixChange.emit({ value: this.value, isSelected: true });\n  };\n\n  private handleMenuShow = (event: CustomEvent) => {\n    if (this.disabled) {\n      event.preventDefault();\n      return;\n    }\n    this.activeItemIndex = -1;\n\n    if (!this.virtualScroll && this.multiple) {\n      // reset display style of main items\n      const mainItems = this.getItems();\n      mainItems.forEach((item) => (item.style.display = 'unset'));\n\n      // show selected menu items in the selection container and hide them in the main container\n      const checkedItems = getCheckedItems(convertToValidArrayValue(this.value), mainItems);\n      checkedItems.forEach((i) => (i.style.display = 'none'));\n      this.selectionContainerItems = checkedItems.map((item) => {\n        return (\n          <six-menu-item\n            key={item.value} // key makes sure the node is not re-used: https://stenciljs.com/docs/templating-jsx#conditionals\n            checked={true}\n            value={item.value}\n            checkType={this.multiple ? 'checkbox' : 'check'}\n            onClick={(event) => {\n              event.stopPropagation();\n              if (!this.disabled) {\n                const menuItem = event.target as HTMLSixMenuItemElement;\n                const isChecked = menuItem.checked;\n                menuItem.checked = !isChecked;\n                item.checked = !isChecked;\n                this.syncValueFromItems();\n                this.sixChange.emit({ value: this.value, isSelected: true });\n              }\n            }}\n          >\n            {this.getSlottedItem(item, 'prefix')}\n            {this.getItemLabel(item)}\n            {this.getSlottedItem(item, 'suffix')}\n          </six-menu-item>\n        );\n      });\n    }\n\n    this.isOpen = true;\n  };\n\n  private handleMenuHide = () => {\n    this.isOpen = false;\n    if (this.multiple) {\n      this.handleBlur();\n    }\n  };\n\n  private handleSlotChange = () => {\n    this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n    this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n    this.syncItemsFromValue();\n  };\n\n  /**\n   * Sets the checked state of menu items and renders the displayed values.\n   */\n  private async syncItemsFromValue() {\n    const selectionContainerItems = this.getSelectionContainerItems();\n    const mainItems = this.getItems();\n    const value = convertToValidValue(this.value, this.multiple);\n\n    selectionContainerItems.forEach((item) => {\n      item.checkType = this.multiple ? 'checkbox' : 'check';\n      if (Array.isArray(value)) {\n        item.checked = value.some((val) => val === item.value);\n      } else {\n        item.checked = value === item.value;\n      }\n    });\n\n    mainItems.forEach((item) => {\n      item.checkType = this.multiple ? 'checkbox' : 'check';\n      if (Array.isArray(value)) {\n        item.checked = value.some((val) => val === item.value);\n      } else {\n        item.checked = value === item.value;\n      }\n    });\n\n    const checkedItems = getCheckedItems(convertToValidArrayValue(this.value), mainItems);\n    this.displayedValues = checkedItems.map((i) => this.getItemLabel(i));\n\n    if (this.autocomplete && this.autocompleteInput != null && !this.hasFocus) {\n      const selectedLabel = this.displayedValues.join(', ');\n      this.autocompleteInput.value = selectedLabel;\n    }\n\n    requestAnimationFrame(() => {\n      this.updateDisplayedValues();\n    });\n  }\n\n  private syncValueFromItems() {\n    const items = this.getItems();\n    const checkedValues = items.filter((item) => item.checked).map((item) => item.value);\n    if (this.multiple) {\n      this.value = checkedValues;\n    } else {\n      this.value = checkedValues.length > 0 ? checkedValues[0] : '';\n    }\n  }\n\n  private updateDisplayedValues() {\n    const displayValueOptions = [...(this.displayValuesContainer?.querySelectorAll('.display-value') ?? [])];\n    if (this.displayValuesContainer == null || displayValueOptions.length === 0 || this.overflowCount == null) {\n      return;\n    }\n\n    // Show all options and separators to properly measure all widths.\n    displayValueOptions.forEach((d) => {\n      showDisplayValue(d);\n      showSeparator(d);\n    });\n\n    // Measure available width. The last separator is added to the available width, because it will be hidden later on.\n    const separator = displayValueOptions[displayValueOptions.length - 1].querySelector('.separator');\n    if (separator == null) return;\n    let availableWidth = getWidth(this.displayValuesContainer) + getWidth(separator);\n\n    // Compute how many display value elements fit in the available width\n    let { fitCount, overflowCount } = computeFitCount(displayValueOptions, availableWidth);\n\n    if (overflowCount === 0) {\n      // All items fit, hide overflow count and show all values.\n      hideOverflowCount(this.overflowCount);\n      showFittingValues(displayValueOptions, fitCount);\n    } else {\n      // Not all items fit in the available width. Recompute the available width with the overflow-count visible.\n\n      // Increment overflow count by one to make sure the elements fit, even if the overflow count increases to the\n      // next higher power of ten, e.g. from 9 to 10 or 99 to 100.\n      setOverflowCount(this.overflowCount, overflowCount + 1);\n      showOverflowCount(this.overflowCount);\n\n      // Subtract the overflow count from the available width\n      availableWidth = availableWidth - getWidth(this.overflowCount);\n\n      // Compute how many display value elements fit in the new available width\n      ({ fitCount, overflowCount } = computeFitCount(displayValueOptions, availableWidth));\n\n      // Show overflow count and items that fit.\n      setOverflowCount(this.overflowCount, overflowCount);\n      showFittingValues(displayValueOptions, fitCount);\n    }\n  }\n\n  render() {\n    const hasSelection = this.hasSelection();\n    const items = this.getItems();\n    const hasMenuItems = items.length > 0;\n    const hasDeselectedOptions = this.hasDeselectedOptions();\n    let showClear = false;\n    let showExpand = hasMenuItems;\n    if (this.clearable && hasSelection) {\n      showClear = true;\n      showExpand = false;\n    }\n\n    return (\n      <FormControl\n        inputId={this.inputId}\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        errorTextId={this.errorTextId}\n        errorText={this.errorText}\n        errorTextCount={this.errorTextCount}\n        hasErrorTextSlot={this.hasErrorTextSlot}\n        size={this.size}\n        onLabelClick={this.handleLabelClick}\n        disabled={this.disabled}\n        required={this.required}\n        displayError={this.invalid}\n      >\n        <six-dropdown\n          part=\"base\"\n          ref={(el) => (this.dropdown = el)}\n          hoist={this.hoist}\n          matchTriggerWidth={true}\n          closeOnSelect={!this.multiple}\n          containingElement={this.host}\n          disableHideOnEnterAndSpace={this.autocomplete}\n          class={{\n            select: true,\n            'select--open': this.isOpen,\n            'select--empty': this.value?.length === 0,\n            'select--focused': this.hasFocus,\n            'select--clearable': this.clearable,\n            'select--disabled': this.disabled,\n            'select--multiple': this.multiple,\n            'select--has-tags': this.multiple && hasSelection,\n            'select--placeholder-visible': this.displayedValues.length === 0,\n            'select--small': this.size === 'small',\n            'select--medium': this.size === 'medium',\n            'select--large': this.size === 'large',\n            'select--pill': this.pill,\n            'select--invalid': this.invalid,\n          }}\n          onKeyDown={this.handleKeyDown}\n          onSix-dropdown-show={this.handleMenuShow}\n          onSix-dropdown-hide={this.handleMenuHide}\n          filterPlaceholder={this.filterPlaceholder}\n          filterDebounce={this.filterDebounce}\n          filter={this.filter}\n          asyncFilter={this.asyncFilter}\n          virtualScroll={this.virtualScroll}\n        >\n          {/* Trigger */}\n          <div\n            slot=\"trigger\"\n            ref={(el) => (this.box = el)}\n            id={this.inputId}\n            class={{\n              select__box: true,\n              'select__box--line': this.line,\n              'select__box--autocomplete': this.autocomplete,\n            }}\n            role=\"combobox\"\n            aria-labelledby={this.labelId}\n            aria-describedby={this.helpTextId}\n            aria-haspopup=\"true\"\n            aria-expanded={this.isOpen ? 'true' : 'false'}\n            tabIndex={this.disabled ? -1 : 0}\n            onBlur={this.handleBlur}\n            onFocus={this.handleFocus}\n          >\n            {/* Display values */}\n            <div class=\"display__values\" ref={(el) => (this.displayValuesContainer = el)}>\n              {this.displayedValues.length > 0 ? (\n                <span class=\"display__values-and-counter\">\n                  <span class=\"display__values-values\">\n                    {this.displayedValues.map((value) => (\n                      <span key={value} class=\"display-value\">\n                        {value}\n                        <span class={{ separator: true }}>, </span>\n                      </span>\n                    ))}\n                  </span>\n                  <span ref={(el) => (this.overflowCount = el)} class=\"overflow-count\">\n                    +10\n                  </span>\n                </span>\n              ) : (\n                <span class=\"placeholder\">{this.placeholder}</span>\n              )}\n            </div>\n\n            {/* Clear */}\n            {showClear && (\n              <six-icon-button\n                exportparts=\"base:clear-button\"\n                class=\"select__clear\"\n                name=\"clear\"\n                size=\"small\"\n                onClick={this.handleClearClick}\n                tabindex=\"-1\"\n              />\n            )}\n\n            {/* Expand */}\n            {showExpand && (\n              <span part=\"icon\" class=\"select__icon\">\n                <six-icon size=\"medium\">expand_more</six-icon>\n              </span>\n            )}\n\n            {/* Autocomplete */}\n            <six-input\n              ref={(el) => (this.autocompleteInput = el)}\n              class={{\n                select__input: true,\n                'sr-only': !this.autocomplete,\n              }}\n              aria-hidden=\"true\"\n              required={this.required}\n              onFocus={this.handleFocus}\n              clearable={this.clearable}\n              placeholder={this.placeholder}\n              pill={this.pill}\n              disabled={this.disabled}\n              size={this.size}\n              tabIndex={-1}\n            />\n          </div>\n\n          {/* Selection container */}\n          <div\n            class={{\n              'selection-container': true,\n              'selection-container--border':\n                this.selectionContainerItems.length > 0 && items.length !== this.selectionContainerItems.length,\n            }}\n          >\n            {this.selectionContainerItems}\n          </div>\n\n          {/* Menu */}\n          <six-menu\n            ref={(el) => (this.menu = el)}\n            part=\"menu\"\n            class={{\n              select__menu: true,\n              'select__menu--hidden': !hasMenuItems,\n            }}\n            onSix-menu-item-selected={this.handleMenuSelect}\n            items={this.options}\n            virtualScroll={this.virtualScroll}\n            remove-box-shadow={true}\n            disable-keyboard-handling={true}\n          >\n            <slot onSlotchange={this.handleSlotChange} />\n          </six-menu>\n\n          {/* Select all */}\n          {this.multiple && this.selectAllButton && (\n            <div class=\"select-all\" slot=\"dropdown-footer\">\n              <six-button type=\"link\" onClick={() => this.selectAll()}>\n                {this.selectAllText == null ? selectAllDefaultText(hasDeselectedOptions) : this.selectAllText}\n              </six-button>\n            </div>\n          )}\n        </six-dropdown>\n      </FormControl>\n    );\n  }\n\n  private hasSelection() {\n    return this.multiple ? this.value.length > 0 : this.value !== '';\n  }\n\n  private hasDeselectedOptions() {\n    return this.getVisibleItems().some((opt) => !opt.disabled && !opt.checked);\n  }\n}\n\nfunction getCheckedItems(value: string[], items: HTMLSixMenuItemElement[]): HTMLSixMenuItemElement[] {\n  return items.filter((item) => value.includes(item.value));\n}\n\nfunction getWidth(element: Element) {\n  return element.getBoundingClientRect().width;\n}\n\nfunction computeFitCount(options: Element[], availableWidth: number): { fitCount: number; overflowCount: number } {\n  let accumulatedWidth = 0;\n  let fitCount = 0;\n\n  for (let i = 0; i < options.length; i++) {\n    const displayOption = options[i];\n    const width = getWidth(displayOption);\n    if (i === 0 && width > availableWidth) {\n      fitCount = 1;\n      break;\n    }\n    accumulatedWidth += width;\n    if (accumulatedWidth > availableWidth) {\n      break;\n    } else {\n      fitCount += 1;\n    }\n  }\n  const overflowCount = options.length - fitCount;\n  return { fitCount, overflowCount };\n}\n\nfunction showFittingValues(displayValueOptions: Element[], fitCount: number) {\n  if (displayValueOptions.length > 0) {\n    // show items that fit\n    displayValueOptions.slice(0, fitCount).forEach((displayValue, index, list) => {\n      showDisplayValue(displayValue);\n      const isLast = index === list.length - 1;\n      if (isLast) {\n        hideSeparator(displayValue);\n      } else {\n        showSeparator(displayValue);\n      }\n    });\n\n    // hide the rest\n    displayValueOptions.slice(fitCount).forEach((displayValue) => {\n      hideDisplayValue(displayValue);\n      showSeparator(displayValue);\n    });\n  }\n}\n\nfunction hideSeparator(displayValueOption: Element) {\n  displayValueOption.querySelector('.separator')?.classList.add('separator--hidden');\n}\n\nfunction showSeparator(displayValueOption: Element) {\n  displayValueOption.querySelector('.separator')?.classList.remove('separator--hidden');\n}\n\nfunction showDisplayValue(displayValueOption: Element) {\n  displayValueOption.classList.remove('display-value--hidden');\n}\n\nfunction hideDisplayValue(displayValueOption: Element) {\n  displayValueOption.classList.add('display-value--hidden');\n}\n\nfunction setOverflowCount(overflowCount: Element, count: number) {\n  overflowCount.textContent = `+${count}`;\n}\n\nfunction showOverflowCount(overflowCount: Element) {\n  overflowCount.classList.remove('overflow-count-hidden');\n}\n\nfunction hideOverflowCount(overflowCount: Element) {\n  overflowCount.classList.add('overflow-count-hidden');\n}\n\nfunction selectAllDefaultText(hasDeselectedOptions: boolean) {\n  const lang = getLanguage();\n  switch (lang) {\n    case 'de':\n      return hasDeselectedOptions ? 'Alle auswählen' : 'Alle abwählen';\n    case 'fr':\n      return hasDeselectedOptions ? 'Tout sélectionner' : 'Tout désélectionner';\n    case 'it':\n      return hasDeselectedOptions ? 'Seleziona tutto' : 'Deseleziona tutto';\n    case 'en':\n      return hasDeselectedOptions ? 'Select all' : 'Deselect all';\n    case 'es':\n      return hasDeselectedOptions ? 'Seleccionar todo' : 'Deseleccionar todo';\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/ui-library/p-6c8182fa.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as r,g as o}from"./p-JoG9I7EO.js";import{F as i}from"./p-Dg9366Gk.js";import{h as a}from"./p-j3oIB5oT.js";import{E as s}from"./p-C4h4qpGl.js";const l=':host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none;text-align:left}.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:"*";transform:scale(1.1);margin-left:var(--six-spacing-xxx-small);position:absolute}.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;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{--height:100%;display:block}.textarea{display:flex;align-items:center;position:relative;width:100%;font-family:var(--six-font-family);font-weight:var(--six-input-font-weight);line-height:var(--six-line-height-normal);letter-spacing:var(--six-input-letter-spacing);background-color:var(--six-input-background-color);border:solid var(--six-border-width) var(--six-input-border-color);vertical-align:middle;transition:var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;cursor:text}.textarea:hover:not(.textarea--disabled){background-color:var(--six-input-background-color-hover);border-color:var(--six-input-border-color-hover)}.textarea:hover:not(.textarea--disabled) .textarea__control{color:var(--six-input-color-hover)}.textarea.textarea--focused:not(.textarea--disabled){background-color:var(--six-input-background-color-focus);box-shadow:var(--six-input-focus-shadow);border-color:var(--six-input-border-color-focus);color:var(--six-input-color-focus)}.textarea.textarea--focused:not(.textarea--disabled) .textarea__control{color:var(--six-input-color-focus)}.textarea.textarea--disabled{background-color:var(--six-input-background-color-disabled);border-color:var(--six-input-border-color-disabled);cursor:not-allowed}.textarea.textarea--disabled .textarea__control{color:var(--six-input-color-disabled)}.textarea.textarea--disabled .textarea__control::placeholder{color:var(--six-input-placeholder-color-disabled)}.textarea__control{flex:1 1 auto;height:calc(var(--height) - 2 * var(--six-border-width));font-family:inherit;font-size:inherit;font-weight:inherit;line-height:1.4;color:var(--sl-input-color);border:none;background:none;box-shadow:none;cursor:inherit;-webkit-appearance:none}.textarea__control::-webkit-search-decoration,.textarea__control::-webkit-search-cancel-button,.textarea__control::-webkit-search-results-button,.textarea__control::-webkit-search-results-decoration{-webkit-appearance:none}.textarea__control::placeholder{color:var(--six-input-placeholder-color);user-select:none}.textarea__control:focus{outline:none}.textarea--invalid:not(.textarea--disabled):not(.textarea--focused){border-color:var(--six-input-border-color-danger)}.textarea--small{border-radius:var(--six-input-border-radius-small);font-size:var(--six-input-font-size-small)}.textarea--small .textarea__control{padding:0.5em var(--six-input-spacing-small)}.textarea--medium{border-radius:var(--six-input-border-radius-medium);font-size:var(--six-input-font-size-medium)}.textarea--medium .textarea__control{padding:0.5em var(--six-input-spacing-medium)}.textarea--large{border-radius:var(--six-input-border-radius-large);font-size:var(--six-input-font-size-large)}.textarea--large .textarea__control{padding:0.5em var(--six-input-spacing-large)}.textarea--resize-none .textarea__control{resize:none}.textarea--resize-vertical .textarea__control{resize:vertical}.textarea--resize-auto .textarea__control{height:auto;resize:none}';let n=0;const h=class{constructor(r){t(this,r);this.sixChange=e(this,"six-textarea-change");this.sixInput=e(this,"six-textarea-input");this.sixFocus=e(this,"six-textarea-focus");this.sixBlur=e(this,"six-textarea-blur");this.inputId=`textarea-${++n}`;this.labelId=`textarea-label-${n}`;this.helpTextId=`textarea-help-text-${n}`;this.errorTextId=`input-error-text-${n}`;this.eventListeners=new s;this.resizeObserver=new ResizeObserver((()=>this.setTextareaHeight()));this.hasFocus=false;this.hasHelpTextSlot=false;this.hasLabelSlot=false;this.hasErrorTextSlot=false;this.size="medium";this.name="";this.value="";this.helpText="";this.rows=4;this.resize="vertical";this.disabled=false;this.readonly=false;this.required=false;this.label="";this.errorText="";this.invalid=false;this.autocapitalize="off";this.autocorrect="off";this.autocomplete="off";this.autofocus=false;this.spellcheck=false;this.handleChange=()=>{if(this.nativeTextarea!=null){this.value=this.nativeTextarea.value;this.sixChange.emit()}};this.handleInput=()=>{if(this.nativeTextarea!=null){this.value=this.nativeTextarea.value;this.setTextareaHeight();this.sixInput.emit()}};this.handleBlur=()=>{this.hasFocus=false;this.sixBlur.emit()};this.handleFocus=()=>{this.hasFocus=true;this.sixFocus.emit()};this.handleSlotChange=()=>{this.hasLabelSlot=a(this.host,"label");this.hasHelpTextSlot=a(this.host,"help-text");this.hasErrorTextSlot=a(this.host,"error-text")}}handleLabelChange(){this.handleSlotChange()}handleRowsChange(){this.setTextareaHeight()}handleValueChange(){this.value=this.getValue();if(this.nativeTextarea!=null){if(this.nativeTextarea.value!==this.value){this.nativeTextarea.value=this.value}}}connectedCallback(){var t;(t=this.host.shadowRoot)===null||t===void 0?void 0:t.addEventListener("slotchange",this.handleSlotChange);this.eventListeners.forward("six-textarea-input","input",this.host);this.eventListeners.forward("six-textarea-change","change",this.host);this.eventListeners.forward("six-textarea-focus","focus",this.host);this.eventListeners.forward("six-textarea-blur","blur",this.host)}componentWillLoad(){this.handleSlotChange()}componentDidLoad(){this.setTextareaHeight();if(this.nativeTextarea!=null){this.resizeObserver.observe(this.nativeTextarea)}}disconnectedCallback(){var t;if(this.nativeTextarea!=null){this.resizeObserver.unobserve(this.nativeTextarea)}(t=this.host.shadowRoot)===null||t===void 0?void 0:t.removeEventListener("slotchange",this.handleSlotChange);this.eventListeners.removeAll()}async setFocus(t){var e;(e=this.nativeTextarea)===null||e===void 0?void 0:e.focus(t)}async removeFocus(){var t;(t=this.nativeTextarea)===null||t===void 0?void 0:t.blur()}async select(){var t;return(t=this.nativeTextarea)===null||t===void 0?void 0:t.select()}async setSelectionRange(t,e,r="none"){var o;return(o=this.nativeTextarea)===null||o===void 0?void 0:o.setSelectionRange(t,e,r)}async setRangeText(t,e,r,o="preserve"){if(this.nativeTextarea==null)return;this.nativeTextarea.setRangeText(t,e,r,o);if(this.getValue()!==this.nativeTextarea.value){this.value=this.nativeTextarea.value;this.setTextareaHeight();this.sixChange.emit();this.sixInput.emit()}}setTextareaHeight(){if(this.nativeTextarea==null)return;if(this.resize==="auto"){this.nativeTextarea.style.height="auto";this.nativeTextarea.style.height=this.nativeTextarea.scrollHeight+"px"}else{this.nativeTextarea.style.height=undefined}}getValue(){var t;return((t=this.value)!==null&&t!==void 0?t:"").toString()}render(){return r(i,{key:"82dacccbeabf732b3d49738f0b5b9d725938014d",inputId:this.inputId,label:this.label,labelId:this.labelId,hasLabelSlot:this.hasLabelSlot,helpTextId:this.helpTextId,helpText:this.helpText,hasHelpTextSlot:this.hasHelpTextSlot,errorTextId:this.errorTextId,errorText:this.errorText,errorTextCount:this.errorTextCount,hasErrorTextSlot:this.hasErrorTextSlot,size:this.size,disabled:this.disabled,required:this.required,displayError:this.invalid},r("div",{key:"88ddaeed09431fd06608350652de1280e729d44d",part:"base",class:{textarea:true,"textarea--small":this.size==="small","textarea--medium":this.size==="medium","textarea--large":this.size==="large","textarea--disabled":this.disabled,"textarea--focused":this.hasFocus,"textarea--empty":this.getValue().length===0,"textarea--invalid":this.invalid,"textarea--resize-none":this.resize==="none","textarea--resize-vertical":this.resize==="vertical","textarea--resize-auto":this.resize==="auto"}},r("textarea",{key:"59838f0a6a739c7f6ed950f7ec73c228571e201a",part:"textarea",ref:t=>this.nativeTextarea=t,id:this.inputId,class:"textarea__control",name:this.name,placeholder:this.placeholder,disabled:this.disabled,readOnly:this.readonly,rows:this.rows,minLength:this.minlength,maxLength:this.maxlength,value:this.getValue(),autoCapitalize:this.autocapitalize,autoCorrect:this.autocorrect,autoFocus:this.autofocus,spellcheck:this.spellcheck,required:this.required,inputMode:this.inputmode,"aria-labelledby":this.labelId,onChange:this.handleChange,onInput:this.handleInput,onFocus:this.handleFocus,onBlur:this.handleBlur})))}get host(){return o(this)}static get watchers(){return{helpText:["handleLabelChange"],errorText:["handleLabelChange"],label:["handleLabelChange"],rows:["handleRowsChange"],value:["handleValueChange"]}}};h.style=l;export{h as six_textarea};
+//# sourceMappingURL=p-6c8182fa.entry.js.map

package/dist/ui-library/p-6c8182fa.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sixTextareaCss","id","SixTextarea","constructor","hostRef","this","inputId","labelId","helpTextId","errorTextId","eventListeners","EventListeners","resizeObserver","ResizeObserver","setTextareaHeight","hasFocus","hasHelpTextSlot","hasLabelSlot","hasErrorTextSlot","size","name","value","helpText","rows","resize","disabled","readonly","required","label","errorText","invalid","autocapitalize","autocorrect","autocomplete","autofocus","spellcheck","handleChange","nativeTextarea","sixChange","emit","handleInput","sixInput","handleBlur","sixBlur","handleFocus","sixFocus","handleSlotChange","hasSlot","host","handleLabelChange","handleRowsChange","handleValueChange","getValue","connectedCallback","_a","shadowRoot","addEventListener","forward","componentWillLoad","componentDidLoad","observe","disconnectedCallback","unobserve","removeEventListener","removeAll","setFocus","options","focus","removeFocus","blur","select","setSelectionRange","selectionStart","selectionEnd","selectionDirection","setRangeText","replacement","start","end","selectMode","style","height","scrollHeight","undefined","toString","render","h","FormControl","key","errorTextCount","displayError","part","class","textarea","length","ref","el","placeholder","readOnly","minLength","minlength","maxLength","maxlength","autoCapitalize","autoCorrect","autoFocus","inputMode","inputmode","onChange","onInput","onFocus","onBlur"],"sources":["src/components/six-textarea/six-textarea.scss?tag=six-textarea&encapsulation=shadow","src/components/six-textarea/six-textarea.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n/**\n * @prop --height: The textarea height.\n */\n:host {\n  --height: 100%;\n  display: block;\n}\n\n.textarea {\n  display: flex;\n  align-items: center;\n  position: relative;\n  width: 100%;\n  font-family: var(--six-font-family);\n  font-weight: var(--six-input-font-weight);\n  line-height: var(--six-line-height-normal);\n  letter-spacing: var(--six-input-letter-spacing);\n  background-color: var(--six-input-background-color);\n  border: solid var(--six-border-width) var(--six-input-border-color);\n  vertical-align: middle;\n  transition:\n    var(--six-transition-fast) color,\n    var(--six-transition-fast) border,\n    var(--six-transition-fast) box-shadow;\n  cursor: text;\n\n  &:hover:not(.textarea--disabled) {\n    background-color: var(--six-input-background-color-hover);\n    border-color: var(--six-input-border-color-hover);\n\n    .textarea__control {\n      color: var(--six-input-color-hover);\n    }\n  }\n\n  &.textarea--focused:not(.textarea--disabled) {\n    background-color: var(--six-input-background-color-focus);\n    box-shadow: var(--six-input-focus-shadow);\n    border-color: var(--six-input-border-color-focus);\n    color: var(--six-input-color-focus);\n\n    .textarea__control {\n      color: var(--six-input-color-focus);\n    }\n  }\n\n  &.textarea--disabled {\n    background-color: var(--six-input-background-color-disabled);\n    border-color: var(--six-input-border-color-disabled);\n    cursor: not-allowed;\n\n    .textarea__control {\n      color: var(--six-input-color-disabled);\n\n      &::placeholder {\n        color: var(--six-input-placeholder-color-disabled);\n      }\n    }\n  }\n}\n\n.textarea__control {\n  flex: 1 1 auto;\n  height: calc(var(--height) - 2 * var(--six-border-width));\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  line-height: 1.4;\n  color: var(--sl-input-color);\n  border: none;\n  background: none;\n  box-shadow: none;\n  cursor: inherit;\n  -webkit-appearance: none;\n\n  &::-webkit-search-decoration,\n  &::-webkit-search-cancel-button,\n  &::-webkit-search-results-button,\n  &::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n\n  &::placeholder {\n    color: var(--six-input-placeholder-color);\n    user-select: none;\n  }\n\n  &:focus {\n    outline: none;\n  }\n}\n\n.textarea--invalid:not(.textarea--disabled):not(.textarea--focused) {\n  border-color: var(--six-input-border-color-danger);\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Size modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.textarea--small {\n  border-radius: var(--six-input-border-radius-small);\n  font-size: var(--six-input-font-size-small);\n\n  .textarea__control {\n    padding: 0.5em var(--six-input-spacing-small);\n  }\n}\n\n.textarea--medium {\n  border-radius: var(--six-input-border-radius-medium);\n  font-size: var(--six-input-font-size-medium);\n\n  .textarea__control {\n    padding: 0.5em var(--six-input-spacing-medium);\n  }\n}\n\n.textarea--large {\n  border-radius: var(--six-input-border-radius-large);\n  font-size: var(--six-input-font-size-large);\n\n  .textarea__control {\n    padding: 0.5em var(--six-input-spacing-large);\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Resize types\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.textarea--resize-none .textarea__control {\n  resize: none;\n}\n\n.textarea--resize-vertical .textarea__control {\n  resize: vertical;\n}\n\n.textarea--resize-auto .textarea__control {\n  height: auto;\n  resize: none;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\nimport { EventListeners } from '../../utils/event-listeners';\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 label - The textarea'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 textarea label.\n * @part textarea - The textarea control.\n * @part help-text - The textarea help text.\n */\n@Component({\n  tag: 'six-textarea',\n  styleUrl: 'six-textarea.scss',\n  shadow: true,\n})\nexport class SixTextarea {\n  private inputId = `textarea-${++id}`;\n  private labelId = `textarea-label-${id}`;\n  private helpTextId = `textarea-help-text-${id}`;\n  private errorTextId = `input-error-text-${id}`;\n  private nativeTextarea?: HTMLTextAreaElement;\n  private eventListeners = new EventListeners();\n  private resizeObserver = new ResizeObserver(() => this.setTextareaHeight());\n\n  @Element() host!: HTMLSixTextareaElement;\n\n  @State() hasFocus = false;\n  @State() hasHelpTextSlot = false;\n  @State() hasLabelSlot = false;\n  @State() hasErrorTextSlot = false;\n\n  /** The textarea's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** The textarea's name attribute. */\n  @Prop({ reflect: true }) name = '';\n\n  /** The textarea's value attribute. */\n  @Prop({ mutable: true, reflect: true }) value = '';\n\n  /** The textarea's help text. Alternatively, you can use the help-text slot. */\n  @Prop() helpText = '';\n\n  /** The textarea's placeholder text. */\n  @Prop() placeholder?: string;\n\n  /** The number of rows to display by default. */\n  @Prop() rows = 4;\n\n  /** Controls how the textarea can be resized. */\n  @Prop() resize: 'none' | 'vertical' | 'auto' = 'vertical';\n\n  /** Set to true to disable the textarea. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Set to true for a readonly textarea. */\n  @Prop({ reflect: true }) readonly = false;\n\n  /** The minimum length of input that will be considered valid. */\n  @Prop({ reflect: true }) minlength?: number;\n\n  /** The maximum length of input that will be considered valid. */\n  @Prop({ reflect: true }) maxlength?: number;\n\n  /** Set to true to show an asterisk beneath the label. */\n  @Prop() required = false;\n\n  /** The label text. */\n  @Prop() label = '';\n\n  /** The error message shown, if `invalid` is set to true.  */\n  @Prop() errorText: string | string[] = '';\n\n  /** The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 */\n  @Prop() errorTextCount?: number;\n\n  /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */\n  @Prop({ reflect: true }) invalid = false;\n\n  /** The textarea's autocaptialize attribute. */\n  @Prop() autocapitalize = 'off';\n\n  /** The textarea's autocorrect attribute. */\n  @Prop() autocorrect: 'on' | 'off' = 'off';\n\n  /** The textarea's autocomplete attribute. */\n  @Prop() autocomplete = 'off';\n\n  /** The textarea's autofocus attribute. */\n  @Prop() autofocus = false;\n\n  /** The textarea's spellcheck attribute. */\n  @Prop() spellcheck = false;\n\n  /** The textarea's inputmode attribute. */\n  @Prop() inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';\n\n  /** Emitted when the control's value changes. Access the new value via event.target.value. */\n  @Event({ eventName: 'six-textarea-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control receives input. Access the new value via event.target.value. */\n  @Event({ eventName: 'six-textarea-input' }) sixInput!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control gains focus. */\n  @Event({ eventName: 'six-textarea-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control loses focus. Access the new value via event.target.value. */\n  @Event({ eventName: 'six-textarea-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n  @Watch('helpText')\n  @Watch('errorText')\n  @Watch('label')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  @Watch('rows')\n  handleRowsChange() {\n    this.setTextareaHeight();\n  }\n\n  @Watch('value')\n  handleValueChange() {\n    this.value = this.getValue();\n    if (this.nativeTextarea != null) {\n      if (this.nativeTextarea.value !== this.value) {\n        this.nativeTextarea.value = this.value;\n      }\n    }\n  }\n\n  connectedCallback() {\n    this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.forward('six-textarea-input', 'input', this.host);\n    this.eventListeners.forward('six-textarea-change', 'change', this.host);\n    this.eventListeners.forward('six-textarea-focus', 'focus', this.host);\n    this.eventListeners.forward('six-textarea-blur', 'blur', this.host);\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  componentDidLoad() {\n    this.setTextareaHeight();\n    if (this.nativeTextarea != null) {\n      this.resizeObserver.observe(this.nativeTextarea);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.nativeTextarea != null) {\n      this.resizeObserver.unobserve(this.nativeTextarea);\n    }\n    this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.removeAll();\n  }\n\n  /** Sets focus on the textarea. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.nativeTextarea?.focus(options);\n  }\n\n  /** Removes focus fromt the textarea. */\n  @Method()\n  async removeFocus() {\n    this.nativeTextarea?.blur();\n  }\n\n  /** Selects all the text in the input. */\n  @Method()\n  async select() {\n    return this.nativeTextarea?.select();\n  }\n\n  /** Sets the start and end positions of the text selection (0-based). */\n  @Method()\n  async setSelectionRange(\n    selectionStart: number,\n    selectionEnd: number,\n    selectionDirection: 'forward' | 'backward' | 'none' = 'none'\n  ) {\n    return this.nativeTextarea?.setSelectionRange(selectionStart, selectionEnd, selectionDirection);\n  }\n\n  /** Replaces a range of text with a new string. */\n  @Method()\n  async setRangeText(\n    replacement: string,\n    start: number,\n    end: number,\n    selectMode: 'select' | 'start' | 'end' | 'preserve' = 'preserve'\n  ) {\n    if (this.nativeTextarea == null) return;\n\n    this.nativeTextarea.setRangeText(replacement, start, end, selectMode);\n    if (this.getValue() !== this.nativeTextarea.value) {\n      this.value = this.nativeTextarea.value;\n      this.setTextareaHeight();\n      this.sixChange.emit();\n      this.sixInput.emit();\n    }\n  }\n\n  private handleChange = () => {\n    if (this.nativeTextarea != null) {\n      this.value = this.nativeTextarea.value;\n      this.sixChange.emit();\n    }\n  };\n\n  private handleInput = () => {\n    if (this.nativeTextarea != null) {\n      this.value = this.nativeTextarea.value;\n      this.setTextareaHeight();\n      this.sixInput.emit();\n    }\n  };\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.sixBlur.emit();\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.sixFocus.emit();\n  };\n\n  private handleSlotChange = () => {\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n    this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n    this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n  };\n\n  private setTextareaHeight() {\n    if (this.nativeTextarea == null) return;\n\n    if (this.resize === 'auto') {\n      this.nativeTextarea.style.height = 'auto';\n      this.nativeTextarea.style.height = this.nativeTextarea.scrollHeight + 'px';\n    } else {\n      (this.nativeTextarea.style.height as string | undefined) = undefined;\n    }\n  }\n\n  private getValue(): string {\n    return (this.value ?? '').toString();\n  }\n\n  render() {\n    return (\n      <FormControl\n        inputId={this.inputId}\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        errorTextId={this.errorTextId}\n        errorText={this.errorText}\n        errorTextCount={this.errorTextCount}\n        hasErrorTextSlot={this.hasErrorTextSlot}\n        size={this.size}\n        disabled={this.disabled}\n        required={this.required}\n        displayError={this.invalid}\n      >\n        <div\n          part=\"base\"\n          class={{\n            textarea: true,\n\n            // Sizes\n            'textarea--small': this.size === 'small',\n            'textarea--medium': this.size === 'medium',\n            'textarea--large': this.size === 'large',\n\n            // States\n            'textarea--disabled': this.disabled,\n            'textarea--focused': this.hasFocus,\n            'textarea--empty': this.getValue().length === 0,\n            'textarea--invalid': this.invalid,\n\n            // Modifiers\n            'textarea--resize-none': this.resize === 'none',\n            'textarea--resize-vertical': this.resize === 'vertical',\n            'textarea--resize-auto': this.resize === 'auto',\n          }}\n        >\n          <textarea\n            part=\"textarea\"\n            ref={(el) => (this.nativeTextarea = el)}\n            id={this.inputId}\n            class=\"textarea__control\"\n            name={this.name}\n            placeholder={this.placeholder}\n            disabled={this.disabled}\n            readOnly={this.readonly}\n            rows={this.rows}\n            minLength={this.minlength}\n            maxLength={this.maxlength}\n            value={this.getValue()}\n            autoCapitalize={this.autocapitalize}\n            autoCorrect={this.autocorrect}\n            autoFocus={this.autofocus}\n            spellcheck={this.spellcheck}\n            required={this.required}\n            inputMode={this.inputmode}\n            aria-labelledby={this.labelId}\n            onChange={this.handleChange}\n            onInput={this.handleInput}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n          />\n        </div>\n      </FormControl>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/ui-library/p-6dd3f54c.entry.js

@@ -0,0 +1,2 @@
+import{r as i,c as t,h as o,g as r}from"./p-JoG9I7EO.js";import{F as e}from"./p-Dg9366Gk.js";import{h as s}from"./p-j3oIB5oT.js";import{E as n}from"./p-C4h4qpGl.js";import{s as l}from"./p-B1bClJZ6.js";const a=':host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none;text-align:left}.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:"*";transform:scale(1.1);margin-left:var(--six-spacing-xxx-small);position:absolute}.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;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}.input{display:inline-flex;align-items:stretch;justify-content:start;position:relative;width:100%;font-family:var(--six-font-family);font-weight:var(--six-input-font-weight);letter-spacing:var(--six-input-letter-spacing);background-color:var(--six-input-background-color);border:solid var(--six-border-width) var(--six-input-border-color);vertical-align:middle;overflow:hidden;transition:var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;cursor:text}.input--line{border:none;border-bottom:solid var(--six-border-width) var(--six-input-border-color)}.input:hover:not(.input--disabled){background-color:var(--six-input-background-color-hover);border-color:var(--six-input-border-color-hover)}.input:hover:not(.input--disabled) .input__control{color:var(--six-input-color-hover)}.input:hover.input--dropdown-search{border-color:transparent}.input--dropdown-search{border-color:transparent}.input--dropdown-search.input--focused{border-color:var(--six-input-border-color)}.input.input--focused:not(.input--disabled){background-color:var(--six-input-background-color-focus);border-bottom-color:var(--six-input-border-color-focus);box-shadow:0 1px 0 0 var(--six-input-border-color-focus)}.input.input--focused:not(.input--disabled):not(.input--line){border-color:var(--six-input-border-color-focus);box-shadow:var(--six-input-focus-shadow)}.input.input--focused:not(.input--disabled) .input__control{color:var(--six-input-color-focus)}.input.input--disabled{background-color:var(--six-input-background-color-disabled);border-color:var(--six-input-border-color-disabled);cursor:not-allowed}.input.input--disabled .input__control{color:var(--six-input-color-disabled)}.input.input--disabled .input__control::placeholder{color:var(--six-input-placeholder-color-disabled)}.input.input--invalid:not(.input--disabled):not(.input--focused){border-bottom-color:var(--six-input-border-color-danger)}.input.input--invalid:not(.input--disabled):not(.input--focused):not(.input--line){border-color:var(--six-input-border-color-danger)}.input__control{flex:1 1 auto;width:100%;font-family:inherit;font-size:inherit;font-weight:inherit;min-width:0;color:var(--six-input-color);border:none;background:none;box-shadow:none;padding:0;margin:0;cursor:inherit;-webkit-appearance:none}.input__control::-webkit-search-decoration,.input__control::-webkit-search-cancel-button,.input__control::-webkit-search-results-button,.input__control::-webkit-search-results-decoration{-webkit-appearance:none}.input__control:-webkit-autofill,.input__control:-webkit-autofill:hover,.input__control:-webkit-autofill:focus,.input__control:-webkit-autofill:active{box-shadow:0 0 0 var(--six-height-large) var(--six-input-background-color-hover) inset !important;-webkit-text-fill-color:var(--six-color-primary-500)}.input__control::placeholder{color:var(--six-input-placeholder-color);user-select:none}.input__control:focus{outline:none}.input__control::-ms-reveal{display:none}.input__prefix,.input__suffix{display:inline-flex;flex:0 0 auto;align-items:center;cursor:default}.input__prefix ::slotted(six-icon),.input__suffix ::slotted(six-icon){color:var(--six-input-icon-color)}.input.input--disabled ::slotted(six-icon){cursor:not-allowed}.input--small{border-radius:var(--six-input-border-radius-small);font-size:var(--six-input-font-size-small);height:var(--six-height-small)}.input--small .input__control{height:calc(var(--six-height-small) - var(--six-border-width) * 2);margin:0 var(--six-input-spacing-small)}.input--small .input__control__prefix{margin:0 var(--six-input-prefix-spacing-small)}.input--small .input__clear,.input--small .input__password-toggle{margin-right:var(--six-input-spacing-small)}.input--small .input__prefix ::slotted(*){margin-left:var(--six-input-prefix-spacing-small)}.input--small .input__suffix ::slotted(*){margin-right:var(--six-input-prefix-spacing-small)}.input--medium{border-radius:var(--six-input-border-radius-medium);font-size:var(--six-input-font-size-medium);height:var(--six-height-medium)}.input--medium .input__control{height:calc(var(--six-height-medium) - var(--six-border-width) * 2);margin:0 var(--six-input-spacing-medium)}.input--medium .input__control__prefix{margin:0 var(--six-input-prefix-spacing-medium)}.input--medium .input__clear,.input--medium .input__password-toggle{margin-right:var(--six-input-spacing-medium)}.input--medium .input__prefix ::slotted(*){margin-left:var(--six-input-prefix-spacing-medium)}.input--medium .input__suffix ::slotted(*){margin-right:var(--six-input-prefix-spacing-medium)}.input--large{border-radius:var(--six-input-border-radius-large);font-size:var(--six-input-font-size-large);height:var(--six-height-large)}.input--large .input__control{height:calc(var(--six-height-large) - var(--six-border-width) * 2);margin:0 var(--six-input-spacing-large)}.input--large .input__control__prefix{margin:0 var(--six-input-prefix-spacing-large)}.input--large .input__clear,.input--large .input__password-toggle{margin-right:var(--six-input-spacing-large)}.input--large .input__prefix ::slotted(*){margin-left:var(--six-input-prefix-spacing-large)}.input--large .input__suffix ::slotted(*){margin-right:var(--six-input-prefix-spacing-large)}.input--pill.input--small{border-radius:var(--six-height-small)}.input--pill.input--medium{border-radius:var(--six-height-medium)}.input--pill.input--large{border-radius:var(--six-height-large)}.input__clear,.input__password-toggle{display:inline-flex;align-items:center;font-size:inherit;color:var(--six-input-icon-color);border:none;background:none;padding:0;transition:var(--six-transition-fast) color;cursor:pointer}.input__clear:hover,.input__password-toggle:hover{color:var(--six-input-icon-color-hover)}.input__clear:focus,.input__password-toggle:focus{outline:none}.input--empty .input__clear{visibility:hidden}';const p={large:"medium",medium:"small",small:"xSmall"};let u=0;const h=class{constructor(o){i(this,o);this.sixChange=t(this,"six-input-change");this.sixClear=t(this,"six-input-clear");this.sixInput=t(this,"six-input-input");this.sixFocus=t(this,"six-input-focus");this.sixBlur=t(this,"six-input-blur");this.inputId=`input-${++u}`;this.labelId=`input-label-${u}`;this.helpTextId=`input-help-text-${u}`;this.errorTextId=`input-error-text-${u}`;this.eventListeners=new n;this.hasFocus=false;this.hasHelpTextSlot=false;this.hasLabelSlot=false;this.hasErrorSlot=false;this.isPasswordVisible=false;this.type="text";this.size="medium";this.name="";this.value="";this.pill=false;this.helpText="";this.disabled=false;this.readonly=false;this.dropdownSearch=false;this.required=false;this.autocapitalize="off";this.autocorrect="off";this.autocomplete="off";this.autofocus=false;this.spellcheck=false;this.label="";this.errorText="";this.invalid=false;this.clearable=false;this.togglePassword=false;this.line=false;this.handleChange=i=>{i.stopPropagation();if(this.nativeInput!=null){this.value=this.nativeInput.value;this.sixChange.emit()}};this.handleInput=i=>{i.stopPropagation();if(this.nativeInput!=null){this.value=this.nativeInput.value;this.sixInput.emit()}};this.handleBlur=()=>{this.hasFocus=false;this.sixBlur.emit()};this.handleFocus=()=>{this.hasFocus=true;this.sixFocus.emit()};this.handleClearClick=i=>{this.value="";this.sixClear.emit();this.sixInput.emit();this.sixChange.emit();if(this.nativeInput!=null){this.nativeInput.focus()}i.stopPropagation()};this.handleKeyDown=i=>{const t=i.metaKey||i.ctrlKey||i.shiftKey||i.altKey;if(i.key==="Enter"&&!t){setTimeout((()=>{if(!i.defaultPrevented&&!i.isComposing){l(this.host)}}))}};this.handlePasswordToggle=()=>{this.isPasswordVisible=!this.isPasswordVisible};this.handleSlotChange=()=>{this.hasHelpTextSlot=s(this.host,"help-text");this.hasLabelSlot=s(this.host,"label");this.hasErrorSlot=s(this.host,"error-text")}}handleLabelChange(){this.handleSlotChange()}handleValueChange(){this.value=this.getValue();if(this.nativeInput!=null&&this.nativeInput.value!==this.value){this.nativeInput.value=this.value}}connectedCallback(){var i;(i=this.host.shadowRoot)===null||i===void 0?void 0:i.addEventListener("slotchange",this.handleSlotChange);this.eventListeners.forward("six-input-input","input",this.host);this.eventListeners.forward("six-input-change","change",this.host);this.eventListeners.forward("six-input-focus","focus",this.host);this.eventListeners.forward("six-input-blur","blur",this.host)}componentWillLoad(){this.handleSlotChange()}disconnectedCallback(){var i;(i=this.host.shadowRoot)===null||i===void 0?void 0:i.removeEventListener("slotchange",this.handleSlotChange);this.eventListeners.removeAll()}async setFocus(i){var t;(t=this.nativeInput)===null||t===void 0?void 0:t.focus(i)}async removeFocus(){var i;(i=this.nativeInput)===null||i===void 0?void 0:i.blur()}async select(){var i;return(i=this.nativeInput)===null||i===void 0?void 0:i.select()}async setSelectionRange(i,t,o="none"){var r;return(r=this.nativeInput)===null||r===void 0?void 0:r.setSelectionRange(i,t,o)}async getSelectionRange(){var i,t,o,r,e,s;return{selectionStart:(t=(i=this.nativeInput)===null||i===void 0?void 0:i.selectionStart)!==null&&t!==void 0?t:undefined,selectionEnd:(r=(o=this.nativeInput)===null||o===void 0?void 0:o.selectionEnd)!==null&&r!==void 0?r:undefined,selectionDirection:(s=(e=this.nativeInput)===null||e===void 0?void 0:e.selectionDirection)!==null&&s!==void 0?s:undefined}}async setRangeText(i,t,o,r="preserve"){if(this.nativeInput==null){return}this.nativeInput.setRangeText(i,t,o,r);if(this.getValue()!==this.nativeInput.value){this.value=this.nativeInput.value;this.sixChange.emit();this.sixInput.emit()}}getValue(){var i;return((i=this.value)!==null&&i!==void 0?i:"").toString()}render(){return o(e,{key:"b88afe1aa2622eee58a8d66257cc5a0983354b25",inputId:this.inputId,label:this.label,labelId:this.labelId,hasLabelSlot:this.hasLabelSlot,helpTextId:this.helpTextId,helpText:this.helpText,hasHelpTextSlot:this.hasHelpTextSlot,errorTextId:this.errorTextId,errorText:this.errorText,errorTextCount:this.errorTextCount,hasErrorTextSlot:this.hasErrorSlot,size:this.size,disabled:this.disabled,required:this.required,displayError:this.invalid},o("div",{key:"b07352c5f2d4480a4b2919854e154faeac2d9f0f",part:"base",class:{input:true,"input--small":this.size==="small","input--medium":this.size==="medium","input--large":this.size==="large","input--line":this.line,"input--pill":this.pill,"input--disabled":this.disabled,"input--dropdown-search":this.dropdownSearch,"input--focused":this.hasFocus,"input--empty":this.getValue().length===0,"input--invalid":this.invalid}},o("span",{key:"37acf6498894ed16984dc35615387a9d7cb634d3",part:"prefix",class:"input__prefix"},o("slot",{key:"88e70802193d8925f03d58ea964a0bb9034a74ab",name:"prefix"})),o("input",{key:"bdeabe4cc23fc68a3a9c25307cf37ca2d77d6a5f",part:"input",ref:i=>this.nativeInput=i,id:this.inputId,size:1,class:{input__control:true,input__control__prefix:s(this.host,"prefix")},type:this.type==="password"&&this.isPasswordVisible?"text":this.type,name:this.name,placeholder:this.placeholder,disabled:this.disabled,readonly:this.readonly,minLength:this.minlength,maxLength:this.maxlength,min:this.min,max:this.max,step:this.step,value:this.getValue(),autoCapitalize:this.autocapitalize,autoComplete:this.autocomplete,autoCorrect:this.autocorrect,autoFocus:this.autofocus,spellcheck:this.spellcheck,pattern:this.pattern,required:this.required,inputMode:this.inputmode,"aria-labelledby":this.labelId,"aria-describedby":this.helpTextId,"aria-invalid":this.invalid?"true":"false",onChange:this.handleChange,onInput:this.handleInput,onFocus:this.handleFocus,onBlur:this.handleBlur,onKeyDown:this.handleKeyDown,"data-testid":"input-control"}),this.clearable&&!this.disabled&&o("button",{key:"e7f5713eec0bf5bd6b69335f60793071309770dc",part:"clear-button",class:"input__clear",type:"button",onClick:this.handleClearClick,tabindex:"-1","data-testid":"input-clear-button"},o("slot",{key:"9cef48b67afbb2a833a7dff0ffa3b8ce153c11b2",name:"clear-icon"},o("six-icon",{key:"fa08350fb58063c871ef9f64d3d3d5a9dd8fbdec",size:p[this.size]},"clear"))),this.togglePassword&&o("button",{key:"aacef765fcbc09b9479737d620568a5f78a884e5",part:"password-toggle-button",class:"input__password-toggle",type:"button",onClick:this.handlePasswordToggle,tabindex:"-1"},this.isPasswordVisible?o("slot",{name:"show-password-icon"},o("six-icon",{size:p[this.size]},"visibility_off")):o("slot",{name:"hide-password-icon"},o("six-icon",{size:p[this.size]},"visibility"))),o("span",{key:"0e8461e5897ab4380f67e207d1c1f3d9065b00b7",part:"suffix",class:"input__suffix"},o("slot",{key:"a7634ecf343884a7197b2edb82a55863af8faf5b",name:"suffix"}))))}get host(){return r(this)}static get watchers(){return{helpText:["handleLabelChange"],errorText:["handleLabelChange"],label:["handleLabelChange"],value:["handleValueChange"]}}};h.style=a;export{h as six_input};
+//# sourceMappingURL=p-6dd3f54c.entry.js.map

package/dist/ui-library/p-6dd3f54c.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sixInputCss","ICON_SIZES","large","medium","small","id","SixInput","constructor","hostRef","this","inputId","labelId","helpTextId","errorTextId","eventListeners","EventListeners","hasFocus","hasHelpTextSlot","hasLabelSlot","hasErrorSlot","isPasswordVisible","type","size","name","value","pill","helpText","disabled","readonly","dropdownSearch","required","autocapitalize","autocorrect","autocomplete","autofocus","spellcheck","label","errorText","invalid","clearable","togglePassword","line","handleChange","event","stopPropagation","nativeInput","sixChange","emit","handleInput","sixInput","handleBlur","sixBlur","handleFocus","sixFocus","handleClearClick","sixClear","focus","handleKeyDown","hasModifier","metaKey","ctrlKey","shiftKey","altKey","key","setTimeout","defaultPrevented","isComposing","submitForm","host","handlePasswordToggle","handleSlotChange","hasSlot","handleLabelChange","handleValueChange","getValue","connectedCallback","_a","shadowRoot","addEventListener","forward","componentWillLoad","disconnectedCallback","removeEventListener","removeAll","setFocus","options","removeFocus","blur","select","setSelectionRange","selectionStart","selectionEnd","selectionDirection","getSelectionRange","_b","undefined","_d","_c","_f","_e","setRangeText","replacement","start","end","selectMode","toString","render","h","FormControl","errorTextCount","hasErrorTextSlot","displayError","part","class","input","length","ref","el","input__control","input__control__prefix","placeholder","minLength","minlength","maxLength","maxlength","min","max","step","autoCapitalize","autoComplete","autoCorrect","autoFocus","pattern","inputMode","inputmode","onChange","onInput","onFocus","onBlur","onKeyDown","onClick","tabindex"],"sources":["src/components/six-input/six-input.scss?tag=six-input&encapsulation=shadow","src/components/six-input/six-input.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n  display: block;\n}\n\n.input {\n  display: inline-flex;\n  align-items: stretch;\n  justify-content: start;\n  position: relative;\n  width: 100%;\n  font-family: var(--six-font-family);\n  font-weight: var(--six-input-font-weight);\n  letter-spacing: var(--six-input-letter-spacing);\n  background-color: var(--six-input-background-color);\n  border: solid var(--six-border-width) var(--six-input-border-color);\n  vertical-align: middle;\n  overflow: hidden;\n  transition:\n    var(--six-transition-fast) color,\n    var(--six-transition-fast) border,\n    var(--six-transition-fast) box-shadow;\n  cursor: text;\n\n  &--line {\n    border: none;\n    border-bottom: solid var(--six-border-width) var(--six-input-border-color);\n  }\n\n  &:hover:not(.input--disabled) {\n    background-color: var(--six-input-background-color-hover);\n    border-color: var(--six-input-border-color-hover);\n\n    .input__control {\n      color: var(--six-input-color-hover);\n    }\n  }\n\n  &:hover.input--dropdown-search {\n    border-color: transparent;\n  }\n\n  &--dropdown-search {\n    border-color: transparent;\n  }\n\n  &--dropdown-search.input--focused {\n    border-color: var(--six-input-border-color);\n  }\n\n  &.input--focused:not(.input--disabled) {\n    background-color: var(--six-input-background-color-focus);\n\n    border-bottom-color: var(--six-input-border-color-focus);\n    box-shadow: 0 1px 0 0 var(--six-input-border-color-focus);\n\n    &:not(.input--line) {\n      border-color: var(--six-input-border-color-focus);\n      box-shadow: var(--six-input-focus-shadow);\n    }\n\n    .input__control {\n      color: var(--six-input-color-focus);\n    }\n  }\n\n  &.input--disabled {\n    background-color: var(--six-input-background-color-disabled);\n    border-color: var(--six-input-border-color-disabled);\n    cursor: not-allowed;\n\n    .input__control {\n      color: var(--six-input-color-disabled);\n\n      &::placeholder {\n        color: var(--six-input-placeholder-color-disabled);\n      }\n    }\n  }\n\n  &.input--invalid:not(.input--disabled):not(.input--focused) {\n    border-bottom-color: var(--six-input-border-color-danger);\n\n    &:not(.input--line) {\n      border-color: var(--six-input-border-color-danger);\n    }\n  }\n}\n\n.input__control {\n  flex: 1 1 auto;\n  width: 100%;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  min-width: 0;\n  color: var(--six-input-color);\n  border: none;\n  background: none;\n  box-shadow: none;\n  padding: 0;\n  margin: 0;\n  cursor: inherit;\n  -webkit-appearance: none;\n\n  &::-webkit-search-decoration,\n  &::-webkit-search-cancel-button,\n  &::-webkit-search-results-button,\n  &::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n\n  &:-webkit-autofill,\n  &:-webkit-autofill:hover,\n  &:-webkit-autofill:focus,\n  &:-webkit-autofill:active {\n    box-shadow: 0 0 0 var(--six-height-large) var(--six-input-background-color-hover) inset !important;\n    -webkit-text-fill-color: var(--six-color-primary-500);\n  }\n\n  &::placeholder {\n    color: var(--six-input-placeholder-color);\n    user-select: none;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &::-ms-reveal {\n    display: none;\n  }\n}\n\n.input__prefix,\n.input__suffix {\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  cursor: default;\n\n  ::slotted(six-icon) {\n    color: var(--six-input-icon-color);\n  }\n}\n\n.input {\n  &.input--disabled {\n    ::slotted(six-icon) {\n      cursor: not-allowed;\n    }\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Size modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.input--small {\n  border-radius: var(--six-input-border-radius-small);\n  font-size: var(--six-input-font-size-small);\n  height: var(--six-height-small);\n\n  .input__control {\n    height: calc(var(--six-height-small) - var(--six-border-width) * 2);\n    margin: 0 var(--six-input-spacing-small);\n  }\n\n  .input__control__prefix {\n    margin: 0 var(--six-input-prefix-spacing-small);\n  }\n\n  .input__clear,\n  .input__password-toggle {\n    margin-right: var(--six-input-spacing-small);\n  }\n\n  .input__prefix ::slotted(*) {\n    margin-left: var(--six-input-prefix-spacing-small);\n  }\n\n  .input__suffix ::slotted(*) {\n    margin-right: var(--six-input-prefix-spacing-small);\n  }\n}\n\n.input--medium {\n  border-radius: var(--six-input-border-radius-medium);\n  font-size: var(--six-input-font-size-medium);\n  height: var(--six-height-medium);\n\n  .input__control {\n    height: calc(var(--six-height-medium) - var(--six-border-width) * 2);\n    margin: 0 var(--six-input-spacing-medium);\n  }\n\n  .input__control__prefix {\n    margin: 0 var(--six-input-prefix-spacing-medium);\n  }\n\n  .input__clear,\n  .input__password-toggle {\n    margin-right: var(--six-input-spacing-medium);\n  }\n\n  .input__prefix ::slotted(*) {\n    margin-left: var(--six-input-prefix-spacing-medium);\n  }\n\n  .input__suffix ::slotted(*) {\n    margin-right: var(--six-input-prefix-spacing-medium);\n  }\n}\n\n.input--large {\n  border-radius: var(--six-input-border-radius-large);\n  font-size: var(--six-input-font-size-large);\n  height: var(--six-height-large);\n\n  .input__control {\n    height: calc(var(--six-height-large) - var(--six-border-width) * 2);\n    margin: 0 var(--six-input-spacing-large);\n  }\n\n  .input__control__prefix {\n    margin: 0 var(--six-input-prefix-spacing-large);\n  }\n\n  .input__clear,\n  .input__password-toggle {\n    margin-right: var(--six-input-spacing-large);\n  }\n\n  .input__prefix ::slotted(*) {\n    margin-left: var(--six-input-prefix-spacing-large);\n  }\n\n  .input__suffix ::slotted(*) {\n    margin-right: var(--six-input-prefix-spacing-large);\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pill modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.input--pill {\n  &.input--small {\n    border-radius: var(--six-height-small);\n  }\n\n  &.input--medium {\n    border-radius: var(--six-height-medium);\n  }\n\n  &.input--large {\n    border-radius: var(--six-height-large);\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Clearable + Password Toggle\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.input__clear,\n.input__password-toggle {\n  display: inline-flex;\n  align-items: center;\n  font-size: inherit;\n  color: var(--six-input-icon-color);\n  border: none;\n  background: none;\n  padding: 0;\n  transition: var(--six-transition-fast) color;\n  cursor: pointer;\n\n  &:hover {\n    color: var(--six-input-icon-color-hover);\n  }\n\n  &:focus {\n    outline: none;\n  }\n}\n\n.input--empty .input__clear {\n  visibility: hidden;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { submitForm } from '../../utils/form';\n\nconst ICON_SIZES: Record<'small' | 'medium' | 'large', 'xSmall' | 'small' | 'medium'> = {\n  large: 'medium',\n  medium: 'small',\n  small: 'xSmall',\n};\n\nexport type SelectionRangeDirection = 'forward' | 'backward' | 'none';\nexport type SelectionRange = {\n  selectionStart: number | undefined;\n  selectionEnd: number | undefined;\n  selectionDirection: SelectionRangeDirection | undefined;\n};\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 label - The input's label. Alternatively, you can use the label prop.\n * @slot prefix - Used to prepend an icon or similar element to the input.\n * @slot suffix - Used to append an icon or similar element to the input.\n * @slot clear-icon - An icon to use in lieu of the default clear icon.\n * @slot show-password-icon - An icon to use in lieu of the default show password icon.\n * @slot hide-password-icon - An icon to use in lieu of the default hide password icon.\n * @slot help-text - Help text that describes how to use the input. Alternatively, you can use the help-text prop.\n * @slot error-text - Error text that is shown when the status is set to invalid. 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, input, error-text and help-text.\n * @part label - The input label.\n * @part input - The input control.\n * @part prefix - The input prefix container.\n * @part clear-button - The clear button.\n * @part password-toggle-button - The password toggle button.\n * @part suffix - The input suffix container.\n * @part help-text - The input help text.\n * @part error-text - The input error text.\n */\n\n@Component({\n  tag: 'six-input',\n  styleUrl: 'six-input.scss',\n  shadow: true,\n})\nexport class SixInput {\n  private inputId = `input-${++id}`;\n  private labelId = `input-label-${id}`;\n  private helpTextId = `input-help-text-${id}`;\n  private errorTextId = `input-error-text-${id}`;\n  private nativeInput?: HTMLInputElement;\n  private eventListeners = new EventListeners();\n\n  @Element() host!: HTMLSixInputElement;\n\n  @State() hasFocus = false;\n  @State() hasHelpTextSlot = false;\n  @State() hasLabelSlot = false;\n  @State() hasErrorSlot = false;\n  @State() isPasswordVisible = false;\n\n  /** The input's type. */\n  @Prop({ reflect: true }) type: 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' = 'text';\n\n  /** The input's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** The input's name attribute. */\n  @Prop({ reflect: true }) name = '';\n\n  /** The input's value attribute. */\n  @Prop({ mutable: true, reflect: true }) value = '';\n\n  /** Set to true to draw a pill-style input with rounded edges. */\n  @Prop({ reflect: true }) pill = false;\n\n  /** The input's help text. Alternatively, you can use the help-text slot. */\n  @Prop() helpText = '';\n\n  /** The input's placeholder text. */\n  @Prop() placeholder?: string;\n\n  /** Set to true to disable the input. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Set to true to make the input readonly. */\n  @Prop({ reflect: true }) readonly = false;\n\n  /** The minimum length of input that will be considered valid. */\n  @Prop({ reflect: true }) minlength?: number;\n\n  /** The maximum length of input that will be considered valid. */\n  @Prop({ reflect: true }) maxlength?: number;\n\n  /** The input's minimum value. */\n  @Prop({ reflect: true }) min?: number;\n\n  /** The input's maximum value. */\n  @Prop({ reflect: true }) max?: number;\n\n  /** The input's step attribute. */\n  @Prop({ reflect: true }) step?: number;\n\n  /** A pattern to validate input against. */\n  @Prop({ reflect: true }) pattern?: string;\n\n  /**\n   * Internal: Styles the input for the dropdown filter search.\n   */\n  @Prop() dropdownSearch = false;\n\n  /** Set to true to show an asterisk beneath the label. */\n  @Prop() required = false;\n\n  /** The input's autocaptialize attribute. */\n  @Prop() autocapitalize = 'off';\n\n  /** The input's autocorrect attribute. */\n  @Prop() autocorrect: 'on' | 'off' = 'off';\n\n  /** The input's autocomplete attribute. */\n  @Prop() autocomplete = 'off';\n\n  /** The input's autofocus attribute. */\n  @Prop() autofocus = false;\n\n  /** Enables spell checking on the input. */\n  @Prop() spellcheck = false;\n\n  /** The label text. */\n  @Prop() label = '';\n\n  /** The error message shown, if `invalid` is set to true.  */\n  @Prop() errorText: string | string[] = '';\n\n  /** The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 */\n  @Prop() errorTextCount?: number;\n\n  /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */\n  @Prop({ reflect: true }) invalid = false;\n\n  /** Set to true to add a clear button when the input is populated. */\n  @Prop() clearable = false;\n\n  /** Set to true to add a password toggle button for password inputs. */\n  @Prop() togglePassword = false;\n\n  /** The input's inputmode attribute. */\n  @Prop() inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';\n\n  /** Set to render as line */\n  @Prop() line = false;\n\n  @Watch('helpText')\n  @Watch('errorText')\n  @Watch('label')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  @Watch('value')\n  handleValueChange() {\n    this.value = this.getValue();\n    if (this.nativeInput != null && this.nativeInput.value !== this.value) {\n      this.nativeInput.value = this.value;\n    }\n  }\n\n  /** Emitted when the control's value changes. Access the new value via event.target.value. */\n  @Event({ eventName: 'six-input-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the clear button is activated. */\n  @Event({ eventName: 'six-input-clear' }) sixClear!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control receives input. Access the new value via event.target.value.  */\n  @Event({ eventName: 'six-input-input' }) sixInput!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control gains focus. */\n  @Event({ eventName: 'six-input-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control loses focus. Access the new value via event.target.value. */\n  @Event({ eventName: 'six-input-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.forward('six-input-input', 'input', this.host);\n    this.eventListeners.forward('six-input-change', 'change', this.host);\n    this.eventListeners.forward('six-input-focus', 'focus', this.host);\n    this.eventListeners.forward('six-input-blur', 'blur', this.host);\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  disconnectedCallback() {\n    this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.removeAll();\n  }\n\n  /** Sets focus on the input. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.nativeInput?.focus(options);\n  }\n\n  /** Removes focus from the input. */\n  @Method()\n  async removeFocus() {\n    this.nativeInput?.blur();\n  }\n\n  /** Selects all the text in the input. */\n  @Method()\n  async select() {\n    return this.nativeInput?.select();\n  }\n\n  /** Sets the start and end positions of the text selection (0-based). */\n  @Method()\n  async setSelectionRange(\n    selectionStart: number,\n    selectionEnd: number,\n    selectionDirection: SelectionRangeDirection = 'none'\n  ) {\n    return this.nativeInput?.setSelectionRange(selectionStart, selectionEnd, selectionDirection);\n  }\n\n  /** Returns the start and end positions of the text selection */\n  @Method()\n  async getSelectionRange(): Promise<SelectionRange> {\n    return {\n      selectionStart: this.nativeInput?.selectionStart ?? undefined,\n      selectionEnd: this.nativeInput?.selectionEnd ?? undefined,\n      selectionDirection: this.nativeInput?.selectionDirection ?? undefined,\n    };\n  }\n\n  /** Replaces a range of text with a new string. */\n  @Method()\n  async setRangeText(\n    replacement: string,\n    start: number,\n    end: number,\n    selectMode: 'select' | 'start' | 'end' | 'preserve' = 'preserve'\n  ) {\n    if (this.nativeInput == null) {\n      return;\n    }\n    this.nativeInput.setRangeText(replacement, start, end, selectMode);\n    if (this.getValue() !== this.nativeInput.value) {\n      this.value = this.nativeInput.value;\n      this.sixChange.emit();\n      this.sixInput.emit();\n    }\n  }\n\n  private handleChange = (event: Event) => {\n    event.stopPropagation();\n    if (this.nativeInput != null) {\n      this.value = this.nativeInput.value;\n      this.sixChange.emit();\n    }\n  };\n\n  private handleInput = (event: Event) => {\n    event.stopPropagation();\n    if (this.nativeInput != null) {\n      this.value = this.nativeInput.value;\n      this.sixInput.emit();\n    }\n  };\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.sixBlur.emit();\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.sixFocus.emit();\n  };\n\n  private handleClearClick = (event: MouseEvent) => {\n    this.value = '';\n    this.sixClear.emit();\n    this.sixInput.emit();\n    this.sixChange.emit();\n    if (this.nativeInput != null) {\n      this.nativeInput.focus();\n    }\n    event.stopPropagation();\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n    if (event.key === 'Enter' && !hasModifier) {\n      setTimeout(() => {\n        if (!event.defaultPrevented && !event.isComposing) {\n          submitForm(this.host);\n        }\n      });\n    }\n  };\n\n  private handlePasswordToggle = () => {\n    this.isPasswordVisible = !this.isPasswordVisible;\n  };\n\n  private handleSlotChange = () => {\n    this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n    this.hasErrorSlot = hasSlot(this.host, 'error-text');\n  };\n\n  private getValue(): string {\n    return (this.value ?? '').toString();\n  }\n\n  render() {\n    return (\n      <FormControl\n        inputId={this.inputId}\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        errorTextId={this.errorTextId}\n        errorText={this.errorText}\n        errorTextCount={this.errorTextCount}\n        hasErrorTextSlot={this.hasErrorSlot}\n        size={this.size}\n        disabled={this.disabled}\n        required={this.required}\n        displayError={this.invalid}\n      >\n        <div\n          part=\"base\"\n          class={{\n            input: true,\n\n            // Sizes\n            'input--small': this.size === 'small',\n            'input--medium': this.size === 'medium',\n            'input--large': this.size === 'large',\n\n            // States\n            'input--line': this.line,\n            'input--pill': this.pill,\n            'input--disabled': this.disabled,\n            'input--dropdown-search': this.dropdownSearch,\n            'input--focused': this.hasFocus,\n            'input--empty': this.getValue().length === 0,\n            'input--invalid': this.invalid,\n          }}\n        >\n          <span part=\"prefix\" class=\"input__prefix\">\n            <slot name=\"prefix\" />\n          </span>\n\n          <input\n            part=\"input\"\n            ref={(el) => (this.nativeInput = el)}\n            id={this.inputId}\n            size={1} // needed for firefox to overrule the default of 20\n            class={{\n              input__control: true,\n              input__control__prefix: hasSlot(this.host, 'prefix'),\n            }}\n            type={this.type === 'password' && this.isPasswordVisible ? 'text' : this.type}\n            name={this.name}\n            placeholder={this.placeholder}\n            disabled={this.disabled}\n            readonly={this.readonly}\n            minLength={this.minlength}\n            maxLength={this.maxlength}\n            min={this.min}\n            max={this.max}\n            step={this.step}\n            value={this.getValue()}\n            autoCapitalize={this.autocapitalize}\n            autoComplete={this.autocomplete}\n            autoCorrect={this.autocorrect}\n            autoFocus={this.autofocus}\n            spellcheck={this.spellcheck}\n            pattern={this.pattern}\n            required={this.required}\n            inputMode={this.inputmode}\n            aria-labelledby={this.labelId}\n            aria-describedby={this.helpTextId}\n            aria-invalid={this.invalid ? 'true' : 'false'}\n            onChange={this.handleChange}\n            onInput={this.handleInput}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n            onKeyDown={this.handleKeyDown}\n            data-testid=\"input-control\"\n          />\n\n          {this.clearable && !this.disabled && (\n            <button\n              part=\"clear-button\"\n              class=\"input__clear\"\n              type=\"button\"\n              onClick={this.handleClearClick}\n              tabindex=\"-1\"\n              data-testid=\"input-clear-button\"\n            >\n              <slot name=\"clear-icon\">\n                <six-icon size={ICON_SIZES[this.size]}>clear</six-icon>\n              </slot>\n            </button>\n          )}\n\n          {this.togglePassword && (\n            <button\n              part=\"password-toggle-button\"\n              class=\"input__password-toggle\"\n              type=\"button\"\n              onClick={this.handlePasswordToggle}\n              tabindex=\"-1\"\n            >\n              {this.isPasswordVisible ? (\n                <slot name=\"show-password-icon\">\n                  <six-icon size={ICON_SIZES[this.size]}>visibility_off</six-icon>\n                </slot>\n              ) : (\n                <slot name=\"hide-password-icon\">\n                  <six-icon size={ICON_SIZES[this.size]}>visibility</six-icon>\n                </slot>\n              )}\n            </button>\n          )}\n\n          <span part=\"suffix\" class=\"input__suffix\">\n            <slot name=\"suffix\" />\n          </span>\n        </div>\n      </FormControl>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/ui-library/p-811ce2a0.entry.js

@@ -0,0 +1,2 @@
+import{r as i,c as o,h as e,g as r}from"./p-JoG9I7EO.js";import{E as t}from"./p-C4h4qpGl.js";const s=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{display:inline-block}.radio{display:inline-flex;align-items:center;font-family:var(--six-font-family);font-size:var(--six-input-font-size-medium);font-weight:var(--six-input-font-weight);color:var(--six-input-color);vertical-align:middle;cursor:pointer}.radio__icon{display:inline-flex;width:var(--six-selection-control-toggle-size);height:var(--six-selection-control-toggle-size)}.radio__icon svg{width:100%;height:100%}.radio__control{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--six-selection-control-toggle-size);height:var(--six-selection-control-toggle-size);border:solid var(--six-border-width) var(--six-input-border-color);border-radius:50%;background-color:var(--six-input-background-color);color:transparent;transition:var(--six-transition-fast) border-color, var(--six-transition-fast) background-color, var(--six-transition-fast) color, var(--six-transition-fast) box-shadow}.radio__control input[type=radio]{position:absolute;opacity:0;padding:0;margin:0;pointer-events:none}.radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover{border-color:var(--six-input-border-color-hover)}.radio--checked .radio__control{color:var(--six-selection-control-color);border-color:var(--six-selection-control-color)}.radio.radio--checked:not(.radio--disabled) .radio__control:hover{color:var(--six-input-border-color-focus);border-color:var(--six-input-border-color-focus)}.radio--disabled{cursor:not-allowed;color:var(--six-input-color-disabled)}.radio--disabled .radio__control{border-color:var(--six-input-border-color-disabled)}.radio--disabled.radio--checked .radio__control{color:var(--six-selection-control-color-disabled)}.radio__label{line-height:var(--six-selection-control-toggle-size);margin-left:0.5em;user-select:none}";let a=0;const l=class{constructor(e){i(this,e);this.sixBlur=o(this,"six-radio-blur");this.sixChange=o(this,"six-radio-change");this.sixFocus=o(this,"six-radio-focus");this.inputId=`radio-${++a}`;this.labelId=`radio-label-${a}`;this.eventListeners=new t;this.hasFocus=false;this.name="";this.value="on";this.disabled=false;this.checked=false;this.invalid=false;this.handleClick=()=>{if(this.nativeInput!=null){this.checked=this.nativeInput.checked;this.sixChange.emit()}};this.handleBlur=()=>{this.hasFocus=false;this.sixBlur.emit()};this.handleFocus=()=>{this.hasFocus=true;this.sixFocus.emit()};this.handleKeyDown=i=>{if(["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(i.key)){const o=this.getAllRadios().filter((i=>!i.disabled));const e=["ArrowUp","ArrowLeft"].includes(i.key)?-1:1;let r=o.indexOf(this.host)+e;if(r<0)r=o.length-1;if(r>o.length-1)r=0;this.getAllRadios().forEach((i=>i.checked=false));o[r].setFocus();o[r].checked=true;o[r].dispatchEvent(new CustomEvent("six-radio-change",{bubbles:true,cancelable:true}));i.preventDefault()}};this.handleMouseDown=i=>{var o;i.preventDefault();(o=this.nativeInput)===null||o===void 0?void 0:o.focus()}}handleCheckedChange(){if(this.checked){this.getSiblingRadios().forEach((i=>i.checked=false))}if(this.nativeInput!=null){this.nativeInput.checked=this.checked}}handleNameChange(i){if(this.nativeInput!=null){this.nativeInput.name=i}}connectedCallback(){this.eventListeners.forward("six-radio-change","change",this.host);this.eventListeners.forward("six-radio-blur","blur",this.host);this.eventListeners.forward("six-radio-focus","focus",this.host)}disconnectedCallback(){this.eventListeners.removeAll()}async setFocus(i){var o;(o=this.nativeInput)===null||o===void 0?void 0:o.focus(i)}async removeFocus(){var i;(i=this.nativeInput)===null||i===void 0?void 0:i.blur()}getAllRadios(){const i=this.host.closest("form")||document.body;if(this.name==="")return[];return[...i.querySelectorAll("six-radio")].filter((i=>i.name===this.name))}getSiblingRadios(){return this.getAllRadios().filter((i=>i!==this.host))}render(){return e("label",{key:"cdb722e8b78cf02f527d97b3dab6f0679b333c21",part:"base",class:{radio:true,"radio--checked":this.checked,"radio--disabled":this.disabled,"radio--focused":this.hasFocus},htmlFor:this.inputId,onKeyDown:this.handleKeyDown,onMouseDown:this.handleMouseDown},e("span",{key:"9c627a113fe27c340b7f6162d9bde328220c8960",part:"control",class:"radio__control"},e("span",{key:"2ce65408f6c88cb7396c480eba0cc2dd663a3c85",part:"checked-icon",class:"radio__icon"},e("svg",{key:"f4aac67ee8b4a5fb2af26305799b6648e496941e",viewBox:"0 0 16 16"},e("g",{key:"f1bc8651eae70a2ede2dcbf5f48f8237d9f883e6",stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},e("g",{key:"7ffa14023971330ae34e041871c0db912789999a",fill:"currentColor"},e("circle",{key:"10d6f37d1227677ba8044a8bffd89f8828e54e0d",cx:"8",cy:"8",r:"5"}))))),e("input",{key:"55ae32be4a36646c17d1238e486df0a483db2650",ref:i=>this.nativeInput=i,id:this.inputId,type:"radio",name:this.name,value:this.value,checked:this.checked,disabled:this.disabled,role:"radio","aria-checked":this.checked?"true":"false","aria-labelledby":this.labelId,onClick:this.handleClick,onBlur:this.handleBlur,onFocus:this.handleFocus})),e("span",{key:"08128b78c44c561e9dc97f840bacf46059c2483b",part:"label",id:this.labelId,class:"radio__label"},e("slot",{key:"9dd8bcf11566bd74d7b8e91a71cd276947562426"})))}get host(){return r(this)}static get watchers(){return{checked:["handleCheckedChange"],name:["handleNameChange"]}}};l.style=s;export{l as six_radio};
+//# sourceMappingURL=p-811ce2a0.entry.js.map

package/dist/ui-library/p-811ce2a0.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sixRadioCss","id","SixRadio","constructor","hostRef","this","inputId","labelId","eventListeners","EventListeners","hasFocus","name","value","disabled","checked","invalid","handleClick","nativeInput","sixChange","emit","handleBlur","sixBlur","handleFocus","sixFocus","handleKeyDown","keyboardEvent","includes","key","radios","getAllRadios","filter","radio","incr","index","indexOf","host","length","forEach","setFocus","dispatchEvent","CustomEvent","bubbles","cancelable","preventDefault","handleMouseDown","event","_a","focus","handleCheckedChange","getSiblingRadios","handleNameChange","connectedCallback","forward","disconnectedCallback","removeAll","options","removeFocus","blur","form","closest","document","body","querySelectorAll","render","h","part","class","htmlFor","onKeyDown","onMouseDown","viewBox","stroke","fill","cx","cy","r","ref","el","type","role","onClick","onBlur","onFocus"],"sources":["src/components/six-radio/six-radio.scss?tag=six-radio&encapsulation=shadow","src/components/six-radio/six-radio.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: inline-block;\n}\n\n.radio {\n  display: inline-flex;\n  align-items: center;\n  font-family: var(--six-font-family);\n  font-size: var(--six-input-font-size-medium);\n  font-weight: var(--six-input-font-weight);\n  color: var(--six-input-color);\n  vertical-align: middle;\n  cursor: pointer;\n}\n\n.radio__icon {\n  display: inline-flex;\n  width: var(--six-selection-control-toggle-size);\n  height: var(--six-selection-control-toggle-size);\n\n  svg {\n    width: 100%;\n    height: 100%;\n  }\n}\n\n.radio__control {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--six-selection-control-toggle-size);\n  height: var(--six-selection-control-toggle-size);\n  border: solid var(--six-border-width) var(--six-input-border-color);\n  border-radius: 50%;\n  background-color: var(--six-input-background-color);\n  color: transparent;\n  transition:\n    var(--six-transition-fast) border-color,\n    var(--six-transition-fast) background-color,\n    var(--six-transition-fast) color,\n    var(--six-transition-fast) box-shadow;\n\n  input[type='radio'] {\n    position: absolute;\n    opacity: 0;\n    padding: 0;\n    margin: 0;\n    pointer-events: none;\n  }\n}\n\n// Hover\n.radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover {\n  border-color: var(--six-input-border-color-hover);\n}\n\n// Checked\n.radio--checked .radio__control {\n  color: var(--six-selection-control-color);\n  border-color: var(--six-selection-control-color);\n}\n\n// Checked + hover\n.radio.radio--checked:not(.radio--disabled) .radio__control:hover {\n  color: var(--six-input-border-color-focus);\n  border-color: var(--six-input-border-color-focus);\n}\n\n// Disabled\n.radio--disabled {\n  cursor: not-allowed;\n  color: var(--six-input-color-disabled);\n\n  .radio__control {\n    border-color: var(--six-input-border-color-disabled);\n  }\n\n  &.radio--checked .radio__control {\n    color: var(--six-selection-control-color-disabled);\n  }\n}\n\n.radio__label {\n  line-height: var(--six-selection-control-toggle-size);\n  margin-left: 0.5em;\n  user-select: none;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\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 radio's label.\n *\n * @part base - The component's base wrapper.\n * @part control - The radio control.\n * @part checked-icon - The container the wraps the checked icon.\n * @part label - The radio label.\n */\n\n@Component({\n  tag: 'six-radio',\n  styleUrl: 'six-radio.scss',\n  shadow: true,\n})\nexport class SixRadio {\n  private inputId = `radio-${++id}`;\n  private labelId = `radio-label-${id}`;\n  private nativeInput?: HTMLInputElement;\n  private eventListeners = new EventListeners();\n\n  @Element() host!: HTMLSixRadioElement;\n\n  @State() hasFocus = false;\n\n  /** The radio's name attribute. */\n  @Prop() name = '';\n\n  /** The radio's value attribute. */\n  @Prop({ reflect: true }) value = 'on';\n\n  /** Set to true to disable the radio. */\n  @Prop() disabled = false;\n\n  /** Set to true to draw the radio in a checked state. */\n  @Prop({ mutable: true, reflect: true }) checked = false;\n\n  /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */\n  @Prop({ reflect: true }) invalid = false;\n\n  @Watch('checked')\n  handleCheckedChange() {\n    if (this.checked) {\n      this.getSiblingRadios().forEach((radio) => (radio.checked = false));\n    }\n    if (this.nativeInput != null) {\n      this.nativeInput.checked = this.checked;\n    }\n  }\n\n  @Watch('name')\n  handleNameChange(name: string) {\n    if (this.nativeInput != null) {\n      this.nativeInput.name = name;\n    }\n  }\n\n  /** Emitted when the control loses focus. */\n  @Event({ eventName: 'six-radio-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control's checked state changes. */\n  @Event({ eventName: 'six-radio-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control gains focus. */\n  @Event({ eventName: 'six-radio-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    this.eventListeners.forward('six-radio-change', 'change', this.host);\n    this.eventListeners.forward('six-radio-blur', 'blur', this.host);\n    this.eventListeners.forward('six-radio-focus', 'focus', this.host);\n  }\n\n  disconnectedCallback() {\n    this.eventListeners.removeAll();\n  }\n\n  /** Sets focus on the radio. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.nativeInput?.focus(options);\n  }\n\n  /** Removes focus from the radio. */\n  @Method()\n  async removeFocus() {\n    this.nativeInput?.blur();\n  }\n\n  private getAllRadios() {\n    const form = this.host.closest('form') || document.body;\n\n    if (this.name === '') return [];\n\n    return [...form.querySelectorAll('six-radio')].filter(\n      (radio: HTMLSixRadioElement) => radio.name === this.name\n    ) as HTMLSixRadioElement[];\n  }\n\n  private getSiblingRadios() {\n    return this.getAllRadios().filter((radio) => radio !== this.host) as HTMLSixRadioElement[];\n  }\n\n  private handleClick = () => {\n    if (this.nativeInput != null) {\n      this.checked = this.nativeInput.checked;\n      this.sixChange.emit();\n    }\n  };\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.sixBlur.emit();\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.sixFocus.emit();\n  };\n\n  private handleKeyDown = (keyboardEvent: KeyboardEvent) => {\n    if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(keyboardEvent.key)) {\n      const radios = this.getAllRadios().filter((radio) => !radio.disabled);\n      const incr = ['ArrowUp', 'ArrowLeft'].includes(keyboardEvent.key) ? -1 : 1;\n      let index = radios.indexOf(this.host) + incr;\n      if (index < 0) index = radios.length - 1;\n      if (index > radios.length - 1) index = 0;\n\n      this.getAllRadios().forEach((radio) => (radio.checked = false));\n      radios[index].setFocus();\n      radios[index].checked = true;\n      radios[index].dispatchEvent(new CustomEvent('six-radio-change', { bubbles: true, cancelable: true }));\n      keyboardEvent.preventDefault();\n    }\n  };\n\n  private handleMouseDown = (event: MouseEvent) => {\n    // Prevent clicks on the label from briefly blurring the input\n    event.preventDefault();\n    this.nativeInput?.focus();\n  };\n\n  render() {\n    return (\n      <label\n        part=\"base\"\n        class={{\n          radio: true,\n          'radio--checked': this.checked,\n          'radio--disabled': this.disabled,\n          'radio--focused': this.hasFocus,\n        }}\n        htmlFor={this.inputId}\n        onKeyDown={this.handleKeyDown}\n        onMouseDown={this.handleMouseDown}\n      >\n        <span part=\"control\" class=\"radio__control\">\n          <span part=\"checked-icon\" class=\"radio__icon\">\n            <svg viewBox=\"0 0 16 16\">\n              <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n                <g fill=\"currentColor\">\n                  <circle cx=\"8\" cy=\"8\" r=\"5\"></circle>\n                </g>\n              </g>\n            </svg>\n          </span>\n\n          <input\n            ref={(el) => (this.nativeInput = el)}\n            id={this.inputId}\n            type=\"radio\"\n            name={this.name}\n            value={this.value}\n            checked={this.checked}\n            disabled={this.disabled}\n            role=\"radio\"\n            aria-checked={this.checked ? 'true' : 'false'}\n            aria-labelledby={this.labelId}\n            onClick={this.handleClick}\n            onBlur={this.handleBlur}\n            onFocus={this.handleFocus}\n          />\n        </span>\n\n        <span part=\"label\" id={this.labelId} class=\"radio__label\">\n          <slot />\n        </span>\n      </label>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/ui-library/p-83b35622.entry.js

@@ -0,0 +1,2 @@
+import{r as i,c as e,h as t,g as s}from"./p-JoG9I7EO.js";import{h as l,g as a}from"./p-j3oIB5oT.js";const o=':host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{display:inline-block}.tile{min-height:var(--tile-size);width:var(--tile-size);background-color:var(--six-color-clay-50);display:inline-grid;grid-template-columns:100%;grid-template-areas:"header" "middle" "footer"}.tile--small{--tile-size:80px;--tile-padding-size:var(--six-spacing-medium)}.tile--medium{--tile-size:120px;--tile-padding-size:var(--six-spacing-large)}.tile--large{--tile-size:160px;--tile-padding-size:var(--six-spacing-x-large)}.tile:not(.tile--visible){visibility:hidden}.tile--elevated{border:0;box-shadow:var(--six-shadow-medium)}.tile__header{grid-area:header;height:5%;justify-self:right;display:flex;justify-content:right;opacity:0;transition:var(--six-transition-fast) opacity}.tile:hover>.tile__header{opacity:1}.tile__header--hidden{visibility:hidden}.tile__header six-icon-button{margin-top:-6px;margin-right:-6px;margin-bottom:-16px}.tile__body,.tile__body--large,.tile__body--medium,.tile__body--small{grid-area:middle;display:grid;place-items:center;cursor:pointer;padding-left:var(--tile-padding-size);padding-right:var(--tile-padding-size)}.tile__body six-icon::part(base),.tile__body--large six-icon::part(base),.tile__body--medium six-icon::part(base),.tile__body--small six-icon::part(base){padding:0}.tile__body--small{--tile-padding-size:var(--six-spacing-medium)}.tile__body--medium{--tile-padding-size:var(--six-spacing-large)}.tile__body--large{--tile-padding-size:var(--six-spacing-x-large)}.tile__footer,.tile__footer--large,.tile__footer--medium,.tile__footer--small{grid-area:footer;display:flex;justify-content:center;cursor:pointer;font-weight:var(--six-font-weight-normal);color:var(--six-color-web-rock-900)}.tile__footer--small{font-size:var(--six-font-size-xxx-small)}.tile__footer--medium{font-size:var(--six-font-size-xx-small)}.tile__footer--large{font-size:var(--six-font-size-small)}.tile__footer .label__footer,.tile__footer--small .label__footer,.tile__footer--medium .label__footer,.tile__footer--large .label__footer{overflow:hidden;text-overflow:ellipsis;width:calc(var(--tile-size) - 2em);text-align:center}';const r=class{constructor(t){i(this,t);this.sixTileClose=e(this,"six-tile-closed");this.sixTileSelected=e(this,"six-tile-selected");this.label="";this.closeable=true;this.elevated=false;this.disableTooltip=true;this.disabled=false;this.size="medium";this.visible=true;this.hasIconSlot=false;this.hasLabelSlot=false;this.handleSlotChange=()=>{this.hasIconSlot=l(this.host,"icon");this.hasLabelSlot=l(this.host,"label");if(this.hasIconSlot){const i=a(this.host,"icon");i===null||i===void 0?void 0:i.addEventListener("click",this.handleClickEvent)}if(this.hasLabelSlot){const i=a(this.host,"label");i===null||i===void 0?void 0:i.addEventListener("click",this.handleClickEvent)}};this.handleCloseClickEvent=()=>{this.visible=false;this.sixTileClose.emit()};this.handleClickEvent=()=>{this.sixTileSelected.emit()}}async hide(){this.visible=false}async show(){this.visible=true}componentWillLoad(){this.handleSlotChange()}render(){return t("six-tooltip",{key:"165474a4301eff8d60788826d0378f33640476f4",disabled:this.disableTooltip||this.label==="",content:this.label},t("div",{key:"ae643873a589d648887ab54c614be1cae1e01a95",part:"base",class:{tile:true,"tile--visible":this.visible,"tile--small":this.size==="small","tile--medium":this.size==="medium","tile--large":this.size==="large","tile--elevated":this.elevated}},t("div",{key:"b1fc1fabbf6f853611c7e7401bc007ba23a80985",part:"header",class:"tile__header"},t("six-icon-button",{key:"3c8241f94b14ddbc2aeded4a7471e003112850bf",class:{"tile__header--hidden":!this.closeable},name:"close",size:d(this.size),onClick:this.handleCloseClickEvent})),t("div",{key:"334757a44525044c0d7f78fccf55c9076267c4ff",part:"body",class:"tile__body"},this.iconName&&t("six-icon",{key:"ec0904b8125e608d4d1f5ebeeb1b1fd8f8202a18",onClick:this.handleClickEvent,size:h(this.size)},this.iconName),this.hasIconSlot&&t("slot",{key:"5c4d950efc7de4268da7285024c0900066020c19",name:"icon"})),t("div",{key:"145edac16dcbf511d60d4f044bae7bdd397d939e",part:"footer",class:{"tile__footer--small":this.size==="small","tile__footer--medium":this.size==="medium","tile__footer--large":this.size==="large"}},this.label&&t("div",{key:"e11277aca9e4b1d30050f582fef25f4b77815bfd",class:{".label__footer":true},onClick:this.handleClickEvent},this.label),this.hasLabelSlot&&t("slot",{key:"39e4128ecdb2166b5fba7955a5370e59beae9801",name:"label"}))))}get host(){return s(this)}};const d=i=>({small:"xxSmall",medium:"medium",large:"medium"}[i]);const h=i=>({small:"xLarge",medium:"xxLarge",large:"xxxLarge"}[i]);r.style=o;export{r as six_tile};
+//# sourceMappingURL=p-83b35622.entry.js.map

package/dist/ui-library/p-83b35622.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sixTileCss","SixTile","constructor","hostRef","this","label","closeable","elevated","disableTooltip","disabled","size","visible","hasIconSlot","hasLabelSlot","handleSlotChange","hasSlot","host","slot","getSlot","addEventListener","handleClickEvent","handleCloseClickEvent","sixTileClose","emit","sixTileSelected","hide","show","componentWillLoad","render","h","key","content","part","class","tile","name","closeIconSize","onClick","iconName","iconSize","small","medium","large"],"sources":["src/components/six-tile/six-tile.scss?tag=six-tile&encapsulation=shadow","src/components/six-tile/six-tile.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: inline-block;\n}\n\n.tile {\n  &--small {\n    --tile-size: 80px;\n    --tile-padding-size: var(--six-spacing-medium);\n  }\n\n  &--medium {\n    --tile-size: 120px;\n    --tile-padding-size: var(--six-spacing-large);\n  }\n\n  &--large {\n    --tile-size: 160px;\n    --tile-padding-size: var(--six-spacing-x-large);\n  }\n\n  min-height: var(--tile-size);\n  width: var(--tile-size);\n\n  background-color: var(--six-color-clay-50);\n\n  display: inline-grid;\n  grid-template-columns: 100%;\n  grid-template-areas:\n    'header'\n    'middle'\n    'footer';\n\n  &:not(.tile--visible) {\n    visibility: hidden;\n  }\n\n  &--elevated {\n    border: 0;\n    box-shadow: var(--six-shadow-medium);\n  }\n}\n\n.tile__header {\n  grid-area: header;\n  height: 5%;\n  justify-self: right;\n  display: flex;\n  justify-content: right;\n  opacity: 0;\n  transition: var(--six-transition-fast) opacity;\n\n  .tile:hover > & {\n    opacity: 1;\n  }\n\n  &--hidden {\n    visibility: hidden;\n  }\n\n  six-icon-button {\n    margin-top: -6px;\n    margin-right: -6px;\n    margin-bottom: -16px;\n  }\n}\n\n.tile__body {\n  grid-area: middle;\n  display: grid;\n  place-items: center;\n  cursor: pointer;\n\n  six-icon::part(base) {\n    padding: 0;\n  }\n\n  &--small {\n    @extend .tile__body;\n    --tile-padding-size: var(--six-spacing-medium);\n  }\n\n  &--medium {\n    @extend .tile__body;\n    --tile-padding-size: var(--six-spacing-large);\n  }\n\n  &--large {\n    @extend .tile__body;\n    --tile-padding-size: var(--six-spacing-x-large);\n  }\n\n  padding-left: var(--tile-padding-size);\n  padding-right: var(--tile-padding-size);\n}\n\n.tile__footer {\n  grid-area: footer;\n  display: flex;\n  justify-content: center;\n  cursor: pointer;\n  font-weight: var(--six-font-weight-normal);\n  color: var(--six-color-web-rock-900);\n\n  &--small {\n    @extend .tile__footer;\n    font-size: var(--six-font-size-xxx-small);\n  }\n\n  &--medium {\n    @extend .tile__footer;\n    font-size: var(--six-font-size-xx-small);\n  }\n\n  &--large {\n    @extend .tile__footer;\n    font-size: var(--six-font-size-small);\n  }\n\n  .label__footer {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    width: calc(var(--tile-size) - 2em);\n    text-align: center;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { getSlot, hasSlot } from '../../utils/slot';\n\n/**\n * @since 1.0\n * @status stable\n */\n\n@Component({\n  tag: 'six-tile',\n  styleUrl: 'six-tile.scss',\n  shadow: true,\n})\nexport class SixTile {\n  @Element() host!: HTMLSixTileElement;\n\n  /** The tile's label. */\n  @Prop() label = '';\n\n  /** The icon's name. */\n  @Prop() iconName?: string;\n\n  /** Flag, whether the tile is closeable. */\n  // eslint-disable-next-line @stencil-community/ban-default-true\n  @Prop() closeable = true;\n\n  /** Flag, whether the tile should cast a shadow. */\n  @Prop() elevated = false;\n\n  /** Enables tile tooltip for tiles */\n  // eslint-disable-next-line @stencil-community/ban-default-true\n  @Prop() disableTooltip = true;\n\n  /** Set to true to disable the tile. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The tile's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  @State() visible = true;\n\n  /** Emitted when the tile was closed. */\n  @Event({ eventName: 'six-tile-closed' }) sixTileClose!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the tile is selected. */\n  @Event({ eventName: 'six-tile-selected' }) sixTileSelected!: EventEmitter<EmptyPayload>;\n\n  /** Hides the tile */\n  @Method()\n  async hide() {\n    this.visible = false;\n  }\n\n  /** Shows the tile */\n  @Method()\n  async show() {\n    this.visible = true;\n  }\n\n  @State() hasIconSlot = false;\n\n  @State() hasLabelSlot = false;\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  private handleSlotChange = () => {\n    this.hasIconSlot = hasSlot(this.host, 'icon');\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n\n    if (this.hasIconSlot) {\n      const slot = getSlot(this.host, 'icon');\n      slot?.addEventListener('click', this.handleClickEvent);\n    }\n\n    if (this.hasLabelSlot) {\n      const slot = getSlot(this.host, 'label');\n      slot?.addEventListener('click', this.handleClickEvent);\n    }\n  };\n\n  render() {\n    return (\n      <six-tooltip disabled={this.disableTooltip || this.label === ''} content={this.label}>\n        <div\n          part=\"base\"\n          class={{\n            tile: true,\n            'tile--visible': this.visible,\n            'tile--small': this.size === 'small',\n            'tile--medium': this.size === 'medium',\n            'tile--large': this.size === 'large',\n            'tile--elevated': this.elevated,\n          }}\n        >\n          <div part=\"header\" class=\"tile__header\">\n            <six-icon-button\n              class={{\n                'tile__header--hidden': !this.closeable,\n              }}\n              name=\"close\"\n              size={closeIconSize(this.size)}\n              onClick={this.handleCloseClickEvent}\n            />\n          </div>\n\n          <div part=\"body\" class=\"tile__body\">\n            {this.iconName && (\n              <six-icon onClick={this.handleClickEvent} size={iconSize(this.size)}>\n                {this.iconName}\n              </six-icon>\n            )}\n            {this.hasIconSlot && <slot name=\"icon\"></slot>}\n          </div>\n\n          <div\n            part=\"footer\"\n            class={{\n              'tile__footer--small': this.size === 'small',\n              'tile__footer--medium': this.size === 'medium',\n              'tile__footer--large': this.size === 'large',\n            }}\n          >\n            {this.label && (\n              <div\n                class={{\n                  '.label__footer': true,\n                }}\n                onClick={this.handleClickEvent}\n              >\n                {this.label}\n              </div>\n            )}\n            {this.hasLabelSlot && <slot name=\"label\"></slot>}\n          </div>\n        </div>\n      </six-tooltip>\n    );\n  }\n\n  private handleCloseClickEvent = () => {\n    this.visible = false;\n    this.sixTileClose.emit();\n  };\n\n  private handleClickEvent = () => {\n    this.sixTileSelected.emit();\n  };\n}\n\nconst closeIconSize = (size: string) => {\n  return {\n    small: 'xxSmall',\n    medium: 'medium',\n    large: 'medium',\n  }[size] as 'xSmall' | 'medium';\n};\n\nconst iconSize = (size: string) => {\n  return {\n    small: 'xLarge',\n    medium: 'xxLarge',\n    large: 'xxxLarge',\n  }[size] as 'xLarge' | 'xxLarge' | 'xxxLarge';\n};\n"],"mappings":"oGAAA,MAAMA,EAAa,iwE,MCcNC,EAAO,MALpB,WAAAC,CAAAC,G,uGASUC,KAAKC,MAAG,GAORD,KAASE,UAAG,KAGZF,KAAQG,SAAG,MAIXH,KAAcI,eAAG,KAGAJ,KAAQK,SAAG,MAGXL,KAAIM,KAAiC,SAErDN,KAAOO,QAAG,KAoBVP,KAAWQ,YAAG,MAEdR,KAAYS,aAAG,MAMhBT,KAAgBU,iBAAG,KACzBV,KAAKQ,YAAcG,EAAQX,KAAKY,KAAM,QACtCZ,KAAKS,aAAeE,EAAQX,KAAKY,KAAM,SAEvC,GAAIZ,KAAKQ,YAAa,CACpB,MAAMK,EAAOC,EAAQd,KAAKY,KAAM,QAChCC,IAAA,MAAAA,SAAA,SAAAA,EAAME,iBAAiB,QAASf,KAAKgB,iB,CAGvC,GAAIhB,KAAKS,aAAc,CACrB,MAAMI,EAAOC,EAAQd,KAAKY,KAAM,SAChCC,IAAA,MAAAA,SAAA,SAAAA,EAAME,iBAAiB,QAASf,KAAKgB,iB,GA+DjChB,KAAqBiB,sBAAG,KAC9BjB,KAAKO,QAAU,MACfP,KAAKkB,aAAaC,MAAM,EAGlBnB,KAAgBgB,iBAAG,KACzBhB,KAAKoB,gBAAgBD,MAAM,CAE9B,CApGC,UAAME,GACJrB,KAAKO,QAAU,K,CAKjB,UAAMe,GACJtB,KAAKO,QAAU,I,CAOjB,iBAAAgB,GACEvB,KAAKU,kB,CAkBP,MAAAc,GACE,OACEC,EAAa,eAAAC,IAAA,2CAAArB,SAAUL,KAAKI,gBAAkBJ,KAAKC,QAAU,GAAI0B,QAAS3B,KAAKC,OAC7EwB,EAAA,OAAAC,IAAA,2CACEE,KAAK,OACLC,MAAO,CACLC,KAAM,KACN,gBAAiB9B,KAAKO,QACtB,cAAeP,KAAKM,OAAS,QAC7B,eAAgBN,KAAKM,OAAS,SAC9B,cAAeN,KAAKM,OAAS,QAC7B,iBAAkBN,KAAKG,WAGzBsB,EAAA,OAAAC,IAAA,2CAAKE,KAAK,SAASC,MAAM,gBACvBJ,EAAA,mBAAAC,IAAA,2CACEG,MAAO,CACL,wBAAyB7B,KAAKE,WAEhC6B,KAAK,QACLzB,KAAM0B,EAAchC,KAAKM,MACzB2B,QAASjC,KAAKiB,yBAIlBQ,EAAA,OAAAC,IAAA,2CAAKE,KAAK,OAAOC,MAAM,cACpB7B,KAAKkC,UACJT,EAAA,YAAAC,IAAA,2CAAUO,QAASjC,KAAKgB,iBAAkBV,KAAM6B,EAASnC,KAAKM,OAC3DN,KAAKkC,UAGTlC,KAAKQ,aAAeiB,EAAA,QAAAC,IAAA,2CAAMK,KAAK,UAGlCN,EAAA,OAAAC,IAAA,2CACEE,KAAK,SACLC,MAAO,CACL,sBAAuB7B,KAAKM,OAAS,QACrC,uBAAwBN,KAAKM,OAAS,SACtC,sBAAuBN,KAAKM,OAAS,UAGtCN,KAAKC,OACJwB,EAAA,OAAAC,IAAA,2CACEG,MAAO,CACL,iBAAkB,MAEpBI,QAASjC,KAAKgB,kBAEbhB,KAAKC,OAGTD,KAAKS,cAAgBgB,EAAA,QAAAC,IAAA,2CAAMK,KAAK,Y,6BAiB7C,MAAMC,EAAiB1B,IACd,CACL8B,MAAO,UACPC,OAAQ,SACRC,MAAO,UACPhC,IAGJ,MAAM6B,EAAY7B,IACT,CACL8B,MAAO,SACPC,OAAQ,UACRC,MAAO,YACPhC,I","ignoreList":[]}

package/dist/ui-library/p-83d5fa7c.entry.js

@@ -0,0 +1,2 @@
+import{r as i,c as t,h as s,g as a}from"./p-JoG9I7EO.js";import{u as e,l as o}from"./p-BY6hIEFX.js";import{h as l}from"./p-j3oIB5oT.js";import{M as r}from"./p-CfIoyvm-.js";import{a as n}from"./p-SLlDVtvF.js";const d=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}: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-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}";let h=0;const c=class{constructor(s){i(this,s);this.sixShow=t(this,"six-dialog-show");this.sixAfterShow=t(this,"six-dialog-after-show");this.sixHide=t(this,"six-dialog-hide");this.sixAfterHide=t(this,"six-dialog-after-hide");this.sixInitialFocus=t(this,"six-dialog-initial-focus");this.sixRequestClose=t(this,"six-dialog-request-close");this.componentId=`dialog-${++h}`;this.willShow=false;this.willHide=false;this.hasFooter=false;this.isVisible=false;this.open=false;this.label="";this.noHeader=false;this.handleCloseClick=()=>{this.preventClose("close-button")};this.handleKeyDown=i=>{if(i.key==="Escape"){this.preventClose("keyboard")}};this.handleOverlayClick=()=>{this.preventClose("overlay")};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()}}}handleOpenChange(){this.open?this.show():this.hide()}connectedCallback(){this.modal=new r(this.host,{onFocusOut:()=>{var i;return(i=this.panel)===null||i===void 0?void 0:i.focus()}})}componentWillLoad(){this.handleSlotChange()}componentDidLoad(){if(this.open){this.show()}}disconnectedCallback(){e(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();o(this.host);if(this.open){requestAnimationFrame((()=>{const t=this.sixInitialFocus.emit();if(!t.defaultPrevented){i.focus({preventScroll: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();e(this.host)}preventClose(i){const t=this.sixRequestClose.emit({source:i});if(t.defaultPrevented&&this.panel){n(this.panel,[{scale:1},{scale:1.01},{scale:1}],{duration:250});return}this.hide()}render(){return s("div",{key:"b97915d5076bb83782212b61b1f65f694fd84b63",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",{key:"153379e70061e86842f65f3588329dc9c6d592db",part:"overlay",class:"dialog__overlay",onClick:this.handleOverlayClick}),s("div",{key:"d0b78c413a70eeb6e6cbf75be7829a7d1f2ad715",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",{key:"94e7d993356ea718e1ed87d4fe9e1d3faf0574f8",part:"header",class:"dialog__header"},s("span",{key:"600591c9266dda80c457f41c54c92a8134d89bb8",part:"title",class:"dialog__title",id:`${this.componentId}-title`},s("slot",{key:"4ad2904648821134ce3851682768b01086a68359",name:"label"},this.label||String.fromCharCode(65279))),s("six-icon-button",{key:"4d793b14b41f7d9c43d5f9949cba6bfe7c6a442c",exportparts:"base:close-button",class:"dialog__close",name:"close",onClick:this.handleCloseClick})),s("div",{key:"729f6cc36802fccf46958b2c259213aa9369fb94",part:"body",class:"dialog__body"},s("slot",{key:"ba299ae12ba958c705a807639aee911167997b38"})),s("footer",{key:"92cb57fa4c4dc066a49dd259832e43be619cc945",part:"footer",class:"dialog__footer"},s("slot",{key:"63ea68abef52d91c04608ad1bf6d508a31012ed9",name:"footer",onSlotchange:this.handleSlotChange}))))}get host(){return a(this)}static get watchers(){return{open:["handleOpenChange"]}}};c.style=d;export{c as six_dialog};
+//# sourceMappingURL=p-83d5fa7c.entry.js.map