@six-group/ui-library 4.0.0-beta.0 → 4.0.0-beta.2

package/dist/ui-library/p-9eba5c71.entry.js

@@ -1,2 +0,0 @@
-import{r as i,c as t,h as s,g as o}from"./p-16b99232.js";import{F as r}from"./p-3c100309.js";import{h as e}from"./p-b4dfb7cf.js";import{E as n}from"./p-9a860acc.js";const l=':host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none}.form-control--has-label .form-control__label{display:inline-block;color:var(--six-input-label-color);font-weight:var(--six-font-weight-bold);margin-bottom:var(--six-spacing-x-small)}.form-control--has-label .form-control__label__required::after{color:var(--six-color-danger-800);content:"*"}.form-control--has-label.form-control--small .form-control__label{font-size:var(--six-input-label-font-size-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--six-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control_label{font-size:var(--six-input-label-font-size-large)}.form-control--has-help-text .form-control__help-text{display:block;color:var(--six-input-help-text-color);margin-top:var(--six-spacing-x-small)}.form-control--has-help-text .form-control__help-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--has-error-text .form-control__error-text{display:block;color:var(--six-color-danger-800);margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text .form-control__error-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text.form-control--small .form-control__error-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-error-text.form-control--medium .form-control__error-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-error-text.form-control--large .form-control__error-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--disabled .form-control__help-text{color:var(--six-input-help-text-color-disabled)}.form-control--disabled .form-control__label{color:var(--six-input-label-color-disabled)}.form-control--invalid:not(.form-control--disabled) .form-control__label{color:var(--six-input-label-color)}:host{display:block}.input{display:inline-flex;align-items:stretch;justify-content:start;position:relative;width:100%;font-family:var(--six-font-family);font-weight:var(--six-input-font-weight);letter-spacing:var(--six-input-letter-spacing);background-color:var(--six-input-background-color);border:solid var(--six-border-width) var(--six-input-border-color);vertical-align:middle;overflow:hidden;transition:var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;cursor:text}.input--line{border:none;border-bottom:solid var(--six-border-width) var(--six-input-border-color)}.input:hover:not(.input--disabled){background-color:var(--six-input-background-color-hover);border-color:var(--six-input-border-color-hover)}.input:hover:not(.input--disabled) .input__control{color:var(--six-input-color-hover)}.input.input--focused:not(.input--disabled){background-color:var(--six-input-background-color-focus);border-bottom-color:var(--six-input-border-color-focus);box-shadow:0 1px 0 0 var(--six-input-border-color-focus)}.input.input--focused:not(.input--disabled):not(.input--line){border-color:var(--six-input-border-color-focus);box-shadow:var(--six-input-focus-shadow)}.input.input--focused:not(.input--disabled) .input__control{color:var(--six-input-color-focus)}.input.input--disabled{background-color:var(--six-input-background-color-disabled);border-color:var(--six-input-border-color-disabled);cursor:not-allowed}.input.input--disabled .input__control{color:var(--six-input-color-disabled)}.input.input--disabled .input__control::placeholder{color:var(--six-input-placeholder-color-disabled)}.input.input--invalid:not(.input--disabled):not(.input--focused){border-bottom-color:var(--six-input-border-color-danger)}.input.input--invalid:not(.input--disabled):not(.input--focused):not(.input--line){border-color:var(--six-input-border-color-danger)}.input__control{flex:1 1 auto;font-family:inherit;font-size:var(--six-input-font-size-medium);font-weight:inherit;min-width:0;color:var(--six-input-color);border:none;background:none;box-shadow:none;padding:0;margin:0;cursor:inherit;-webkit-appearance:none}.input__control::-webkit-search-decoration,.input__control::-webkit-search-cancel-button,.input__control::-webkit-search-results-button,.input__control::-webkit-search-results-decoration{-webkit-appearance:none}.input__control:-webkit-autofill,.input__control:-webkit-autofill:hover,.input__control:-webkit-autofill:focus,.input__control:-webkit-autofill:active{box-shadow:0 0 0 var(--six-height-large) var(--six-input-background-color-hover) inset !important;-webkit-text-fill-color:var(--six-color-primary-500)}.input__control::placeholder{color:var(--six-input-placeholder-color);user-select:none}.input__control:focus{outline:none}.input__control::-ms-reveal{display:none}.input__prefix,.input__suffix{display:inline-flex;flex:0 0 auto;align-items:center;cursor:default}.input__prefix ::slotted(six-icon),.input__suffix ::slotted(six-icon){color:var(--six-input-icon-color)}.input.input--disabled ::slotted(six-icon){cursor:not-allowed}.input--small{border-radius:var(--six-input-border-radius-small);font-size:var(--six-input-font-size-small);height:var(--six-height-small)}.input--small .input__control{height:calc(var(--six-height-small) - var(--six-border-width) * 2);margin:0 var(--six-input-spacing-small)}.input--small .input__control__prefix{margin:0 var(--six-input-prefix-spacing-small)}.input--small .input__clear,.input--small .input__password-toggle{margin-right:var(--six-input-spacing-small)}.input--small .input__prefix ::slotted(*){margin-left:var(--six-input-prefix-spacing-small)}.input--small .input__suffix ::slotted(*){margin-right:var(--six-input-prefix-spacing-small)}.input--medium{border-radius:var(--six-input-border-radius-medium);font-size:var(--six-input-font-size-medium);height:var(--six-height-medium)}.input--medium .input__control{height:calc(var(--six-height-medium) - var(--six-border-width) * 2);margin:0 var(--six-input-spacing-medium)}.input--medium .input__control__prefix{margin:0 var(--six-input-prefix-spacing-medium)}.input--medium .input__clear,.input--medium .input__password-toggle{margin-right:var(--six-input-spacing-medium)}.input--medium .input__prefix ::slotted(*){margin-left:var(--six-input-prefix-spacing-medium)}.input--medium .input__suffix ::slotted(*){margin-right:var(--six-input-prefix-spacing-medium)}.input--large{border-radius:var(--six-input-border-radius-large);font-size:var(--six-input-font-size-large);height:var(--six-height-large)}.input--large .input__control{height:calc(var(--six-height-large) - var(--six-border-width) * 2);margin:0 var(--six-input-spacing-large)}.input--large .input__control__prefix{margin:0 var(--six-input-prefix-spacing-large)}.input--large .input__clear,.input--large .input__password-toggle{margin-right:var(--six-input-spacing-large)}.input--large .input__prefix ::slotted(*){margin-left:var(--six-input-prefix-spacing-large)}.input--large .input__suffix ::slotted(*){margin-right:var(--six-input-prefix-spacing-large)}.input--pill.input--small{border-radius:var(--six-height-small)}.input--pill.input--medium{border-radius:var(--six-height-medium)}.input--pill.input--large{border-radius:var(--six-height-large)}.input__clear,.input__password-toggle{display:inline-flex;align-items:center;font-size:inherit;color:var(--six-input-icon-color);border:none;background:none;padding:0;transition:var(--six-transition-fast) color;cursor:pointer}.input__clear:hover,.input__password-toggle:hover{color:var(--six-input-icon-color-hover)}.input__clear:focus,.input__password-toggle:focus{outline:none}.input--empty .input__clear{visibility:hidden}';const a={large:"medium",medium:"small",small:"xSmall"};let h=0;const u=class{constructor(s){i(this,s);this.sixChange=t(this,"six-input-change",7);this.sixClear=t(this,"six-input-clear",7);this.sixInput=t(this,"six-input-input",7);this.sixFocus=t(this,"six-input-focus",7);this.sixBlur=t(this,"six-input-blur",7);this.sixValueChange=t(this,"six-input-value-change",7);this.inputId=`input-${++h}`;this.labelId=`input-label-${h}`;this.helpTextId=`input-help-text-${h}`;this.errorTextId=`input-error-text-${h}`;this.customErrorText="";this.customValidation=false;this.eventListeners=new n;this.defaultValue="";this.hasFocus=false;this.hasHelpTextSlot=false;this.hasErrorTextSlot=false;this.hasLabelSlot=false;this.isPasswordVisible=false;this.type="text";this.size="medium";this.name="";this.value="";this.pill=false;this.label="";this.helpText="";this.errorText="";this.placeholder=undefined;this.disabled=false;this.readonly=false;this.minlength=undefined;this.maxlength=undefined;this.min=undefined;this.max=undefined;this.step=undefined;this.pattern=undefined;this.required=undefined;this.autocapitalize=undefined;this.autocorrect=undefined;this.autocomplete=undefined;this.autofocus=undefined;this.spellcheck=undefined;this.invalid=false;this.clearable=false;this.togglePassword=false;this.inputmode=undefined;this.line=false;this.errorOnBlur=false}handleLabelChange(){this.handleSlotChange()}handleValueChange(){if(!this.input){return}this.input.value=this.value;this.invalid=!this.input.checkValidity();this.sixValueChange.emit()}connectedCallback(){this.handleChange=this.handleChange.bind(this);this.handleInput=this.handleInput.bind(this);this.handleInvalid=this.handleInvalid.bind(this);this.handleBlur=this.handleBlur.bind(this);this.handleFocus=this.handleFocus.bind(this);this.handleClearClick=this.handleClearClick.bind(this);this.handlePasswordToggle=this.handlePasswordToggle.bind(this);this.handleSlotChange=this.handleSlotChange.bind(this);this.host.shadowRoot.addEventListener("slotchange",this.handleSlotChange)}componentWillLoad(){this.defaultValue=this.value;this.handleSlotChange()}componentDidLoad(){this.eventListeners.add(this.input,"invalid",(i=>{if(this.customValidation||!this.hasErrorTextSlot&&!this.errorText&&!this.customErrorText){this.customErrorText=this.input.validationMessage}i.preventDefault()}))}disconnectedCallback(){this.host.shadowRoot.removeEventListener("slotchange",this.handleSlotChange);this.eventListeners.removeAll()}async setFocus(i){this.input.focus(i)}async removeFocus(){this.input.blur()}async select(){return this.input.select()}async setSelectionRange(i,t,s="none"){return this.input.setSelectionRange(i,t,s)}async setRangeText(i,t,s,o="preserve"){this.input.setRangeText(i,t,s,o);if(this.value!==this.input.value){this.value=this.input.value;this.sixChange.emit();this.sixInput.emit()}}async reportValidity(){return this.input.reportValidity()}async checkValidity(){return this.input.validity.valid}async setCustomValidity(i){this.customErrorText="";this.customValidation=i!=="";this.input.setCustomValidity(i);this.invalid=!this.input.checkValidity()}async getValidity(){return this.input.validity}async isValid(){return this.input.validity.valid}async getValidationMessage(){return this.input.validationMessage}async reset(){this.value=this.defaultValue;this.customErrorText="";this.customValidation=false;this.input.setCustomValidity("");this.invalid=false}handleChange(){this.value=this.input.value;this.sixChange.emit()}handleInput(){this.value=this.input.value;this.sixInput.emit()}handleInvalid(){this.invalid=true}handleBlur(){this.hasFocus=false;this.sixBlur.emit()}handleFocus(){this.hasFocus=true;this.sixFocus.emit()}handleClearClick(i){this.value="";this.sixClear.emit();this.sixInput.emit();this.sixChange.emit();this.input.focus();i.stopPropagation()}handlePasswordToggle(){this.isPasswordVisible=!this.isPasswordVisible}handleSlotChange(){this.hasHelpTextSlot=e(this.host,"help-text");this.hasErrorTextSlot=e(this.host,"error-text");this.hasLabelSlot=e(this.host,"label")}displayError(){return this.invalid&&(!this.errorOnBlur||!this.hasFocus)}render(){var i;return s(r,{inputId:this.inputId,label:this.label,labelId:this.labelId,hasLabelSlot:this.hasLabelSlot,helpTextId:this.helpTextId,helpText:this.helpText,hasHelpTextSlot:this.hasHelpTextSlot,errorTextId:this.errorTextId,errorText:this.customErrorText?this.customErrorText:this.errorText,hasErrorTextSlot:this.hasErrorTextSlot,size:this.size,disabled:this.disabled,required:this.required,displayError:this.displayError()},s("div",{part:"base",class:{input:true,"input--small":this.size==="small","input--medium":this.size==="medium","input--large":this.size==="large","input--line":this.line,"input--pill":this.pill,"input--disabled":this.disabled,"input--focused":this.hasFocus,"input--empty":((i=this.value)===null||i===void 0?void 0:i.length)===0,"input--invalid":this.invalid}},s("span",{part:"prefix",class:"input__prefix"},s("slot",{name:"prefix"})),s("input",{part:"input",ref:i=>this.input=i,id:this.inputId,size:1,class:{input__control:true,input__control__prefix:e(this.host,"prefix")},type:this.type==="password"&&this.isPasswordVisible?"text":this.type,name:this.name,placeholder:this.placeholder,disabled:this.disabled,readonly:this.readonly,minLength:this.minlength,maxLength:this.maxlength,min:this.min,max:this.max,step:this.step,value:this.value,autoCapitalize:this.autocapitalize,autoComplete:this.autocomplete,autoCorrect:this.autocorrect,autoFocus:this.autofocus,spellcheck:this.spellcheck,pattern:this.pattern,required:this.required,inputMode:this.inputmode,"aria-labelledby":this.labelId,"aria-describedby":this.helpTextId,"aria-invalid":this.invalid?"true":"false",onChange:this.handleChange,onInput:this.handleInput,onInvalid:this.handleInvalid,onFocus:this.handleFocus,onBlur:this.handleBlur,"data-testid":"input-control"}),this.clearable&&s("button",{part:"clear-button",class:"input__clear",type:"button",onClick:this.handleClearClick,tabindex:"-1","data-testid":"input-clear-button"},s("slot",{name:"clear-icon"},s("six-icon",{size:a[this.size]},"clear"))),this.togglePassword&&s("button",{part:"password-toggle-button",class:"input__password-toggle",type:"button",onClick:this.handlePasswordToggle,tabindex:"-1"},this.isPasswordVisible?s("slot",{name:"show-password-icon"},s("six-icon",{size:a[this.size]},"visibility_off")):s("slot",{name:"hide-password-icon"},s("six-icon",{size:a[this.size]},"visibility"))),s("span",{part:"suffix",class:"input__suffix"},s("slot",{name:"suffix"}))))}get host(){return o(this)}static get watchers(){return{helpText:["handleLabelChange"],errorText:["handleLabelChange"],label:["handleLabelChange"],value:["handleValueChange"]}}};u.style=l;export{u as six_input};
-//# sourceMappingURL=p-9eba5c71.entry.js.map

package/dist/ui-library/p-9eba5c71.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["sixInputCss","ICON_SIZES","large","medium","small","id","SixInput","this","inputId","labelId","helpTextId","errorTextId","customErrorText","customValidation","eventListeners","EventListeners","defaultValue","handleLabelChange","handleSlotChange","handleValueChange","input","value","invalid","checkValidity","sixValueChange","emit","connectedCallback","handleChange","bind","handleInput","handleInvalid","handleBlur","handleFocus","handleClearClick","handlePasswordToggle","host","shadowRoot","addEventListener","componentWillLoad","componentDidLoad","add","event","hasErrorTextSlot","errorText","validationMessage","preventDefault","disconnectedCallback","removeEventListener","removeAll","async","options","focus","blur","select","selectionStart","selectionEnd","selectionDirection","setSelectionRange","replacement","start","end","selectMode","setRangeText","sixChange","sixInput","reportValidity","validity","valid","message","setCustomValidity","hasFocus","sixBlur","sixFocus","sixClear","stopPropagation","isPasswordVisible","hasHelpTextSlot","hasSlot","hasLabelSlot","displayError","errorOnBlur","render","h","FormControl","label","helpText","size","disabled","required","part","class","line","pill","_a","length","name","ref","el","input__control","input__control__prefix","type","placeholder","readonly","minLength","minlength","maxLength","maxlength","min","max","step","autoCapitalize","autocapitalize","autoComplete","autocomplete","autoCorrect","autocorrect","autoFocus","autofocus","spellcheck","pattern","inputMode","inputmode","onChange","onInput","onInvalid","onFocus","onBlur","clearable","onClick","tabindex","togglePassword"],"sources":["./src/components/six-input/six-input.scss?tag=six-input&encapsulation=shadow","./src/components/six-input/six-input.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n  display: block;\n}\n\n.input {\n  display: inline-flex;\n  align-items: stretch;\n  justify-content: start;\n  position: relative;\n  width: 100%;\n  font-family: var(--six-font-family);\n  font-weight: var(--six-input-font-weight);\n  letter-spacing: var(--six-input-letter-spacing);\n  background-color: var(--six-input-background-color);\n  border: solid var(--six-border-width) var(--six-input-border-color);\n  vertical-align: middle;\n  overflow: hidden;\n  transition: var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;\n  cursor: text;\n\n  &--line {\n    border: none;\n    border-bottom: solid var(--six-border-width) var(--six-input-border-color);\n  }\n\n  &:hover:not(.input--disabled) {\n    background-color: var(--six-input-background-color-hover);\n    border-color: var(--six-input-border-color-hover);\n\n    .input__control {\n      color: var(--six-input-color-hover);\n    }\n  }\n\n  &.input--focused:not(.input--disabled) {\n    background-color: var(--six-input-background-color-focus);\n\n    border-bottom-color: var(--six-input-border-color-focus);\n    box-shadow: 0 1px 0 0 var(--six-input-border-color-focus);\n\n    &:not(.input--line) {\n      border-color: var(--six-input-border-color-focus);\n      box-shadow: var(--six-input-focus-shadow);\n    }\n\n    .input__control {\n      color: var(--six-input-color-focus);\n    }\n  }\n\n  &.input--disabled {\n    background-color: var(--six-input-background-color-disabled);\n    border-color: var(--six-input-border-color-disabled);\n    cursor: not-allowed;\n\n    .input__control {\n      color: var(--six-input-color-disabled);\n\n      &::placeholder {\n        color: var(--six-input-placeholder-color-disabled);\n      }\n    }\n  }\n\n  &.input--invalid:not(.input--disabled):not(.input--focused) {\n    border-bottom-color: var(--six-input-border-color-danger);\n\n    &:not(.input--line) {\n      border-color: var(--six-input-border-color-danger);\n    }\n  }\n}\n\n.input__control {\n  flex: 1 1 auto;\n  font-family: inherit;\n  font-size: var(--six-input-font-size-medium);\n  font-weight: inherit;\n  min-width: 0;\n  color: var(--six-input-color);\n  border: none;\n  background: none;\n  box-shadow: none;\n  padding: 0;\n  margin: 0;\n  cursor: inherit;\n  -webkit-appearance: none;\n\n  &::-webkit-search-decoration,\n  &::-webkit-search-cancel-button,\n  &::-webkit-search-results-button,\n  &::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n\n  &:-webkit-autofill,\n  &:-webkit-autofill:hover,\n  &:-webkit-autofill:focus,\n  &:-webkit-autofill:active {\n    box-shadow: 0 0 0 var(--six-height-large) var(--six-input-background-color-hover) inset !important;\n    -webkit-text-fill-color: var(--six-color-primary-500);\n  }\n\n  &::placeholder {\n    color: var(--six-input-placeholder-color);\n    user-select: none;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &::-ms-reveal {\n    display: none;\n  }\n}\n\n.input__prefix,\n.input__suffix {\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  cursor: default;\n\n  ::slotted(six-icon) {\n    color: var(--six-input-icon-color);\n  }\n}\n\n.input {\n  &.input--disabled {\n    ::slotted(six-icon) {\n      cursor: not-allowed;\n    }\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Size modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.input--small {\n  border-radius: var(--six-input-border-radius-small);\n  font-size: var(--six-input-font-size-small);\n  height: var(--six-height-small);\n\n  .input__control {\n    height: calc(var(--six-height-small) - var(--six-border-width) * 2);\n    margin: 0 var(--six-input-spacing-small);\n  }\n\n  .input__control__prefix {\n    margin: 0 var(--six-input-prefix-spacing-small);\n  }\n\n  .input__clear,\n  .input__password-toggle {\n    margin-right: var(--six-input-spacing-small);\n  }\n\n  .input__prefix ::slotted(*) {\n    margin-left: var(--six-input-prefix-spacing-small);\n  }\n\n  .input__suffix ::slotted(*) {\n    margin-right: var(--six-input-prefix-spacing-small);\n  }\n}\n\n.input--medium {\n  border-radius: var(--six-input-border-radius-medium);\n  font-size: var(--six-input-font-size-medium);\n  height: var(--six-height-medium);\n\n  .input__control {\n    height: calc(var(--six-height-medium) - var(--six-border-width) * 2);\n    margin: 0 var(--six-input-spacing-medium);\n  }\n\n  .input__control__prefix {\n    margin: 0 var(--six-input-prefix-spacing-medium);\n  }\n\n  .input__clear,\n  .input__password-toggle {\n    margin-right: var(--six-input-spacing-medium);\n  }\n\n  .input__prefix ::slotted(*) {\n    margin-left: var(--six-input-prefix-spacing-medium);\n  }\n\n  .input__suffix ::slotted(*) {\n    margin-right: var(--six-input-prefix-spacing-medium);\n  }\n}\n\n.input--large {\n  border-radius: var(--six-input-border-radius-large);\n  font-size: var(--six-input-font-size-large);\n  height: var(--six-height-large);\n\n  .input__control {\n    height: calc(var(--six-height-large) - var(--six-border-width) * 2);\n    margin: 0 var(--six-input-spacing-large);\n  }\n\n  .input__control__prefix {\n    margin: 0 var(--six-input-prefix-spacing-large);\n  }\n\n  .input__clear,\n  .input__password-toggle {\n    margin-right: var(--six-input-spacing-large);\n  }\n\n  .input__prefix ::slotted(*) {\n    margin-left: var(--six-input-prefix-spacing-large);\n  }\n\n  .input__suffix ::slotted(*) {\n    margin-right: var(--six-input-prefix-spacing-large);\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pill modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.input--pill {\n  &.input--small {\n    border-radius: var(--six-height-small);\n  }\n\n  &.input--medium {\n    border-radius: var(--six-height-medium);\n  }\n\n  &.input--large {\n    border-radius: var(--six-height-large);\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Clearable + Password Toggle\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.input__clear,\n.input__password-toggle {\n  display: inline-flex;\n  align-items: center;\n  font-size: inherit;\n  color: var(--six-input-icon-color);\n  border: none;\n  background: none;\n  padding: 0;\n  transition: var(--six-transition-fast) color;\n  cursor: pointer;\n\n  &:hover {\n    color: var(--six-input-icon-color-hover);\n  }\n\n  &:focus {\n    outline: none;\n  }\n}\n\n.input--empty .input__clear {\n  visibility: hidden;\n}\n","import { Component, Element, Event, EventEmitter, Method, Prop, State, Watch, h } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\n\nconst ICON_SIZES: Record<'small' | 'medium' | 'large', 'xSmall' | 'small' | 'medium'> = {\n  large: 'medium',\n  medium: 'small',\n  small: 'xSmall',\n};\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot label - The input's label. Alternatively, you can use the label prop.\n * @slot prefix - Used to prepend an icon or similar element to the input.\n * @slot suffix - Used to append an icon or similar element to the input.\n * @slot clear-icon - An icon to use in lieu of the default clear icon.\n * @slot show-password-icon - An icon to use in lieu of the default show password icon.\n * @slot hide-password-icon - An icon to use in lieu of the default hide password icon.\n * @slot help-text - Help text that describes how to use the input. Alternatively, you can use the help-text prop.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n *\n * @part base - The component's base wrapper.\n * @part form-control - The form control that wraps the label, input, and help-text.\n * @part label - The input label.\n * @part input - The input control.\n * @part prefix - The input prefix container.\n * @part clear-button - The clear button.\n * @part password-toggle-button - The password toggle button.\n * @part suffix - The input suffix container.\n * @part help-text - The input help text.\n */\n\n@Component({\n  tag: 'six-input',\n  styleUrl: 'six-input.scss',\n  shadow: true,\n})\nexport class SixInput {\n  inputId = `input-${++id}`;\n  labelId = `input-label-${id}`;\n  helpTextId = `input-help-text-${id}`;\n  errorTextId = `input-error-text-${id}`;\n  input: HTMLInputElement;\n  customErrorText = '';\n  customValidation = false;\n\n  readonly eventListeners = new EventListeners();\n\n  @Element() host: HTMLSixInputElement;\n\n  @State() hasFocus = false;\n  @State() hasHelpTextSlot = false;\n  @State() hasErrorTextSlot = false;\n  @State() hasLabelSlot = false;\n  @State() isPasswordVisible = false;\n\n  /** The input's type. */\n  @Prop({ reflect: true }) type: 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' = 'text';\n\n  /** The input's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** The input's name attribute. */\n  @Prop({ reflect: true }) name = '';\n\n  /** The input's value attribute. */\n  @Prop({ mutable: true, reflect: true }) value = '';\n\n  /** Set to true to draw a pill-style input with rounded edges. */\n  @Prop({ reflect: true }) pill = false;\n\n  /** The input's label. Alternatively, you can use the label slot. */\n  @Prop() label = '';\n\n  /** The input's help text. Alternatively, you can use the help-text slot. */\n  @Prop() helpText = '';\n\n  /** The input's error text. Alternatively, you can use the error-text slot. */\n  @Prop() errorText = '';\n\n  /** The input's placeholder text. */\n  @Prop() placeholder: string;\n\n  /** Set to true to disable the input. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Set to true to make the input readonly. */\n  @Prop({ reflect: true }) readonly = false;\n\n  /** The minimum length of input that will be considered valid. */\n  @Prop({ reflect: true }) minlength: number;\n\n  /** The maximum length of input that will be considered valid. */\n  @Prop({ reflect: true }) maxlength: number;\n\n  /** The input's minimum value. */\n  @Prop({ reflect: true }) min: number;\n\n  /** The input's maximum value. */\n  @Prop({ reflect: true }) max: number;\n\n  /** The input's step attribute. */\n  @Prop({ reflect: true }) step: number;\n\n  /** A pattern to validate input against. */\n  @Prop({ reflect: true }) pattern: string;\n\n  /** Set to true to make the input a required field. */\n  @Prop({ reflect: true }) required: boolean;\n\n  /** The input's autocaptialize attribute. */\n  @Prop() autocapitalize: string;\n\n  /** The input's autocorrect attribute. */\n  @Prop() autocorrect: string;\n\n  /** The input's autocomplete attribute. */\n  @Prop() autocomplete: string;\n\n  /** The input's autofocus attribute. */\n  @Prop() autofocus: boolean;\n\n  /** Enables spell checking on the input. */\n  @Prop() spellcheck: boolean;\n\n  /**\n   * This will be true when the control is in an invalid state. Validity is determined by props such as `type`,\n   * `required`, `minlength`, `maxlength`, and `pattern` using the browser's constraint validation API.\n   */\n  @Prop({ mutable: true, reflect: true }) invalid = false;\n\n  /** Set to true to add a clear button when the input is populated. */\n  @Prop() clearable = false;\n\n  /** Set to true to add a password toggle button for password inputs. */\n  @Prop() togglePassword = false;\n\n  /** The input's inputmode attribute. */\n  @Prop() inputmode: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';\n\n  /** Set to render as line */\n  @Prop() line = false;\n\n  /** Set to display the error text on blur and not when typing */\n  @Prop() errorOnBlur = false;\n\n  @Watch('helpText')\n  @Watch('errorText')\n  @Watch('label')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  @Watch('value')\n  handleValueChange() {\n    if (!this.input) {\n      return;\n    }\n    this.input.value = this.value;\n    this.invalid = !this.input.checkValidity();\n    this.sixValueChange.emit();\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  /**\n   * Emitted whenever the value changes. Access the new value via event.target.value.\n   * six-input-value-change will emit whenever the value changes.\n   * So be it on input or when dynamically set. six-input-input will only be emitted when the user enters data,\n   * but not when a value is dynamically set. six-input-change will only be emitted when the user either presses enter\n   * or leaves the input field after entering some data.\n   * */\n  @Event({ eventName: 'six-input-value-change' }) sixValueChange: EventEmitter<EmptyPayload>;\n\n  /** defaultValue which the input will be reverted to when executing reset */\n  private defaultValue = '';\n\n  connectedCallback() {\n    this.handleChange = this.handleChange.bind(this);\n    this.handleInput = this.handleInput.bind(this);\n    this.handleInvalid = this.handleInvalid.bind(this);\n    this.handleBlur = this.handleBlur.bind(this);\n    this.handleFocus = this.handleFocus.bind(this);\n    this.handleClearClick = this.handleClearClick.bind(this);\n    this.handlePasswordToggle = this.handlePasswordToggle.bind(this);\n    this.handleSlotChange = this.handleSlotChange.bind(this);\n\n    this.host.shadowRoot.addEventListener('slotchange', this.handleSlotChange);\n  }\n\n  componentWillLoad() {\n    this.defaultValue = this.value;\n    this.handleSlotChange();\n  }\n\n  componentDidLoad() {\n    this.eventListeners.add(this.input, 'invalid', (event) => {\n      if (this.customValidation || (!this.hasErrorTextSlot && !this.errorText && !this.customErrorText)) {\n        this.customErrorText = this.input.validationMessage;\n      }\n      event.preventDefault();\n    });\n  }\n\n  disconnectedCallback() {\n    this.host.shadowRoot.removeEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.removeAll();\n  }\n\n  /** Sets focus on the input. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /** Removes focus from the input. */\n  @Method()\n  async removeFocus() {\n    this.input.blur();\n  }\n\n  /** Selects all the text in the input. */\n  @Method()\n  async select() {\n    return this.input.select();\n  }\n\n  /** Sets the start and end positions of the text selection (0-based). */\n  @Method()\n  async setSelectionRange(\n    selectionStart: number,\n    selectionEnd: number,\n    selectionDirection: 'forward' | 'backward' | 'none' = 'none'\n  ) {\n    return this.input.setSelectionRange(selectionStart, selectionEnd, selectionDirection);\n  }\n\n  /** Replaces a range of text with a new string. */\n  @Method()\n  async setRangeText(\n    replacement: string,\n    start: number,\n    end: number,\n    selectMode: 'select' | 'start' | 'end' | 'preserve' = 'preserve'\n  ) {\n    this.input.setRangeText(replacement, start, end, selectMode);\n\n    if (this.value !== this.input.value) {\n      this.value = this.input.value;\n      this.sixChange.emit();\n      this.sixInput.emit();\n    }\n  }\n\n  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  @Method()\n  async reportValidity() {\n    return this.input.reportValidity();\n  }\n\n  /** Checks for validity. */\n  @Method()\n  async checkValidity() {\n    return this.input.validity.valid;\n  }\n\n  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */\n  @Method()\n  async setCustomValidity(message: string) {\n    this.customErrorText = '';\n    this.customValidation = message !== '';\n    this.input.setCustomValidity(message);\n    this.invalid = !this.input.checkValidity();\n  }\n\n  /** Returns the native input's validity */\n  @Method()\n  async getValidity() {\n    return this.input.validity;\n  }\n\n  /** Returns the native input's validity */\n  @Method()\n  async isValid() {\n    return this.input.validity.valid;\n  }\n\n  /** Returns the native input's validationMessage */\n  @Method()\n  async getValidationMessage() {\n    return this.input.validationMessage;\n  }\n\n  /** Resets the formcontrol */\n  @Method()\n  async reset() {\n    this.value = this.defaultValue;\n    this.customErrorText = '';\n    this.customValidation = false;\n    this.input.setCustomValidity('');\n    this.invalid = false;\n  }\n\n  handleChange() {\n    this.value = this.input.value;\n    this.sixChange.emit();\n  }\n\n  handleInput() {\n    this.value = this.input.value;\n    this.sixInput.emit();\n  }\n\n  handleInvalid() {\n    this.invalid = true;\n  }\n\n  handleBlur() {\n    this.hasFocus = false;\n    this.sixBlur.emit();\n  }\n\n  handleFocus() {\n    this.hasFocus = true;\n    this.sixFocus.emit();\n  }\n\n  handleClearClick(event: MouseEvent) {\n    this.value = '';\n    this.sixClear.emit();\n    this.sixInput.emit();\n    this.sixChange.emit();\n    this.input.focus();\n\n    event.stopPropagation();\n  }\n\n  handlePasswordToggle() {\n    this.isPasswordVisible = !this.isPasswordVisible;\n  }\n\n  handleSlotChange() {\n    this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n    this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n  }\n\n  displayError() {\n    return this.invalid && (!this.errorOnBlur || !this.hasFocus);\n  }\n\n  render() {\n    return (\n      <FormControl\n        inputId={this.inputId}\n        label={this.label}\n        labelId={this.labelId}\n        hasLabelSlot={this.hasLabelSlot}\n        helpTextId={this.helpTextId}\n        helpText={this.helpText}\n        hasHelpTextSlot={this.hasHelpTextSlot}\n        errorTextId={this.errorTextId}\n        errorText={this.customErrorText ? this.customErrorText : this.errorText}\n        hasErrorTextSlot={this.hasErrorTextSlot}\n        size={this.size}\n        disabled={this.disabled}\n        required={this.required}\n        displayError={this.displayError()}\n      >\n        <div\n          part=\"base\"\n          class={{\n            input: true,\n\n            // Sizes\n            'input--small': this.size === 'small',\n            'input--medium': this.size === 'medium',\n            'input--large': this.size === 'large',\n\n            // States\n            'input--line': this.line,\n            'input--pill': this.pill,\n            'input--disabled': this.disabled,\n            'input--focused': this.hasFocus,\n            'input--empty': this.value?.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.input = el)}\n            id={this.inputId}\n            size={1} // needed for firefox to overrule the default of 20\n            class={{\n              input__control: true,\n              input__control__prefix: hasSlot(this.host, 'prefix'),\n            }}\n            type={this.type === 'password' && this.isPasswordVisible ? 'text' : this.type}\n            name={this.name}\n            placeholder={this.placeholder}\n            disabled={this.disabled}\n            readonly={this.readonly}\n            minLength={this.minlength}\n            maxLength={this.maxlength}\n            min={this.min}\n            max={this.max}\n            step={this.step}\n            value={this.value}\n            autoCapitalize={this.autocapitalize}\n            autoComplete={this.autocomplete}\n            autoCorrect={this.autocorrect}\n            autoFocus={this.autofocus}\n            spellcheck={this.spellcheck}\n            pattern={this.pattern}\n            required={this.required}\n            inputMode={this.inputmode}\n            aria-labelledby={this.labelId}\n            aria-describedby={this.helpTextId}\n            aria-invalid={this.invalid ? 'true' : 'false'}\n            onChange={this.handleChange}\n            onInput={this.handleInput}\n            onInvalid={this.handleInvalid}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n            data-testid=\"input-control\"\n          />\n\n          {this.clearable && (\n            <button\n              part=\"clear-button\"\n              class=\"input__clear\"\n              type=\"button\"\n              onClick={this.handleClearClick}\n              tabindex=\"-1\"\n              data-testid=\"input-clear-button\"\n            >\n              <slot name=\"clear-icon\">\n                <six-icon size={ICON_SIZES[this.size]}>clear</six-icon>\n              </slot>\n            </button>\n          )}\n\n          {this.togglePassword && (\n            <button\n              part=\"password-toggle-button\"\n              class=\"input__password-toggle\"\n              type=\"button\"\n              onClick={this.handlePasswordToggle}\n              tabindex=\"-1\"\n            >\n              {this.isPasswordVisible ? (\n                <slot name=\"show-password-icon\">\n                  <six-icon size={ICON_SIZES[this.size]}>visibility_off</six-icon>\n                </slot>\n              ) : (\n                <slot name=\"hide-password-icon\">\n                  <six-icon size={ICON_SIZES[this.size]}>visibility</six-icon>\n                </slot>\n              )}\n            </button>\n          )}\n\n          <span part=\"suffix\" class=\"input__suffix\">\n            <slot name=\"suffix\" />\n          </span>\n        </div>\n      </FormControl>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/ui-library/p-9f9bef35.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["sixRangeCss","id","SixRange","this","inputId","labelId","helpTextId","errorTextId","customErrorText","customValidation","eventListeners","EventListeners","defaultValue","value","toString","handleLabelChange","handleSlotChange","handleValueChange","input","calculateColorRunnableTrack","invalid","checkValidity","connectedCallback","handleInput","bind","handleBlur","handleFocus","handleTouchStart","host","shadowRoot","addEventListener","componentWillLoad","undefined","min","max","componentDidLoad","syncTooltip","resizeObserver","ResizeObserver","add","event","hasErrorTextSlot","errorText","validationMessage","preventDefault","disconnectedCallback","removeEventListener","removeAll","async","options","focus","blur","message","setCustomValidity","Number","sixChange","emit","requestAnimationFrame","hasFocus","hasTooltip","sixBlur","unobserve","sixFocus","observe","hasHelpTextSlot","hasSlot","hasLabelSlot","setFocus","displayError","errorOnBlur","tooltip","percent","Math","inputWidth","offsetWidth","tooltipWidth","output","thumbSize","getComputedStyle","getPropertyValue","x","style","transform","marginLeft","isFirefox","parseInt","ceil","background","navigator","userAgent","toLowerCase","indexOf","render","h","FormControl","label","helpText","size","disabled","required","part","class","range","onTouchStart","ref","el","type","name","step","onInput","onFocus","onBlur","tooltipFormatter"],"sources":["./src/components/six-range/six-range.scss?tag=six-range&encapsulation=shadow","./src/components/six-range/six-range.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n  --thumb-size: 14px;\n  --tooltip-offset-y: 10px;\n  --track-color: var(--six-color-web-rock-900);\n  --thumb-color: var(--six-color-web-rock-900);\n  --track-height: 3px;\n\n  display: block;\n}\n\n.range {\n  position: relative;\n\n  .range__control {\n    -webkit-appearance: none;\n    width: 100%;\n    height: var(--six-input-height-medium);\n    background: transparent;\n    line-height: var(--six-input-height-medium);\n    vertical-align: middle;\n\n    &::-webkit-slider-runnable-track {\n      width: 100%;\n      height: var(--track-height);\n      border-radius: 3px;\n      border: none;\n    }\n\n    &::-webkit-slider-thumb {\n      border: none;\n      width: var(--thumb-size);\n      height: var(--thumb-size);\n      border-radius: 50%;\n      background-color: var(--thumb-color);\n      -webkit-appearance: none;\n      margin-top: calc(var(--thumb-size) / -2 + var(--track-height) / 2);\n      transition: var(--six-transition-fast) border-color, var(--six-transition-fast) background-color,\n        var(--six-transition-fast) color, var(--six-transition-fast) box-shadow, var(--six-transition-fast) transform;\n      cursor: pointer;\n    }\n\n    &:not(:disabled)::-webkit-slider-thumb:hover {\n      background-color: var(--thumb-color);\n    }\n\n    &:not(:disabled):focus::-webkit-slider-thumb {\n      background-color: var(--thumb-color);\n    }\n\n    &:not(:disabled)::-webkit-slider-thumb:active {\n      background-color: var(--thumb-color);\n      cursor: grabbing;\n    }\n\n    //  Firefox\n    &::-moz-focus-outer {\n      border: 0;\n    }\n\n    &::-moz-range-track {\n      width: 100%;\n      height: var(--track-height);\n      background-color: var(--six-progress-track-color);\n      border-radius: 3px;\n      border: none;\n    }\n\n    &::-moz-range-progress {\n      height: var(--track-height);\n      border-radius: 3px;\n      background-color: var(--track-color);\n      border: none;\n    }\n\n    &::-moz-range-thumb {\n      border: none;\n      height: var(--thumb-size);\n      width: var(--thumb-size);\n      border-radius: 50%;\n      background-color: var(--thumb-color);\n      transition: var(--six-transition-fast) border-color, var(--six-transition-fast) background-color,\n        var(--six-transition-fast) color, var(--six-transition-fast) box-shadow, var(--six-transition-fast) transform;\n      cursor: pointer;\n    }\n\n    &:not(:disabled)::-moz-range-thumb:hover {\n      background-color: var(--thumb-color);\n    }\n\n    &:not(:disabled):focus::-moz-range-thumb {\n      background-color: var(--thumb-color);\n    }\n\n    &:not(:disabled)::-moz-range-thumb:active {\n      background-color: var(--thumb-color);\n      cursor: grabbing;\n    }\n\n    //  States\n    &:focus {\n      outline: none;\n    }\n\n    &:disabled {\n      &::-webkit-slider-thumb {\n        cursor: not-allowed;\n        color: var(--six-color-web-rock-300);\n        border-color: var(--six-color-web-rock-300);\n        background-color: var(--six-color-web-rock-300);\n      }\n\n      &::-moz-range-thumb {\n        cursor: not-allowed;\n        color: var(--six-color-web-rock-300);\n        border-color: var(--six-color-web-rock-300);\n        background-color: var(--six-color-web-rock-300);\n      }\n    }\n  }\n}\n\n// Tooltip\n.range__tooltip {\n  position: absolute;\n  z-index: var(--six-z-index-tooltip);\n  left: 1px;\n  border-radius: var(--six-border-radius-medium);\n  background-color: var(--six-color-web-rock-900);\n  font-family: var(--six-font-family);\n  font-size: var(--six-tooltip-font-size);\n  font-weight: var(--six-tooltip-font-weight);\n  line-height: var(--six-tooltip-line-height);\n  color: var(--six-color-white);\n  opacity: 0;\n  padding: var(--six-spacing-xxx-small) var(--six-spacing-xx-small);\n  transition: var(--six-transition-fast) opacity;\n  pointer-events: none;\n\n  &::after {\n    content: '';\n    position: absolute;\n    width: 0;\n    height: 0;\n    left: 50%;\n    margin-left: calc(-1 * var(--six-tooltip-arrow-size));\n  }\n}\n\n.range--tooltip-visible .range__tooltip {\n  opacity: 1;\n}\n\n// Tooltip on top\n.range--tooltip-top .range__tooltip {\n  top: calc(-1 * var(--thumb-size) - var(--tooltip-offset-y));\n\n  &::after {\n    border-top: var(--six-tooltip-arrow-size) solid var(--six-color-web-rock-900);\n    border-left: var(--six-tooltip-arrow-size) solid transparent;\n    border-right: var(--six-tooltip-arrow-size) solid transparent;\n    top: 100%;\n  }\n}\n\n// Tooltip on bottom\n.range--tooltip-bottom .range__tooltip {\n  bottom: calc(-1 * var(--thumb-size) - var(--tooltip-offset-y));\n\n  &::after {\n    border-bottom: var(--six-tooltip-arrow-size) solid var(--six-color-web-rock-900);\n    border-left: var(--six-tooltip-arrow-size) solid transparent;\n    border-right: var(--six-tooltip-arrow-size) solid transparent;\n    bottom: 100%;\n  }\n}\n","import { Component, Element, Event, EventEmitter, Method, Prop, State, Watch, h } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot label - The input's label. Alternatively, you can use the label prop.\n * @slot help-text - Help text that describes how to use the input. Alternatively, you can use the help-text prop.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n *\n * @part base - The component's base wrapper.\n * @part input - The native range input.\n * @part tooltip - The range tooltip.\n */\n@Component({\n  tag: 'six-range',\n  styleUrl: 'six-range.scss',\n  shadow: true,\n})\nexport class SixRange {\n  inputId = `input-${++id}`;\n  labelId = `input-label-${id}`;\n  helpTextId = `input-help-text-${id}`;\n  errorTextId = `input-error-text-${id}`;\n  resizeObserver: ResizeObserver;\n\n  output: HTMLElement;\n  input: HTMLInputElement;\n  customErrorText = '';\n  customValidation = false;\n\n  readonly eventListeners = new EventListeners();\n\n  @Element() host: HTMLSixRangeElement;\n\n  @State() hasFocus = false;\n  @State() hasHelpTextSlot = false;\n  @State() hasLabelSlot = false;\n  @State() hasErrorTextSlot = false;\n  @State() hasTooltip = false;\n\n  /** The input's name attribute. */\n  @Prop() name = '';\n\n  /** The input's value attribute. */\n  @Prop({ mutable: true }) value: number;\n\n  /** Set to true to make the input a required field. */\n  @Prop({ reflect: true }) required: boolean;\n\n  /** The range's label. Alternatively, you can use the label slot. */\n  @Prop() label = '';\n\n  /** The range's help text. Alternatively, you can use the help-text slot. */\n  @Prop() helpText = '';\n\n  /** The input's error text. Alternatively, you can use the error-text slot. */\n  @Prop() errorText = '';\n\n  /** Set to true to disable the input. */\n  @Prop() disabled = false;\n\n  /**\n   * This will be true when the control is in an invalid state. Validity in range inputs is determined by the message\n   * provided by the `setCustomValidity` method.\n   */\n  @Prop({ mutable: true, reflect: true }) invalid = false;\n\n  /** The input's min attribute. */\n  @Prop() min = 0;\n\n  /** The input's max attribute. */\n  @Prop() max = 100;\n\n  /** The input's step attribute. */\n  @Prop() step = 1;\n\n  /** The preferred placedment of the tooltip. */\n  @Prop() tooltip: 'top' | 'bottom' | 'none' = 'top';\n\n  /** A function used to format the tooltip's value. */\n  @Prop() tooltipFormatter = (value: number) => value.toString();\n\n  /** Set to display the error text on blur and not when typing */\n  @Prop() errorOnBlur = false;\n\n  /** Emitted when the control's value changes. */\n  @Event({ eventName: 'six-range-change' }) sixChange: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control loses focus. */\n  @Event({ eventName: 'six-range-blur' }) sixBlur: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control gains focus. */\n  @Event({ eventName: 'six-range-focus' }) sixFocus: EventEmitter<EmptyPayload>;\n\n  /** default value the slider will be reverted to when reset is executed */\n  private defaultValue = 0;\n\n  @Watch('label')\n  @Watch('errorText')\n  @Watch('helpText')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  @Watch('value')\n  handleValueChange() {\n    if (this.input) {\n      this.input.value = this.value as any;\n      this.calculateColorRunnableTrack();\n    }\n    // In rare cases, the watcher may be called before render so we need to make sure the input exists\n    this.invalid = this.input ? !this.input.checkValidity() : false;\n  }\n\n  connectedCallback() {\n    this.handleInput = this.handleInput.bind(this);\n    this.handleBlur = this.handleBlur.bind(this);\n    this.handleFocus = this.handleFocus.bind(this);\n    this.handleSlotChange = this.handleSlotChange.bind(this);\n    this.handleTouchStart = this.handleTouchStart.bind(this);\n\n    this.host.shadowRoot.addEventListener('slotchange', this.handleSlotChange);\n  }\n\n  componentWillLoad() {\n    if (this.value === undefined || this.value === null) this.value = this.min;\n    if (this.value < this.min) this.value = this.min;\n    if (this.value > this.max) this.value = this.max;\n    this.defaultValue = this.value;\n\n    this.handleSlotChange();\n  }\n\n  componentDidLoad() {\n    this.syncTooltip();\n    this.calculateColorRunnableTrack();\n    this.resizeObserver = new ResizeObserver(() => this.syncTooltip());\n    this.eventListeners.add(this.input, 'invalid', (event) => {\n      if (this.customValidation || (!this.hasErrorTextSlot && !this.errorText && !this.customErrorText)) {\n        this.customErrorText = this.input.validationMessage;\n      }\n      event.preventDefault();\n    });\n  }\n\n  disconnectedCallback() {\n    this.host.shadowRoot.removeEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.removeAll();\n  }\n\n  /** Sets focus on the input. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /** Removes focus from the input. */\n  @Method()\n  async removeFocus() {\n    this.input.blur();\n  }\n\n  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */\n  @Method()\n  async setCustomValidity(message: string) {\n    this.customErrorText = '';\n    this.customValidation = message !== '';\n    this.input.setCustomValidity(message);\n    this.invalid = !this.input.checkValidity();\n  }\n\n  /** Resets the formcontrol */\n  @Method()\n  async reset() {\n    this.value = this.defaultValue;\n    this.customErrorText = '';\n    this.customValidation = false;\n    this.input.setCustomValidity('');\n    this.invalid = false;\n  }\n\n  handleInput() {\n    this.value = Number(this.input.value);\n    this.sixChange.emit();\n\n    requestAnimationFrame(() => this.syncTooltip());\n    requestAnimationFrame(() => this.calculateColorRunnableTrack());\n  }\n\n  handleBlur() {\n    this.hasFocus = false;\n    this.hasTooltip = false;\n    this.sixBlur.emit();\n    this.resizeObserver.unobserve(this.input);\n  }\n\n  handleFocus() {\n    this.hasFocus = true;\n    this.hasTooltip = true;\n    this.sixFocus.emit();\n    this.resizeObserver.observe(this.input);\n  }\n\n  handleSlotChange() {\n    this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n    this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n  }\n\n  handleTouchStart() {\n    this.setFocus();\n  }\n\n  displayError() {\n    return this.invalid && (!this.errorOnBlur || !this.hasFocus);\n  }\n\n  syncTooltip() {\n    if (this.tooltip !== 'none') {\n      const percent = Math.max(0, (this.value - this.min) / (this.max - this.min));\n      const inputWidth = this.input.offsetWidth;\n      const tooltipWidth = this.output.offsetWidth;\n      const thumbSize = getComputedStyle(this.input).getPropertyValue('--thumb-size');\n      const x = `calc(${inputWidth * percent}px - calc(calc(${percent} * ${thumbSize}) - calc(${thumbSize} / 2)))`;\n      this.output.style.transform = `translateX(${x})`;\n      this.output.style.marginLeft = `-${tooltipWidth / 2}px`;\n    }\n  }\n\n  /**\n   * For Firefox this functionality is not needed because it is supported by standard CSS.\n   */\n  calculateColorRunnableTrack() {\n    if (!this.isFirefox()) {\n      const value = parseInt(this.input.value, 10);\n      const min = parseInt(this.input.min, 10);\n      const max = parseInt(this.input.max, 10);\n      const percent = Math.ceil(((value - min) / (max - min)) * 100);\n      this.input.style.background =\n        '-webkit-linear-gradient(left, var(--track-color) 0%, var(--track-color) ' +\n        percent +\n        '%, var(--six-color-web-rock-300) ' +\n        percent +\n        '%)';\n    }\n  }\n\n  isFirefox() {\n    return navigator.userAgent.toLowerCase().indexOf('firefox') > -1;\n  }\n\n  render() {\n    return (\n      <FormControl\n        inputId={this.inputId}\n        label={this.label}\n        labelId={this.labelId}\n        hasLabelSlot={this.hasLabelSlot}\n        helpTextId={this.helpTextId}\n        helpText={this.helpText}\n        hasHelpTextSlot={this.hasHelpTextSlot}\n        size=\"medium\"\n        errorTextId={this.errorTextId}\n        errorText={this.customErrorText ? this.customErrorText : this.errorText}\n        hasErrorTextSlot={this.hasErrorTextSlot}\n        disabled={this.disabled}\n        required={this.required}\n        displayError={this.displayError()}\n      >\n        <div\n          part=\"base\"\n          class={{\n            range: true,\n\n            // States\n            'range--disabled': this.disabled,\n            'range--focused': this.hasFocus,\n            'range--tooltip-visible': this.hasTooltip,\n            'range--tooltip-top': this.tooltip === 'top',\n            'range--tooltip-bottom': this.tooltip === 'bottom',\n          }}\n          onTouchStart={this.handleTouchStart}\n        >\n          <input\n            part=\"input\"\n            ref={(el) => (this.input = el)}\n            type=\"range\"\n            class=\"range__control\"\n            name={this.name}\n            disabled={this.disabled}\n            min={this.min}\n            max={this.max}\n            step={this.step}\n            value={this.value}\n            onInput={this.handleInput}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n          />\n          {this.tooltip !== 'none' && (\n            <output part=\"tooltip\" ref={(el) => (this.output = el)} class=\"range__tooltip\">\n              {this.tooltipFormatter(this.value)}\n            </output>\n          )}\n        </div>\n      </FormControl>\n    );\n  }\n}\n"],"mappings":"qKAAA,MAAMA,EAAc,29MCMpB,IAAIC,EAAK,E,MAqBIC,EAAQ,M,uJACnBC,KAAAC,QAAU,WAAWH,IACrBE,KAAAE,QAAU,eAAeJ,IACzBE,KAAAG,WAAa,mBAAmBL,IAChCE,KAAAI,YAAc,oBAAoBN,IAKlCE,KAAAK,gBAAkB,GAClBL,KAAAM,iBAAmB,MAEVN,KAAAO,eAAiB,IAAIC,EAiEtBR,KAAAS,aAAe,E,cA7DH,M,qBACO,M,kBACH,M,sBACI,M,gBACN,M,UAGP,G,wDASC,G,cAGG,G,eAGC,G,cAGD,M,aAM+B,M,SAGpC,E,SAGA,I,UAGC,E,aAG8B,M,sBAGjBC,GAAkBA,EAAMC,W,iBAG9B,K,CAiBtBC,oBACEZ,KAAKa,kB,CAIPC,oBACE,GAAId,KAAKe,MAAO,CACdf,KAAKe,MAAML,MAAQV,KAAKU,MACxBV,KAAKgB,6B,CAGPhB,KAAKiB,QAAUjB,KAAKe,OAASf,KAAKe,MAAMG,gBAAkB,K,CAG5DC,oBACEnB,KAAKoB,YAAcpB,KAAKoB,YAAYC,KAAKrB,MACzCA,KAAKsB,WAAatB,KAAKsB,WAAWD,KAAKrB,MACvCA,KAAKuB,YAAcvB,KAAKuB,YAAYF,KAAKrB,MACzCA,KAAKa,iBAAmBb,KAAKa,iBAAiBQ,KAAKrB,MACnDA,KAAKwB,iBAAmBxB,KAAKwB,iBAAiBH,KAAKrB,MAEnDA,KAAKyB,KAAKC,WAAWC,iBAAiB,aAAc3B,KAAKa,iB,CAG3De,oBACE,GAAI5B,KAAKU,QAAUmB,WAAa7B,KAAKU,QAAU,KAAMV,KAAKU,MAAQV,KAAK8B,IACvE,GAAI9B,KAAKU,MAAQV,KAAK8B,IAAK9B,KAAKU,MAAQV,KAAK8B,IAC7C,GAAI9B,KAAKU,MAAQV,KAAK+B,IAAK/B,KAAKU,MAAQV,KAAK+B,IAC7C/B,KAAKS,aAAeT,KAAKU,MAEzBV,KAAKa,kB,CAGPmB,mBACEhC,KAAKiC,cACLjC,KAAKgB,8BACLhB,KAAKkC,eAAiB,IAAIC,gBAAe,IAAMnC,KAAKiC,gBACpDjC,KAAKO,eAAe6B,IAAIpC,KAAKe,MAAO,WAAYsB,IAC9C,GAAIrC,KAAKM,mBAAsBN,KAAKsC,mBAAqBtC,KAAKuC,YAAcvC,KAAKK,gBAAkB,CACjGL,KAAKK,gBAAkBL,KAAKe,MAAMyB,iB,CAEpCH,EAAMI,gBAAgB,G,CAI1BC,uBACE1C,KAAKyB,KAAKC,WAAWiB,oBAAoB,aAAc3C,KAAKa,kBAC5Db,KAAKO,eAAeqC,W,CAKtBC,eAAeC,GACb9C,KAAKe,MAAMgC,MAAMD,E,CAKnBD,oBACE7C,KAAKe,MAAMiC,M,CAKbH,wBAAwBI,GACtBjD,KAAKK,gBAAkB,GACvBL,KAAKM,iBAAmB2C,IAAY,GACpCjD,KAAKe,MAAMmC,kBAAkBD,GAC7BjD,KAAKiB,SAAWjB,KAAKe,MAAMG,e,CAK7B2B,cACE7C,KAAKU,MAAQV,KAAKS,aAClBT,KAAKK,gBAAkB,GACvBL,KAAKM,iBAAmB,MACxBN,KAAKe,MAAMmC,kBAAkB,IAC7BlD,KAAKiB,QAAU,K,CAGjBG,cACEpB,KAAKU,MAAQyC,OAAOnD,KAAKe,MAAML,OAC/BV,KAAKoD,UAAUC,OAEfC,uBAAsB,IAAMtD,KAAKiC,gBACjCqB,uBAAsB,IAAMtD,KAAKgB,+B,CAGnCM,aACEtB,KAAKuD,SAAW,MAChBvD,KAAKwD,WAAa,MAClBxD,KAAKyD,QAAQJ,OACbrD,KAAKkC,eAAewB,UAAU1D,KAAKe,M,CAGrCQ,cACEvB,KAAKuD,SAAW,KAChBvD,KAAKwD,WAAa,KAClBxD,KAAK2D,SAASN,OACdrD,KAAKkC,eAAe0B,QAAQ5D,KAAKe,M,CAGnCF,mBACEb,KAAK6D,gBAAkBC,EAAQ9D,KAAKyB,KAAM,aAC1CzB,KAAKsC,iBAAmBwB,EAAQ9D,KAAKyB,KAAM,cAC3CzB,KAAK+D,aAAeD,EAAQ9D,KAAKyB,KAAM,Q,CAGzCD,mBACExB,KAAKgE,U,CAGPC,eACE,OAAOjE,KAAKiB,WAAajB,KAAKkE,cAAgBlE,KAAKuD,S,CAGrDtB,cACE,GAAIjC,KAAKmE,UAAY,OAAQ,CAC3B,MAAMC,EAAUC,KAAKtC,IAAI,GAAI/B,KAAKU,MAAQV,KAAK8B,MAAQ9B,KAAK+B,IAAM/B,KAAK8B,MACvE,MAAMwC,EAAatE,KAAKe,MAAMwD,YAC9B,MAAMC,EAAexE,KAAKyE,OAAOF,YACjC,MAAMG,EAAYC,iBAAiB3E,KAAKe,OAAO6D,iBAAiB,gBAChE,MAAMC,EAAI,QAAQP,EAAaF,mBAAyBA,OAAaM,aAAqBA,WAC1F1E,KAAKyE,OAAOK,MAAMC,UAAY,cAAcF,KAC5C7E,KAAKyE,OAAOK,MAAME,WAAa,IAAIR,EAAe,K,EAOtDxD,8BACE,IAAKhB,KAAKiF,YAAa,CACrB,MAAMvE,EAAQwE,SAASlF,KAAKe,MAAML,MAAO,IACzC,MAAMoB,EAAMoD,SAASlF,KAAKe,MAAMe,IAAK,IACrC,MAAMC,EAAMmD,SAASlF,KAAKe,MAAMgB,IAAK,IACrC,MAAMqC,EAAUC,KAAKc,MAAOzE,EAAQoB,IAAQC,EAAMD,GAAQ,KAC1D9B,KAAKe,MAAM+D,MAAMM,WACf,2EACAhB,EACA,oCACAA,EACA,I,EAINa,YACE,OAAOI,UAAUC,UAAUC,cAAcC,QAAQ,YAAc,C,CAGjEC,SACE,OACEC,EAACC,EAAW,CACV1F,QAASD,KAAKC,QACd2F,MAAO5F,KAAK4F,MACZ1F,QAASF,KAAKE,QACd6D,aAAc/D,KAAK+D,aACnB5D,WAAYH,KAAKG,WACjB0F,SAAU7F,KAAK6F,SACfhC,gBAAiB7D,KAAK6D,gBACtBiC,KAAK,SACL1F,YAAaJ,KAAKI,YAClBmC,UAAWvC,KAAKK,gBAAkBL,KAAKK,gBAAkBL,KAAKuC,UAC9DD,iBAAkBtC,KAAKsC,iBACvByD,SAAU/F,KAAK+F,SACfC,SAAUhG,KAAKgG,SACf/B,aAAcjE,KAAKiE,gBAEnByB,EAAA,OACEO,KAAK,OACLC,MAAO,CACLC,MAAO,KAGP,kBAAmBnG,KAAK+F,SACxB,iBAAkB/F,KAAKuD,SACvB,yBAA0BvD,KAAKwD,WAC/B,qBAAsBxD,KAAKmE,UAAY,MACvC,wBAAyBnE,KAAKmE,UAAY,UAE5CiC,aAAcpG,KAAKwB,kBAEnBkE,EAAA,SACEO,KAAK,QACLI,IAAMC,GAAQtG,KAAKe,MAAQuF,EAC3BC,KAAK,QACLL,MAAM,iBACNM,KAAMxG,KAAKwG,KACXT,SAAU/F,KAAK+F,SACfjE,IAAK9B,KAAK8B,IACVC,IAAK/B,KAAK+B,IACV0E,KAAMzG,KAAKyG,KACX/F,MAAOV,KAAKU,MACZgG,QAAS1G,KAAKoB,YACduF,QAAS3G,KAAKuB,YACdqF,OAAQ5G,KAAKsB,aAEdtB,KAAKmE,UAAY,QAChBuB,EAAA,UAAQO,KAAK,UAAUI,IAAMC,GAAQtG,KAAKyE,OAAS6B,EAAKJ,MAAM,kBAC3DlG,KAAK6G,iBAAiB7G,KAAKU,S"}

package/dist/ui-library/p-b1683e9c.entry.js

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

package/dist/ui-library/p-b1683e9c.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["sixDialogCss","hasPreventScroll","isPreventScrollSupported","id","SixDialog","this","componentId","willShow","willHide","handleOpenChange","open","show","hide","connectedCallback","handleCloseClick","bind","handleTransitionEnd","handleKeyDown","handleOverlayClick","handleSlotChange","modal","Modal","host","onFocusOut","panel","focus","componentWillLoad","disconnectedCallback","unlockBodyScrolling","async","sixShow","emit","defaultPrevented","isVisible","activate","lockBodyScrolling","requestAnimationFrame","sixInitialFocus","preventScroll","dialog","addEventListener","once","sixHide","deactivate","event","key","sixOverlayDismiss","hasFooter","hasSlot","target","propertyName","classList","contains","sixAfterShow","sixAfterHide","render","h","ref","el","part","class","onKeyDown","onTransitionEnd","onClick","role","noHeader","label","tabIndex","name","String","fromCharCode","exportparts","onSlotchange"],"sources":["./src/components/six-dialog/six-dialog.scss?tag=six-dialog&encapsulation=shadow","./src/components/six-dialog/six-dialog.tsx"],"sourcesContent":["@import 'src/global/component';\n@import 'src/global/mixins/hidden';\n\n/**\n * @prop --width: The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.\n */\n:host {\n  --width: 31rem;\n\n  display: contents;\n}\n\n.dialog {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: var(--six-z-index-dialog);\n  color: var(--six-color-web-rock-900);\n\n  &:not(.dialog--visible) {\n    @include hidden;\n  }\n}\n\n.dialog__panel {\n  display: flex;\n  flex-direction: column;\n  z-index: 2;\n  width: var(--width);\n  max-width: calc(100% - var(--six-spacing-xx-large));\n  max-height: calc(100% - var(--six-spacing-xx-large));\n  background-color: var(--six-panel-background-color);\n  border-radius: var(--six-border-radius-medium);\n  box-shadow: var(--six-shadow-x-large);\n  opacity: 0;\n  transform: scale(0.8);\n  transition: var(--six-transition-medium) opacity, var(--six-transition-medium) transform;\n\n  &:focus {\n    outline: none;\n  }\n}\n\n// Ensure there's enough vertical padding for phones that don't update vh when chrome appears (e.g. iPhone)\n@media screen and (max-width: 420px) {\n  .dialog__panel {\n    max-height: 80vh;\n  }\n}\n\n.dialog--open .dialog__panel {\n  display: flex;\n  opacity: 1;\n  transform: none;\n}\n\n.dialog__header {\n  flex: 0 0 auto;\n  display: flex;\n}\n\n.dialog__title {\n  flex: 1 1 auto;\n  font-size: var(--six-font-size-x-large);\n  font-weight: var(--six-font-weight-bold);\n  line-height: var(--six-line-height-dense);\n  padding: var(--six-spacing-large) var(--six-spacing-large) var(--six-spacing-small);\n}\n\n.dialog__close {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: var(--six-font-size-x-large);\n  padding: 0 var(--six-spacing-x-small);\n}\n\n.dialog__body {\n  flex: 1 1 auto;\n  padding: var(--six-spacing-small) var(--six-spacing-large) var(--six-spacing-large);\n  overflow: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n.dialog__footer {\n  flex: 0 0 auto;\n  text-align: right;\n  padding: var(--six-spacing-large);\n\n  ::slotted(six-button:not(:first-of-type)) {\n    margin-left: var(--six-spacing-xx-small);\n  }\n}\n\n.dialog:not(.dialog--has-footer) .dialog__footer {\n  display: none;\n}\n\n.dialog__overlay {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: var(--six-overlay-background-color);\n  opacity: 0;\n  transition: var(--six-transition-medium) opacity;\n}\n\n.dialog--open .dialog__overlay {\n  opacity: 0.8;\n}\n","import { Component, Element, Event, EventEmitter, Method, Prop, State, Watch, h } from '@stencil/core';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport { hasSlot } from '../../utils/slot';\nimport { isPreventScrollSupported } from '../../utils/support';\nimport Modal from '../../utils/modal';\nimport { EmptyPayload } from '../../utils/types';\n\nconst hasPreventScroll = isPreventScrollSupported();\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The dialog's content.\n * @slot label - The dialog's label. Alternatively, you can use the label prop.\n * @slot footer - The dialog's footer, usually one or more buttons representing various options.\n *\n * @part base - The component's base wrapper.\n * @part overlay - The overlay.\n * @part panel - The dialog panel (where the dialog and its content is rendered).\n * @part header - The dialog header.\n * @part title - The dialog title.\n * @part close-button - The close button.\n * @part body - The dialog body.\n * @part footer - The dialog footer.\n *\n */\n@Component({\n  tag: 'six-dialog',\n  styleUrl: 'six-dialog.scss',\n  shadow: true,\n})\nexport class SixDialog {\n  componentId = `dialog-${++id}`;\n  dialog: HTMLElement;\n  modal: Modal;\n  panel: HTMLElement;\n  willShow = false;\n  willHide = false;\n\n  @Element() host: HTMLSixDialogElement;\n\n  @State() hasFooter = false;\n  @State() isVisible = false;\n\n  /** Indicates whether or not the dialog is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /**\n   * The dialog's label as displayed in the header. You should always include a relevant label even when using\n   * `no-header`, as it is required for proper accessibility.\n   */\n  @Prop() label = '';\n\n  /**\n   * Set to true to disable the header. This will also remove the default close button, so please ensure you provide an\n   * easy, accessible way for users to dismiss the dialog.\n   */\n  @Prop() noHeader = false;\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  /** Emitted when the dialog opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event({ eventName: 'six-dialog-show' }) sixShow: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the dialog opens and all transitions are complete. */\n  @Event({ eventName: 'six-dialog-after-show' }) sixAfterShow: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the dialog closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event({ eventName: 'six-dialog-hide' }) sixHide: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the dialog closes and all transitions are complete. */\n  @Event({ eventName: 'six-dialog-after-hide' }) sixAfterHide: EventEmitter<EmptyPayload>;\n\n  /**\n   * Emitted when the dialog opens and the panel gains focus. Calling `event.preventDefault()` will prevent focus and\n   * allow you to set it on a different element in the dialog, such as an input or button.\n   */\n  @Event({ eventName: 'six-dialog-initial-focus' }) sixInitialFocus: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the dialog from closing. */\n  @Event({ eventName: 'six-dialog-overlay-dismiss' }) sixOverlayDismiss: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    this.handleCloseClick = this.handleCloseClick.bind(this);\n    this.handleTransitionEnd = this.handleTransitionEnd.bind(this);\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n    this.handleOverlayClick = this.handleOverlayClick.bind(this);\n    this.handleSlotChange = this.handleSlotChange.bind(this);\n\n    this.modal = new Modal(this.host, {\n      onFocusOut: () => this.panel.focus(),\n    });\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n\n    // Show on init if open\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  disconnectedCallback() {\n    unlockBodyScrolling(this.host);\n  }\n\n  /** Shows the dialog */\n  @Method()\n  async show() {\n    if (this.willShow) {\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    this.modal.activate();\n\n    lockBodyScrolling(this.host);\n\n    if (this.open) {\n      if (hasPreventScroll) {\n        // Wait for the next frame before setting initial focus so the dialog is technically visible\n        requestAnimationFrame(() => {\n          const sixInitialFocus = this.sixInitialFocus.emit();\n          if (!sixInitialFocus.defaultPrevented) {\n            this.panel.focus({ preventScroll: true });\n          }\n        });\n      } else {\n        // Once Safari supports { preventScroll: true } we can remove this nasty little hack, but until then we need to\n        // wait for the transition to complete before setting focus, otherwise the panel may render in a buggy way its\n        // out of view initially.\n        //\n        // Fiddle: https://jsfiddle.net/g6buoafq/1/\n        // Safari: https://bugs.webkit.org/show_bug.cgi?id=178583\n        //\n        this.dialog.addEventListener(\n          'transitionend',\n          () => {\n            const sixInitialFocus = this.sixInitialFocus.emit();\n            if (!sixInitialFocus.defaultPrevented) {\n              this.panel.focus();\n            }\n          },\n          { once: true }\n        );\n      }\n    }\n  }\n\n  /** Hides the dialog */\n  @Method()\n  async hide() {\n    if (this.willHide) {\n      return;\n    }\n\n    const sixHide = this.sixHide.emit();\n    if (sixHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.willHide = true;\n    this.open = false;\n    this.modal.deactivate();\n\n    unlockBodyScrolling(this.host);\n  }\n\n  handleCloseClick() {\n    this.hide();\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Escape') {\n      this.hide();\n    }\n  }\n\n  handleOverlayClick() {\n    const sixOverlayDismiss = this.sixOverlayDismiss.emit();\n\n    if (!sixOverlayDismiss.defaultPrevented) {\n      this.hide();\n    }\n  }\n\n  handleSlotChange() {\n    this.hasFooter = hasSlot(this.host, 'footer');\n  }\n\n  handleTransitionEnd(event: TransitionEvent) {\n    const target = event.target as HTMLElement;\n\n    // Ensure we only emit one event when the target element is no longer visible\n    if (event.propertyName === 'opacity' && target.classList.contains('dialog__panel')) {\n      this.isVisible = this.open;\n      this.willShow = false;\n      this.willHide = false;\n      this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n    }\n  }\n\n  render() {\n    return (\n      <div\n        ref={(el) => (this.dialog = el)}\n        part=\"base\"\n        class={{\n          dialog: true,\n          'dialog--open': this.open,\n          'dialog--visible': this.isVisible,\n          'dialog--has-footer': this.hasFooter,\n        }}\n        onKeyDown={this.handleKeyDown}\n        onTransitionEnd={this.handleTransitionEnd}\n      >\n        <div part=\"overlay\" class=\"dialog__overlay\" onClick={this.handleOverlayClick} />\n\n        <div\n          ref={(el) => (this.panel = el)}\n          part=\"panel\"\n          class=\"dialog__panel\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-hidden={this.open ? 'false' : 'true'}\n          aria-label={this.noHeader ? this.label : null}\n          aria-labelledby={!this.noHeader ? `${this.componentId}-title` : null}\n          tabIndex={0}\n        >\n          {!this.noHeader && (\n            <header part=\"header\" class=\"dialog__header\">\n              <span part=\"title\" class=\"dialog__title\" id={`${this.componentId}-title`}>\n                <slot name=\"label\">\n                  {/* If there's no label, use an invisible character to prevent the heading from collapsing */}\n                  {this.label || String.fromCharCode(65279)}\n                </slot>\n              </span>\n              <six-icon-button\n                exportparts=\"base:close-button\"\n                class=\"dialog__close\"\n                name=\"close\"\n                onClick={this.handleCloseClick}\n              />\n            </header>\n          )}\n\n          <div part=\"body\" class=\"dialog__body\">\n            <slot />\n          </div>\n\n          <footer part=\"footer\" class=\"dialog__footer\">\n            <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n          </footer>\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"mLAAA,MAAMA,EAAe,kkECOrB,MAAMC,EAAmBC,IAEzB,IAAIC,EAAK,E,MA2BIC,EAAS,M,2UACpBC,KAAAC,YAAc,YAAYH,IAI1BE,KAAAE,SAAW,MACXF,KAAAG,SAAW,M,eAIU,M,eACA,M,UAG0B,M,WAM/B,G,cAMG,K,CAGnBC,mBACEJ,KAAKK,KAAOL,KAAKM,OAASN,KAAKO,M,CAwBjCC,oBACER,KAAKS,iBAAmBT,KAAKS,iBAAiBC,KAAKV,MACnDA,KAAKW,oBAAsBX,KAAKW,oBAAoBD,KAAKV,MACzDA,KAAKY,cAAgBZ,KAAKY,cAAcF,KAAKV,MAC7CA,KAAKa,mBAAqBb,KAAKa,mBAAmBH,KAAKV,MACvDA,KAAKc,iBAAmBd,KAAKc,iBAAiBJ,KAAKV,MAEnDA,KAAKe,MAAQ,IAAIC,EAAMhB,KAAKiB,KAAM,CAChCC,WAAY,IAAMlB,KAAKmB,MAAMC,S,CAIjCC,oBACErB,KAAKc,mBAGL,GAAId,KAAKK,KAAM,CACbL,KAAKM,M,EAITgB,uBACEC,EAAoBvB,KAAKiB,K,CAK3BO,aACE,GAAIxB,KAAKE,SAAU,CACjB,M,CAGF,MAAMuB,EAAUzB,KAAKyB,QAAQC,OAC7B,GAAID,EAAQE,iBAAkB,CAC5B3B,KAAKK,KAAO,MACZ,M,CAGFL,KAAKE,SAAW,KAChBF,KAAK4B,UAAY,KACjB5B,KAAKK,KAAO,KACZL,KAAKe,MAAMc,WAEXC,EAAkB9B,KAAKiB,MAEvB,GAAIjB,KAAKK,KAAM,CACb,GAAIT,EAAkB,CAEpBmC,uBAAsB,KACpB,MAAMC,EAAkBhC,KAAKgC,gBAAgBN,OAC7C,IAAKM,EAAgBL,iBAAkB,CACrC3B,KAAKmB,MAAMC,MAAM,CAAEa,cAAe,M,SAGjC,CAQLjC,KAAKkC,OAAOC,iBACV,iBACA,KACE,MAAMH,EAAkBhC,KAAKgC,gBAAgBN,OAC7C,IAAKM,EAAgBL,iBAAkB,CACrC3B,KAAKmB,MAAMC,O,IAGf,CAAEgB,KAAM,M,GAQhBZ,aACE,GAAIxB,KAAKG,SAAU,CACjB,M,CAGF,MAAMkC,EAAUrC,KAAKqC,QAAQX,OAC7B,GAAIW,EAAQV,iBAAkB,CAC5B3B,KAAKK,KAAO,KACZ,M,CAGFL,KAAKG,SAAW,KAChBH,KAAKK,KAAO,MACZL,KAAKe,MAAMuB,aAEXf,EAAoBvB,KAAKiB,K,CAG3BR,mBACET,KAAKO,M,CAGPK,cAAc2B,GACZ,GAAIA,EAAMC,MAAQ,SAAU,CAC1BxC,KAAKO,M,EAITM,qBACE,MAAM4B,EAAoBzC,KAAKyC,kBAAkBf,OAEjD,IAAKe,EAAkBd,iBAAkB,CACvC3B,KAAKO,M,EAITO,mBACEd,KAAK0C,UAAYC,EAAQ3C,KAAKiB,KAAM,S,CAGtCN,oBAAoB4B,GAClB,MAAMK,EAASL,EAAMK,OAGrB,GAAIL,EAAMM,eAAiB,WAAaD,EAAOE,UAAUC,SAAS,iBAAkB,CAClF/C,KAAK4B,UAAY5B,KAAKK,KACtBL,KAAKE,SAAW,MAChBF,KAAKG,SAAW,MAChBH,KAAKK,KAAOL,KAAKgD,aAAatB,OAAS1B,KAAKiD,aAAavB,M,EAI7DwB,SACE,OACEC,EAAA,OACEC,IAAMC,GAAQrD,KAAKkC,OAASmB,EAC5BC,KAAK,OACLC,MAAO,CACLrB,OAAQ,KACR,eAAgBlC,KAAKK,KACrB,kBAAmBL,KAAK4B,UACxB,qBAAsB5B,KAAK0C,WAE7Bc,UAAWxD,KAAKY,cAChB6C,gBAAiBzD,KAAKW,qBAEtBwC,EAAA,OAAKG,KAAK,UAAUC,MAAM,kBAAkBG,QAAS1D,KAAKa,qBAE1DsC,EAAA,OACEC,IAAMC,GAAQrD,KAAKmB,MAAQkC,EAC3BC,KAAK,QACLC,MAAM,gBACNI,KAAK,SAAQ,aACF,OAAM,cACJ3D,KAAKK,KAAO,QAAU,OAAM,aAC7BL,KAAK4D,SAAW5D,KAAK6D,MAAQ,KAAI,mBAC3B7D,KAAK4D,SAAW,GAAG5D,KAAKC,oBAAsB,KAChE6D,SAAU,IAER9D,KAAK4D,UACLT,EAAA,UAAQG,KAAK,SAASC,MAAM,kBAC1BJ,EAAA,QAAMG,KAAK,QAAQC,MAAM,gBAAgBzD,GAAI,GAAGE,KAAKC,qBACnDkD,EAAA,QAAMY,KAAK,SAER/D,KAAK6D,OAASG,OAAOC,aAAa,SAGvCd,EAAA,mBACEe,YAAY,oBACZX,MAAM,gBACNQ,KAAK,QACLL,QAAS1D,KAAKS,oBAKpB0C,EAAA,OAAKG,KAAK,OAAOC,MAAM,gBACrBJ,EAAA,cAGFA,EAAA,UAAQG,KAAK,SAASC,MAAM,kBAC1BJ,EAAA,QAAMY,KAAK,SAASI,aAAcnE,KAAKc,qB"}

package/dist/ui-library/p-b1e66136.js

@@ -1,2 +0,0 @@
-const o=new WeakMap;function e(e){if(!e)return;const n=["Tab","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","Home","End","PageDown","PageUp"];const s=o=>{if(n.includes(o.key)){e.classList.add("focus-visible")}};const i=()=>e.classList.remove("focus-visible");o.set(e,{is:s,isNot:i});e.addEventListener("keydown",s);e.addEventListener("keyup",s);e.addEventListener("mousedown",i);e.addEventListener("mousedown",i)}function n(e){if(!e)return;const n=o.get(e);if(!n){return}const{is:s,isNot:i}=n;e.classList.remove("focus-visible");e.removeEventListener("keydown",s);e.removeEventListener("keyup",s);e.removeEventListener("mousedown",i);e.removeEventListener("mousedown",i)}const s={observe:e,unobserve:n};export{s as f};
-//# sourceMappingURL=p-b1e66136.js.map

package/dist/ui-library/p-b1e66136.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["listeners","WeakMap","observe","el","keys","is","event","includes","key","classList","add","isNot","remove","set","addEventListener","unobserve","listener","get","removeEventListener","focusVisible"],"sources":["./src/utils/focus-visible.ts"],"sourcesContent":["//\n// Simulates :focus-visible behavior on an element by watching for certain keyboard and mouse heuristics and toggling a\n// `focus-visible` class. Works at the component level so no global polyfill is necessary.\n//\n// This will eventually be removed pending better :focus-visible support: https://caniuse.com/#search=focus-visible\n//\nconst listeners = new WeakMap();\n\nexport function observe(el: HTMLElement) {\n  if (!el) return;\n\n  const keys = ['Tab', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End', 'PageDown', 'PageUp'];\n  const is = (event: KeyboardEvent) => {\n    if (keys.includes(event.key)) {\n      el.classList.add('focus-visible');\n    }\n  };\n  const isNot = () => el.classList.remove('focus-visible');\n  listeners.set(el, { is, isNot });\n\n  el.addEventListener('keydown', is);\n  el.addEventListener('keyup', is);\n  el.addEventListener('mousedown', isNot);\n  el.addEventListener('mousedown', isNot);\n}\n\nexport function unobserve(el: HTMLElement) {\n  if (!el) return;\n\n  const listener = listeners.get(el);\n\n  if (!listener) {\n    return;\n  }\n\n  const { is, isNot } = listener;\n\n  el.classList.remove('focus-visible');\n  el.removeEventListener('keydown', is);\n  el.removeEventListener('keyup', is);\n  el.removeEventListener('mousedown', isNot);\n  el.removeEventListener('mousedown', isNot);\n}\n\nexport const focusVisible = {\n  observe,\n  unobserve,\n};\n"],"mappings":"AAMA,MAAMA,EAAY,IAAIC,Q,SAENC,EAAQC,GACtB,IAAKA,EAAI,OAET,MAAMC,EAAO,CAAC,MAAO,UAAW,YAAa,YAAa,aAAc,OAAQ,MAAO,WAAY,UACnG,MAAMC,EAAMC,IACV,GAAIF,EAAKG,SAASD,EAAME,KAAM,CAC5BL,EAAGM,UAAUC,IAAI,gB,GAGrB,MAAMC,EAAQ,IAAMR,EAAGM,UAAUG,OAAO,iBACxCZ,EAAUa,IAAIV,EAAI,CAAEE,KAAIM,UAExBR,EAAGW,iBAAiB,UAAWT,GAC/BF,EAAGW,iBAAiB,QAAST,GAC7BF,EAAGW,iBAAiB,YAAaH,GACjCR,EAAGW,iBAAiB,YAAaH,EACnC,C,SAEgBI,EAAUZ,GACxB,IAAKA,EAAI,OAET,MAAMa,EAAWhB,EAAUiB,IAAId,GAE/B,IAAKa,EAAU,CACb,M,CAGF,MAAMX,GAAEA,EAAEM,MAAEA,GAAUK,EAEtBb,EAAGM,UAAUG,OAAO,iBACpBT,EAAGe,oBAAoB,UAAWb,GAClCF,EAAGe,oBAAoB,QAASb,GAChCF,EAAGe,oBAAoB,YAAaP,GACpCR,EAAGe,oBAAoB,YAAaP,EACtC,C,MAEaQ,EAAe,CAC1BjB,UACAa,oB"}

package/dist/ui-library/p-b3974ad4.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["sixCardCss","SixCard","render","h","Host"],"sources":["./src/components/six-card/six-card.scss?tag=six-card&encapsulation=shadow","./src/components/six-card/six-card.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: inline-block;\n  box-shadow: var(--six-elevation-8dp);\n  border-radius: 0;\n  padding: 1rem;\n  margin-bottom: 0.6rem;\n}\n","import { Component, Host, h } from '@stencil/core';\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the content of the card.\n */\n\n@Component({\n  tag: 'six-card',\n  styleUrl: 'six-card.scss',\n  shadow: true,\n})\nexport class SixCard {\n  render() {\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAa,0N,MCcNC,EAAO,M,yBAClBC,SACE,OACEC,EAACC,EAAI,KACHD,EAAA,a"}

package/dist/ui-library/p-b4dfb7cf.js

@@ -1,2 +0,0 @@
-function t(t){const r=t?t.assignedNodes({flatten:true}):[];let e="";[...r].map((t=>{if(t.nodeType===Node.TEXT_NODE){e+=t.textContent}}));return e}function r(t,r){if(r){return t.querySelector(`[slot="${r}"]`)!==null}return Array.from(t.childNodes).some((t=>{if(t.nodeType===t.TEXT_NODE&&t.textContent.trim()!==""){return true}if(t.nodeType===t.ELEMENT_NODE){const r=t;if(!r.hasAttribute("slot")){return true}}return false}))}const e=(t,[r,e])=>Object.assign(Object.assign({},t),{[r]:e});const n=t=>n=>Object.values(t).map((t=>[t,r(n,t)])).reduce(e,{});const u=t=>{var r;return(r=t.querySelector("slot"))===null||r===void 0?void 0:r.assignedElements({flatten:true})};export{t as a,u as b,n as g,r as h};
-//# sourceMappingURL=p-b4dfb7cf.js.map

package/dist/ui-library/p-b4dfb7cf.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["getTextContent","slot","nodes","assignedNodes","flatten","text","map","node","nodeType","Node","TEXT_NODE","textContent","hasSlot","el","name","querySelector","Array","from","childNodes","some","trim","ELEMENT_NODE","hasAttribute","fromPairs","acc","k","v","Object","assign","getAvailableSlots","slots","host","values","reduce","getSlotChildren","_a","assignedElements"],"sources":["./src/utils/slot.ts"],"sourcesContent":["//\n// Given a slot, this function iterates over all of its assigned element and text nodes and returns the concatenated\n// HTML as a string. This is useful because we can't use slot.innerHTML as an alternative.\n//\nexport function getInnerHTML(slot: HTMLSlotElement): string {\n  const nodes = slot.assignedNodes({ flatten: true });\n  let html = '';\n\n  [...nodes].map((node) => {\n    if (node.nodeType === Node.ELEMENT_NODE) {\n      html += (node as HTMLElement).outerHTML;\n    }\n\n    if (node.nodeType === Node.TEXT_NODE) {\n      html += node.textContent;\n    }\n  });\n\n  return html;\n}\n\n//\n// Given a slot, this function iterates over all of its assigned text nodes and returns the concatenated text as a\n// string. This is useful because we can't use slot.textContent as an alternative.\n//\nexport function getTextContent(slot: HTMLSlotElement): string {\n  const nodes = slot ? slot.assignedNodes({ flatten: true }) : [];\n  let text = '';\n\n  [...nodes].map((node) => {\n    if (node.nodeType === Node.TEXT_NODE) {\n      text += node.textContent;\n    }\n  });\n\n  return text;\n}\n\n//\n// Determines whether an element has a slot. If name is specified, the function will look for a corresponding named\n// slot, otherwise it will look for a \"default\" slot (e.g. a non-empty text node or an element with no slot attribute).\n//\nexport function hasSlot(el: HTMLElement, name?: string) {\n  // Look for a named slot\n  if (name) {\n    return el.querySelector(`[slot=\"${name}\"]`) !== null;\n  }\n\n  // Look for a default slot\n  return Array.from(el.childNodes).some((node) => {\n    if (node.nodeType === node.TEXT_NODE && node.textContent.trim() !== '') {\n      return true;\n    }\n\n    if (node.nodeType === node.ELEMENT_NODE) {\n      const el = node as HTMLElement;\n      if (!el.hasAttribute('slot')) {\n        return true;\n      }\n    }\n\n    return false;\n  });\n}\n\ntype AvailableSlots<T> = { readonly [K in keyof T]: boolean };\n\nconst fromPairs = <T extends string>(acc, [k, v]: [T, boolean]) => ({ ...acc, [k]: v });\n\nexport const getAvailableSlots =\n  <T extends object>(slots: T) =>\n  <E extends HTMLElement>(host: E): AvailableSlots<T> =>\n    Object.values(slots)\n      .map((name) => [name, hasSlot(host, name)])\n      .reduce(fromPairs, {} as AvailableSlots<T>);\n\nexport const getSlotChildren = <T extends HTMLElement>(el: HTMLElement) =>\n  el.querySelector('slot')?.assignedElements({ flatten: true }) as T[];\n"],"mappings":"SAyBgBA,EAAeC,GAC7B,MAAMC,EAAQD,EAAOA,EAAKE,cAAc,CAAEC,QAAS,OAAU,GAC7D,IAAIC,EAAO,GAEX,IAAIH,GAAOI,KAAKC,IACd,GAAIA,EAAKC,WAAaC,KAAKC,UAAW,CACpCL,GAAQE,EAAKI,W,KAIjB,OAAON,CACT,C,SAMgBO,EAAQC,EAAiBC,GAEvC,GAAIA,EAAM,CACR,OAAOD,EAAGE,cAAc,UAAUD,SAAc,I,CAIlD,OAAOE,MAAMC,KAAKJ,EAAGK,YAAYC,MAAMZ,IACrC,GAAIA,EAAKC,WAAaD,EAAKG,WAAaH,EAAKI,YAAYS,SAAW,GAAI,CACtE,OAAO,I,CAGT,GAAIb,EAAKC,WAAaD,EAAKc,aAAc,CACvC,MAAMR,EAAKN,EACX,IAAKM,EAAGS,aAAa,QAAS,CAC5B,OAAO,I,EAIX,OAAO,KAAK,GAEhB,CAIA,MAAMC,EAAY,CAAmBC,GAAMC,EAAGC,KAAgBC,OAAAC,OAAAD,OAAAC,OAAA,GAAWJ,GAAG,CAAEC,CAACA,GAAIC,I,MAEtEG,EACQC,GACKC,GACtBJ,OAAOK,OAAOF,GACXxB,KAAKQ,GAAS,CAACA,EAAMF,EAAQmB,EAAMjB,MACnCmB,OAAOV,EAAW,I,MAEZW,EAA0CrB,IAAe,IAAAsB,EACpE,OAAAA,EAAAtB,EAAGE,cAAc,WAAO,MAAAoB,SAAA,SAAAA,EAAEC,iBAAiB,CAAEhC,QAAS,MAAc,S"}

package/dist/ui-library/p-b66c5c48.entry.js

@@ -1,2 +0,0 @@
-import{r as s,h as i,g as t}from"./p-16b99232.js";import{h as e}from"./p-b4dfb7cf.js";const r=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block}.six-sidebar-item-group--childless::part(content){padding:0 !important}.six-sidebar-item-group--subgroup::part(header){background-color:transparent !important}.six-sidebar-item-group__header-icon{margin-left:16px;transform:translate(0px, -3px)}.six-sidebar-details__header{display:flex}.six-sidebar-details__header-icon{margin-right:1em}";const a=class{constructor(t){s(this,t);this.provideSlot=s=>{if(this.summaryIconHasContent){return i("div",{slot:s},i("slot",{name:s}))}return i("slot",{name:s,onSlotchange:()=>{this.summaryIconHasContent=this.host.shadowRoot.querySelector(`slot[name="${s}"]`).assignedNodes().length>0}})};this.hasItems=false;this.name="";this.icon="";this.value="";this.open=false;this.summaryIcon=undefined;this.summaryIconHasContent=undefined}connectedCallback(){this.handleSlotChange=this.handleSlotChange.bind(this)}componentWillLoad(){this.handleSlotChange()}handleSlotChange(){this.hasItems=e(this.host)}isSubgroup(){return!!this.host.parentElement.closest("six-sidebar-item-group")}render(){return i("six-details",{class:{"six-sidebar-item-group--childless":!this.hasItems,"six-sidebar-item-group--subgroup":this.isSubgroup()},inline:true,open:this.open,"summary-icon":this.summaryIcon,hasContent:this.hasItems},i("div",{slot:"summary"},i("div",{class:"six-sidebar-details__header"},this.icon&&i("six-icon",{class:"six-sidebar-details__header-icon"},this.icon),this.name)),this.provideSlot("summary-icon"),i("slot",null))}get host(){return t(this)}};a.style=r;export{a as six_sidebar_item_group};
-//# sourceMappingURL=p-b66c5c48.entry.js.map

package/dist/ui-library/p-b66c5c48.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["sixSidebarItemGroupCss","SixSidebarItemGroup","this","provideSlot","name","summaryIconHasContent","h","slot","onSlotchange","host","shadowRoot","querySelector","assignedNodes","length","connectedCallback","handleSlotChange","bind","componentWillLoad","hasItems","hasSlot","isSubgroup","parentElement","closest","render","class","inline","open","summaryIcon","hasContent","icon"],"sources":["./src/components/six-sidebar-item-group/six-sidebar-item-group.scss?tag=six-sidebar-item-group&encapsulation=shadow","./src/components/six-sidebar-item-group/six-sidebar-item-group.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: block;\n}\n\n.six-sidebar-item-group--childless::part(content) {\n  padding: 0 !important;\n}\n\n.six-sidebar-item-group--subgroup::part(header) {\n  background-color: transparent !important;\n}\n\n.six-sidebar-item-group__header-icon {\n  margin-left: 16px;\n  transform: translate(0px, -3px);\n}\n\n.six-sidebar-details__header {\n  display: flex;\n}\n\n.six-sidebar-details__header-icon {\n  margin-right: 1em;\n}\n","import { Component, Element, h, Prop, State } from '@stencil/core';\nimport { hasSlot } from '../../utils/slot';\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-item-group',\n  styleUrl: 'six-sidebar-item-group.scss',\n  shadow: true,\n})\nexport class SixSidebarItemGroup {\n  @Element() readonly host: HTMLSixSidebarItemGroupElement;\n\n  @State() hasItems = false;\n\n  /** Title of item group */\n  @Prop() name = '';\n\n  /** Icon of the group */\n  @Prop() icon = '';\n\n  /** A unique value to store in the sidebar item of the group label. This can be used as a way to identify sidebar items when selected. */\n  @Prop({ reflect: true }) value = '';\n\n  @Prop({ reflect: true }) open = false;\n\n  /** Custom summary icon name. */\n  @Prop() summaryIcon: string;\n\n  connectedCallback() {\n    this.handleSlotChange = this.handleSlotChange.bind(this);\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  handleSlotChange() {\n    this.hasItems = hasSlot(this.host);\n  }\n\n  isSubgroup() {\n    return !!this.host.parentElement.closest('six-sidebar-item-group');\n  }\n\n  @State() summaryIconHasContent: boolean;\n\n  provideSlot = (name: string) => {\n    if (this.summaryIconHasContent) {\n      return (\n        <div slot={name}>\n          <slot name={name}></slot>\n        </div>\n      );\n    }\n\n    return (\n      <slot\n        name={name}\n        onSlotchange={() => {\n          this.summaryIconHasContent =\n            this.host.shadowRoot.querySelector<HTMLSlotElement>(`slot[name=\"${name}\"]`).assignedNodes().length > 0;\n        }}\n      ></slot>\n    );\n  };\n\n  render() {\n    return (\n      <six-details\n        class={{\n          'six-sidebar-item-group--childless': !this.hasItems,\n          'six-sidebar-item-group--subgroup': this.isSubgroup(),\n        }}\n        inline={true}\n        open={this.open}\n        summary-icon={this.summaryIcon}\n        hasContent={this.hasItems}\n      >\n        <div slot=\"summary\">\n          <div class=\"six-sidebar-details__header\">\n            {this.icon && <six-icon class=\"six-sidebar-details__header-icon\">{this.icon}</six-icon>}\n            {this.name}\n          </div>\n        </div>\n        {this.provideSlot('summary-icon')}\n        <slot />\n      </six-details>\n    );\n  }\n}\n"],"mappings":"sFAAA,MAAMA,EAAyB,8c,MCelBC,EAAmB,M,yBAqC9BC,KAAAC,YAAeC,IACb,GAAIF,KAAKG,sBAAuB,CAC9B,OACEC,EAAA,OAAKC,KAAMH,GACTE,EAAA,QAAMF,KAAMA,I,CAKlB,OACEE,EAAA,QACEF,KAAMA,EACNI,aAAc,KACZN,KAAKG,sBACHH,KAAKO,KAAKC,WAAWC,cAA+B,cAAcP,OAAUQ,gBAAgBC,OAAS,CAAC,GAEpG,E,cAlDQ,M,UAGL,G,UAGA,G,WAGkB,G,UAED,M,gEAKhCC,oBACEZ,KAAKa,iBAAmBb,KAAKa,iBAAiBC,KAAKd,K,CAGrDe,oBACEf,KAAKa,kB,CAGPA,mBACEb,KAAKgB,SAAWC,EAAQjB,KAAKO,K,CAG/BW,aACE,QAASlB,KAAKO,KAAKY,cAAcC,QAAQ,yB,CAyB3CC,SACE,OACEjB,EAAA,eACEkB,MAAO,CACL,qCAAsCtB,KAAKgB,SAC3C,mCAAoChB,KAAKkB,cAE3CK,OAAQ,KACRC,KAAMxB,KAAKwB,KAAI,eACDxB,KAAKyB,YACnBC,WAAY1B,KAAKgB,UAEjBZ,EAAA,OAAKC,KAAK,WACRD,EAAA,OAAKkB,MAAM,+BACRtB,KAAK2B,MAAQvB,EAAA,YAAUkB,MAAM,oCAAoCtB,KAAK2B,MACtE3B,KAAKE,OAGTF,KAAKC,YAAY,gBAClBG,EAAA,a"}

package/dist/ui-library/p-ba6e1f0e.entry.js

@@ -1,2 +0,0 @@
-import{r as i,c as o,h as t,g as s}from"./p-16b99232.js";const r=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}: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 e=0;const a=class{constructor(t){i(this,t);this.sixBlur=o(this,"six-radio-blur",7);this.sixChange=o(this,"six-radio-change",7);this.sixFocus=o(this,"six-radio-focus",7);this.inputId=`radio-${++e}`;this.labelId=`radio-label-${e}`;this.defaultState=false;this.hasFocus=false;this.name=undefined;this.value=undefined;this.disabled=false;this.checked=false;this.invalid=false}handleCheckedChange(){if(this.checked){this.getSiblingRadios().map((i=>i.checked=false))}if(this.input){this.input.checked=this.checked;this.sixChange.emit()}}connectedCallback(){this.handleClick=this.handleClick.bind(this);this.handleBlur=this.handleBlur.bind(this);this.handleFocus=this.handleFocus.bind(this);this.handleKeyDown=this.handleKeyDown.bind(this);this.handleMouseDown=this.handleMouseDown.bind(this)}componentWillLoad(){this.defaultState=this.checked}async setFocus(i){this.input.focus(i)}async removeFocus(){this.input.blur()}async reportValidity(){return this.input.reportValidity()}async checkValidity(){return this.input.validity.valid}async setCustomValidity(i){this.input.setCustomValidity(i);this.invalid=!this.input.checkValidity()}async reset(){this.checked=this.defaultState;this.input.setCustomValidity("");this.invalid=false}getAllRadios(){const i=this.host.closest("six-form, 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))}handleClick(){this.checked=this.input.checked}handleBlur(){this.hasFocus=false;this.sixBlur.emit()}handleFocus(){this.hasFocus=true;this.sixFocus.emit()}handleKeyDown(i){if(["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(i.key)){const o=this.getAllRadios().filter((i=>!i.disabled));const t=["ArrowUp","ArrowLeft"].includes(i.key)?-1:1;let s=o.indexOf(this.host)+t;if(s<0)s=o.length-1;if(s>o.length-1)s=0;this.getAllRadios().map((i=>i.checked=false));o[s].setFocus();o[s].checked=true;i.preventDefault()}}handleMouseDown(i){i.preventDefault();this.input.focus()}render(){return t("label",{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},t("span",{part:"control",class:"radio__control"},t("span",{part:"checked-icon",class:"radio__icon"},t("svg",{viewBox:"0 0 16 16"},t("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},t("g",{fill:"currentColor"},t("circle",{cx:"8",cy:"8",r:"5"}))))),t("input",{ref:i=>this.input=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})),t("span",{part:"label",id:this.labelId,class:"radio__label"},t("slot",null)))}get host(){return s(this)}static get watchers(){return{checked:["handleCheckedChange"]}}};a.style=r;export{a as six_radio};
-//# sourceMappingURL=p-ba6e1f0e.entry.js.map

package/dist/ui-library/p-ba6e1f0e.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["sixRadioCss","id","SixRadio","this","inputId","labelId","defaultState","handleCheckedChange","checked","getSiblingRadios","map","radio","input","sixChange","emit","connectedCallback","handleClick","bind","handleBlur","handleFocus","handleKeyDown","handleMouseDown","componentWillLoad","async","options","focus","blur","reportValidity","validity","valid","message","setCustomValidity","invalid","checkValidity","getAllRadios","form","host","closest","document","body","name","querySelectorAll","filter","hasFocus","sixBlur","sixFocus","event","includes","key","radios","disabled","incr","index","indexOf","length","setFocus","preventDefault","render","h","part","class","htmlFor","onKeyDown","onMouseDown","viewBox","stroke","fill","cx","cy","r","ref","el","type","value","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: var(--six-transition-fast) border-color, var(--six-transition-fast) background-color,\n    var(--six-transition-fast) color, 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, Method, Prop, State, Watch, h } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The 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  inputId = `radio-${++id}`;\n  labelId = `radio-label-${id}`;\n  input: HTMLInputElement;\n\n  @Element() host: HTMLSixRadioElement;\n\n  @State() hasFocus = false;\n\n  /** The radio's name attribute. */\n  @Prop() name: string;\n\n  /** The radio's value attribute. */\n  @Prop() value: string;\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  /**\n   * This will be true when the control is in an invalid state. Validity in range inputs is determined by the message\n   * provided by the `setCustomValidity` method.\n   */\n  @Prop({ mutable: true, reflect: true }) invalid = false;\n\n  @Watch('checked')\n  handleCheckedChange() {\n    if (this.checked) {\n      this.getSiblingRadios().map((radio) => (radio.checked = false));\n    }\n    if (this.input) {\n      this.input.checked = this.checked;\n      this.sixChange.emit();\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  /** default state whether the radio button should be checked or not when resetting */\n  private defaultState = false;\n\n  connectedCallback() {\n    this.handleClick = this.handleClick.bind(this);\n    this.handleBlur = this.handleBlur.bind(this);\n    this.handleFocus = this.handleFocus.bind(this);\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n    this.handleMouseDown = this.handleMouseDown.bind(this);\n  }\n\n  componentWillLoad() {\n    this.defaultState = this.checked;\n  }\n\n  /** Sets focus on the radio. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /** Removes focus from the radio. */\n  @Method()\n  async removeFocus() {\n    this.input.blur();\n  }\n\n  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  @Method()\n  async reportValidity() {\n    return this.input.reportValidity();\n  }\n\n  /** Checks for validity. */\n  @Method()\n  async checkValidity() {\n    return this.input.validity.valid;\n  }\n\n  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */\n  @Method()\n  async setCustomValidity(message: string) {\n    this.input.setCustomValidity(message);\n    this.invalid = !this.input.checkValidity();\n  }\n\n  /** Resets the formcontrol */\n  @Method()\n  async reset() {\n    this.checked = this.defaultState;\n    this.input.setCustomValidity('');\n    this.invalid = false;\n  }\n\n  getAllRadios() {\n    const form = this.host.closest('six-form, 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  getSiblingRadios() {\n    return this.getAllRadios().filter((radio) => radio !== this.host) as HTMLSixRadioElement[];\n  }\n\n  handleClick() {\n    this.checked = this.input.checked;\n  }\n\n  handleBlur() {\n    this.hasFocus = false;\n    this.sixBlur.emit();\n  }\n\n  handleFocus() {\n    this.hasFocus = true;\n    this.sixFocus.emit();\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {\n      const radios = this.getAllRadios().filter((radio) => !radio.disabled);\n      const incr = ['ArrowUp', 'ArrowLeft'].includes(event.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().map((radio) => (radio.checked = false));\n      radios[index].setFocus();\n      radios[index].checked = true;\n\n      event.preventDefault();\n    }\n  }\n\n  handleMouseDown(event: MouseEvent) {\n    // Prevent clicks on the label from briefly blurring the input\n    event.preventDefault();\n    this.input.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.input = 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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"}

package/dist/ui-library/p-c799a6bf.entry.js

@@ -1,2 +0,0 @@
-import{r as s,c as i,h as t}from"./p-16b99232.js";import{D as e,a as h}from"./p-0786fa7c.js";import{E as a}from"./p-9a860acc.js";const o=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block}.search-box{z-index:var(--six-z-index-search-field)}.search-box__icon{cursor:pointer}";const r=class{constructor(t){s(this,t);this.searchFieldChange=i(this,"six-search-field-change",7);this.eventListeners=new a;this.handleInputChange=()=>{this.searchFieldChange.emit({value:this.inputElement.value})};this.placeholder=undefined;this.debounce=e;this.disabled=false;this.value="";this.clearable=false}handleValueChange(){if(this.inputElement){this.inputElement.value=this.value}}componentDidLoad(){this.eventListeners.add(this.inputElement,"six-input-input",h(this.handleInputChange,this.debounce));this.eventListeners.add(this.inputElement,"keydown",(s=>{if(s.key==="Enter"){this.handleInputChange()}}))}disconnectedCallback(){this.eventListeners.removeAll()}render(){return t("div",{class:"search-box"},t("six-input",{ref:s=>this.inputElement=s,placeholder:this.placeholder,value:this.value,disabled:this.disabled,clearable:this.clearable},t("six-icon",{class:"search-box__icon",slot:"prefix",size:"small",onClick:this.handleInputChange},"search")),t("slot",null))}static get watchers(){return{value:["handleValueChange"]}}};r.style=o;export{r as six_search_field};
-//# sourceMappingURL=p-c799a6bf.entry.js.map

package/dist/ui-library/p-c799a6bf.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["sixSearchFieldCss","SixSearchField","this","eventListeners","EventListeners","handleInputChange","searchFieldChange","emit","value","inputElement","DEFAULT_DEBOUNCE_FAST","handleValueChange","componentDidLoad","add","debounce","event","key","disconnectedCallback","removeAll","render","h","class","ref","el","placeholder","disabled","clearable","slot","size","onClick"],"sources":["./src/components/six-search-field/six-search-field.scss?tag=six-search-field&encapsulation=shadow","./src/components/six-search-field/six-search-field.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: block;\n}\n\n.search-box {\n  z-index: var(--six-z-index-search-field);\n\n  &__icon {\n    cursor: pointer;\n  }\n}\n","import { Component, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { debounce, DEFAULT_DEBOUNCE_FAST } from '../../utils/execution-control';\nimport { EventListeners } from '../../utils/event-listeners';\n\nexport interface SixSearchFieldChangePayload {\n  value: string;\n}\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the results below the search component.\n */\n\n@Component({\n  tag: 'six-search-field',\n  styleUrl: 'six-search-field.scss',\n  shadow: true,\n})\nexport class SixSearchField {\n  /** The input's placeholder text. */\n  @Prop() placeholder: string;\n\n  /** Debounce time in milliseconds, default is 300 ms */\n  @Prop({ reflect: true }) debounce = DEFAULT_DEBOUNCE_FAST;\n\n  /** Set to true to disable the input. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The input's value attribute. */\n  @Prop({ reflect: true }) value = '';\n\n  /** Set to true to add a clear button when the input is populated. */\n  @Prop() clearable = false;\n\n  /** Emitted when a search is triggered */\n  @Event({ eventName: 'six-search-field-change' }) searchFieldChange: EventEmitter<SixSearchFieldChangePayload>;\n\n  inputElement: HTMLSixInputElement;\n\n  readonly eventListeners = new EventListeners();\n\n  handleInputChange = () => {\n    this.searchFieldChange.emit({ value: this.inputElement.value });\n  };\n\n  @Watch('value')\n  handleValueChange() {\n    if (this.inputElement) {\n      this.inputElement.value = this.value;\n    }\n  }\n\n  componentDidLoad() {\n    this.eventListeners.add(this.inputElement, 'six-input-input', debounce(this.handleInputChange, this.debounce));\n    this.eventListeners.add(this.inputElement, 'keydown', (event: KeyboardEvent) => {\n      if (event.key === 'Enter') {\n        // emit immediately\n        this.handleInputChange();\n      }\n    });\n  }\n\n  disconnectedCallback() {\n    this.eventListeners.removeAll();\n  }\n\n  render() {\n    return (\n      <div class=\"search-box\">\n        <six-input\n          ref={(el) => (this.inputElement = el)}\n          placeholder={this.placeholder}\n          value={this.value}\n          disabled={this.disabled}\n          clearable={this.clearable}\n        >\n          <six-icon class=\"search-box__icon\" slot=\"prefix\" size=\"small\" onClick={this.handleInputChange}>\n            search\n          </six-icon>\n        </six-input>\n        <slot />\n      </div>\n    );\n  }\n}\n"],"mappings":"iIAAA,MAAMA,EAAoB,kN,MCoBbC,EAAc,M,oFAqBhBC,KAAAC,eAAiB,IAAIC,EAE9BF,KAAAG,kBAAoB,KAClBH,KAAKI,kBAAkBC,KAAK,CAAEC,MAAON,KAAKO,aAAaD,OAAQ,E,yCAnB7BE,E,cAGA,M,WAGH,G,eAGb,K,CAcpBC,oBACE,GAAIT,KAAKO,aAAc,CACrBP,KAAKO,aAAaD,MAAQN,KAAKM,K,EAInCI,mBACEV,KAAKC,eAAeU,IAAIX,KAAKO,aAAc,kBAAmBK,EAASZ,KAAKG,kBAAmBH,KAAKY,WACpGZ,KAAKC,eAAeU,IAAIX,KAAKO,aAAc,WAAYM,IACrD,GAAIA,EAAMC,MAAQ,QAAS,CAEzBd,KAAKG,mB,KAKXY,uBACEf,KAAKC,eAAee,W,CAGtBC,SACE,OACEC,EAAA,OAAKC,MAAM,cACTD,EAAA,aACEE,IAAMC,GAAQrB,KAAKO,aAAec,EAClCC,YAAatB,KAAKsB,YAClBhB,MAAON,KAAKM,MACZiB,SAAUvB,KAAKuB,SACfC,UAAWxB,KAAKwB,WAEhBN,EAAA,YAAUC,MAAM,mBAAmBM,KAAK,SAASC,KAAK,QAAQC,QAAS3B,KAAKG,mBAAiB,WAI/Fe,EAAA,a"}

package/dist/ui-library/p-ccee090e.entry.js.map

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

package/dist/ui-library/p-cf2bdd34.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as i,h as s}from"./p-16b99232.js";import{E as e}from"./p-9a860acc.js";const n=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block}";const a=class{constructor(s){t(this,s);this.sixSubmit=i(this,"six-form-submit",7);this.sixChange=i(this,"six-form-change",7);this.sixReset=i(this,"six-form-reset",7);this.eventListeners=new e;this.novalidate=false}connectedCallback(){this.formControls=[{tag:"six-button",serialize:(t,i)=>t.name&&!t.disabled?i.append(t.name,t.value):null,click:t=>{const i=t.target;if(i.submit){this.submit()}if(i.reset){this.reset()}}},{tag:"six-checkbox",serialize:(t,i)=>t.name&&t.checked&&!t.disabled?i.append(t.name,t.value):null,changeEventName:"six-checkbox-change"},{tag:"six-color-picker",serialize:(t,i)=>t.name&&!t.disabled?i.append(t.name,t.value):null},{tag:"six-input",serialize:(t,i)=>t.name&&!t.disabled?i.append(t.name,t.value):null,keyDown:t=>{if(t.key==="Enter"&&!t.defaultPrevented){this.submit()}},changeEventName:"six-input-change"},{tag:"six-datepicker",serialize:(t,i)=>{var s;return t.name&&!t.disabled?i.append(t.name,(s=t.value)===null||s===void 0?void 0:s.toISOString()):null},keyDown:t=>{if(t.key==="Enter"&&!t.defaultPrevented){this.submit()}},changeEventName:"six-datepicker-select"},{tag:"six-radio",serialize:(t,i)=>t.name&&t.checked&&!t.disabled?i.append(t.name,t.value):null,changeEventName:"six-radio-change"},{tag:"six-range",serialize:(t,i)=>{if(t.name&&!t.disabled){i.append(t.name,t.value+"")}},changeEventName:"six-range-change"},{tag:"six-select",serialize:(t,i)=>{if(t.name&&!t.disabled){if(t.multiple){const s=[...t.value];if(s.length){s.map((s=>i.append(t.name,s)))}else{i.append(t.name,"")}}else{i.append(t.name,t.value+"")}}},changeEventName:"six-select-change"},{tag:"six-switch",serialize:(t,i)=>t.name&&t.checked&&!t.disabled?i.append(t.name,t.value):null,changeEventName:"six-switch-change"},{tag:"six-textarea",serialize:(t,i)=>t.name&&!t.disabled?i.append(t.name,t.value):null,changeEventName:"six-textarea-change"},{tag:"six-timepicker",serialize:(t,i)=>t.name&&!t.disabled?i.append(t.name,t.value):null,keyDown:t=>{if(t.key==="Enter"&&!t.defaultPrevented){this.submit()}},changeEventName:"six-timepicker-change"}];this.handleClick=this.handleClick.bind(this);this.handleKeyDown=this.handleKeyDown.bind(this)}disconnectedCallback(){this.eventListeners.removeAll()}componentDidLoad(){this.getFormControls().then((t=>t.forEach((t=>this.appendChangeListener(t)))))}appendChangeListener(t){const i=t.tagName.toLowerCase();for(const s of this.formControls){if(s.tag===i&&s.changeEventName){this.eventListeners.add(t,s.changeEventName,(()=>this.handleChange(t)))}}}async getFormData(){const t=new FormData;const i=await this.getFormControls();i.map((i=>this.serializeElement(i,t)));return t}async getFormControls(){const t=this.form.querySelector("slot");const i=this.formControls.map((t=>t.tag));return t.assignedElements({flatten:true}).reduce(((t,i)=>t.concat(i,[...i.querySelectorAll("*")])),[]).filter((t=>i.includes(t.tagName.toLowerCase())))}async submit(){const t=await this.getFormData();const i=await this.getFormControls();const s=i.filter((t=>typeof t.reportValidity==="function"));if(!this.novalidate){let t=true;for(const i of s){if(!await i.reportValidity()){t=false}}if(!t){return false}}this.sixSubmit.emit({formData:t,formControls:i});return true}async checkValidity(){const t=await this.getFormControls();const i=t.filter((t=>typeof t.checkValidity==="function")).map((t=>t.checkValidity()));const s=await Promise.all(i).then((t=>t.filter((t=>t===false))));return s.length==0}async reset(){const t=await this.getFormControls();t.filter((t=>(t===null||t===void 0?void 0:t.reset)&&typeof(t===null||t===void 0?void 0:t.reset)==="function")).forEach((t=>t.reset()));this.sixReset.emit()}handleClick(t){const i=t.target;const s=i.tagName.toLowerCase();for(const i of this.formControls){if(i.tag===s&&i.click){i.click(t)}}}handleKeyDown(t){const i=t.target;const s=i.tagName.toLowerCase();for(const i of this.formControls){if(i.tag===s&&i.keyDown){i.keyDown(t)}}}handleChange(t){this.checkValidity().then((i=>this.sixChange.emit({valid:i,formControl:t})))}serializeElement(t,i){const s=t.tagName.toLowerCase();for(const e of this.formControls){if(e.tag===s){return e.serialize(t,i)}}return null}render(){return s("div",{ref:t=>this.form=t,part:"base",class:"form",role:"form",onClick:this.handleClick,onKeyDown:this.handleKeyDown},s("slot",null))}};a.style=n;export{a as six_form};
-//# sourceMappingURL=p-cf2bdd34.entry.js.map

package/dist/ui-library/p-cf2bdd34.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["sixFormCss","SixForm","this","eventListeners","EventListeners","connectedCallback","formControls","tag","serialize","el","formData","name","disabled","append","value","click","event","target","submit","reset","checked","changeEventName","keyDown","key","defaultPrevented","_a","toISOString","multiple","selectedOptions","length","map","handleClick","bind","handleKeyDown","disconnectedCallback","removeAll","componentDidLoad","getFormControls","then","controls","forEach","control","appendChangeListener","tagName","toLowerCase","formControl","add","handleChange","async","FormData","serializeElement","slot","form","querySelector","tags","assignedElements","flatten","reduce","all","concat","querySelectorAll","filter","includes","getFormData","formControlsThatReport","reportValidity","novalidate","isValid","sixSubmit","emit","validationTasks","checkValidity","invalidControls","Promise","results","valid","sixReset","sixChange","render","h","ref","part","class","role","onClick","onKeyDown"],"sources":["./src/components/six-form/six-form.scss?tag=six-form&encapsulation=shadow","./src/components/six-form/six-form.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: block;\n}\n","import { Component, Event, EventEmitter, h, Method, Prop } from '@stencil/core';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { EmptyPayload } from '../../utils/types';\n\nexport interface SixFormSubmitPayload {\n  formData: FormData;\n  formControls: HTMLFormElement[];\n}\n\nexport interface SixFormChangePayload {\n  formControl: HTMLFormElement;\n  valid: boolean;\n}\n\ninterface FormControl {\n  tag: string;\n\n  serialize(el: HTMLFormElement | HTMLElement, formData: FormData): void;\n\n  click?(event: MouseEvent): any;\n\n  keyDown?(event: KeyboardEvent): any;\n\n  changeEventName?: string;\n}\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 form's content.\n *\n * @part base - The component's base wrapper.\n */\n@Component({\n  tag: 'six-form',\n  styleUrl: 'six-form.scss',\n  shadow: true,\n})\nexport class SixForm {\n  form: HTMLElement;\n  formControls: FormControl[];\n\n  readonly eventListeners = new EventListeners();\n\n  /** Prevent the form from validating inputs before submitting. */\n  @Prop() novalidate = false;\n\n  /**\n   * Emitted when the form is submitted. This event will not be emitted if any form control inside of it is in an\n   * invalid state, unless the form has the `novalidate` attribute. Note that there is never a need to prevent this\n   * event, since it doen't send a GET or POST request like native forms. To \"prevent\" submission, use a conditional\n   * around the XHR request you use to submit the form's data with.\n   */\n  @Event({ eventName: 'six-form-submit' }) sixSubmit: EventEmitter<SixFormSubmitPayload>;\n\n  /** Emitted when the control's value changes. */\n  @Event({ eventName: 'six-form-change' }) sixChange: EventEmitter<SixFormChangePayload>;\n\n  /** Emitted when the forms values are reset. */\n  @Event({ eventName: 'six-form-reset' }) sixReset: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    this.formControls = [\n      {\n        tag: 'six-button',\n        serialize: (el: HTMLSixButtonElement, formData) =>\n          el.name && !el.disabled ? formData.append(el.name, el.value) : null,\n        click: (event) => {\n          const target = event.target as HTMLSixButtonElement;\n          if (target.submit) {\n            this.submit();\n          }\n\n          if (target.reset) {\n            this.reset();\n          }\n        },\n      },\n      {\n        tag: 'six-checkbox',\n        serialize: (el: HTMLSixCheckboxElement, formData) =>\n          el.name && el.checked && !el.disabled ? formData.append(el.name, el.value) : null,\n        changeEventName: 'six-checkbox-change',\n      },\n      {\n        tag: 'six-color-picker',\n        serialize: (el: HTMLSixCheckboxElement, formData) =>\n          el.name && !el.disabled ? formData.append(el.name, el.value) : null,\n      },\n      {\n        tag: 'six-input',\n        serialize: (el: HTMLSixInputElement, formData) =>\n          el.name && !el.disabled ? formData.append(el.name, el.value) : null,\n        keyDown: (event) => {\n          if (event.key === 'Enter' && !event.defaultPrevented) {\n            this.submit();\n          }\n        },\n        changeEventName: 'six-input-change',\n      },\n      {\n        tag: 'six-datepicker',\n        serialize: (el: HTMLSixDatepickerElement, formData) =>\n          el.name && !el.disabled ? formData.append(el.name, el.value?.toISOString()) : null,\n        keyDown: (event) => {\n          if (event.key === 'Enter' && !event.defaultPrevented) {\n            this.submit();\n          }\n        },\n        changeEventName: 'six-datepicker-select',\n      },\n      {\n        tag: 'six-radio',\n        serialize: (el: HTMLSixRadioElement, formData) =>\n          el.name && el.checked && !el.disabled ? formData.append(el.name, el.value) : null,\n        changeEventName: 'six-radio-change',\n      },\n      {\n        tag: 'six-range',\n        serialize: (el: HTMLSixRangeElement, formData) => {\n          if (el.name && !el.disabled) {\n            formData.append(el.name, el.value + '');\n          }\n        },\n        changeEventName: 'six-range-change',\n      },\n      {\n        tag: 'six-select',\n        serialize: (el: HTMLSixSelectElement, formData) => {\n          if (el.name && !el.disabled) {\n            if (el.multiple) {\n              const selectedOptions = [...el.value];\n              if (selectedOptions.length) {\n                selectedOptions.map((value) => formData.append(el.name, value));\n              } else {\n                formData.append(el.name, '');\n              }\n            } else {\n              formData.append(el.name, el.value + '');\n            }\n          }\n        },\n        changeEventName: 'six-select-change',\n      },\n      {\n        tag: 'six-switch',\n        serialize: (el: HTMLSixSwitchElement, formData) =>\n          el.name && el.checked && !el.disabled ? formData.append(el.name, el.value) : null,\n        changeEventName: 'six-switch-change',\n      },\n      {\n        tag: 'six-textarea',\n        serialize: (el: HTMLSixTextareaElement, formData) =>\n          el.name && !el.disabled ? formData.append(el.name, el.value) : null,\n        changeEventName: 'six-textarea-change',\n      },\n      {\n        tag: 'six-timepicker',\n        serialize: (el: HTMLSixTimepickerElement, formData) =>\n          el.name && !el.disabled ? formData.append(el.name, el.value) : null,\n        keyDown: (event) => {\n          if (event.key === 'Enter' && !event.defaultPrevented) {\n            this.submit();\n          }\n        },\n        changeEventName: 'six-timepicker-change',\n      },\n    ];\n\n    this.handleClick = this.handleClick.bind(this);\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n  }\n\n  disconnectedCallback() {\n    this.eventListeners.removeAll();\n  }\n\n  componentDidLoad() {\n    this.getFormControls().then((controls) => controls.forEach((control) => this.appendChangeListener(control)));\n  }\n\n  private appendChangeListener(el: HTMLFormElement) {\n    const tag = el.tagName.toLowerCase();\n    for (const formControl of this.formControls) {\n      if (formControl.tag === tag && formControl.changeEventName) {\n        this.eventListeners.add(el as HTMLElement, formControl.changeEventName, () => this.handleChange(el));\n      }\n    }\n  }\n\n  /** Serializes all form controls elements and returns a `FormData` object. */\n  @Method()\n  async getFormData() {\n    const formData = new FormData();\n    const formControls = await this.getFormControls();\n\n    formControls.map((el) => this.serializeElement(el, formData));\n\n    return formData;\n  }\n\n  /** Gets all form control elements (native and custom). */\n  @Method()\n  async getFormControls() {\n    const slot = this.form.querySelector('slot');\n    const tags = this.formControls.map((control) => control.tag);\n    return slot\n      .assignedElements({ flatten: true })\n      .reduce((all, el) => all.concat(el, [...el.querySelectorAll('*')]), [])\n      .filter((el) => tags.includes(el.tagName.toLowerCase())) as HTMLFormElement[];\n  }\n\n  /**\n   * Submits the form. If all controls are valid, the `six-form-submit` event will be emitted and the promise will resolve\n   * with `true`. If any form control is invalid, the promise will resolve with `false` and no event will be emitted.\n   */\n  @Method()\n  async submit() {\n    const formData = await this.getFormData();\n    const formControls = await this.getFormControls();\n    const formControlsThatReport = formControls.filter(\n      (el: HTMLFormElement) => typeof el.reportValidity === 'function'\n    ) as any;\n\n    if (!this.novalidate) {\n      let isValid = true;\n      for (const el of formControlsThatReport) {\n        if (!(await el.reportValidity())) {\n          isValid = false;\n        }\n      }\n      if (!isValid) {\n        return false;\n      }\n    }\n\n    this.sixSubmit.emit({ formData, formControls });\n\n    return true;\n  }\n\n  /** Checks for validity. */\n  @Method()\n  async checkValidity() {\n    const formControls = await this.getFormControls();\n    const validationTasks = formControls\n      .filter((el: HTMLFormElement) => typeof el.checkValidity === 'function')\n      .map((el: HTMLFormElement) => el.checkValidity());\n    const invalidControls = await Promise.all(validationTasks).then((results) =>\n      results.filter((valid) => valid === false)\n    );\n    return invalidControls.length == 0;\n  }\n\n  /** Resets the form and resets the value of all descendants*/\n  @Method()\n  async reset() {\n    const formControls = await this.getFormControls();\n\n    formControls\n      .filter((control) => control?.reset && typeof control?.reset === 'function')\n      .forEach((formControl) => formControl.reset());\n\n    this.sixReset.emit();\n  }\n\n  handleClick(event: MouseEvent) {\n    const target = event.target as HTMLFormElement;\n    const tag = target.tagName.toLowerCase();\n\n    for (const formControl of this.formControls) {\n      if (formControl.tag === tag && formControl.click) {\n        formControl.click(event);\n      }\n    }\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    const target = event.target as HTMLFormElement;\n    const tag = target.tagName.toLowerCase();\n\n    for (const formControl of this.formControls) {\n      if (formControl.tag === tag && formControl.keyDown) {\n        formControl.keyDown(event);\n      }\n    }\n  }\n\n  handleChange(el: HTMLFormElement) {\n    this.checkValidity().then((isValid) =>\n      this.sixChange.emit({\n        valid: isValid,\n        formControl: el,\n      })\n    );\n  }\n\n  serializeElement(el: HTMLFormElement, formData: FormData) {\n    const tag = el.tagName.toLowerCase();\n\n    for (const formControl of this.formControls) {\n      if (formControl.tag === tag) {\n        return formControl.serialize(el, formData);\n      }\n    }\n\n    return null;\n  }\n\n  render() {\n    return (\n      <div\n        ref={(el) => (this.form = el)}\n        part=\"base\"\n        class=\"form\"\n        role=\"form\"\n        onClick={this.handleClick}\n        onKeyDown={this.handleKeyDown}\n      >\n        <slot />\n      </div>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/ui-library/p-d12c6092.js

@@ -1,2 +0,0 @@
-const s=s=>typeof s==="string";const n=s=>s==null;const o=s=>s instanceof Date;const a=s=>s==="number";var t;(function(s){s["AM"]="AM";s["PM"]="PM"})(t||(t={}));var c;(function(s){s["HOURS"]="hours";s["MINUTES"]="minutes";s["SECONDS"]="seconds";s["MILLISECONDS"]="milliseconds";s["HAS_24_HOURS"]="has24Hours";s["PERIOD"]="period"})(c||(c={}));var e;(function(s){s["HOUR_24"]="HH";s["HOUR_12"]="hh";s["MINUTE"]="mm";s["SECOND"]="ss";s["MILLISECOND"]="ms";s["PERIOD"]="aa"})(e||(e={}));const i={[e.HOUR_24]:"hours",[e.HOUR_12]:"hours",[e.MINUTE]:"minutes",[e.SECOND]:"seconds",[e.MILLISECOND]:"milliseconds",[e.PERIOD]:"period"};export{c as S,e as T,a,o as b,s as c,t as d,i as e,n as i};
-//# sourceMappingURL=p-d12c6092.js.map

package/dist/ui-library/p-d12c6092.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["isString","value","isNil","isDate","Date","isNumber","SixTimePeriod","SixTimePropertyName","TIME_FORMAT_CHAR","TIME_FORMAT_CHAR_TO_SIX_TIME_PROPERTY_MAP","HOUR_24","HOUR_12","MINUTE","SECOND","MILLISECOND","PERIOD"],"sources":["./src/utils/type-check.ts","./src/components/six-timepicker/six-timepicker.types.tsx"],"sourcesContent":["export const isString = (value: any): value is string => typeof value === 'string';\n\n// only use '==' instead of '===' to also catch undefined and void\nexport const isNil = (value) => value == null;\n\nexport const isDate = (value): value is Date => value instanceof Date;\n\nexport const isNumber = (value): value is number => value === 'number';\n","/*\n * Defines the different time periods for the 12-hour-clock\n */\nexport enum SixTimePeriod {\n  AM = 'AM',\n  PM = 'PM',\n}\n\nexport enum SixTimePropertyName {\n  HOURS = 'hours',\n  MINUTES = 'minutes',\n  SECONDS = 'seconds',\n  MILLISECONDS = 'milliseconds',\n  HAS_24_HOURS = 'has24Hours',\n  PERIOD = 'period',\n}\n\n/*\n * Defines a format independent interface for time used internally in the six-timepicker\n */\nexport interface SixTime {\n  [SixTimePropertyName.HOURS]?: number;\n  [SixTimePropertyName.MINUTES]?: number;\n  [SixTimePropertyName.SECONDS]?: number;\n  [SixTimePropertyName.MILLISECONDS]?: number;\n  [SixTimePropertyName.HAS_24_HOURS]?: boolean; // true => 24h, false => 12h\n  [SixTimePropertyName.PERIOD]?: SixTimePeriod; // only needed for 12-hour clock\n}\n\n/*\n * Defines the different time units allowed to use in a timestring\n */\nexport enum TIME_FORMAT_CHAR {\n  HOUR_24 = 'HH',\n  HOUR_12 = 'hh',\n  MINUTE = 'mm',\n  SECOND = 'ss',\n  MILLISECOND = 'ms',\n  PERIOD = 'aa',\n}\n\n/*\n * Defines a mapping from the time format unit characters to the sixTime property name\n */\nexport const TIME_FORMAT_CHAR_TO_SIX_TIME_PROPERTY_MAP = {\n  [TIME_FORMAT_CHAR.HOUR_24]: 'hours',\n  [TIME_FORMAT_CHAR.HOUR_12]: 'hours',\n  [TIME_FORMAT_CHAR.MINUTE]: 'minutes',\n  [TIME_FORMAT_CHAR.SECOND]: 'seconds',\n  [TIME_FORMAT_CHAR.MILLISECOND]: 'milliseconds',\n  [TIME_FORMAT_CHAR.PERIOD]: 'period',\n};\n"],"mappings":"MAAaA,EAAYC,UAAuCA,IAAU,S,MAG7DC,EAASD,GAAUA,GAAS,K,MAE5BE,EAAUF,GAAyBA,aAAiBG,K,MAEpDC,EAAYJ,GAA2BA,IAAU,S,ICJlDK,GAAZ,SAAYA,GACVA,EAAA,WACAA,EAAA,UACD,EAHD,CAAYA,MAAa,K,IAKbC,GAAZ,SAAYA,GACVA,EAAA,iBACAA,EAAA,qBACAA,EAAA,qBACAA,EAAA,+BACAA,EAAA,6BACAA,EAAA,kBACD,EAPD,CAAYA,MAAmB,K,IAwBnBC,GAAZ,SAAYA,GACVA,EAAA,gBACAA,EAAA,gBACAA,EAAA,eACAA,EAAA,eACAA,EAAA,oBACAA,EAAA,cACD,EAPD,CAAYA,MAAgB,K,MAYfC,EAA4C,CACvD,CAACD,EAAiBE,SAAU,QAC5B,CAACF,EAAiBG,SAAU,QAC5B,CAACH,EAAiBI,QAAS,UAC3B,CAACJ,EAAiBK,QAAS,UAC3B,CAACL,EAAiBM,aAAc,eAChC,CAACN,EAAiBO,QAAS,iB"}

package/dist/ui-library/p-dd0ac344.entry.js

@@ -1,2 +0,0 @@
-import{r as o,c as t,h as r,g as i}from"./p-16b99232.js";import{h as n}from"./p-b4dfb7cf.js";const s=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:inline-block;width:auto;cursor:pointer}.button{display:inline-flex;align-items:stretch;justify-content:center;width:100%;border-style:solid;border-width:var(--six-border-width);border-radius:0;font-family:var(--six-font-family);font-weight:var(--six-font-weight-semibold);text-decoration:none;user-select:none;white-space:nowrap;vertical-align:middle;padding:0;transition:var(--six-transition-fast) background-color, var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;cursor:inherit}.button::-moz-focus-inner{border:0}.button:focus{outline:none}.button.button--disabled{pointer-events:none}.button ::slotted(six-icon){pointer-events:none}.button-wrapper--disabled{cursor:not-allowed}.button__prefix,.button__suffix{flex:0 0 auto;display:flex;align-items:center}.button.button--secondary{background-color:var(--six-color-white);border-color:var(--six-color-web-rock-900);color:var(--six-color-web-rock-900)}.button.button--secondary.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--secondary:hover:not(.button--disabled){background-color:var(--six-color-web-rock-100)}.button.button--secondary:focus:not(.button--disabled){background-color:var(--six-color-web-rock-100);border-color:var(--six-color-web-rock-400);box-shadow:var(--six-button-focus-shadow)}.button.button--secondary:active:not(.button--disabled){background-color:var(--six-color-web-rock-300);border-color:var(--six-color-web-rock-900);border-width:var(--six-focus-ring-width)}.button.button--primary{background-color:var(--six-color-web-rock-900);border-color:var(--six-color-web-rock-900);color:var(--six-color-white)}.button.button--primary.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--primary:hover:not(.button--disabled){background-color:var(--six-color-web-rock-800);border-color:var(--six-color-web-rock-800)}.button.button--primary:focus:not(.button--disabled){background-color:var(--six-color-web-rock-900);border-color:var(--six-color-web-rock-400);box-shadow:var(--six-button-focus-shadow)}.button.button--primary:active:not(.button--disabled){background-color:var(--six-color-web-rock-900);border-color:var(--six-color-web-rock-900);opacity:70%}.button.button--link{background-color:transparent;border-color:transparent;color:var(--six-color-action-500)}.button.button--link.button--disabled{color:var(--six-color-web-rock-400)}.button.button--link:hover:not(.button--disabled){color:var(--six-color-action-600)}.button.button--link:focus:not(.button--disabled){border-color:var(--six-color-web-rock-400)}.button.button--link:active:not(.button--disabled){color:var(--six-color-action-light-to-be-defined)}.button.button--danger{background-color:var(--six-color-danger-800);border-color:var(--six-color-danger-800);color:var(--six-color-white)}.button.button--danger.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--danger:hover:not(.button--disabled){background-color:var(--six-color-danger-900);border-color:var(--six-color-danger-900)}.button.button--danger:focus:not(.button--disabled){background-color:var(--six-color-danger-800);border-color:var(--six-color-web-rock-400);box-shadow:var(--six-button-focus-shadow)}.button.button--danger:active:not(.button--disabled){background-color:var(--six-color-danger-800);border-color:var(--six-color-danger-800);opacity:70%}.button.button--warning{background-color:var(--six-color-warning-700);border-color:var(--six-color-warning-700);color:var(--six-color-web-rock-900)}.button.button--warning.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--warning:hover:not(.button--disabled){background-color:var(--six-color-warning-800);border-color:var(--six-color-warning-800)}.button.button--warning:focus:not(.button--disabled){background-color:var(--six-color-warning-700);border-color:var(--six-color-web-rock-400);box-shadow:var(--six-button-focus-shadow)}.button.button--warning:active:not(.button--disabled){background-color:var(--six-color-warning-700);border-color:var(--six-color-warning-700);opacity:70%}.button.button--success{background-color:var(--six-color-success-500);border-color:var(--six-color-success-500);color:var(--six-color-web-rock-900)}.button.button--success.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--success:hover:not(.button--disabled){background-color:var(--six-color-success-600);border-color:var(--six-color-success-600)}.button.button--success:focus:not(.button--disabled){background-color:var(--six-color-success-500);border-color:var(--six-color-web-rock-400);box-shadow:var(--six-button-focus-shadow)}.button.button--success:active:not(.button--disabled){background-color:var(--six-color-success-500);border-color:var(--six-color-success-500);opacity:70%}.button.button--action{background-color:var(--six-color-action-500);border-color:var(--six-color-action-500);color:var(--six-color-white)}.button.button--action.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--action:hover:not(.button--disabled){background-color:var(--six-color-action-600);border-color:var(--six-color-action-600)}.button.button--action:focus:not(.button--disabled){background-color:var(--six-color-action-500);border-color:var(--six-color-web-rock-400);box-shadow:var(--six-button-focus-shadow)}.button.button--action:active:not(.button--disabled){background-color:var(--six-color-action-500);border-color:var(--six-color-action-500);opacity:70%}.button--small{font-size:var(--six-button-font-size-small);height:var(--six-height-small);line-height:calc(var(--six-height-small) - var(--six-border-width) * 2)}.button--medium{font-size:var(--six-button-font-size-medium);height:var(--six-height-medium);line-height:calc(var(--six-height-medium) - var(--six-border-width) * 2)}.button--large{font-size:var(--six-button-font-size-large);height:var(--six-height-large);line-height:calc(var(--six-height-large) - var(--six-border-width) * 2)}.button--pill.button--small{border-radius:var(--six-height-small)}.button--pill.button--medium{border-radius:var(--six-height-medium)}.button--pill.button--large{border-radius:var(--six-height-large)}.button--circle{padding-left:0;padding-right:0;font-size:revert}.button--circle.button--small{width:var(--six-height-small);border-radius:50%}.button--circle.button--medium{width:var(--six-height-medium);border-radius:50%}.button--circle.button--large{width:var(--six-height-large);border-radius:50%}.button--circle .button__prefix,.button--circle .button__suffix,.button--circle .button__caret{display:none}.button--circle .button__prefix svg,.button--circle .button__suffix svg,.button--circle .button__caret svg{color:var(--six-color-web-rock-900)}.button--caret .button__suffix{display:none}.button--caret .button__caret{display:flex;align-items:center}.button--caret .button__caret svg{color:var(--six-color-web-rock-900);width:1em;height:1em}.button--primary .button__caret svg,.button--action .button__caret svg,.button--danger .button__caret svg{color:var(--six-color-white)}.button--loading{position:relative;cursor:wait}.button--loading .button__prefix,.button--loading .button__label,.button--loading .button__suffix,.button--loading .button__caret{visibility:hidden}.button--loading six-spinner{--indicator-color:currentColor;position:absolute;height:1em;width:1em;top:calc(50% - 0.5em);left:calc(50% - 0.5em)}.button ::slotted(six-badge){position:absolute;top:0;right:0;transform:translateY(-50%) translateX(50%);pointer-events:none}.button--has-label.button--small .button__label{padding:0 var(--six-spacing-small)}.button--has-label.button--medium .button__label{padding:0 var(--six-spacing-medium)}.button--has-label.button--large .button__label{padding:0 var(--six-spacing-large)}.button--has-prefix.button--small{padding-left:var(--six-spacing-x-small)}.button--has-prefix.button--small .button__label{padding-left:var(--six-spacing-x-small)}.button--has-prefix.button--medium{padding-left:var(--six-spacing-small)}.button--has-prefix.button--medium .button__label{padding-left:var(--six-spacing-small)}.button--has-prefix.button--large{padding-left:var(--six-spacing-small)}.button--has-prefix.button--large .button__label{padding-left:var(--six-spacing-small)}.button--has-suffix.button--small,.button--caret.button--small{padding-right:var(--six-spacing-x-small)}.button--has-suffix.button--small .button__label,.button--caret.button--small .button__label{padding-right:var(--six-spacing-x-small)}.button--has-suffix.button--medium,.button--caret.button--medium{padding-right:var(--six-spacing-small)}.button--has-suffix.button--medium .button__label,.button--caret.button--medium .button__label{padding-right:var(--six-spacing-small)}.button--has-suffix.button--large,.button--caret.button--large{padding-right:var(--six-spacing-small)}.button--has-suffix.button--large .button__label,.button--caret.button--large .button__label{padding-right:var(--six-spacing-small)}";const a=class{constructor(r){o(this,r);this.sixBlur=t(this,"six-button-blur",7);this.sixFocus=t(this,"six-button-focus",7);this.hasFocus=false;this.hasLabel=false;this.hasPrefix=false;this.hasSuffix=false;this.type="primary";this.size="medium";this.caret=false;this.disabled=false;this.loading=false;this.pill=false;this.circle=false;this.submit=false;this.reset=false;this.name=undefined;this.value=undefined;this.href=undefined;this.target=undefined;this.download=undefined}connectedCallback(){this.handleBlur=this.handleBlur.bind(this);this.handleFocus=this.handleFocus.bind(this);this.handleClick=this.handleClick.bind(this);this.handleSlotChange=this.handleSlotChange.bind(this)}componentWillLoad(){this.handleSlotChange()}async setFocus(o){this.button.focus(o)}async removeFocus(){this.button.blur()}handleSlotChange(){this.hasLabel=n(this.host);this.hasPrefix=n(this.host,"prefix");this.hasSuffix=n(this.host,"suffix")}handleBlur(){this.hasFocus=false;this.sixBlur.emit()}handleFocus(){this.hasFocus=true;this.sixFocus.emit()}handleClick(o){if(this.disabled||this.loading){o.preventDefault();o.stopPropagation()}}render(){const o=!!this.href;const t=!o;const i=o?"a":"button";return r("div",{onClick:this.handleClick,class:{"button-wrapper--disabled":this.disabled}},r(i,{ref:o=>this.button=o,part:"base",class:{button:true,"button--secondary":this.type==="secondary","button--primary":this.type==="primary","button--link":this.type==="link","button--success":this.type==="success","button--warning":this.type==="warning","button--danger":this.type==="danger","button--action":this.type==="action","button--small":this.size==="small","button--medium":this.size==="medium","button--large":this.size==="large","button--caret":this.caret,"button--circle":this.circle,"button--disabled":this.disabled,"button--focused":this.hasFocus,"button--loading":this.loading,"button--pill":this.pill,"button--has-label":this.hasLabel,"button--has-prefix":this.hasPrefix,"button--has-suffix":this.hasSuffix},disabled:t?this.disabled:null,type:t?this.submit?"submit":this.reset?"reset":"button":null,name:t?this.name:null,value:t?this.value:null,href:o&&this.href,target:o&&this.target?this.target:null,download:o&&this.download?this.download:null,rel:o&&this.target?"noreferrer noopener":null,onBlur:this.handleBlur,onFocus:this.handleFocus,onClick:this.handleClick,"data-testid":"button"},r("span",{part:"prefix",class:"button__prefix"},r("slot",{onSlotchange:this.handleSlotChange,name:"prefix"})),r("span",{part:"label",class:"button__label"},r("slot",{onSlotchange:this.handleSlotChange})),r("span",{part:"suffix",class:"button__suffix"},r("slot",{onSlotchange:this.handleSlotChange,name:"suffix"})),this.caret&&r("span",{part:"caret",class:"button__caret"},r("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},r("polyline",{points:"6 9 12 15 18 9"}))),this.loading&&r("six-spinner",null)))}get host(){return i(this)}};a.style=s;export{a as six_button};
-//# sourceMappingURL=p-dd0ac344.entry.js.map