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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@six-group/ui-library",
-  "version": "0.0.0-insider.9277796",
+  "version": "0.0.0-insider.a358260",
   "description": "Stencil Component Library following the SIX style guide",
   "license": "Apache-2.0",
   "main": "dist/index.cjs.js",
@@ -17,6 +17,7 @@
   ],
   "scripts": {
     "build": "npm run clean && stencil build --docs",
+    "build:watch": "stencil build --watch",
     "start": "stencil build --dev --watch --serve",
     "test": "stencil test --spec",
     "test:e2e": "stencil test --e2e",
@@ -29,7 +30,7 @@
     "test.watch": "stencil test --spec --e2e --watchAll",
     "generate": "stencil generate",
     "clean": "rimraf dist loader www docs",
-    "lint": "eslint src/components/**/*{.ts,.tsx}",
+    "lint": "    eslint       src/**/*{.ts,.tsx}",
     "lint:fix": "eslint --fix src/**/*{.ts,.tsx}",
     "codeclean": "npm run lint:fix && npm run prettier:fix"
   },
@@ -40,29 +41,27 @@
   "devDependencies": {
     "@fontsource/noto-sans": "^4.5.1",
     "@popperjs/core": "^2.5.3",
+    "@stencil-community/eslint-plugin": "^0.5.0",
     "@stencil/angular-output-target": "^0.6.0",
-    "@stencil/eslint-plugin": "^0.4.0",
     "@stencil/react-output-target": "^0.5.0",
     "@stencil/sass": "^3.0.1",
     "@stencil/vue-output-target": "^0.8.2",
-    "@types/jest": "^26.0.15",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
-    "@typescript-eslint/parser": "^4.33.0",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.28.0",
-    "jest": "^26.6.3",
-    "jest-cli": "^26.6.3",
+    "@types/jest": "27.0.3",
+    "@typescript-eslint/eslint-plugin": "^5.59.7",
+    "@typescript-eslint/parser": "^5.59.6",
+    "eslint": "^8.41.0",
+    "eslint-config-prettier": "^8.8.0",
+    "jest": "27.4.5",
+    "jest-cli": "27.4.5",
     "material-icons": "^1.12.0",
-    "puppeteer": "^13.3.2",
-    "puppeteer-core": "^13.3.2",
+    "puppeteer": "^20.2.1",
     "replace-in-file": "^6.2.0",
     "rimraf": "^3.0.2",
     "typescript": "^4.3.2"
   },
   "jest": {
     "preset": "@stencil/core/testing",
+    "testRunner": "jasmine2",
     "roots": [
       "<rootDir>/src"
     ]

package/dist/ui-library/p-0d79b0c6.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as e,h as r,g as i}from"./p-ac4f4d45.js";import{F as o}from"./p-79eee01b.js";import{h as a}from"./p-b4dfb7cf.js";import{E as s}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}.textarea{display:flex;align-items:center;position:relative;width:100%;font-family:var(--six-font-family);font-weight:var(--six-input-font-weight);line-height:var(--six-line-height-normal);letter-spacing:var(--six-input-letter-spacing);background-color:var(--six-input-background-color);border:solid var(--six-border-width) var(--six-input-border-color);vertical-align:middle;transition:var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;cursor:text}.textarea:hover:not(.textarea--disabled){background-color:var(--six-input-background-color-hover);border-color:var(--six-input-border-color-hover)}.textarea:hover:not(.textarea--disabled) .textarea__control{color:var(--six-input-color-hover)}.textarea.textarea--focused:not(.textarea--disabled){background-color:var(--six-input-background-color-focus);box-shadow:var(--six-input-focus-shadow);border-color:var(--six-input-border-color-focus);color:var(--six-input-color-focus)}.textarea.textarea--focused:not(.textarea--disabled) .textarea__control{color:var(--six-input-color-focus)}.textarea.textarea--disabled{background-color:var(--six-input-background-color-disabled);border-color:var(--six-input-border-color-disabled);cursor:not-allowed}.textarea.textarea--disabled .textarea__control{color:var(--six-input-color-disabled)}.textarea.textarea--disabled .textarea__control::placeholder{color:var(--six-input-placeholder-color-disabled)}.textarea__control{flex:1 1 auto;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:1.4;color:var(--sl-input-color);border:none;background:none;box-shadow:none;cursor:inherit;-webkit-appearance:none}.textarea__control::-webkit-search-decoration,.textarea__control::-webkit-search-cancel-button,.textarea__control::-webkit-search-results-button,.textarea__control::-webkit-search-results-decoration{-webkit-appearance:none}.textarea__control::placeholder{color:var(--six-input-placeholder-color);user-select:none}.textarea__control:focus{outline:none}.textarea--invalid:not(.textarea--disabled):not(.textarea--focused){border-color:var(--six-input-border-color-danger)}.textarea--small{border-radius:var(--six-input-border-radius-small);font-size:var(--six-input-font-size-small)}.textarea--small .textarea__control{padding:0.5em var(--six-input-spacing-small)}.textarea--medium{border-radius:var(--six-input-border-radius-medium);font-size:var(--six-input-font-size-medium)}.textarea--medium .textarea__control{padding:0.5em var(--six-input-spacing-medium)}.textarea--large{border-radius:var(--six-input-border-radius-large);font-size:var(--six-input-font-size-large)}.textarea--large .textarea__control{padding:0.5em var(--six-input-spacing-large)}.textarea--resize-none .textarea__control{resize:none}.textarea--resize-vertical .textarea__control{resize:vertical}.textarea--resize-auto .textarea__control{height:auto;resize:none}';let n=0;const h=class{constructor(r){t(this,r);this.sixChange=e(this,"six-textarea-change",7);this.sixInput=e(this,"six-textarea-input",7);this.sixFocus=e(this,"six-textarea-focus",7);this.sixBlur=e(this,"six-textarea-blur",7);this.sixValueChange=e(this,"six-textarea-value-change",7);this.inputId=`textarea-${++n}`;this.labelId=`textarea-label-${n}`;this.helpTextId=`textarea-help-text-${n}`;this.errorTextId=`input-error-text-${n}`;this.customErrorText="";this.customValidation=false;this.eventListeners=new s;this.defaultValue="";this.hasFocus=false;this.hasHelpTextSlot=false;this.hasErrorTextSlot=false;this.hasLabelSlot=false;this.size="medium";this.name="";this.value="";this.label="";this.helpText="";this.errorText="";this.placeholder=undefined;this.rows=4;this.resize="vertical";this.disabled=false;this.readonly=false;this.minlength=undefined;this.maxlength=undefined;this.required=undefined;this.invalid=false;this.autocapitalize=undefined;this.autocorrect=undefined;this.autocomplete=undefined;this.autofocus=undefined;this.spellcheck=undefined;this.inputmode=undefined;this.errorOnBlur=false}handleLabelChange(){this.handleSlotChange()}handleRowsChange(){if(this.textarea){this.setTextareaHeight()}}handleValueChange(){if(!this.textarea){return}this.textarea.value=this.value;this.invalid=!this.textarea.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.handleSlotChange=this.handleSlotChange.bind(this);this.host.shadowRoot.addEventListener("slotchange",this.handleSlotChange)}componentWillLoad(){this.defaultValue=this.value||"";this.handleSlotChange()}componentDidLoad(){this.setTextareaHeight();this.resizeObserver=new ResizeObserver((()=>this.setTextareaHeight()));this.resizeObserver.observe(this.textarea);this.eventListeners.add(this.textarea,"invalid",(t=>{if(this.customValidation||!this.hasErrorTextSlot&&!this.errorText&&!this.customErrorText){this.customErrorText=this.textarea.validationMessage}t.preventDefault()}))}disconnectedCallback(){this.resizeObserver.unobserve(this.textarea);this.host.shadowRoot.removeEventListener("slotchange",this.handleSlotChange);this.eventListeners.removeAll()}async setFocus(t){this.textarea.focus(t)}async removeFocus(){this.textarea.blur()}async select(){return this.textarea.select()}async setSelectionRange(t,e,r="none"){return this.textarea.setSelectionRange(t,e,r)}async setRangeText(t,e,r,i="preserve"){this.textarea.setRangeText(t,e,r,i);if(this.value!==this.textarea.value){this.value=this.textarea.value;this.setTextareaHeight();this.sixChange.emit();this.sixInput.emit()}}async reportValidity(){return this.textarea.reportValidity()}async checkValidity(){return this.textarea.validity.valid}async setCustomValidity(t){this.customErrorText="";this.customValidation=t!=="";this.textarea.setCustomValidity(t);this.invalid=!this.textarea.checkValidity()}async reset(){this.value=this.defaultValue;this.customErrorText="";this.customValidation=false;this.textarea.setCustomValidity("");this.invalid=false}handleChange(){this.sixChange.emit()}handleInput(){this.value=this.textarea.value;this.setTextareaHeight();this.sixInput.emit()}handleInvalid(){this.invalid=true}handleBlur(){this.hasFocus=false;this.sixBlur.emit()}handleFocus(){this.hasFocus=true;this.sixFocus.emit()}handleSlotChange(){this.hasLabelSlot=a(this.host,"label");this.hasHelpTextSlot=a(this.host,"help-text");this.hasErrorTextSlot=a(this.host,"error-text")}setTextareaHeight(){if(this.resize==="auto"){this.textarea.style.height="auto";this.textarea.style.height=this.textarea.scrollHeight+"px"}else{this.textarea.style.height=undefined}}displayError(){return this.invalid&&(!this.errorOnBlur||!this.hasFocus)}render(){var t;return r(o,{inputId:this.inputId,label:this.label,labelId:this.labelId,hasLabelSlot:this.hasLabelSlot,helpTextId:this.helpTextId,helpText:this.helpText,hasHelpTextSlot:this.hasHelpTextSlot,errorTextId:this.errorTextId,errorText:this.customErrorText?this.customErrorText:this.errorText,hasErrorTextSlot:this.hasErrorTextSlot,size:this.size,disabled:this.disabled,required:this.required,displayError:this.displayError()},r("div",{part:"base",class:{textarea:true,"textarea--small":this.size==="small","textarea--medium":this.size==="medium","textarea--large":this.size==="large","textarea--disabled":this.disabled,"textarea--focused":this.hasFocus,"textarea--empty":((t=this.value)===null||t===void 0?void 0:t.length)===0,"textarea--invalid":this.invalid,"textarea--resize-none":this.resize==="none","textarea--resize-vertical":this.resize==="vertical","textarea--resize-auto":this.resize==="auto"}},r("textarea",{part:"textarea",ref:t=>this.textarea=t,id:this.inputId,class:"textarea__control",name:this.name,placeholder:this.placeholder,disabled:this.disabled,readOnly:this.readonly,rows:this.rows,minLength:this.minlength,maxLength:this.maxlength,value:this.value,autoCapitalize:this.autocapitalize,autoCorrect:this.autocorrect,autoFocus:this.autofocus,spellcheck:this.spellcheck,required:this.required,inputMode:this.inputmode,"aria-labelledby":this.labelId,onChange:this.handleChange,onInput:this.handleInput,onInvalid:this.handleInvalid,onFocus:this.handleFocus,onBlur:this.handleBlur})))}get host(){return i(this)}static get watchers(){return{helpText:["handleLabelChange"],errorText:["handleLabelChange"],label:["handleLabelChange"],rows:["handleRowsChange"],value:["handleValueChange"]}}};h.style=l;export{h as six_textarea};
-//# sourceMappingURL=p-0d79b0c6.entry.js.map

package/dist/ui-library/p-0d79b0c6.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["sixTextareaCss","id","SixTextarea","this","inputId","labelId","helpTextId","errorTextId","customErrorText","customValidation","eventListeners","EventListeners","defaultValue","handleLabelChange","handleSlotChange","handleRowsChange","textarea","setTextareaHeight","handleValueChange","value","invalid","checkValidity","sixValueChange","emit","connectedCallback","handleChange","bind","handleInput","handleInvalid","handleBlur","handleFocus","host","shadowRoot","addEventListener","componentWillLoad","componentDidLoad","resizeObserver","ResizeObserver","observe","add","event","hasErrorTextSlot","errorText","validationMessage","preventDefault","disconnectedCallback","unobserve","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","hasLabelSlot","hasSlot","hasHelpTextSlot","resize","style","height","scrollHeight","undefined","displayError","errorOnBlur","render","h","FormControl","label","helpText","size","disabled","required","part","class","_a","length","ref","el","name","placeholder","readOnly","readonly","rows","minLength","minlength","maxLength","maxlength","autoCapitalize","autocapitalize","autoCorrect","autocorrect","autoFocus","autofocus","spellcheck","inputMode","inputmode","onChange","onInput","onInvalid","onFocus","onBlur"],"sources":["./src/components/six-textarea/six-textarea.scss?tag=six-textarea&encapsulation=shadow","./src/components/six-textarea/six-textarea.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n  display: block;\n}\n\n.textarea {\n  display: flex;\n  align-items: center;\n  position: relative;\n  width: 100%;\n  font-family: var(--six-font-family);\n  font-weight: var(--six-input-font-weight);\n  line-height: var(--six-line-height-normal);\n  letter-spacing: var(--six-input-letter-spacing);\n  background-color: var(--six-input-background-color);\n  border: solid var(--six-border-width) var(--six-input-border-color);\n  vertical-align: middle;\n  transition: var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;\n  cursor: text;\n\n  &:hover:not(.textarea--disabled) {\n    background-color: var(--six-input-background-color-hover);\n    border-color: var(--six-input-border-color-hover);\n\n    .textarea__control {\n      color: var(--six-input-color-hover);\n    }\n  }\n\n  &.textarea--focused:not(.textarea--disabled) {\n    background-color: var(--six-input-background-color-focus);\n    box-shadow: var(--six-input-focus-shadow);\n    border-color: var(--six-input-border-color-focus);\n    color: var(--six-input-color-focus);\n\n    .textarea__control {\n      color: var(--six-input-color-focus);\n    }\n  }\n\n  &.textarea--disabled {\n    background-color: var(--six-input-background-color-disabled);\n    border-color: var(--six-input-border-color-disabled);\n    cursor: not-allowed;\n\n    .textarea__control {\n      color: var(--six-input-color-disabled);\n\n      &::placeholder {\n        color: var(--six-input-placeholder-color-disabled);\n      }\n    }\n  }\n}\n\n.textarea__control {\n  flex: 1 1 auto;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  line-height: 1.4;\n  color: var(--sl-input-color);\n  border: none;\n  background: none;\n  box-shadow: none;\n  cursor: inherit;\n  -webkit-appearance: none;\n\n  &::-webkit-search-decoration,\n  &::-webkit-search-cancel-button,\n  &::-webkit-search-results-button,\n  &::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n\n  &::placeholder {\n    color: var(--six-input-placeholder-color);\n    user-select: none;\n  }\n\n  &:focus {\n    outline: none;\n  }\n}\n\n.textarea--invalid:not(.textarea--disabled):not(.textarea--focused) {\n  border-color: var(--six-input-border-color-danger);\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Size modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.textarea--small {\n  border-radius: var(--six-input-border-radius-small);\n  font-size: var(--six-input-font-size-small);\n\n  .textarea__control {\n    padding: 0.5em var(--six-input-spacing-small);\n  }\n}\n\n.textarea--medium {\n  border-radius: var(--six-input-border-radius-medium);\n  font-size: var(--six-input-font-size-medium);\n\n  .textarea__control {\n    padding: 0.5em var(--six-input-spacing-medium);\n  }\n}\n\n.textarea--large {\n  border-radius: var(--six-input-border-radius-large);\n  font-size: var(--six-input-font-size-large);\n\n  .textarea__control {\n    padding: 0.5em var(--six-input-spacing-large);\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Resize types\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.textarea--resize-none .textarea__control {\n  resize: none;\n}\n\n.textarea--resize-vertical .textarea__control {\n  resize: vertical;\n}\n\n.textarea--resize-auto .textarea__control {\n  height: auto;\n  resize: none;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { EmptyPayload } from '../../utils/types';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot label - The textarea's label. Alternatively, you can use the label prop.\n * @slot help-text - Help text that describes how to use the input.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n *\n * @part base - The component's base wrapper.\n * @part form-control - The form control that wraps the label, textarea, and help text.\n * @part label - The textarea label.\n * @part textarea - The textarea control.\n * @part help-text - The textarea help text.\n */\n@Component({\n  tag: 'six-textarea',\n  styleUrl: 'six-textarea.scss',\n  shadow: true,\n})\nexport class SixTextarea {\n  inputId = `textarea-${++id}`;\n  labelId = `textarea-label-${id}`;\n  helpTextId = `textarea-help-text-${id}`;\n  errorTextId = `input-error-text-${id}`;\n  resizeObserver: ResizeObserver;\n  textarea: HTMLTextAreaElement;\n  customErrorText = '';\n  customValidation = false;\n\n  readonly eventListeners = new EventListeners();\n\n  @Element() host: HTMLSixTextareaElement;\n\n  @State() hasFocus = false;\n  @State() hasHelpTextSlot = false;\n  @State() hasErrorTextSlot = false;\n  @State() hasLabelSlot = false;\n\n  /** The textarea's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** The textarea's name attribute. */\n  @Prop({ reflect: true }) name = '';\n\n  /** The textarea's value attribute. */\n  @Prop({ mutable: true, reflect: true }) value = '';\n\n  /** The textarea's label. Alternatively, you can use the label slot. */\n  @Prop() label = '';\n\n  /** The textarea's help text. Alternatively, you can use the help-text slot. */\n  @Prop() helpText = '';\n\n  /** The textarea's error text. Alternatively, you can use the error-text slot. */\n  @Prop() errorText = '';\n\n  /** The textarea's placeholder text. */\n  @Prop() placeholder: string;\n\n  /** The number of rows to display by default. */\n  @Prop() rows = 4;\n\n  /** Controls how the textarea can be resized. */\n  @Prop() resize: 'none' | 'vertical' | 'auto' = 'vertical';\n\n  /** Set to true to disable the textarea. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Set to true for a readonly textarea. */\n  @Prop({ reflect: true }) readonly = false;\n\n  /** The minimum length of input that will be considered valid. */\n  @Prop({ reflect: true }) minlength: number;\n\n  /** The maximum length of input that will be considered valid. */\n  @Prop({ reflect: true }) maxlength: number;\n\n  /** The textarea's required attribute. */\n  @Prop({ reflect: true }) required: boolean;\n\n  /**\n   * This will be true when the control is in an invalid state. Validity is determined by props such as `required`,\n   * `minlength`, and `maxlength` using the browser's constraint validation API.\n   */\n  @Prop({ mutable: true, reflect: true }) invalid = false;\n\n  /** The textarea's autocaptialize attribute. */\n  @Prop() autocapitalize: string;\n\n  /** The textarea's autocorrect attribute. */\n  @Prop() autocorrect: string;\n\n  /** The textarea's autocomplete attribute. */\n  @Prop() autocomplete: string;\n\n  /** The textarea's autofocus attribute. */\n  @Prop() autofocus: boolean;\n\n  /** The textarea's spellcheck attribute. */\n  @Prop() spellcheck: boolean;\n\n  /** The textarea's inputmode attribute. */\n  @Prop() inputmode: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';\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. Access the new value via event.target.value. */\n  @Event({ eventName: 'six-textarea-change' }) sixChange: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control receives input. Access the new value via event.target.value. */\n  @Event({ eventName: 'six-textarea-input' }) sixInput: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control gains focus. */\n  @Event({ eventName: 'six-textarea-focus' }) sixFocus: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control loses focus. Access the new value via event.target.value. */\n  @Event({ eventName: 'six-textarea-blur' }) sixBlur: EventEmitter<EmptyPayload>;\n\n  /**\n   * Emitted whenever the value changes. Access the new value via event.target.value.\n   * six-textarea-value-change will emit whenever the value changes.\n   * So be it on textarea or when dynamically set. six-textarea-input will only be emitted when the user enters data,\n   * but not when a value is dynamically set. six-textarea-change will only be emitted when the user either presses enter\n   * or leaves the textarea field after entering some data.\n   * */\n\n  @Event({ eventName: 'six-textarea-value-change' }) sixValueChange: EventEmitter<EmptyPayload>;\n\n  @Watch('helpText')\n  @Watch('errorText')\n  @Watch('label')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  @Watch('rows')\n  handleRowsChange() {\n    if (this.textarea) {\n      this.setTextareaHeight();\n    }\n  }\n\n  @Watch('value')\n  handleValueChange() {\n    if (!this.textarea) {\n      return;\n    }\n    this.textarea.value = this.value;\n    this.invalid = !this.textarea.checkValidity();\n    this.sixValueChange.emit();\n  }\n\n  /** default value the textarea will be reverted to when reset is executed */\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.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.setTextareaHeight();\n    this.resizeObserver = new ResizeObserver(() => this.setTextareaHeight());\n    this.resizeObserver.observe(this.textarea);\n    this.eventListeners.add(this.textarea, 'invalid', (event) => {\n      if (this.customValidation || (!this.hasErrorTextSlot && !this.errorText && !this.customErrorText)) {\n        this.customErrorText = this.textarea.validationMessage;\n      }\n      event.preventDefault();\n    });\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver.unobserve(this.textarea);\n    this.host.shadowRoot.removeEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.removeAll();\n  }\n\n  /** Sets focus on the textarea. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.textarea.focus(options);\n  }\n\n  /** Removes focus fromt the textarea. */\n  @Method()\n  async removeFocus() {\n    this.textarea.blur();\n  }\n\n  /** Selects all the text in the input. */\n  @Method()\n  async select() {\n    return this.textarea.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.textarea.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.textarea.setRangeText(replacement, start, end, selectMode);\n\n    if (this.value !== this.textarea.value) {\n      this.value = this.textarea.value;\n      this.setTextareaHeight();\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.textarea.reportValidity();\n  }\n\n  /** Checks for validity. */\n  @Method()\n  async checkValidity() {\n    return this.textarea.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.textarea.setCustomValidity(message);\n    this.invalid = !this.textarea.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.textarea.setCustomValidity('');\n    this.invalid = false;\n  }\n\n  handleChange() {\n    this.sixChange.emit();\n  }\n\n  handleInput() {\n    this.value = this.textarea.value;\n    this.setTextareaHeight();\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  handleSlotChange() {\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n    this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n    this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n  }\n\n  setTextareaHeight() {\n    if (this.resize === 'auto') {\n      this.textarea.style.height = 'auto';\n      this.textarea.style.height = this.textarea.scrollHeight + 'px';\n    } else {\n      this.textarea.style.height = undefined;\n    }\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            textarea: true,\n\n            // Sizes\n            'textarea--small': this.size === 'small',\n            'textarea--medium': this.size === 'medium',\n            'textarea--large': this.size === 'large',\n\n            // States\n            'textarea--disabled': this.disabled,\n            'textarea--focused': this.hasFocus,\n            'textarea--empty': this.value?.length === 0,\n            'textarea--invalid': this.invalid,\n\n            // Modifiers\n            'textarea--resize-none': this.resize === 'none',\n            'textarea--resize-vertical': this.resize === 'vertical',\n            'textarea--resize-auto': this.resize === 'auto',\n          }}\n        >\n          <textarea\n            part=\"textarea\"\n            ref={(el) => (this.textarea = el)}\n            id={this.inputId}\n            class=\"textarea__control\"\n            name={this.name}\n            placeholder={this.placeholder}\n            disabled={this.disabled}\n            readOnly={this.readonly}\n            rows={this.rows}\n            minLength={this.minlength}\n            maxLength={this.maxlength}\n            value={this.value}\n            autoCapitalize={this.autocapitalize}\n            autoCorrect={this.autocorrect}\n            autoFocus={this.autofocus}\n            spellcheck={this.spellcheck}\n            required={this.required}\n            inputMode={this.inputmode}\n            aria-labelledby={this.labelId}\n            onChange={this.handleChange}\n            onInput={this.handleInput}\n            onInvalid={this.handleInvalid}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n          />\n        </div>\n      </FormControl>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/ui-library/p-14f20bbb.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-7e0cc4ae.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-835c3ff7.entry.js

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

package/dist/ui-library/p-835c3ff7.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["sixSelectCss","id","SixSelect","this","inputId","labelId","helpTextId","errorTextId","customErrorText","customValidation","eventListeners","EventListeners","DEFAULT_DEBOUNCE_FAST","handleDisabledChange","disabled","isOpen","dropdown","hide","handleLabelChange","handleSlotChange","handleMultipleChange","value","getValueAsArray","multiple","syncItemsFromValue","handleValueChange","input","sixChange","emit","isSelected","connectedCallback","virtualScroll","options","console","error","handleBlur","bind","handleFocus","handleClearClick","handleKeyDown","handleSelectAll","handleLabelClick","handleMenuHide","handleMenuShow","handleMenuSelect","handleInvalid","handleTagInteraction","host","shadowRoot","addEventListener","componentWillLoad","componentDidLoad","resizeObserver","ResizeObserver","resizeMenu","requestAnimationFrame","add","async","event","hasErrorTextSlot","errorText","getValidationMessage","preventDefault","debounce","enteredValue","clearValues","stopPropagation","inputDebounce","hasSelection","displayLabel","disconnectedCallback","removeEventListener","removeAll","reportValidity","isValid","message","setCustomValidity","invalid","checkValidity","getItemLabel","item","slot","querySelector","getTextContent","textContent","getItems","map","option","h","label","querySelectorAll","hasMenuItems","length","getValueAsStringArray","values","String","Array","isArray","hasFocus","sixBlur","sixFocus","_a","defaultValue","nonFilteredItems","filter","style","display","keyName","key","keyCode","code","ctrlKey","hasDeselectedOptions","some","opt","checked","forEach","checkedItems","target","items","firstItem","lastItem","tagName","toLowerCase","includes","show","setFocus","menu","typeToSelect","box","focus","detail","v","observe","unobserve","hasHelpTextSlot","hasSlot","hasLabelSlot","path","composedPath","clearButton","find","el","HTMLElement","element","classList","contains","minWidth","clientWidth","reposition","val","push","displayTags","exportparts","type","size","pill","clearable","onClick","onKeyDown","syncValueFromItems","maxTagsVisible","total","slice","extractLabelForSelectedItem","touched","autocomplete","join","selectedOption","checkedItem","checkedValues","displayError","errorOnBlur","render","FormControl","helpText","onLabelClick","required","part","ref","hoist","closeOnSelect","containingElement","disableHideOnEnterAndSpace","class","select","filterPlaceholder","filterDebounce","asyncFilter","select__box","line","role","tabIndex","onBlur","onFocus","placeholder","name","tabindex","select__input","onInvalid","select__menu","onSlotchange"],"sources":["./src/components/six-select/six-select.scss?tag=six-select&encapsulation=shadow","./src/components/six-select/six-select.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n@import 'src/global/mixins/hidden';\n@import 'src/global/mixins/hide-scrollbar';\n\n:host {\n  display: block;\n}\n\n.select {\n  display: block;\n}\n\n.select__box {\n  display: inline-flex;\n  align-items: center;\n  justify-content: start;\n  position: relative;\n  width: 100%;\n  font-family: var(--six-font-family);\n  font-weight: var(--six-input-font-weight);\n  font-size: var(--six-input-font-size-medium);\n  letter-spacing: var(--six-input-letter-spacing);\n  background-color: var(--six-input-background-color);\n  border: solid var(--six-border-width) var(--six-input-border-color);\n  vertical-align: middle;\n  overflow: hidden;\n  transition: var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;\n  cursor: pointer;\n\n  &--line {\n    border: none;\n    border-bottom: solid var(--six-border-width) var(--six-input-border-color);\n  }\n\n  &--autocomplete {\n    border: none;\n    overflow: initial;\n  }\n}\n\n.select:not(.select--disabled) .select__box:hover {\n  background-color: var(--six-input-background-color-hover);\n  color: var(--six-input-color-hover);\n\n  border-bottom-color: var(--six-input-border-color-hover);\n\n  &:not(.select__box--line) {\n    border-color: var(--six-input-border-color-hover);\n  }\n}\n\n.select:not(.select--disabled) .select__box:focus {\n  background-color: var(--six-input-background-color-focus);\n  outline: none;\n  color: var(--six-input-color-focus);\n\n  border-bottom-color: var(--six-input-border-color-focus);\n  box-shadow: 0 1px 0 0 var(--six-input-border-color-focus);\n\n  &:not(.select__box--line) {\n    border-color: var(--six-input-border-color-focus);\n    box-shadow: var(--six-input-focus-shadow);\n  }\n}\n\n.select--disabled {\n  .select__box {\n    background-color: var(--six-input-background-color-disabled);\n    color: var(--six-input-color-disabled);\n    cursor: not-allowed;\n    outline: none;\n\n    &:not(.select__box--line) {\n      border-color: var(--six-input-border-color-disabled);\n    }\n  }\n\n  .select__tags,\n  .select__clear {\n    pointer-events: none;\n  }\n}\n\n.select--invalid:not(.select--disabled):not(.select--focused) {\n  .select__box {\n    border-bottom-color: var(--six-input-border-color-danger);\n\n    &:not(.input--line) {\n      border-color: var(--six-input-border-color-danger);\n    }\n  }\n}\n\n.select__label {\n  flex-shrink: 1;\n  flex-grow: 1;\n  align-items: center;\n  user-select: none;\n  width: 0; /* needed for firefox because due to \"white-space: nowrap\" the default is set to max-content */\n\n  @include hide-scrollbar;\n  overflow-x: auto;\n  overflow-y: hidden;\n  white-space: nowrap;\n}\n\n.select__clear {\n  flex-shrink: 0;\n  flex-grow: 0;\n  display: inline;\n}\n\n.select__icon {\n  flex-shrink: 0;\n  flex-grow: 0;\n  display: inline;\n  transition: var(--six-transition-medium) transform ease;\n}\n\n.select--open .select__icon {\n  transform: rotate(-180deg);\n}\n\n// Placeholder\n.select--placeholder-visible .select__label {\n  color: var(--six-input-placeholder-color);\n}\n\n.select--disabled.select--placeholder-visible .select__label {\n  color: var(--six-input-placeholder-color-disabled);\n}\n\n// Tags\n.select__tags {\n  display: inline-flex;\n  align-items: center;\n  flex-wrap: wrap;\n  justify-content: left;\n  margin-left: var(--six-spacing-xx-small);\n}\n\n// Hidden input (for form control validation to show)\n.select__hidden-select {\n  @include visually-hidden();\n}\n\n.select__input {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Size modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.select--small {\n  .select__box {\n    border-radius: var(--six-input-border-radius-small);\n    font-size: var(--six-input-font-size-small);\n    min-height: var(--six-height-small);\n\n    &--line {\n      border: none;\n      border-bottom: solid var(--six-border-width) var(--six-input-border-color);\n    }\n  }\n\n  .select__label {\n    margin: 0 var(--six-input-spacing-small);\n  }\n\n  .select__clear {\n    margin-right: var(--six-spacing-xxx-small);\n  }\n\n  .select__icon {\n    margin-right: var(--six-spacing-x-small);\n  }\n\n  .select__tags {\n    padding-bottom: 2px;\n\n    six-tag {\n      padding-top: 2px;\n    }\n\n    six-tag:not(:last-of-type) {\n      margin-right: var(--six-spacing-xx-small);\n    }\n  }\n\n  &.select--has-tags .select__label {\n    margin-left: 0;\n  }\n}\n\n.select--medium {\n  .select__box {\n    border-radius: var(--six-input-border-radius-medium);\n    font-size: var(--six-input-font-size-medium);\n    min-height: var(--six-height-medium);\n\n    &--line {\n      border: none;\n      border-bottom: solid var(--six-border-width) var(--six-input-border-color);\n    }\n  }\n\n  .select__label {\n    margin: 0 var(--six-input-spacing-medium);\n  }\n\n  .select__clear {\n    margin-right: var(--six-spacing-xxx-small);\n  }\n\n  .select__icon {\n    margin-right: var(--six-spacing-x-small);\n  }\n\n  .select__tags {\n    padding-bottom: 3px;\n\n    six-tag {\n      padding-top: 3px;\n    }\n\n    six-tag:not(:last-of-type) {\n      margin-right: var(--six-spacing-xx-small);\n    }\n  }\n\n  &.select--has-tags .select__label {\n    margin-left: 0;\n  }\n}\n\n.select--large {\n  .select__box {\n    border-radius: var(--six-input-border-radius-large);\n    font-size: var(--six-input-font-size-large);\n    min-height: var(--six-height-large);\n\n    &--line {\n      border: none;\n      border-bottom: solid var(--six-border-width) var(--six-input-border-color);\n    }\n  }\n\n  .select__label {\n    margin: 0 var(--six-input-spacing-large);\n  }\n\n  .select__clear {\n    margin-right: var(--six-spacing-xxx-small);\n  }\n\n  .select__icon {\n    margin-right: var(--six-spacing-x-small);\n  }\n\n  .select__tags {\n    padding-bottom: 4px;\n\n    six-tag {\n      padding-top: 4px;\n    }\n\n    six-tag:not(:last-of-type) {\n      margin-right: var(--six-spacing-xx-small);\n    }\n  }\n\n  &.select--has-tags .select__label {\n    margin-left: 0;\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pill modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.select--pill {\n  &.select--small .select__box {\n    border-radius: var(--six-height-small);\n  }\n\n  &.select--medium .select__box {\n    border-radius: var(--six-height-medium);\n  }\n\n  &.select--large .select__box {\n    border-radius: var(--six-height-large);\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Menu\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n.select {\n  &__menu {\n    max-width: 50vw;\n    width: fit-content;\n\n    &--filtered {\n      // fixes problem where when filter is enabled the popup has the width of the input field but the menu has the width\n      // of the trigger element and we thus get weird UI glitches when trigger is narrower than filter input field\n      width: 100% !important;\n    }\n\n    &--hidden {\n      // hide the menu panel if there are no menu items\n      display: none;\n    }\n  }\n}\n\n// fixes problem where six-select height changes when size=\"small\" and clearing button is visible\nsix-icon-button::part(base) {\n  padding-top: 0;\n  padding-bottom: 0;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { getTextContent, hasSlot } from '../../utils/slot';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { debounce, DEFAULT_DEBOUNCE_FAST } from '../../utils/execution-control';\nimport { SixMenuItemData } from '../six-menu/six-menu';\n\nexport interface SixSelectChangePayload {\n  value: string | string[];\n  isSelected: boolean;\n}\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The select's options in the form of menu items.\n * @slot label - The select's label. Alternatively, you can use the label prop.\n * @slot help-text - Help text that describes how to use the select.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n *\n * @part base - The component's base wrapper.\n * @part clear-button - The input's clear button, exported from six-input.\n * @part form-control - The form control that wraps the label, input, and help text.\n * @part help-text - The select's help text.\n * @part icon - The select's icon.\n * @part label - The select's label.\n * @part menu - The select menu, a six-menu element.\n * @part tag - The multiselect option, a six-tag element.\n * @part tags - The container in which multiselect options are rendered.\n */\n\n@Component({\n  tag: 'six-select',\n  styleUrl: 'six-select.scss',\n  shadow: true,\n})\nexport class SixSelect {\n  box: HTMLElement;\n  dropdown: HTMLSixDropdownElement;\n  input: HTMLSixInputElement;\n  inputId = `select-${++id}`;\n  labelId = `select-label-${id}`;\n  helpTextId = `select-help-text-${id}`;\n  errorTextId = `select-error-text-${id}`;\n  menu: HTMLSixMenuElement;\n  resizeObserver: ResizeObserver;\n  touched: boolean;\n  customErrorText = '';\n  customValidation = false;\n\n  readonly eventListeners = new EventListeners();\n\n  @Element() host: HTMLSixSelectElement;\n\n  @State() hasFocus = false;\n  @State() hasHelpTextSlot = false;\n  @State() hasErrorTextSlot = false;\n  @State() hasLabelSlot = false;\n  @State() isOpen = false;\n  @State() displayLabel = '';\n  @State() displayTags = [];\n\n  /** Set to true to enable multiselect. */\n  @Prop() multiple = false;\n\n  /**\n   * The maximum number of tags to show when `multiple` is true. After the maximum, \"+n\" will be shown to indicate the\n   * number of additional items that are selected. Set to -1 to remove the limit.\n   */\n  @Prop() maxTagsVisible = 3;\n\n  /** Set to true to disable the select control. */\n  @Prop() disabled = false;\n\n  /** The select's name. */\n  @Prop() name = '';\n\n  /** The select's placeholder text. */\n  @Prop() placeholder = '';\n\n  /** The filter's placeholder text. */\n  @Prop() filterPlaceholder: string;\n\n  /** The debounce for the filter callbacks. */\n  @Prop() filterDebounce = DEFAULT_DEBOUNCE_FAST;\n\n  /** The select's size. */\n  @Prop() size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n   * `overflow: auto|scroll`.\n   */\n  @Prop() hoist = false;\n\n  /** The value of the control. This will be a string or an array depending on `multiple`. */\n  @Prop({ mutable: true }) value: string | string[] = '';\n\n  /** Set to true to draw a pill-style select with rounded edges. */\n  @Prop() pill = false;\n\n  /** The select's label. Alternatively, you can use the label slot. */\n  @Prop() label = '';\n\n  /** The select's help text. Alternatively, you can use the help-text slot. */\n  @Prop() helpText = '';\n\n  /** The select's error text. Alternatively, you can use the error-text slot. */\n  @Prop() errorText = '';\n\n  /** The select's required attribute. */\n  @Prop() required = false;\n\n  /** Set to true to add a clear button when the select is populated. */\n  @Prop() clearable = false;\n\n  /** This will be true when the control is in an invalid state. Validity is determined by the `required` prop. */\n  @Prop({ mutable: true }) invalid = false;\n\n  /** Set to render as line */\n  @Prop() line = false;\n\n  /** Set to display the error text on blur and not when typing */\n  @Prop() errorOnBlur = false;\n\n  /** Set to true to allow filtering for entries in the dropdown */\n  @Prop() filter = false;\n\n  /**\n   * Set to true to allow async filtering.\n   * When you enter something in the search field the component will only emit an event but not filter any elements itself.\n   * You can then simply listen to the 'six-async-filter-fired' event to manage the shown menu-items yourself\n   */\n  @Prop() asyncFilter = false;\n\n  /**\n   * Set to true to turn the six-select into an autocomplete.\n   */\n  @Prop() autocomplete = false;\n\n  /** The debounce for when the input changes for autocompletes should be emitted */\n  @Prop() inputDebounce = DEFAULT_DEBOUNCE_FAST;\n\n  /** Set the options to be shown in the dropdown (alternative to setting the elements via html) */\n  @Prop() options: SixMenuItemData[] | null = null;\n\n  /** Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around)\n   *  are actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot. */\n  @Prop() virtualScroll = false;\n\n  /** The default value the select will be reverted to when reset is executed */\n  @Prop() defaultValue: string | string[] | undefined;\n\n  @Watch('disabled')\n  handleDisabledChange() {\n    if (this.disabled && this.isOpen) {\n      this.dropdown.hide();\n    }\n  }\n\n  @Watch('helpText')\n  @Watch('errorText')\n  @Watch('label')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  @Watch('multiple')\n  handleMultipleChange() {\n    // Cast to array | string based on `this.multiple`\n    const value = this.getValueAsArray();\n    this.value = this.multiple ? value : value[0] || '';\n    this.syncItemsFromValue();\n  }\n\n  @Watch('value')\n  handleValueChange() {\n    this.syncItemsFromValue();\n    if (this.input) {\n      this.sixChange.emit({ value: this.value, isSelected: true });\n    }\n  }\n\n  /** Emitted when the control's value changes. */\n  @Event({ eventName: 'six-select-change' }) sixChange: EventEmitter<SixSelectChangePayload>;\n\n  /** Emitted when the control gains focus. */\n  @Event({ eventName: 'six-select-focus' }) sixFocus: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control loses focus. */\n  @Event({ eventName: 'six-select-blur' }) sixBlur: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    if (this.virtualScroll && this.options === null) {\n      console.error('Options must be defined when using virtual scrolling');\n    }\n\n    this.handleBlur = this.handleBlur.bind(this);\n    this.handleFocus = this.handleFocus.bind(this);\n    this.handleClearClick = this.handleClearClick.bind(this);\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n    this.handleSelectAll = this.handleSelectAll.bind(this);\n    this.handleLabelClick = this.handleLabelClick.bind(this);\n    this.handleMenuHide = this.handleMenuHide.bind(this);\n    this.handleMenuShow = this.handleMenuShow.bind(this);\n    this.handleMenuSelect = this.handleMenuSelect.bind(this);\n    this.handleSlotChange = this.handleSlotChange.bind(this);\n    this.handleInvalid = this.handleInvalid.bind(this);\n    this.handleTagInteraction = this.handleTagInteraction.bind(this);\n\n    this.host.shadowRoot.addEventListener('slotchange', this.handleSlotChange);\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n    if (this.multiple && this.value) {\n      this.value = this.getValueAsArray();\n    }\n  }\n\n  componentDidLoad() {\n    this.resizeObserver = new ResizeObserver(() => this.resizeMenu());\n\n    // We need to do an initial sync after the component has rendered, so this will suppress the re-render warning\n    requestAnimationFrame(() => this.syncItemsFromValue());\n\n    this.eventListeners.add(this.input, 'invalid', async (event) => {\n      if (this.customValidation || (!this.hasErrorTextSlot && !this.errorText && !this.customErrorText)) {\n        this.customErrorText = await this.input.getValidationMessage();\n      }\n      event.preventDefault();\n    });\n\n    this.eventListeners.add(\n      this.input,\n      'six-input-input',\n      debounce((event) => {\n        const enteredValue = this.input.value;\n        this.clearValues();\n        this.sixChange.emit({ value: enteredValue, isSelected: false });\n        event.stopPropagation();\n      }, this.inputDebounce)\n    );\n\n    this.input.value = this.hasSelection() ? this.displayLabel : '';\n  }\n\n  disconnectedCallback() {\n    this.host.shadowRoot.removeEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.removeAll();\n  }\n\n  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  @Method()\n  async reportValidity() {\n    return this.input.reportValidity();\n  }\n\n  /** Checks for validity. */\n  @Method()\n  async checkValidity() {\n    return this.input.isValid();\n  }\n\n  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */\n  @Method()\n  async setCustomValidity(message: string) {\n    this.customErrorText = '';\n    this.customValidation = message !== '';\n    this.input.setCustomValidity(message);\n    this.invalid = !this.input.checkValidity();\n  }\n\n  /** Resets the formcontrol */\n  @Method()\n  async reset() {\n    this.clearValues();\n    this.customErrorText = '';\n    this.customValidation = false;\n    this.input.setCustomValidity('');\n    this.invalid = false;\n  }\n\n  getItemLabel(item: HTMLSixMenuItemElement) {\n    const slot = item.shadowRoot.querySelector('slot:not([name])') as HTMLSlotElement;\n    if (slot) {\n      return getTextContent(slot);\n    } else {\n      // bugfix/COMSLI-203-six-select-value-is-not-updated-if-the-slot-is-changed\n      return item.textContent;\n    }\n  }\n\n  getItems() {\n    if (this.options !== null) {\n      return this.options.map((option) => <six-menu-item value={option.value}>{option.label}</six-menu-item>);\n    }\n\n    return [...this.host.querySelectorAll('six-menu-item')];\n  }\n\n  hasMenuItems() {\n    return this.getItems().length > 0;\n  }\n\n  getValueAsStringArray() {\n    const values = this.getValueAsArray();\n    // enforce that the values are converted to 'string' before the value is compared\n    return values.map(String);\n  }\n\n  getValueAsArray() {\n    return Array.isArray(this.value) ? this.value : [this.value];\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  handleInvalid() {\n    this.invalid = true;\n  }\n\n  handleClearClick(event: MouseEvent) {\n    event.stopPropagation();\n    this.clearValues();\n  }\n\n  clearValues() {\n    this.value = this.defaultValue ?? (this.multiple ? [] : '');\n    this.syncItemsFromValue();\n  }\n\n  handleSelectAll(event: KeyboardEvent) {\n    const nonFilteredItems = this.getItems().filter((item) => item.style.display !== 'none');\n    const keyName = event.key;\n    const keyCode = event.code;\n\n    if (keyName === 'Control') {\n      return;\n    }\n\n    if (this.isOpen && this.multiple && keyCode === 'KeyA' && event.ctrlKey) {\n      event.preventDefault();\n      const hasDeselectedOptions = nonFilteredItems.some((opt) => !opt.disabled && !opt.checked);\n\n      nonFilteredItems\n        .filter((option) => !option.disabled)\n        .forEach((option) => (option.checked = hasDeselectedOptions));\n      const checkedItems = nonFilteredItems.filter((option) => option.checked).map((option) => option.value);\n      this.value = hasDeselectedOptions ? checkedItems : [];\n    }\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    const target = event.target as HTMLElement;\n\n    const items = this.getItems();\n    const firstItem = items[0];\n    const lastItem = items[items.length - 1];\n\n    // Ignore key presses on tags\n    if (target.tagName.toLowerCase() === 'six-tag') {\n      return;\n    }\n\n    // Tabbing out of the control closes it\n    if (event.key === 'Tab') {\n      if (this.isOpen) {\n        this.dropdown.hide();\n      }\n      return;\n    }\n\n    // Up/down opens the menu\n    if (['ArrowDown', 'ArrowUp'].includes(event.key)) {\n      event.preventDefault();\n\n      // Show the menu if it's not already open\n      if (!this.isOpen) {\n        this.dropdown.show();\n      }\n\n      // Focus on a menu item\n      if (event.key === 'ArrowDown' && firstItem) {\n        firstItem.setFocus();\n        return;\n      }\n\n      if (event.key === 'ArrowUp' && lastItem) {\n        lastItem.setFocus();\n        return;\n      }\n    }\n\n    // All other keys open the menu and initiate type to select\n    if (!this.isOpen) {\n      event.stopPropagation();\n      event.preventDefault();\n      this.dropdown.show();\n      this.menu.typeToSelect(event.key);\n    }\n  }\n\n  handleLabelClick() {\n    this.box.focus();\n  }\n\n  handleMenuSelect(event: CustomEvent) {\n    const item = event.detail.item;\n    if (this.multiple) {\n      if (this.value == null || this.value === '') {\n        this.value = [];\n      } else if (!Array.isArray(this.value)) {\n        this.value = [this.value];\n      }\n      this.value = this.value.includes(item.value)\n        ? this.value.filter((v) => v !== item.value)\n        : [...this.value, item.value];\n    } else {\n      this.value = item.value;\n    }\n    this.syncItemsFromValue();\n  }\n\n  handleMenuShow(event: CustomEvent) {\n    if (this.disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    this.resizeMenu();\n    this.resizeObserver.observe(this.host);\n    this.isOpen = true;\n  }\n\n  handleMenuHide() {\n    this.resizeObserver.unobserve(this.host);\n    this.isOpen = false;\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    this.syncItemsFromValue();\n  }\n\n  handleTagInteraction(event: KeyboardEvent | MouseEvent) {\n    // Don't toggle the menu when a tag's clear button is activated\n    const path = event.composedPath() as EventTarget[];\n    const clearButton = path.find((el) => {\n      if (el instanceof HTMLElement) {\n        const element = el as HTMLElement;\n        return element.classList.contains('tag__clear');\n      }\n    });\n\n    if (clearButton) {\n      event.stopPropagation();\n    }\n  }\n\n  resizeMenu() {\n    this.menu.style.minWidth = `${this.box.clientWidth}px`;\n\n    if (this.dropdown) {\n      this.dropdown.reposition();\n    }\n  }\n\n  syncItemsFromValue() {\n    const items = this.getItems();\n    const value = this.getValueAsStringArray();\n\n    // Sync checked states\n    items.forEach((item) => (item.checked = value.includes(item.value)));\n\n    // Sync display label\n    if (this.multiple) {\n      const checkedItems = [];\n      value.forEach((val) => items.map((item) => (item.value === val ? checkedItems.push(item) : null)));\n\n      this.displayTags = checkedItems.map((item) => {\n        return (\n          <six-tag\n            exportparts=\"base:tag\"\n            type=\"primary\"\n            size={this.size}\n            pill={this.pill}\n            clearable\n            onClick={this.handleTagInteraction}\n            onKeyDown={this.handleTagInteraction}\n            onSix-tag-clear={(event) => {\n              event.stopPropagation();\n              if (!this.disabled) {\n                item.checked = false;\n                this.syncValueFromItems();\n              }\n            }}\n          >\n            {this.getItemLabel(item)}\n          </six-tag>\n        );\n      });\n\n      if (this.maxTagsVisible > 0 && this.displayTags.length > this.maxTagsVisible) {\n        const total = this.displayTags.length;\n        this.displayLabel = '';\n        this.displayTags = this.displayTags.slice(0, this.maxTagsVisible);\n        this.displayTags.push(\n          <six-tag exportparts=\"base:tag\" type=\"info\" size={this.size}>\n            +{total - this.maxTagsVisible}\n          </six-tag>\n        );\n      }\n    } else {\n      this.displayLabel = this.extractLabelForSelectedItem(value, items);\n      this.displayTags = [];\n    }\n\n    const hasSelection = this.hasSelection();\n    if (hasSelection) {\n      this.touched = true;\n    }\n    if (this.input && this.touched) {\n      if (!this.autocomplete) {\n        this.input.value = hasSelection ? this.displayLabel : '';\n      } else if (hasSelection) {\n        this.input.value = Array.isArray(this.value) ? this.value.join(',') : this.value;\n      }\n      this.invalid = !this.input.checkValidity();\n    }\n  }\n\n  private extractLabelForSelectedItem(value: string[], items: HTMLSixMenuItemElement[]) {\n    if (value.length === 0 || (value.length === 1 && value[0] === '')) {\n      return '';\n    }\n\n    if (this.options !== null) {\n      const selectedOption = this.options.find((item) => item.value === value[0]);\n      return selectedOption?.value || '';\n    }\n\n    const checkedItem = items.find((item) => item.value === value[0]);\n    return checkedItem ? this.getItemLabel(checkedItem) : '';\n  }\n\n  syncValueFromItems() {\n    const items = this.getItems();\n    const checkedItems = items.filter((item) => item.checked);\n    const checkedValues = checkedItems.map((item) => item.value);\n    this.value = this.multiple\n      ? this.getValueAsStringArray().filter((val) => checkedValues.includes(val))\n      : checkedValues.length > 0\n      ? checkedValues[0]\n      : '';\n  }\n\n  displayError() {\n    return this.invalid && (!this.errorOnBlur || (!this.hasFocus && !this.isOpen));\n  }\n\n  render() {\n    const hasSelection = this.hasSelection();\n\n    return (\n      <FormControl\n        inputId={this.inputId}\n        label={this.label}\n        labelId={this.labelId}\n        hasLabelSlot={this.hasLabelSlot}\n        helpTextId={this.helpTextId}\n        helpText={this.helpText}\n        hasHelpTextSlot={this.hasHelpTextSlot}\n        errorTextId={this.errorTextId}\n        errorText={this.customErrorText ? this.customErrorText : this.errorText}\n        hasErrorTextSlot={this.hasErrorTextSlot}\n        size={this.size}\n        onLabelClick={this.handleLabelClick}\n        disabled={this.disabled}\n        required={this.required}\n        displayError={this.displayError()}\n      >\n        <six-dropdown\n          part=\"base\"\n          ref={(el) => (this.dropdown = el)}\n          hoist={this.hoist}\n          closeOnSelect={!this.multiple}\n          containingElement={this.host}\n          disableHideOnEnterAndSpace={this.autocomplete}\n          class={{\n            select: true,\n            'select--open': this.isOpen,\n            'select--empty': this.value?.length === 0,\n            'select--focused': this.hasFocus,\n            'select--clearable': this.clearable,\n            'select--disabled': this.disabled,\n            'select--multiple': this.multiple,\n            'select--has-tags': this.multiple && hasSelection,\n            'select--placeholder-visible': this.displayLabel === '',\n            'select--small': this.size === 'small',\n            'select--medium': this.size === 'medium',\n            'select--large': this.size === 'large',\n            'select--pill': this.pill,\n            'select--invalid': this.invalid,\n          }}\n          onKeyDown={this.handleSelectAll}\n          onSix-dropdown-show={this.handleMenuShow}\n          onSix-dropdown-hide={this.handleMenuHide}\n          filterPlaceholder={this.filterPlaceholder}\n          filterDebounce={this.filterDebounce}\n          filter={this.filter}\n          asyncFilter={this.asyncFilter}\n        >\n          <div\n            slot=\"trigger\"\n            ref={(el) => (this.box = el)}\n            id={this.inputId}\n            class={{\n              select__box: true,\n              'select__box--line': this.line,\n              'select__box--autocomplete': this.autocomplete,\n            }}\n            role=\"combobox\"\n            aria-labelledby={this.labelId}\n            aria-describedby={this.helpTextId}\n            aria-haspopup=\"true\"\n            aria-expanded={this.isOpen ? 'true' : 'false'}\n            tabIndex={this.disabled ? -1 : 0}\n            onBlur={this.handleBlur}\n            onFocus={this.handleFocus}\n            onKeyDown={this.handleKeyDown}\n          >\n            <span class=\"select__label\">\n              {this.displayTags.length ? (\n                <span part=\"tags\" class=\"select__tags\">\n                  {this.displayTags}\n                </span>\n              ) : (\n                this.displayLabel || this.placeholder\n              )}\n            </span>\n\n            {this.clearable && hasSelection && (\n              <six-icon-button\n                exportparts=\"base:clear-button\"\n                class=\"select__clear\"\n                name=\"clear\"\n                size=\"small\"\n                onClick={this.handleClearClick}\n                tabindex=\"-1\"\n              />\n            )}\n\n            {this.hasMenuItems() && (\n              <span part=\"icon\" class=\"select__icon\">\n                <six-icon size=\"medium\">expand_more</six-icon>\n              </span>\n            )}\n\n            {/*\n              The hidden input tricks the browser's built-in validation so it works as expected. We use an input instead\n              of a select because, otherwise, iOS will show a list of options during validation.\n            */}\n            <six-input\n              ref={(el) => (this.input = el)}\n              class={{\n                select__input: true,\n                'select__hidden-select': !this.autocomplete,\n              }}\n              aria-hidden=\"true\"\n              required={this.required}\n              onInvalid={this.handleInvalid}\n              onFocus={this.handleFocus}\n              clearable={this.clearable}\n              placeholder={this.placeholder}\n              pill={this.pill}\n              disabled={this.disabled}\n              size={this.size}\n              tabIndex={-1}\n            />\n          </div>\n\n          <six-menu\n            ref={(el) => (this.menu = el)}\n            part=\"menu\"\n            class={{\n              select__menu: true,\n              'select__menu--filtered': this.filter || this.asyncFilter,\n              'select__menu--hidden': !this.hasMenuItems(),\n            }}\n            onSix-menu-item-selected={this.handleMenuSelect}\n            items={this.options}\n            virtualScroll={this.virtualScroll}\n            remove-box-shadow\n          >\n            <slot onSlotchange={this.handleSlotChange} />\n          </six-menu>\n        </six-dropdown>\n      </FormControl>\n    );\n  }\n\n  private hasSelection() {\n    if (this.multiple) {\n      return Array.isArray(this.value) ? this.value.length > 0 : false;\n    }\n    return this.value !== '';\n  }\n}\n"],"mappings":"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"}

package/dist/ui-library/p-90dc6af4.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["sixCheckboxCss","id","SixCheckbox","this","inputId","labelId","textId","errorTextId","customErrorText","customValidation","eventListeners","EventListeners","defaultState","handleCheckedChange","input","checked","indeterminate","invalid","checkValidity","sixChange","emit","handleLabelChange","handleSlotChange","connectedCallback","handleChange","bind","handleBlur","handleFocus","handleMouseDown","handleInvalid","host","shadowRoot","addEventListener","disconnectedCallback","removeEventListener","removeAll","componentWillLoad","componentDidLoad","add","event","hasErrorTextSlot","errorText","validationMessage","preventDefault","async","options","focus","blur","reportValidity","validity","valid","message","setCustomValidity","hasFocus","sixBlur","sixFocus","hasSlot","hasLabelSlot","displayError","errorOnBlur","render","h","FormControl","label","size","disabled","required","part","class","checkbox","htmlFor","onMouseDown","viewBox","stroke","fill","transform","d","ref","el","type","name","value","role","onChange","onBlur","onFocus","onInvalid"],"sources":["./src/components/six-checkbox/six-checkbox.scss?tag=six-checkbox&encapsulation=shadow","./src/components/six-checkbox/six-checkbox.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n  display: inline-block;\n}\n\n.checkbox {\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.checkbox__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: 0;\n  background-color: var(--six-input-background-color);\n  color: var(--six-checkbox-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;\n\n  input[type='checkbox'] {\n    position: absolute;\n    opacity: 0;\n    padding: 0;\n    margin: 0;\n    pointer-events: none;\n  }\n\n  .checkbox__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\n// Hover\n.checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover {\n  border-color: var(--six-input-border-color-hover);\n}\n\n// Checked/indeterminate\n.checkbox--checked .checkbox__control,\n.checkbox--indeterminate .checkbox__control {\n  border-color: var(--six-selection-control-color);\n  background-color: var(--six-selection-control-color);\n}\n\n// Checked/indeterminate + hover\n.checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,\n.checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__control:hover {\n  border-color: var(--six-input-border-color-focus);\n  background-color: var(--six-input-border-color-focus);\n}\n\n// Disabled\n.checkbox--disabled {\n  cursor: not-allowed;\n  color: var(--six-input-color-disabled);\n\n  .checkbox__control {\n    border-color: var(--six-input-border-color-disabled);\n  }\n\n  &.checkbox--checked .checkbox__control,\n  &.checkbox--indeterminate .checkbox__control {\n    background-color: var(--six-selection-control-color-disabled);\n  }\n}\n\n// Invalid\n.checkbox--invalid:not(.checkbox--disabled) {\n  .checkbox__control {\n    border-color: var(--six-input-border-color-danger);\n  }\n}\n\n.checkbox__text {\n  line-height: var(--six-selection-control-toggle-size);\n  margin-left: 0.5em;\n  user-select: none;\n}\n","import { Component, Event, EventEmitter, Method, Prop, State, Watch, h, Element } 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 checkbox label.\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 control - The checkbox control.\n * @part checked-icon - The container the wraps the checked icon.\n * @part indeterminate-icon - The container that wraps the indeterminate icon.\n * @part text - The checkbox text rendered to the right.\n */\n\n@Component({\n  tag: 'six-checkbox',\n  styleUrl: 'six-checkbox.scss',\n  shadow: true,\n})\nexport class SixCheckbox {\n  inputId = `checkbox-${++id}`;\n  labelId = `checkbox-label-${id}`;\n  textId = `checkbox-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: HTMLSixCheckboxElement;\n\n  @State() hasFocus = false;\n  @State() hasLabelSlot = false;\n  @State() hasErrorTextSlot = false;\n\n  /** The checkbox's name attribute. */\n  @Prop() name: string;\n\n  /** The checkbox's value attribute. */\n  @Prop() value: string;\n\n  /** Set to true to disable the checkbox. */\n  @Prop() disabled = false;\n\n  /** Set to true to make the checkbox a required field. */\n  @Prop() required = false;\n\n  /** The checkbox label. Alternatively, you can use the label slot. */\n  @Prop() label = '';\n\n  /** The checkbox's error text. Alternatively, you can use the error-text slot. */\n  @Prop() errorText = '';\n\n  /** Set to true to draw the checkbox in a checked state. */\n  @Prop({ mutable: true, reflect: true }) checked = false;\n\n  /** Set to true to draw the checkbox in an indeterminate state. */\n  @Prop({ mutable: true, reflect: true }) indeterminate = false;\n\n  /** This will be true when the control is in an invalid state. Validity is determined by the `required` prop. */\n  @Prop({ mutable: true, reflect: true }) invalid = false;\n\n  /** Set to display the error text on blur and not when typing */\n  @Prop() errorOnBlur = false;\n\n  /** Emitted when the control loses focus. */\n  @Event({ eventName: 'six-checkbox-blur' }) sixBlur: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control's checked state changes. */\n  @Event({ eventName: 'six-checkbox-change' }) sixChange: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control gains focus. */\n  @Event({ eventName: 'six-checkbox-focus' }) sixFocus: EventEmitter<EmptyPayload>;\n\n  @Watch('checked')\n  @Watch('indeterminate')\n  handleCheckedChange() {\n    if (!this.input) {\n      return;\n    }\n    this.input.checked = this.checked;\n    this.input.indeterminate = this.indeterminate;\n    this.invalid = !this.input.checkValidity();\n    this.sixChange.emit();\n  }\n\n  @Watch('errorText')\n  @Watch('label')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  /** default state whether the radio button should be checked or not when resetting */\n  private defaultState = false;\n\n  connectedCallback() {\n    this.handleChange = this.handleChange.bind(this);\n    this.handleBlur = this.handleBlur.bind(this);\n    this.handleFocus = this.handleFocus.bind(this);\n    this.handleMouseDown = this.handleMouseDown.bind(this);\n    this.handleInvalid = this.handleInvalid.bind(this);\n\n    this.host.shadowRoot.addEventListener('slotchange', this.handleSlotChange);\n  }\n\n  disconnectedCallback() {\n    this.host.shadowRoot.removeEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.removeAll();\n  }\n\n  componentWillLoad() {\n    this.defaultState = this.checked;\n    this.handleSlotChange();\n  }\n\n  componentDidLoad() {\n    this.input.indeterminate = this.indeterminate;\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  /** Sets focus on the checkbox. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /** Removes focus from the checkbox. */\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.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.checked = this.defaultState;\n    this.customErrorText = '';\n    this.customValidation = false;\n    this.input.setCustomValidity('');\n    this.invalid = false;\n  }\n\n  handleChange() {\n    this.checked = this.input.checked;\n    this.indeterminate = false;\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  handleMouseDown(event: MouseEvent) {\n    // Prevent clicks on the label from briefly blurring the input\n    event.preventDefault();\n    this.input.focus();\n  }\n\n  handleInvalid() {\n    this.invalid = true;\n  }\n\n  handleSlotChange() {\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        errorTextId={this.errorTextId}\n        errorText={this.customErrorText ? this.customErrorText : this.errorText}\n        hasErrorTextSlot={this.hasErrorTextSlot}\n        size=\"medium\"\n        disabled={this.disabled}\n        required={this.required}\n        displayError={this.displayError()}\n      >\n        <label\n          part=\"base\"\n          class={{\n            checkbox: true,\n            'checkbox--checked': this.checked,\n            'checkbox--disabled': this.disabled,\n            'checkbox--focused': this.hasFocus,\n            'checkbox--invalid': this.invalid,\n            'checkbox--indeterminate': this.indeterminate,\n          }}\n          htmlFor={this.inputId}\n          onMouseDown={this.handleMouseDown}\n        >\n          <span part=\"control\" class=\"checkbox__control\">\n            {this.checked && (\n              <span part=\"checked-icon\" class=\"checkbox__icon\">\n                <svg viewBox=\"0 0 16 16\">\n                  <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\" stroke-linecap=\"round\">\n                    <g stroke=\"currentColor\" stroke-width=\"2\">\n                      <g transform=\"translate(3.428571, 3.428571)\">\n                        <path d=\"M0,5.71428571 L3.42857143,9.14285714\"></path>\n                        <path d=\"M9.14285714,0 L3.42857143,9.14285714\"></path>\n                      </g>\n                    </g>\n                  </g>\n                </svg>\n              </span>\n            )}\n\n            {!this.checked && this.indeterminate && (\n              <span part=\"indeterminate-icon\" class=\"checkbox__icon\">\n                <svg viewBox=\"0 0 16 16\">\n                  <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\" stroke-linecap=\"round\">\n                    <g stroke=\"currentColor\" stroke-width=\"2\">\n                      <g transform=\"translate(2.285714, 6.857143)\">\n                        <path d=\"M10.2857143,1.14285714 L1.14285714,1.14285714\"></path>\n                      </g>\n                    </g>\n                  </g>\n                </svg>\n              </span>\n            )}\n\n            <input\n              ref={(el) => (this.input = el)}\n              id={this.inputId}\n              type=\"checkbox\"\n              name={this.name}\n              value={this.value}\n              checked={this.checked}\n              disabled={this.disabled}\n              required={this.required}\n              role=\"checkbox\"\n              aria-checked={this.checked ? 'true' : 'false'}\n              aria-labelledby={this.labelId}\n              onChange={this.handleChange}\n              onBlur={this.handleBlur}\n              onFocus={this.handleFocus}\n              onInvalid={this.handleInvalid}\n            />\n          </span>\n\n          <span part=\"text\" id={this.textId} class=\"checkbox__text\">\n            <slot />\n          </span>\n        </label>\n      </FormControl>\n    );\n  }\n}\n"],"mappings":"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"}

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

@@ -1,2 +0,0 @@
-import{r as i,c as o,h as t,g as s}from"./p-ac4f4d45.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-edc96efc.entry.js.map

package/dist/ui-library/p-edc96efc.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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"}