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

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

@@ -1,2 +0,0 @@
-import{r as t,c as i,h as s}from"./p-ac4f4d45.js";const o=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{--height:var(--six-selection-control-toggle-size);--thumb-size:calc(var(--six-selection-control-toggle-size) - 4px);--width:calc(var(--height) * 2);display:inline-block}.switch{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}.switch__control{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--width);height:var(--height);background-color:var(--six-selection-control-color-disabled);border-radius:var(--height);transition:var(--six-transition-fast) border-color, var(--six-transition-fast) background-color}.switch__control .switch__thumb{width:var(--thumb-size);height:var(--thumb-size);background-color:var(--six-input-background-color);border-radius:50%;transform:translateX(calc(var(--width) / -2 + var(--thumb-size) / 2 - (var(--thumb-size) - var(--height)) / 2));transition:var(--six-transition-fast) transform ease, var(--six-transition-fast) background-color, var(--six-transition-fast) border-color, var(--six-transition-fast) box-shadow}.switch__control input[type=checkbox]{position:absolute;opacity:0;padding:0;margin:0;pointer-events:none}.switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover{background-color:var(--six-input-border-color-hover)}.switch--checked .switch__control{background-color:var(--six-selection-control-color)}.switch--checked .switch__control .switch__thumb{background-color:var(--six-color-white);transform:translateX(calc(var(--width) / 2 - var(--thumb-size) / 2 + (var(--thumb-size) - var(--height)) / 2))}.switch.switch--checked:not(.switch--disabled) .switch__control:hover{background-color:var(--six-input-border-color-focus)}.switch--disabled{cursor:not-allowed;color:var(--six-selection-control-color-disabled)}.switch--disabled .switch__control{background-color:var(--six-selection-control-color-disabled)}.switch--disabled.switch--checked .switch__control{background-color:var(--six-selection-control-color-disabled)}.switch__label{line-height:var(--height);margin-left:0.5em;user-select:none}";let e=0;const h=class{constructor(s){t(this,s);this.sixBlur=i(this,"six-switch-blur",7);this.sixChange=i(this,"six-switch-change",7);this.sixFocus=i(this,"six-switch-focus",7);this.switchId=`switch-${++e}`;this.labelId=`switch-label-${e}`;this.defaultValue="";this.hasFocus=false;this.name=undefined;this.value=undefined;this.disabled=false;this.required=false;this.checked=false;this.invalid=false}handleCheckedChange(){this.input.checked=this.checked;this.sixChange.emit(this.checked)}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.defaultValue=this.value}async setFocus(t){this.input.focus(t)}async removeFocus(){this.input.blur()}async reportValidity(){return this.input.reportValidity()}async checkValidity(){return this.input.validity.valid}async setCustomValidity(t){this.input.setCustomValidity(t);this.invalid=!this.input.checkValidity()}async reset(){this.value=this.defaultValue;this.input.setCustomValidity("");this.invalid=false}handleClick(){this.checked=this.input.checked}handleBlur(){this.hasFocus=false;this.sixBlur.emit(this.checked)}handleFocus(){this.hasFocus=true;this.sixFocus.emit()}handleKeyDown(t){if(t.key==="ArrowLeft"){t.preventDefault();this.checked=false}if(t.key==="ArrowRight"){t.preventDefault();this.checked=true}}handleMouseDown(t){t.preventDefault();this.input.focus()}render(){return s("label",{part:"base",htmlFor:this.switchId,class:{switch:true,"switch--checked":this.checked,"switch--disabled":this.disabled,"switch--focused":this.hasFocus},onMouseDown:this.handleMouseDown},s("span",{part:"control",class:"switch__control"},s("span",{part:"thumb",class:"switch__thumb"}),s("input",{ref:t=>this.input=t,id:this.switchId,type:"checkbox",name:this.name,value:this.value,checked:this.checked,disabled:this.disabled,required:this.required,role:"switch","aria-checked":this.checked?"true":"false","aria-labelledby":this.labelId,onClick:this.handleClick,onBlur:this.handleBlur,onFocus:this.handleFocus,onKeyDown:this.handleKeyDown})),s("span",{part:"label",id:this.labelId,class:"switch__label"},s("slot",null)))}static get watchers(){return{checked:["handleCheckedChange"]}}};h.style=o;export{h as six_switch};
-//# sourceMappingURL=p-90824648.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["sixSwitchCss","id","SixSwitch","this","switchId","labelId","defaultValue","handleCheckedChange","input","checked","sixChange","emit","connectedCallback","handleClick","bind","handleBlur","handleFocus","handleKeyDown","handleMouseDown","componentWillLoad","value","async","options","focus","blur","reportValidity","validity","valid","message","setCustomValidity","invalid","checkValidity","hasFocus","sixBlur","sixFocus","event","key","preventDefault","render","h","part","htmlFor","class","switch","disabled","onMouseDown","ref","el","type","name","required","role","onClick","onBlur","onFocus","onKeyDown"],"sources":["./src/components/six-switch/six-switch.scss?tag=six-switch&encapsulation=shadow","./src/components/six-switch/six-switch.tsx"],"sourcesContent":["@import 'src/global/component';\n\n/**\n * @prop --width: The width of the switch.\n * @prop --height: The height of the switch.\n * @prop --thumb-size: The size of the thumb.\n */\n:host {\n  --height: var(--six-selection-control-toggle-size);\n  --thumb-size: calc(var(--six-selection-control-toggle-size) - 4px);\n  --width: calc(var(--height) * 2);\n\n  display: inline-block;\n}\n\n.switch {\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.switch__control {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--width);\n  height: var(--height);\n  background-color: var(--six-selection-control-color-disabled);\n  border-radius: var(--height);\n  transition: var(--six-transition-fast) border-color, var(--six-transition-fast) background-color;\n\n  .switch__thumb {\n    width: var(--thumb-size);\n    height: var(--thumb-size);\n    background-color: var(--six-input-background-color);\n    border-radius: 50%;\n    transform: translateX(calc(var(--width) / -2 + var(--thumb-size) / 2 - (var(--thumb-size) - var(--height)) / 2));\n    transition: var(--six-transition-fast) transform ease, var(--six-transition-fast) background-color,\n      var(--six-transition-fast) border-color, var(--six-transition-fast) box-shadow;\n  }\n\n  input[type='checkbox'] {\n    position: absolute;\n    opacity: 0;\n    padding: 0;\n    margin: 0;\n    pointer-events: none;\n  }\n}\n\n// Hover\n.switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover {\n  background-color: var(--six-input-border-color-hover);\n}\n\n// Checked\n.switch--checked .switch__control {\n  background-color: var(--six-selection-control-color);\n\n  .switch__thumb {\n    background-color: var(--six-color-white);\n    transform: translateX(calc(var(--width) / 2 - var(--thumb-size) / 2 + (var(--thumb-size) - var(--height)) / 2));\n  }\n}\n\n// Checked + hover\n.switch.switch--checked:not(.switch--disabled) .switch__control:hover {\n  background-color: var(--six-input-border-color-focus);\n}\n\n// Disabled\n.switch--disabled {\n  cursor: not-allowed;\n  color: var(--six-selection-control-color-disabled);\n\n  .switch__control {\n    background-color: var(--six-selection-control-color-disabled);\n  }\n\n  &.switch--checked .switch__control {\n    background-color: var(--six-selection-control-color-disabled);\n  }\n}\n\n.switch__label {\n  line-height: var(--height);\n  margin-left: 0.5em;\n  user-select: none;\n}\n","import { Component, Event, EventEmitter, h, Method, Prop, State, Watch } 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 switch's label.\n *\n * @part base - The component's base wrapper.\n * @part control - The switch control.\n * @part thumb - The switch position indicator.\n * @part label - The switch label.\n */\n\n@Component({\n  tag: 'six-switch',\n  styleUrl: 'six-switch.scss',\n  shadow: true,\n})\nexport class SixSwitch {\n  switchId = `switch-${++id}`;\n  labelId = `switch-label-${id}`;\n  input: HTMLInputElement;\n\n  @State() hasFocus = false;\n\n  /** The switch's name attribute. */\n  @Prop() name: string;\n\n  /** The switch's value attribute. */\n  @Prop() value: string;\n\n  /** Set to true to disable the switch. */\n  @Prop() disabled = false;\n\n  /** Set to true to make the switch a required field. */\n  @Prop() required = false;\n\n  /** Set to true to draw the switch in a checked state. */\n  @Prop({ mutable: true, reflect: true }) checked = 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  @Watch('checked')\n  handleCheckedChange() {\n    this.input.checked = this.checked;\n    this.sixChange.emit(this.checked);\n  }\n\n  /** Emitted when the control loses focus. */\n  @Event({ eventName: 'six-switch-blur' }) sixBlur: EventEmitter<boolean>;\n\n  /** Emitted when the control's checked state changes. */\n  @Event({ eventName: 'six-switch-change' }) sixChange: EventEmitter<boolean>;\n\n  /** Emitted when the control gains focus. */\n  @Event({ eventName: 'six-switch-focus' }) sixFocus: EventEmitter<EmptyPayload>;\n\n  /** default value the switch will be reverted to when reset is executed */\n  private defaultValue = '';\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.defaultValue = this.value;\n  }\n\n  /** Sets focus on the switch. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /** Removes focus from the switch. */\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.value = this.defaultValue;\n    this.input.setCustomValidity('');\n    this.invalid = false;\n  }\n\n  handleClick() {\n    this.checked = this.input.checked;\n  }\n\n  handleBlur() {\n    this.hasFocus = false;\n    this.sixBlur.emit(this.checked);\n  }\n\n  handleFocus() {\n    this.hasFocus = true;\n    this.sixFocus.emit();\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'ArrowLeft') {\n      event.preventDefault();\n      this.checked = false;\n    }\n\n    if (event.key === 'ArrowRight') {\n      event.preventDefault();\n      this.checked = true;\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        htmlFor={this.switchId}\n        class={{\n          switch: true,\n          'switch--checked': this.checked,\n          'switch--disabled': this.disabled,\n          'switch--focused': this.hasFocus,\n        }}\n        onMouseDown={this.handleMouseDown}\n      >\n        <span part=\"control\" class=\"switch__control\">\n          <span part=\"thumb\" class=\"switch__thumb\" />\n\n          <input\n            ref={(el) => (this.input = el)}\n            id={this.switchId}\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=\"switch\"\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            onKeyDown={this.handleKeyDown}\n          />\n        </span>\n\n        <span part=\"label\" id={this.labelId} class=\"switch__label\">\n          <slot />\n        </span>\n      </label>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAe,ivECGrB,IAAIC,EAAK,E,MAqBIC,EAAS,M,0JACpBC,KAAAC,SAAW,YAAYH,IACvBE,KAAAE,QAAU,gBAAgBJ,IAuClBE,KAAAG,aAAe,G,cApCH,M,uDASD,M,cAGA,M,aAG+B,M,aAGA,K,CAGlDC,sBACEJ,KAAKK,MAAMC,QAAUN,KAAKM,QAC1BN,KAAKO,UAAUC,KAAKR,KAAKM,Q,CAe3BG,oBACET,KAAKU,YAAcV,KAAKU,YAAYC,KAAKX,MACzCA,KAAKY,WAAaZ,KAAKY,WAAWD,KAAKX,MACvCA,KAAKa,YAAcb,KAAKa,YAAYF,KAAKX,MACzCA,KAAKc,cAAgBd,KAAKc,cAAcH,KAAKX,MAC7CA,KAAKe,gBAAkBf,KAAKe,gBAAgBJ,KAAKX,K,CAGnDgB,oBACEhB,KAAKG,aAAeH,KAAKiB,K,CAK3BC,eAAeC,GACbnB,KAAKK,MAAMe,MAAMD,E,CAKnBD,oBACElB,KAAKK,MAAMgB,M,CAKbH,uBACE,OAAOlB,KAAKK,MAAMiB,gB,CAKpBJ,sBACE,OAAOlB,KAAKK,MAAMkB,SAASC,K,CAK7BN,wBAAwBO,GACtBzB,KAAKK,MAAMqB,kBAAkBD,GAC7BzB,KAAK2B,SAAW3B,KAAKK,MAAMuB,e,CAK7BV,cACElB,KAAKiB,MAAQjB,KAAKG,aAClBH,KAAKK,MAAMqB,kBAAkB,IAC7B1B,KAAK2B,QAAU,K,CAGjBjB,cACEV,KAAKM,QAAUN,KAAKK,MAAMC,O,CAG5BM,aACEZ,KAAK6B,SAAW,MAChB7B,KAAK8B,QAAQtB,KAAKR,KAAKM,Q,CAGzBO,cACEb,KAAK6B,SAAW,KAChB7B,KAAK+B,SAASvB,M,CAGhBM,cAAckB,GACZ,GAAIA,EAAMC,MAAQ,YAAa,CAC7BD,EAAME,iBACNlC,KAAKM,QAAU,K,CAGjB,GAAI0B,EAAMC,MAAQ,aAAc,CAC9BD,EAAME,iBACNlC,KAAKM,QAAU,I,EAInBS,gBAAgBiB,GAEdA,EAAME,iBACNlC,KAAKK,MAAMe,O,CAGbe,SACE,OACEC,EAAA,SACEC,KAAK,OACLC,QAAStC,KAAKC,SACdsC,MAAO,CACLC,OAAQ,KACR,kBAAmBxC,KAAKM,QACxB,mBAAoBN,KAAKyC,SACzB,kBAAmBzC,KAAK6B,UAE1Ba,YAAa1C,KAAKe,iBAElBqB,EAAA,QAAMC,KAAK,UAAUE,MAAM,mBACzBH,EAAA,QAAMC,KAAK,QAAQE,MAAM,kBAEzBH,EAAA,SACEO,IAAMC,GAAQ5C,KAAKK,MAAQuC,EAC3B9C,GAAIE,KAAKC,SACT4C,KAAK,WACLC,KAAM9C,KAAK8C,KACX7B,MAAOjB,KAAKiB,MACZX,QAASN,KAAKM,QACdmC,SAAUzC,KAAKyC,SACfM,SAAU/C,KAAK+C,SACfC,KAAK,SAAQ,eACChD,KAAKM,QAAU,OAAS,QAAO,kBAC5BN,KAAKE,QACtB+C,QAASjD,KAAKU,YACdwC,OAAQlD,KAAKY,WACbuC,QAASnD,KAAKa,YACduC,UAAWpD,KAAKc,iBAIpBsB,EAAA,QAAMC,KAAK,QAAQvC,GAAIE,KAAKE,QAASqC,MAAM,iBACzCH,EAAA,c"}

package/dist/ui-library/p-9328e5bc.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["sixAvatarCss","SixAvatar","connectedCallback","this","handleImageError","bind","hasError","render","h","part","class","avatar","shape","role","alt","tabIndex","initials","name","image","src","onError"],"sources":["./src/components/six-avatar/six-avatar.scss?tag=six-avatar&encapsulation=shadow","./src/components/six-avatar/six-avatar.tsx"],"sourcesContent":["@import 'src/global/component';\n\n/**\n * @prop --size: The size of the avatar.\n */\n:host {\n  display: inline-block;\n\n  --size: 2rem;\n}\n\n.avatar {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  width: var(--size);\n  height: var(--size);\n  background-color: var(--six-avatar-background-color);\n  font-family: var(--six-font-sans);\n  font-size: calc(var(--size) * 0.5);\n  font-weight: var(--six-font-weight-normal);\n  color: var(--six-avatar-color);\n  overflow: hidden;\n  user-select: none;\n  vertical-align: middle;\n  cursor: pointer;\n  outline: none;\n\n  &:hover {\n    box-shadow: var(--six-elevation-4dp);\n  }\n}\n\n.avatar--circle {\n  border-radius: var(--six-border-radius-circle);\n}\n\n.avatar--rounded {\n  border-radius: var(--six-border-radius-medium);\n}\n\n.avatar--square {\n  border-radius: 0;\n}\n\n.avatar__icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n}\n\n.avatar__initials {\n  line-height: 1;\n  text-transform: uppercase;\n}\n\n.avatar__image {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n","import { Component, h, Prop, State } from '@stencil/core';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot icon - The default icon to use when no image or initials are present.\n *\n * @part base - The component's base wrapper.\n * @part icon - The container that wraps the avatar icon.\n * @part initials - The container that wraps the avatar initials.\n * @part image - The avatar image.\n */\n@Component({\n  tag: 'six-avatar',\n  styleUrl: 'six-avatar.scss',\n  shadow: true,\n})\nexport class SixAvatar {\n  @State() hasError = false;\n\n  /** The image source to use for the avatar. */\n  @Prop() image = '';\n\n  /** Alternative text for the image. */\n  @Prop() alt = '';\n\n  /** Initials to use as a fallback when no image is available (1-2 characters max recommended). */\n  @Prop() initials = '';\n\n  /** The shape of the avatar. */\n  @Prop() shape: 'circle' | 'square' | 'rounded' = 'circle';\n\n  connectedCallback() {\n    this.handleImageError = this.handleImageError.bind(this);\n  }\n\n  handleImageError() {\n    this.hasError = true;\n  }\n\n  render() {\n    return (\n      <div\n        part=\"base\"\n        class={{\n          avatar: true,\n          'avatar--circle': this.shape === 'circle',\n          'avatar--rounded': this.shape === 'rounded',\n          'avatar--square': this.shape === 'square',\n        }}\n        role=\"image\"\n        aria-label={this.alt}\n        tabIndex={0}\n      >\n        {!this.initials && (\n          <div part=\"icon\" class=\"avatar__icon\">\n            <slot name=\"icon\">\n              <six-icon>person</six-icon>\n            </slot>\n          </div>\n        )}\n\n        {this.initials && (\n          <div part=\"initials\" class=\"avatar__initials\">\n            {this.initials}\n          </div>\n        )}\n\n        {this.image && !this.hasError && (\n          <img part=\"image\" class=\"avatar__image\" src={this.image} onError={this.handleImageError} />\n        )}\n      </div>\n    );\n  }\n}\n"],"mappings":"2CAAA,MAAMA,EAAe,w/B,MCoBRC,EAAS,M,uCACA,M,WAGJ,G,SAGF,G,cAGK,G,WAG8B,Q,CAEjDC,oBACEC,KAAKC,iBAAmBD,KAAKC,iBAAiBC,KAAKF,K,CAGrDC,mBACED,KAAKG,SAAW,I,CAGlBC,SACE,OACEC,EAAA,OACEC,KAAK,OACLC,MAAO,CACLC,OAAQ,KACR,iBAAkBR,KAAKS,QAAU,SACjC,kBAAmBT,KAAKS,QAAU,UAClC,iBAAkBT,KAAKS,QAAU,UAEnCC,KAAK,QAAO,aACAV,KAAKW,IACjBC,SAAU,IAERZ,KAAKa,UACLR,EAAA,OAAKC,KAAK,OAAOC,MAAM,gBACrBF,EAAA,QAAMS,KAAK,QACTT,EAAA,4BAKLL,KAAKa,UACJR,EAAA,OAAKC,KAAK,WAAWC,MAAM,oBACxBP,KAAKa,UAITb,KAAKe,QAAUf,KAAKG,UACnBE,EAAA,OAAKC,KAAK,QAAQC,MAAM,gBAAgBS,IAAKhB,KAAKe,MAAOE,QAASjB,KAAKC,mB"}

package/dist/ui-library/p-97cc839c.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["sixCheckboxCss","id","SixCheckbox","this","inputId","labelId","textId","errorTextId","customErrorText","customValidation","eventListeners","EventListeners","defaultState","handleChange","nativeInput","checked","indeterminate","handleBlur","hasFocus","sixBlur","emit","handleFocus","sixFocus","handleMouseDown","event","preventDefault","_a","focus","handleCheckedChange","invalid","checkValidity","sixChange","handleLabelChange","handleSlotChange","connectedCallback","host","shadowRoot","addEventListener","disconnectedCallback","removeEventListener","removeAll","componentWillLoad","componentDidLoad","add","hasErrorTextSlot","errorText","validationMessage","async","options","blur","reportValidity","validity","valid","message","setCustomValidity","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"],"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, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot label - The 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  private inputId = `checkbox-${++id}`;\n  private labelId = `checkbox-label-${id}`;\n  private textId = `checkbox-text-${id}`;\n  private errorTextId = `input-error-text-${id}`;\n  private nativeInput?: HTMLInputElement;\n  private customErrorText = '';\n  private customValidation = false;\n  private eventListeners = new EventListeners();\n\n  @Element() host!: HTMLSixCheckboxElement;\n\n  @State() hasFocus = false;\n  @State() hasLabelSlot = false;\n  @State() hasErrorTextSlot = false;\n\n  /** The checkbox's name attribute. */\n  @Prop() name = '';\n\n  /**\n   * The value of the checkbox does not mean if it's checked or not, use the `checked`\n   * property for that.\n   *\n   * The value of a checkbox is analogous to the value of an `<input type=\"checkbox\">`,\n   * it's only used when the checkbox participates in a native `<form>`.\n   */\n  @Prop() value = 'on';\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.nativeInput == null) {\n      return;\n    }\n    this.nativeInput.checked = this.checked;\n    this.nativeInput.indeterminate = this.indeterminate;\n    this.invalid = !this.nativeInput.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.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    const nativeInput = this.nativeInput;\n    if (nativeInput == null) {\n      return;\n    }\n\n    nativeInput.indeterminate = this.indeterminate;\n    this.eventListeners.add(nativeInput, 'invalid', (event) => {\n      this.invalid = true;\n      if (this.customValidation || (!this.hasErrorTextSlot && this.errorText === '' && this.customErrorText === '')) {\n        this.customErrorText = nativeInput.validationMessage;\n      }\n      event.preventDefault();\n    });\n  }\n\n  /** Sets focus on the checkbox. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.nativeInput?.focus(options);\n  }\n\n  /** Removes focus from the checkbox. */\n  @Method()\n  async removeFocus() {\n    this.nativeInput?.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.nativeInput?.reportValidity();\n  }\n\n  /** Checks for validity. */\n  @Method()\n  async checkValidity() {\n    if (this.nativeInput == null) {\n      return true;\n    }\n    return this.nativeInput.validity.valid;\n  }\n\n  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */\n  @Method()\n  async setCustomValidity(message: string) {\n    this.customErrorText = '';\n    this.customValidation = message !== '';\n    if (this.nativeInput != null) {\n      this.nativeInput.setCustomValidity(message);\n      this.invalid = !this.nativeInput.checkValidity();\n    }\n  }\n\n  /** Resets the formcontrol */\n  @Method()\n  async reset() {\n    this.checked = this.defaultState;\n    this.customErrorText = '';\n    this.customValidation = false;\n    this.nativeInput?.setCustomValidity('');\n    this.invalid = false;\n  }\n\n  private handleChange = () => {\n    if (this.nativeInput != null) {\n      this.checked = this.nativeInput.checked;\n      this.indeterminate = false;\n    }\n  };\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.sixBlur.emit();\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.sixFocus.emit();\n  };\n\n  private handleMouseDown = (event: MouseEvent) => {\n    // Prevent clicks on the label from briefly blurring the input\n    event.preventDefault();\n    this.nativeInput?.focus();\n  };\n\n  private handleSlotChange() {\n    this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n  }\n\n  private displayError() {\n    return this.invalid && (!this.errorOnBlur || !this.hasFocus);\n  }\n\n  render() {\n    return (\n      <FormControl\n        inputId={this.inputId}\n        label={this.label}\n        labelId={this.labelId}\n        hasLabelSlot={this.hasLabelSlot}\n        errorTextId={this.errorTextId}\n        errorText={this.customErrorText != null ? 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.nativeInput = 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            />\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-9a860acc.js

@@ -1,2 +0,0 @@
-const t=t=>e=>Object.keys(t).every((s=>t[s]===e[s]));class e{constructor(){this.eventListeners=[];this.add=(t,e,s,i=null)=>{this.eventListeners.push({el:t,name:e,listener:s,identifier:i});t.addEventListener(e,s)};this.remove=(e,s,i)=>{const n=t({el:e,name:s,listener:i});this.eventListeners=this.getFilteredEventListeners(n)};this.removeByIdentifier=t=>{const e=e=>e.identifier===t;const s=this.eventListeners.find(e)!==undefined;if(!s){return}this.eventListeners=this.getFilteredEventListeners(e)};this.removeAll=()=>{while(this.eventListeners.length){const{el:t,name:e,listener:s}=this.eventListeners.pop();t.removeEventListener(e,s)}}}getFilteredEventListeners(t){return this.eventListeners.filter((e=>{if(t(e)){e.el.removeEventListener(e.name,e.listener);return false}else{return true}}))}}export{e as E};
-//# sourceMappingURL=p-9a860acc.js.map

package/dist/ui-library/p-9a860acc.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["equals","a","b","Object","keys","every","key","EventListeners","constructor","this","eventListeners","add","el","name","listener","identifier","push","addEventListener","remove","sameItem","getFilteredEventListeners","removeByIdentifier","foundListener","find","undefined","removeAll","length","pop","removeEventListener","filter","item"],"sources":["./src/utils/event-listeners.ts"],"sourcesContent":["interface EventListener {\n  el: DocumentAndElementEventHandlers;\n  name: string;\n  listener: EventListenerOrEventListenerObject;\n  identifier?: string | null;\n}\n\nconst equals =\n  <A extends Object>(a: A) =>\n  <B extends Object>(b: B) =>\n    Object.keys(a).every((key) => a[key] === b[key]);\n\nexport class EventListeners {\n  eventListeners: EventListener[] = [];\n\n  add = <T extends DocumentAndElementEventHandlers>(\n    el: T,\n    name: string,\n    listener: EventListenerOrEventListenerObject,\n    identifier = null\n  ) => {\n    this.eventListeners.push({ el, name, listener, identifier });\n    el.addEventListener(name, listener);\n  };\n\n  remove = <T extends DocumentAndElementEventHandlers>(\n    el: T,\n    name: string,\n    listener: EventListenerOrEventListenerObject\n  ) => {\n    const sameItem = equals({ el, name, listener });\n    this.eventListeners = this.getFilteredEventListeners(sameItem);\n  };\n\n  removeByIdentifier = (identifier: string) => {\n    const sameItem = (el) => el.identifier === identifier;\n    const foundListener = this.eventListeners.find(sameItem) !== undefined;\n\n    if (!foundListener) {\n      return;\n    }\n\n    this.eventListeners = this.getFilteredEventListeners(sameItem);\n  };\n\n  private getFilteredEventListeners(sameItem: (el) => boolean) {\n    return this.eventListeners.filter((item) => {\n      if (sameItem(item)) {\n        item.el.removeEventListener(item.name, item.listener);\n        return false;\n      } else {\n        return true;\n      }\n    });\n  }\n\n  removeAll = () => {\n    while (this.eventListeners.length) {\n      const { el, name, listener } = this.eventListeners.pop();\n      el.removeEventListener(name, listener);\n    }\n  };\n}\n"],"mappings":"AAOA,MAAMA,EACeC,GACAC,GACjBC,OAAOC,KAAKH,GAAGI,OAAOC,GAAQL,EAAEK,KAASJ,EAAEI,K,MAElCC,EAAbC,cACEC,KAAAC,eAAkC,GAElCD,KAAAE,IAAM,CACJC,EACAC,EACAC,EACAC,EAAa,QAEbN,KAAKC,eAAeM,KAAK,CAAEJ,KAAIC,OAAMC,WAAUC,eAC/CH,EAAGK,iBAAiBJ,EAAMC,EAAS,EAGrCL,KAAAS,OAAS,CACPN,EACAC,EACAC,KAEA,MAAMK,EAAWnB,EAAO,CAAEY,KAAIC,OAAMC,aACpCL,KAAKC,eAAiBD,KAAKW,0BAA0BD,EAAS,EAGhEV,KAAAY,mBAAsBN,IACpB,MAAMI,EAAYP,GAAOA,EAAGG,aAAeA,EAC3C,MAAMO,EAAgBb,KAAKC,eAAea,KAAKJ,KAAcK,UAE7D,IAAKF,EAAe,CAClB,M,CAGFb,KAAKC,eAAiBD,KAAKW,0BAA0BD,EAAS,EAchEV,KAAAgB,UAAY,KACV,MAAOhB,KAAKC,eAAegB,OAAQ,CACjC,MAAMd,GAAEA,EAAEC,KAAEA,EAAIC,SAAEA,GAAaL,KAAKC,eAAeiB,MACnDf,EAAGgB,oBAAoBf,EAAMC,E,GAdzBM,0BAA0BD,GAChC,OAAOV,KAAKC,eAAemB,QAAQC,IACjC,GAAIX,EAASW,GAAO,CAClBA,EAAKlB,GAAGgB,oBAAoBE,EAAKjB,KAAMiB,EAAKhB,UAC5C,OAAO,K,KACF,CACL,OAAO,I"}

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

@@ -1,2 +0,0 @@
-import{r as t,c as i,h as s,g as e}from"./p-ac4f4d45.js";const r=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:contents;margin:0}.alert{position:relative;display:flex;align-items:stretch;background-color:var(--six-color-white);border:solid 1px var(--six-color-web-rock-200);border-top-width:3px;border-radius:var(--six-border-radius-medium);box-shadow:var(--box-shadow);font-family:var(--six-font-sans);font-size:var(--six-font-size-small);font-weight:var(--six-font-weight-normal);line-height:1.6;color:var(--six-color-web-rock-700);opacity:0;transform:scale(0.9);transition:var(--six-transition-medium) opacity ease, var(--six-transition-medium) transform ease;margin:inherit}.alert:not(.alert--visible){position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.alert--open{opacity:1;transform:none}.alert__icon{flex:0 0 auto;display:flex;align-items:center;font-size:var(--six-font-size-large)}.alert__icon ::slotted(*){margin-left:var(--six-spacing-large)}.alert--primary{border-top-color:var(--six-color-web-rock-900)}.alert--primary .alert__icon{color:var(--six-color-web-rock-900)}.alert--success{border-top-color:var(--six-color-success-600)}.alert--success .alert__icon{color:var(--six-color-success-600)}.alert--info{border-top-color:var(--six-color-action-500)}.alert--info .alert__icon{color:var(--six-color-action-500)}.alert--warning{border-top-color:var(--six-color-warning-800)}.alert--warning .alert__icon{color:var(--six-color-warning-800)}.alert--danger{border-top-color:var(--six-color-danger-900)}.alert--danger .alert__icon{color:var(--six-color-danger-900)}.alert__message{flex:1 1 auto;padding:var(--six-spacing-large);overflow:hidden}.alert__close{flex:0 0 auto;display:flex;align-items:center;font-size:var(--six-font-size-large);padding-right:var(--six-spacing-medium)}";const a=Object.assign(document.createElement("div"),{className:"six-toast-stack"});const o=class{constructor(s){t(this,s);this.sixShow=i(this,"six-alert-show",7);this.sixAfterShow=i(this,"six-alert-after-show",7);this.sixHide=i(this,"six-alert-hide",7);this.sixAfterHide=i(this,"six-alert-after-hide",7);this.isVisible=false;this.open=false;this.closable=false;this.type="primary";this.duration=Infinity}handleOpenChange(){this.open?this.show():this.hide()}handleDurationChange(){this.restartAutoHide()}connectedCallback(){this.handleCloseClick=this.handleCloseClick.bind(this);this.handleMouseMove=this.handleMouseMove.bind(this);this.handleTransitionEnd=this.handleTransitionEnd.bind(this)}componentWillLoad(){if(this.open){this.show()}}async show(){if(this.isVisible){return}const t=this.sixShow.emit();if(t.defaultPrevented){this.open=false;return}this.isVisible=true;this.open=true;if(this.duration<Infinity){this.autoHideTimeout=setTimeout((()=>this.hide()),this.duration)}}async hide(){if(!this.isVisible){return}const t=this.sixHide.emit();if(t.defaultPrevented){this.open=true;return}clearTimeout(this.autoHideTimeout);this.isVisible=false;this.open=false}async toast(){return new Promise((t=>{if(!a.parentElement){document.body.append(a)}a.append(this.host);requestAnimationFrame((()=>this.show()));this.host.addEventListener("six-alert-after-hide",(()=>{this.host.remove();t();if(a.querySelector("six-alert")===null){a.remove()}}),{once:true})}))}handleCloseClick(){this.hide()}handleMouseMove(){this.restartAutoHide()}handleTransitionEnd(t){const i=t.target;if(t.propertyName==="opacity"&&i.classList.contains("alert")){this.isVisible=this.open;this.open?this.sixAfterShow.emit():this.sixAfterHide.emit()}}restartAutoHide(){clearTimeout(this.autoHideTimeout);if(this.open&&this.duration<Infinity){this.autoHideTimeout=setTimeout((()=>this.hide()),this.duration)}}render(){return s("div",{ref:t=>this.alert=t,part:"base",class:{alert:true,"alert--open":this.open,"alert--visible":this.isVisible,"alert--closable":this.closable,"alert--primary":this.type==="primary","alert--success":this.type==="success","alert--info":this.type==="info","alert--warning":this.type==="warning","alert--danger":this.type==="danger"},role:"alert","aria-live":"assertive","aria-atomic":"true","aria-hidden":this.open?"false":"true",onMouseMove:this.handleMouseMove,onTransitionEnd:this.handleTransitionEnd},s("span",{part:"icon",class:"alert__icon"},s("slot",{name:"icon"})),s("span",{part:"message",class:"alert__message"},s("slot",null)),this.closable&&s("span",{class:"alert__close"},s("six-icon-button",{name:"clear",exportparts:"base:close-button",onClick:this.handleCloseClick})))}get host(){return e(this)}static get watchers(){return{open:["handleOpenChange"],duration:["handleDurationChange"]}}};o.style=r;export{o as six_alert};
-//# sourceMappingURL=p-9d1d222f.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["sixAlertCss","toastStack","Object","assign","document","createElement","className","SixAlert","Infinity","handleOpenChange","this","open","show","hide","handleDurationChange","restartAutoHide","connectedCallback","handleCloseClick","bind","handleMouseMove","handleTransitionEnd","componentWillLoad","async","isVisible","sixShow","emit","defaultPrevented","duration","autoHideTimeout","setTimeout","sixHide","clearTimeout","Promise","resolve","parentElement","body","append","host","requestAnimationFrame","addEventListener","remove","querySelector","once","event","target","propertyName","classList","contains","sixAfterShow","sixAfterHide","render","h","ref","el","alert","part","class","closable","type","role","onMouseMove","onTransitionEnd","name","exportparts","onClick"],"sources":["./src/components/six-alert/six-alert.scss?tag=six-alert&encapsulation=shadow","./src/components/six-alert/six-alert.tsx"],"sourcesContent":["@import 'src/global/component';\n@import 'src/global/mixins/hidden';\n\n/**\n * @prop --box-shadow: The alert's box shadow.\n */\n:host {\n  display: contents;\n\n  // For better DX, we'll reset the margin here so the base part can inherit it\n  margin: 0;\n}\n\n.alert {\n  position: relative;\n  display: flex;\n  align-items: stretch;\n  background-color: var(--six-color-white);\n  border: solid 1px var(--six-color-web-rock-200);\n  border-top-width: 3px;\n  border-radius: var(--six-border-radius-medium);\n  box-shadow: var(--box-shadow);\n  font-family: var(--six-font-sans);\n  font-size: var(--six-font-size-small);\n  font-weight: var(--six-font-weight-normal);\n  line-height: 1.6;\n  color: var(--six-color-web-rock-700);\n  opacity: 0;\n  transform: scale(0.9);\n  transition: var(--six-transition-medium) opacity ease, var(--six-transition-medium) transform ease;\n  margin: inherit;\n\n  &:not(.alert--visible) {\n    @include hidden;\n  }\n}\n\n.alert--open {\n  opacity: 1;\n  transform: none;\n}\n\n.alert__icon {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: var(--six-font-size-large);\n\n  ::slotted(*) {\n    margin-left: var(--six-spacing-large);\n  }\n}\n\n.alert--primary {\n  border-top-color: var(--six-color-web-rock-900);\n\n  .alert__icon {\n    color: var(--six-color-web-rock-900);\n  }\n}\n\n.alert--success {\n  border-top-color: var(--six-color-success-600);\n\n  .alert__icon {\n    color: var(--six-color-success-600);\n  }\n}\n\n.alert--info {\n  border-top-color: var(--six-color-action-500);\n\n  .alert__icon {\n    color: var(--six-color-action-500);\n  }\n}\n\n.alert--warning {\n  border-top-color: var(--six-color-warning-800);\n\n  .alert__icon {\n    color: var(--six-color-warning-800);\n  }\n}\n\n.alert--danger {\n  border-top-color: var(--six-color-danger-900);\n\n  .alert__icon {\n    color: var(--six-color-danger-900);\n  }\n}\n\n.alert__message {\n  flex: 1 1 auto;\n  padding: var(--six-spacing-large);\n  overflow: hidden;\n}\n\n.alert__close {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: var(--six-font-size-large);\n  padding-right: var(--six-spacing-medium);\n}\n","import { Component, Element, Event, EventEmitter, Method, Prop, State, Watch, h } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\n\nconst toastStack = Object.assign(document.createElement('div'), { className: 'six-toast-stack' });\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 alert's content.\n * @slot icon - An icon to show in the alert.\n *\n * @part base - The component's base wrapper.\n * @part icon - The container that wraps the alert icon.\n * @part message - The alert message.\n * @part close-button - The close button.\n */\n\n@Component({\n  tag: 'six-alert',\n  styleUrl: 'six-alert.scss',\n  shadow: true,\n})\nexport class SixAlert {\n  alert: HTMLElement;\n  autoHideTimeout: any;\n\n  @Element() host: HTMLSixAlertElement;\n\n  @State() isVisible = false;\n\n  /** Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** Set to true to make the alert closable. */\n  @Prop({ reflect: true }) closable = false;\n\n  /** The type of alert. */\n  @Prop({ reflect: true }) type: 'primary' | 'success' | 'info' | 'warning' | 'danger' = 'primary';\n\n  /**\n   * The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with the\n   * alert before it closes (e.g. moves the mouse over it), the timer will restart.\n   */\n  @Prop() duration = Infinity;\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  @Watch('duration')\n  handleDurationChange() {\n    this.restartAutoHide();\n  }\n\n  /** Emitted when the alert opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event({ eventName: 'six-alert-show' }) sixShow: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the alert opens and all transitions are complete. */\n  @Event({ eventName: 'six-alert-after-show' }) sixAfterShow: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the alert closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event({ eventName: 'six-alert-hide' }) sixHide: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the alert closes and all transitions are complete. */\n  @Event({ eventName: 'six-alert-after-hide' }) sixAfterHide: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    this.handleCloseClick = this.handleCloseClick.bind(this);\n    this.handleMouseMove = this.handleMouseMove.bind(this);\n    this.handleTransitionEnd = this.handleTransitionEnd.bind(this);\n  }\n\n  componentWillLoad() {\n    // Show on init if open\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  /** Shows the alert. */\n  @Method()\n  async show() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (this.isVisible) {\n      return;\n    }\n\n    const sixShow = this.sixShow.emit();\n    if (sixShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.isVisible = true;\n    this.open = true;\n\n    if (this.duration < Infinity) {\n      this.autoHideTimeout = setTimeout(() => this.hide(), this.duration);\n    }\n  }\n\n  /** Hides the alert */\n  @Method()\n  async hide() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (!this.isVisible) {\n      return;\n    }\n\n    const sixHide = this.sixHide.emit();\n    if (sixHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    clearTimeout(this.autoHideTimeout);\n    this.isVisible = false;\n    this.open = false;\n  }\n\n  /**\n   * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\n   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\n   * calling this method again. The returned promise will resolve after the alert is hidden.\n   */\n  @Method()\n  async toast() {\n    return new Promise<void>((resolve) => {\n      if (!toastStack.parentElement) {\n        document.body.append(toastStack);\n      }\n\n      toastStack.append(this.host);\n      requestAnimationFrame(() => this.show());\n\n      this.host.addEventListener(\n        'six-alert-after-hide',\n        () => {\n          this.host.remove();\n          resolve();\n\n          // Remove the toast stack from the DOM when there are no more alerts\n          if (toastStack.querySelector('six-alert') === null) {\n            toastStack.remove();\n          }\n        },\n        { once: true }\n      );\n    });\n  }\n\n  handleCloseClick() {\n    this.hide();\n  }\n\n  handleMouseMove() {\n    this.restartAutoHide();\n  }\n\n  handleTransitionEnd(event: TransitionEvent) {\n    const target = event.target as HTMLElement;\n\n    // Ensure we only emit one event when the target element is no longer visible\n    if (event.propertyName === 'opacity' && target.classList.contains('alert')) {\n      this.isVisible = this.open;\n      this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n    }\n  }\n\n  restartAutoHide() {\n    clearTimeout(this.autoHideTimeout);\n    if (this.open && this.duration < Infinity) {\n      this.autoHideTimeout = setTimeout(() => this.hide(), this.duration);\n    }\n  }\n\n  render() {\n    return (\n      <div\n        ref={(el) => (this.alert = el)}\n        part=\"base\"\n        class={{\n          alert: true,\n          'alert--open': this.open,\n          'alert--visible': this.isVisible,\n          'alert--closable': this.closable,\n          'alert--primary': this.type === 'primary',\n          'alert--success': this.type === 'success',\n          'alert--info': this.type === 'info',\n          'alert--warning': this.type === 'warning',\n          'alert--danger': this.type === 'danger',\n        }}\n        role=\"alert\"\n        aria-live=\"assertive\"\n        aria-atomic=\"true\"\n        aria-hidden={this.open ? 'false' : 'true'}\n        onMouseMove={this.handleMouseMove}\n        onTransitionEnd={this.handleTransitionEnd}\n      >\n        <span part=\"icon\" class=\"alert__icon\">\n          <slot name=\"icon\" />\n        </span>\n\n        <span part=\"message\" class=\"alert__message\">\n          <slot />\n        </span>\n\n        {this.closable && (\n          <span class=\"alert__close\">\n            <six-icon-button\n              name=\"clear\"\n              exportparts=\"base:close-button\"\n              onClick={this.handleCloseClick}\n            ></six-icon-button>\n          </span>\n        )}\n      </div>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAc,w1DCGpB,MAAMC,EAAaC,OAAOC,OAAOC,SAASC,cAAc,OAAQ,CAAEC,UAAW,oB,MAsBhEC,EAAQ,M,8NAME,M,UAG0B,M,cAGX,M,UAGmD,U,cAMpEC,Q,CAGnBC,mBACEC,KAAKC,KAAOD,KAAKE,OAASF,KAAKG,M,CAIjCC,uBACEJ,KAAKK,iB,CAePC,oBACEN,KAAKO,iBAAmBP,KAAKO,iBAAiBC,KAAKR,MACnDA,KAAKS,gBAAkBT,KAAKS,gBAAgBD,KAAKR,MACjDA,KAAKU,oBAAsBV,KAAKU,oBAAoBF,KAAKR,K,CAG3DW,oBAEE,GAAIX,KAAKC,KAAM,CACbD,KAAKE,M,EAMTU,aAEE,GAAIZ,KAAKa,UAAW,CAClB,M,CAGF,MAAMC,EAAUd,KAAKc,QAAQC,OAC7B,GAAID,EAAQE,iBAAkB,CAC5BhB,KAAKC,KAAO,MACZ,M,CAGFD,KAAKa,UAAY,KACjBb,KAAKC,KAAO,KAEZ,GAAID,KAAKiB,SAAWnB,SAAU,CAC5BE,KAAKkB,gBAAkBC,YAAW,IAAMnB,KAAKG,QAAQH,KAAKiB,S,EAM9DL,aAEE,IAAKZ,KAAKa,UAAW,CACnB,M,CAGF,MAAMO,EAAUpB,KAAKoB,QAAQL,OAC7B,GAAIK,EAAQJ,iBAAkB,CAC5BhB,KAAKC,KAAO,KACZ,M,CAGFoB,aAAarB,KAAKkB,iBAClBlB,KAAKa,UAAY,MACjBb,KAAKC,KAAO,K,CASdW,cACE,OAAO,IAAIU,SAAeC,IACxB,IAAKhC,EAAWiC,cAAe,CAC7B9B,SAAS+B,KAAKC,OAAOnC,E,CAGvBA,EAAWmC,OAAO1B,KAAK2B,MACvBC,uBAAsB,IAAM5B,KAAKE,SAEjCF,KAAK2B,KAAKE,iBACR,wBACA,KACE7B,KAAK2B,KAAKG,SACVP,IAGA,GAAIhC,EAAWwC,cAAc,eAAiB,KAAM,CAClDxC,EAAWuC,Q,IAGf,CAAEE,KAAM,MACT,G,CAILzB,mBACEP,KAAKG,M,CAGPM,kBACET,KAAKK,iB,CAGPK,oBAAoBuB,GAClB,MAAMC,EAASD,EAAMC,OAGrB,GAAID,EAAME,eAAiB,WAAaD,EAAOE,UAAUC,SAAS,SAAU,CAC1ErC,KAAKa,UAAYb,KAAKC,KACtBD,KAAKC,KAAOD,KAAKsC,aAAavB,OAASf,KAAKuC,aAAaxB,M,EAI7DV,kBACEgB,aAAarB,KAAKkB,iBAClB,GAAIlB,KAAKC,MAAQD,KAAKiB,SAAWnB,SAAU,CACzCE,KAAKkB,gBAAkBC,YAAW,IAAMnB,KAAKG,QAAQH,KAAKiB,S,EAI9DuB,SACE,OACEC,EAAA,OACEC,IAAMC,GAAQ3C,KAAK4C,MAAQD,EAC3BE,KAAK,OACLC,MAAO,CACLF,MAAO,KACP,cAAe5C,KAAKC,KACpB,iBAAkBD,KAAKa,UACvB,kBAAmBb,KAAK+C,SACxB,iBAAkB/C,KAAKgD,OAAS,UAChC,iBAAkBhD,KAAKgD,OAAS,UAChC,cAAehD,KAAKgD,OAAS,OAC7B,iBAAkBhD,KAAKgD,OAAS,UAChC,gBAAiBhD,KAAKgD,OAAS,UAEjCC,KAAK,QAAO,YACF,YAAW,cACT,OAAM,cACLjD,KAAKC,KAAO,QAAU,OACnCiD,YAAalD,KAAKS,gBAClB0C,gBAAiBnD,KAAKU,qBAEtB+B,EAAA,QAAMI,KAAK,OAAOC,MAAM,eACtBL,EAAA,QAAMW,KAAK,UAGbX,EAAA,QAAMI,KAAK,UAAUC,MAAM,kBACzBL,EAAA,cAGDzC,KAAK+C,UACJN,EAAA,QAAMK,MAAM,gBACVL,EAAA,mBACEW,KAAK,QACLC,YAAY,oBACZC,QAAStD,KAAKO,oB"}

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

@@ -1 +0,0 @@
-{"version":3,"names":["sixBadgeCss","SixBadge","render","h","ref","el","this","badge","part","class","type","pill","pulse","role"],"sources":["./src/components/six-badge/six-badge.scss?tag=six-badge&encapsulation=shadow","./src/components/six-badge/six-badge.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: inline-flex;\n}\n\n.badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-family: var(--six-font-family);\n  font-size: var(--six-font-size-x-small);\n  font-weight: var(--six-font-weight-semibold);\n  letter-spacing: var(--six-letter-spacing-normal);\n  line-height: 1;\n  border-radius: var(--six-border-radius-small);\n  white-space: nowrap;\n  padding: 3px 6px;\n  user-select: none;\n  cursor: inherit;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Type modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.badge--info {\n  background-color: var(--six-color-web-rock-900);\n  color: var(--six-color-white);\n}\n\n.badge--success {\n  background-color: var(--six-color-success-500);\n  color: var(--six-color-web-rock-900);\n}\n\n.badge--warning {\n  background-color: var(--six-color-warning-700);\n  color: var(--six-color-web-rock-900);\n}\n\n.badge--danger {\n  background-color: var(--six-color-danger-800);\n  color: var(--six-color-white);\n}\n\n.badge--action {\n  background-color: var(--six-color-action-500);\n  color: var(--six-color-white);\n}\n\n.badge--primary {\n  background-color: var(--six-color-clay-50);\n  color: var(--six-color-black);\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pill modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.badge--pill {\n  border-radius: var(--six-border-radius-pill);\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pulse modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.badge--pulse {\n  animation: pulse 1.5s infinite;\n}\n\n.badge--pulse.badge--info {\n  --pulse-color: var(--six-color-web-rock-900);\n}\n\n.badge--pulse.badge--success {\n  --pulse-color: var(--six-color-success-500);\n}\n\n.badge--pulse.badge--warning {\n  --pulse-color: var(--six-color-warning-700);\n}\n\n.badge--pulse.badge--danger {\n  --pulse-color: var(--six-color-danger-800);\n}\n\n.badge--pulse.badge--action {\n  --pulse-color: var(--six-color-action-500);\n}\n\n.badge--pulse.badge--primary {\n  --pulse-color: var(--six-color-clay-50);\n}\n\n@keyframes pulse {\n  0% {\n    box-shadow: 0 0 0 0 var(--pulse-color);\n  }\n  70% {\n    box-shadow: 0 0 0 0.5rem transparent;\n  }\n  100% {\n    box-shadow: 0 0 0 0 transparent;\n  }\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The badge's content.\n *\n * @part base - The base wrapper\n */\n\n@Component({\n  tag: 'six-badge',\n  styleUrl: 'six-badge.scss',\n  shadow: true,\n})\nexport class SixBadge {\n  badge: HTMLElement;\n\n  /** The badge's type. */\n  @Prop() type: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'action' = 'primary';\n\n  /** Set to true to draw a pill-style badge with rounded edges. */\n  @Prop() pill = false;\n\n  /** Set to true to make the badge pulsate to draw attention. */\n  @Prop() pulse = false;\n\n  render() {\n    return (\n      <span\n        ref={(el) => (this.badge = el)}\n        part=\"base\"\n        class={{\n          badge: true,\n\n          // Types\n          'badge--primary': this.type === 'primary',\n          'badge--secondary': this.type === 'secondary',\n          'badge--success': this.type === 'success',\n          'badge--warning': this.type === 'warning',\n          'badge--danger': this.type === 'danger',\n          'badge--action': this.type === 'action',\n          'badge--info': this.type === 'info',\n          'badge--pill': this.pill,\n          'badge--pulse': this.pulse,\n        }}\n        role=\"status\"\n      >\n        <slot />\n      </span>\n    );\n  }\n}\n"],"mappings":"sCAAA,MAAMA,EAAc,oqD,MCkBPC,EAAQ,M,mCAI4E,U,UAGhF,M,WAGC,K,CAEhBC,SACE,OACEC,EAAA,QACEC,IAAMC,GAAQC,KAAKC,MAAQF,EAC3BG,KAAK,OACLC,MAAO,CACLF,MAAO,KAGP,iBAAkBD,KAAKI,OAAS,UAChC,mBAAoBJ,KAAKI,OAAS,YAClC,iBAAkBJ,KAAKI,OAAS,UAChC,iBAAkBJ,KAAKI,OAAS,UAChC,gBAAiBJ,KAAKI,OAAS,SAC/B,gBAAiBJ,KAAKI,OAAS,SAC/B,cAAeJ,KAAKI,OAAS,OAC7B,cAAeJ,KAAKK,KACpB,eAAgBL,KAAKM,OAEvBC,KAAK,UAELV,EAAA,a"}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"names":["sixButtonCss","SixButton","connectedCallback","this","handleBlur","bind","handleFocus","handleClick","handleSlotChange","componentWillLoad","async","options","button","focus","blur","hasLabel","hasSlot","host","hasPrefix","hasSuffix","hasFocus","sixBlur","emit","sixFocus","event","disabled","loading","preventDefault","stopPropagation","render","isLink","href","isButton","Button","h","onClick","class","ref","el","part","type","size","caret","circle","pill","submit","reset","name","value","target","download","rel","onBlur","onFocus","onSlotchange","viewBox","fill","stroke","points"],"sources":["./src/components/six-button/six-button.scss?tag=six-button&encapsulation=shadow","./src/components/six-button/six-button.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: inline-block;\n  width: auto;\n  cursor: pointer;\n}\n\n.button {\n  display: inline-flex;\n  align-items: stretch;\n  justify-content: center;\n  width: 100%;\n  border-style: solid;\n  border-width: var(--six-border-width);\n  border-radius: 0;\n  font-family: var(--six-font-family);\n  font-weight: var(--six-font-weight-semibold);\n  text-decoration: none;\n  user-select: none;\n  white-space: nowrap;\n  vertical-align: middle;\n  padding: 0;\n  transition: var(--six-transition-fast) background-color, var(--six-transition-fast) color,\n    var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;\n  cursor: inherit;\n\n  &::-moz-focus-inner {\n    border: 0;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &.button--disabled {\n    pointer-events: none;\n  }\n\n  // Clicks on icons shouldn't prevent the button from gaining focus\n  ::slotted(six-icon) {\n    pointer-events: none;\n  }\n}\n\n.button-wrapper--disabled {\n  cursor: not-allowed;\n}\n\n.button__prefix,\n.button__suffix {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Standard buttons\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button {\n  &.button--secondary {\n    background-color: var(--six-color-white);\n    border-color: var(--six-color-web-rock-900);\n    color: var(--six-color-web-rock-900);\n\n    &.button--disabled {\n      background-color: var(--six-color-web-rock-400);\n      border-color: var(--six-color-web-rock-400);\n      color: var(--six-color-web-rock-700);\n    }\n\n    &:hover:not(.button--disabled) {\n      background-color: var(--six-color-web-rock-100);\n    }\n\n    &:focus:not(.button--disabled) {\n      background-color: var(--six-color-web-rock-100);\n      border-color: var(--six-color-web-rock-400);\n      box-shadow: var(--six-button-focus-shadow);\n    }\n\n    &:active:not(.button--disabled) {\n      background-color: var(--six-color-web-rock-300);\n      border-color: var(--six-color-web-rock-900);\n      border-width: var(--six-focus-ring-width);\n    }\n  }\n\n  &.button--primary {\n    background-color: var(--six-color-web-rock-900);\n    border-color: var(--six-color-web-rock-900);\n    color: var(--six-color-white);\n\n    &.button--disabled {\n      background-color: var(--six-color-web-rock-400);\n      border-color: var(--six-color-web-rock-400);\n      color: var(--six-color-web-rock-700);\n    }\n\n    &:hover:not(.button--disabled) {\n      background-color: var(--six-color-web-rock-800);\n      border-color: var(--six-color-web-rock-800);\n    }\n\n    &:focus:not(.button--disabled) {\n      background-color: var(--six-color-web-rock-900);\n      border-color: var(--six-color-web-rock-400);\n      box-shadow: var(--six-button-focus-shadow);\n    }\n\n    &:active:not(.button--disabled) {\n      background-color: var(--six-color-web-rock-900);\n      border-color: var(--six-color-web-rock-900);\n      opacity: 70%;\n    }\n  }\n\n  &.button--link {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--six-color-action-500);\n\n    &.button--disabled {\n      color: var(--six-color-web-rock-400);\n    }\n\n    &:hover:not(.button--disabled) {\n      color: var(--six-color-action-600);\n    }\n\n    &:focus:not(.button--disabled) {\n      border-color: var(--six-color-web-rock-400);\n    }\n\n    &:active:not(.button--disabled) {\n      color: var(--six-color-action-light-to-be-defined);\n    }\n  }\n\n  &.button--danger {\n    background-color: var(--six-color-danger-800);\n    border-color: var(--six-color-danger-800);\n    color: var(--six-color-white);\n\n    &.button--disabled {\n      background-color: var(--six-color-web-rock-400);\n      border-color: var(--six-color-web-rock-400);\n      color: var(--six-color-web-rock-700);\n    }\n\n    &:hover:not(.button--disabled) {\n      background-color: var(--six-color-danger-900);\n      border-color: var(--six-color-danger-900);\n    }\n\n    &:focus:not(.button--disabled) {\n      background-color: var(--six-color-danger-800);\n      border-color: var(--six-color-web-rock-400);\n      box-shadow: var(--six-button-focus-shadow);\n    }\n\n    &:active:not(.button--disabled) {\n      background-color: var(--six-color-danger-800);\n      border-color: var(--six-color-danger-800);\n      opacity: 70%;\n    }\n  }\n\n  &.button--warning {\n    background-color: var(--six-color-warning-700);\n    border-color: var(--six-color-warning-700);\n    color: var(--six-color-web-rock-900);\n\n    &.button--disabled {\n      background-color: var(--six-color-web-rock-400);\n      border-color: var(--six-color-web-rock-400);\n      color: var(--six-color-web-rock-700);\n    }\n\n    &:hover:not(.button--disabled) {\n      background-color: var(--six-color-warning-800);\n      border-color: var(--six-color-warning-800);\n    }\n\n    &:focus:not(.button--disabled) {\n      background-color: var(--six-color-warning-700);\n      border-color: var(--six-color-web-rock-400);\n      box-shadow: var(--six-button-focus-shadow);\n    }\n\n    &:active:not(.button--disabled) {\n      background-color: var(--six-color-warning-700);\n      border-color: var(--six-color-warning-700);\n      opacity: 70%;\n    }\n  }\n\n  &.button--success {\n    background-color: var(--six-color-success-500);\n    border-color: var(--six-color-success-500);\n    color: var(--six-color-web-rock-900);\n\n    &.button--disabled {\n      background-color: var(--six-color-web-rock-400);\n      border-color: var(--six-color-web-rock-400);\n      color: var(--six-color-web-rock-700);\n    }\n\n    &:hover:not(.button--disabled) {\n      background-color: var(--six-color-success-600);\n      border-color: var(--six-color-success-600);\n    }\n\n    &:focus:not(.button--disabled) {\n      background-color: var(--six-color-success-500);\n      border-color: var(--six-color-web-rock-400);\n      box-shadow: var(--six-button-focus-shadow);\n    }\n\n    &:active:not(.button--disabled) {\n      background-color: var(--six-color-success-500);\n      border-color: var(--six-color-success-500);\n      opacity: 70%;\n    }\n  }\n\n  &.button--action {\n    background-color: var(--six-color-action-500);\n    border-color: var(--six-color-action-500);\n    color: var(--six-color-white);\n\n    &.button--disabled {\n      background-color: var(--six-color-web-rock-400);\n      border-color: var(--six-color-web-rock-400);\n      color: var(--six-color-web-rock-700);\n    }\n\n    &:hover:not(.button--disabled) {\n      background-color: var(--six-color-action-600);\n      border-color: var(--six-color-action-600);\n    }\n\n    &:focus:not(.button--disabled) {\n      background-color: var(--six-color-action-500);\n      border-color: var(--six-color-web-rock-400);\n      box-shadow: var(--six-button-focus-shadow);\n    }\n\n    &:active:not(.button--disabled) {\n      background-color: var(--six-color-action-500);\n      border-color: var(--six-color-action-500);\n      opacity: 70%;\n    }\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Size modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--small {\n  font-size: var(--six-button-font-size-small);\n  height: var(--six-height-small);\n  line-height: calc(var(--six-height-small) - var(--six-border-width) * 2);\n}\n\n.button--medium {\n  font-size: var(--six-button-font-size-medium);\n  height: var(--six-height-medium);\n  line-height: calc(var(--six-height-medium) - var(--six-border-width) * 2);\n}\n\n.button--large {\n  font-size: var(--six-button-font-size-large);\n  height: var(--six-height-large);\n  line-height: calc(var(--six-height-large) - var(--six-border-width) * 2);\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pill modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--pill {\n  &.button--small {\n    border-radius: var(--six-height-small);\n  }\n\n  &.button--medium {\n    border-radius: var(--six-height-medium);\n  }\n\n  &.button--large {\n    border-radius: var(--six-height-large);\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Circle modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--circle {\n  padding-left: 0;\n  padding-right: 0;\n  font-size: revert;\n\n  &.button--small {\n    width: var(--six-height-small);\n    border-radius: 50%;\n  }\n\n  &.button--medium {\n    width: var(--six-height-medium);\n    border-radius: 50%;\n  }\n\n  &.button--large {\n    width: var(--six-height-large);\n    border-radius: 50%;\n  }\n\n  .button__prefix,\n  .button__suffix,\n  .button__caret {\n    display: none;\n\n    svg {\n      color: var(--six-color-web-rock-900);\n    }\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Caret modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--caret {\n  .button__suffix {\n    display: none;\n  }\n\n  .button__caret {\n    display: flex;\n    align-items: center;\n\n    svg {\n      color: var(--six-color-web-rock-900);\n      width: 1em;\n      height: 1em;\n    }\n  }\n}\n\n.button--primary,\n.button--action,\n.button--danger {\n  .button__caret {\n    svg {\n      color: var(--six-color-white);\n    }\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Loading modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--loading {\n  position: relative;\n  cursor: wait;\n\n  .button__prefix,\n  .button__label,\n  .button__suffix,\n  .button__caret {\n    visibility: hidden;\n  }\n\n  six-spinner {\n    --indicator-color: currentColor;\n    position: absolute;\n    height: 1em;\n    width: 1em;\n    top: calc(50% - 0.5em);\n    left: calc(50% - 0.5em);\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Badges\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button ::slotted(six-badge) {\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translateY(-50%) translateX(50%);\n  pointer-events: none;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Button spacing\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--has-label {\n  &.button--small .button__label {\n    padding: 0 var(--six-spacing-small);\n  }\n\n  &.button--medium .button__label {\n    padding: 0 var(--six-spacing-medium);\n  }\n\n  &.button--large .button__label {\n    padding: 0 var(--six-spacing-large);\n  }\n}\n\n.button--has-prefix {\n  &.button--small {\n    padding-left: var(--six-spacing-x-small);\n\n    .button__label {\n      padding-left: var(--six-spacing-x-small);\n    }\n  }\n\n  &.button--medium {\n    padding-left: var(--six-spacing-small);\n\n    .button__label {\n      padding-left: var(--six-spacing-small);\n    }\n  }\n\n  &.button--large {\n    padding-left: var(--six-spacing-small);\n\n    .button__label {\n      padding-left: var(--six-spacing-small);\n    }\n  }\n}\n\n.button--has-suffix,\n.button--caret {\n  &.button--small {\n    padding-right: var(--six-spacing-x-small);\n\n    .button__label {\n      padding-right: var(--six-spacing-x-small);\n    }\n  }\n\n  &.button--medium {\n    padding-right: var(--six-spacing-small);\n\n    .button__label {\n      padding-right: var(--six-spacing-small);\n    }\n  }\n\n  &.button--large {\n    padding-right: var(--six-spacing-small);\n\n    .button__label {\n      padding-right: var(--six-spacing-small);\n    }\n  }\n}\n","import { Component, Element, h, Method, Prop, State, Event, EventEmitter } from '@stencil/core';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\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 button's label.\n * @slot prefix - Used to prepend an icon or similar element to the button.\n * @slot suffix - Used to append an icon or similar element to the button.\n *\n * @part base - The component's base wrapper.\n * @part prefix - The prefix container.\n * @part label - The button's label.\n * @part suffix - The suffix container.\n * @part caret - The button's caret.\n */\n\n@Component({\n  tag: 'six-button',\n  styleUrl: 'six-button.scss',\n  shadow: true,\n})\nexport class SixButton {\n  button: HTMLButtonElement;\n\n  @Element() host: HTMLSixButtonElement;\n\n  @State() hasFocus = false;\n  @State() hasLabel = false;\n  @State() hasPrefix = false;\n  @State() hasSuffix = false;\n\n  /** The button's type. */\n  @Prop({ reflect: true }) type: 'secondary' | 'primary' | 'link' | 'success' | 'warning' | 'danger' | 'action' =\n    'primary';\n\n  /** The button's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Set to true to draw the button with a caret for use with dropdowns, popovers, etc. */\n  @Prop() caret = false;\n\n  /** Set to true to disable the button. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Set to true to draw the button in a loading state. */\n  @Prop({ reflect: true }) loading = false;\n\n  /** Set to true to draw a pill-style button with rounded edges. */\n  @Prop({ reflect: true }) pill = false;\n\n  /** Set to true to draw a circle button. */\n  @Prop({ reflect: true }) circle = false;\n\n  /** Indicates if activating the button should submit the form. Ignored when `href` is set. */\n  @Prop({ reflect: true }) submit = false;\n\n  /** Indicates if activating the button should reset the form. */\n  @Prop({ reflect: true }) reset = false;\n\n  /** An optional name for the button. Ignored when `href` is set. */\n  @Prop() name: string;\n\n  /** An optional value for the button. Ignored when `href` is set. */\n  @Prop() value: string;\n\n  /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */\n  @Prop() href: string;\n\n  /** Tells the browser where to open the link. Only used when `href` is set. */\n  @Prop() target: '_blank' | '_parent' | '_self' | '_top';\n\n  /** Tells the browser to download the linked file as this filename. Only used when `href` is set. */\n  @Prop() download: string;\n\n  /** Emitted when the button loses focus. */\n  @Event({ eventName: 'six-button-blur' }) sixBlur: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the button gains focus. */\n  @Event({ eventName: 'six-button-focus' }) sixFocus: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    this.handleBlur = this.handleBlur.bind(this);\n    this.handleFocus = this.handleFocus.bind(this);\n    this.handleClick = this.handleClick.bind(this);\n    this.handleSlotChange = this.handleSlotChange.bind(this);\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  /** Sets focus on the button. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.button.focus(options);\n  }\n\n  /** Removes focus from the button. */\n  @Method()\n  async removeFocus() {\n    this.button.blur();\n  }\n\n  handleSlotChange() {\n    this.hasLabel = hasSlot(this.host);\n    this.hasPrefix = hasSlot(this.host, 'prefix');\n    this.hasSuffix = hasSlot(this.host, 'suffix');\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  handleClick(event: MouseEvent) {\n    if (this.disabled || this.loading) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  }\n\n  render() {\n    const isLink = !!this.href;\n    const isButton = !isLink;\n    const Button = isLink ? 'a' : 'button';\n\n    return (\n      <div onClick={this.handleClick} class={{ 'button-wrapper--disabled': this.disabled }}>\n        <Button\n          ref={(el) => (this.button = el)}\n          part=\"base\"\n          class={{\n            button: true,\n\n            // Types\n            'button--secondary': this.type === 'secondary',\n            'button--primary': this.type === 'primary',\n            'button--link': this.type === 'link',\n            'button--success': this.type === 'success',\n            'button--warning': this.type === 'warning',\n            'button--danger': this.type === 'danger',\n            'button--action': this.type === 'action',\n\n            // Sizes\n            'button--small': this.size === 'small',\n            'button--medium': this.size === 'medium',\n            'button--large': this.size === 'large',\n\n            // Modifiers\n            'button--caret': this.caret,\n            'button--circle': this.circle,\n            'button--disabled': this.disabled,\n            'button--focused': this.hasFocus,\n            'button--loading': this.loading,\n            'button--pill': this.pill,\n            'button--has-label': this.hasLabel,\n            'button--has-prefix': this.hasPrefix,\n            'button--has-suffix': this.hasSuffix,\n          }}\n          disabled={isButton ? this.disabled : null}\n          type={isButton ? (this.submit ? 'submit' : this.reset ? 'reset' : 'button') : null}\n          name={isButton ? this.name : null}\n          value={isButton ? this.value : null}\n          href={isLink && this.href}\n          target={isLink && this.target ? this.target : null}\n          download={isLink && this.download ? this.download : null}\n          rel={isLink && this.target ? 'noreferrer noopener' : null}\n          onBlur={this.handleBlur}\n          onFocus={this.handleFocus}\n          onClick={this.handleClick}\n          data-testid=\"button\"\n        >\n          <span part=\"prefix\" class=\"button__prefix\">\n            <slot onSlotchange={this.handleSlotChange} name=\"prefix\" />\n          </span>\n          <span part=\"label\" class=\"button__label\">\n            <slot onSlotchange={this.handleSlotChange} />\n          </span>\n          <span part=\"suffix\" class=\"button__suffix\">\n            <slot onSlotchange={this.handleSlotChange} name=\"suffix\" />\n          </span>\n          {this.caret && (\n            <span part=\"caret\" class=\"button__caret\">\n              <svg\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              >\n                <polyline points=\"6 9 12 15 18 9\" />\n              </svg>\n            </span>\n          )}\n\n          {this.loading && <six-spinner />}\n        </Button>\n      </div>\n    );\n  }\n}\n"],"mappings":"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"}

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

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

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

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

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

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

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

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

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

@@ -1,2 +0,0 @@
-import{r as t,c as i,h as s,g as e}from"./p-ac4f4d45.js";import{s as o}from"./p-eb8f05a9.js";import{P as n}from"./p-18ea0c56.js";import{E as h}from"./p-9a860acc.js";import{b as r,a as l}from"./p-b4dfb7cf.js";import{D as a,a as d}from"./p-0786fa7c.js";function u(t){const i=t.tabIndex;return i>-1}function c(t){if(u(t)){return t}if(t.shadowRoot){const i=[...t.shadowRoot.children].find(u);if(i){return i}}if(t.children){return[...t.children].map(c)[0]}return null}const p=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:inline-block}.dropdown{position:relative}.dropdown__trigger{display:block}.dropdown__positioner{position:absolute;z-index:var(--six-z-index-dropdown)}.dropdown__positioner__filtered{width:100%}.dropdown__panel{max-height:50vh;font-family:var(--six-font-sans);font-size:var(--six-font-size-small);font-weight:var(--six-font-weight-normal);color:var(--color);background-color:var(--six-panel-background-color);border-radius:var(--six-border-radius-medium);box-shadow:var(--six-elevation-2dp);opacity:0;overflow:auto;overscroll-behavior:none;pointer-events:none;transform:scale(0.9);transition:var(--six-transition-fast) opacity, var(--six-transition-fast) transform;scrollbar-width:thin}.filter-hidden{display:none}.dropdown__positioner[data-popper-placement^=top] .dropdown__panel{transform-origin:bottom}.dropdown__positioner[data-popper-placement^=bottom] .dropdown__panel{transform-origin:top}.dropdown__positioner[data-popper-placement^=left] .dropdown__panel{transform-origin:right}.dropdown__positioner[data-popper-placement^=right] .dropdown__panel{transform-origin:left}.dropdown__positioner.popover-visible .dropdown__panel{opacity:1;transform:none;pointer-events:all}";const f=t=>i=>(i===null||i===void 0?void 0:i.tagName.toLowerCase())===t.toLowerCase();const v=f("six-menu");const m=f("six-menu-item");let w=0;const g=class{constructor(e){t(this,e);this.sixShow=i(this,"six-dropdown-show",7);this.sixAfterShow=i(this,"six-dropdown-after-show",7);this.sixHide=i(this,"six-dropdown-hide",7);this.sixAfterHide=i(this,"six-dropdown-after-hide",7);this.sixAutoFilterFired=i(this,"six-dropdown-auto-filter-fired",7);this.sixAsyncFilterFired=i(this,"six-async-filter-fired",7);this.sixScroll=i(this,"six-dropdown-scroll",7);this.componentId=`dropdown-${++w}`;this.isVisible=false;this.hasBeenInitialized=false;this.eventListeners=new h;this.getMenuItems=()=>{if(this._options!==null){return this._options.map((t=>s("six-menu-item",{value:t.value},t.label)))}const[t]=r(this.panel);return r(t)||Array.from(t.querySelectorAll("six-menu-item"))};this.handleFilterInputChange=()=>{var t,i;const s=((i=(t=this.filterInputElement.value)===null||t===void 0?void 0:t.toLowerCase())===null||i===void 0?void 0:i.trim())||"";if(this._options){this.handleFilteringForAttributeItems(s)}else{this.handleFilteringForSlotItems(s)}this.sixAutoFilterFired.emit({filterValue:s})};this.open=false;this.placement="bottom-start";this.closeOnSelect=true;this.distance=0;this.skidding=0;this.hoist=false;this.containingElement=undefined;this.filter=false;this.asyncFilter=false;this.filterPlaceholder="Filter...";this.autofocusFilter=true;this.filterDebounce=a;this.disableHideOnEnterAndSpace=false;this.options=null;this.virtualScroll=false;this._options=null}get hasFilterEnabled(){return this.filter||this.asyncFilter}get container(){return this.containingElement||this.host}handleOpenChange(){this.open?this.show():this.hide();this.updateAccessibleTrigger()}handlePopoverOptionsChange(){this.popover.setOptions({strategy:this.hoist?"fixed":"absolute",placement:this.placement,distance:this.distance,skidding:this.skidding})}handleOptionsChange(){this._options=[...this.options]}connectedCallback(){if(this.virtualScroll&&this.options===null){console.error("Options must be defined when using virtual scrolling")}if(this.options!==null){this._options=[...this.options]}this.handleDocumentKeyDown=this.handleDocumentKeyDown.bind(this);this.handleDocumentMouseDown=this.handleDocumentMouseDown.bind(this);this.handleMenuItemActivate=this.handleMenuItemActivate.bind(this);this.handlePanelSelect=this.handlePanelSelect.bind(this);this.handleTriggerClick=this.handleTriggerClick.bind(this);this.handleTriggerKeyDown=this.handleTriggerKeyDown.bind(this);this.handleTriggerKeyUp=this.handleTriggerKeyUp.bind(this);this.handleTriggerSlotChange=this.handleTriggerSlotChange.bind(this);this.handleDropdownScroll=this.handleDropdownScroll.bind(this);if(this.hasBeenInitialized&&!this.popover){this.initializePopover()}}componentDidLoad(){this.hasBeenInitialized=true;this.initializePopover();if(this.open){void this.show()}if(this.filter){this.setupFiltering(this.handleFilterInputChange)}else if(this.asyncFilter){this.setupFiltering((()=>this.sixAsyncFilterFired.emit({filterValue:this.filterInputElement.value})))}}initializePopover(){const t=()=>{if(this.filter){this.filterInputElement.value="";if(this._options!==null){this._options=[...this.options]}else{const t=this.getMenuItems();t.forEach((t=>t.style.display="unset"))}}this.sixAfterHide.emit()};const i=async()=>{if(this.hasFilterEnabled&&this.autofocusFilter){await this.filterInputElement.setFocus()}this.sixAfterShow.emit()};const s=()=>{if(!this.open){this.panel.scrollTop=0}};this.popover=new n(this.trigger,this.positioner,{strategy:this.hoist?"fixed":"absolute",placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.panel,onAfterHide:t,onAfterShow:i,onTransitionEnd:s})}setupFiltering(t){this.eventListeners.add(this.filterInputElement,"six-input-input",d(t,this.filterDebounce))}handleFilteringForAttributeItems(t){if(t===""){this._options=[...this.options];return}this._options=this.options.filter((i=>{var s,e,o,n;return i.label&&((e=(s=String(i.label))===null||s===void 0?void 0:s.toLowerCase())===null||e===void 0?void 0:e.includes(t))||i.value&&((n=(o=String(i.value))===null||o===void 0?void 0:o.toLowerCase())===null||n===void 0?void 0:n.includes(t))}))}handleFilteringForSlotItems(t){const i=this.getMenuItems();i.forEach((async i=>{var s,e,o,n;const h=((e=(s=i===null||i===void 0?void 0:i.value)===null||s===void 0?void 0:s.toLowerCase())===null||e===void 0?void 0:e.includes(t))||((n=(o=await(i===null||i===void 0?void 0:i.getTextLabel()))===null||o===void 0?void 0:o.toLowerCase())===null||n===void 0?void 0:n.includes(t));i.style.display=h?"unset":"none"}))}disconnectedCallback(){this.eventListeners.removeAll();void this.hide();this.popover.destroy();this.popover=null}async show(){if(this.isVisible){return}const t=this.sixShow.emit();if(t.defaultPrevented){this.open=false;return}this.eventListeners.add(this.panel,"six-menu-item-selected",this.handlePanelSelect);this.eventListeners.add(document,"keydown",this.handleDocumentKeyDown);this.eventListeners.add(document,"mousedown",this.handleDocumentMouseDown);this.isVisible=true;this.open=true;this.popover.show()}async hide(){if(!this.isVisible){return}const t=this.sixHide.emit();if(t.defaultPrevented){this.open=true;return}this.eventListeners.remove(this.panel,"six-menu-item-selected",this.handlePanelSelect);this.eventListeners.remove(document,"keydown",this.handleDocumentKeyDown);this.eventListeners.remove(document,"mousedown",this.handleDocumentMouseDown);this.isVisible=false;this.open=false;this.popover.hide()}focusOnTrigger(){const[t]=r(this.trigger);if(t){if(typeof t.setFocus==="function"){t.setFocus()}else if(typeof t.focus==="function"){t.focus()}}}getMenu(){const[t]=r(this.panel).filter(v);return t}async reposition(){if(!this.open){return}this.popover.reposition()}handleDocumentKeyDown(t){if(t.key==="Escape"){void this.hide();this.focusOnTrigger();return}if(this.filterInputElement===this.host.shadowRoot.activeElement){if(t.key==="ArrowDown"){const t=this.getMenuItems().find((t=>t.style.display!=="none"));if(t){t.setFocus()}}}if(t.key==="Tab"){if(this.open&&m(document.activeElement)){t.preventDefault();void this.hide();this.focusOnTrigger();return}setTimeout((()=>{var t;const i=this.container.getRootNode()instanceof ShadowRoot?(t=document.activeElement.shadowRoot)===null||t===void 0?void 0:t.activeElement:document.activeElement;if((i===null||i===void 0?void 0:i.closest(this.container.tagName.toLowerCase()))!==this.container){void this.hide();return}}))}}handleDocumentMouseDown(t){const i=t.composedPath();if(!i.includes(this.container)){void this.hide();return}}handleMenuItemActivate(t){const i=t.target;o(i,this.panel)}handlePanelSelect(t){const i=t.target;if(this.closeOnSelect&&v(i)){void this.hide();this.focusOnTrigger()}}handleTriggerClick(){this.open?this.hide():this.show()}handleTriggerKeyDown(t){const i=this.getMenu();const s=i?[...i.querySelectorAll("six-menu-item")]:null;const e=s[0];const o=s[s.length-1];if(t.key==="Escape"){this.focusOnTrigger();void this.hide();return}if(!this.disableHideOnEnterAndSpace&&[" ","Enter"].includes(t.key)){t.preventDefault();this.open?void this.hide():void this.show();return}if(["ArrowDown","ArrowUp"].includes(t.key)){t.preventDefault();if(!this.open){void this.show()}if(t.key==="ArrowDown"&&e){e.setFocus();return}if(t.key==="ArrowUp"&&o){o.setFocus();return}}const n=["Tab","Shift","Meta","Ctrl","Alt"];if(this.open&&i&&!n.includes(t.key)){void i.typeToSelect(t.key);return}}handleTriggerKeyUp(t){if(t.key===" "){t.preventDefault()}}handleTriggerSlotChange(){this.updateAccessibleTrigger()}handleDropdownScroll(){this.sixScroll.emit({scrollHeight:this.panel.scrollHeight,scrollTop:this.panel.scrollTop,scrollbarHeight:this.panel.offsetHeight*(this.panel.offsetHeight/this.panel.scrollHeight),scrollRatio:this.panel.scrollTop/(this.panel.scrollHeight-this.panel.clientHeight)})}updateAccessibleTrigger(){const[t]=r(this.trigger).map(c);if(t){t.setAttribute("aria-haspopup","true");t.setAttribute("aria-expanded",this.open?"true":"false")}}render(){return s("div",{part:"base",id:this.componentId,class:{dropdown:true,"dropdown--open":this.open}},s("span",{part:"trigger",class:"dropdown__trigger",ref:t=>this.trigger=t,onClick:this.handleTriggerClick,onKeyDown:this.handleTriggerKeyDown,onKeyUp:this.handleTriggerKeyUp},s("slot",{name:"trigger",onSlotchange:this.handleTriggerSlotChange})),s("div",{ref:t=>this.positioner=t,class:{dropdown__positioner:true,dropdown__positioner__filtered:(this.filter||this.asyncFilter)&&!this.hoist}},this.hasFilterEnabled&&s("six-input",{class:{"filter-hidden":!this.open},"aria-hidden":this.open?"false":"true",ref:t=>this.filterInputElement=t,placeholder:this.filterPlaceholder}),s("div",{ref:t=>this.panel=t,part:"panel",class:"dropdown__panel",role:"menu","aria-hidden":this.open?"false":"true","aria-labelledby":this.componentId,onScroll:this.handleDropdownScroll},s("slot",null),this._options&&s("six-menu",{part:"menu",items:this._options,virtualScroll:this.virtualScroll}))))}get host(){return e(this)}static get watchers(){return{open:["handleOpenChange"],distance:["handlePopoverOptionsChange"],hoist:["handlePopoverOptionsChange"],placement:["handlePopoverOptionsChange"],skidding:["handlePopoverOptionsChange"],options:["handleOptionsChange"]}}};g.style=p;const b=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block}.menu{padding:0 0;border:none;box-shadow:var(--six-elevation-2dp)}.menu:focus{outline:none}.menu--noshadow{box-shadow:none}.menu__wrapper--scrollable{overflow-y:auto}";const x=t=>{var i,s,e;return(e=(s=(i=t===null||t===void 0?void 0:t.shadowRoot)===null||i===void 0?void 0:i.querySelector(".menu-item"))===null||s===void 0?void 0:s.classList)===null||e===void 0?void 0:e.contains("menu-item--focused")};const _=t=>(t===null||t===void 0?void 0:t.tagName.toLowerCase())==="six-menu-item";const y=({value:t,label:i})=>s("six-menu-item",{value:t},i);const A=5;const C=64;const k=undefined;const S=class{constructor(s){t(this,s);this.sixMenuItemSelected=i(this,"six-menu-item-selected",7);this.eventListeners=new h;this.typeToSelectString="";this.handleScrolling=()=>{this.scrollingIndex=Math.floor(this.menuWrapper.scrollTop/this.sixMenuItemHeight)};this.removeBoxShadow=false;this.items=null;this.itemsShown=k;this.virtualScroll=false;this.itemSize=10;this.scrollingDebounce=15;this.scrollingIndex=0;this.sixMenuItemHeight=C}connectedCallback(){this.handleClick=this.handleClick.bind(this);this.handleKeyDown=this.handleKeyDown.bind(this)}componentWillLoad(){if(this.items===null){return}}componentDidLoad(){this.setupForVirtualScrollingAfterRendering()}disconnectedCallback(){this.eventListeners.removeAll()}async typeToSelect(t){var i;clearTimeout(this.typeToSelectTimeout);this.typeToSelectTimeout=setTimeout((()=>this.typeToSelectString=""),750);this.typeToSelectString+=t.toLowerCase();const s=this.getItems();for(const t of s){const s=(i=t.shadowRoot)===null||i===void 0?void 0:i.querySelector("slot:not([name])");const e=l(s).toLowerCase().trim();if(e.substring(0,this.typeToSelectString.length)===this.typeToSelectString){t.setFocus();break}}}getItemsShown(){var t;const i=this.virtualScroll?A:k;return(t=this.itemsShown)!==null&&t!==void 0?t:i}setupForVirtualScrollingAfterRendering(){var t,i;if(!this.virtualScroll){return}this.eventListeners.add(this.menuWrapper,"scroll",d(this.handleScrolling,this.scrollingDebounce));const s=(i=(t=this.menu)===null||t===void 0?void 0:t.querySelector("six-menu-item"))===null||i===void 0?void 0:i.clientHeight;if(s&&s>0){this.sixMenuItemHeight=s}}getItems(){if(this.items!==null&&this.items!==undefined){return this.items.map(y)}const t=this.menu.querySelector("slot");return[...t.assignedElements({flatten:true})].filter((t=>_(t)&&!t.disabled))}getActiveItemIndex(){const t=this.getItems();const i=this.getActiveItem();const s=t.indexOf(i);if(s>-1){return s}const e=this.extractItemsFromDOM();return e.findIndex(x)}getActiveItem(){var t;const i=this.getItems().find((t=>t===document.activeElement));if(i){return i}return(t=this.extractItemsFromDOM())===null||t===void 0?void 0:t.find(x)}extractItemsFromDOM(){var t,i;return Array.from((i=(t=this.host)===null||t===void 0?void 0:t.shadowRoot)===null||i===void 0?void 0:i.querySelectorAll("six-menu-item"))}setActiveItem(t){t.setFocus()}handleClick(t){const i=t.target;const s=i.closest("six-menu-item");if(s&&!s.disabled){this.sixMenuItemSelected.emit({name:s.value,item:s})}}handleKeyDown(t){if(t.key==="Enter"){const i=this.getActiveItem();t.preventDefault();if(i){this.sixMenuItemSelected.emit({name:i.value,item:i})}}if(t.key===" "){t.preventDefault()}if(["ArrowDown","ArrowUp","Home","End"].includes(t.key)){const i=this.items===null?this.getItems():this.extractItemsFromDOM();let s=this.getActiveItemIndex();if(i.length){t.preventDefault();if(t.key==="ArrowDown"){s++}else if(t.key==="ArrowUp"){s--}else if(t.key==="Home"){s=0}else if(t.key==="End"){s=i.length-1}if(s<0)s=0;if(s>i.length-1)s=i.length-1;this.setActiveItem(i[s]);return}}void this.typeToSelect(t.key)}getMenuWrapperStyle(){const t={};if(this.getItemsShown()>0){t.height=`${this.getItemsShown()*this.sixMenuItemHeight}px`}return Object.assign({},t)}getMenuContainerStyle(){const t={};if(this.virtualScroll){t.transform=`translateY(${this.sixMenuItemHeight*this.scrollingIndex}px)`}return Object.assign({},t)}getScrollbarGhostStyle(){const t={};if(this.virtualScroll&&this.items!==null){t.height=`${this.items.length*this.sixMenuItemHeight-this.itemSize*this.sixMenuItemHeight}px`}return Object.assign({},t)}renderItems(){if(this.items===undefined||this.items===null){return}if(!this.virtualScroll){return this.items.map(y)}return this.items.slice(this.scrollingIndex,Math.min(this.items.length,this.itemSize+this.scrollingIndex)).map(y)}render(){return s("div",{ref:t=>this.menuWrapper=t,style:this.getMenuWrapperStyle(),part:"wrapper",class:{menu:true,"menu--noshadow":this.removeBoxShadow,"menu__wrapper--scrollable":this.getItemsShown()>0}},s("div",{ref:t=>this.menu=t,part:"base",role:"menu",onClick:this.handleClick,onKeyDown:this.handleKeyDown,tabIndex:0,style:this.getMenuContainerStyle()},s("slot",null),this.renderItems()),this.virtualScroll&&s("div",{style:this.getScrollbarGhostStyle()}))}get host(){return e(this)}};S.style=b;export{g as six_dropdown,S as six_menu};
-//# sourceMappingURL=p-b997e43c.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["isTabbable","el","tabIndex","getNearestTabbableElement","shadowRoot","tabbableShadowChild","children","find","map","sixDropdownCss","isTagName","name","tagName","toLowerCase","isSixMenu","isSixMenuItem","id","SixDropdown","this","componentId","isVisible","hasBeenInitialized","eventListeners","EventListeners","getMenuItems","_options","option","h","value","label","panel","getSlotChildren","Array","from","querySelectorAll","handleFilterInputChange","lowerCaseFilterTerm","_b","_a","filterInputElement","trim","handleFilteringForAttributeItems","handleFilteringForSlotItems","sixAutoFilterFired","emit","filterValue","DEFAULT_DEBOUNCE_FAST","hasFilterEnabled","filter","asyncFilter","container","containingElement","host","handleOpenChange","open","show","hide","updateAccessibleTrigger","handlePopoverOptionsChange","popover","setOptions","strategy","hoist","placement","distance","skidding","handleOptionsChange","options","connectedCallback","virtualScroll","console","error","handleDocumentKeyDown","bind","handleDocumentMouseDown","handleMenuItemActivate","handlePanelSelect","handleTriggerClick","handleTriggerKeyDown","handleTriggerKeyUp","handleTriggerSlotChange","handleDropdownScroll","initializePopover","componentDidLoad","setupFiltering","sixAsyncFilterFired","onAfterHide","menuItems","forEach","item","style","display","sixAfterHide","onAfterShow","async","autofocusFilter","setFocus","sixAfterShow","onTransitionEnd","scrollTop","Popover","trigger","positioner","transitionElement","callback","add","debounce","filterDebounce","String","includes","_d","_c","menuItem","elementContainsFilterTerm","getTextLabel","disconnectedCallback","removeAll","destroy","sixShow","defaultPrevented","document","sixHide","remove","focusOnTrigger","focus","getMenu","menu","reposition","event","key","activeElement","preventDefault","setTimeout","getRootNode","ShadowRoot","closest","path","composedPath","target","scrollIntoView","closeOnSelect","firstMenuItem","lastMenuItem","length","disableHideOnEnterAndSpace","ignoredKeys","typeToSelect","sixScroll","scrollHeight","scrollbarHeight","offsetHeight","scrollRatio","clientHeight","accessibleTrigger","setAttribute","render","part","class","dropdown","ref","onClick","onKeyDown","onKeyUp","onSlotchange","dropdown__positioner","dropdown__positioner__filtered","placeholder","filterPlaceholder","role","onScroll","items","sixMenuCss","isFocusedMenuItem","querySelector","classList","contains","isSIXMenuItemElement","mapToMenuItem","DEFAULT_NUMBER_OF_ITEMS_SHOWN_FOR_VIRTUAL_SCROLLING","DEFAULT_SIX_MENU_ITEM_HEIGHT","ITEMS_SHOWN_NOT_SET","undefined","SixMenu","typeToSelectString","handleScrolling","scrollingIndex","Math","floor","menuWrapper","sixMenuItemHeight","handleClick","handleKeyDown","componentWillLoad","setupForVirtualScrollingAfterRendering","clearTimeout","typeToSelectTimeout","getItems","slot","getTextContent","substring","getItemsShown","defaultItemsShown","itemsShown","scrollingDebounce","menuItemHeight","assignedElements","flatten","disabled","getActiveItemIndex","selectedItem","getActiveItem","itemIndex","indexOf","sixMenuItems","extractItemsFromDOM","findIndex","i","setActiveItem","clickedItem","sixMenuItemSelected","activeItem","indexOfActiveItem","getMenuWrapperStyle","styles","height","Object","assign","getMenuContainerStyle","transform","getScrollbarGhostStyle","itemSize","renderItems","slice","min","removeBoxShadow"],"sources":["./src/utils/tabbable.ts","./src/components/six-dropdown/six-dropdown.scss?tag=six-dropdown&encapsulation=shadow","./src/components/six-dropdown/six-dropdown.tsx","./src/components/six-menu/six-menu.scss?tag=six-menu&encapsulation=shadow","./src/components/six-menu/six-menu.tsx"],"sourcesContent":["export function isTabbable(el: HTMLElement) {\n  const tabIndex = el.tabIndex;\n  return tabIndex > -1;\n}\n\nexport function getNearestTabbableElement(el: HTMLElement): HTMLElement {\n  // Check the element\n  if (isTabbable(el)) {\n    return el;\n  }\n\n  // Check the element's shadow root\n  if (el.shadowRoot) {\n    const tabbableShadowChild = [...el.shadowRoot.children].find(isTabbable) as HTMLElement;\n    if (tabbableShadowChild) {\n      return tabbableShadowChild;\n    }\n  }\n\n  // Check the element's children\n  if (el.children) {\n    return [...el.children].map(getNearestTabbableElement)[0];\n  }\n\n  return null;\n}\n","@import 'src/global/component';\n@import 'src/global/mixins/scrollbar';\n\n:host {\n  display: inline-block;\n}\n\n.dropdown {\n  position: relative;\n}\n\n.dropdown__trigger {\n  display: block;\n}\n\n.dropdown__positioner {\n  position: absolute;\n  z-index: var(--six-z-index-dropdown);\n\n  &__filtered {\n    width: 100%;\n  }\n}\n\n.dropdown__panel {\n  max-height: 50vh;\n  font-family: var(--six-font-sans);\n  font-size: var(--six-font-size-small);\n  font-weight: var(--six-font-weight-normal);\n  color: var(--color);\n  background-color: var(--six-panel-background-color);\n  border-radius: var(--six-border-radius-medium);\n  box-shadow: var(--six-elevation-2dp);\n  opacity: 0;\n  overflow: auto;\n  overscroll-behavior: none;\n  pointer-events: none;\n  transform: scale(0.9);\n  transition: var(--six-transition-fast) opacity, var(--six-transition-fast) transform;\n  // fix for firefox scrollbar\n  scrollbar-width: thin;\n}\n\n.filter-hidden {\n  display: none;\n}\n\n.dropdown__positioner {\n  &[data-popper-placement^='top'] .dropdown__panel {\n    transform-origin: bottom;\n  }\n\n  &[data-popper-placement^='bottom'] .dropdown__panel {\n    transform-origin: top;\n  }\n\n  &[data-popper-placement^='left'] .dropdown__panel {\n    transform-origin: right;\n  }\n\n  &[data-popper-placement^='right'] .dropdown__panel {\n    transform-origin: left;\n  }\n\n  &.popover-visible .dropdown__panel {\n    opacity: 1;\n    transform: none;\n    pointer-events: all;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { scrollIntoView } from '../../utils/scroll';\nimport { getNearestTabbableElement } from '../../utils/tabbable';\nimport Popover from '../../utils/popover';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { getSlotChildren } from '../../utils/slot';\nimport { debounce, DEFAULT_DEBOUNCE_FAST } from '../../utils/execution-control';\nimport { EmptyPayload } from '../../utils/types';\nimport { SixMenuItemData } from '../six-menu/six-menu';\n\nexport interface SixDropdownAutoFilterPayload {\n  filterValue: string;\n}\n\nexport interface SixDropdownAsyncFilterPayload {\n  filterValue: string;\n}\n\nexport interface SixDropdownScrollPayload {\n  scrollHeight: number;\n  scrollTop: number;\n  scrollbarHeight: number;\n  scrollRatio: number;\n}\n\nconst isTagName =\n  (name: string) =>\n  <T extends Element>(el?: T) =>\n    el?.tagName.toLowerCase() === name.toLowerCase();\nconst isSixMenu = isTagName('six-menu');\nconst isSixMenuItem = isTagName('six-menu-item');\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 trigger - The dropdown's trigger, usually a `<six-button>` element.\n * @slot - The dropdown's content.\n *\n * @part base - The component's base wrapper.\n * @part trigger - The container that wraps the trigger.\n * @part panel - The panel that gets shown when the dropdown is open.\n */\n\n@Component({\n  tag: 'six-dropdown',\n  styleUrl: 'six-dropdown.scss',\n  shadow: true,\n})\nexport class SixDropdown {\n  accessibleTrigger: HTMLElement;\n  componentId = `dropdown-${++id}`;\n  isVisible = false;\n  panel: HTMLElement;\n  positioner: HTMLElement;\n  popover: Popover;\n  trigger: HTMLElement;\n  hasBeenInitialized = false;\n\n  // the input element shown in the dropdown when filter is set to true\n  filterInputElement: HTMLSixInputElement;\n\n  @Element() host: HTMLSixDropdownElement;\n\n  /** Indicates whether or not the dropdown is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /**\n   * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\n   * inside of the viewport.\n   */\n  @Prop() placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'bottom-start';\n\n  /** Determines whether the dropdown should hide when a menu item is selected. */\n  @Prop() closeOnSelect = true;\n\n  /** The distance in pixels from which to offset the panel away from its trigger. */\n  @Prop() distance = 0;\n\n  /** The distance in pixels from which to offset the panel along its trigger. */\n  @Prop() skidding = 0;\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 dropdown will close when the user interacts outside of this element (e.g. clicking). */\n  @Prop() containingElement: HTMLElement;\n\n  /**\n   * Set to true to allow auto filtering for entries in the dropdown.\n   * With this flag the dropdown will automatically filter itsel.\n   * If you need to coordinate the shown elements yourself,\n   * e.g. because you need to call an endpoint use asyncFilter instead\n   */\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  /** The filter's placeholder text. */\n  @Prop() filterPlaceholder = 'Filter...';\n\n  /** By default the search field will be focused when opening a dropdown with filtering enabled. */\n  @Prop() autofocusFilter = true;\n\n  get hasFilterEnabled() {\n    return this.filter || this.asyncFilter;\n  }\n\n  /** The debounce for the filter callbacks. */\n  @Prop() filterDebounce = DEFAULT_DEBOUNCE_FAST;\n\n  /** The panel can be opend/closed by pressing the spacebar or the enter key. In some cases you might want to avoid this */\n  @Prop() disableHideOnEnterAndSpace = false;\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  get container() {\n    return this.containingElement || this.host;\n  }\n\n  /** Emitted when the dropdown opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event({ eventName: 'six-dropdown-show' }) sixShow: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the dropdown opens and all transitions are complete. */\n  @Event({ eventName: 'six-dropdown-after-show' }) sixAfterShow: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the dropdown closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event({ eventName: 'six-dropdown-hide' }) sixHide: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the dropdown closes and all transitions are complete. */\n  @Event({ eventName: 'six-dropdown-after-hide' }) sixAfterHide: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the auto filter is triggered */\n  @Event({ eventName: 'six-dropdown-auto-filter-fired' })\n  sixAutoFilterFired: EventEmitter<SixDropdownAutoFilterPayload>;\n\n  /** Emitted when the async filter is triggered */\n  @Event({ eventName: 'six-async-filter-fired' }) sixAsyncFilterFired: EventEmitter<SixDropdownAsyncFilterPayload>;\n\n  /** Emitted when the user scrolls inside dropdown panel.*/\n  @Event({ eventName: 'six-dropdown-scroll' }) sixScroll: EventEmitter<SixDropdownScrollPayload>;\n\n  readonly eventListeners = new EventListeners();\n\n  // internal representation of options, so we don't have to make options mutable\n  @State()\n  _options: SixMenuItemData[] = null;\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n    this.updateAccessibleTrigger();\n  }\n\n  @Watch('distance')\n  @Watch('hoist')\n  @Watch('placement')\n  @Watch('skidding')\n  handlePopoverOptionsChange() {\n    this.popover.setOptions({\n      strategy: this.hoist ? 'fixed' : 'absolute',\n      placement: this.placement,\n      distance: this.distance,\n      skidding: this.skidding,\n    });\n  }\n\n  @Watch('options')\n  handleOptionsChange() {\n    this._options = [...this.options];\n  }\n\n  connectedCallback() {\n    if (this.virtualScroll && this.options === null) {\n      console.error('Options must be defined when using virtual scrolling');\n    }\n\n    if (this.options !== null) {\n      this._options = [...this.options];\n    }\n\n    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);\n    this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);\n    this.handleMenuItemActivate = this.handleMenuItemActivate.bind(this);\n    this.handlePanelSelect = this.handlePanelSelect.bind(this);\n    this.handleTriggerClick = this.handleTriggerClick.bind(this);\n    this.handleTriggerKeyDown = this.handleTriggerKeyDown.bind(this);\n    this.handleTriggerKeyUp = this.handleTriggerKeyUp.bind(this);\n    this.handleTriggerSlotChange = this.handleTriggerSlotChange.bind(this);\n    this.handleDropdownScroll = this.handleDropdownScroll.bind(this);\n\n    if (this.hasBeenInitialized && !this.popover) {\n      // there was a weird bug when using six-dropdown inside an ag-grid filter. When closing the ag-grid filter\n      // disconnectedCallback() is executed. However, since componentDidLoad() will not be rerendered the popover had\n      // no longer a connected transitionEnd callback to the dropdown. To fix this, we have this sanity check here,\n      // to re-initialize the popover in case the component has already been initialized but the popover is undefined.\n      this.initializePopover();\n    }\n  }\n\n  componentDidLoad() {\n    this.hasBeenInitialized = true;\n    this.initializePopover();\n\n    // Show on init if open\n    if (this.open) {\n      void this.show();\n    }\n\n    if (this.filter) {\n      this.setupFiltering(this.handleFilterInputChange);\n    } else if (this.asyncFilter) {\n      this.setupFiltering(() => this.sixAsyncFilterFired.emit({ filterValue: this.filterInputElement.value }));\n    }\n  }\n\n  private initializePopover() {\n    const onAfterHide = () => {\n      if (this.filter) {\n        this.filterInputElement.value = '';\n\n        if (this._options !== null) {\n          this._options = [...this.options];\n        } else {\n          const menuItems = this.getMenuItems();\n          menuItems.forEach((item) => (item.style.display = 'unset'));\n        }\n      }\n\n      this.sixAfterHide.emit();\n    };\n\n    const onAfterShow = async () => {\n      if (this.hasFilterEnabled && this.autofocusFilter) {\n        // if dropdown filter is enabled we should autofocus the search field\n        await this.filterInputElement.setFocus();\n      }\n\n      this.sixAfterShow.emit();\n    };\n\n    const onTransitionEnd = () => {\n      if (!this.open) {\n        this.panel.scrollTop = 0;\n      }\n    };\n\n    this.popover = new Popover(this.trigger, this.positioner, {\n      strategy: this.hoist ? 'fixed' : 'absolute',\n      placement: this.placement,\n      distance: this.distance,\n      skidding: this.skidding,\n      transitionElement: this.panel,\n      onAfterHide,\n      onAfterShow,\n      onTransitionEnd,\n    });\n  }\n\n  private setupFiltering(callback: () => void) {\n    this.eventListeners.add(this.filterInputElement, 'six-input-input', debounce(callback, this.filterDebounce));\n  }\n\n  getMenuItems = (): HTMLSixMenuItemElement[] => {\n    if (this._options !== null) {\n      return this._options.map((option) => <six-menu-item value={option.value}>{option.label}</six-menu-item>);\n    }\n\n    const [panel] = getSlotChildren<HTMLSixMenuElement>(this.panel);\n\n    // the menu-items can be in a slot e.g. in six-select or direct children of the panel\n    return getSlotChildren(panel) || Array.from(panel.querySelectorAll('six-menu-item'));\n  };\n\n  handleFilterInputChange = () => {\n    const lowerCaseFilterTerm = this.filterInputElement.value?.toLowerCase()?.trim() || '';\n\n    if (this._options) {\n      this.handleFilteringForAttributeItems(lowerCaseFilterTerm);\n    } else {\n      this.handleFilteringForSlotItems(lowerCaseFilterTerm);\n    }\n\n    this.sixAutoFilterFired.emit({ filterValue: lowerCaseFilterTerm });\n  };\n\n  private handleFilteringForAttributeItems(lowerCaseFilterTerm: string) {\n    if (lowerCaseFilterTerm === '') {\n      this._options = [...this.options];\n      return;\n    }\n\n    this._options = this.options.filter(\n      (option) =>\n        (option.label && String(option.label)?.toLowerCase()?.includes(lowerCaseFilterTerm)) ||\n        (option.value && String(option.value)?.toLowerCase()?.includes(lowerCaseFilterTerm))\n    );\n  }\n\n  private handleFilteringForSlotItems(lowerCaseFilterTerm: string) {\n    const menuItems = this.getMenuItems();\n    menuItems.forEach(async (menuItem) => {\n      // hide all elements which don't contain the entered substring\n      const elementContainsFilterTerm =\n        menuItem?.value?.toLowerCase()?.includes(lowerCaseFilterTerm) ||\n        (await menuItem?.getTextLabel())?.toLowerCase()?.includes(lowerCaseFilterTerm);\n\n      menuItem.style.display = elementContainsFilterTerm ? 'unset' : 'none';\n    });\n  }\n\n  disconnectedCallback() {\n    this.eventListeners.removeAll();\n\n    void this.hide();\n    this.popover.destroy();\n    this.popover = null;\n  }\n\n  /** Shows the dropdown panel */\n  @Method()\n  async show() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (this.isVisible) {\n      return;\n    }\n\n    const sixShow = this.sixShow.emit();\n    if (sixShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.eventListeners.add(this.panel, 'six-menu-item-selected', this.handlePanelSelect);\n    this.eventListeners.add(document, 'keydown', this.handleDocumentKeyDown);\n    this.eventListeners.add(document, 'mousedown', this.handleDocumentMouseDown);\n\n    this.isVisible = true;\n    this.open = true;\n    this.popover.show();\n  }\n\n  /** Hides the dropdown panel */\n  @Method()\n  async hide() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (!this.isVisible) {\n      return;\n    }\n\n    const sixHide = this.sixHide.emit();\n    if (sixHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.eventListeners.remove(this.panel, 'six-menu-item-selected', this.handlePanelSelect);\n    this.eventListeners.remove(document, 'keydown', this.handleDocumentKeyDown);\n    this.eventListeners.remove(document, 'mousedown', this.handleDocumentMouseDown);\n\n    this.isVisible = false;\n    this.open = false;\n    this.popover.hide();\n  }\n\n  focusOnTrigger() {\n    const [trigger] = getSlotChildren<HTMLSixButtonElement>(this.trigger);\n    if (trigger) {\n      if (typeof trigger.setFocus === 'function') {\n        trigger.setFocus();\n      } else if (typeof trigger.focus === 'function') {\n        trigger.focus();\n      }\n    }\n  }\n\n  getMenu() {\n    const [menu] = getSlotChildren<HTMLSixMenuElement>(this.panel).filter(isSixMenu);\n    return menu;\n  }\n\n  /**\n   * Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu\n   * is activated.\n   */\n  @Method()\n  async reposition() {\n    if (!this.open) {\n      return;\n    }\n    this.popover.reposition();\n  }\n\n  handleDocumentKeyDown(event: KeyboardEvent) {\n    // Close when escape is pressed\n    if (event.key === 'Escape') {\n      void this.hide();\n      this.focusOnTrigger();\n      return;\n    }\n\n    if (this.filterInputElement === this.host.shadowRoot.activeElement) {\n      if (event.key === 'ArrowDown') {\n        const item = this.getMenuItems().find((item) => item.style.display !== 'none');\n        if (item) {\n          item.setFocus();\n        }\n      }\n    }\n\n    // Handle tabbing\n    if (event.key === 'Tab') {\n      // Tabbing within an open menu should close the dropdown and refocus the trigger\n      if (this.open && isSixMenuItem(document.activeElement)) {\n        event.preventDefault();\n        void this.hide();\n        this.focusOnTrigger();\n        return;\n      }\n\n      // Tabbing outside of the containing element closes the panel\n      //\n      // If the dropdown is used within a shadow DOM, we need to obtain the activeElement within that shadowRoot,\n      // otherwise `document.activeElement` will only return the name of the parent shadow DOM element.\n      setTimeout(() => {\n        const activeElement =\n          this.container.getRootNode() instanceof ShadowRoot\n            ? document.activeElement.shadowRoot?.activeElement\n            : document.activeElement;\n\n        if (activeElement?.closest(this.container.tagName.toLowerCase()) !== this.container) {\n          void this.hide();\n          return;\n        }\n      });\n    }\n  }\n\n  handleDocumentMouseDown(event: MouseEvent) {\n    // Close when clicking outside of the containing element\n    const path = event.composedPath() as EventTarget[];\n    if (!path.includes(this.container)) {\n      void this.hide();\n      return;\n    }\n  }\n\n  handleMenuItemActivate(event: CustomEvent) {\n    const item = event.target as HTMLSixMenuItemElement;\n    scrollIntoView(item, this.panel);\n  }\n\n  handlePanelSelect(event: CustomEvent) {\n    const target = event.target as HTMLElement;\n\n    // Hide the dropdown when a menu item is selected\n    if (this.closeOnSelect && isSixMenu(target)) {\n      void this.hide();\n      this.focusOnTrigger();\n    }\n  }\n\n  handleTriggerClick() {\n    this.open ? this.hide() : this.show();\n  }\n\n  handleTriggerKeyDown(event: KeyboardEvent) {\n    const menu = this.getMenu();\n    const menuItems = menu ? [...menu.querySelectorAll('six-menu-item')] : null;\n    const firstMenuItem = menuItems[0];\n    const lastMenuItem = menuItems[menuItems.length - 1];\n\n    // Close when escape or tab is pressed\n    if (event.key === 'Escape') {\n      this.focusOnTrigger();\n      void this.hide();\n      return;\n    }\n\n    // When spacebar/enter is pressed, show the panel but don't focus on the menu. This let's the user press the same\n    // key again to hide the menu in case they don't want to make a selection.\n    if (!this.disableHideOnEnterAndSpace && [' ', 'Enter'].includes(event.key)) {\n      event.preventDefault();\n      this.open ? void this.hide() : void this.show();\n      return;\n    }\n\n    // When up/down is pressed, we make the assumption that the user is familiar with the menu and plans to make a\n    // selection. Rather than toggle the panel, we focus on the menu (if one exists) and activate the first item for\n    // faster navigation.\n    if (['ArrowDown', 'ArrowUp'].includes(event.key)) {\n      event.preventDefault();\n\n      // Show the menu if it's not already open\n      if (!this.open) {\n        void this.show();\n      }\n\n      // Focus on a menu item\n      if (event.key === 'ArrowDown' && firstMenuItem) {\n        firstMenuItem.setFocus();\n        return;\n      }\n\n      if (event.key === 'ArrowUp' && lastMenuItem) {\n        lastMenuItem.setFocus();\n        return;\n      }\n    }\n\n    // Other keys bring focus to the menu and initiate type-to-select behavior\n    const ignoredKeys = ['Tab', 'Shift', 'Meta', 'Ctrl', 'Alt'];\n    if (this.open && menu && !ignoredKeys.includes(event.key)) {\n      void menu.typeToSelect(event.key);\n      return;\n    }\n  }\n\n  handleTriggerKeyUp(event: KeyboardEvent) {\n    // Prevent space from triggering a click event in Firefox\n    if (event.key === ' ') {\n      event.preventDefault();\n    }\n  }\n\n  handleTriggerSlotChange() {\n    this.updateAccessibleTrigger();\n  }\n\n  handleDropdownScroll() {\n    this.sixScroll.emit({\n      scrollHeight: this.panel.scrollHeight,\n      scrollTop: this.panel.scrollTop,\n      scrollbarHeight: this.panel.offsetHeight * (this.panel.offsetHeight / this.panel.scrollHeight),\n      scrollRatio: this.panel.scrollTop / (this.panel.scrollHeight - this.panel.clientHeight),\n    });\n  }\n\n  //\n  // Slotted triggers can be arbitrary content, but we need to link them to the dropdown panel with `aria-haspopup` and\n  // `aria-expanded`. These must be applied to the \"accessible trigger\" (the tabbable portion of the trigger element\n  // that gets slotted in) so screen readers will understand them. The accessible trigger could be the slotted element,\n  // a child of the slotted element, or an element in the slotted element's shadow root.\n  //\n  // For example, the accessible trigger of an <sl-button> is a <button> located inside its shadow root.\n  //\n  // To determine this, we assume the first tabbable element in the trigger slot is the \"accessible trigger.\"\n  //\n  updateAccessibleTrigger() {\n    const [accessibleTrigger] = getSlotChildren(this.trigger).map(getNearestTabbableElement);\n\n    if (accessibleTrigger) {\n      accessibleTrigger.setAttribute('aria-haspopup', 'true');\n      accessibleTrigger.setAttribute('aria-expanded', this.open ? 'true' : 'false');\n    }\n  }\n\n  render() {\n    return (\n      <div\n        part=\"base\"\n        id={this.componentId}\n        class={{\n          dropdown: true,\n          'dropdown--open': this.open,\n        }}\n      >\n        <span\n          part=\"trigger\"\n          class=\"dropdown__trigger\"\n          ref={(el) => (this.trigger = el)}\n          onClick={this.handleTriggerClick}\n          onKeyDown={this.handleTriggerKeyDown}\n          onKeyUp={this.handleTriggerKeyUp}\n        >\n          <slot name=\"trigger\" onSlotchange={this.handleTriggerSlotChange} />\n        </span>\n\n        {/* Position the panel with a wrapper since the popover makes use of `translate`. This let's us add transitions\n        on the panel without interfering with the position. */}\n        <div\n          ref={(el) => (this.positioner = el)}\n          class={{\n            dropdown__positioner: true,\n            dropdown__positioner__filtered: (this.filter || this.asyncFilter) && !this.hoist,\n          }}\n        >\n          {this.hasFilterEnabled && (\n            <six-input\n              class={{\n                'filter-hidden': !this.open,\n              }}\n              aria-hidden={this.open ? 'false' : 'true'}\n              ref={(el) => (this.filterInputElement = el)}\n              placeholder={this.filterPlaceholder}\n            />\n          )}\n          <div\n            ref={(el) => (this.panel = el)}\n            part=\"panel\"\n            class=\"dropdown__panel\"\n            role=\"menu\"\n            aria-hidden={this.open ? 'false' : 'true'}\n            aria-labelledby={this.componentId}\n            onScroll={this.handleDropdownScroll}\n          >\n            <slot />\n            {this._options && (\n              <six-menu part=\"menu\" items={this._options} virtualScroll={this.virtualScroll}></six-menu>\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n","@import 'src/global/component';\n\n:host {\n  display: block;\n}\n\n.menu {\n  padding: 0 0;\n  border: none;\n  box-shadow: var(--six-elevation-2dp);\n\n  &:focus {\n    outline: none;\n  }\n\n  &--noshadow {\n    box-shadow: none;\n  }\n\n  &__wrapper {\n    &--scrollable {\n      overflow-y: auto;\n    }\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport { getTextContent } from '../../utils/slot';\nimport { StyleDeclaration } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { debounce } from '../../utils/execution-control';\n\nexport interface SixMenuItemData {\n  label: string;\n  value: string;\n}\n\nexport interface SixMenuItemSelectedPayload {\n  name: string;\n  item: HTMLSixMenuItemElement;\n}\n\nconst isFocusedMenuItem = (menuItem: HTMLSixMenuItemElement) =>\n  menuItem?.shadowRoot?.querySelector('.menu-item')?.classList?.contains('menu-item--focused');\n\nconst isSIXMenuItemElement = (el?: Element): el is HTMLSixMenuItemElement =>\n  el?.tagName.toLowerCase() === 'six-menu-item';\n\nconst mapToMenuItem = ({ value, label }) => <six-menu-item value={value}>{label}</six-menu-item>;\n\nconst DEFAULT_NUMBER_OF_ITEMS_SHOWN_FOR_VIRTUAL_SCROLLING = 5;\n\nconst DEFAULT_SIX_MENU_ITEM_HEIGHT = 64;\n\nconst ITEMS_SHOWN_NOT_SET = undefined;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The menu's content, including menu items, menu dividers, and menu labels.\n *\n * @part base - The component's base wrapper.\n */\n@Component({\n  tag: 'six-menu',\n  styleUrl: 'six-menu.scss',\n  shadow: true,\n})\nexport class SixMenu {\n  private readonly eventListeners = new EventListeners();\n\n  menu: HTMLElement;\n  menuWrapper: HTMLElement;\n  typeToSelectString = '';\n  typeToSelectTimeout: NodeJS.Timeout;\n\n  @Element() host: HTMLSixMenuElement;\n\n  /** Emitted when a menu item is selected. */\n  @Event({ eventName: 'six-menu-item-selected' }) sixMenuItemSelected: EventEmitter<SixMenuItemSelectedPayload>;\n\n  /** Set to true to remove the box-shadow */\n  @Prop() removeBoxShadow: boolean = false;\n\n  /** Set the options to be shown in the dropdown */\n  @Prop() items: SixMenuItemData[] | null = null;\n\n  /** Defines how many items should be shown. If the number of items is larger than this properties a scrollbar will be shown */\n  @Prop() itemsShown?: number = ITEMS_SHOWN_NOT_SET;\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: boolean = false;\n\n  /**\n   * Used for virtual scrolling\n   * Define how many items should be rendered in the DOM when using virtual scrolling\n   */\n  @Prop() itemSize: number = 10;\n\n  /**\n   * Used for virtual scrolling\n   * Define the debounce for listening on scrolling changes in milliseconds.\n   * The lower the number the more sensitive the component reacts to scrolling changes.\n   */\n  @Prop() scrollingDebounce: number = 15;\n\n  /**\n   * Used to calculate which items should be rendered in the DOM\n   */\n  @State()\n  private scrollingIndex: number = 0;\n\n  // set a default item height, this variable will be updated with the real value after the first render.\n  // However, it's necessary to have a default value because we can only fetch the proper hight after the first render\n  @State()\n  sixMenuItemHeight = DEFAULT_SIX_MENU_ITEM_HEIGHT;\n\n  connectedCallback() {\n    this.handleClick = this.handleClick.bind(this);\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n  }\n\n  componentWillLoad() {\n    if (this.items === null) {\n      return;\n    }\n  }\n\n  private handleScrolling = () => {\n    // for performance improvements we only update the DOM if the scrollRatio change \"enough\"\n    this.scrollingIndex = Math.floor(this.menuWrapper.scrollTop / this.sixMenuItemHeight);\n  };\n\n  componentDidLoad() {\n    this.setupForVirtualScrollingAfterRendering();\n  }\n\n  disconnectedCallback() {\n    this.eventListeners.removeAll();\n  }\n\n  /**\n   * Initiates type-to-select logic, which automatically selects an option based on what the user is currently typing.\n   * The key passed will be appended to the internal query and the selection will be updated. After a brief period, the\n   * internal query is cleared automatically. This method is intended to be used with the keydown event. Useful for\n   * enabling type-to-select when the menu doesn't have focus.\n   */\n  @Method()\n  async typeToSelect(key: string) {\n    clearTimeout(this.typeToSelectTimeout);\n    this.typeToSelectTimeout = setTimeout(() => (this.typeToSelectString = ''), 750);\n    this.typeToSelectString += key.toLowerCase();\n    const items = this.getItems();\n    for (const item of items) {\n      const slot = item.shadowRoot?.querySelector('slot:not([name])') as HTMLSlotElement;\n      const label = getTextContent(slot).toLowerCase().trim();\n      if (label.substring(0, this.typeToSelectString.length) === this.typeToSelectString) {\n        item.setFocus();\n        break;\n      }\n    }\n  }\n\n  private getItemsShown() {\n    const defaultItemsShown = this.virtualScroll\n      ? DEFAULT_NUMBER_OF_ITEMS_SHOWN_FOR_VIRTUAL_SCROLLING\n      : ITEMS_SHOWN_NOT_SET;\n\n    return this.itemsShown ?? defaultItemsShown;\n  }\n\n  private setupForVirtualScrollingAfterRendering() {\n    if (!this.virtualScroll) {\n      return;\n    }\n\n    this.eventListeners.add(this.menuWrapper, 'scroll', debounce(this.handleScrolling, this.scrollingDebounce));\n\n    // set menu height to proper height once the item is rendered.\n    const menuItemHeight = this.menu?.querySelector('six-menu-item')?.clientHeight;\n    if (menuItemHeight && menuItemHeight > 0) {\n      this.sixMenuItemHeight = menuItemHeight;\n    }\n  }\n\n  getItems() {\n    if (this.items !== null && this.items !== undefined) {\n      return this.items.map(mapToMenuItem);\n    }\n\n    const slot = this.menu.querySelector('slot');\n    return [...slot.assignedElements({ flatten: true })].filter((el) => isSIXMenuItemElement(el) && !el.disabled);\n  }\n\n  private getActiveItemIndex() {\n    const items = this.getItems();\n    const selectedItem = this.getActiveItem();\n    const itemIndex = items.indexOf(selectedItem);\n\n    if (itemIndex > -1) {\n      return itemIndex;\n    }\n\n    const sixMenuItems = this.extractItemsFromDOM();\n    return sixMenuItems.findIndex(isFocusedMenuItem);\n  }\n\n  getActiveItem() {\n    const activeElement = this.getItems().find((i) => i === document.activeElement);\n\n    if (activeElement) {\n      return activeElement;\n    }\n\n    return this.extractItemsFromDOM()?.find(isFocusedMenuItem);\n  }\n\n  private extractItemsFromDOM() {\n    return Array.from(this.host?.shadowRoot?.querySelectorAll('six-menu-item'));\n  }\n\n  setActiveItem(item: HTMLSixMenuItemElement) {\n    item.setFocus();\n  }\n\n  handleClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n    const clickedItem = target.closest('six-menu-item');\n    if (clickedItem && !clickedItem.disabled) {\n      this.sixMenuItemSelected.emit({ name: clickedItem.value, item: clickedItem });\n    }\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    // Make a selection when pressing enter\n    if (event.key === 'Enter') {\n      const activeItem = this.getActiveItem();\n      event.preventDefault();\n\n      if (activeItem) {\n        this.sixMenuItemSelected.emit({ name: activeItem.value, item: activeItem });\n      }\n    }\n\n    // Prevent scrolling when space is pressed\n    if (event.key === ' ') {\n      event.preventDefault();\n    }\n\n    // Move the selection when pressing down or up\n    if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {\n      const items = this.items === null ? this.getItems() : this.extractItemsFromDOM();\n\n      let indexOfActiveItem = this.getActiveItemIndex();\n\n      if (items.length) {\n        event.preventDefault();\n\n        if (event.key === 'ArrowDown') {\n          indexOfActiveItem++;\n        } else if (event.key === 'ArrowUp') {\n          indexOfActiveItem--;\n        } else if (event.key === 'Home') {\n          indexOfActiveItem = 0;\n        } else if (event.key === 'End') {\n          indexOfActiveItem = items.length - 1;\n        }\n\n        if (indexOfActiveItem < 0) indexOfActiveItem = 0;\n        if (indexOfActiveItem > items.length - 1) indexOfActiveItem = items.length - 1;\n\n        this.setActiveItem(items[indexOfActiveItem]);\n\n        return;\n      }\n    }\n\n    void this.typeToSelect(event.key);\n  }\n\n  private getMenuWrapperStyle() {\n    const styles: Partial<StyleDeclaration> = {};\n\n    if (this.getItemsShown() > 0) {\n      // calculate the proper height to show the correct number of items\n      styles.height = `${this.getItemsShown() * this.sixMenuItemHeight}px`;\n    }\n\n    return {\n      ...styles,\n    };\n  }\n\n  private getMenuContainerStyle() {\n    const styles: Partial<StyleDeclaration> = {};\n\n    if (this.virtualScroll) {\n      // calculate height of content are if all items would be rendered so the scrollbar has the proper size\n      styles.transform = `translateY(${this.sixMenuItemHeight * this.scrollingIndex}px)`;\n    }\n\n    return {\n      ...styles,\n    };\n  }\n\n  private getScrollbarGhostStyle() {\n    const styles: Partial<StyleDeclaration> = {};\n\n    if (this.virtualScroll && this.items !== null) {\n      styles.height = `${this.items.length * this.sixMenuItemHeight - this.itemSize * this.sixMenuItemHeight}px`;\n    }\n\n    return {\n      ...styles,\n    };\n  }\n\n  private renderItems() {\n    if (this.items === undefined || this.items === null) {\n      return;\n    }\n\n    if (!this.virtualScroll) {\n      return this.items.map(mapToMenuItem);\n    }\n\n    return this.items\n      .slice(this.scrollingIndex, Math.min(this.items.length, this.itemSize + this.scrollingIndex))\n      .map(mapToMenuItem);\n  }\n\n  render() {\n    return (\n      <div\n        ref={(el) => (this.menuWrapper = el)}\n        style={this.getMenuWrapperStyle()}\n        part=\"wrapper\"\n        class={{\n          menu: true,\n          'menu--noshadow': this.removeBoxShadow,\n          'menu__wrapper--scrollable': this.getItemsShown() > 0,\n        }}\n      >\n        <div\n          ref={(el) => (this.menu = el)}\n          part=\"base\"\n          role=\"menu\"\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n          tabIndex={0}\n          style={this.getMenuContainerStyle()}\n        >\n          <slot />\n          {this.renderItems()}\n        </div>\n        {this.virtualScroll && <div style={this.getScrollbarGhostStyle()} />}\n      </div>\n    );\n  }\n}\n"],"mappings":"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"}

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

@@ -1,2 +0,0 @@
-import{r as e,c as a,h as s}from"./p-ac4f4d45.js";const t=".language-switcher__container{display:flex}.language-switcher__separator{padding:0 0.25rem}.language-switcher__label{cursor:pointer}.language-switcher__label:hover{color:var(--six-color-red)}.language-switcher__label--selected{color:var(--six-color-red)}";const r=["EN","DE","ES"];const i=class{constructor(s){e(this,s);this.sixChange=a(this,"six-language-switcher-change",7);this.handleLanguageSwitching=(e,a)=>()=>{if(a!==undefined){this.sixChange.emit(a)}else{this.sixChange.emit(e)}this.selected=e};this.selected=undefined;this.languages=r}handleChangesLanguages(e){if(!Array.isArray(e)){throw new Error("languages is expected to be an array")}this.updateSelectedLanguage()}componentWillLoad(){if(this.selected===undefined){this.updateSelectedLanguage()}}updateSelectedLanguage(){const e=this.languages[0];if(typeof e==="string"){this.selected=e;this.sixChange.emit(this.selected)}else{this.selected=e.key;this.sixChange.emit(e.value)}}render(){return s("div",{part:"container",class:"language-switcher__container"},this.languages.map(((e,a)=>{const t=typeof e==="string"?e:e.key;return s("div",{onClick:this.handleLanguageSwitching(t,e.value)},s("span",{part:"label",class:{"language-switcher__label":true,"language-switcher__label--selected":this.selected===t}},t),a<this.languages.length-1&&s("span",{part:"separator",class:"language-switcher__separator"},"/"))})))}static get watchers(){return{languages:["handleChangesLanguages"]}}};i.style=t;export{i as six_language_switcher};
-//# sourceMappingURL=p-c0cb6436.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["sixLanguageSwitcherCss","DEFAULT_LANGUAGES","SixLanguageSwitcher","this","handleLanguageSwitching","newLanguage","languageValue","undefined","sixChange","emit","selected","handleChangesLanguages","newValue","Array","isArray","Error","updateSelectedLanguage","componentWillLoad","selectedLanguage","languages","key","value","render","h","part","class","map","lang","index","language","onClick","length"],"sources":["./src/components/six-language-switcher/six-language-switcher.scss?tag=six-language-switcher&encapsulation=shadow","./src/components/six-language-switcher/six-language-switcher.tsx"],"sourcesContent":[".language-switcher {\n  &__container {\n    display: flex;\n  }\n\n  &__separator {\n    padding: 0 0.25rem;\n  }\n\n  &__label {\n    cursor: pointer;\n\n    &:hover {\n      color: var(--six-color-red);\n    }\n\n    &--selected {\n      color: var(--six-color-red);\n    }\n  }\n}\n","import { Component, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\n\n/**\n * @since 2.1.0\n * @status experimental\n **/\n\nexport interface SixLanguageSwitcherInput {\n  key: string;\n  value: string;\n}\nexport type SixLanguageSwitcherChangePayload = string;\n\nconst DEFAULT_LANGUAGES = ['EN', 'DE', 'ES'];\n\n/*\n * @since 2.2.0\n * @status experimental\n * @part container - The whole component container\n * @part label - The language label\n * @part separator - The separator between the language labels\n */\n@Component({\n  tag: 'six-language-switcher',\n  styleUrl: 'six-language-switcher.scss',\n  shadow: true,\n})\nexport class SixLanguageSwitcher {\n  /** The language which should be shown as selected */\n  @Prop({ mutable: true, reflect: true }) selected?: string;\n\n  /** The languages which should be selectable options. */\n  @Prop() languages: string[] | SixLanguageSwitcherInput[] = DEFAULT_LANGUAGES;\n\n  @Watch('languages')\n  handleChangesLanguages(newValue: string[]) {\n    if (!Array.isArray(newValue)) {\n      throw new Error('languages is expected to be an array');\n    }\n\n    this.updateSelectedLanguage();\n  }\n  /**\n   * Emitted when the language switchers value changes\n   */\n  @Event({ eventName: 'six-language-switcher-change' }) sixChange: EventEmitter<SixLanguageSwitcherChangePayload>;\n\n  componentWillLoad() {\n    if (this.selected === undefined) {\n      this.updateSelectedLanguage();\n    }\n  }\n\n  private updateSelectedLanguage() {\n    const selectedLanguage = this.languages[0];\n    if (typeof selectedLanguage === 'string') {\n      this.selected = selectedLanguage;\n      this.sixChange.emit(this.selected);\n    } else {\n      this.selected = selectedLanguage.key;\n      this.sixChange.emit(selectedLanguage.value);\n    }\n  }\n\n  private handleLanguageSwitching = (newLanguage: string, languageValue?: string) => () => {\n    if (languageValue !== undefined) {\n      this.sixChange.emit(languageValue);\n    } else {\n      this.sixChange.emit(newLanguage);\n    }\n    this.selected = newLanguage;\n  };\n\n  render() {\n    return (\n      <div part=\"container\" class=\"language-switcher__container\">\n        {this.languages.map((lang, index) => {\n          const language = typeof lang === 'string' ? lang : lang.key;\n          return (\n            <div onClick={this.handleLanguageSwitching(language, lang.value)}>\n              <span\n                part=\"label\"\n                class={{\n                  'language-switcher__label': true,\n                  'language-switcher__label--selected': this.selected === language,\n                }}\n              >\n                {language}\n              </span>\n              {index < this.languages.length - 1 && (\n                <span part=\"separator\" class=\"language-switcher__separator\">\n                  /\n                </span>\n              )}\n            </div>\n          );\n        })}\n      </div>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAyB,iQCa/B,MAAMC,EAAoB,CAAC,KAAM,KAAM,M,MAc1BC,EAAmB,M,iFAqCtBC,KAAAC,wBAA0B,CAACC,EAAqBC,IAA2B,KACjF,GAAIA,IAAkBC,UAAW,CAC/BJ,KAAKK,UAAUC,KAAKH,E,KACf,CACLH,KAAKK,UAAUC,KAAKJ,E,CAEtBF,KAAKO,SAAWL,CAAW,E,uCAtC8BJ,C,CAG3DU,uBAAuBC,GACrB,IAAKC,MAAMC,QAAQF,GAAW,CAC5B,MAAM,IAAIG,MAAM,uC,CAGlBZ,KAAKa,wB,CAOPC,oBACE,GAAId,KAAKO,WAAaH,UAAW,CAC/BJ,KAAKa,wB,EAIDA,yBACN,MAAME,EAAmBf,KAAKgB,UAAU,GACxC,UAAWD,IAAqB,SAAU,CACxCf,KAAKO,SAAWQ,EAChBf,KAAKK,UAAUC,KAAKN,KAAKO,S,KACpB,CACLP,KAAKO,SAAWQ,EAAiBE,IACjCjB,KAAKK,UAAUC,KAAKS,EAAiBG,M,EAazCC,SACE,OACEC,EAAA,OAAKC,KAAK,YAAYC,MAAM,gCACzBtB,KAAKgB,UAAUO,KAAI,CAACC,EAAMC,KACzB,MAAMC,SAAkBF,IAAS,SAAWA,EAAOA,EAAKP,IACxD,OACEG,EAAA,OAAKO,QAAS3B,KAAKC,wBAAwByB,EAAUF,EAAKN,QACxDE,EAAA,QACEC,KAAK,QACLC,MAAO,CACL,2BAA4B,KAC5B,qCAAsCtB,KAAKO,WAAamB,IAGzDA,GAEFD,EAAQzB,KAAKgB,UAAUY,OAAS,GAC/BR,EAAA,QAAMC,KAAK,YAAYC,MAAM,gCAA8B,KAIzD,I"}

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

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