@six-group/ui-library 0.0.0-insider.7c3e3d8 → 0.0.0-insider.a358260

package/dist/ui-library/p-163f2bb0.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as s,g as i}from"./p-ac4f4d45.js";import{h as l,a as r}from"./p-b4dfb7cf.js";import{F as o}from"./p-79eee01b.js";import{E as a}from"./p-9a860acc.js";import{D as n,a as h}from"./p-0786fa7c.js";function c(t,e,s){var i,l;if(e){if(Array.isArray(t)){return f(t,s)}else{return m(t,s)}}return(l=(i=p(t,s))===null||i===void 0?void 0:i.value)!==null&&l!==void 0?l:""}function d(t,e,s){if(t===""){return true}if(e){if(Array.isArray(t)){if(t.length===0){return true}return f(t,s).length===t.length}return m(t,s).length>0}return p(t,s)!=null}function u(t,e){if(Array.isArray(t)&&Array.isArray(e)){return t.length===e.length&&t.every(((t,s)=>t===e[s]))}else if(typeof t==="string"&&typeof e==="string"){return t===e}return false}function x(t){if(Array.isArray(t)){return t.length===0}return t===""}function f(t,e){return e.filter((e=>t.includes(e.value))).map((t=>t.value))}function m(t,e){return e.filter((e=>t===e.value)).map((t=>t.value))}function p(t,e){return e.find((e=>t===e.value))}const b=':host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none}.form-control--has-label .form-control__label{display:inline-block;color:var(--six-input-label-color);font-weight:var(--six-font-weight-bold);margin-bottom:var(--six-spacing-x-small)}.form-control--has-label .form-control__label__required::after{color:var(--six-color-danger-800);content:"*"}.form-control--has-label.form-control--small .form-control__label{font-size:var(--six-input-label-font-size-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--six-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control_label{font-size:var(--six-input-label-font-size-large)}.form-control--has-help-text .form-control__help-text{display:block;color:var(--six-input-help-text-color);margin-top:var(--six-spacing-x-small)}.form-control--has-help-text .form-control__help-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--has-error-text .form-control__error-text{display:block;color:var(--six-color-danger-800);margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text .form-control__error-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text.form-control--small .form-control__error-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-error-text.form-control--medium .form-control__error-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-error-text.form-control--large .form-control__error-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--disabled .form-control__help-text{color:var(--six-input-help-text-color-disabled)}.form-control--disabled .form-control__label{color:var(--six-input-label-color-disabled)}.form-control--invalid:not(.form-control--disabled) .form-control__label{color:var(--six-input-label-color)}:host{display:block}.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;overflow:hidden;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__tags,.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)}.select__label{flex-shrink:1;flex-grow:1;align-items:center;user-select:none;width:0;scrollbar-width:none;-ms-overflow-style:none;overflow-x:auto;overflow-y:hidden;white-space:nowrap}.select__label::-webkit-scrollbar{width:0;height:0}.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)}.select--placeholder-visible .select__label{color:var(--six-input-placeholder-color)}.select--disabled.select--placeholder-visible .select__label{color:var(--six-input-placeholder-color-disabled)}.select__tags{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:left;margin-left:var(--six-spacing-xx-small)}.select__hidden-select{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.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 .select__label{margin: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--small .select__tags{padding-bottom:2px}.select--small .select__tags six-tag{padding-top:2px}.select--small .select__tags six-tag:not(:last-of-type){margin-right:var(--six-spacing-xx-small)}.select--small.select--has-tags .select__label{margin-left:0}.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 .select__label{margin: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--medium .select__tags{padding-bottom:3px}.select--medium .select__tags six-tag{padding-top:3px}.select--medium .select__tags six-tag:not(:last-of-type){margin-right:var(--six-spacing-xx-small)}.select--medium.select--has-tags .select__label{margin-left:0}.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 .select__label{margin: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--large .select__tags{padding-bottom:4px}.select--large .select__tags six-tag{padding-top:4px}.select--large .select__tags six-tag:not(:last-of-type){margin-right:var(--six-spacing-xx-small)}.select--large.select--has-tags .select__label{margin-left:0}.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{max-width:50vw;width:fit-content}.select__menu--filtered{width:100% !important}.select__menu--hidden{display:none}six-icon-button::part(base){padding-top:0;padding-bottom:0}';let _=0;const g=class{constructor(s){t(this,s);this.sixChange=e(this,"six-select-change",7);this.sixFocus=e(this,"six-select-focus",7);this.sixBlur=e(this,"six-select-blur",7);this.inputId=`select-${++_}`;this.labelId=`select-label-${_}`;this.helpTextId=`select-help-text-${_}`;this.errorTextId=`select-error-text-${_}`;this.touched=false;this.customErrorText="";this.customValidation=false;this.eventListeners=new a;this.handleBlur=()=>{this.hasFocus=false;this.sixBlur.emit()};this.handleFocus=()=>{this.hasFocus=true;this.sixFocus.emit()};this.handleInvalid=()=>{this.invalid=true};this.handleClearClick=t=>{t.stopPropagation();this.clearValues()};this.handleSelectAll=t=>{const e=this.getItems().filter((t=>t.style.display!=="none"));const s=t.key;const i=t.code;if(s==="Control"){return}if(this.isOpen&&this.multiple&&i==="KeyA"&&t.ctrlKey){t.preventDefault();const s=e.some((t=>!t.disabled&&!t.checked));e.filter((t=>!t.disabled)).forEach((t=>t.checked=s));const i=e.filter((t=>t.checked)).map((t=>t.value));this.value=s?i:[]}};this.handleKeyDown=async t=>{var e;const s=t.target;const i=this.getItems();const l=i[0];const r=i[i.length-1];if(s.tagName.toLowerCase()==="six-tag"){return}if(t.key==="Tab"){if(this.isOpen&&this.dropdown!=null){await this.dropdown.hide()}return}if(["ArrowDown","ArrowUp"].includes(t.key)){t.preventDefault();if(!this.isOpen&&this.dropdown!=null){await this.dropdown.show()}if(t.key==="ArrowDown"&&l){l.setFocus()}else if(t.key==="ArrowUp"&&r){r.setFocus()}}if(!this.isOpen&&this.dropdown!=null){t.stopPropagation();t.preventDefault();await this.dropdown.show();await((e=this.menu)===null||e===void 0?void 0:e.typeToSelect(t.key))}};this.handleLabelClick=()=>{var t;(t=this.box)===null||t===void 0?void 0:t.focus()};this.handleMenuShow=t=>{var e;if(this.disabled){t.preventDefault();return}this.resizeMenu();(e=this.resizeObserver)===null||e===void 0?void 0:e.observe(this.host);this.isOpen=true};this.handleMenuHide=()=>{var t;(t=this.resizeObserver)===null||t===void 0?void 0:t.unobserve(this.host);this.isOpen=false};this.handleSlotChange=()=>{this.hasHelpTextSlot=l(this.host,"help-text");this.hasErrorTextSlot=l(this.host,"error-text");this.hasLabelSlot=l(this.host,"label");this.update()};this.handleTagInteraction=t=>{const e=t.composedPath();const s=e.find((t=>{if(t instanceof HTMLElement){const e=t;return e.classList.contains("tag__clear")}}));if(s){t.stopPropagation()}};this.hasFocus=false;this.hasHelpTextSlot=false;this.hasErrorTextSlot=false;this.hasLabelSlot=false;this.isOpen=false;this.displayLabel="";this.displayTags=[];this.multiple=false;this.maxTagsVisible=3;this.disabled=false;this.name="";this.placeholder="";this.filterPlaceholder=undefined;this.filterDebounce=n;this.size="medium";this.hoist=false;this.value="";this.pill=false;this.label="";this.helpText="";this.errorText="";this.required=false;this.clearable=false;this.invalid=false;this.line=false;this.errorOnBlur=false;this.filter=false;this.asyncFilter=false;this.autocomplete=false;this.inputDebounce=n;this.options=null;this.virtualScroll=false;this.defaultValue=undefined}handleDisabledChange(){if(this.disabled&&this.isOpen&&this.dropdown!=null){this.dropdown.hide()}}handleLabelChange(){this.handleSlotChange()}handleMultipleChange(){this.update()}handleValueChange(t,e){var s;let i=(s=this.options)!==null&&s!==void 0?s:this.getItems();if(!d(t,this.multiple,i)){this.value=c(t,this.multiple,i);return}if(u(c(e,this.multiple,i),c(t,this.multiple,i))){return}this.update();this.sixChange.emit({value:this.value,isSelected:true})}update(){var t;const e=this.getItems();this.value=c(this.value,this.multiple,(t=this.options)!==null&&t!==void 0?t:e);if(!Array.isArray(this.value)){e.forEach((t=>t.checked=false));const t=e.find((t=>this.value.includes(t.value)));if(t!=null){t.checked=true}this.displayLabel=this.extractLabelForSelectedItem([this.value],e);this.displayTags=[];const s=!x(this.value);if(s){this.touched=true}if(this.inputElement&&this.touched){if(!this.autocomplete){this.inputElement.value=s?this.displayLabel:""}else if(s){this.inputElement.value=this.value}this.inputElement.checkValidity().then((t=>this.invalid=!t))}}else{e.forEach((t=>t.checked=this.value.includes(t.value)));const t=[];this.value.forEach((s=>e.map((e=>e.value===s?t.push(e):null))));this.displayTags=t.map((t=>s("six-tag",{exportparts:"base:tag",type:"primary",size:this.size,pill:this.pill,clearable:true,onClick:this.handleTagInteraction,onKeyDown:this.handleTagInteraction,"onSix-tag-clear":e=>{e.stopPropagation();if(!this.disabled){this.toggleItem(t)}}},this.getItemLabel(t))));if(this.maxTagsVisible>0&&this.displayTags.length>this.maxTagsVisible){const t=this.displayTags.length;this.displayLabel="";this.displayTags=this.displayTags.slice(0,this.maxTagsVisible);this.displayTags.push(s("six-tag",{exportparts:"base:tag",type:"info",size:this.size},"+",t-this.maxTagsVisible))}const i=!x(this.value);if(i){this.touched=true}if(this.inputElement&&this.touched){if(!this.autocomplete){this.inputElement.value=i?this.displayLabel:""}else if(i){this.inputElement.value=this.value.join(",")}this.inputElement.checkValidity().then((t=>this.invalid=!t))}}}connectedCallback(){var t;if(this.virtualScroll&&this.options===null){console.error("Options must be defined when using virtual scrolling")}(t=this.host.shadowRoot)===null||t===void 0?void 0:t.addEventListener("slotchange",this.handleSlotChange)}componentWillLoad(){this.handleSlotChange()}componentDidLoad(){const t=this.inputElement;if(t==null){return}this.resizeObserver=new ResizeObserver((()=>this.resizeMenu()));this.eventListeners.add(t,"invalid",(async e=>{if(this.customValidation||!this.hasErrorTextSlot&&this.errorText===""&&this.customErrorText===""){this.customErrorText=await t.getValidationMessage()}e.preventDefault()}));this.eventListeners.add(t,"six-input-input",h((e=>{const s=t.value;this.clearValues();this.sixChange.emit({value:s,isSelected:false});e.stopPropagation()}),this.inputDebounce))}disconnectedCallback(){var t;(t=this.host.shadowRoot)===null||t===void 0?void 0:t.removeEventListener("slotchange",this.handleSlotChange);this.eventListeners.removeAll()}async reportValidity(){var t;return(t=this.inputElement)===null||t===void 0?void 0:t.reportValidity()}async checkValidity(){var t;return(t=this.inputElement)===null||t===void 0?void 0:t.isValid()}async setCustomValidity(t){this.customErrorText="";this.customValidation=t!=="";if(this.inputElement!=null){await this.inputElement.setCustomValidity(t);this.invalid=!await this.inputElement.checkValidity()}}async reset(){var t;this.clearValues();this.customErrorText="";this.customValidation=false;await((t=this.inputElement)===null||t===void 0?void 0:t.setCustomValidity(""));this.invalid=false}getItemLabel(t){var e,s;const i=(e=t.shadowRoot)===null||e===void 0?void 0:e.querySelector("slot:not([name])");if(i!=null){return r(i)}else{return(s=t.textContent)!==null&&s!==void 0?s:""}}getItems(){if(this.options!==null){return this.options.map((t=>s("six-menu-item",{value:t.value},t.label)))}return[...this.host.querySelectorAll("six-menu-item")]}hasMenuItems(){return this.getItems().length>0}clearValues(){var t;this.value=(t=this.defaultValue)!==null&&t!==void 0?t:this.multiple?[]:"";this.update()}async resizeMenu(){if(this.menu==null||this.box==null){return}this.menu.style.minWidth=`${this.box.clientWidth}px`;if(this.dropdown){await this.dropdown.reposition()}}extractLabelForSelectedItem(t,e){if(t.length===0||t.length===1&&t[0]===""){return""}if(this.options!==null){const e=this.options.find((e=>e.value===t[0]));return(e===null||e===void 0?void 0:e.value)||""}const s=e.find((e=>e.value===t[0]));return s?this.getItemLabel(s):""}toggleItem(t){var e;const s=c(this.value,this.multiple,(e=this.options)!==null&&e!==void 0?e:this.getItems());if(Array.isArray(s)){const e=s.find((e=>e===t.value));if(e==null){this.value=[...this.value,t.value]}else{this.value=s.filter((e=>e!==t.value))}}else{if(t.value===s){this.value=""}else{this.value=t.value}}}displayError(){return this.invalid&&(!this.errorOnBlur||!this.hasFocus&&!this.isOpen)}render(){var t;const e=!x(this.value);return s(o,{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.customErrorText!=null?this.customErrorText:this.errorText,hasErrorTextSlot:this.hasErrorTextSlot,size:this.size,onLabelClick:this.handleLabelClick,disabled:this.disabled,required:this.required,displayError:this.displayError()},s("six-dropdown",{part:"base",ref:t=>this.dropdown=t,hoist:this.hoist,closeOnSelect:!this.multiple,containingElement:this.host,disableHideOnEnterAndSpace:this.autocomplete,class:{select:true,"select--open":this.isOpen,"select--empty":((t=this.value)===null||t===void 0?void 0:t.length)===0,"select--focused":this.hasFocus,"select--clearable":this.clearable,"select--disabled":this.disabled,"select--multiple":this.multiple,"select--has-tags":this.multiple&&e,"select--placeholder-visible":this.displayLabel==="","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.handleSelectAll,"onSix-dropdown-show":this.handleMenuShow,"onSix-dropdown-hide":this.handleMenuHide,filterPlaceholder:this.filterPlaceholder,filterDebounce:this.filterDebounce,filter:this.filter,asyncFilter:this.asyncFilter},s("div",{slot:"trigger",ref:t=>this.box=t,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,onKeyDown:this.handleKeyDown},s("span",{class:"select__label"},this.displayTags.length?s("span",{part:"tags",class:"select__tags"},this.displayTags):this.displayLabel||this.placeholder),this.clearable&&e&&s("six-icon-button",{exportparts:"base:clear-button",class:"select__clear",name:"clear",size:"small",onClick:this.handleClearClick,tabindex:"-1"}),this.hasMenuItems()&&s("span",{part:"icon",class:"select__icon"},s("six-icon",{size:"medium"},"expand_more")),s("six-input",{ref:t=>this.inputElement=t,class:{select__input:true,"select__hidden-select":!this.autocomplete},"aria-hidden":"true",required:this.required,onInvalid:this.handleInvalid,onFocus:this.handleFocus,clearable:this.clearable,placeholder:this.placeholder,pill:this.pill,disabled:this.disabled,size:this.size,tabIndex:-1})),s("six-menu",{ref:t=>this.menu=t,part:"menu",class:{select__menu:true,"select__menu--filtered":this.filter||this.asyncFilter,"select__menu--hidden":!this.hasMenuItems()},"onSix-menu-item-selected":t=>this.toggleItem(t.detail.item),items:this.options,virtualScroll:this.virtualScroll,"remove-box-shadow":true},s("slot",{onSlotchange:this.handleSlotChange}))))}get host(){return i(this)}static get watchers(){return{disabled:["handleDisabledChange"],helpText:["handleLabelChange"],errorText:["handleLabelChange"],label:["handleLabelChange"],multiple:["handleMultipleChange"],value:["handleValueChange"]}}};g.style=b;export{g as six_select};
+//# sourceMappingURL=p-163f2bb0.entry.js.map

package/dist/ui-library/p-163f2bb0.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getValue","value","multiple","menuItems","Array","isArray","getSelectedValues","getSelectedValuesFromString","_b","_a","getSelectedMenuItem","isValidValue","length","valueEquals","a","b","every","element","index","isValueEmpty","values","filter","menuItem","includes","map","find","item","sixSelectCss","id","SixSelect","this","inputId","labelId","helpTextId","errorTextId","touched","customErrorText","customValidation","eventListeners","EventListeners","handleBlur","hasFocus","sixBlur","emit","handleFocus","sixFocus","handleInvalid","invalid","handleClearClick","event","stopPropagation","clearValues","handleSelectAll","nonFilteredItems","getItems","style","display","keyName","key","keyCode","code","isOpen","ctrlKey","preventDefault","hasDeselectedOptions","some","opt","disabled","checked","option","forEach","checkedItems","handleKeyDown","async","target","items","firstItem","lastItem","tagName","toLowerCase","dropdown","hide","show","setFocus","menu","typeToSelect","handleLabelClick","box","focus","handleMenuShow","resizeMenu","resizeObserver","observe","host","handleMenuHide","unobserve","handleSlotChange","hasHelpTextSlot","hasSlot","hasErrorTextSlot","hasLabelSlot","update","handleTagInteraction","path","composedPath","clearButton","el","HTMLElement","classList","contains","DEFAULT_DEBOUNCE_FAST","handleDisabledChange","handleLabelChange","handleMultipleChange","handleValueChange","newValue","oldValue","options","sixChange","isSelected","displayLabel","extractLabelForSelectedItem","displayTags","hasSelection","inputElement","autocomplete","checkValidity","then","valid","val","push","h","exportparts","type","size","pill","clearable","onClick","onKeyDown","toggleItem","getItemLabel","maxTagsVisible","total","slice","join","connectedCallback","virtualScroll","console","error","shadowRoot","addEventListener","componentWillLoad","componentDidLoad","ResizeObserver","add","errorText","getValidationMessage","debounce","enteredValue","inputDebounce","disconnectedCallback","removeEventListener","removeAll","reportValidity","isValid","message","setCustomValidity","slot","querySelector","getTextContent","textContent","label","querySelectorAll","hasMenuItems","defaultValue","minWidth","clientWidth","reposition","selectedOption","checkedItem","itemFound","v","displayError","errorOnBlur","render","FormControl","helpText","onLabelClick","required","part","ref","hoist","closeOnSelect","containingElement","disableHideOnEnterAndSpace","class","select","filterPlaceholder","filterDebounce","asyncFilter","select__box","line","role","tabIndex","onBlur","onFocus","placeholder","name","tabindex","select__input","onInvalid","select__menu","detail","onSlotchange"],"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 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 {\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  display: block;\n}\n\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  overflow: hidden;\n  transition: var(--six-transition-fast) color, var(--six-transition-fast) border, 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__tags,\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.select__label {\n  flex-shrink: 1;\n  flex-grow: 1;\n  align-items: center;\n  user-select: none;\n  width: 0; /* needed for firefox because due to \"white-space: nowrap\" the default is set to max-content */\n\n  @include hide-scrollbar;\n  overflow-x: auto;\n  overflow-y: hidden;\n  white-space: nowrap;\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.select--placeholder-visible .select__label {\n  color: var(--six-input-placeholder-color);\n}\n\n.select--disabled.select--placeholder-visible .select__label {\n  color: var(--six-input-placeholder-color-disabled);\n}\n\n// Tags\n.select__tags {\n  display: inline-flex;\n  align-items: center;\n  flex-wrap: wrap;\n  justify-content: left;\n  margin-left: var(--six-spacing-xx-small);\n}\n\n// Hidden input (for form control validation to show)\n.select__hidden-select {\n  @include visually-hidden();\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  .select__label {\n    margin: 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  .select__tags {\n    padding-bottom: 2px;\n\n    six-tag {\n      padding-top: 2px;\n    }\n\n    six-tag:not(:last-of-type) {\n      margin-right: var(--six-spacing-xx-small);\n    }\n  }\n\n  &.select--has-tags .select__label {\n    margin-left: 0;\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  .select__label {\n    margin: 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  .select__tags {\n    padding-bottom: 3px;\n\n    six-tag {\n      padding-top: 3px;\n    }\n\n    six-tag:not(:last-of-type) {\n      margin-right: var(--six-spacing-xx-small);\n    }\n  }\n\n  &.select--has-tags .select__label {\n    margin-left: 0;\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  .select__label {\n    margin: 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  .select__tags {\n    padding-bottom: 4px;\n\n    six-tag {\n      padding-top: 4px;\n    }\n\n    six-tag:not(:last-of-type) {\n      margin-right: var(--six-spacing-xx-small);\n    }\n  }\n\n  &.select--has-tags .select__label {\n    margin-left: 0;\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    max-width: 50vw;\n    width: fit-content;\n\n    &--filtered {\n      // fixes problem where when filter is enabled the popup has the width of the input field but the menu has the width\n      // of the trigger element and we thus get weird UI glitches when trigger is narrower than filter input field\n      width: 100% !important;\n    }\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","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { 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 { getValue, isValidValue, isValueEmpty, 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 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 touched = false;\n  private customErrorText = '';\n  private customValidation = false;\n  private box?: HTMLElement;\n  private dropdown?: HTMLSixDropdownElement;\n  private inputElement?: HTMLSixInputElement;\n  private menu?: HTMLSixMenuElement;\n  private resizeObserver?: ResizeObserver;\n\n  private eventListeners = new EventListeners();\n\n  @Element() host!: HTMLSixSelectElement;\n\n  @State() hasFocus = false;\n  @State() hasHelpTextSlot = false;\n  @State() hasErrorTextSlot = false;\n  @State() hasLabelSlot = false;\n  @State() isOpen = false;\n  @State() displayLabel = '';\n  @State() displayTags: HTMLSixSelectElement[] = [];\n\n  /** Set to true to enable multiselect. */\n  @Prop() multiple = false;\n\n  /**\n   * The maximum number of tags to show when `multiple` is true. After the maximum, \"+n\" will be shown to indicate the\n   * number of additional items that are selected. Set to -1 to remove the limit.\n   */\n  @Prop() maxTagsVisible = 3;\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 = DEFAULT_DEBOUNCE_FAST;\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 label. Alternatively, you can use the label slot. */\n  @Prop() label = '';\n\n  /** The select's help text. Alternatively, you can use the help-text slot. */\n  @Prop() helpText = '';\n\n  /** The select's error text. Alternatively, you can use the error-text slot. */\n  @Prop() errorText = '';\n\n  /** The select's required attribute. */\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  /** This will be true when the control is in an invalid state. Validity is determined by the `required` prop. */\n  @Prop({ mutable: true }) invalid = false;\n\n  /** Set to render as line */\n  @Prop() line = false;\n\n  /** Set to display the error text on blur and not when typing */\n  @Prop() errorOnBlur = 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  /** The default value the select will be reverted to when reset is executed */\n  @Prop() defaultValue: string | string[] | undefined;\n\n  @Watch('disabled')\n  handleDisabledChange() {\n    if (this.disabled && this.isOpen && this.dropdown != null) {\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.update();\n  }\n\n  @Watch('value')\n  handleValueChange(newValue: unknown, oldValue: unknown) {\n    let items = this.options ?? this.getItems();\n\n    // normalize invalid values. This will re-trigger this watch handler\n    if (!isValidValue(newValue, this.multiple, items)) {\n      this.value = getValue(newValue, this.multiple, items);\n      return;\n    }\n\n    // avoid re-triggering if old and new values are equal. Needed because\n    // watch does a shallow comparison only.\n    if (valueEquals(getValue(oldValue, this.multiple, items), getValue(newValue, this.multiple, items))) {\n      return;\n    }\n\n    this.update();\n    this.sixChange.emit({ value: this.value, isSelected: true });\n  }\n\n  private update() {\n    const items = this.getItems();\n    this.value = getValue(this.value, this.multiple, this.options ?? items);\n\n    if (!Array.isArray(this.value)) {\n      // Sync checked states\n      items.forEach((item) => (item.checked = false));\n      const item = items.find((item) => this.value.includes(item.value));\n      if (item != null) {\n        item.checked = true;\n      }\n\n      // Sync input element content\n      this.displayLabel = this.extractLabelForSelectedItem([this.value], items);\n      this.displayTags = [];\n      const hasSelection = !isValueEmpty(this.value);\n      if (hasSelection) {\n        this.touched = true;\n      }\n      if (this.inputElement && this.touched) {\n        if (!this.autocomplete) {\n          this.inputElement.value = hasSelection ? this.displayLabel : '';\n        } else if (hasSelection) {\n          this.inputElement.value = this.value;\n        }\n        this.inputElement.checkValidity().then((valid) => (this.invalid = !valid));\n      }\n    } else {\n      // Sync checked states\n      items.forEach((item) => (item.checked = this.value.includes(item.value)));\n\n      // Sync display label\n      const checkedItems: HTMLSixMenuItemElement[] = [];\n      this.value.forEach((val) => items.map((item) => (item.value === val ? checkedItems.push(item) : null)));\n\n      this.displayTags = checkedItems.map((item) => {\n        return (\n          <six-tag\n            exportparts=\"base:tag\"\n            type=\"primary\"\n            size={this.size}\n            pill={this.pill}\n            clearable\n            onClick={this.handleTagInteraction}\n            onKeyDown={this.handleTagInteraction}\n            onSix-tag-clear={(event) => {\n              event.stopPropagation();\n              if (!this.disabled) {\n                this.toggleItem(item);\n              }\n            }}\n          >\n            {this.getItemLabel(item)}\n          </six-tag>\n        );\n      });\n\n      if (this.maxTagsVisible > 0 && this.displayTags.length > this.maxTagsVisible) {\n        const total = this.displayTags.length;\n        this.displayLabel = '';\n        this.displayTags = this.displayTags.slice(0, this.maxTagsVisible);\n        this.displayTags.push(\n          <six-tag exportparts=\"base:tag\" type=\"info\" size={this.size}>\n            +{total - this.maxTagsVisible}\n          </six-tag>\n        );\n      }\n\n      // Sync input element content\n      const hasSelection = !isValueEmpty(this.value);\n      if (hasSelection) {\n        this.touched = true;\n      }\n      if (this.inputElement && this.touched) {\n        if (!this.autocomplete) {\n          this.inputElement.value = hasSelection ? this.displayLabel : '';\n        } else if (hasSelection) {\n          this.inputElement.value = this.value.join(',');\n        }\n        this.inputElement.checkValidity().then((valid) => (this.invalid = !valid));\n      }\n    }\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    this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  componentDidLoad() {\n    const inputElement = this.inputElement;\n    if (inputElement == null) {\n      return;\n    }\n    this.resizeObserver = new ResizeObserver(() => this.resizeMenu());\n    this.eventListeners.add(inputElement, 'invalid', async (event) => {\n      if (this.customValidation || (!this.hasErrorTextSlot && this.errorText === '' && this.customErrorText === '')) {\n        this.customErrorText = await inputElement.getValidationMessage();\n      }\n      event.preventDefault();\n    });\n\n    this.eventListeners.add(\n      inputElement,\n      'six-input-input',\n      debounce((event: Event) => {\n        const enteredValue = inputElement.value;\n        this.clearValues();\n        this.sixChange.emit({ value: enteredValue, isSelected: false });\n        event.stopPropagation();\n      }, this.inputDebounce)\n    );\n  }\n\n  disconnectedCallback() {\n    this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.removeAll();\n  }\n\n  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  @Method()\n  async reportValidity() {\n    return this.inputElement?.reportValidity();\n  }\n\n  /** Checks for validity. */\n  @Method()\n  async checkValidity() {\n    return this.inputElement?.isValid();\n  }\n\n  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */\n  @Method()\n  async setCustomValidity(message: string) {\n    this.customErrorText = '';\n    this.customValidation = message !== '';\n    if (this.inputElement != null) {\n      await this.inputElement.setCustomValidity(message);\n      this.invalid = !(await this.inputElement.checkValidity());\n    }\n  }\n\n  /** Resets the formcontrol */\n  @Method()\n  async reset() {\n    this.clearValues();\n    this.customErrorText = '';\n    this.customValidation = false;\n    await this.inputElement?.setCustomValidity('');\n    this.invalid = false;\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 getItems(): HTMLSixMenuItemElement[] {\n    if (this.options !== null) {\n      return this.options.map((option) => <six-menu-item value={option.value}>{option.label}</six-menu-item>);\n    }\n\n    return [...this.host.querySelectorAll('six-menu-item')];\n  }\n\n  private hasMenuItems() {\n    return this.getItems().length > 0;\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 handleInvalid = () => {\n    this.invalid = true;\n  };\n\n  private handleClearClick = (event: MouseEvent) => {\n    event.stopPropagation();\n    this.clearValues();\n  };\n\n  private clearValues() {\n    this.value = this.defaultValue ?? (this.multiple ? [] : '');\n    this.update();\n  }\n\n  private handleSelectAll = (event: KeyboardEvent) => {\n    const nonFilteredItems = this.getItems().filter((item) => item.style.display !== 'none');\n    const keyName = event.key;\n    const keyCode = event.code;\n\n    if (keyName === 'Control') {\n      return;\n    }\n\n    if (this.isOpen && this.multiple && keyCode === 'KeyA' && event.ctrlKey) {\n      event.preventDefault();\n      const hasDeselectedOptions = nonFilteredItems.some((opt) => !opt.disabled && !opt.checked);\n\n      nonFilteredItems\n        .filter((option) => !option.disabled)\n        .forEach((option) => (option.checked = hasDeselectedOptions));\n      const checkedItems = nonFilteredItems.filter((option) => option.checked).map((option) => option.value);\n      this.value = hasDeselectedOptions ? checkedItems : [];\n    }\n  };\n\n  private handleKeyDown = async (event: KeyboardEvent) => {\n    const target = event.target as HTMLElement;\n\n    const items = this.getItems();\n    const firstItem = items[0];\n    const lastItem = items[items.length - 1];\n\n    // Ignore key presses on tags\n    if (target.tagName.toLowerCase() === 'six-tag') {\n      return;\n    }\n\n    // Tabbing out of the control closes it\n    if (event.key === 'Tab') {\n      if (this.isOpen && this.dropdown != null) {\n        await this.dropdown.hide();\n      }\n      return;\n    }\n\n    // Up/down opens the menu\n    if (['ArrowDown', 'ArrowUp'].includes(event.key)) {\n      event.preventDefault();\n\n      // Show the menu if it's not already open\n      if (!this.isOpen && this.dropdown != null) {\n        await this.dropdown.show();\n      }\n\n      // Focus on a menu item\n      if (event.key === 'ArrowDown' && firstItem) {\n        firstItem.setFocus();\n      } else if (event.key === 'ArrowUp' && lastItem) {\n        lastItem.setFocus();\n      }\n    }\n\n    // All other keys open the menu and initiate type to select\n    if (!this.isOpen && this.dropdown != null) {\n      event.stopPropagation();\n      event.preventDefault();\n      await this.dropdown.show();\n      await this.menu?.typeToSelect(event.key);\n    }\n  };\n\n  private handleLabelClick = () => {\n    this.box?.focus();\n  };\n\n  private handleMenuShow = (event: CustomEvent) => {\n    if (this.disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    this.resizeMenu();\n    this.resizeObserver?.observe(this.host);\n    this.isOpen = true;\n  };\n\n  private handleMenuHide = () => {\n    this.resizeObserver?.unobserve(this.host);\n    this.isOpen = false;\n  };\n\n  private handleSlotChange = () => {\n    this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n    this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n    this.update();\n  };\n\n  private handleTagInteraction = (event: KeyboardEvent | MouseEvent) => {\n    // Don't toggle the menu when a tag's clear button is activated\n    const path = event.composedPath() as EventTarget[];\n    const clearButton = path.find((el) => {\n      if (el instanceof HTMLElement) {\n        const element = el as HTMLElement;\n        return element.classList.contains('tag__clear');\n      }\n    });\n\n    if (clearButton) {\n      event.stopPropagation();\n    }\n  };\n\n  private async resizeMenu() {\n    if (this.menu == null || this.box == null) {\n      return;\n    }\n    this.menu.style.minWidth = `${this.box.clientWidth}px`;\n\n    if (this.dropdown) {\n      await this.dropdown.reposition();\n    }\n  }\n\n  private extractLabelForSelectedItem(value: string[], items: HTMLSixMenuItemElement[]): string {\n    if (value.length === 0 || (value.length === 1 && value[0] === '')) {\n      return '';\n    }\n\n    if (this.options !== null) {\n      const selectedOption = this.options.find((item) => item.value === value[0]);\n      return selectedOption?.value || '';\n    }\n\n    const checkedItem = items.find((item) => item.value === value[0]);\n    return checkedItem ? this.getItemLabel(checkedItem) : '';\n  }\n\n  private toggleItem(item: HTMLSixMenuItemElement) {\n    const value = getValue(this.value, this.multiple, this.options ?? this.getItems());\n    if (Array.isArray(value)) {\n      const itemFound = value.find((v) => v === item.value);\n      if (itemFound == null) {\n        this.value = [...this.value, item.value];\n      } else {\n        this.value = value.filter((v) => v !== item.value);\n      }\n    } else {\n      if (item.value === value) {\n        this.value = '';\n      } else {\n        this.value = item.value;\n      }\n    }\n  }\n\n  private displayError() {\n    return this.invalid && (!this.errorOnBlur || (!this.hasFocus && !this.isOpen));\n  }\n\n  render() {\n    const hasSelection = !isValueEmpty(this.value);\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.customErrorText != null ? this.customErrorText : this.errorText}\n        hasErrorTextSlot={this.hasErrorTextSlot}\n        size={this.size}\n        onLabelClick={this.handleLabelClick}\n        disabled={this.disabled}\n        required={this.required}\n        displayError={this.displayError()}\n      >\n        <six-dropdown\n          part=\"base\"\n          ref={(el) => (this.dropdown = el)}\n          hoist={this.hoist}\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.displayLabel === '',\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.handleSelectAll}\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        >\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            onKeyDown={this.handleKeyDown}\n          >\n            <span class=\"select__label\">\n              {this.displayTags.length ? (\n                <span part=\"tags\" class=\"select__tags\">\n                  {this.displayTags}\n                </span>\n              ) : (\n                this.displayLabel || this.placeholder\n              )}\n            </span>\n\n            {this.clearable && hasSelection && (\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            {this.hasMenuItems() && (\n              <span part=\"icon\" class=\"select__icon\">\n                <six-icon size=\"medium\">expand_more</six-icon>\n              </span>\n            )}\n\n            {/*\n              The hidden input tricks the browser's built-in validation so it works as expected. We use an input instead\n              of a select because, otherwise, iOS will show a list of options during validation.\n            */}\n            <six-input\n              ref={(el) => (this.inputElement = el)}\n              class={{\n                select__input: true,\n                'select__hidden-select': !this.autocomplete,\n              }}\n              aria-hidden=\"true\"\n              required={this.required}\n              onInvalid={this.handleInvalid}\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          <six-menu\n            ref={(el) => (this.menu = el)}\n            part=\"menu\"\n            class={{\n              select__menu: true,\n              'select__menu--filtered': this.filter || this.asyncFilter,\n              'select__menu--hidden': !this.hasMenuItems(),\n            }}\n            onSix-menu-item-selected={(event) => this.toggleItem(event.detail.item)}\n            items={this.options}\n            virtualScroll={this.virtualScroll}\n            remove-box-shadow\n          >\n            <slot onSlotchange={this.handleSlotChange} />\n          </six-menu>\n        </six-dropdown>\n      </FormControl>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/ui-library/{p-e9e930d2.entry.js → p-394a2a12.entry.js}

@@ -1,2 +1,2 @@
-import{r as i,c as t,h as o,g as r}from"./p-ac4f4d45.js";import{F as s}from"./p-79eee01b.js";import{h as e}from"./p-b4dfb7cf.js";import{E as n}from"./p-9a860acc.js";const l=':host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none}.form-control--has-label .form-control__label{display:inline-block;color:var(--six-input-label-color);font-weight:var(--six-font-weight-bold);margin-bottom:var(--six-spacing-x-small)}.form-control--has-label .form-control__label__required::after{color:var(--six-color-danger-800);content:"*"}.form-control--has-label.form-control--small .form-control__label{font-size:var(--six-input-label-font-size-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--six-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control_label{font-size:var(--six-input-label-font-size-large)}.form-control--has-help-text .form-control__help-text{display:block;color:var(--six-input-help-text-color);margin-top:var(--six-spacing-x-small)}.form-control--has-help-text .form-control__help-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--has-error-text .form-control__error-text{display:block;color:var(--six-color-danger-800);margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text .form-control__error-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text.form-control--small .form-control__error-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-error-text.form-control--medium .form-control__error-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-error-text.form-control--large .form-control__error-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--disabled .form-control__help-text{color:var(--six-input-help-text-color-disabled)}.form-control--disabled .form-control__label{color:var(--six-input-label-color-disabled)}.form-control--invalid:not(.form-control--disabled) .form-control__label{color:var(--six-input-label-color)}:host{display:block}.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.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;font-family:inherit;font-size:var(--six-input-font-size-medium);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 a={large:"medium",medium:"small",small:"xSmall"};let u=0;const h=class{constructor(o){i(this,o);this.sixChange=t(this,"six-input-change",7);this.sixClear=t(this,"six-input-clear",7);this.sixInput=t(this,"six-input-input",7);this.sixFocus=t(this,"six-input-focus",7);this.sixBlur=t(this,"six-input-blur",7);this.inputId=`input-${++u}`;this.labelId=`input-label-${u}`;this.helpTextId=`input-help-text-${u}`;this.errorTextId=`input-error-text-${u}`;this.customErrorText="";this.customValidation=false;this.eventListeners=new n;this.defaultValue="";this.handleChange=()=>{if(this.nativeInput!=null){this.value=this.nativeInput.value;this.sixChange.emit()}};this.handleInput=()=>{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.handlePasswordToggle=()=>{this.isPasswordVisible=!this.isPasswordVisible};this.handleSlotChange=()=>{this.hasHelpTextSlot=e(this.host,"help-text");this.hasErrorTextSlot=e(this.host,"error-text");this.hasLabelSlot=e(this.host,"label")};this.hasFocus=false;this.hasHelpTextSlot=false;this.hasErrorTextSlot=false;this.hasLabelSlot=false;this.isPasswordVisible=false;this.type="text";this.size="medium";this.name="";this.value="";this.pill=false;this.label="";this.helpText="";this.errorText="";this.placeholder=undefined;this.disabled=false;this.readonly=false;this.minlength=undefined;this.maxlength=undefined;this.min=undefined;this.max=undefined;this.step=undefined;this.pattern=undefined;this.required=false;this.autocapitalize="off";this.autocorrect="off";this.autocomplete="off";this.autofocus=false;this.spellcheck=false;this.invalid=false;this.clearable=false;this.togglePassword=false;this.inputmode=undefined;this.line=false;this.errorOnBlur=false}handleLabelChange(){this.handleSlotChange()}handleValueChange(){this.value=this.getValue();if(this.nativeInput!=null){if(this.nativeInput.value!==this.value){this.nativeInput.value=this.value}this.invalid=!this.nativeInput.checkValidity()}}connectedCallback(){var i;(i=this.host.shadowRoot)===null||i===void 0?void 0:i.addEventListener("slotchange",this.handleSlotChange)}componentWillLoad(){this.defaultValue=this.getValue();this.handleSlotChange()}componentDidLoad(){const i=this.nativeInput;if(i==null){return}this.eventListeners.add(i,"invalid",(t=>{this.invalid=true;if(this.customValidation||!this.hasErrorTextSlot&&this.errorText===""&&this.customErrorText===""){this.customErrorText=i.validationMessage}t.preventDefault()}))}disconnectedCallback(){var i;(i=this.host.shadowRoot)===null||i===void 0?void 0:i.removeEventListener("slotchange",this.handleSlotChange);this.eventListeners.removeAll()}getValue(){var i;return((i=this.value)!==null&&i!==void 0?i:"").toString()}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 setRangeText(i,t,o,r="preserve"){if(this.nativeInput==null){return}this.nativeInput.setRangeText(i,t,o,r);const s=this.getValue();if(s!==this.nativeInput.value){this.value=this.nativeInput.value;this.sixChange.emit();this.sixInput.emit()}}async reportValidity(){var i;return(i=this.nativeInput)===null||i===void 0?void 0:i.reportValidity()}async checkValidity(){if(this.nativeInput==null){return true}return this.nativeInput.validity.valid}async setCustomValidity(i){this.customErrorText="";this.customValidation=i!=="";if(this.nativeInput!=null){this.nativeInput.setCustomValidity(i);this.invalid=!this.nativeInput.checkValidity()}}async getValidity(){var i;return(i=this===null||this===void 0?void 0:this.nativeInput)===null||i===void 0?void 0:i.validity}async isValid(){if(this.nativeInput==null){return true}return this.nativeInput.validity.valid}async getValidationMessage(){if(this.nativeInput==null){return""}return this.nativeInput.validationMessage}async reset(){this.value=this.defaultValue;this.customErrorText="";this.customValidation=false;if(this.nativeInput!=null){this.nativeInput.setCustomValidity("")}this.invalid=false}displayError(){return this.invalid&&(!this.errorOnBlur||!this.hasFocus)}render(){return o(s,{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.customErrorText!=null?this.customErrorText:this.errorText,hasErrorTextSlot:this.hasErrorTextSlot,size:this.size,disabled:this.disabled,required:this.required,displayError:this.displayError()},o("div",{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--focused":this.hasFocus,"input--empty":this.getValue().length===0,"input--invalid":this.invalid}},o("span",{part:"prefix",class:"input__prefix"},o("slot",{name:"prefix"})),o("input",{part:"input",ref:i=>this.nativeInput=i,id:this.inputId,size:1,class:{input__control:true,input__control__prefix:e(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.value,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,"data-testid":"input-control"}),this.clearable&&o("button",{part:"clear-button",class:"input__clear",type:"button",onClick:this.handleClearClick,tabindex:"-1","data-testid":"input-clear-button"},o("slot",{name:"clear-icon"},o("six-icon",{size:a[this.size]},"clear"))),this.togglePassword&&o("button",{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:a[this.size]},"visibility_off")):o("slot",{name:"hide-password-icon"},o("six-icon",{size:a[this.size]},"visibility"))),o("span",{part:"suffix",class:"input__suffix"},o("slot",{name:"suffix"}))))}get host(){return r(this)}static get watchers(){return{helpText:["handleLabelChange"],errorText:["handleLabelChange"],label:["handleLabelChange"],value:["handleValueChange"]}}};h.style=l;export{h as six_input};
-//# sourceMappingURL=p-e9e930d2.entry.js.map
+import{r as i,c as t,h as o,g as r}from"./p-ac4f4d45.js";import{F as s}from"./p-79eee01b.js";import{h as e}from"./p-b4dfb7cf.js";import{E as n}from"./p-9a860acc.js";const l=':host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none}.form-control--has-label .form-control__label{display:inline-block;color:var(--six-input-label-color);font-weight:var(--six-font-weight-bold);margin-bottom:var(--six-spacing-x-small)}.form-control--has-label .form-control__label__required::after{color:var(--six-color-danger-800);content:"*"}.form-control--has-label.form-control--small .form-control__label{font-size:var(--six-input-label-font-size-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--six-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control_label{font-size:var(--six-input-label-font-size-large)}.form-control--has-help-text .form-control__help-text{display:block;color:var(--six-input-help-text-color);margin-top:var(--six-spacing-x-small)}.form-control--has-help-text .form-control__help-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--has-error-text .form-control__error-text{display:block;color:var(--six-color-danger-800);margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text .form-control__error-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text.form-control--small .form-control__error-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-error-text.form-control--medium .form-control__error-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-error-text.form-control--large .form-control__error-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--disabled .form-control__help-text{color:var(--six-input-help-text-color-disabled)}.form-control--disabled .form-control__label{color:var(--six-input-label-color-disabled)}.form-control--invalid:not(.form-control--disabled) .form-control__label{color:var(--six-input-label-color)}:host{display:block}.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.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;font-family:inherit;font-size:var(--six-input-font-size-medium);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 a={large:"medium",medium:"small",small:"xSmall"};let u=0;const h=class{constructor(o){i(this,o);this.sixChange=t(this,"six-input-change",7);this.sixClear=t(this,"six-input-clear",7);this.sixInput=t(this,"six-input-input",7);this.sixFocus=t(this,"six-input-focus",7);this.sixBlur=t(this,"six-input-blur",7);this.inputId=`input-${++u}`;this.labelId=`input-label-${u}`;this.helpTextId=`input-help-text-${u}`;this.errorTextId=`input-error-text-${u}`;this.customErrorText="";this.customValidation=false;this.eventListeners=new n;this.defaultValue="";this.handleChange=()=>{if(this.nativeInput!=null){this.value=this.nativeInput.value;this.sixChange.emit()}};this.handleInput=()=>{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.handlePasswordToggle=()=>{this.isPasswordVisible=!this.isPasswordVisible};this.handleSlotChange=()=>{this.hasHelpTextSlot=e(this.host,"help-text");this.hasErrorTextSlot=e(this.host,"error-text");this.hasLabelSlot=e(this.host,"label")};this.hasFocus=false;this.hasHelpTextSlot=false;this.hasErrorTextSlot=false;this.hasLabelSlot=false;this.isPasswordVisible=false;this.type="text";this.size="medium";this.name="";this.value="";this.pill=false;this.label="";this.helpText="";this.errorText="";this.placeholder=undefined;this.disabled=false;this.readonly=false;this.minlength=undefined;this.maxlength=undefined;this.min=undefined;this.max=undefined;this.step=undefined;this.pattern=undefined;this.required=false;this.autocapitalize="off";this.autocorrect="off";this.autocomplete="off";this.autofocus=false;this.spellcheck=false;this.invalid=false;this.clearable=false;this.togglePassword=false;this.inputmode=undefined;this.line=false;this.errorOnBlur=false}handleLabelChange(){this.handleSlotChange()}handleValueChange(){this.value=this.getValue();if(this.nativeInput!=null){if(this.nativeInput.value!==this.value){this.nativeInput.value=this.value}this.invalid=!this.nativeInput.checkValidity()}}connectedCallback(){var i;(i=this.host.shadowRoot)===null||i===void 0?void 0:i.addEventListener("slotchange",this.handleSlotChange)}componentWillLoad(){this.defaultValue=this.getValue();this.handleSlotChange()}componentDidLoad(){const i=this.nativeInput;if(i==null){return}this.eventListeners.add(i,"invalid",(t=>{this.invalid=true;if(this.customValidation||!this.hasErrorTextSlot&&this.errorText===""&&this.customErrorText===""){this.customErrorText=i.validationMessage}t.preventDefault()}))}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 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()}}async reportValidity(){var i;return(i=this.nativeInput)===null||i===void 0?void 0:i.reportValidity()}async checkValidity(){if(this.nativeInput==null){return true}return this.nativeInput.validity.valid}async setCustomValidity(i){this.customErrorText="";this.customValidation=i!=="";if(this.nativeInput!=null){this.nativeInput.setCustomValidity(i);this.invalid=!this.nativeInput.checkValidity()}}async getValidity(){var i;return(i=this===null||this===void 0?void 0:this.nativeInput)===null||i===void 0?void 0:i.validity}async isValid(){if(this.nativeInput==null){return true}return this.nativeInput.validity.valid}async getValidationMessage(){if(this.nativeInput==null){return""}return this.nativeInput.validationMessage}async reset(){var i;this.value=this.defaultValue;this.customErrorText="";this.customValidation=false;(i=this.nativeInput)===null||i===void 0?void 0:i.setCustomValidity("");this.invalid=false}displayError(){return this.invalid&&(!this.errorOnBlur||!this.hasFocus)}getValue(){var i;return((i=this.value)!==null&&i!==void 0?i:"").toString()}render(){return o(s,{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.customErrorText!=null?this.customErrorText:this.errorText,hasErrorTextSlot:this.hasErrorTextSlot,size:this.size,disabled:this.disabled,required:this.required,displayError:this.displayError()},o("div",{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--focused":this.hasFocus,"input--empty":this.getValue().length===0,"input--invalid":this.invalid}},o("span",{part:"prefix",class:"input__prefix"},o("slot",{name:"prefix"})),o("input",{part:"input",ref:i=>this.nativeInput=i,id:this.inputId,size:1,class:{input__control:true,input__control__prefix:e(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,"data-testid":"input-control"}),this.clearable&&o("button",{part:"clear-button",class:"input__clear",type:"button",onClick:this.handleClearClick,tabindex:"-1","data-testid":"input-clear-button"},o("slot",{name:"clear-icon"},o("six-icon",{size:a[this.size]},"clear"))),this.togglePassword&&o("button",{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:a[this.size]},"visibility_off")):o("slot",{name:"hide-password-icon"},o("six-icon",{size:a[this.size]},"visibility"))),o("span",{part:"suffix",class:"input__suffix"},o("slot",{name:"suffix"}))))}get host(){return r(this)}static get watchers(){return{helpText:["handleLabelChange"],errorText:["handleLabelChange"],label:["handleLabelChange"],value:["handleValueChange"]}}};h.style=l;export{h as six_input};
+//# sourceMappingURL=p-394a2a12.entry.js.map

package/dist/ui-library/{p-e9e930d2.entry.js.map → p-394a2a12.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["sixInputCss","ICON_SIZES","large","medium","small","id","SixInput","this","inputId","labelId","helpTextId","errorTextId","customErrorText","customValidation","eventListeners","EventListeners","defaultValue","handleChange","nativeInput","value","sixChange","emit","handleInput","sixInput","handleBlur","hasFocus","sixBlur","handleFocus","sixFocus","handleClearClick","event","sixClear","focus","stopPropagation","handlePasswordToggle","isPasswordVisible","handleSlotChange","hasHelpTextSlot","hasSlot","host","hasErrorTextSlot","hasLabelSlot","handleLabelChange","handleValueChange","getValue","invalid","checkValidity","connectedCallback","_a","shadowRoot","addEventListener","componentWillLoad","componentDidLoad","add","errorText","validationMessage","preventDefault","disconnectedCallback","removeEventListener","removeAll","toString","async","options","blur","select","selectionStart","selectionEnd","selectionDirection","setSelectionRange","replacement","start","end","selectMode","setRangeText","reportValidity","validity","valid","message","setCustomValidity","displayError","errorOnBlur","render","h","FormControl","label","helpText","size","disabled","required","part","class","input","line","pill","length","name","ref","el","input__control","input__control__prefix","type","placeholder","readonly","minLength","minlength","maxLength","maxlength","min","max","step","autoCapitalize","autocapitalize","autoComplete","autocomplete","autoCorrect","autocorrect","autoFocus","autofocus","spellcheck","pattern","inputMode","inputmode","onChange","onInput","onFocus","onBlur","clearable","onClick","tabindex","togglePassword"],"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: var(--six-transition-fast) color, var(--six-transition-fast) border, 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  &.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  font-family: inherit;\n  font-size: var(--six-input-font-size-medium);\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';\n\nconst ICON_SIZES: Record<'small' | 'medium' | 'large', 'xSmall' | 'small' | 'medium'> = {\n  large: 'medium',\n  medium: 'small',\n  small: 'xSmall',\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 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, input, 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 */\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 customErrorText = '';\n  private customValidation = false;\n  private eventListeners = new EventListeners();\n\n  @Element() host!: HTMLSixInputElement;\n\n  @State() hasFocus = false;\n  @State() hasHelpTextSlot = false;\n  @State() hasErrorTextSlot = false;\n  @State() hasLabelSlot = 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 label. Alternatively, you can use the label slot. */\n  @Prop() label = '';\n\n  /** The input's help text. Alternatively, you can use the help-text slot. */\n  @Prop() helpText = '';\n\n  /** The input's error text. Alternatively, you can use the error-text slot. */\n  @Prop() errorText = '';\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  /** Set to true to make the input a required field. */\n  @Prop({ reflect: true }) 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  /**\n   * This will be true when the control is in an invalid state. Validity is determined by props such as `type`,\n   * `required`, `minlength`, `maxlength`, and `pattern` using the browser's constraint validation API.\n   */\n  @Prop({ mutable: true, 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  /** Set to display the error text on blur and not when typing */\n  @Prop() errorOnBlur = 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) {\n      if (this.nativeInput.value !== this.value) {\n        this.nativeInput.value = this.value;\n      }\n      this.invalid = !this.nativeInput.checkValidity();\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  /** defaultValue which the input will be reverted to when executing reset */\n  private defaultValue = '';\n\n  connectedCallback() {\n    this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n  }\n\n  componentWillLoad() {\n    this.defaultValue = this.getValue();\n    this.handleSlotChange();\n  }\n\n  componentDidLoad() {\n    const nativeInput = this.nativeInput;\n    if (nativeInput == null) {\n      return;\n    }\n    this.eventListeners.add(nativeInput, 'invalid', (event) => {\n      this.invalid = true;\n      if (this.customValidation || (!this.hasErrorTextSlot && this.errorText === '' && this.customErrorText === '')) {\n        this.customErrorText = nativeInput.validationMessage;\n      }\n      event.preventDefault();\n    });\n  }\n\n  disconnectedCallback() {\n    this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.removeAll();\n  }\n\n  private getValue(): string {\n    return (this.value ?? '').toString();\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: 'forward' | 'backward' | 'none' = 'none'\n  ) {\n    return this.nativeInput?.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.nativeInput == null) {\n      return;\n    }\n\n    this.nativeInput.setRangeText(replacement, start, end, selectMode);\n    const value = this.getValue();\n    if (value !== this.nativeInput.value) {\n      this.value = this.nativeInput.value;\n      this.sixChange.emit();\n      this.sixInput.emit();\n    }\n  }\n\n  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  @Method()\n  async reportValidity() {\n    return this.nativeInput?.reportValidity();\n  }\n\n  /** Checks for validity. */\n  @Method()\n  async checkValidity(): Promise<boolean> {\n    if (this.nativeInput == null) {\n      return true;\n    }\n    return this.nativeInput.validity.valid;\n  }\n\n  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */\n  @Method()\n  async setCustomValidity(message: string) {\n    this.customErrorText = '';\n    this.customValidation = message !== '';\n    if (this.nativeInput != null) {\n      this.nativeInput.setCustomValidity(message);\n      this.invalid = !this.nativeInput.checkValidity();\n    }\n  }\n\n  /** Returns the native input's validity */\n  @Method()\n  async getValidity(): Promise<ValidityState | undefined> {\n    return this?.nativeInput?.validity;\n  }\n\n  /** Returns the native input's validity */\n  @Method()\n  async isValid(): Promise<boolean> {\n    if (this.nativeInput == null) {\n      return true;\n    }\n    return this.nativeInput.validity.valid;\n  }\n\n  /** Returns the native input's validationMessage */\n  @Method()\n  async getValidationMessage() {\n    if (this.nativeInput == null) {\n      return '';\n    }\n    return this.nativeInput.validationMessage;\n  }\n\n  /** Resets the formcontrol */\n  @Method()\n  async reset() {\n    this.value = this.defaultValue;\n    this.customErrorText = '';\n    this.customValidation = false;\n    if (this.nativeInput != null) {\n      this.nativeInput.setCustomValidity('');\n    }\n    this.invalid = false;\n  }\n\n  private handleChange = () => {\n    if (this.nativeInput != null) {\n      this.value = this.nativeInput.value;\n      this.sixChange.emit();\n    }\n  };\n\n  private handleInput = () => {\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 handlePasswordToggle = () => {\n    this.isPasswordVisible = !this.isPasswordVisible;\n  };\n\n  private handleSlotChange = () => {\n    this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n    this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n  };\n\n  private displayError() {\n    return this.invalid && (!this.errorOnBlur || !this.hasFocus);\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.customErrorText != null ? this.customErrorText : this.errorText}\n        hasErrorTextSlot={this.hasErrorTextSlot}\n        size={this.size}\n        disabled={this.disabled}\n        required={this.required}\n        displayError={this.displayError()}\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--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.value}\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            data-testid=\"input-control\"\n          />\n\n          {this.clearable && (\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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"}
+{"version":3,"names":["sixInputCss","ICON_SIZES","large","medium","small","id","SixInput","this","inputId","labelId","helpTextId","errorTextId","customErrorText","customValidation","eventListeners","EventListeners","defaultValue","handleChange","nativeInput","value","sixChange","emit","handleInput","sixInput","handleBlur","hasFocus","sixBlur","handleFocus","sixFocus","handleClearClick","event","sixClear","focus","stopPropagation","handlePasswordToggle","isPasswordVisible","handleSlotChange","hasHelpTextSlot","hasSlot","host","hasErrorTextSlot","hasLabelSlot","handleLabelChange","handleValueChange","getValue","invalid","checkValidity","connectedCallback","_a","shadowRoot","addEventListener","componentWillLoad","componentDidLoad","add","errorText","validationMessage","preventDefault","disconnectedCallback","removeEventListener","removeAll","async","options","blur","select","selectionStart","selectionEnd","selectionDirection","setSelectionRange","replacement","start","end","selectMode","setRangeText","reportValidity","validity","valid","message","setCustomValidity","displayError","errorOnBlur","toString","render","h","FormControl","label","helpText","size","disabled","required","part","class","input","line","pill","length","name","ref","el","input__control","input__control__prefix","type","placeholder","readonly","minLength","minlength","maxLength","maxlength","min","max","step","autoCapitalize","autocapitalize","autoComplete","autocomplete","autoCorrect","autocorrect","autoFocus","autofocus","spellcheck","pattern","inputMode","inputmode","onChange","onInput","onFocus","onBlur","clearable","onClick","tabindex","togglePassword"],"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: var(--six-transition-fast) color, var(--six-transition-fast) border, 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  &.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  font-family: inherit;\n  font-size: var(--six-input-font-size-medium);\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';\n\nconst ICON_SIZES: Record<'small' | 'medium' | 'large', 'xSmall' | 'small' | 'medium'> = {\n  large: 'medium',\n  medium: 'small',\n  small: 'xSmall',\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 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, input, 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 */\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 customErrorText = '';\n  private customValidation = false;\n  private eventListeners = new EventListeners();\n\n  @Element() host!: HTMLSixInputElement;\n\n  @State() hasFocus = false;\n  @State() hasHelpTextSlot = false;\n  @State() hasErrorTextSlot = false;\n  @State() hasLabelSlot = 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 label. Alternatively, you can use the label slot. */\n  @Prop() label = '';\n\n  /** The input's help text. Alternatively, you can use the help-text slot. */\n  @Prop() helpText = '';\n\n  /** The input's error text. Alternatively, you can use the error-text slot. */\n  @Prop() errorText = '';\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  /** Set to true to make the input a required field. */\n  @Prop({ reflect: true }) 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  /**\n   * This will be true when the control is in an invalid state. Validity is determined by props such as `type`,\n   * `required`, `minlength`, `maxlength`, and `pattern` using the browser's constraint validation API.\n   */\n  @Prop({ mutable: true, 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  /** Set to display the error text on blur and not when typing */\n  @Prop() errorOnBlur = 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) {\n      if (this.nativeInput.value !== this.value) {\n        this.nativeInput.value = this.value;\n      }\n      this.invalid = !this.nativeInput.checkValidity();\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  /** defaultValue which the input will be reverted to when executing reset */\n  private defaultValue = '';\n\n  connectedCallback() {\n    this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n  }\n\n  componentWillLoad() {\n    this.defaultValue = this.getValue();\n    this.handleSlotChange();\n  }\n\n  componentDidLoad() {\n    const nativeInput = this.nativeInput;\n    if (nativeInput == null) {\n      return;\n    }\n    this.eventListeners.add(nativeInput, 'invalid', (event) => {\n      this.invalid = true;\n      if (this.customValidation || (!this.hasErrorTextSlot && this.errorText === '' && this.customErrorText === '')) {\n        this.customErrorText = nativeInput.validationMessage;\n      }\n      event.preventDefault();\n    });\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: 'forward' | 'backward' | 'none' = 'none'\n  ) {\n    return this.nativeInput?.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.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  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  @Method()\n  async reportValidity() {\n    return this.nativeInput?.reportValidity();\n  }\n\n  /** Checks for validity. */\n  @Method()\n  async checkValidity(): Promise<boolean> {\n    if (this.nativeInput == null) {\n      return true;\n    }\n    return this.nativeInput.validity.valid;\n  }\n\n  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */\n  @Method()\n  async setCustomValidity(message: string) {\n    this.customErrorText = '';\n    this.customValidation = message !== '';\n    if (this.nativeInput != null) {\n      this.nativeInput.setCustomValidity(message);\n      this.invalid = !this.nativeInput.checkValidity();\n    }\n  }\n\n  /** Returns the native input's validity */\n  @Method()\n  async getValidity(): Promise<ValidityState | undefined> {\n    return this?.nativeInput?.validity;\n  }\n\n  /** Returns the native input's validity */\n  @Method()\n  async isValid(): Promise<boolean> {\n    if (this.nativeInput == null) {\n      return true;\n    }\n    return this.nativeInput.validity.valid;\n  }\n\n  /** Returns the native input's validationMessage */\n  @Method()\n  async getValidationMessage() {\n    if (this.nativeInput == null) {\n      return '';\n    }\n    return this.nativeInput.validationMessage;\n  }\n\n  /** Resets the formcontrol */\n  @Method()\n  async reset() {\n    this.value = this.defaultValue;\n    this.customErrorText = '';\n    this.customValidation = false;\n    this.nativeInput?.setCustomValidity('');\n    this.invalid = false;\n  }\n\n  private handleChange = () => {\n    if (this.nativeInput != null) {\n      this.value = this.nativeInput.value;\n      this.sixChange.emit();\n    }\n  };\n\n  private handleInput = () => {\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 handlePasswordToggle = () => {\n    this.isPasswordVisible = !this.isPasswordVisible;\n  };\n\n  private handleSlotChange = () => {\n    this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n    this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n  };\n\n  private displayError() {\n    return this.invalid && (!this.errorOnBlur || !this.hasFocus);\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.customErrorText != null ? this.customErrorText : this.errorText}\n        hasErrorTextSlot={this.hasErrorTextSlot}\n        size={this.size}\n        disabled={this.disabled}\n        required={this.required}\n        displayError={this.displayError()}\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--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            data-testid=\"input-control\"\n          />\n\n          {this.clearable && (\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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"}

package/dist/ui-library/{p-7e0cc4ae.entry.js → p-3c635d0a.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as o,h as r,g as i}from"./p-ac4f4d45.js";import{F as e}from"./p-79eee01b.js";import{h as s}from"./p-b4dfb7cf.js";import{E as a}from"./p-9a860acc.js";const l=':host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none}.form-control--has-label .form-control__label{display:inline-block;color:var(--six-input-label-color);font-weight:var(--six-font-weight-bold);margin-bottom:var(--six-spacing-x-small)}.form-control--has-label .form-control__label__required::after{color:var(--six-color-danger-800);content:"*"}.form-control--has-label.form-control--small .form-control__label{font-size:var(--six-input-label-font-size-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--six-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control_label{font-size:var(--six-input-label-font-size-large)}.form-control--has-help-text .form-control__help-text{display:block;color:var(--six-input-help-text-color);margin-top:var(--six-spacing-x-small)}.form-control--has-help-text .form-control__help-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--has-error-text .form-control__error-text{display:block;color:var(--six-color-danger-800);margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text .form-control__error-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text.form-control--small .form-control__error-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-error-text.form-control--medium .form-control__error-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-error-text.form-control--large .form-control__error-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--disabled .form-control__help-text{color:var(--six-input-help-text-color-disabled)}.form-control--disabled .form-control__label{color:var(--six-input-label-color-disabled)}.form-control--invalid:not(.form-control--disabled) .form-control__label{color:var(--six-input-label-color)}:host{--thumb-size:14px;--tooltip-offset-y:10px;--track-color:var(--six-color-web-rock-900);--thumb-color:var(--six-color-web-rock-900);--track-height:3px;display:block}.range{position:relative}.range .range__control{-webkit-appearance:none;width:100%;height:var(--six-input-height-medium);background:transparent;line-height:var(--six-input-height-medium);vertical-align:middle}.range .range__control::-webkit-slider-runnable-track{width:100%;height:var(--track-height);border-radius:3px;border:none}.range .range__control::-webkit-slider-thumb{border:none;width:var(--thumb-size);height:var(--thumb-size);border-radius:50%;background-color:var(--thumb-color);-webkit-appearance:none;margin-top:calc(var(--thumb-size) / -2 + var(--track-height) / 2);transition:var(--six-transition-fast) border-color, var(--six-transition-fast) background-color, var(--six-transition-fast) color, var(--six-transition-fast) box-shadow, var(--six-transition-fast) transform;cursor:pointer}.range .range__control:not(:disabled)::-webkit-slider-thumb:hover{background-color:var(--thumb-color)}.range .range__control:not(:disabled):focus::-webkit-slider-thumb{background-color:var(--thumb-color)}.range .range__control:not(:disabled)::-webkit-slider-thumb:active{background-color:var(--thumb-color);cursor:grabbing}.range .range__control::-moz-focus-outer{border:0}.range .range__control::-moz-range-track{width:100%;height:var(--track-height);background-color:var(--six-progress-track-color);border-radius:3px;border:none}.range .range__control::-moz-range-progress{height:var(--track-height);border-radius:3px;background-color:var(--track-color);border:none}.range .range__control::-moz-range-thumb{border:none;height:var(--thumb-size);width:var(--thumb-size);border-radius:50%;background-color:var(--thumb-color);transition:var(--six-transition-fast) border-color, var(--six-transition-fast) background-color, var(--six-transition-fast) color, var(--six-transition-fast) box-shadow, var(--six-transition-fast) transform;cursor:pointer}.range .range__control:not(:disabled)::-moz-range-thumb:hover{background-color:var(--thumb-color)}.range .range__control:not(:disabled):focus::-moz-range-thumb{background-color:var(--thumb-color)}.range .range__control:not(:disabled)::-moz-range-thumb:active{background-color:var(--thumb-color);cursor:grabbing}.range .range__control:focus{outline:none}.range .range__control:disabled::-webkit-slider-thumb{cursor:not-allowed;color:var(--six-color-web-rock-300);border-color:var(--six-color-web-rock-300);background-color:var(--six-color-web-rock-300)}.range .range__control:disabled::-moz-range-thumb{cursor:not-allowed;color:var(--six-color-web-rock-300);border-color:var(--six-color-web-rock-300);background-color:var(--six-color-web-rock-300)}.range__tooltip{position:absolute;z-index:var(--six-z-index-tooltip);left:1px;border-radius:var(--six-border-radius-medium);background-color:var(--six-color-web-rock-900);font-family:var(--six-font-family);font-size:var(--six-tooltip-font-size);font-weight:var(--six-tooltip-font-weight);line-height:var(--six-tooltip-line-height);color:var(--six-color-white);opacity:0;padding:var(--six-spacing-xxx-small) var(--six-spacing-xx-small);transition:var(--six-transition-fast) opacity;pointer-events:none}.range__tooltip::after{content:"";position:absolute;width:0;height:0;left:50%;margin-left:calc(-1 * var(--six-tooltip-arrow-size))}.range--tooltip-visible .range__tooltip{opacity:1}.range--tooltip-top .range__tooltip{top:calc(-1 * var(--thumb-size) - var(--tooltip-offset-y))}.range--tooltip-top .range__tooltip::after{border-top:var(--six-tooltip-arrow-size) solid var(--six-color-web-rock-900);border-left:var(--six-tooltip-arrow-size) solid transparent;border-right:var(--six-tooltip-arrow-size) solid transparent;top:100%}.range--tooltip-bottom .range__tooltip{bottom:calc(-1 * var(--thumb-size) - var(--tooltip-offset-y))}.range--tooltip-bottom .range__tooltip::after{border-bottom:var(--six-tooltip-arrow-size) solid var(--six-color-web-rock-900);border-left:var(--six-tooltip-arrow-size) solid transparent;border-right:var(--six-tooltip-arrow-size) solid transparent;bottom:100%}';let n=0;const h=class{constructor(r){t(this,r);this.sixChange=o(this,"six-range-change",7);this.sixBlur=o(this,"six-range-blur",7);this.sixFocus=o(this,"six-range-focus",7);this.inputId=`input-${++n}`;this.labelId=`input-label-${n}`;this.helpTextId=`input-help-text-${n}`;this.errorTextId=`input-error-text-${n}`;this.customErrorText="";this.customValidation=false;this.eventListeners=new a;this.defaultValue=0;this.hasFocus=false;this.hasHelpTextSlot=false;this.hasLabelSlot=false;this.hasErrorTextSlot=false;this.hasTooltip=false;this.name="";this.value=undefined;this.required=undefined;this.label="";this.helpText="";this.errorText="";this.disabled=false;this.invalid=false;this.min=0;this.max=100;this.step=1;this.tooltip="top";this.tooltipFormatter=t=>t.toString();this.errorOnBlur=false}handleLabelChange(){this.handleSlotChange()}handleValueChange(){if(this.input){this.input.value=this.value;this.calculateColorRunnableTrack()}this.invalid=this.input?!this.input.checkValidity():false}connectedCallback(){this.handleInput=this.handleInput.bind(this);this.handleBlur=this.handleBlur.bind(this);this.handleFocus=this.handleFocus.bind(this);this.handleSlotChange=this.handleSlotChange.bind(this);this.handleTouchStart=this.handleTouchStart.bind(this);this.host.shadowRoot.addEventListener("slotchange",this.handleSlotChange)}componentWillLoad(){if(this.value===undefined||this.value===null)this.value=this.min;if(this.value<this.min)this.value=this.min;if(this.value>this.max)this.value=this.max;this.defaultValue=this.value;this.handleSlotChange()}componentDidLoad(){this.syncTooltip();this.calculateColorRunnableTrack();this.resizeObserver=new ResizeObserver((()=>this.syncTooltip()));this.eventListeners.add(this.input,"invalid",(t=>{if(this.customValidation||!this.hasErrorTextSlot&&!this.errorText&&!this.customErrorText){this.customErrorText=this.input.validationMessage}t.preventDefault()}))}disconnectedCallback(){this.host.shadowRoot.removeEventListener("slotchange",this.handleSlotChange);this.eventListeners.removeAll()}async setFocus(t){this.input.focus(t)}async removeFocus(){this.input.blur()}async setCustomValidity(t){this.customErrorText="";this.customValidation=t!=="";this.input.setCustomValidity(t);this.invalid=!this.input.checkValidity()}async reset(){this.value=this.defaultValue;this.customErrorText="";this.customValidation=false;this.input.setCustomValidity("");this.invalid=false}handleInput(){this.value=Number(this.input.value);this.sixChange.emit();requestAnimationFrame((()=>this.syncTooltip()));requestAnimationFrame((()=>this.calculateColorRunnableTrack()))}handleBlur(){this.hasFocus=false;this.hasTooltip=false;this.sixBlur.emit();this.resizeObserver.unobserve(this.input)}handleFocus(){this.hasFocus=true;this.hasTooltip=true;this.sixFocus.emit();this.resizeObserver.observe(this.input)}handleSlotChange(){this.hasHelpTextSlot=s(this.host,"help-text");this.hasErrorTextSlot=s(this.host,"error-text");this.hasLabelSlot=s(this.host,"label")}handleTouchStart(){this.setFocus()}displayError(){return this.invalid&&(!this.errorOnBlur||!this.hasFocus)}syncTooltip(){if(this.tooltip!=="none"){const t=Math.max(0,(this.value-this.min)/(this.max-this.min));const o=this.input.offsetWidth;const r=this.output.offsetWidth;const i=getComputedStyle(this.input).getPropertyValue("--thumb-size");const e=`calc(${o*t}px - calc(calc(${t} * ${i}) - calc(${i} / 2)))`;this.output.style.transform=`translateX(${e})`;this.output.style.marginLeft=`-${r/2}px`}}calculateColorRunnableTrack(){if(!this.isFirefox()){const t=parseInt(this.input.value,10);const o=parseInt(this.input.min,10);const r=parseInt(this.input.max,10);const i=Math.ceil((t-o)/(r-o)*100);this.input.style.background="-webkit-linear-gradient(left, var(--track-color) 0%, var(--track-color) "+i+"%, var(--six-color-web-rock-300) "+i+"%)"}}isFirefox(){return navigator.userAgent.toLowerCase().indexOf("firefox")>-1}render(){return r(e,{inputId:this.inputId,label:this.label,labelId:this.labelId,hasLabelSlot:this.hasLabelSlot,helpTextId:this.helpTextId,helpText:this.helpText,hasHelpTextSlot:this.hasHelpTextSlot,size:"medium",errorTextId:this.errorTextId,errorText:this.customErrorText?this.customErrorText:this.errorText,hasErrorTextSlot:this.hasErrorTextSlot,disabled:this.disabled,required:this.required,displayError:this.displayError()},r("div",{part:"base",class:{range:true,"range--disabled":this.disabled,"range--focused":this.hasFocus,"range--tooltip-visible":this.hasTooltip,"range--tooltip-top":this.tooltip==="top","range--tooltip-bottom":this.tooltip==="bottom"},onTouchStart:this.handleTouchStart},r("input",{part:"input",ref:t=>this.input=t,type:"range",class:"range__control",name:this.name,disabled:this.disabled,min:this.min,max:this.max,step:this.step,value:this.value,onInput:this.handleInput,onFocus:this.handleFocus,onBlur:this.handleBlur}),this.tooltip!=="none"&&r("output",{part:"tooltip",ref:t=>this.output=t,class:"range__tooltip"},this.tooltipFormatter(this.value))))}get host(){return i(this)}static get watchers(){return{label:["handleLabelChange"],errorText:["handleLabelChange"],helpText:["handleLabelChange"],value:["handleValueChange"]}}};h.style=l;export{h as six_range};
-//# sourceMappingURL=p-7e0cc4ae.entry.js.map
+import{r as t,c as o,h as r,g as i}from"./p-ac4f4d45.js";import{F as e}from"./p-79eee01b.js";import{h as s}from"./p-b4dfb7cf.js";import{E as a}from"./p-9a860acc.js";const l=':host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none}.form-control--has-label .form-control__label{display:inline-block;color:var(--six-input-label-color);font-weight:var(--six-font-weight-bold);margin-bottom:var(--six-spacing-x-small)}.form-control--has-label .form-control__label__required::after{color:var(--six-color-danger-800);content:"*"}.form-control--has-label.form-control--small .form-control__label{font-size:var(--six-input-label-font-size-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--six-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control_label{font-size:var(--six-input-label-font-size-large)}.form-control--has-help-text .form-control__help-text{display:block;color:var(--six-input-help-text-color);margin-top:var(--six-spacing-x-small)}.form-control--has-help-text .form-control__help-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--has-error-text .form-control__error-text{display:block;color:var(--six-color-danger-800);margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text .form-control__error-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text.form-control--small .form-control__error-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-error-text.form-control--medium .form-control__error-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-error-text.form-control--large .form-control__error-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--disabled .form-control__help-text{color:var(--six-input-help-text-color-disabled)}.form-control--disabled .form-control__label{color:var(--six-input-label-color-disabled)}.form-control--invalid:not(.form-control--disabled) .form-control__label{color:var(--six-input-label-color)}:host{--thumb-size:14px;--tooltip-offset-y:10px;--track-color:var(--six-color-web-rock-900);--thumb-color:var(--six-color-web-rock-900);--track-height:3px;display:block}.range{position:relative}.range .range__control{-webkit-appearance:none;width:100%;height:var(--six-input-height-medium);background:transparent;line-height:var(--six-input-height-medium);vertical-align:middle}.range .range__control::-webkit-slider-runnable-track{width:100%;height:var(--track-height);border-radius:3px;border:none}.range .range__control::-webkit-slider-thumb{border:none;width:var(--thumb-size);height:var(--thumb-size);border-radius:50%;background-color:var(--thumb-color);-webkit-appearance:none;margin-top:calc(var(--thumb-size) / -2 + var(--track-height) / 2);transition:var(--six-transition-fast) border-color, var(--six-transition-fast) background-color, var(--six-transition-fast) color, var(--six-transition-fast) box-shadow, var(--six-transition-fast) transform;cursor:pointer}.range .range__control:not(:disabled)::-webkit-slider-thumb:hover{background-color:var(--thumb-color)}.range .range__control:not(:disabled):focus::-webkit-slider-thumb{background-color:var(--thumb-color)}.range .range__control:not(:disabled)::-webkit-slider-thumb:active{background-color:var(--thumb-color);cursor:grabbing}.range .range__control::-moz-focus-outer{border:0}.range .range__control::-moz-range-track{width:100%;height:var(--track-height);background-color:var(--six-progress-track-color);border-radius:3px;border:none}.range .range__control::-moz-range-progress{height:var(--track-height);border-radius:3px;background-color:var(--track-color);border:none}.range .range__control::-moz-range-thumb{border:none;height:var(--thumb-size);width:var(--thumb-size);border-radius:50%;background-color:var(--thumb-color);transition:var(--six-transition-fast) border-color, var(--six-transition-fast) background-color, var(--six-transition-fast) color, var(--six-transition-fast) box-shadow, var(--six-transition-fast) transform;cursor:pointer}.range .range__control:not(:disabled)::-moz-range-thumb:hover{background-color:var(--thumb-color)}.range .range__control:not(:disabled):focus::-moz-range-thumb{background-color:var(--thumb-color)}.range .range__control:not(:disabled)::-moz-range-thumb:active{background-color:var(--thumb-color);cursor:grabbing}.range .range__control:focus{outline:none}.range .range__control:disabled::-webkit-slider-thumb{cursor:not-allowed;color:var(--six-color-web-rock-300);border-color:var(--six-color-web-rock-300);background-color:var(--six-color-web-rock-300)}.range .range__control:disabled::-moz-range-thumb{cursor:not-allowed;color:var(--six-color-web-rock-300);border-color:var(--six-color-web-rock-300);background-color:var(--six-color-web-rock-300)}.range__tooltip{position:absolute;z-index:var(--six-z-index-tooltip);left:1px;border-radius:var(--six-border-radius-medium);background-color:var(--six-color-web-rock-900);font-family:var(--six-font-family);font-size:var(--six-tooltip-font-size);font-weight:var(--six-tooltip-font-weight);line-height:var(--six-tooltip-line-height);color:var(--six-color-white);opacity:0;padding:var(--six-spacing-xxx-small) var(--six-spacing-xx-small);transition:var(--six-transition-fast) opacity;pointer-events:none}.range__tooltip::after{content:"";position:absolute;width:0;height:0;left:50%;margin-left:calc(-1 * var(--six-tooltip-arrow-size))}.range--tooltip-visible .range__tooltip{opacity:1}.range--tooltip-top .range__tooltip{top:calc(-1 * var(--thumb-size) - var(--tooltip-offset-y))}.range--tooltip-top .range__tooltip::after{border-top:var(--six-tooltip-arrow-size) solid var(--six-color-web-rock-900);border-left:var(--six-tooltip-arrow-size) solid transparent;border-right:var(--six-tooltip-arrow-size) solid transparent;top:100%}.range--tooltip-bottom .range__tooltip{bottom:calc(-1 * var(--thumb-size) - var(--tooltip-offset-y))}.range--tooltip-bottom .range__tooltip::after{border-bottom:var(--six-tooltip-arrow-size) solid var(--six-color-web-rock-900);border-left:var(--six-tooltip-arrow-size) solid transparent;border-right:var(--six-tooltip-arrow-size) solid transparent;bottom:100%}';let n=0;const h=class{constructor(r){t(this,r);this.sixChange=o(this,"six-range-change",7);this.sixBlur=o(this,"six-range-blur",7);this.sixFocus=o(this,"six-range-focus",7);this.inputId=`input-${++n}`;this.labelId=`input-label-${n}`;this.helpTextId=`input-help-text-${n}`;this.customErrorText="";this.customValidation=false;this.errorTextId=`input-error-text-${n}`;this.eventListeners=new a;this.defaultValue=0;this.handleInput=()=>{if(this.nativeInput!=null){this.update(parseFloat(this.nativeInput.value))}requestAnimationFrame((()=>{this.sixChange.emit()}))};this.handleBlur=()=>{var t;this.hasFocus=false;this.hasTooltip=false;this.sixBlur.emit();if(this.nativeInput!=null){(t=this.resizeObserver)===null||t===void 0?void 0:t.unobserve(this.nativeInput)}};this.handleFocus=()=>{var t;this.hasFocus=true;this.hasTooltip=true;this.sixFocus.emit();if(this.nativeInput!=null){(t=this.resizeObserver)===null||t===void 0?void 0:t.observe(this.nativeInput)}};this.handleSlotChange=()=>{this.hasHelpTextSlot=s(this.host,"help-text");this.hasErrorTextSlot=s(this.host,"error-text");this.hasLabelSlot=s(this.host,"label")};this.handleTouchStart=()=>{this.setFocus()};this.hasFocus=false;this.hasHelpTextSlot=false;this.hasLabelSlot=false;this.hasErrorTextSlot=false;this.hasTooltip=false;this.name="";this.value=0;this.required=false;this.label="";this.helpText="";this.errorText="";this.disabled=false;this.invalid=false;this.min=0;this.max=100;this.step=1;this.tooltip="top";this.tooltipFormatter=t=>t.toString();this.errorOnBlur=false}handleLabelChange(){this.handleSlotChange()}handleValueChange(){this.update();if(this.nativeInput!=null){this.invalid=!this.nativeInput.checkValidity()}}connectedCallback(){var t;(t=this.host.shadowRoot)===null||t===void 0?void 0:t.addEventListener("slotchange",this.handleSlotChange)}componentWillLoad(){this.update();this.defaultValue=this.value;this.handleSlotChange()}componentDidLoad(){const t=this.nativeInput;if(t==null){return}this.update();this.resizeObserver=new ResizeObserver((()=>this.update()));this.eventListeners.add(t,"invalid",(o=>{if(this.customValidation||!this.hasErrorTextSlot&&this.errorText===""&&this.customErrorText===""){this.customErrorText=t.validationMessage}o.preventDefault()}))}disconnectedCallback(){var t;(t=this.host.shadowRoot)===null||t===void 0?void 0:t.removeEventListener("slotchange",this.handleSlotChange);this.eventListeners.removeAll()}async setFocus(t){var o;(o=this.nativeInput)===null||o===void 0?void 0:o.focus(t)}async removeFocus(){var t;(t=this.nativeInput)===null||t===void 0?void 0:t.blur()}async setCustomValidity(t){this.customErrorText="";this.customValidation=t!=="";if(this.nativeInput!=null){this.nativeInput.setCustomValidity(t);this.invalid=!this.nativeInput.checkValidity()}}async reset(){var t;this.value=this.defaultValue;this.customErrorText="";this.customValidation=false;(t=this.nativeInput)===null||t===void 0?void 0:t.setCustomValidity("");this.invalid=false}displayError(){return this.invalid&&(!this.errorOnBlur||!this.hasFocus)}syncTooltip(t,o,r){if(this.tooltip!=="none"&&this.nativeInput!=null&&this.output!=null){const i=Math.max(0,(r-t)/(o-t));const e=this.nativeInput.offsetWidth;const s=this.output.offsetWidth;const a=getComputedStyle(this.nativeInput).getPropertyValue("--thumb-size");const l=`calc(${e*i}px - calc(calc(${i} * ${a}) - calc(${a} / 2)))`;this.output.style.transform=`translateX(${l})`;this.output.style.marginLeft=`-${s/2}px`}}isFirefox(){return navigator.userAgent.toLowerCase().indexOf("firefox")>-1}update(t){var o,r;if(t!=null){this.value=t}const i=(o=Number(this.min))!==null&&o!==void 0?o:0;const e=(r=Number(this.max))!==null&&r!==void 0?r:0;let s;const a=parseFloat(this.value);if(isNaN(a)){s=this.getDefaultValue(i,e)}else{s=a}if(this.nativeInput!=null){this.nativeInput.value=s.toString();this.value=parseFloat(this.nativeInput.value)}else{this.value=s}this.calculateColorRunnableTrack(i,e,this.value);this.syncTooltip(i,e,this.value)}getDefaultValue(t,o){return o<t?t:t+(o-t)/2}calculateColorRunnableTrack(t,o,r){if(!this.isFirefox()&&this.nativeInput!=null){const i=Math.ceil((r-t)/(o-t)*100);this.nativeInput.style.background="-webkit-linear-gradient(left, var(--track-color) 0%, var(--track-color) "+i+"%, var(--six-color-web-rock-300) "+i+"%)"}}render(){return r(e,{inputId:this.inputId,label:this.label,labelId:this.labelId,hasLabelSlot:this.hasLabelSlot,helpTextId:this.helpTextId,helpText:this.helpText,hasHelpTextSlot:this.hasHelpTextSlot,size:"medium",errorTextId:this.errorTextId,errorText:this.customErrorText!=null?this.customErrorText:this.errorText,hasErrorTextSlot:this.hasErrorTextSlot,disabled:this.disabled,required:this.required,displayError:this.displayError()},r("div",{part:"base",class:{range:true,"range--disabled":this.disabled,"range--focused":this.hasFocus,"range--tooltip-visible":this.hasTooltip,"range--tooltip-top":this.tooltip==="top","range--tooltip-bottom":this.tooltip==="bottom"},onTouchStart:this.handleTouchStart},r("input",{part:"input",ref:t=>this.nativeInput=t,type:"range",class:"range__control",name:this.name,disabled:this.disabled,min:this.min,max:this.max,step:this.step,value:this.value,onInput:this.handleInput,onFocus:this.handleFocus,onBlur:this.handleBlur}),this.tooltip!=="none"&&r("output",{part:"tooltip",ref:t=>this.output=t,class:"range__tooltip"},this.tooltipFormatter(this.value))))}get host(){return i(this)}static get watchers(){return{label:["handleLabelChange"],errorText:["handleLabelChange"],helpText:["handleLabelChange"],value:["handleValueChange"],min:["handleValueChange"],max:["handleValueChange"]}}};h.style=l;export{h as six_range};
+//# sourceMappingURL=p-3c635d0a.entry.js.map

package/dist/ui-library/p-3c635d0a.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sixRangeCss","id","SixRange","this","inputId","labelId","helpTextId","customErrorText","customValidation","errorTextId","eventListeners","EventListeners","defaultValue","handleInput","nativeInput","update","parseFloat","value","requestAnimationFrame","sixChange","emit","handleBlur","hasFocus","hasTooltip","sixBlur","_a","resizeObserver","unobserve","handleFocus","sixFocus","observe","handleSlotChange","hasHelpTextSlot","hasSlot","host","hasErrorTextSlot","hasLabelSlot","handleTouchStart","setFocus","toString","handleLabelChange","handleValueChange","invalid","checkValidity","connectedCallback","shadowRoot","addEventListener","componentWillLoad","componentDidLoad","ResizeObserver","add","event","errorText","validationMessage","preventDefault","disconnectedCallback","removeEventListener","removeAll","async","options","focus","blur","message","setCustomValidity","displayError","errorOnBlur","syncTooltip","min","max","tooltip","output","percent","Math","inputWidth","offsetWidth","tooltipWidth","thumbSize","getComputedStyle","getPropertyValue","x","style","transform","marginLeft","isFirefox","navigator","userAgent","toLowerCase","indexOf","updateValue","Number","_b","parsedValue","isNaN","getDefaultValue","calculateColorRunnableTrack","ceil","background","render","h","FormControl","label","helpText","size","disabled","required","part","class","range","onTouchStart","ref","el","type","name","step","onInput","onFocus","onBlur","tooltipFormatter"],"sources":["./src/components/six-range/six-range.scss?tag=six-range&encapsulation=shadow","./src/components/six-range/six-range.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n  --thumb-size: 14px;\n  --tooltip-offset-y: 10px;\n  --track-color: var(--six-color-web-rock-900);\n  --thumb-color: var(--six-color-web-rock-900);\n  --track-height: 3px;\n\n  display: block;\n}\n\n.range {\n  position: relative;\n\n  .range__control {\n    -webkit-appearance: none;\n    width: 100%;\n    height: var(--six-input-height-medium);\n    background: transparent;\n    line-height: var(--six-input-height-medium);\n    vertical-align: middle;\n\n    &::-webkit-slider-runnable-track {\n      width: 100%;\n      height: var(--track-height);\n      border-radius: 3px;\n      border: none;\n    }\n\n    &::-webkit-slider-thumb {\n      border: none;\n      width: var(--thumb-size);\n      height: var(--thumb-size);\n      border-radius: 50%;\n      background-color: var(--thumb-color);\n      -webkit-appearance: none;\n      margin-top: calc(var(--thumb-size) / -2 + var(--track-height) / 2);\n      transition: var(--six-transition-fast) border-color, var(--six-transition-fast) background-color,\n        var(--six-transition-fast) color, var(--six-transition-fast) box-shadow, var(--six-transition-fast) transform;\n      cursor: pointer;\n    }\n\n    &:not(:disabled)::-webkit-slider-thumb:hover {\n      background-color: var(--thumb-color);\n    }\n\n    &:not(:disabled):focus::-webkit-slider-thumb {\n      background-color: var(--thumb-color);\n    }\n\n    &:not(:disabled)::-webkit-slider-thumb:active {\n      background-color: var(--thumb-color);\n      cursor: grabbing;\n    }\n\n    //  Firefox\n    &::-moz-focus-outer {\n      border: 0;\n    }\n\n    &::-moz-range-track {\n      width: 100%;\n      height: var(--track-height);\n      background-color: var(--six-progress-track-color);\n      border-radius: 3px;\n      border: none;\n    }\n\n    &::-moz-range-progress {\n      height: var(--track-height);\n      border-radius: 3px;\n      background-color: var(--track-color);\n      border: none;\n    }\n\n    &::-moz-range-thumb {\n      border: none;\n      height: var(--thumb-size);\n      width: var(--thumb-size);\n      border-radius: 50%;\n      background-color: var(--thumb-color);\n      transition: var(--six-transition-fast) border-color, var(--six-transition-fast) background-color,\n        var(--six-transition-fast) color, var(--six-transition-fast) box-shadow, var(--six-transition-fast) transform;\n      cursor: pointer;\n    }\n\n    &:not(:disabled)::-moz-range-thumb:hover {\n      background-color: var(--thumb-color);\n    }\n\n    &:not(:disabled):focus::-moz-range-thumb {\n      background-color: var(--thumb-color);\n    }\n\n    &:not(:disabled)::-moz-range-thumb:active {\n      background-color: var(--thumb-color);\n      cursor: grabbing;\n    }\n\n    //  States\n    &:focus {\n      outline: none;\n    }\n\n    &:disabled {\n      &::-webkit-slider-thumb {\n        cursor: not-allowed;\n        color: var(--six-color-web-rock-300);\n        border-color: var(--six-color-web-rock-300);\n        background-color: var(--six-color-web-rock-300);\n      }\n\n      &::-moz-range-thumb {\n        cursor: not-allowed;\n        color: var(--six-color-web-rock-300);\n        border-color: var(--six-color-web-rock-300);\n        background-color: var(--six-color-web-rock-300);\n      }\n    }\n  }\n}\n\n// Tooltip\n.range__tooltip {\n  position: absolute;\n  z-index: var(--six-z-index-tooltip);\n  left: 1px;\n  border-radius: var(--six-border-radius-medium);\n  background-color: var(--six-color-web-rock-900);\n  font-family: var(--six-font-family);\n  font-size: var(--six-tooltip-font-size);\n  font-weight: var(--six-tooltip-font-weight);\n  line-height: var(--six-tooltip-line-height);\n  color: var(--six-color-white);\n  opacity: 0;\n  padding: var(--six-spacing-xxx-small) var(--six-spacing-xx-small);\n  transition: var(--six-transition-fast) opacity;\n  pointer-events: none;\n\n  &::after {\n    content: '';\n    position: absolute;\n    width: 0;\n    height: 0;\n    left: 50%;\n    margin-left: calc(-1 * var(--six-tooltip-arrow-size));\n  }\n}\n\n.range--tooltip-visible .range__tooltip {\n  opacity: 1;\n}\n\n// Tooltip on top\n.range--tooltip-top .range__tooltip {\n  top: calc(-1 * var(--thumb-size) - var(--tooltip-offset-y));\n\n  &::after {\n    border-top: var(--six-tooltip-arrow-size) solid var(--six-color-web-rock-900);\n    border-left: var(--six-tooltip-arrow-size) solid transparent;\n    border-right: var(--six-tooltip-arrow-size) solid transparent;\n    top: 100%;\n  }\n}\n\n// Tooltip on bottom\n.range--tooltip-bottom .range__tooltip {\n  bottom: calc(-1 * var(--thumb-size) - var(--tooltip-offset-y));\n\n  &::after {\n    border-bottom: var(--six-tooltip-arrow-size) solid var(--six-color-web-rock-900);\n    border-left: var(--six-tooltip-arrow-size) solid transparent;\n    border-right: var(--six-tooltip-arrow-size) solid transparent;\n    bottom: 100%;\n  }\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';\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 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 for validation errors. Alternatively, you can use the error-text prop.\n *\n * @part base - The component's base wrapper.\n * @part input - The native range input.\n * @part tooltip - The range tooltip.\n */\n@Component({\n  tag: 'six-range',\n  styleUrl: 'six-range.scss',\n  shadow: true,\n})\nexport class SixRange {\n  private inputId = `input-${++id}`;\n  private labelId = `input-label-${id}`;\n  private helpTextId = `input-help-text-${id}`;\n  private customErrorText = '';\n  private customValidation = false;\n  private errorTextId = `input-error-text-${id}`;\n  private eventListeners = new EventListeners();\n  private resizeObserver?: ResizeObserver;\n\n  private output?: HTMLElement;\n  private nativeInput?: HTMLInputElement;\n\n  @Element() host!: HTMLSixRangeElement;\n\n  @State() hasFocus = false;\n  @State() hasHelpTextSlot = false;\n  @State() hasLabelSlot = false;\n  @State() hasErrorTextSlot = false;\n  @State() hasTooltip = false;\n\n  /** The input's name attribute. */\n  @Prop() name = '';\n\n  /** The input's value attribute. */\n  @Prop({ mutable: true }) value = 0;\n\n  /** Set to true to make the input a required field. */\n  @Prop({ reflect: true }) required = false;\n\n  /** The range's label. Alternatively, you can use the label slot. */\n  @Prop() label = '';\n\n  /** The range's help text. Alternatively, you can use the help-text slot. */\n  @Prop() helpText = '';\n\n  /** The input's error text. Alternatively, you can use the error-text slot. */\n  @Prop() errorText = '';\n\n  /** Set to true to disable the input. */\n  @Prop() disabled = false;\n\n  /**\n   * This will be true when the control is in an invalid state. Validity in range inputs is determined by the message\n   * provided by the `setCustomValidity` method.\n   */\n  @Prop({ mutable: true, reflect: true }) invalid = false;\n\n  /** The input's min attribute. */\n  @Prop() min = 0;\n\n  /** The input's max attribute. */\n  @Prop() max = 100;\n\n  /** The input's step attribute. */\n  @Prop() step = 1;\n\n  /** The preferred placedment of the tooltip. */\n  @Prop() tooltip: 'top' | 'bottom' | 'none' = 'top';\n\n  /** A function used to format the tooltip's value. */\n  @Prop() tooltipFormatter = (value: number) => value.toString();\n\n  /** Set to display the error text on blur and not when typing */\n  @Prop() errorOnBlur = false;\n\n  /** Emitted when the control's value changes. */\n  @Event({ eventName: 'six-range-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control loses focus. */\n  @Event({ eventName: 'six-range-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control gains focus. */\n  @Event({ eventName: 'six-range-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n  /** default value the slider will be reverted to when reset is executed */\n  private defaultValue = 0;\n\n  @Watch('label')\n  @Watch('errorText')\n  @Watch('helpText')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  @Watch('value')\n  @Watch('min')\n  @Watch('max')\n  handleValueChange() {\n    this.update();\n    if (this.nativeInput != null) {\n      this.invalid = !this.nativeInput.checkValidity();\n    }\n  }\n\n  connectedCallback() {\n    this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n  }\n\n  componentWillLoad() {\n    this.update();\n    this.defaultValue = this.value;\n    this.handleSlotChange();\n  }\n\n  componentDidLoad() {\n    const nativeInput = this.nativeInput;\n    if (nativeInput == null) {\n      return;\n    }\n    this.update();\n    this.resizeObserver = new ResizeObserver(() => this.update());\n    this.eventListeners.add(nativeInput, 'invalid', (event) => {\n      if (this.customValidation || (!this.hasErrorTextSlot && this.errorText === '' && this.customErrorText === '')) {\n        this.customErrorText = nativeInput.validationMessage;\n      }\n      event.preventDefault();\n    });\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  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */\n  @Method()\n  async setCustomValidity(message: string) {\n    this.customErrorText = '';\n    this.customValidation = message !== '';\n    if (this.nativeInput != null) {\n      this.nativeInput.setCustomValidity(message);\n      this.invalid = !this.nativeInput.checkValidity();\n    }\n  }\n\n  /** Resets the formcontrol */\n  @Method()\n  async reset() {\n    this.value = this.defaultValue;\n    this.customErrorText = '';\n    this.customValidation = false;\n    this.nativeInput?.setCustomValidity('');\n    this.invalid = false;\n  }\n\n  private handleInput = () => {\n    if (this.nativeInput != null) {\n      this.update(parseFloat(this.nativeInput.value));\n    }\n    requestAnimationFrame(() => {\n      this.sixChange.emit();\n    });\n  };\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.hasTooltip = false;\n    this.sixBlur.emit();\n    if (this.nativeInput != null) {\n      this.resizeObserver?.unobserve(this.nativeInput);\n    }\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.hasTooltip = true;\n    this.sixFocus.emit();\n    if (this.nativeInput != null) {\n      this.resizeObserver?.observe(this.nativeInput);\n    }\n  };\n\n  private handleSlotChange = () => {\n    this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n    this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n  };\n\n  private handleTouchStart = () => {\n    this.setFocus();\n  };\n\n  private displayError() {\n    return this.invalid && (!this.errorOnBlur || !this.hasFocus);\n  }\n\n  private syncTooltip(min: number, max: number, value: number) {\n    if (this.tooltip !== 'none' && this.nativeInput != null && this.output != null) {\n      const percent = Math.max(0, (value - min) / (max - min));\n      const inputWidth = this.nativeInput.offsetWidth;\n      const tooltipWidth = this.output.offsetWidth;\n      const thumbSize = getComputedStyle(this.nativeInput).getPropertyValue('--thumb-size');\n      const x = `calc(${inputWidth * percent}px - calc(calc(${percent} * ${thumbSize}) - calc(${thumbSize} / 2)))`;\n      this.output.style.transform = `translateX(${x})`;\n      this.output.style.marginLeft = `-${tooltipWidth / 2}px`;\n    }\n  }\n\n  private isFirefox() {\n    return navigator.userAgent.toLowerCase().indexOf('firefox') > -1;\n  }\n\n  private update(updateValue?: number) {\n    if (updateValue != null) {\n      this.value = updateValue;\n    }\n\n    const min = Number(this.min) ?? 0;\n    const max = Number(this.max) ?? 0;\n    let value;\n    const parsedValue = parseFloat(this.value as never);\n    if (isNaN(parsedValue)) {\n      value = this.getDefaultValue(min, max);\n    } else {\n      value = parsedValue;\n    }\n\n    if (this.nativeInput != null) {\n      // The value may have constraints, so we set the native control's\n      // value and sync it back to ensure it adheres to min, max, and step\n      // properly.\n      this.nativeInput.value = value.toString();\n      this.value = parseFloat(this.nativeInput.value);\n    } else {\n      this.value = value;\n    }\n    this.calculateColorRunnableTrack(min, max, this.value);\n    this.syncTooltip(min, max, this.value);\n  }\n\n  /**\n   * from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#value\n   */\n  private getDefaultValue(min: number, max: number): number {\n    return max < min ? min : min + (max - min) / 2;\n  }\n\n  /**\n   * For Firefox this functionality is not needed because it is supported by standard CSS.\n   */\n  private calculateColorRunnableTrack(min: number, max: number, value: number) {\n    if (!this.isFirefox() && this.nativeInput != null) {\n      const percent = Math.ceil(((value - min) / (max - min)) * 100);\n      this.nativeInput.style.background =\n        '-webkit-linear-gradient(left, var(--track-color) 0%, var(--track-color) ' +\n        percent +\n        '%, var(--six-color-web-rock-300) ' +\n        percent +\n        '%)';\n    }\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        size=\"medium\"\n        errorTextId={this.errorTextId}\n        errorText={this.customErrorText != null ? this.customErrorText : this.errorText}\n        hasErrorTextSlot={this.hasErrorTextSlot}\n        disabled={this.disabled}\n        required={this.required}\n        displayError={this.displayError()}\n      >\n        <div\n          part=\"base\"\n          class={{\n            range: true,\n\n            // States\n            'range--disabled': this.disabled,\n            'range--focused': this.hasFocus,\n            'range--tooltip-visible': this.hasTooltip,\n            'range--tooltip-top': this.tooltip === 'top',\n            'range--tooltip-bottom': this.tooltip === 'bottom',\n          }}\n          onTouchStart={this.handleTouchStart}\n        >\n          <input\n            part=\"input\"\n            ref={(el) => (this.nativeInput = el)}\n            type=\"range\"\n            class=\"range__control\"\n            name={this.name}\n            disabled={this.disabled}\n            min={this.min}\n            max={this.max}\n            step={this.step}\n            value={this.value}\n            onInput={this.handleInput}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n          />\n          {this.tooltip !== 'none' && (\n            <output part=\"tooltip\" ref={(el) => (this.output = el)} class=\"range__tooltip\">\n              {this.tooltipFormatter(this.value)}\n            </output>\n          )}\n        </div>\n      </FormControl>\n    );\n  }\n}\n"],"mappings":"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"}