npm - @six-group/ui-library - Versions diffs - 0.0.0-insider.1a260b6 → 0.0.0-insider.1c3fe8c - Mend

@six-group/ui-library 0.0.0-insider.1a260b6 → 0.0.0-insider.1c3fe8c

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1841) hide show

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

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

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

@@ -0,0 +1 @@

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

package/dist/ui-library/p-664ddbab.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as e,h as r,H as s}from"./p-JoG9I7EO.js";const a=":host{position:relative;isolation:isolate;height:100%;display:flex;align-items:center;box-sizing:border-box;padding:0 var(--six-spacing-large);border-bottom:solid var(--six-header-border-height) transparent;border-top:solid var(--six-header-border-height) transparent}:host(.six-header-item--active){border-bottom:solid var(--six-header-border-height) var(--six-header-border-color-open)}";const i=class{constructor(r){e(this,r);this.active=false}render(){return r(s,{key:"e94d72bc167c8ade7d81f416f48ee900693f48c0",class:{"six-header-item--active":this.active}},r("slot",{key:"86eac95abbec808cfe2bab0f1ad4b89dd69d781d"}))}};i.style=a;export{i as six_header_item};
2	+ //# sourceMappingURL=p-664ddbab.entry.js.map

package/dist/ui-library/p-664ddbab.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["sixHeaderItemCss","SixHeaderItem","constructor","hostRef","this","active","render","h","Host","key","class"],"sources":["src/components/six-header-item/six-header-item.scss?tag=six-header-item&encapsulation=shadow","src/components/six-header-item/six-header-item.tsx"],"sourcesContent":[":host {\n position: relative;\n isolation: isolate;\n height: 100%;\n display: flex;\n align-items: center;\n box-sizing: border-box;\n padding: 0 var(--six-spacing-large);\n border-bottom: solid var(--six-header-border-height) transparent;\n border-top: solid var(--six-header-border-height) transparent;\n}\n\n:host(.six-header-item--active) {\n border-bottom: solid var(--six-header-border-height) var(--six-header-border-color-open);\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * @since 4.2.7\n * @status stable\n */\n\n@Component({\n tag: 'six-header-item',\n styleUrl: 'six-header-item.scss',\n shadow: true,\n})\nexport class SixHeaderItem {\n /**\n * Indicates whether the item is styled as active.\n * When set to `true`, a border is displayed below the trigger element.\n *\n * Use <code>six-header-dropdown-item</code> to automatically set the active\n * state for dropdowns.\n */\n @Prop({ reflect: true }) active = false;\n\n render() {\n return (\n <Host class={{ 'six-header-item--active': this.active }}>\n <slot />\n </Host>\n );\n }\n}\n"],"mappings":"kDAAA,MAAMA,EAAmB,uY,MCYZC,EAAa,MAL1B,WAAAC,CAAAC,G,UAa2BC,KAAMC,OAAG,KASnC,CAPC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,CAAE,0BAA2BN,KAAKC,SAC7CE,EAAQ,QAAAE,IAAA,6C","ignoreList":[]}

package/dist/ui-library/p-66b94978.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as i,c as s,h as t}from"./p-JoG9I7EO.js";import{s as e}from"./p-BY6hIEFX.js";const o=":host{position:relative;box-sizing:border-box}:host ,:host :before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{display:block;height:100%}.sidebar__container{height:100%;overflow:auto}.sidebar__container.sidebar--open{border-right:1px solid var(--six-color-web-rock-300)}.sidebar__container:not(.sidebar--visible){position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.sidebar--left{color:var(--six-sidebar-color);background-color:var(--six-sidebar-background-color);transition:var(--six-transition-medium) margin-left;background-size:300vw 70%;background-position:bottom;background-repeat:no-repeat}.sidebar--right{transition:var(--six-transition-medium) margin-right}.sidebar--open.sidebar--left{margin-right:2px}.sidebar--open.sidebar--right{margin-left:2px}";const r=i=>{var s;return((s=i===null\|\|i===void 0?void 0:i.tagName)===null\|\|s===void 0?void 0:s.toLowerCase())==="six-sidebar-item-group"};const n=class{constructor(t){i(this,t);this.sixShow=s(this,"six-sidebar-show");this.sixAfterShow=s(this,"six-sidebar-after-show");this.sixHide=s(this,"six-sidebar-hide");this.sixAfterHide=s(this,"six-sidebar-after-hide");this.sixInitialFocus=s(this,"six-sidebar-initial-focus");this.willShow=false;this.willHide=false;this.isVisible=false;this.position="left";this.open=false;this.width="16rem";this.toggled=false;this.handleTransitionEnd=i=>{const s=i.target;if(i.type==="transitionend"&&s.classList.contains("sidebar__container")){this.resetTransitionVariables()}};this.closeSiblingDetailsOnShow=i=>{const s=i.target;if(this.sidebar!=null){e(s,this.sidebar)}const t=i=>{var t;let e=s;while(i(e)!=null){e=i(e);if(r(e)){const i=(t=e===null\|\|e===void 0?void 0:e.shadowRoot)===null\|\|t===void 0?void 0:t.querySelector("six-details");if(i!=null){i.open=false}}}};t((i=>i===null\|\|i===void 0?void 0:i.previousElementSibling));t((i=>i===null\|\|i===void 0?void 0:i.nextElementSibling))}}handleOpenChange(){this.open?this.show():this.hide()}componentWillLoad(){if(this.open){void this.show();this.resetTransitionVariables()}}componentDidRender(){this.setupTogglableMenuItems()}disconnectedCallback(){var i;(i=this.sidebar)===null\|\|i===void 0?void 0:i.removeEventListener("six-details-show",this.closeSiblingDetailsOnShow)}setupTogglableMenuItems(){if(!this.toggled\|\|this.sidebar==null)return;this.markAllMenuItemsAsSelectableEmpty();this.sidebar.addEventListener("six-details-show",this.closeSiblingDetailsOnShow)}markAllMenuItemsAsSelectableEmpty(){var i;const s=(i=this.sidebar)===null\|\|i===void 0?void 0:i.querySelector("slot");const t=(s===null\|\|s===void 0?void 0:s.assignedElements())\|\|[];const e=[];while(t.length>0){const i=t.pop();if((i===null\|\|i===void 0?void 0:i.shadowRoot)==null){continue}const s=i.shadowRoot.querySelectorAll("six-details");e.push(...s);const o=Array.from(i.children).filter(r);t.push(...o)}e.forEach((i=>i.selectableEmpty=true))}async toggle(){if(this.willShow\|\|this.willHide){return}if(this.open){await this.hide()}else{await this.show()}}async show(){if(this.willShow){return}const i=this.sixShow.emit();if(i.defaultPrevented){this.open=false;return}this.willShow=true;this.isVisible=true;this.open=true}async hide(){if(this.willHide){return}const i=this.sixHide.emit();if(i.defaultPrevented){this.open=true;return}this.willHide=true;this.open=false}async selectItemByIndex(i){if(this.sidebar==null)return;const s=this.sidebar.querySelector("slot");const t=((s===null\|\|s===void 0?void 0:s.assignedElements())\|\|[]).flatMap((i=>{var s;const t=(s=i.shadowRoot)===null\|\|s===void 0?void 0:s.querySelector("six-details");if(t==null){return[]}return[t]}));if(i<0\|\|i>t.length-1){console.error(`Tried to access sidebar menu item by index, but provided index out of range. Provided index: ${i}`);return}await t[i].show()}async selectItemByName(i){var s,t,e;const o=(s=this.sidebar)===null\|\|s===void 0?void 0:s.querySelector("slot");const r=o===null\|\|o===void 0?void 0:o.assignedElements();if(r==null){return}const n=r.findIndex((s=>(s===null\|\|s===void 0?void 0:s.name)===i));const a=(e=(t=r.at(n))===null\|\|t===void 0?void 0:t.shadowRoot)===null\|\|e===void 0?void 0:e.querySelector("six-details");await(a===null\|\|a===void 0?void 0:a.show())}resetTransitionVariables(){this.isVisible=this.open;this.willShow=false;this.willHide=false;this.open?this.sixAfterShow.emit():this.sixAfterHide.emit()}render(){return t("host",{key:"1aae217047bea8e29e86256812a8a67a6eff4ce9",class:"six-sidebar"},t("div",{key:"d9d70f022ffaeae09003dfc130b40707ad9e3512",class:{sidebar__container:true,"sidebar--visible":this.isVisible,"sidebar--open":this.open,"sidebar--left":this.position==="left","sidebar--right":this.position==="right"},style:{width:this.width,[`margin-${this.position}`]:this.open?"0":`calc(1rem - ${this.width})`},ref:i=>this.sidebar=i,"aria-hidden":this.open?"false":"true",onTransitionEnd:this.handleTransitionEnd},t("slot",{key:"d88754017cf07b12181cce2e10788291ad487257"})))}static get watchers(){return{open:["handleOpenChange"]}}};n.style=o;export{n as six_sidebar};
2	+ //# sourceMappingURL=p-66b94978.entry.js.map

package/dist/ui-library/p-66b94978.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["sixSidebarCss","isSidebarItemGroup","node","_a","tagName","toLowerCase","SixSidebar","constructor","hostRef","this","willShow","willHide","isVisible","position","open","width","toggled","handleTransitionEnd","event","target","type","classList","contains","resetTransitionVariables","closeSiblingDetailsOnShow","clickedMenuItem","sidebar","scrollIntoView","closeAllSiblingsBySiblingProperty","getSibling","detailsElement","shadowRoot","querySelector","previousElementSibling","nextElementSibling","handleOpenChange","show","hide","componentWillLoad","componentDidRender","setupTogglableMenuItems","disconnectedCallback","removeEventListener","markAllMenuItemsAsSelectableEmpty","addEventListener","slot","nodes","assignedElements","menuItems","length","pop","menuItemsForCurrentNode","querySelectorAll","push","newItemGroups","Array","from","children","filter","forEach","details","selectableEmpty","toggle","sixShow","emit","defaultPrevented","sixHide","selectItemByIndex","index","menuItemsOnRootLevel","flatMap","el","console","error","selectItemByName","value","sidebarItemGroups","indexOfSelectedElement","findIndex","name","selectedItem","_c","_b","at","sixAfterShow","sixAfterHide","render","h","key","class","sidebar__container","style","ref","onTransitionEnd"],"sources":["src/components/six-sidebar/six-sidebar.scss?tag=six-sidebar&encapsulation=shadow","src/components/six-sidebar/six-sidebar.tsx"],"sourcesContent":["@import 'src/global/component';\n@import 'src/global/mixins/hidden';\n@import 'src/global/mixins/scrollbar';\n\n:host {\n display: block;\n height: 100%;\n}\n\n.sidebar {\n &__container {\n // scroll\n height: 100%;\n overflow: auto;\n\n &.sidebar--open {\n border-right: 1px solid var(--six-color-web-rock-300);\n }\n\n &:not(.sidebar--visible) {\n @include hidden;\n }\n }\n\n &--left {\n color: var(--six-sidebar-color);\n background-color: var(--six-sidebar-background-color);\n // collapse\n transition: var(--six-transition-medium) margin-left;\n // six background\n background-size: 300vw 70%;\n background-position: bottom;\n background-repeat: no-repeat;\n }\n\n &--right {\n // collapse\n transition: var(--six-transition-medium) margin-right;\n }\n\n // if the sidebar is embedded within six-root it cuts-off the border styling, for thus we need to guarante a margin\n &--open {\n &.sidebar--left {\n margin-right: 2px;\n }\n\n &.sidebar--right {\n margin-left: 2px;\n }\n }\n}\n","import { Component, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { scrollIntoView } from '../../utils/scroll';\n\nconst isSidebarItemGroup = (node?: Element | null): boolean =>\n node?.tagName?.toLowerCase() === 'six-sidebar-item-group';\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the nested side bar [group] items.\n */\n\n@Component({\n tag: 'six-sidebar',\n styleUrl: 'six-sidebar.scss',\n shadow: true,\n})\nexport class SixSidebar {\n private willShow = false;\n private willHide = false;\n\n private sidebar?: HTMLElement;\n\n @State() isVisible = false;\n\n /** Sidebar position */\n @Prop() position: 'left' | 'right' = 'left';\n\n /** Indicates whether the sidebar is open. You can use this in lieu of the show/hide methods. */\n @Prop({ mutable: true, reflect: true }) open = false;\n\n /** Sidebar width */\n @Prop() width = '16rem';\n\n /** Define whether sidebar is toggled meaning only one menu can be open at the same time*/\n @Prop() toggled = false;\n\n /** Emitted when the sidebar opens. Calling `event.preventDefault()` will prevent it from being opened. */\n @Event({ eventName: 'six-sidebar-show' }) sixShow!: EventEmitter<EmptyPayload>;\n\n /** Emitted after the sidebar opens and all transitions are complete. */\n @Event({ eventName: 'six-sidebar-after-show' }) sixAfterShow!: EventEmitter<EmptyPayload>;\n\n /** Emitted when the sidebar closes. Calling `event.preventDefault()` will prevent it from being closed. */\n @Event({ eventName: 'six-sidebar-hide' }) sixHide!: EventEmitter<EmptyPayload>;\n\n /** Emitted after the sidebar closes and all transitions are complete. */\n @Event({ eventName: 'six-sidebar-after-hide' }) sixAfterHide!: EventEmitter<EmptyPayload>;\n\n /**\n * Emitted when the sidebar opens and the panel gains focus. Calling `event.preventDefault()` will prevent focus and\n * allow you to set it on a different element in the sidebar, such as an input or button.\n */\n @Event({ eventName: 'six-sidebar-initial-focus' }) sixInitialFocus!: EventEmitter<EmptyPayload>;\n\n @Watch('open')\n handleOpenChange() {\n this.open ? this.show() : this.hide();\n }\n\n private handleTransitionEnd = (event: TransitionEvent) => {\n const target = event.target as HTMLElement;\n\n // Ensure we only emit one event when the target element is no longer visible\n if (event.type === 'transitionend' && target.classList.contains('sidebar__container')) {\n this.resetTransitionVariables();\n }\n };\n\n componentWillLoad() {\n // Show on init if open\n if (this.open) {\n void this.show();\n // if the sidebar is open by default we need to manually reset the\n // transition variables since there will be no transition event\n this.resetTransitionVariables();\n }\n }\n\n componentDidRender() {\n this.setupTogglableMenuItems();\n }\n\n disconnectedCallback() {\n this.sidebar?.removeEventListener('six-details-show', this.closeSiblingDetailsOnShow);\n }\n\n private closeSiblingDetailsOnShow = (event: Event) => {\n const clickedMenuItem = event.target as HTMLElement;\n if (this.sidebar != null) {\n scrollIntoView(clickedMenuItem, this.sidebar);\n }\n\n const closeAllSiblingsBySiblingProperty = (\n getSibling: (node: Element | null | undefined) => Element | null | undefined\n ) => {\n let node: Element | null | undefined = clickedMenuItem;\n while (getSibling(node) != null) {\n node = getSibling(node);\n if (isSidebarItemGroup(node)) {\n const detailsElement = node?.shadowRoot?.querySelector('six-details');\n if (detailsElement != null) {\n detailsElement.open = false;\n }\n }\n }\n };\n\n // close all previous siblings\n closeAllSiblingsBySiblingProperty((node) => node?.previousElementSibling);\n // close all further siblings\n closeAllSiblingsBySiblingProperty((node) => node?.nextElementSibling);\n };\n\n private setupTogglableMenuItems() {\n if (!this.toggled || this.sidebar == null) return;\n this.markAllMenuItemsAsSelectableEmpty();\n this.sidebar.addEventListener('six-details-show', this.closeSiblingDetailsOnShow);\n }\n\n private markAllMenuItemsAsSelectableEmpty() {\n // when you have a toggled menu you also want to close other menu items when you click on an item without children\n // nice benefit this item will then also be highlighted\n const slot = this.sidebar?.querySelector('slot');\n const nodes = slot?.assignedElements() || [];\n\n // since we don't just want to make the top level empty menuItems selectable in toggled mode,\n // but also nested items we need to traverse the whole menu item tree\n const menuItems = [];\n while (nodes.length > 0) {\n const node = nodes.pop();\n if (node?.shadowRoot == null) {\n continue;\n }\n\n // collect six-details in the current shadowDOM\n const menuItemsForCurrentNode = node.shadowRoot.querySelectorAll('six-details');\n menuItems.push(...menuItemsForCurrentNode);\n\n // collect all six-sidebar-item-group children of the current node to afterwards check their shadowDOM too\n const newItemGroups = Array.from(node.children).filter(isSidebarItemGroup);\n nodes.push(...newItemGroups);\n }\n\n menuItems.forEach((details) => (details.selectableEmpty = true));\n }\n\n /** Toggles whether the sidebar should be shown or hidden */\n @Method()\n async toggle() {\n if (this.willShow || this.willHide) {\n return;\n }\n\n if (this.open) {\n await this.hide();\n } else {\n await this.show();\n }\n }\n\n /** Shows the sidebar */\n @Method()\n async show() {\n if (this.willShow) {\n return;\n }\n\n const sixShow = this.sixShow.emit();\n if (sixShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n this.willShow = true;\n this.isVisible = true;\n this.open = true;\n }\n\n /** Hides the sidebar */\n @Method()\n async hide() {\n if (this.willHide) {\n return;\n }\n\n const sixHide = this.sixHide.emit();\n if (sixHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n this.willHide = true;\n this.open = false;\n }\n\n /** Allows to select a menu item programmatically by index */\n @Method()\n async selectItemByIndex(index: number) {\n if (this.sidebar == null) return;\n\n const slot = this.sidebar.querySelector('slot');\n const menuItemsOnRootLevel: HTMLSixDetailsElement[] = (slot?.assignedElements() || []).flatMap((el) => {\n const detailsElement = el.shadowRoot?.querySelector('six-details');\n if (detailsElement == null) {\n return [];\n }\n return [detailsElement];\n });\n if (index < 0 || index > menuItemsOnRootLevel.length - 1) {\n console.error(\n `Tried to access sidebar menu item by index, but provided index out of range. Provided index: ${index}`\n );\n return;\n }\n await menuItemsOnRootLevel[index].show();\n }\n\n /** Allows to select a menu item programmatically by name */\n @Method()\n async selectItemByName(value: string) {\n const slot = this.sidebar?.querySelector('slot');\n const sidebarItemGroups = slot?.assignedElements() as HTMLSixSidebarItemGroupElement[];\n if (sidebarItemGroups == null) {\n return;\n }\n\n const indexOfSelectedElement = sidebarItemGroups.findIndex((el) => el?.name === value);\n const selectedItem = sidebarItemGroups.at(indexOfSelectedElement)?.shadowRoot?.querySelector('six-details');\n await selectedItem?.show();\n }\n\n private resetTransitionVariables() {\n this.isVisible = this.open;\n this.willShow = false;\n this.willHide = false;\n this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n }\n\n render() {\n return (\n <host class=\"six-sidebar\">\n <div\n class={{\n sidebar__container: true,\n 'sidebar--visible': this.isVisible,\n 'sidebar--open': this.open,\n 'sidebar--left': this.position === 'left',\n 'sidebar--right': this.position === 'right',\n }}\n style={{\n width: this.width,\n [`margin-${this.position}`]: this.open ? '0' : `calc(1rem - ${this.width})`,\n }}\n ref={(el) => (this.sidebar = el)}\n aria-hidden={this.open ? 'false' : 'true'}\n onTransitionEnd={this.handleTransitionEnd}\n >\n <slot />\n </div>\n </host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/ui-library/p-66d616e8.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r,h as e}from"./p-JoG9I7EO.js";const o=":host{position:relative;box-sizing:border-box}:host ,:host :before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{--height:16px;--track-color:var(--six-progress-track-color);--indicator-color:var(--six-progress-indicator-color);--label-color:var(--six-progress-label-color);display:block}.progress-bar{position:relative;background-color:var(--track-color);height:var(--height);border-radius:var(--sl-border-radius-pill);overflow:hidden}.progress-bar__indicator{height:100%;font-family:var(--six-font-sans);font-size:12px;font-weight:var(--six-font-weight-normal);background-color:var(--indicator-color);color:var(--label-color);text-align:center;line-height:var(--height);white-space:nowrap;overflow:hidden;transition:400ms width, 400ms background-color;user-select:none}.progress-bar--indeterminate .progress-bar__indicator{position:absolute;animation:indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1)}@keyframes indeterminate{0%{left:-50%;width:50%}75%,100%{left:100%;width:50%}}";const a=class{constructor(e){r(this,e);this.percentage=0;this.indeterminate=false}render(){return e("div",{key:"d89c7c456819839b638cadc372bf2ab071e73918",part:"base",class:{"progress-bar":true,"progress-bar--indeterminate":this.indeterminate},role:"progressbar","aria-valuemin":"0","aria-valuemax":"100","aria-valuenow":this.indeterminate?null:this.percentage},e("div",{key:"ce4d45162f0aeb2c5affd3a6aef552c2f4078a1b",part:"indicator",class:"progress-bar__indicator",style:{width:`${this.percentage}%`}},!this.indeterminate&&e("span",{key:"911269a53f42a7e94fc1be782f9e903e32650c75",part:"label",class:"progress-bar__label"},e("slot",{key:"59daab81dd0812c99c32b304479b794d94c6e82e"}))))}};a.style=o;export{a as six_progress_bar};
2	+ //# sourceMappingURL=p-66d616e8.entry.js.map

package/dist/ui-library/p-66d616e8.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["sixProgressBarCss","SixProgressBar","constructor","hostRef","this","percentage","indeterminate","render","h","key","part","class","role","style","width"],"sources":["src/components/six-progress-bar/six-progress-bar.scss?tag=six-progress-bar&encapsulation=shadow","src/components/six-progress-bar/six-progress-bar.tsx"],"sourcesContent":["@import 'src/global/component';\n\n/**\n * @prop --height: The progress bar's height.\n * @prop --track-color: The track color.\n * @prop --indicator-color: The indicator color.\n * @prop --label-color: The label color.\n */\n:host {\n --height: 16px;\n --track-color: var(--six-progress-track-color);\n --indicator-color: var(--six-progress-indicator-color);\n --label-color: var(--six-progress-label-color);\n\n display: block;\n}\n\n.progress-bar {\n position: relative;\n background-color: var(--track-color);\n height: var(--height);\n border-radius: var(--sl-border-radius-pill);\n overflow: hidden;\n}\n\n.progress-bar__indicator {\n height: 100%;\n font-family: var(--six-font-sans);\n font-size: 12px;\n font-weight: var(--six-font-weight-normal);\n background-color: var(--indicator-color);\n color: var(--label-color);\n text-align: center;\n line-height: var(--height);\n white-space: nowrap;\n overflow: hidden;\n transition:\n 400ms width,\n 400ms background-color;\n user-select: none;\n}\n\n// Indeterminate\n.progress-bar--indeterminate .progress-bar__indicator {\n position: absolute;\n animation: indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);\n}\n\n@keyframes indeterminate {\n 0% {\n left: -50%;\n width: 50%;\n }\n 75%,\n 100% {\n left: 100%;\n width: 50%;\n }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - A label to show inside the indicator.\n *\n * @part base - The component's base wrapper.\n * @part indicator - The progress bar indicator.\n * @part label - The progress bar label.\n */\n\n@Component({\n tag: 'six-progress-bar',\n styleUrl: 'six-progress-bar.scss',\n shadow: true,\n})\nexport class SixProgressBar {\n /** The progress bar's percentage, 0 to 100. */\n @Prop() percentage = 0;\n\n /** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */\n @Prop() indeterminate = false;\n\n render() {\n return (\n <div\n part=\"base\"\n class={{\n 'progress-bar': true,\n 'progress-bar--indeterminate': this.indeterminate,\n }}\n role=\"progressbar\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n aria-valuenow={this.indeterminate ? null : this.percentage}\n >\n <div\n part=\"indicator\"\n class=\"progress-bar__indicator\"\n style={{\n width: `${this.percentage}%`,\n }}\n >\n {!this.indeterminate && (\n <span part=\"label\" class=\"progress-bar__label\">\n <slot />\n </span>\n )}\n </div>\n </div>\n );\n }\n}\n"],"mappings":"sCAAA,MAAMA,EAAoB,ylC,MCoBbC,EAAc,MAL3B,WAAAC,CAAAC,G,UAOUC,KAAUC,WAAG,EAGbD,KAAaE,cAAG,KA+BzB,CA7BC,MAAAC,GACE,OACEC,EACE,OAAAC,IAAA,2CAAAC,KAAK,OACLC,MAAO,CACL,eAAgB,KAChB,8BAA+BP,KAAKE,eAEtCM,KAAK,cAAa,gBACJ,IACA,sBAAK,gBACJR,KAAKE,cAAgB,KAAOF,KAAKC,YAEhDG,EACE,OAAAC,IAAA,2CAAAC,KAAK,YACLC,MAAM,0BACNE,MAAO,CACLC,MAAO,GAAGV,KAAKC,iBAGfD,KAAKE,eACLE,EAAM,QAAAC,IAAA,2CAAAC,KAAK,QAAQC,MAAM,uBACvBH,EAAA,QAAAC,IAAA,+C","ignoreList":[]}

package/dist/ui-library/p-6cd4fbd8.entry.js ADDED Viewed

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

package/dist/ui-library/p-6cd4fbd8.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

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

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

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

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

@@ -0,0 +1 @@

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

package/dist/ui-library/p-70388108.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r,h as i}from"./p-JoG9I7EO.js";const o=":host{position:relative;box-sizing:border-box}:host ,:host :before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{display:block}.menu-divider{border-top:solid var(--six-border-width) var(--six-menu-divider-color);margin-top:var(--six-spacing-xx-small);margin-bottom:var(--six-spacing-xx-small)}";const e=class{constructor(i){r(this,i)}render(){return i("div",{key:"e5cfe610c3578305a43cac1d94aabd9d4f3483f8",part:"base",class:"menu-divider",role:"separator","aria-hidden":"true"})}};e.style=o;export{e as six_menu_divider};
2	+ //# sourceMappingURL=p-70388108.entry.js.map

package/dist/ui-library/p-70388108.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["sixMenuDividerCss","SixMenuDivider","render","h","key","part","class","role"],"sources":["src/components/six-menu-divider/six-menu-divider.scss?tag=six-menu-divider&encapsulation=shadow","src/components/six-menu-divider/six-menu-divider.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: block;\n}\n\n.menu-divider {\n border-top: solid var(--six-border-width) var(--six-menu-divider-color);\n margin-top: var(--six-spacing-xx-small);\n margin-bottom: var(--six-spacing-xx-small);\n}\n","import { Component, h } from '@stencil/core';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @part base - The component's base wrapper.\n */\n\n@Component({\n tag: 'six-menu-divider',\n styleUrl: 'six-menu-divider.scss',\n shadow: true,\n})\nexport class SixMenuDivider {\n render() {\n return <div part=\"base\" class=\"menu-divider\" role=\"separator\" aria-hidden=\"true\" />;\n }\n}\n"],"mappings":"sCAAA,MAAMA,EAAoB,ia,MCgBbC,EAAc,M,yBACzB,MAAAC,GACE,OAAOC,EAAK,OAAAC,IAAA,2CAAAC,KAAK,OAAOC,MAAM,eAAeC,KAAK,YAAwB,sB","ignoreList":[]}

package/dist/ui-library/p-72d3f332.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as e,h as a,g as t}from"./p-JoG9I7EO.js";const s=":host{position:relative;box-sizing:border-box}:host ,:host :before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{--last-item-color:var(--six-color-web-rock-700);--separator-color:var(--six-color-web-rock-700)}:host::part(label){padding:unset}:host::part(base){display:flex;align-items:center}:host::part(separator){align-items:center;user-select:none;-webkit-user-select:none}:host six-button::part(label){padding-left:var(--six-spacing-xx-small);padding-right:var(--six-spacing-xx-small)}:host([read-only]) six-button::part(base){color:var(--last-item-color)}.breadcrumb-item-readonly{cursor:default}.breadcrumb-item__separator{display:flex;align-items:center;color:var(--separator-color)}:host(:last-of-type) .breadcrumb-item__separator{display:none}";const r=class{constructor(a){e(this,a);this.size="medium";this.readonly=false}render(){return a("div",{key:"c513737271cbfcd6755fa7b1effc526ec450bf04",part:"base"},a("six-button",{key:"9f7fa7a98c83bcd536e864c486e696623a337aba",part:"button",type:"link",class:{"breadcrumb-item-readonly":this.readonly},href:this.readonly?undefined:this.href,tabindex:this.readonly?-1:undefined,target:this.target,size:this.size},a("slot",{key:"21702eca3e7529a8e6e2e63d640a079b9da3eef9",name:"prefix",slot:"prefix"}),a("slot",{key:"eaeaac8681abaf25e4959615c0d7acbed2f51813"}),a("slot",{key:"b7bf9a20d59cee15010f585e17fb3cdf1979573b",name:"suffix",slot:"suffix"})),a("span",{key:"0c4189811fa524e18bf0c0f94c7f6490c11018d9",part:"separator",class:"breadcrumb-item__separator","aria-hidden":"true"},a("slot",{key:"03ca6b113b73f75fbaeec04b0ec3d3224536c77b",name:"separator"})))}get host(){return t(this)}};r.style=s;export{r as six_breadcrumbs_item};
2	+ //# sourceMappingURL=p-72d3f332.entry.js.map

package/dist/ui-library/p-72d3f332.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["sixBreadcrumbsItemCss","SixBreadcrumbsItem","constructor","hostRef","this","size","readonly","render","h","key","part","type","class","href","undefined","tabindex","target","name","slot"],"sources":["src/components/six-breadcrumbs-item/six-breadcrumbs-item.scss?tag=six-breadcrumbs-item&encapsulation=shadow","src/components/six-breadcrumbs-item/six-breadcrumbs-item.tsx"],"sourcesContent":["@import '../../../src/global/component';\n\n/**\n* @prop --separator-color: The color of the separator\n* @prop --last-item-color: The color of the last breadcrumbs item\n*/\n:host {\n --last-item-color: var(--six-color-web-rock-700);\n --separator-color: var(--six-color-web-rock-700);\n\n &::part(label) {\n padding: unset;\n }\n\n &::part(base) {\n display: flex;\n align-items: center;\n }\n\n &::part(separator) {\n align-items: center;\n user-select: none;\n -webkit-user-select: none;\n }\n\n six-button::part(label) {\n padding-left: var(--six-spacing-xx-small);\n padding-right: var(--six-spacing-xx-small);\n }\n}\n\n:host([read-only]) {\n six-button::part(base) {\n color: var(--last-item-color);\n }\n}\n\n.breadcrumb-item-readonly {\n cursor: default;\n}\n\n.breadcrumb-item__separator {\n display: flex;\n align-items: center;\n color: var(--separator-color);\n}\n\n:host(:last-of-type) .breadcrumb-item__separator {\n display: none;\n}\n","import { Component, Element, h, Prop } from '@stencil/core';\n\n/**\n * Breadcrumb items are used inside breadcrumbs to represent different links.\n *\n * @since 5.0\n * @status beta\n *\n * @slot - The breadcrumb item’s label.\n * @slot prefix - An optional prefix, usually an icon or icon button.\n * @slot suffix - An optional suffix, usually an icon or icon button.\n * @slot separator - The separator to use for the breadcrumb item. This will only change the separator for this item. If you want to change it for all items in the group, set the separator on six-breadcrumbs instead.\n *\n * @part base - The component's base wrapper.\n * @part button - The button that renders the item\n * @part separator - The separator\n */\n@Component({\n tag: 'six-breadcrumbs-item',\n styleUrl: 'six-breadcrumbs-item.scss',\n shadow: true,\n})\nexport class SixBreadcrumbsItem {\n @Element() host!: HTMLSixBreadcrumbsItemElement;\n\n /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */\n @Prop() href?: string;\n\n /** Tells the browser where to open the link. Only used when `href` is set. */\n @Prop() target?: '_blank' | '_parent' | '_self' | '_top';\n\n /** The breadcrumbs item size. */\n @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n /** Set to true to readonly the breadcrumb item. */\n @Prop({ attribute: 'read-only', reflect: true }) readonly: boolean = false;\n\n render() {\n return (\n <div part=\"base\">\n <six-button\n part=\"button\"\n type=\"link\"\n class={{ 'breadcrumb-item-readonly': this.readonly }}\n href={this.readonly ? undefined : this.href}\n tabindex={this.readonly ? -1 : undefined}\n target={this.target}\n size={this.size}\n >\n <slot name=\"prefix\" slot=\"prefix\" />\n <slot />\n <slot name=\"suffix\" slot=\"suffix\" />\n </six-button>\n <span part=\"separator\" class=\"breadcrumb-item__separator\" aria-hidden=\"true\">\n <slot name=\"separator\" />\n </span>\n </div>\n );\n }\n}\n"],"mappings":"kDAAA,MAAMA,EAAwB,42B,MCsBjBC,EAAkB,MAL/B,WAAAC,CAAAC,G,UAe2BC,KAAIC,KAAiC,SAGbD,KAAQE,SAAY,KAwBtE,CAtBC,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,KAAK,QACRF,EACE,cAAAC,IAAA,2CAAAC,KAAK,SACLC,KAAK,OACLC,MAAO,CAAE,2BAA4BR,KAAKE,UAC1CO,KAAMT,KAAKE,SAAWQ,UAAYV,KAAKS,KACvCE,SAAUX,KAAKE,UAAW,EAAKQ,UAC/BE,OAAQZ,KAAKY,OACbX,KAAMD,KAAKC,MAEXG,EAAA,QAAAC,IAAA,2CAAMQ,KAAK,SAASC,KAAK,WACzBV,EAAQ,QAAAC,IAAA,6CACRD,EAAM,QAAAC,IAAA,2CAAAQ,KAAK,SAASC,KAAK,YAE3BV,EAAM,QAAAC,IAAA,2CAAAC,KAAK,YAAYE,MAAM,6BAA4B,cAAa,QACpEJ,EAAA,QAAAC,IAAA,2CAAMQ,KAAK,e","ignoreList":[]}