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

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

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

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

@@ -1,2 +0,0 @@
-import{r as i,c as t,h as s,g as e}from"./p-16b99232.js";import{s as n}from"./p-eb8f05a9.js";import{P as o}from"./p-18ea0c56.js";import{E as r}from"./p-9a860acc.js";import{b as h,a as l}from"./p-b4dfb7cf.js";import{D as a,a as d}from"./p-0786fa7c.js";function u(i){const t=i.tabIndex;return t>-1}function c(i){if(u(i)){return i}if(i.shadowRoot){const t=[...i.shadowRoot.children].find(u);if(t){return t}}if(i.children){return[...i.children].map(c)[0]}return null}const f=":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 m=i=>t=>(t===null||t===void 0?void 0:t.tagName.toLowerCase())===i.toLowerCase();const p=m("six-menu");const v=m("six-menu-item");let g=0;const x=class{constructor(e){i(this,e);this.sixShow=t(this,"six-dropdown-show",7);this.sixAfterShow=t(this,"six-dropdown-after-show",7);this.sixHide=t(this,"six-dropdown-hide",7);this.sixAfterHide=t(this,"six-dropdown-after-hide",7);this.sixAutoFilterFired=t(this,"six-dropdown-auto-filter-fired",7);this.sixAsyncFilterFired=t(this,"six-async-filter-fired",7);this.sixScroll=t(this,"six-dropdown-scroll",7);this.componentId=`dropdown-${++g}`;this.isVisible=false;this.hasBeenInitialized=false;this.eventListeners=new r;this.getMenuItems=()=>{if(this._options!==null){return this._options.map((i=>s("six-menu-item",{value:i.value},i.label)))}const[i]=h(this.panel);return h(i)||Array.from(i.querySelectorAll("six-menu-item"))};this.handleFilterInputChange=()=>{var i,t;const s=((t=(i=this.filterInputElement.value)===null||i===void 0?void 0:i.toLowerCase())===null||t===void 0?void 0:t.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 i=()=>{if(this.filter){this.filterInputElement.value="";if(this._options!==null){this._options=[...this.options]}else{const i=this.getMenuItems();i.forEach((i=>i.style.display="unset"))}}this.sixAfterHide.emit()};const t=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 o(this.trigger,this.positioner,{strategy:this.hoist?"fixed":"absolute",placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.panel,onAfterHide:i,onAfterShow:t,onTransitionEnd:s})}setupFiltering(i){this.eventListeners.add(this.filterInputElement,"six-input-input",d(i,this.filterDebounce))}handleFilteringForAttributeItems(i){if(i===""){this._options=[...this.options];return}this._options=this.options.filter((t=>{var s,e,n,o;return t.label&&((e=(s=String(t.label))===null||s===void 0?void 0:s.toLowerCase())===null||e===void 0?void 0:e.includes(i))||t.value&&((o=(n=String(t.value))===null||n===void 0?void 0:n.toLowerCase())===null||o===void 0?void 0:o.includes(i))}))}handleFilteringForSlotItems(i){const t=this.getMenuItems();t.forEach((async t=>{var s,e,n,o;const r=((e=(s=t===null||t===void 0?void 0:t.value)===null||s===void 0?void 0:s.toLowerCase())===null||e===void 0?void 0:e.includes(i))||((o=(n=await(t===null||t===void 0?void 0:t.getTextLabel()))===null||n===void 0?void 0:n.toLowerCase())===null||o===void 0?void 0:o.includes(i));t.style.display=r?"unset":"none"}))}disconnectedCallback(){this.eventListeners.removeAll();void this.hide();this.popover.destroy();this.popover=null}async show(){if(this.isVisible){return}const i=this.sixShow.emit();if(i.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 i=this.sixHide.emit();if(i.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[i]=h(this.trigger);if(i){if(typeof i.setFocus==="function"){i.setFocus()}else if(typeof i.focus==="function"){i.focus()}}}getMenu(){const[i]=h(this.panel).filter(p);return i}async reposition(){if(!this.open){return}this.popover.reposition()}handleDocumentKeyDown(i){if(i.key==="Escape"){void this.hide();this.focusOnTrigger();return}if(this.filterInputElement===this.host.shadowRoot.activeElement){if(i.key==="ArrowDown"){const i=this.getMenuItems().find((i=>i.style.display!=="none"));if(i){i.setFocus()}}}if(i.key==="Tab"){if(this.open&&v(document.activeElement)){i.preventDefault();void this.hide();this.focusOnTrigger();return}setTimeout((()=>{var i;const t=this.container.getRootNode()instanceof ShadowRoot?(i=document.activeElement.shadowRoot)===null||i===void 0?void 0:i.activeElement:document.activeElement;if((t===null||t===void 0?void 0:t.closest(this.container.tagName.toLowerCase()))!==this.container){void this.hide();return}}))}}handleDocumentMouseDown(i){const t=i.composedPath();if(!t.includes(this.container)){void this.hide();return}}handleMenuItemActivate(i){const t=i.target;n(t,this.panel)}handlePanelSelect(i){const t=i.target;if(this.closeOnSelect&&p(t)){void this.hide();this.focusOnTrigger()}}handleTriggerClick(){this.open?this.hide():this.show()}handleTriggerKeyDown(i){const t=this.getMenu();const s=t?[...t.querySelectorAll("six-menu-item")]:null;const e=s[0];const n=s[s.length-1];if(i.key==="Escape"){this.focusOnTrigger();void this.hide();return}if(!this.disableHideOnEnterAndSpace&&[" ","Enter"].includes(i.key)){i.preventDefault();this.open?void this.hide():void this.show();return}if(["ArrowDown","ArrowUp"].includes(i.key)){i.preventDefault();if(!this.open){void this.show()}if(i.key==="ArrowDown"&&e){e.setFocus();return}if(i.key==="ArrowUp"&&n){n.setFocus();return}}const o=["Tab","Shift","Meta","Ctrl","Alt"];if(this.open&&t&&!o.includes(i.key)){void t.typeToSelect(i.key);return}}handleTriggerKeyUp(i){if(i.key===" "){i.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[i]=h(this.trigger).map(c);if(i){i.setAttribute("aria-haspopup","true");i.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:i=>this.trigger=i,onClick:this.handleTriggerClick,onKeyDown:this.handleTriggerKeyDown,onKeyUp:this.handleTriggerKeyUp},s("slot",{name:"trigger",onSlotchange:this.handleTriggerSlotChange})),s("div",{ref:i=>this.positioner=i,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:i=>this.filterInputElement=i,placeholder:this.filterPlaceholder}),s("div",{ref:i=>this.panel=i,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"]}}};x.style=f;const w=":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 b=i=>{var t,s,e;return(e=(s=(t=i===null||i===void 0?void 0:i.shadowRoot)===null||t===void 0?void 0:t.querySelector(".menu-item"))===null||s===void 0?void 0:s.classList)===null||e===void 0?void 0:e.contains("menu-item--focused")};const _=i=>(i===null||i===void 0?void 0:i.tagName.toLowerCase())==="six-menu-item";const y=({value:i,label:t})=>s("six-menu-item",{value:i},t);const k=5;const A=64;const C=undefined;const S=class{constructor(s){i(this,s);this.sixMenuItemSelected=t(this,"six-menu-item-selected",7);this.eventListeners=new r;this.typeToSelectString="";this.handleScrolling=()=>{this.scrollingIndex=Math.floor(this.menuWrapper.scrollTop/this.sixMenuItemHeight)};this.removeBoxShadow=false;this.items=null;this.itemsShown=C;this.virtualScroll=false;this.itemSize=10;this.scrollingDebounce=15;this.scrollingIndex=0;this.sixMenuItemHeight=A}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(i){var t;clearTimeout(this.typeToSelectTimeout);this.typeToSelectTimeout=setTimeout((()=>this.typeToSelectString=""),750);this.typeToSelectString+=i.toLowerCase();const s=this.getItems();for(const i of s){const s=(t=i.shadowRoot)===null||t===void 0?void 0:t.querySelector("slot:not([name])");const e=l(s).toLowerCase().trim();if(e.substring(0,this.typeToSelectString.length)===this.typeToSelectString){i.setFocus();break}}}getItemsShown(){var i;const t=this.virtualScroll?k:C;return(i=this.itemsShown)!==null&&i!==void 0?i:t}setupForVirtualScrollingAfterRendering(){var i,t;if(!this.virtualScroll){return}this.eventListeners.add(this.menuWrapper,"scroll",d(this.handleScrolling,this.scrollingDebounce));const s=(t=(i=this.menu)===null||i===void 0?void 0:i.querySelector("six-menu-item"))===null||t===void 0?void 0:t.clientHeight;if(s&&s>0){this.sixMenuItemHeight=s}}getItems(){if(this.items!==null&&this.items!==undefined){return this.items.map(y)}const i=this.menu.querySelector("slot");return[...i.assignedElements({flatten:true})].filter((i=>_(i)&&!i.disabled))}getActiveItemIndex(){const i=this.getItems();const t=this.getActiveItem();const s=i.indexOf(t);if(s>-1){return s}const e=this.extractItemsFromDOM();return e.findIndex(b)}getActiveItem(){var i;const t=this.getItems().find((i=>i===document.activeElement));if(t){return t}return(i=this.extractItemsFromDOM())===null||i===void 0?void 0:i.find(b)}extractItemsFromDOM(){var i,t;return Array.from((t=(i=this.host)===null||i===void 0?void 0:i.shadowRoot)===null||t===void 0?void 0:t.querySelectorAll("six-menu-item"))}setActiveItem(i){i.setFocus()}handleClick(i){const t=i.target;const s=t.closest("six-menu-item");if(s&&!s.disabled){this.sixMenuItemSelected.emit({name:s.value,item:s})}}handleKeyDown(i){if(i.key==="Enter"){const t=this.getActiveItem();i.preventDefault();if(t){this.sixMenuItemSelected.emit({name:t.value,item:t})}}if(i.key===" "){i.preventDefault()}if(["ArrowDown","ArrowUp","Home","End"].includes(i.key)){const t=this.items===null?this.getItems():this.extractItemsFromDOM();let s=this.getActiveItemIndex();if(t.length){i.preventDefault();if(i.key==="ArrowDown"){s++}else if(i.key==="ArrowUp"){s--}else if(i.key==="Home"){s=0}else if(i.key==="End"){s=t.length-1}if(s<0)s=0;if(s>t.length-1)s=t.length-1;this.setActiveItem(t[s]);return}}void this.typeToSelect(i.key)}getMenuWrapperStyle(){const i={};if(this.getItemsShown()>0){i.height=`${this.getItemsShown()*this.sixMenuItemHeight}px`}return Object.assign({},i)}getMenuContainerStyle(){const i={};if(this.virtualScroll){i.transform=`translateY(${this.sixMenuItemHeight*this.scrollingIndex}px)`}return Object.assign({},i)}getScrollbarGhostStyle(){const i={};if(this.virtualScroll&&this.items!==null){i.height=`${this.items.length*this.sixMenuItemHeight-this.itemSize*this.sixMenuItemHeight}px`}return Object.assign({},i)}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:i=>this.menuWrapper=i,style:this.getMenuWrapperStyle(),part:"wrapper",class:{menu:true,"menu--noshadow":this.removeBoxShadow,"menu__wrapper--scrollable":this.getItemsShown()>0}},s("div",{ref:i=>this.menu=i,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=w;const D=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block}.menu-item{position:relative;display:flex;align-items:stretch;font-family:var(--six-font-sans);font-size:var(--six-font-size-small);font-weight:var(--six-font-weight-normal);line-height:var(--six-line-height-normal);letter-spacing:var(--six-letter-spacing-normal);text-align:left;color:var(--six-input-color);border-radius:var(--six-border-radius-medium);padding:var(--six-spacing-medium) var(--six-spacing-medium);transition:var(--six-transition-fast) fill;user-select:none;white-space:nowrap;cursor:pointer}.menu-item.menu-item--focused:not(.menu-item--disabled){outline:none;background-color:var(--six-menu-item-background-color)}.menu-item.menu-item--disabled{outline:none;color:var(--six-input-color-disabled);cursor:not-allowed}.menu-item .menu-item__label{flex:1 1 auto;align-self:center}.menu-item .menu-item__prefix{flex:0 0 auto;display:flex;align-items:center}.menu-item .menu-item__prefix ::slotted(:last-child){margin-right:0.5em}.menu-item .menu-item__suffix{flex:0 0 auto;display:flex;align-items:center}.menu-item .menu-item__suffix ::slotted(:first-child){margin-left:0.5em}.menu-item .menu-item__check{flex:0 0 auto;display:flex;align-items:center;margin-left:var(--six-spacing-small);visibility:hidden;font-size:inherit}.menu-item--checked .menu-item__check{visibility:visible}";const z=class{constructor(t){i(this,t);this.hasFocus=false;this.checked=false;this.value="";this.disabled=false}connectedCallback(){this.handleBlur=this.handleBlur.bind(this);this.handleFocus=this.handleFocus.bind(this);this.handleMouseEnter=this.handleMouseEnter.bind(this);this.handleMouseLeave=this.handleMouseLeave.bind(this)}async setFocus(i){this.menuItem.focus(i)}async removeFocus(){this.menuItem.blur()}getTextLabel(){return Promise.resolve(l(this.defaultSlot))}handleBlur(){this.hasFocus=false}handleFocus(){this.hasFocus=true}handleMouseEnter(){this.setFocus()}handleMouseLeave(){this.removeFocus()}render(){return s("div",{ref:i=>this.menuItem=i,part:"base",class:{"menu-item":true,"menu-item--checked":this.checked,"menu-item--disabled":this.disabled,"menu-item--focused":this.hasFocus},role:"menuitem","aria-disabled":this.disabled?"true":"false","aria-checked":this.checked?"true":"false",tabIndex:!this.disabled?0:null,onFocus:this.handleFocus,onBlur:this.handleBlur,onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave},s("span",{part:"prefix",class:"menu-item__prefix"},s("slot",{name:"prefix"})),s("span",{part:"label",class:"menu-item__label"},s("slot",{ref:i=>this.defaultSlot=i})),s("span",{part:"suffix",class:"menu-item__suffix"},s("slot",{name:"suffix"})),s("span",{part:"checked-icon",class:"menu-item__check"},s("six-icon",{size:"small","aria-hidden":"true"},"check")))}};z.style=D;export{x as six_dropdown,S as six_menu,z as six_menu_item};
-//# sourceMappingURL=p-0d9cbb51.entry.js.map

package/dist/ui-library/p-0d9cbb51.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","sixMenuItemCss","SixMenuItem","handleBlur","handleFocus","handleMouseEnter","handleMouseLeave","blur","Promise","resolve","defaultSlot","hasFocus","removeFocus","checked","onFocus","onBlur","onMouseEnter","onMouseLeave","size"],"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","./src/components/six-menu-item/six-menu-item.scss?tag=six-menu-item&encapsulation=shadow","./src/components/six-menu-item/six-menu-item.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","@import 'src/global/component';\n\n:host {\n  display: block;\n}\n\n.menu-item {\n  position: relative;\n  display: flex;\n  align-items: stretch;\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: var(--six-line-height-normal);\n  letter-spacing: var(--six-letter-spacing-normal);\n  text-align: left;\n  color: var(--six-input-color);\n  border-radius: var(--six-border-radius-medium);\n  padding: var(--six-spacing-medium) var(--six-spacing-medium);\n  transition: var(--six-transition-fast) fill;\n  user-select: none;\n  white-space: nowrap;\n  cursor: pointer;\n\n  &.menu-item--focused:not(.menu-item--disabled) {\n    outline: none;\n    background-color: var(--six-menu-item-background-color);\n  }\n\n  &.menu-item--disabled {\n    outline: none;\n    color: var(--six-input-color-disabled);\n    cursor: not-allowed;\n  }\n\n  .menu-item__label {\n    flex: 1 1 auto;\n    align-self: center;\n  }\n\n  .menu-item__prefix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n\n    ::slotted(:last-child) {\n      margin-right: 0.5em;\n    }\n  }\n\n  .menu-item__suffix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n\n    ::slotted(:first-child) {\n      margin-left: 0.5em;\n    }\n  }\n\n  .menu-item__check {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    margin-left: var(--six-spacing-small);\n    visibility: hidden;\n    font-size: inherit;\n  }\n}\n\n.menu-item--checked .menu-item__check {\n  visibility: visible;\n}\n","import { Component, Method, Prop, State, h } from '@stencil/core';\nimport { getTextContent } from '../../utils/slot';\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 item's label.\n * @slot prefix - Used to prepend an icon or similar element to the menu item.\n * @slot suffix - Used to append an icon or similar element to the menu item.\n *\n * @part base - The component's base wrapper.\n * @part checked-icon - The container that wraps the checked icon.\n * @part prefix - The prefix container.\n * @part label - The menu item label.\n * @part suffix - The suffix container.\n */\n\n@Component({\n  tag: 'six-menu-item',\n  styleUrl: 'six-menu-item.scss',\n  shadow: true,\n})\nexport class SixMenuItem {\n  menuItem: HTMLElement;\n  defaultSlot: HTMLSlotElement;\n\n  @State() hasFocus = false;\n\n  /** Set to true to draw the item in a checked state. */\n  @Prop({ reflect: true }) checked = false;\n\n  /** A unique value to store in the menu item. This can be used as a way to identify menu items when selected. */\n  @Prop({ reflect: true }) value = '';\n\n  /** Set to true to draw the menu item in a disabled state. */\n  @Prop({ reflect: true }) disabled = false;\n\n  connectedCallback() {\n    this.handleBlur = this.handleBlur.bind(this);\n    this.handleFocus = this.handleFocus.bind(this);\n    this.handleMouseEnter = this.handleMouseEnter.bind(this);\n    this.handleMouseLeave = this.handleMouseLeave.bind(this);\n  }\n\n  /** Sets focus on the button. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.menuItem.focus(options);\n  }\n\n  /** Removes focus from the button. */\n  @Method()\n  async removeFocus() {\n    this.menuItem.blur();\n  }\n\n  /** Returns a text label based on the contents of the menu item's default slot. */\n  @Method()\n  getTextLabel() {\n    return Promise.resolve(getTextContent(this.defaultSlot));\n  }\n\n  handleBlur() {\n    this.hasFocus = false;\n  }\n\n  handleFocus() {\n    this.hasFocus = true;\n  }\n\n  handleMouseEnter() {\n    this.setFocus();\n  }\n\n  handleMouseLeave() {\n    this.removeFocus();\n  }\n\n  render() {\n    return (\n      <div\n        ref={(el) => (this.menuItem = el)}\n        part=\"base\"\n        class={{\n          'menu-item': true,\n          'menu-item--checked': this.checked,\n          'menu-item--disabled': this.disabled,\n          'menu-item--focused': this.hasFocus,\n        }}\n        role=\"menuitem\"\n        aria-disabled={this.disabled ? 'true' : 'false'}\n        aria-checked={this.checked ? 'true' : 'false'}\n        tabIndex={!this.disabled ? 0 : null}\n        onFocus={this.handleFocus}\n        onBlur={this.handleBlur}\n        onMouseEnter={this.handleMouseEnter}\n        onMouseLeave={this.handleMouseLeave}\n      >\n        <span part=\"prefix\" class=\"menu-item__prefix\">\n          <slot name=\"prefix\" />\n        </span>\n\n        <span part=\"label\" class=\"menu-item__label\">\n          <slot ref={(el) => (this.defaultSlot = el as HTMLSlotElement)} />\n        </span>\n\n        <span part=\"suffix\" class=\"menu-item__suffix\">\n          <slot name=\"suffix\" />\n        </span>\n\n        <span part=\"checked-icon\" class=\"menu-item__check\">\n          <six-icon size=\"small\" aria-hidden=\"true\">\n            check\n          </six-icon>\n        </span>\n      </div>\n    );\n  }\n}\n"],"mappings":"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"}

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

@@ -1 +0,0 @@
-{"version":3,"names":["sixIconButtonCss","SixIconButton","this","handleClickEvent","event","disabled","preventDefault","stopPropagation","componentDidLoad","button","focusVisible","observe","disconnectedCallback","unobserve","render","html","h","innerHTML","onClick","class","ref","el","part","type","label","size","name"],"sources":["./src/components/six-icon-button/six-icon-button.scss?tag=six-icon-button&encapsulation=shadow","./src/components/six-icon-button/six-icon-button.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: inline-block;\n}\n\n.icon-button {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  background: none;\n  border: none;\n  border-radius: var(--six-border-radius-medium);\n  font-size: inherit;\n  color: var(--six-input-icon-color);\n  padding: var(--six-spacing-x-small);\n  cursor: pointer;\n  transition: var(--six-transition-medium) color;\n  -webkit-appearance: none;\n\n  &:hover:not(.icon-button--disabled),\n  &:focus:not(.icon-button--disabled) {\n    color: var(--six-input-icon-color-hover);\n  }\n\n  &:active:not(.icon-button--disabled) {\n    color: var(--six-input-icon-color);\n  }\n\n  &:focus {\n    outline: none;\n  }\n}\n\n.icon-button--disabled {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n.icon-button-wrapper--disabled {\n  cursor: not-allowed;\n}\n\n.focus-visible.icon-button:focus {\n  box-shadow: var(--six-button-focus-shadow);\n}\n\n.icon-button ::slotted(six-badge) {\n  position: absolute;\n  top: 0;\n  right: 0;\n  pointer-events: none;\n}\n\n.icon-button six-icon[size='xLarge'] + ::slotted(six-badge) {\n  transform: translateY(40%) translateX(-35%);\n}\n\n.icon-button six-icon[size='large'] + ::slotted(six-badge) {\n  transform: translateY(20%) translateX(-20%);\n}\n\n// TODO: tx4u9 should be adjusted for all sizes after design team\n.icon-button six-icon[size='medium'] + ::slotted(six-badge) {\n  transform: translateY(10%) translateX(50%);\n}\n\n.icon-button six-icon[size='small'] + ::slotted(six-badge) {\n  //  no translation necessary\n}\n\n.icon-button six-icon[size='xSmall'] + ::slotted(six-badge) {\n  transform: translateY(-25%) translateX(25%);\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @part base - The component's base wrapper.\n */\n\n@Component({\n  tag: 'six-icon-button',\n  styleUrl: 'six-icon-button.scss',\n  shadow: true,\n})\nexport class SixIconButton {\n  button: HTMLButtonElement;\n\n  /** The name of the icon to draw. */\n  @Prop({ reflect: true }) name: string;\n\n  /** The icon's size. */\n  @Prop({ reflect: true }) size: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge' = 'medium';\n\n  /**\n   * A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should\n   * always include a label that describes what the icon button does.\n   */\n  @Prop({ reflect: true }) label: string;\n\n  /** Set to true to disable the button. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** HTML symbol code or entity. */\n  @Prop({ reflect: true }) html: string;\n\n  componentDidLoad() {\n    if (this.button) {\n      focusVisible.observe(this.button);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.button) {\n      focusVisible.unobserve(this.button);\n    }\n  }\n\n  render() {\n    const html = this.html && <span innerHTML={this.html} />;\n\n    return (\n      <div onClick={this.handleClickEvent} class={{ 'icon-button-wrapper--disabled': this.disabled }}>\n        <button\n          ref={(el) => (this.button = el)}\n          part=\"base\"\n          disabled={this.disabled}\n          class={{\n            'icon-button': true,\n            'icon-button--disabled': this.disabled,\n          }}\n          type=\"button\"\n          aria-label={this.label}\n        >\n          <six-icon aria-hidden=\"true\" size={this.size}>\n            {this.name}\n          </six-icon>\n          <slot />\n          {html}\n        </button>\n      </div>\n    );\n  }\n\n  private handleClickEvent = (event) => {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  };\n}\n"],"mappings":"+EAAA,MAAMA,EAAmB,i0C,MCiBZC,EAAa,M,yBA2DhBC,KAAAC,iBAAoBC,IAC1B,GAAIF,KAAKG,SAAU,CACjBD,EAAME,iBACNF,EAAMG,iB,iCAvDmG,S,mCASzE,M,oBAKpCC,mBACE,GAAIN,KAAKO,OAAQ,CACfC,EAAaC,QAAQT,KAAKO,O,EAI9BG,uBACE,GAAIV,KAAKO,OAAQ,CACfC,EAAaG,UAAUX,KAAKO,O,EAIhCK,SACE,MAAMC,EAAOb,KAAKa,MAAQC,EAAA,QAAMC,UAAWf,KAAKa,OAEhD,OACEC,EAAA,OAAKE,QAAShB,KAAKC,iBAAkBgB,MAAO,CAAE,gCAAiCjB,KAAKG,WAClFW,EAAA,UACEI,IAAMC,GAAQnB,KAAKO,OAASY,EAC5BC,KAAK,OACLjB,SAAUH,KAAKG,SACfc,MAAO,CACL,cAAe,KACf,wBAAyBjB,KAAKG,UAEhCkB,KAAK,SAAQ,aACDrB,KAAKsB,OAEjBR,EAAA,0BAAsB,OAAOS,KAAMvB,KAAKuB,MACrCvB,KAAKwB,MAERV,EAAA,aACCD,G"}

package/dist/ui-library/p-1414a242.entry.js

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

package/dist/ui-library/p-1414a242.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["sixDrawerCss","hasPreventScroll","isPreventScrollSupported","id","SixDrawer","this","componentId","willShow","willHide","handleOpenChange","open","show","hide","connectedCallback","handleCloseClick","bind","handleTransitionEnd","handleKeyDown","handleOverlayClick","handleSlotChange","modal","Modal","host","onFocusOut","contained","panel","focus","componentWillLoad","resetTransitionVariables","disconnectedCallback","unlockBodyScrolling","async","sixShow","emit","defaultPrevented","isVisible","activate","lockBodyScrolling","requestAnimationFrame","sixInitialFocus","preventScroll","drawer","addEventListener","once","sixHide","deactivate","event","key","sixOverlayDismiss","hasFooter","hasSlot","target","propertyName","classList","contains","sixAfterShow","sixAfterHide","render","h","ref","el","part","class","placement","onKeyDown","onTransitionEnd","onClick","tabIndex","role","noHeader","label","name","String","fromCharCode","exportparts","onSlotchange"],"sources":["./src/components/six-drawer/six-drawer.scss?tag=six-drawer&encapsulation=shadow","./src/components/six-drawer/six-drawer.tsx"],"sourcesContent":["@import 'src/global/component';\n@import 'src/global/mixins/hidden';\n\n/**\n * @prop --size: The preferred size of the drawer. This will be applied to the drawer's width or height depending on its\n *   `placement`. Note that the drawer will shrink to accommodate smaller screens.\n */\n:host {\n  --size: 25rem;\n\n  display: contents;\n}\n\n.drawer {\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  overflow: hidden;\n\n  &:not(.drawer--visible) {\n    @include hidden;\n  }\n}\n\n.drawer--contained {\n  position: absolute;\n  z-index: initial;\n}\n\n.drawer--fixed {\n  position: fixed;\n  z-index: var(--six-z-index-drawer);\n}\n\n.drawer__panel {\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  z-index: 2;\n  max-width: 100%;\n  max-height: 100%;\n  background-color: var(--six-drawer-background-color);\n  color: var(--six-drawer-color);\n  box-shadow: var(--six-shadow-x-large);\n  transition: var(--six-transition-medium) transform;\n  overflow: auto;\n  pointer-events: all;\n\n  &:focus {\n    outline: none;\n  }\n}\n\n.drawer--top .drawer__panel {\n  top: 0;\n  right: auto;\n  bottom: auto;\n  left: 0;\n  width: 100%;\n  height: var(--size);\n  transform: translate(0, -100%);\n}\n\n.drawer--right .drawer__panel {\n  top: 0;\n  right: 0;\n  bottom: auto;\n  left: auto;\n  width: var(--size);\n  height: 100%;\n  transform: translate(100%, 0);\n}\n\n.drawer--bottom .drawer__panel {\n  top: auto;\n  right: auto;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: var(--size);\n  transform: translate(0, 100%);\n}\n\n.drawer--left .drawer__panel {\n  top: 0;\n  right: auto;\n  bottom: auto;\n  left: 0;\n  width: var(--size);\n  height: 100%;\n  transform: translate(-100%, 0);\n}\n\n.drawer--open .drawer__panel {\n  // don't use translate here or it will cause problems with popovers inside the drawer e.g. dropdown, select etc.\n  transform: none;\n}\n\n.drawer__header {\n  display: flex;\n}\n\n.drawer__title {\n  flex: 1 1 auto;\n  font-size: var(--six-font-size-large);\n  line-height: var(--six-line-height-dense);\n  padding: var(--six-spacing-large);\n}\n\n.drawer__close {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: var(--six-font-size-x-large);\n  padding: 0 var(--six-spacing-large);\n}\n\n.drawer__body {\n  flex: 1 1 auto;\n  padding: var(--six-spacing-large);\n  overflow: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n.drawer__footer {\n  text-align: right;\n  padding: var(--six-spacing-large);\n\n  ::slotted(six-button:not(:last-of-type)) {\n    margin-right: var(--six-spacing-x-small);\n  }\n}\n\n.drawer:not(.drawer--has-footer) .drawer__footer {\n  display: none;\n}\n\n.drawer__overlay {\n  display: block;\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: var(--six-overlay-background-color);\n  opacity: 0;\n  transition: var(--six-transition-medium) opacity;\n  pointer-events: all;\n}\n\n.drawer--contained .drawer__overlay {\n  position: absolute;\n}\n\n.drawer--open .drawer__overlay {\n  opacity: 0.4;\n}\n","import { Component, Element, Event, EventEmitter, Method, Prop, State, Watch, h } from '@stencil/core';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport { hasSlot } from '../../utils/slot';\nimport { isPreventScrollSupported } from '../../utils/support';\nimport Modal from '../../utils/modal';\nimport { EmptyPayload } from '../../utils/types';\n\nconst hasPreventScroll = isPreventScrollSupported();\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 drawer's content.\n * @slot label - The drawer's label. Alternatively, you can use the label prop.\n * @slot footer - The drawer's footer, usually one or more buttons representing various options.\n *\n * @part base - The component's base wrapper.\n * @part overlay - The overlay.\n * @part panel - The drawer panel (where the drawer and its content is rendered).\n * @part header - The drawer header.\n * @part title - The drawer title.\n * @part close-button - The close button.\n * @part body - The drawer body.\n * @part footer - The drawer footer.\n */\n\n@Component({\n  tag: 'six-drawer',\n  styleUrl: 'six-drawer.scss',\n  shadow: true,\n})\nexport class SixDrawer {\n  componentId = `drawer-${++id}`;\n  drawer: HTMLElement;\n  modal: Modal;\n  panel: HTMLElement;\n  willShow = false;\n  willHide = false;\n\n  @Element() host: HTMLSixDrawerElement;\n\n  @State() hasFooter = false;\n  @State() isVisible = false;\n\n  /** Indicates whether or not the drawer 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 drawer's label as displayed in the header. You should always include a relevant label even when using\n   * `no-header`, as it is required for proper accessibility.\n   */\n  @Prop() label = '';\n\n  /** The direction from which the drawer will open. */\n  @Prop() placement: 'top' | 'right' | 'bottom' | 'left' = 'right';\n\n  /**\n   * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\n   * its parent element, set this prop and add `position: relative` to the parent.\n   */\n  @Prop() contained = false;\n\n  /**\n   * Removes the header. This will also remove the default close button, so please ensure you provide an easy,\n   * accessible way for users to dismiss the drawer.\n   */\n  @Prop() noHeader = false;\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  /** Emitted when the drawer opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event({ eventName: 'six-drawer-show' }) sixShow: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the drawer opens and all transitions are complete. */\n  @Event({ eventName: 'six-drawer-after-show' }) sixAfterShow: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the drawer closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event({ eventName: 'six-drawer-hide' }) sixHide: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the drawer closes and all transitions are complete. */\n  @Event({ eventName: 'six-drawer-after-hide' }) sixAfterHide: EventEmitter<EmptyPayload>;\n\n  /**\n   * Emitted when the drawer opens and the panel gains focus. Calling `event.preventDefault()` will prevent focus and\n   * allow you to set it on a different element in the drawer, such as an input or button.\n   */\n  @Event({ eventName: 'six-drawer-initial-focus' }) sixInitialFocus: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the drawer from closing. */\n  @Event({ eventName: 'six-drawer-overlay-dismiss' }) sixOverlayDismiss: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    this.handleCloseClick = this.handleCloseClick.bind(this);\n    this.handleTransitionEnd = this.handleTransitionEnd.bind(this);\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n    this.handleOverlayClick = this.handleOverlayClick.bind(this);\n    this.handleSlotChange = this.handleSlotChange.bind(this);\n\n    this.modal = new Modal(this.host, {\n      onFocusOut: () => (this.contained ? null : this.panel.focus()),\n    });\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n\n    // Show on init if open\n    if (this.open) {\n      this.show();\n      // if the sidebar is open by default we need to manually reset the\n      // transition variables since there will be no transition event\n      this.resetTransitionVariables();\n    }\n  }\n\n  disconnectedCallback() {\n    unlockBodyScrolling(this.host);\n  }\n\n  /** Shows the drawer */\n  @Method()\n  async show() {\n    if (this.willShow) {\n      return;\n    }\n\n    const sixShow = this.sixShow.emit();\n    if (sixShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.willShow = true;\n    this.isVisible = true;\n    this.open = true;\n\n    // Lock body scrolling only if the drawer isn't contained\n    if (!this.contained) {\n      this.modal.activate();\n      lockBodyScrolling(this.host);\n    }\n\n    if (this.open) {\n      if (hasPreventScroll) {\n        // Wait for the next frame before setting initial focus so the dialog is technically visible\n        requestAnimationFrame(() => {\n          const sixInitialFocus = this.sixInitialFocus.emit();\n          if (!sixInitialFocus.defaultPrevented) {\n            this.panel.focus({ preventScroll: true });\n          }\n        });\n      } else {\n        // Once Safari supports { preventScroll: true } we can remove this nasty little hack, but until then we need to\n        // wait for the transition to complete before setting focus, otherwise the panel may render in a buggy way its\n        // out of view initially.\n        //\n        // Fiddle: https://jsfiddle.net/g6buoafq/1/\n        // Safari: https://bugs.webkit.org/show_bug.cgi?id=178583\n        //\n        this.drawer.addEventListener(\n          'transitionend',\n          () => {\n            const sixInitialFocus = this.sixInitialFocus.emit();\n            if (!sixInitialFocus.defaultPrevented) {\n              this.panel.focus();\n            }\n          },\n          { once: true }\n        );\n      }\n    }\n  }\n\n  /** Hides the drawer */\n  @Method()\n  async hide() {\n    if (this.willHide) {\n      return;\n    }\n\n    const sixHide = this.sixHide.emit();\n    if (sixHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.willHide = true;\n    this.open = false;\n    this.modal.deactivate();\n\n    unlockBodyScrolling(this.host);\n  }\n\n  handleCloseClick() {\n    this.hide();\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Escape') {\n      this.hide();\n    }\n  }\n\n  handleOverlayClick() {\n    const sixOverlayDismiss = this.sixOverlayDismiss.emit();\n\n    if (!sixOverlayDismiss.defaultPrevented) {\n      this.hide();\n    }\n  }\n\n  handleSlotChange() {\n    this.hasFooter = hasSlot(this.host, 'footer');\n  }\n\n  handleTransitionEnd(event: TransitionEvent) {\n    const target = event.target as HTMLElement;\n\n    // Ensure we only emit one event when the target element is no longer visible\n    if (event.propertyName === 'transform' && target.classList.contains('drawer__panel')) {\n      this.resetTransitionVariables();\n    }\n  }\n\n  private resetTransitionVariables() {\n    this.isVisible = this.open;\n    this.willShow = false;\n    this.willHide = false;\n    this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n  }\n\n  render() {\n    return (\n      <div\n        ref={(el) => (this.drawer = el)}\n        part=\"base\"\n        class={{\n          drawer: true,\n          'drawer--open': this.open,\n          'drawer--visible': this.isVisible,\n          'drawer--top': this.placement === 'top',\n          'drawer--right': this.placement === 'right',\n          'drawer--bottom': this.placement === 'bottom',\n          'drawer--left': this.placement === 'left',\n          'drawer--contained': this.contained,\n          'drawer--fixed': !this.contained,\n          'drawer--has-footer': this.hasFooter,\n        }}\n        onKeyDown={this.handleKeyDown}\n        onTransitionEnd={this.handleTransitionEnd}\n      >\n        <div part=\"overlay\" class=\"drawer__overlay\" onClick={this.handleOverlayClick} tabIndex={-1} />\n\n        <div\n          ref={(el) => (this.panel = el)}\n          part=\"panel\"\n          class=\"drawer__panel\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-hidden={this.open ? 'false' : 'true'}\n          aria-label={this.noHeader ? this.label : null}\n          aria-labelledby={!this.noHeader ? `${this.componentId}-title` : null}\n          tabIndex={0}\n        >\n          {!this.noHeader && (\n            <header part=\"header\" class=\"drawer__header\">\n              <span part=\"title\" class=\"drawer__title\" id={`${this.componentId}-title`}>\n                <slot name=\"label\">\n                  {/* If there's no label, use an invisible character to prevent the heading from collapsing */}\n                  {this.label || String.fromCharCode(65279)}\n                </slot>\n              </span>\n              <six-icon-button\n                exportparts=\"base:close-button\"\n                class=\"drawer__close\"\n                name=\"x\"\n                onClick={this.handleCloseClick}\n              />\n            </header>\n          )}\n\n          <div part=\"body\" class=\"drawer__body\">\n            <slot />\n          </div>\n\n          <footer part=\"footer\" class=\"drawer__footer\">\n            <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n          </footer>\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"mLAAA,MAAMA,EAAe,0xECOrB,MAAMC,EAAmBC,IACzB,IAAIC,EAAK,E,MA2BIC,EAAS,M,2UACpBC,KAAAC,YAAc,YAAYH,IAI1BE,KAAAE,SAAW,MACXF,KAAAG,SAAW,M,eAIU,M,eACA,M,UAG0B,M,WAM/B,G,eAGyC,Q,eAMrC,M,cAMD,K,CAGnBC,mBACEJ,KAAKK,KAAOL,KAAKM,OAASN,KAAKO,M,CAwBjCC,oBACER,KAAKS,iBAAmBT,KAAKS,iBAAiBC,KAAKV,MACnDA,KAAKW,oBAAsBX,KAAKW,oBAAoBD,KAAKV,MACzDA,KAAKY,cAAgBZ,KAAKY,cAAcF,KAAKV,MAC7CA,KAAKa,mBAAqBb,KAAKa,mBAAmBH,KAAKV,MACvDA,KAAKc,iBAAmBd,KAAKc,iBAAiBJ,KAAKV,MAEnDA,KAAKe,MAAQ,IAAIC,EAAMhB,KAAKiB,KAAM,CAChCC,WAAY,IAAOlB,KAAKmB,UAAY,KAAOnB,KAAKoB,MAAMC,S,CAI1DC,oBACEtB,KAAKc,mBAGL,GAAId,KAAKK,KAAM,CACbL,KAAKM,OAGLN,KAAKuB,0B,EAITC,uBACEC,EAAoBzB,KAAKiB,K,CAK3BS,aACE,GAAI1B,KAAKE,SAAU,CACjB,M,CAGF,MAAMyB,EAAU3B,KAAK2B,QAAQC,OAC7B,GAAID,EAAQE,iBAAkB,CAC5B7B,KAAKK,KAAO,MACZ,M,CAGFL,KAAKE,SAAW,KAChBF,KAAK8B,UAAY,KACjB9B,KAAKK,KAAO,KAGZ,IAAKL,KAAKmB,UAAW,CACnBnB,KAAKe,MAAMgB,WACXC,EAAkBhC,KAAKiB,K,CAGzB,GAAIjB,KAAKK,KAAM,CACb,GAAIT,EAAkB,CAEpBqC,uBAAsB,KACpB,MAAMC,EAAkBlC,KAAKkC,gBAAgBN,OAC7C,IAAKM,EAAgBL,iBAAkB,CACrC7B,KAAKoB,MAAMC,MAAM,CAAEc,cAAe,M,SAGjC,CAQLnC,KAAKoC,OAAOC,iBACV,iBACA,KACE,MAAMH,EAAkBlC,KAAKkC,gBAAgBN,OAC7C,IAAKM,EAAgBL,iBAAkB,CACrC7B,KAAKoB,MAAMC,O,IAGf,CAAEiB,KAAM,M,GAQhBZ,aACE,GAAI1B,KAAKG,SAAU,CACjB,M,CAGF,MAAMoC,EAAUvC,KAAKuC,QAAQX,OAC7B,GAAIW,EAAQV,iBAAkB,CAC5B7B,KAAKK,KAAO,KACZ,M,CAGFL,KAAKG,SAAW,KAChBH,KAAKK,KAAO,MACZL,KAAKe,MAAMyB,aAEXf,EAAoBzB,KAAKiB,K,CAG3BR,mBACET,KAAKO,M,CAGPK,cAAc6B,GACZ,GAAIA,EAAMC,MAAQ,SAAU,CAC1B1C,KAAKO,M,EAITM,qBACE,MAAM8B,EAAoB3C,KAAK2C,kBAAkBf,OAEjD,IAAKe,EAAkBd,iBAAkB,CACvC7B,KAAKO,M,EAITO,mBACEd,KAAK4C,UAAYC,EAAQ7C,KAAKiB,KAAM,S,CAGtCN,oBAAoB8B,GAClB,MAAMK,EAASL,EAAMK,OAGrB,GAAIL,EAAMM,eAAiB,aAAeD,EAAOE,UAAUC,SAAS,iBAAkB,CACpFjD,KAAKuB,0B,EAIDA,2BACNvB,KAAK8B,UAAY9B,KAAKK,KACtBL,KAAKE,SAAW,MAChBF,KAAKG,SAAW,MAChBH,KAAKK,KAAOL,KAAKkD,aAAatB,OAAS5B,KAAKmD,aAAavB,M,CAG3DwB,SACE,OACEC,EAAA,OACEC,IAAMC,GAAQvD,KAAKoC,OAASmB,EAC5BC,KAAK,OACLC,MAAO,CACLrB,OAAQ,KACR,eAAgBpC,KAAKK,KACrB,kBAAmBL,KAAK8B,UACxB,cAAe9B,KAAK0D,YAAc,MAClC,gBAAiB1D,KAAK0D,YAAc,QACpC,iBAAkB1D,KAAK0D,YAAc,SACrC,eAAgB1D,KAAK0D,YAAc,OACnC,oBAAqB1D,KAAKmB,UAC1B,iBAAkBnB,KAAKmB,UACvB,qBAAsBnB,KAAK4C,WAE7Be,UAAW3D,KAAKY,cAChBgD,gBAAiB5D,KAAKW,qBAEtB0C,EAAA,OAAKG,KAAK,UAAUC,MAAM,kBAAkBI,QAAS7D,KAAKa,mBAAoBiD,UAAW,IAEzFT,EAAA,OACEC,IAAMC,GAAQvD,KAAKoB,MAAQmC,EAC3BC,KAAK,QACLC,MAAM,gBACNM,KAAK,SAAQ,aACF,OAAM,cACJ/D,KAAKK,KAAO,QAAU,OAAM,aAC7BL,KAAKgE,SAAWhE,KAAKiE,MAAQ,KAAI,mBAC3BjE,KAAKgE,SAAW,GAAGhE,KAAKC,oBAAsB,KAChE6D,SAAU,IAER9D,KAAKgE,UACLX,EAAA,UAAQG,KAAK,SAASC,MAAM,kBAC1BJ,EAAA,QAAMG,KAAK,QAAQC,MAAM,gBAAgB3D,GAAI,GAAGE,KAAKC,qBACnDoD,EAAA,QAAMa,KAAK,SAERlE,KAAKiE,OAASE,OAAOC,aAAa,SAGvCf,EAAA,mBACEgB,YAAY,oBACZZ,MAAM,gBACNS,KAAK,IACLL,QAAS7D,KAAKS,oBAKpB4C,EAAA,OAAKG,KAAK,OAAOC,MAAM,gBACrBJ,EAAA,cAGFA,EAAA,UAAQG,KAAK,SAASC,MAAM,kBAC1BJ,EAAA,QAAMa,KAAK,SAASI,aAActE,KAAKc,qB"}