@six-group/ui-library 0.0.0-insider.afba913 → 0.0.0-insider.b0fd8e9

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

@@ -1 +0,0 @@
-{"version":3,"names":["sixSwitchCss","id","SixSwitch","constructor","hostRef","this","switchId","labelId","errorTextId","eventListeners","EventListeners","hasFocus","hasErrorTextSlot","name","value","disabled","required","checked","label","errorText","invalid","handleSlotChange","hasSlot","host","handleClick","inputElement","sixChange","emit","handleBlur","sixBlur","handleFocus","sixFocus","handleKeyDown","event","key","preventDefault","handleMouseDown","_a","focus","componentWillLoad","handleCheckedChange","connectedCallback","shadowRoot","addEventListener","forward","disconnectedCallback","removeEventListener","removeAll","handleLabelChange","setFocus","options","removeFocus","blur","render","h","FormControl","inputId","hasLabelSlot","errorTextCount","size","displayError","part","htmlFor","class","switch","onMouseDown","ref","el","type","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@import '../../functional-components/form-control/form-control';\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:\n    var(--six-transition-fast) border-color,\n    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:\n      var(--six-transition-fast) transform ease,\n      var(--six-transition-fast) background-color,\n      var(--six-transition-fast) border-color,\n      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, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\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 * @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 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  private switchId = `switch-${++id}`;\n  private labelId = `switch-label-${id}`;\n  private errorTextId = `input-error-text-${id}`;\n\n  private inputElement?: HTMLInputElement;\n  private eventListeners = new EventListeners();\n\n  @Element() host!: HTMLSixSwitchElement;\n\n  @State() hasFocus = false;\n  @State() hasErrorTextSlot = false;\n\n  /** The switch's name attribute. */\n  @Prop() name = '';\n\n  /** The switch's value attribute. */\n  @Prop() value = 'on';\n\n  /** Set to true to disable the switch. */\n  @Prop() disabled = false;\n\n  /** Set to true to show an asterisk beneath the label. */\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  /** The label text. */\n  @Prop() label = '';\n\n  /** The error message shown, if `invalid` is set to true.  */\n  @Prop() errorText: string | string[] = '';\n\n  /** The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 */\n  @Prop() errorTextCount?: number;\n\n  /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */\n  @Prop({ reflect: true }) invalid = false;\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  @Watch('checked')\n  handleCheckedChange() {\n    if (this.inputElement != null) {\n      this.inputElement.checked = this.checked;\n      this.checked = this.inputElement.checked;\n    }\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  connectedCallback() {\n    this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.forward('six-switch-change', 'change', this.host);\n    this.eventListeners.forward('six-switch-blur', 'blur', this.host);\n    this.eventListeners.forward('six-switch-focus', 'focus', this.host);\n  }\n\n  disconnectedCallback() {\n    this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.removeAll();\n  }\n\n  @Watch('errorText')\n  @Watch('label')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  private handleSlotChange = () => {\n    this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n  };\n\n  /** Sets focus on the switch. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.inputElement?.focus(options);\n  }\n\n  /** Removes focus from the switch. */\n  @Method()\n  async removeFocus() {\n    this.inputElement?.blur();\n  }\n\n  private handleClick = () => {\n    if (this.inputElement != null) {\n      this.checked = this.inputElement.checked;\n      this.sixChange.emit(this.checked);\n    }\n  };\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.sixBlur.emit(this.checked);\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.sixFocus.emit();\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'ArrowLeft') {\n      event.preventDefault();\n      this.checked = false;\n      this.sixChange.emit(this.checked);\n    }\n\n    if (event.key === 'ArrowRight') {\n      event.preventDefault();\n      this.checked = true;\n      this.sixChange.emit(this.checked);\n    }\n  };\n\n  private handleMouseDown = (event: MouseEvent) => {\n    // Prevent clicks on the label from briefly blurring the input\n    event.preventDefault();\n    this.inputElement?.focus();\n  };\n\n  render() {\n    return (\n      <FormControl\n        inputId={this.switchId}\n        label={this.label}\n        labelId={this.labelId}\n        hasLabelSlot={false}\n        errorTextId={this.errorTextId}\n        errorText={this.errorText}\n        errorTextCount={this.errorTextCount}\n        hasErrorTextSlot={this.hasErrorTextSlot}\n        size=\"medium\"\n        disabled={this.disabled}\n        required={this.required}\n        displayError={this.invalid}\n      >\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.inputElement = 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      </FormControl>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as t,c as i,h as a,H as o,g as s}from"./p-D0Go1Zjj.js";const e=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{display:flex}.tab{display:inline-flex;align-items:center;font-family:var(--six-font-family);font-size:var(--six-font-size-small);font-weight:var(--six-font-weight-semibold);color:var(--six-tab-color);padding:var(--six-spacing-medium) var(--six-spacing-large);white-space:nowrap;user-select:none;cursor:pointer;width:100%}.tab:focus{outline:none}.tab:focus-visible{outline:var(--six-focus-ring);outline-offset:calc(-1 * var(--six-focus-ring-width) - var(--six-focus-ring-offset))}.tab.tab--active:not(.tab--disabled){color:var(--six-tab-color-active);font-weight:var(--six-font-weight-bold)}.tab.tab--closable{padding-right:var(--six-spacing-small)}.tab.tab--disabled{color:var(--six-tab-color-disabled);cursor:not-allowed}.tab:hover:not(.tab--disabled){color:var(--six-tab-color-hover)}.tab__close-button{font-size:var(--six-font-size-large);margin-left:var(--six-spacing-xx-small)}.tab__close-button::part(base){padding:var(--six-spacing-xxx-small)}.tab__indicator{position:absolute}.tab__indicator.tab__indicator--active{background-color:var(--six-tab-border-color-active)}.tab--top{margin-bottom:var(--six-spacing-xxx-small)}.tab__indicator--top{width:100%;bottom:0;height:var(--six-tab-border-width)}.tab--bottom{margin-top:var(--six-spacing-xxx-small)}.tab__indicator--bottom{width:100%;top:0;height:var(--six-tab-border-width)}.tab--left{margin-right:var(--six-spacing-xxx-small)}.tab__indicator--left{height:100%;right:0;top:0;width:var(--six-tab-border-width)}.tab--right{margin-left:var(--six-spacing-xxx-small)}.tab__indicator--right{height:100%;left:0;top:0;width:var(--six-tab-border-width)}";let r=0;const b=class{constructor(a){t(this,a);this.sixClose=i(this,"six-tab-close");this.componentId=`tab-${++r}`;this.panel="";this.active=false;this.closable=false;this.disabled=false}connectedCallback(){this.handleCloseClick=this.handleCloseClick.bind(this)}async setFocus(t){var i;(i=this.tab)===null||i===void 0?void 0:i.focus(t)}async removeFocus(){var t;(t=this.tab)===null||t===void 0?void 0:t.blur()}handleCloseClick(){this.sixClose.emit()}render(){var t;const i=this.host.closest("six-tab-group");const s=(t=i===null||i===void 0?void 0:i.placement)!==null&&t!==void 0?t:"top";return a(o,{key:"6b59af3a0794c9ea26b362fa1ea1c0d7513babea",id:this.host.id||this.componentId},a("div",{key:"fdb3e8ffb5523a1e6c0f07287925169a0f5fd07f",part:"base",ref:t=>this.tab=t,class:{tab:true,"tab--top":s==="top","tab--bottom":s==="bottom","tab--left":s==="left","tab--right":s==="right","tab--active":this.active,"tab--closable":this.closable,"tab--disabled":this.disabled},role:"tab","aria-disabled":this.disabled?"true":"false","aria-selected":this.active?"true":"false",tabindex:this.disabled||!this.active?"-1":"0"},a("slot",{key:"907db4032971efbd5a4cfe145db3347404dba051"}),this.closable&&a("six-icon-button",{key:"117fbf10c199b315c8df0f4469b45b63956e156b",name:"close",size:"xSmall",exportparts:"base:close-button",class:"tab__close-button",onClick:this.handleCloseClick,tabIndex:-1,"aria-hidden":"true"})),a("div",{key:"0227ba2ba257cd478488d2b2d6f580bc5e95340b",part:this.active?"active-tab-indicator":"",class:{tab__indicator:true,"tab__indicator--active":this.active,"tab__indicator--top":s==="top","tab__indicator--bottom":s==="bottom","tab__indicator--left":s==="left","tab__indicator--right":s==="right"}}))}get host(){return s(this)}};b.style=e;export{b as six_tab};
-//# sourceMappingURL=p-d1bd67af.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["sixTabCss","id","SixTab","constructor","hostRef","this","componentId","panel","active","closable","disabled","connectedCallback","handleCloseClick","bind","setFocus","options","_a","tab","focus","removeFocus","blur","sixClose","emit","render","tabGroup","host","closest","placement","h","Host","key","part","ref","el","class","role","tabindex","name","size","exportparts","onClick","tabIndex","tab__indicator"],"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: flex;\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  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  width: 100%;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: var(--six-focus-ring);\n    outline-offset: calc(-1 * var(--six-focus-ring-width) - var(--six-focus-ring-offset));\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\n// TAB INDICATOR\n.tab__indicator {\n  position: absolute;\n  &.tab__indicator--active {\n    background-color: var(--six-tab-border-color-active);\n  }\n}\n\n// TOP\n.tab--top {\n  margin-bottom: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--top {\n  width: 100%;\n  bottom: 0;\n  height: var(--six-tab-border-width);\n}\n\n// BOTTOM\n.tab--bottom {\n  margin-top: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--bottom {\n  width: 100%;\n  top: 0;\n  height: var(--six-tab-border-width);\n}\n\n// LEFT\n.tab--left {\n  margin-right: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--left {\n  height: 100%;\n  right: 0;\n  top: 0;\n  width: var(--six-tab-border-width);\n}\n\n// RIGHT\n.tab--right {\n  margin-left: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--right {\n  height: 100%;\n  left: 0;\n  top: 0;\n  width: var(--six-tab-border-width);\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } 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  private componentId = `tab-${++id}`;\n  private 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  private handleCloseClick() {\n    this.sixClose.emit();\n  }\n\n  render() {\n    const tabGroup: HTMLSixTabGroupElement | null = this.host.closest('six-tab-group');\n    const placement = tabGroup?.placement ?? 'top';\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            // Placements\n            'tab--top': placement === 'top',\n            'tab--bottom': placement === 'bottom',\n            'tab--left': placement === 'left',\n            'tab--right': placement === 'right',\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        <div\n          part={this.active ? 'active-tab-indicator' : ''}\n          class={{\n            tab__indicator: true,\n            'tab__indicator--active': this.active,\n\n            // Placements\n            'tab__indicator--top': placement === 'top',\n            'tab__indicator--bottom': placement === 'bottom',\n            'tab__indicator--left': placement === 'left',\n            'tab__indicator--right': placement === 'right',\n          }}\n        ></div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAY,gzDCGlB,IAAIC,EAAK,E,MAmBIC,EAAM,MALnB,WAAAC,CAAAC,G,gDAMUC,KAAAC,YAAc,SAASL,IAMNI,KAAKE,MAAG,GAGRF,KAAMG,OAAG,MAG1BH,KAAQI,SAAG,MAGMJ,KAAQK,SAAG,KAkFrC,CA7EC,iBAAAC,GACEN,KAAKO,iBAAmBP,KAAKO,iBAAiBC,KAAKR,K,CAKrD,cAAMS,CAASC,G,OACbC,EAAAX,KAAKY,OAAG,MAAAD,SAAA,SAAAA,EAAEE,MAAMH,E,CAKlB,iBAAMI,G,OACJH,EAAAX,KAAKY,OAAK,MAAAD,SAAA,SAAAA,EAAAI,M,CAGJ,gBAAAR,GACNP,KAAKgB,SAASC,M,CAGhB,MAAAC,G,MACE,MAAMC,EAA0CnB,KAAKoB,KAAKC,QAAQ,iBAClE,MAAMC,GAAYX,EAAAQ,IAAA,MAAAA,SAAA,SAAAA,EAAUG,aAAa,MAAAX,SAAA,EAAAA,EAAA,MACzC,OAEEY,EAACC,EAAI,CAAAC,IAAA,2CAAC7B,GAAII,KAAKoB,KAAKxB,IAAMI,KAAKC,aAC7BsB,EACE,OAAAE,IAAA,2CAAAC,KAAK,OACLC,IAAMC,GAAQ5B,KAAKY,IAAMgB,EACzBC,MAAO,CACLjB,IAAK,KAGL,WAAYU,IAAc,MAC1B,cAAeA,IAAc,SAC7B,YAAaA,IAAc,OAC3B,aAAcA,IAAc,QAG5B,cAAetB,KAAKG,OACpB,gBAAiBH,KAAKI,SACtB,gBAAiBJ,KAAKK,UAExByB,KAAK,MAAK,gBACK9B,KAAKK,SAAW,OAAS,QAAO,gBAChCL,KAAKG,OAAS,OAAS,QACtC4B,SAAU/B,KAAKK,WAAaL,KAAKG,OAAS,KAAO,KAEjDoB,EAAQ,QAAAE,IAAA,6CACPzB,KAAKI,UACJmB,EAAA,mBAAAE,IAAA,2CACEO,KAAK,QACLC,KAAK,SACLC,YAAY,oBACZL,MAAM,oBACNM,QAASnC,KAAKO,iBACd6B,UAAU,EAAE,cACA,UAIlBb,EAAA,OAAAE,IAAA,2CACEC,KAAM1B,KAAKG,OAAS,uBAAyB,GAC7C0B,MAAO,CACLQ,eAAgB,KAChB,yBAA0BrC,KAAKG,OAG/B,sBAAuBmB,IAAc,MACrC,yBAA0BA,IAAc,SACxC,uBAAwBA,IAAc,OACtC,wBAAyBA,IAAc,W","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as t,c as o,h as i,g as r}from"./p-D0Go1Zjj.js";import{s}from"./p-BY6hIEFX.js";function e(t,o,i={duration:150,easing:"ease",fill:"both"}){const r=o.getBoundingClientRect();const s=t.getBoundingClientRect();const e=r.left-s.left;const a=r.top-s.top;const l=r.width/s.width;const n=r.height/s.height;t.animate([{transformOrigin:"top left",transform:`translate(${e}px, ${a}px) scale(${l}, ${n})`},{transformOrigin:"top left",transform:"none"}],i)}const a=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{display:block}.tab-group{display:flex;border:solid 1px transparent;border-radius:0}.tab-group .tab-group__tabs{display:flex;position:relative}.tab-group--has-scroll-controls .tab-group__nav-container{position:relative;padding:0 var(--six-spacing-x-large)}.tab-group__scroll-button{display:flex;align-items:center;justify-content:center;position:absolute;top:0;bottom:0;width:var(--six-spacing-x-large)}.tab-group__scroll-button--left{left:0}.tab-group__scroll-button--right{right:0}.tab-group--top{flex-direction:column}.tab-group--top .tab-group__nav-container{order:1}.tab-group--top .tab-group__nav{display:flex;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.tab-group--top .tab-group__nav::-webkit-scrollbar{width:0;height:0}.tab-group--top .tab-group__tabs{flex:1 1 auto;position:relative;flex-direction:row}.tab-group--top .tab-group__body{order:2}.tab-group--bottom{flex-direction:column}.tab-group--bottom .tab-group__nav-container{order:2}.tab-group--bottom .tab-group__nav{display:flex;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.tab-group--bottom .tab-group__nav::-webkit-scrollbar{width:0;height:0}.tab-group--bottom .tab-group__tabs{flex:1 1 auto;position:relative;flex-direction:row}.tab-group--bottom .tab-group__body{order:1}.tab-group--left{flex-direction:row}.tab-group--left .tab-group__nav-container{order:1}.tab-group--left .tab-group__tabs{flex:0 0 auto;flex-direction:column}.tab-group--left .tab-group__body{flex:1 1 auto;order:2}.tab-group--right{flex-direction:row}.tab-group--right .tab-group__nav-container{order:2}.tab-group--right .tab-group__tabs{flex:0 0 auto;flex-direction:column}.tab-group--right .tab-group__body{flex:1 1 auto;order:1}";const l=class{constructor(i){t(this,i);this.sixTabShow=o(this,"six-tab-show");this.sixTabHide=o(this,"six-tab-hide");this.hasLeftControl=false;this.hasRightControl=false;this.placement="top";this.noScrollControls=false;this.handleClick=t=>{const o=t.target;const i=o.closest("six-tab");const r=i===null||i===void 0?void 0:i.closest("six-tab-group");if(r!==this.host){return false}if(i!=null){this.setActiveTab(i)}};this.handleKeyDown=t=>{if(this.nav==null)return;const o=t.target;const i=o.closest("six-tab");const r=i===null||i===void 0?void 0:i.closest("six-tab-group");if(r!==this.host){return false}if(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key)){const o=document.activeElement;if(o&&o.tagName.toLowerCase()==="six-tab"){const i=this.getAllTabs();let r=i.indexOf(o);if(t.key==="Home"){r=0}else if(t.key==="End"){r=i.length-1}else if(t.key==="ArrowLeft"){r=Math.max(0,r-1)}else if(t.key==="ArrowRight"){r=Math.min(i.length-1,r+1)}i[r].setFocus({preventScroll:true});this.setActiveTab(i[r]);if(["top","bottom"].includes(this.placement)){s(i[r],this.nav,"horizontal")}t.preventDefault()}}};this.handleScrollLeft=()=>{if(this.nav==null)return;this.nav.scroll({left:this.nav.scrollLeft-this.nav.clientWidth,behavior:"smooth"})};this.handleScrollRight=()=>{if(this.nav==null)return;this.nav.scroll({left:this.nav.scrollLeft+this.nav.clientWidth,behavior:"smooth"})}}handleNoScrollControlsChange(){this.updateScrollControls()}componentDidLoad(){if(this.tabGroup==null||this.nav==null)return;const t=new IntersectionObserver(((t,o)=>{if(t[0].intersectionRatio>0){this.setAriaLabels();this.setActiveTab(this.getActiveTab()||this.getAllTabs()[0],false);o.unobserve(t[0].target)}}));t.observe(this.host);this.resizeObserver=new ResizeObserver((()=>this.updateScrollControls()));this.resizeObserver.observe(this.nav);requestAnimationFrame((()=>this.updateScrollControls()));this.nav.addEventListener("scroll",(()=>{if(this.nav==null){return}this.hasRightControl=this.calculateRightControlVisibility();this.hasLeftControl=this.calculateLeftControlVisibility()}));this.mutationObserver=new MutationObserver((t=>{if(t.some((t=>{var o;return!["aria-labelledby","aria-controls"].includes((o=t.attributeName)!==null&&o!==void 0?o:"")}))){setTimeout((()=>this.setAriaLabels()))}}));this.mutationObserver.observe(this.host,{attributes:true,childList:true,subtree:true})}disconnectedCallback(){if(this.mutationObserver==null||this.tabGroup==null||this.nav==null||this.resizeObserver==null){return}this.mutationObserver.disconnect();this.resizeObserver.unobserve(this.nav)}async show(t){const o=this.getAllTabs();const i=o.find((o=>o.panel===t));if(i!=null){this.setActiveTab(i)}}getAllTabs(t=false){var o;const i=(o=this.tabs)===null||o===void 0?void 0:o.querySelector("slot");if(i==null)return[];return[...i.assignedElements()].filter((o=>t?o.tagName.toLowerCase()==="six-tab":o.tagName.toLowerCase()==="six-tab"&&!o.disabled))}getAllPanels(){var t;const o=(t=this.body)===null||t===void 0?void 0:t.querySelector("slot");if(o==null)return[];return[...o.assignedElements()].filter((t=>t.tagName.toLowerCase()==="six-tab-panel"))}getActiveTab(){return this.getAllTabs().find((t=>t.active))}calculateRightControlVisibility(){var t,o,i;if(this.nav==null){return false}return Math.abs((t=this.nav)===null||t===void 0?void 0:t.scrollLeft)+((o=this.nav)===null||o===void 0?void 0:o.clientWidth)<((i=this.nav)===null||i===void 0?void 0:i.scrollWidth)-1}calculateLeftControlVisibility(){var t;if(this.nav==null){return false}return Math.abs((t=this.nav)===null||t===void 0?void 0:t.scrollLeft)>0}updateScrollControls(){if(this.nav==null)return;this.hasRightControl=this.noScrollControls?false:["top","bottom"].includes(this.placement)&&this.calculateRightControlVisibility();this.hasLeftControl=this.noScrollControls?false:["top","bottom"].includes(this.placement)&&this.calculateLeftControlVisibility()}setActiveTab(t,o=true){var i,r,a;if(this.nav==null)return;const l=(i=t===null||t===void 0?void 0:t.shadowRoot)===null||i===void 0?void 0:i.querySelector(".tab__indicator");const n=(a=(r=this.getActiveTab())===null||r===void 0?void 0:r.shadowRoot)===null||a===void 0?void 0:a.querySelector(".tab__indicator");if(n!=null&&l!=null){e(l,n)}if(t!==this.activeTab&&!t.disabled){const i=this.activeTab;this.activeTab=t;this.getAllTabs().map((t=>t.active=t===this.activeTab));this.getAllPanels().map((t=>{var o;return t.active=t.name===((o=this.activeTab)===null||o===void 0?void 0:o.panel)}));if(["top","bottom"].includes(this.placement)){s(this.activeTab,this.nav,"horizontal")}if(o){if(i!=null){this.sixTabHide.emit({name:i.panel})}this.sixTabShow.emit({name:this.activeTab.panel})}}}setAriaLabels(){const t=this.getAllTabs();const o=this.getAllPanels();t.map((t=>{var i,r;const s=o.find((o=>o.name===t.panel));if(s!=null){t.setAttribute("aria-controls",(i=s.getAttribute("id"))!==null&&i!==void 0?i:"");s.setAttribute("aria-labelledby",(r=t.getAttribute("id"))!==null&&r!==void 0?r:"")}}))}render(){return i("div",{key:"8e1680692b65ef2cf91d3dc3ab9dd76cb8359823",part:"base",ref:t=>this.tabGroup=t,class:{"tab-group":true,"tab-group--top":this.placement==="top","tab-group--bottom":this.placement==="bottom","tab-group--left":this.placement==="left","tab-group--right":this.placement==="right","tab-group--has-scroll-controls":this.hasRightControl||this.hasLeftControl},onClick:this.handleClick,onKeyDown:this.handleKeyDown},i("div",{key:"bedb1b223b85cd4cf918a3b396fa7e1867016ca6",class:"tab-group__nav-container"},this.hasLeftControl&&i("six-icon-button",{key:"04a855b42c6258daa8c8759191530be013e6d894",class:"tab-group__scroll-button tab-group__scroll-button--left",exportparts:"base:scroll-button",name:"chevron_left",onClick:this.handleScrollLeft}),i("div",{ref:t=>this.nav=t,key:"nav",part:"nav",class:"tab-group__nav"},i("div",{key:"a7d11be622d317e5d1145f196228f6113c0b50ed",ref:t=>this.tabs=t,part:"tabs",class:"tab-group__tabs",role:"tablist"},i("slot",{key:"5a669e6d813efc6c5416ebf5f281539842d63e02",name:"nav"}))),this.hasRightControl&&i("six-icon-button",{key:"31d61731441ecef93f315153de71d2ea10f5e58b",class:"tab-group__scroll-button tab-group__scroll-button--right",exportparts:"base:scroll-button",name:"chevron_right",onClick:this.handleScrollRight})),i("div",{key:"68bbdc3b94ee2119fa58d3c6a13a9b135bc941ed",ref:t=>this.body=t,part:"body",class:"tab-group__body"},i("slot",{key:"17de99799e669ae5c18afb6da7e2a23c5c3064e5"})))}get host(){return r(this)}static get watchers(){return{noScrollControls:["handleNoScrollControlsChange"]}}};l.style=a;export{l as six_tab_group};
-//# sourceMappingURL=p-f0c10d20.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["flipAnimate","element","fromElement","options","duration","easing","fill","dimensionsTo","getBoundingClientRect","dimensionsFrom","deltaX","left","deltaY","top","deltaW","width","deltaH","height","animate","transformOrigin","transform","sixTabGroupCss","SixTabGroup","constructor","hostRef","this","hasLeftControl","hasRightControl","placement","noScrollControls","handleClick","event","target","tab","closest","tabGroup","host","setActiveTab","handleKeyDown","nav","includes","key","activeEl","document","activeElement","tagName","toLowerCase","tabs","getAllTabs","index","indexOf","length","Math","max","min","setFocus","preventScroll","scrollIntoView","preventDefault","handleScrollLeft","scroll","scrollLeft","clientWidth","behavior","handleScrollRight","handleNoScrollControlsChange","updateScrollControls","componentDidLoad","observer","IntersectionObserver","entries","intersectionRatio","setAriaLabels","getActiveTab","unobserve","observe","resizeObserver","ResizeObserver","requestAnimationFrame","addEventListener","calculateRightControlVisibility","calculateLeftControlVisibility","mutationObserver","MutationObserver","mutations","some","mutation","_a","attributeName","setTimeout","attributes","childList","subtree","disconnectedCallback","disconnect","show","panel","find","el","includeDisabled","slot","querySelector","assignedElements","filter","disabled","getAllPanels","body","active","abs","_b","_c","scrollWidth","emitEvents","newIndicator","shadowRoot","oldIndicator","activeTab","previousTab","map","name","sixTabHide","emit","sixTabShow","panels","setAttribute","getAttribute","render","h","part","ref","class","onClick","onKeyDown","exportparts","role"],"sources":["src/utils/animation.ts","src/components/six-tab-group/six-tab-group.scss?tag=six-tab-group&encapsulation=shadow","src/components/six-tab-group/six-tab-group.tsx"],"sourcesContent":["/**\n * Animates a given `element` from the position and dimension of `fromElement` to\n * its current position and dimension. Can be useful to implement the FLIP animation technique.\n *\n * @see {@link https://css-tricks.com/animating-layouts-with-the-flip-technique/} for details on the FLIP technique.\n *\n * @param {Element} element - The element to animate.\n * @param {Element} fromElement - The element representing the initial position and dimensions.\n * @param {KeyframeAnimationOptions} [options={ duration: 150, easing: 'ease', fill: 'both' }] - Optional animation parameters.\n *\n */\nexport function flipAnimate(\n  element: Element,\n  fromElement: Element,\n  options: KeyframeAnimationOptions = {\n    duration: 150,\n    easing: 'ease',\n    fill: 'both',\n  }\n) {\n  const dimensionsTo = fromElement.getBoundingClientRect();\n  const dimensionsFrom = element.getBoundingClientRect();\n\n  const deltaX = dimensionsTo.left - dimensionsFrom.left;\n  const deltaY = dimensionsTo.top - dimensionsFrom.top;\n  const deltaW = dimensionsTo.width / dimensionsFrom.width;\n  const deltaH = dimensionsTo.height / dimensionsFrom.height;\n\n  element.animate(\n    [\n      {\n        transformOrigin: 'top left',\n        transform: `translate(${deltaX}px, ${deltaY}px) scale(${deltaW}, ${deltaH})`,\n      },\n      {\n        transformOrigin: 'top left',\n        transform: 'none',\n      },\n    ],\n    options\n  );\n}\n","@import 'src/global/component';\n@import 'src/global/mixins/hide-scrollbar';\n\n:host {\n  display: block;\n}\n\n.tab-group {\n  display: flex;\n  border: solid 1px transparent;\n  border-radius: 0;\n\n  .tab-group__tabs {\n    display: flex;\n    position: relative;\n  }\n}\n\n.tab-group--has-scroll-controls .tab-group__nav-container {\n  position: relative;\n  padding: 0 var(--six-spacing-x-large);\n}\n\n.tab-group__scroll-button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: var(--six-spacing-x-large);\n}\n\n.tab-group__scroll-button--left {\n  left: 0;\n}\n\n.tab-group__scroll-button--right {\n  right: 0;\n}\n\n// TOP\n.tab-group--top {\n  flex-direction: column;\n\n  .tab-group__nav-container {\n    order: 1;\n  }\n\n  .tab-group__nav {\n    display: flex;\n    overflow-x: auto;\n    @include hide-scrollbar();\n  }\n\n  .tab-group__tabs {\n    flex: 1 1 auto;\n    position: relative;\n    flex-direction: row;\n  }\n\n  .tab-group__body {\n    order: 2;\n  }\n}\n\n// Bottom\n.tab-group--bottom {\n  flex-direction: column;\n\n  .tab-group__nav-container {\n    order: 2;\n  }\n\n  .tab-group__nav {\n    display: flex;\n    overflow-x: auto;\n    @include hide-scrollbar();\n  }\n\n  .tab-group__tabs {\n    flex: 1 1 auto;\n    position: relative;\n    flex-direction: row;\n  }\n\n  .tab-group__body {\n    order: 1;\n  }\n}\n\n// Left\n\n.tab-group--left {\n  flex-direction: row;\n\n  .tab-group__nav-container {\n    order: 1;\n  }\n\n  .tab-group__tabs {\n    flex: 0 0 auto;\n    flex-direction: column;\n  }\n\n  .tab-group__body {\n    flex: 1 1 auto;\n    order: 2;\n  }\n}\n\n// Right\n.tab-group--right {\n  flex-direction: row;\n\n  .tab-group__nav-container {\n    order: 2;\n  }\n\n  .tab-group__tabs {\n    flex: 0 0 auto;\n    flex-direction: column;\n  }\n\n  .tab-group__body {\n    flex: 1 1 auto;\n    order: 1;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { scrollIntoView } from '../../utils/scroll';\nimport { flipAnimate } from '../../utils/animation';\n\nexport interface SixTabShowPayload {\n  name: string;\n}\n\nexport interface SixTabHidePayload {\n  name: string;\n}\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot nav - Used for grouping tabs in the tab group.\n * @slot - Used for grouping tab panels in the tab group.\n *\n * @part base - The component's base wrapper.\n * @part nav - The tab group navigation container.\n * @part tabs - The container that wraps the slotted tabs.\n * @part active-tab-indicator - An element that displays the currently selected tab. This is a child of the tab's container.\n * @part body - The tab group body where tab panels are slotted in.\n * @part scroll-button - The previous and next scroll buttons that appear when tabs are scrollable.\n */\n@Component({\n  tag: 'six-tab-group',\n  styleUrl: 'six-tab-group.scss',\n  shadow: true,\n})\nexport class SixTabGroup {\n  private activeTab?: HTMLSixTabElement;\n  private body?: HTMLElement;\n  private mutationObserver?: MutationObserver;\n  private nav?: HTMLElement;\n  private resizeObserver?: ResizeObserver;\n  private tabGroup?: HTMLElement;\n  private tabs?: HTMLElement;\n\n  @Element() host!: HTMLSixTabGroupElement;\n\n  @State() hasLeftControl = false;\n  @State() hasRightControl = false;\n\n  /** The placement of the tabs. */\n  @Prop() placement: 'top' | 'bottom' | 'left' | 'right' = 'top';\n\n  /** Disables the scroll arrows that appear when tabs overflow. */\n  @Prop() noScrollControls = false;\n\n  @Watch('noScrollControls')\n  handleNoScrollControlsChange() {\n    this.updateScrollControls();\n  }\n\n  /** Emitted when a tab is shown. */\n  @Event({ eventName: 'six-tab-show' }) sixTabShow!: EventEmitter<SixTabShowPayload>;\n\n  /** Emitted when a tab is hidden. */\n  @Event({ eventName: 'six-tab-hide' }) sixTabHide!: EventEmitter<SixTabHidePayload>;\n\n  componentDidLoad() {\n    if (this.tabGroup == null || this.nav == null) return;\n\n    // Set initial tab state when the tabs first become visible\n    const observer = new IntersectionObserver((entries, observer) => {\n      if (entries[0].intersectionRatio > 0) {\n        this.setAriaLabels();\n        this.setActiveTab(this.getActiveTab() || this.getAllTabs()[0], false);\n        observer.unobserve(entries[0].target);\n      }\n    });\n    observer.observe(this.host);\n    this.resizeObserver = new ResizeObserver(() => this.updateScrollControls());\n    this.resizeObserver.observe(this.nav);\n    requestAnimationFrame(() => this.updateScrollControls());\n\n    this.nav.addEventListener('scroll', () => {\n      if (this.nav == null) {\n        return;\n      }\n      this.hasRightControl = this.calculateRightControlVisibility();\n\n      this.hasLeftControl = this.calculateLeftControlVisibility();\n    });\n\n    // Update aria labels if the DOM changes\n    this.mutationObserver = new MutationObserver((mutations) => {\n      if (\n        mutations.some((mutation) => {\n          return !['aria-labelledby', 'aria-controls'].includes(mutation.attributeName ?? '');\n        })\n      ) {\n        setTimeout(() => this.setAriaLabels());\n      }\n    });\n    this.mutationObserver.observe(this.host, { attributes: true, childList: true, subtree: true });\n  }\n\n  disconnectedCallback() {\n    if (this.mutationObserver == null || this.tabGroup == null || this.nav == null || this.resizeObserver == null) {\n      return;\n    }\n    this.mutationObserver.disconnect();\n    this.resizeObserver.unobserve(this.nav);\n  }\n\n  /** Shows the specified tab panel. */\n  @Method()\n  async show(panel: string) {\n    const tabs = this.getAllTabs();\n    const tab = tabs.find((el) => el.panel === panel);\n\n    if (tab != null) {\n      this.setActiveTab(tab);\n    }\n  }\n\n  private getAllTabs(includeDisabled = false): HTMLSixTabElement[] {\n    const slot = this.tabs?.querySelector('slot');\n    if (slot == null) return [];\n\n    return [...slot.assignedElements()].filter((el: Element) => {\n      return includeDisabled\n        ? el.tagName.toLowerCase() === 'six-tab'\n        : el.tagName.toLowerCase() === 'six-tab' && !(el as HTMLSixTabElement).disabled;\n    }) as [HTMLSixTabElement];\n  }\n\n  private getAllPanels(): HTMLSixTabPanelElement[] {\n    const slot = this.body?.querySelector('slot');\n    if (slot == null) return [];\n    return [...slot.assignedElements()].filter((el: Element) => el.tagName.toLowerCase() === 'six-tab-panel') as [\n      HTMLSixTabPanelElement,\n    ];\n  }\n\n  private getActiveTab() {\n    return this.getAllTabs().find((el) => el.active);\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    const tab = target.closest('six-tab');\n    const tabGroup = tab?.closest('six-tab-group');\n\n    // Ensure the target tab is in this tab group\n    if (tabGroup !== this.host) {\n      return false;\n    }\n\n    if (tab != null) {\n      this.setActiveTab(tab);\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.nav == null) return;\n\n    const target = event.target as HTMLElement;\n    const tab = target.closest('six-tab');\n    const tabGroup = tab?.closest('six-tab-group');\n\n    // Ensure the target tab is in this tab group\n    if (tabGroup !== this.host) {\n      return false;\n    }\n\n    // Move focus left or right\n    if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {\n      const activeEl = document.activeElement as HTMLSixTabElement;\n\n      if (activeEl && activeEl.tagName.toLowerCase() === 'six-tab') {\n        const tabs = this.getAllTabs();\n        let index = tabs.indexOf(activeEl);\n\n        if (event.key === 'Home') {\n          index = 0;\n        } else if (event.key === 'End') {\n          index = tabs.length - 1;\n        } else if (event.key === 'ArrowLeft') {\n          index = Math.max(0, index - 1);\n        } else if (event.key === 'ArrowRight') {\n          index = Math.min(tabs.length - 1, index + 1);\n        }\n\n        tabs[index].setFocus({ preventScroll: true });\n        this.setActiveTab(tabs[index]);\n\n        if (['top', 'bottom'].includes(this.placement)) {\n          scrollIntoView(tabs[index], this.nav, 'horizontal');\n        }\n\n        event.preventDefault();\n      }\n    }\n  };\n\n  private handleScrollLeft = () => {\n    if (this.nav == null) return;\n\n    this.nav.scroll({\n      left: this.nav.scrollLeft - this.nav.clientWidth,\n      behavior: 'smooth',\n    });\n  };\n\n  private handleScrollRight = () => {\n    if (this.nav == null) return;\n\n    this.nav.scroll({\n      left: this.nav.scrollLeft + this.nav.clientWidth,\n      behavior: 'smooth',\n    });\n  };\n\n  private calculateRightControlVisibility() {\n    if (this.nav == null) {\n      return false;\n    }\n    return Math.abs(this.nav?.scrollLeft) + this.nav?.clientWidth < this.nav?.scrollWidth - 1;\n  }\n\n  private calculateLeftControlVisibility() {\n    if (this.nav == null) {\n      return false;\n    }\n    return Math.abs(this.nav?.scrollLeft) > 0;\n  }\n\n  private updateScrollControls() {\n    if (this.nav == null) return;\n\n    this.hasRightControl = this.noScrollControls\n      ? false\n      : ['top', 'bottom'].includes(this.placement) && this.calculateRightControlVisibility();\n\n    this.hasLeftControl = this.noScrollControls\n      ? false\n      : ['top', 'bottom'].includes(this.placement) && this.calculateLeftControlVisibility();\n  }\n\n  private setActiveTab(tab: HTMLSixTabElement, emitEvents = true) {\n    if (this.nav == null) return;\n\n    const newIndicator = tab?.shadowRoot?.querySelector('.tab__indicator');\n    const oldIndicator = this.getActiveTab()?.shadowRoot?.querySelector('.tab__indicator');\n\n    if (oldIndicator != null && newIndicator != null) {\n      flipAnimate(newIndicator, oldIndicator);\n    }\n\n    if (tab !== this.activeTab && !tab.disabled) {\n      const previousTab = this.activeTab;\n      this.activeTab = tab;\n\n      // Sync tabs and panels\n      this.getAllTabs().map((el) => (el.active = el === this.activeTab));\n      this.getAllPanels().map((el) => (el.active = el.name === this.activeTab?.panel));\n\n      if (['top', 'bottom'].includes(this.placement)) {\n        scrollIntoView(this.activeTab, this.nav, 'horizontal');\n      }\n\n      // Emit events\n      if (emitEvents) {\n        if (previousTab != null) {\n          this.sixTabHide.emit({ name: previousTab.panel });\n        }\n\n        this.sixTabShow.emit({ name: this.activeTab.panel });\n      }\n    }\n  }\n\n  private setAriaLabels() {\n    const tabs = this.getAllTabs();\n    const panels = this.getAllPanels();\n\n    // Link each tab with its corresponding panel\n    tabs.map((tab) => {\n      const panel = panels.find((el) => el.name === tab.panel);\n      if (panel != null) {\n        tab.setAttribute('aria-controls', panel.getAttribute('id') ?? '');\n        panel.setAttribute('aria-labelledby', tab.getAttribute('id') ?? '');\n      }\n    });\n  }\n\n  render() {\n    return (\n      <div\n        part=\"base\"\n        ref={(el) => (this.tabGroup = el)}\n        class={{\n          'tab-group': true,\n\n          // Placements\n          'tab-group--top': this.placement === 'top',\n          'tab-group--bottom': this.placement === 'bottom',\n          'tab-group--left': this.placement === 'left',\n          'tab-group--right': this.placement === 'right',\n\n          'tab-group--has-scroll-controls': this.hasRightControl || this.hasLeftControl,\n        }}\n        onClick={this.handleClick}\n        onKeyDown={this.handleKeyDown}\n      >\n        <div class=\"tab-group__nav-container\">\n          {this.hasLeftControl && (\n            <six-icon-button\n              class=\"tab-group__scroll-button tab-group__scroll-button--left\"\n              exportparts=\"base:scroll-button\"\n              name=\"chevron_left\"\n              onClick={this.handleScrollLeft}\n            />\n          )}\n          <div ref={(el) => (this.nav = el)} key=\"nav\" part=\"nav\" class=\"tab-group__nav\">\n            <div ref={(el) => (this.tabs = el)} part=\"tabs\" class=\"tab-group__tabs\" role=\"tablist\">\n              <slot name=\"nav\" />\n            </div>\n          </div>\n          {this.hasRightControl && (\n            <six-icon-button\n              class=\"tab-group__scroll-button tab-group__scroll-button--right\"\n              exportparts=\"base:scroll-button\"\n              name=\"chevron_right\"\n              onClick={this.handleScrollRight}\n            />\n          )}\n        </div>\n\n        <div ref={(el) => (this.body = el)} part=\"body\" class=\"tab-group__body\">\n          <slot />\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as a,h as e,H as t,g as c}from"./p-D0Go1Zjj.js";const r=":host{display:flex;flex-wrap:nowrap;min-width:fit-content}.left-margin,.right-margin{flex:1 6 10rem;min-width:var(--six-spacing-xxx-large)}.content{flex:6 1 60rem;min-width:48rem;max-width:100rem}.content--padded{padding:var(--six-spacing-xxx-large) 0}";const i=class{constructor(e){a(this,e);this.padded=true}render(){return e(t,{key:"6a58c3bf1117f6d8ec771b10b9bb5eeca8f75d38"},e("div",{key:"709e6b3c0f6b915cdb02b6231b8475a32aaef821",part:"left-margin",class:"left-margin"}),e("div",{key:"8bca7342d56b444696b39e3b4e03b69fc7a8724a",part:"content",class:{content:true,"content--padded":this.padded}},e("slot",{key:"8cae2e164ec3d6370b2d481bc62f4c2af2b194c5"})),e("div",{key:"5c4a7ecbbaff6cd381ba7a3253ccbc20a72e90cc",part:"right-margin",class:"right-margin"}))}get host(){return c(this)}};i.style=r;export{i as six_main_container};
-//# sourceMappingURL=p-f4e2ddfc.entry.js.map

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

@@ -1,2 +0,0 @@
-import{r as s,h as e}from"./p-D0Go1Zjj.js";const i=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{--track-color:var(--six-progress-track-color);--indicator-color:var(--six-progress-indicator-color);--stroke-width:2px;display:inline-flex}.spinner{display:inline-block;width:1em;height:1em;border-radius:50%;border:solid var(--stroke-width) var(--track-color);border-top-color:var(--indicator-color);border-right-color:var(--indicator-color);animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.six-spinner{width:auto;height:auto;position:relative}.six-spinner .six-spinner__container{margin:0;transform:translateX(0)}.six-spinner .six-spinner__container svg{transform:translateX(0)}.six-spinner__container{position:relative;margin:0 auto;top:calc(50% - 20px);z-index:1}.six-spinner__container,.six-spinner__container svg{width:40px;height:40px;display:block;transform:translateX(40px)}.six-spinner path{stroke-dashoffset:70px;stroke-dasharray:70, 444;-webkit-animation:six-spinner 2s cubic-bezier(0.56, 0.39, 0.51, 0.96) infinite;animation:six-spinner 2s cubic-bezier(0.56, 0.39, 0.51, 0.96) infinite}.six-spinner polygon{stroke-dasharray:310;stroke-dashoffset:310;animation:big-polygon-draw 2s ease-in-out infinite;-webkit-animation:big-polygon-draw 2s ease-in-out infinite}.six-spinner polygon:nth-child(2),.six-spinner polygon:nth-child(3){stroke-dasharray:110;stroke-dashoffset:110;animation:small-polygon-draw 2s ease-in-out infinite;-webkit-animation:small-polygon-draw 2s ease-in-out infinite}@keyframes big-polygon-draw{0%,100%{stroke-dashoffset:310}50%{stroke-dashoffset:140}}@-webkit-keyframes big-polygon-draw{0%,100%{stroke-dashoffset:310}50%{stroke-dashoffset:140}}@keyframes small-polygon-draw{0%,100%{stroke-dashoffset:110}50%{stroke-dashoffset:50}}@-webkit-keyframes small-polygon-draw{0%,100%{stroke-dashoffset:110}50%{stroke-dashoffset:50}}@-webkit-keyframes six-spinner{to{stroke-dashoffset:-444}}@keyframes six-spinner{to{stroke-dashoffset:-444}}";const r=class{constructor(e){s(this,e)}renderWrapper(s){return e("span",{class:"six-spinner","aria-busy":"true","aria-live":"polite"},e("div",{class:"six-spinner__container"},s))}renderSIXLogo(){const s=e("svg",{viewBox:"0 0 40 40",part:"svg"},e("path",{fill:"none",stroke:"#de3919","stroke-width":"5","stroke-linecap":"round",d:"M 35 5 V 35 H 5 T 5 5 H 35 V 35 H 5 V 5 H 35 V 35 H -34 V 30 H 7 A 9 8 0 0 0 14 27 L 27 14 A 8 6 0 0 1 33 12 H 42"}));return this.renderWrapper(s)}renderBMELogo(){const s=e("svg",{viewBox:"0 0 45 55",part:"svg"},e("polygon",{fill:"none",stroke:"black","stroke-width":"2","stroke-linecap":"round",points:"4.42 51.96 17.02 31.473 2 31.473 2 22.486 17.02 22.486 4.42 2 15.404 2 30.289 26.98 14.763 51.96 4.42 51.96"}),e("polygon",{fill:"none",stroke:"black","stroke-width":"2","stroke-linecap":"round",points:"42 51.96 31.655 51.96 24.598 40.498 29.831 32.073 42 51.96"}),e("polygon",{fill:"none",stroke:"black","stroke-width":"2","stroke-linecap":"round",points:"24.518 12.719 31.014 2 42 2 29.831 21.637 24.518 12.719"}));return this.renderWrapper(s)}renderSimpleSpinner(){return e("span",{part:"base",class:"spinner","aria-busy":"true","aria-live":"polite"})}render(){if(this.six){console.warn('The "six" prop is deprecated. Use "logo=\'six\'" instead.');return this.renderSIXLogo()}switch(this.logo){case"six":return this.renderSIXLogo();case"bme":return this.renderBMELogo();default:return this.renderSimpleSpinner()}}};r.style=i;export{r as six_spinner};
-//# sourceMappingURL=p-f585a5ab.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["sixSpinnerCss","SixSpinner","renderWrapper","content","h","class","renderSIXLogo","sixLogo","viewBox","part","fill","stroke","d","this","renderBMELogo","bmeLogo","points","renderSimpleSpinner","render","six","console","warn","logo"],"sources":["src/components/six-spinner/six-spinner.scss?tag=six-spinner&encapsulation=shadow","src/components/six-spinner/six-spinner.tsx"],"sourcesContent":["@import 'src/global/component';\n\n/**\n * @prop --track-color: The color of the spinner's track.\n * @prop --indicator-color: The color of the spinner's indicator.\n * @prop --stroke-width: The width of the indicator.\n */\n:host {\n  --track-color: var(--six-progress-track-color);\n  --indicator-color: var(--six-progress-indicator-color);\n  --stroke-width: 2px;\n\n  display: inline-flex;\n}\n\n.spinner {\n  display: inline-block;\n  width: 1em;\n  height: 1em;\n  border-radius: 50%;\n  border: solid var(--stroke-width) var(--track-color);\n  border-top-color: var(--indicator-color);\n  border-right-color: var(--indicator-color);\n  animation: 1s linear infinite spin;\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n$color-six-spinner-background: rgba(255, 255, 255, 0.7);\n\n.six-spinner {\n  width: auto;\n  height: auto;\n  position: relative;\n\n  .six-spinner__container {\n    margin: 0;\n    transform: translateX(0);\n  }\n\n  .six-spinner__container svg {\n    transform: translateX(0);\n  }\n\n  &__container {\n    position: relative;\n    margin: 0 auto;\n    top: calc(50% - 20px);\n    z-index: 1;\n  }\n\n  &__container,\n  &__container svg {\n    width: 40px;\n    height: 40px;\n    display: block;\n    transform: translateX(40px);\n  }\n\n  path {\n    stroke-dashoffset: 70px;\n    stroke-dasharray: 70, 444;\n    -webkit-animation: six-spinner 2s cubic-bezier(0.56, 0.39, 0.51, 0.96) infinite;\n    animation: six-spinner 2s cubic-bezier(0.56, 0.39, 0.51, 0.96) infinite;\n  }\n\n  polygon {\n    stroke-dasharray: 310;\n    stroke-dashoffset: 310;\n    animation: big-polygon-draw 2s ease-in-out infinite;\n    -webkit-animation: big-polygon-draw 2s ease-in-out infinite;\n  }\n\n  polygon:nth-child(2),\n  polygon:nth-child(3) {\n    stroke-dasharray: 110;\n    stroke-dashoffset: 110;\n    animation: small-polygon-draw 2s ease-in-out infinite;\n    -webkit-animation: small-polygon-draw 2s ease-in-out infinite;\n  }\n\n  @keyframes big-polygon-draw {\n    0%,\n    100% {\n      stroke-dashoffset: 310;\n    }\n    50% {\n      stroke-dashoffset: 140;\n    }\n  }\n\n  @-webkit-keyframes big-polygon-draw {\n    0%,\n    100% {\n      stroke-dashoffset: 310;\n    }\n    50% {\n      stroke-dashoffset: 140;\n    }\n  }\n\n  @keyframes small-polygon-draw {\n    0%,\n    100% {\n      stroke-dashoffset: 110;\n    }\n    50% {\n      stroke-dashoffset: 50;\n    }\n  }\n\n  @-webkit-keyframes small-polygon-draw {\n    0%,\n    100% {\n      stroke-dashoffset: 110;\n    }\n    50% {\n      stroke-dashoffset: 50;\n    }\n  }\n\n  @-webkit-keyframes six-spinner {\n    to {\n      stroke-dashoffset: -444;\n    }\n  }\n\n  @keyframes six-spinner {\n    to {\n      stroke-dashoffset: -444;\n    }\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @part base - The component's base wrapper.\n * @part svg - The spinner icon.\n */\n@Component({\n  tag: 'six-spinner',\n  styleUrl: 'six-spinner.scss',\n  shadow: true,\n})\nexport class SixSpinner {\n  /** Indicates if the spinner is shown as animated SIX or BME logo or a simple spinner. */\n  @Prop() logo?: 'six' | 'bme';\n  /**\n   * **@deprecated** Use `logo=\"six\"` instead.\n   *\n   * If set to true, the spinner displays the SIX logo.\n   */\n  @Prop() six?: boolean;\n\n  /**\n   * Renders a container with a given SVG content.\n   */\n  private renderWrapper(content: SVGElement) {\n    return (\n      <span class=\"six-spinner\" aria-busy=\"true\" aria-live=\"polite\">\n        <div class=\"six-spinner__container\">{content}</div>\n      </span>\n    );\n  }\n\n  /**\n   * Renders the SIX logo spinner.\n   */\n  private renderSIXLogo() {\n    const sixLogo = (\n      <svg viewBox=\"0 0 40 40\" part=\"svg\">\n        <path\n          fill=\"none\"\n          stroke=\"#de3919\"\n          stroke-width=\"5\"\n          stroke-linecap=\"round\"\n          d=\"M 35 5 V 35 H 5 T 5 5 H 35 V 35 H 5 V 5 H 35 V 35 H -34 V 30 H 7 A 9 8 0 0 0 14 27 L 27 14 A 8 6 0 0 1 33 12 H 42\"\n        ></path>\n      </svg>\n    );\n    return this.renderWrapper(sixLogo);\n  }\n\n  /**\n   * Renders the BME logo spinner.\n   */\n  private renderBMELogo() {\n    const bmeLogo = (\n      <svg viewBox=\"0 0 45 55\" part=\"svg\">\n        <polygon\n          fill=\"none\"\n          stroke=\"black\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          points=\"4.42 51.96 17.02 31.473 2 31.473 2 22.486 17.02 22.486 4.42 2 15.404 2 30.289 26.98 14.763 51.96 4.42 51.96\"\n        />\n        <polygon\n          fill=\"none\"\n          stroke=\"black\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          points=\"42 51.96 31.655 51.96 24.598 40.498 29.831 32.073 42 51.96\"\n        />\n        <polygon\n          fill=\"none\"\n          stroke=\"black\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          points=\"24.518 12.719 31.014 2 42 2 29.831 21.637 24.518 12.719\"\n        />\n      </svg>\n    );\n    return this.renderWrapper(bmeLogo);\n  }\n\n  /**\n   * Renders a simple spinner.\n   */\n  private renderSimpleSpinner() {\n    return <span part=\"base\" class=\"spinner\" aria-busy=\"true\" aria-live=\"polite\" />;\n  }\n\n  render() {\n    // Check the deprecated `six` property first\n    if (this.six) {\n      console.warn('The \"six\" prop is deprecated. Use \"logo=\\'six\\'\" instead.');\n      return this.renderSIXLogo();\n    }\n\n    switch (this.logo) {\n      case 'six':\n        return this.renderSIXLogo();\n      case 'bme':\n        return this.renderBMELogo();\n      default:\n        return this.renderSimpleSpinner();\n    }\n  }\n}\n"],"mappings":"2CAAA,MAAMA,EAAgB,+mE,MCgBTC,EAAU,M,yBAab,aAAAC,CAAcC,GACpB,OACEC,EAAA,QAAMC,MAAM,cAAwB,mBAAM,YAAW,UACnDD,EAAK,OAAAC,MAAM,0BAA0BF,G,CAQnC,aAAAG,GACN,MAAMC,EACJH,EAAK,OAAAI,QAAQ,YAAYC,KAAK,OAC5BL,EAAA,QACEM,KAAK,OACLC,OAAO,UACM,mBACE,yBACfC,EAAE,uHAIR,OAAOC,KAAKX,cAAcK,E,CAMpB,aAAAO,GACN,MAAMC,EACJX,EAAK,OAAAI,QAAQ,YAAYC,KAAK,OAC5BL,EAAA,WACEM,KAAK,OACLC,OAAO,QACM,mBAAG,iBACD,QACfK,OAAO,gHAETZ,EAAA,WACEM,KAAK,OACLC,OAAO,QACM,mBAAG,iBACD,QACfK,OAAO,+DAETZ,EAAA,WACEM,KAAK,OACLC,OAAO,QACM,mBACE,yBACfK,OAAO,6DAIb,OAAOH,KAAKX,cAAca,E,CAMpB,mBAAAE,GACN,OAAOb,EAAM,QAAAK,KAAK,OAAOJ,MAAM,UAAoB,mBAAiB,sB,CAGtE,MAAAa,GAEE,GAAIL,KAAKM,IAAK,CACZC,QAAQC,KAAK,6DACb,OAAOR,KAAKP,e,CAGd,OAAQO,KAAKS,MACX,IAAK,MACH,OAAOT,KAAKP,gBACd,IAAK,MACH,OAAOO,KAAKC,gBACd,QACE,OAAOD,KAAKI,sB","ignoreList":[]}

package/dist/ui-library/six-button.entry.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"six-button.entry.esm.js","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:\n    var(--six-transition-fast) background-color,\n    var(--six-transition-fast) color,\n    var(--six-transition-fast) border,\n    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  ::slotted(six-icon) {\n    // Clicks on icons shouldn't prevent the button from gaining focus\n    pointer-events: none;\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\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  &:focus-visible {\n    outline: var(--six-focus-ring);\n    outline-offset: var(--six-focus-ring-offset);\n  }\n\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    &: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: 1px;\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    &: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    &: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    &: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    &: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    &: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    &: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  &.button--action-outline {\n    border-color: var(--six-color-action-500);\n    background-color: var(--six-color-white);\n    color: var(--six-color-action-500);\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    &:active:not(.button--disabled) {\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, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { submitForm } from '../../utils/form';\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  private nativeButton?: HTMLButtonElement | HTMLAnchorElement;\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:\n    | 'secondary'\n    | 'primary'\n    | 'link'\n    | 'success'\n    | 'warning'\n    | 'danger'\n    | 'action'\n    | 'action-outline' = '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 = '';\n\n  /** An optional value for the button. Ignored when `href` is set. */\n  @Prop() value = '';\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  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  /** Sets focus on the button. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.nativeButton?.focus(options);\n  }\n\n  /** Removes focus from the button. */\n  @Method()\n  async removeFocus() {\n    this.nativeButton?.blur();\n  }\n\n  private handleSlotChange = () => {\n    this.hasLabel = hasSlot(this.host);\n    this.hasPrefix = hasSlot(this.host, 'prefix');\n    this.hasSuffix = hasSlot(this.host, 'suffix');\n\n    // set the correct icon size for suffix and prefix icons\n    const prefixIcon = this.host.querySelector('[slot=\"prefix\"]');\n    const suffixIcon = this.host.querySelector('[slot=\"suffix\"]');\n\n    if (prefixIcon?.tagName.toLowerCase() === 'six-icon') {\n      prefixIcon.setAttribute('size', this.mapSizeToIconSize(this.size));\n    }\n\n    if (suffixIcon?.tagName.toLowerCase() === 'six-icon') {\n      suffixIcon.setAttribute('size', this.mapSizeToIconSize(this.size));\n    }\n  };\n\n  private mapSizeToIconSize(buttonSize: 'small' | 'medium' | 'large'): string {\n    const sizeMap = {\n      small: 'xSmall',\n      medium: 'small',\n      large: 'medium',\n    };\n    return sizeMap[buttonSize] || 'small'; // Default to small\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 handleClick = (event: MouseEvent) => {\n    if (this.disabled || this.loading) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n\n    if (this.submit) {\n      event.preventDefault();\n      submitForm(this.host);\n    }\n  };\n\n  render() {\n    const isLink = this.href != null;\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.nativeButton = 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            'button--action-outline': this.type === 'action-outline',\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 : undefined}\n          tabindex={this.disabled ? '-1' : undefined}\n          type={isButton ? (this.submit ? 'submit' : this.reset ? 'reset' : 'button') : undefined}\n          name={isButton ? this.name : undefined}\n          value={isButton ? this.value : undefined}\n          href={isLink ? this.href : undefined}\n          target={isLink && this.target != null ? this.target : undefined}\n          download={isLink && this.download != null ? this.download : undefined}\n          rel={isLink && this.target != null ? 'noreferrer noopener' : undefined}\n          onBlur={this.handleBlur}\n          onFocus={this.handleFocus}\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"],"names":[],"mappings":"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"}

package/dist/ui-library/six-spinner.entry.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"six-spinner.entry.esm.js","sources":["src/components/six-spinner/six-spinner.scss?tag=six-spinner&encapsulation=shadow","src/components/six-spinner/six-spinner.tsx"],"sourcesContent":["@import 'src/global/component';\n\n/**\n * @prop --track-color: The color of the spinner's track.\n * @prop --indicator-color: The color of the spinner's indicator.\n * @prop --stroke-width: The width of the indicator.\n */\n:host {\n  --track-color: var(--six-progress-track-color);\n  --indicator-color: var(--six-progress-indicator-color);\n  --stroke-width: 2px;\n\n  display: inline-flex;\n}\n\n.spinner {\n  display: inline-block;\n  width: 1em;\n  height: 1em;\n  border-radius: 50%;\n  border: solid var(--stroke-width) var(--track-color);\n  border-top-color: var(--indicator-color);\n  border-right-color: var(--indicator-color);\n  animation: 1s linear infinite spin;\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n$color-six-spinner-background: rgba(255, 255, 255, 0.7);\n\n.six-spinner {\n  width: auto;\n  height: auto;\n  position: relative;\n\n  .six-spinner__container {\n    margin: 0;\n    transform: translateX(0);\n  }\n\n  .six-spinner__container svg {\n    transform: translateX(0);\n  }\n\n  &__container {\n    position: relative;\n    margin: 0 auto;\n    top: calc(50% - 20px);\n    z-index: 1;\n  }\n\n  &__container,\n  &__container svg {\n    width: 40px;\n    height: 40px;\n    display: block;\n    transform: translateX(40px);\n  }\n\n  path {\n    stroke-dashoffset: 70px;\n    stroke-dasharray: 70, 444;\n    -webkit-animation: six-spinner 2s cubic-bezier(0.56, 0.39, 0.51, 0.96) infinite;\n    animation: six-spinner 2s cubic-bezier(0.56, 0.39, 0.51, 0.96) infinite;\n  }\n\n  polygon {\n    stroke-dasharray: 310;\n    stroke-dashoffset: 310;\n    animation: big-polygon-draw 2s ease-in-out infinite;\n    -webkit-animation: big-polygon-draw 2s ease-in-out infinite;\n  }\n\n  polygon:nth-child(2),\n  polygon:nth-child(3) {\n    stroke-dasharray: 110;\n    stroke-dashoffset: 110;\n    animation: small-polygon-draw 2s ease-in-out infinite;\n    -webkit-animation: small-polygon-draw 2s ease-in-out infinite;\n  }\n\n  @keyframes big-polygon-draw {\n    0%,\n    100% {\n      stroke-dashoffset: 310;\n    }\n    50% {\n      stroke-dashoffset: 140;\n    }\n  }\n\n  @-webkit-keyframes big-polygon-draw {\n    0%,\n    100% {\n      stroke-dashoffset: 310;\n    }\n    50% {\n      stroke-dashoffset: 140;\n    }\n  }\n\n  @keyframes small-polygon-draw {\n    0%,\n    100% {\n      stroke-dashoffset: 110;\n    }\n    50% {\n      stroke-dashoffset: 50;\n    }\n  }\n\n  @-webkit-keyframes small-polygon-draw {\n    0%,\n    100% {\n      stroke-dashoffset: 110;\n    }\n    50% {\n      stroke-dashoffset: 50;\n    }\n  }\n\n  @-webkit-keyframes six-spinner {\n    to {\n      stroke-dashoffset: -444;\n    }\n  }\n\n  @keyframes six-spinner {\n    to {\n      stroke-dashoffset: -444;\n    }\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @part base - The component's base wrapper.\n * @part svg - The spinner icon.\n */\n@Component({\n  tag: 'six-spinner',\n  styleUrl: 'six-spinner.scss',\n  shadow: true,\n})\nexport class SixSpinner {\n  /** Indicates if the spinner is shown as animated SIX or BME logo or a simple spinner. */\n  @Prop() logo?: 'six' | 'bme';\n  /**\n   * **@deprecated** Use `logo=\"six\"` instead.\n   *\n   * If set to true, the spinner displays the SIX logo.\n   */\n  @Prop() six?: boolean;\n\n  /**\n   * Renders a container with a given SVG content.\n   */\n  private renderWrapper(content: SVGElement) {\n    return (\n      <span class=\"six-spinner\" aria-busy=\"true\" aria-live=\"polite\">\n        <div class=\"six-spinner__container\">{content}</div>\n      </span>\n    );\n  }\n\n  /**\n   * Renders the SIX logo spinner.\n   */\n  private renderSIXLogo() {\n    const sixLogo = (\n      <svg viewBox=\"0 0 40 40\" part=\"svg\">\n        <path\n          fill=\"none\"\n          stroke=\"#de3919\"\n          stroke-width=\"5\"\n          stroke-linecap=\"round\"\n          d=\"M 35 5 V 35 H 5 T 5 5 H 35 V 35 H 5 V 5 H 35 V 35 H -34 V 30 H 7 A 9 8 0 0 0 14 27 L 27 14 A 8 6 0 0 1 33 12 H 42\"\n        ></path>\n      </svg>\n    );\n    return this.renderWrapper(sixLogo);\n  }\n\n  /**\n   * Renders the BME logo spinner.\n   */\n  private renderBMELogo() {\n    const bmeLogo = (\n      <svg viewBox=\"0 0 45 55\" part=\"svg\">\n        <polygon\n          fill=\"none\"\n          stroke=\"black\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          points=\"4.42 51.96 17.02 31.473 2 31.473 2 22.486 17.02 22.486 4.42 2 15.404 2 30.289 26.98 14.763 51.96 4.42 51.96\"\n        />\n        <polygon\n          fill=\"none\"\n          stroke=\"black\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          points=\"42 51.96 31.655 51.96 24.598 40.498 29.831 32.073 42 51.96\"\n        />\n        <polygon\n          fill=\"none\"\n          stroke=\"black\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          points=\"24.518 12.719 31.014 2 42 2 29.831 21.637 24.518 12.719\"\n        />\n      </svg>\n    );\n    return this.renderWrapper(bmeLogo);\n  }\n\n  /**\n   * Renders a simple spinner.\n   */\n  private renderSimpleSpinner() {\n    return <span part=\"base\" class=\"spinner\" aria-busy=\"true\" aria-live=\"polite\" />;\n  }\n\n  render() {\n    // Check the deprecated `six` property first\n    if (this.six) {\n      console.warn('The \"six\" prop is deprecated. Use \"logo=\\'six\\'\" instead.');\n      return this.renderSIXLogo();\n    }\n\n    switch (this.logo) {\n      case 'six':\n        return this.renderSIXLogo();\n      case 'bme':\n        return this.renderBMELogo();\n      default:\n        return this.renderSimpleSpinner();\n    }\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,aAAa,GAAG,8mEAA8mE;;MCgBvnE,UAAU,GAAA,MAAA;;;;AAUrB;;AAEG;AACK,IAAA,aAAa,CAAC,OAAmB,EAAA;AACvC,QAAA,QACE,YAAM,KAAK,EAAC,aAAa,EAAW,WAAA,EAAA,MAAM,eAAW,QAAQ,EAAA,EAC3D,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,wBAAwB,EAAA,EAAE,OAAO,CAAO,CAC9C;;AAIX;;AAEG;IACK,aAAa,GAAA;QACnB,MAAM,OAAO,IACX,CAAK,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,KAAK,EAAA,EACjC,CAAA,CAAA,MAAA,EAAA,EACE,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,SAAS,EACH,cAAA,EAAA,GAAG,EACD,gBAAA,EAAA,OAAO,EACtB,CAAC,EAAC,mHAAmH,EAC/G,CAAA,CACJ,CACP;AACD,QAAA,OAAO,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC;;AAGpC;;AAEG;IACK,aAAa,GAAA;QACnB,MAAM,OAAO,IACX,CAAK,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,KAAK,EAAA,EACjC,CAAA,CAAA,SAAA,EAAA,EACE,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,OAAO,EACD,cAAA,EAAA,GAAG,oBACD,OAAO,EACtB,MAAM,EAAC,6GAA6G,EACpH,CAAA,EACF,CAAA,CAAA,SAAA,EAAA,EACE,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,OAAO,EACD,cAAA,EAAA,GAAG,oBACD,OAAO,EACtB,MAAM,EAAC,4DAA4D,EACnE,CAAA,EACF,CAAA,CAAA,SAAA,EAAA,EACE,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,OAAO,EACD,cAAA,EAAA,GAAG,EACD,gBAAA,EAAA,OAAO,EACtB,MAAM,EAAC,yDAAyD,EAChE,CAAA,CACE,CACP;AACD,QAAA,OAAO,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC;;AAGpC;;AAEG;IACK,mBAAmB,GAAA;QACzB,OAAO,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,SAAS,EAAW,WAAA,EAAA,MAAM,EAAW,WAAA,EAAA,QAAQ,GAAG;;IAGjF,MAAM,GAAA;;AAEJ,QAAA,IAAI,IAAI,CAAC,GAAG,EAAE;AACZ,YAAA,OAAO,CAAC,IAAI,CAAC,2DAA2D,CAAC;AACzE,YAAA,OAAO,IAAI,CAAC,aAAa,EAAE;;AAG7B,QAAA,QAAQ,IAAI,CAAC,IAAI;AACf,YAAA,KAAK,KAAK;AACR,gBAAA,OAAO,IAAI,CAAC,aAAa,EAAE;AAC7B,YAAA,KAAK,KAAK;AACR,gBAAA,OAAO,IAAI,CAAC,aAAa,EAAE;AAC7B,YAAA;AACE,gBAAA,OAAO,IAAI,CAAC,mBAAmB,EAAE;;;;;;;;"}