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

package/dist/esm/six-form.entry.js.map

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

package/dist/esm/six-timepicker.types-e161a447.js

@@ -1,50 +0,0 @@
-const isString = (value) => typeof value === 'string';
-// only use '==' instead of '===' to also catch undefined and void
-const isNil = (value) => value == null;
-const isDate = (value) => value instanceof Date;
-const isNumber = (value) => value === 'number';
-
-/*
- * Defines the different time periods for the 12-hour-clock
- */
-var SixTimePeriod;
-(function (SixTimePeriod) {
-  SixTimePeriod["AM"] = "AM";
-  SixTimePeriod["PM"] = "PM";
-})(SixTimePeriod || (SixTimePeriod = {}));
-var SixTimePropertyName;
-(function (SixTimePropertyName) {
-  SixTimePropertyName["HOURS"] = "hours";
-  SixTimePropertyName["MINUTES"] = "minutes";
-  SixTimePropertyName["SECONDS"] = "seconds";
-  SixTimePropertyName["MILLISECONDS"] = "milliseconds";
-  SixTimePropertyName["HAS_24_HOURS"] = "has24Hours";
-  SixTimePropertyName["PERIOD"] = "period";
-})(SixTimePropertyName || (SixTimePropertyName = {}));
-/*
- * Defines the different time units allowed to use in a timestring
- */
-var TIME_FORMAT_CHAR;
-(function (TIME_FORMAT_CHAR) {
-  TIME_FORMAT_CHAR["HOUR_24"] = "HH";
-  TIME_FORMAT_CHAR["HOUR_12"] = "hh";
-  TIME_FORMAT_CHAR["MINUTE"] = "mm";
-  TIME_FORMAT_CHAR["SECOND"] = "ss";
-  TIME_FORMAT_CHAR["MILLISECOND"] = "ms";
-  TIME_FORMAT_CHAR["PERIOD"] = "aa";
-})(TIME_FORMAT_CHAR || (TIME_FORMAT_CHAR = {}));
-/*
- * Defines a mapping from the time format unit characters to the sixTime property name
- */
-const TIME_FORMAT_CHAR_TO_SIX_TIME_PROPERTY_MAP = {
-  [TIME_FORMAT_CHAR.HOUR_24]: 'hours',
-  [TIME_FORMAT_CHAR.HOUR_12]: 'hours',
-  [TIME_FORMAT_CHAR.MINUTE]: 'minutes',
-  [TIME_FORMAT_CHAR.SECOND]: 'seconds',
-  [TIME_FORMAT_CHAR.MILLISECOND]: 'milliseconds',
-  [TIME_FORMAT_CHAR.PERIOD]: 'period',
-};
-
-export { SixTimePropertyName as S, TIME_FORMAT_CHAR as T, isNumber as a, isDate as b, isString as c, SixTimePeriod as d, TIME_FORMAT_CHAR_TO_SIX_TIME_PROPERTY_MAP as e, isNil as i };
-
-//# sourceMappingURL=six-timepicker.types-e161a447.js.map

package/dist/esm/six-timepicker.types-e161a447.js.map

@@ -1 +0,0 @@
-{"file":"six-timepicker.types-e161a447.js","mappings":"MAAa,QAAQ,GAAG,CAAC,KAAU,KAAsB,OAAO,KAAK,KAAK,SAAS;AAEnF;MACa,KAAK,GAAG,CAAC,KAAK,KAAK,KAAK,IAAI,KAAK;MAEjC,MAAM,GAAG,CAAC,KAAK,KAAoB,KAAK,YAAY,KAAK;MAEzD,QAAQ,GAAG,CAAC,KAAK,KAAsB,KAAK,KAAK;;ACP9D;;;IAGY;AAAZ,WAAY,aAAa;EACvB,0BAAS,CAAA;EACT,0BAAS,CAAA;AACX,CAAC,EAHW,aAAa,KAAb,aAAa,QAGxB;IAEW;AAAZ,WAAY,mBAAmB;EAC7B,sCAAe,CAAA;EACf,0CAAmB,CAAA;EACnB,0CAAmB,CAAA;EACnB,oDAA6B,CAAA;EAC7B,kDAA2B,CAAA;EAC3B,wCAAiB,CAAA;AACnB,CAAC,EAPW,mBAAmB,KAAnB,mBAAmB,QAO9B;AAcD;;;IAGY;AAAZ,WAAY,gBAAgB;EAC1B,kCAAc,CAAA;EACd,kCAAc,CAAA;EACd,iCAAa,CAAA;EACb,iCAAa,CAAA;EACb,sCAAkB,CAAA;EAClB,iCAAa,CAAA;AACf,CAAC,EAPW,gBAAgB,KAAhB,gBAAgB,QAO3B;AAED;;;MAGa,yCAAyC,GAAG;EACvD,CAAC,gBAAgB,CAAC,OAAO,GAAG,OAAO;EACnC,CAAC,gBAAgB,CAAC,OAAO,GAAG,OAAO;EACnC,CAAC,gBAAgB,CAAC,MAAM,GAAG,SAAS;EACpC,CAAC,gBAAgB,CAAC,MAAM,GAAG,SAAS;EACpC,CAAC,gBAAgB,CAAC,WAAW,GAAG,cAAc;EAC9C,CAAC,gBAAgB,CAAC,MAAM,GAAG,QAAQ;;;;;","names":[],"sources":["./src/utils/type-check.ts","./src/components/six-timepicker/six-timepicker.types.tsx"],"sourcesContent":["export const isString = (value: any): value is string => typeof value === 'string';\n\n// only use '==' instead of '===' to also catch undefined and void\nexport const isNil = (value) => value == null;\n\nexport const isDate = (value): value is Date => value instanceof Date;\n\nexport const isNumber = (value): value is number => value === 'number';\n","/*\n * Defines the different time periods for the 12-hour-clock\n */\nexport enum SixTimePeriod {\n  AM = 'AM',\n  PM = 'PM',\n}\n\nexport enum SixTimePropertyName {\n  HOURS = 'hours',\n  MINUTES = 'minutes',\n  SECONDS = 'seconds',\n  MILLISECONDS = 'milliseconds',\n  HAS_24_HOURS = 'has24Hours',\n  PERIOD = 'period',\n}\n\n/*\n * Defines a format independent interface for time used internally in the six-timepicker\n */\nexport interface SixTime {\n  [SixTimePropertyName.HOURS]?: number;\n  [SixTimePropertyName.MINUTES]?: number;\n  [SixTimePropertyName.SECONDS]?: number;\n  [SixTimePropertyName.MILLISECONDS]?: number;\n  [SixTimePropertyName.HAS_24_HOURS]?: boolean; // true => 24h, false => 12h\n  [SixTimePropertyName.PERIOD]?: SixTimePeriod; // only needed for 12-hour clock\n}\n\n/*\n * Defines the different time units allowed to use in a timestring\n */\nexport enum TIME_FORMAT_CHAR {\n  HOUR_24 = 'HH',\n  HOUR_12 = 'hh',\n  MINUTE = 'mm',\n  SECOND = 'ss',\n  MILLISECOND = 'ms',\n  PERIOD = 'aa',\n}\n\n/*\n * Defines a mapping from the time format unit characters to the sixTime property name\n */\nexport const TIME_FORMAT_CHAR_TO_SIX_TIME_PROPERTY_MAP = {\n  [TIME_FORMAT_CHAR.HOUR_24]: 'hours',\n  [TIME_FORMAT_CHAR.HOUR_12]: 'hours',\n  [TIME_FORMAT_CHAR.MINUTE]: 'minutes',\n  [TIME_FORMAT_CHAR.SECOND]: 'seconds',\n  [TIME_FORMAT_CHAR.MILLISECOND]: 'milliseconds',\n  [TIME_FORMAT_CHAR.PERIOD]: 'period',\n};\n"],"version":3}

package/dist/esm/slot-6f3984c7.js.map

@@ -1 +0,0 @@
-{"file":"slot-6f3984c7.js","mappings":"AAAA;AAqBA;AACA;AACA;AACA;SACgB,cAAc,CAAC,IAAqB;EAClD,MAAM,KAAK,GAAG,IAAI,GAAG,IAAI,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,GAAG,EAAE,CAAC;EAChE,IAAI,IAAI,GAAG,EAAE,CAAC;EAEd,CAAC,GAAG,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI;IAClB,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,SAAS,EAAE;MACpC,IAAI,IAAI,IAAI,CAAC,WAAW,CAAC;KAC1B;GACF,CAAC,CAAC;EAEH,OAAO,IAAI,CAAC;AACd,CAAC;AAED;AACA;AACA;AACA;SACgB,OAAO,CAAC,EAAe,EAAE,IAAa;;EAEpD,IAAI,IAAI,EAAE;IACR,OAAO,EAAE,CAAC,aAAa,CAAC,UAAU,IAAI,IAAI,CAAC,KAAK,IAAI,CAAC;GACtD;;EAGD,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI;IACzC,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;MACtE,OAAO,IAAI,CAAC;KACb;IAED,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY,EAAE;MACvC,MAAM,EAAE,GAAG,IAAmB,CAAC;MAC/B,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE;QAC5B,OAAO,IAAI,CAAC;OACb;KACF;IAED,OAAO,KAAK,CAAC;GACd,CAAC,CAAC;AACL,CAAC;AAID,MAAM,SAAS,GAAG,CAAmB,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAe,sCAAW,GAAG,KAAE,CAAC,CAAC,GAAG,CAAC,IAAG,CAAC;MAE3E,iBAAiB,GAC5B,CAAmB,KAAQ,KAC3B,CAAwB,IAAO,KAC7B,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC;GACjB,GAAG,CAAC,CAAC,IAAI,KAAK,CAAC,IAAI,EAAE,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC;GAC1C,MAAM,CAAC,SAAS,EAAE,EAAuB,EAAE;MAErC,eAAe,GAAG,CAAwB,EAAe,eACpE,OAAA,MAAA,EAAE,CAAC,aAAa,CAAC,MAAM,CAAC,0CAAE,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAQ,CAAA;;;;","names":[],"sources":["./src/utils/slot.ts"],"sourcesContent":["//\n// Given a slot, this function iterates over all of its assigned element and text nodes and returns the concatenated\n// HTML as a string. This is useful because we can't use slot.innerHTML as an alternative.\n//\nexport function getInnerHTML(slot: HTMLSlotElement): string {\n  const nodes = slot.assignedNodes({ flatten: true });\n  let html = '';\n\n  [...nodes].map((node) => {\n    if (node.nodeType === Node.ELEMENT_NODE) {\n      html += (node as HTMLElement).outerHTML;\n    }\n\n    if (node.nodeType === Node.TEXT_NODE) {\n      html += node.textContent;\n    }\n  });\n\n  return html;\n}\n\n//\n// Given a slot, this function iterates over all of its assigned text nodes and returns the concatenated text as a\n// string. This is useful because we can't use slot.textContent as an alternative.\n//\nexport function getTextContent(slot: HTMLSlotElement): string {\n  const nodes = slot ? slot.assignedNodes({ flatten: true }) : [];\n  let text = '';\n\n  [...nodes].map((node) => {\n    if (node.nodeType === Node.TEXT_NODE) {\n      text += node.textContent;\n    }\n  });\n\n  return text;\n}\n\n//\n// Determines whether an element has a slot. If name is specified, the function will look for a corresponding named\n// slot, otherwise it will look for a \"default\" slot (e.g. a non-empty text node or an element with no slot attribute).\n//\nexport function hasSlot(el: HTMLElement, name?: string): boolean {\n  // Look for a named slot\n  if (name) {\n    return el.querySelector(`[slot=\"${name}\"]`) !== null;\n  }\n\n  // Look for a default slot\n  return Array.from(el.childNodes).some((node) => {\n    if (node.nodeType === node.TEXT_NODE && node.textContent.trim() !== '') {\n      return true;\n    }\n\n    if (node.nodeType === node.ELEMENT_NODE) {\n      const el = node as HTMLElement;\n      if (!el.hasAttribute('slot')) {\n        return true;\n      }\n    }\n\n    return false;\n  });\n}\n\ntype AvailableSlots<T> = { readonly [K in keyof T]: boolean };\n\nconst fromPairs = <T extends string>(acc, [k, v]: [T, boolean]) => ({ ...acc, [k]: v });\n\nexport const getAvailableSlots =\n  <T extends object>(slots: T) =>\n  <E extends HTMLElement>(host: E): AvailableSlots<T> =>\n    Object.values(slots)\n      .map((name) => [name, hasSlot(host, name)])\n      .reduce(fromPairs, {} as AvailableSlots<T>);\n\nexport const getSlotChildren = <T extends HTMLElement>(el: HTMLElement) =>\n  el.querySelector('slot')?.assignedElements({ flatten: true }) as T[];\n"],"version":3}

package/dist/types/components/six-form/six-form.d.ts

@@ -1,69 +0,0 @@
-import { EventEmitter } from '../../stencil-public-runtime';
-import { EventListeners } from '../../utils/event-listeners';
-import { EmptyPayload } from '../../utils/types';
-export interface SixFormSubmitPayload {
-  formData: FormData;
-  formControls: HTMLFormElement[];
-}
-export interface SixFormChangePayload {
-  formControl: HTMLFormElement;
-  valid: boolean;
-}
-interface FormControl {
-  tag: string;
-  serialize(el: HTMLFormElement | HTMLElement, formData: FormData): void;
-  click?(event: MouseEvent): any;
-  keyDown?(event: KeyboardEvent): any;
-  changeEventName?: string;
-}
-/**
- * @since 1.0
- * @status stable
- *
- * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
- *
- * @slot - The form's content.
- *
- * @part base - The component's base wrapper.
- */
-export declare class SixForm {
-  form: HTMLElement;
-  formControls: FormControl[];
-  readonly eventListeners: EventListeners;
-  /** Prevent the form from validating inputs before submitting. */
-  novalidate: boolean;
-  /**
-   * Emitted when the form is submitted. This event will not be emitted if any form control inside of it is in an
-   * invalid state, unless the form has the `novalidate` attribute. Note that there is never a need to prevent this
-   * event, since it doen't send a GET or POST request like native forms. To "prevent" submission, use a conditional
-   * around the XHR request you use to submit the form's data with.
-   */
-  sixSubmit: EventEmitter<SixFormSubmitPayload>;
-  /** Emitted when the control's value changes. */
-  sixChange: EventEmitter<SixFormChangePayload>;
-  /** Emitted when the forms values are reset. */
-  sixReset: EventEmitter<EmptyPayload>;
-  connectedCallback(): void;
-  disconnectedCallback(): void;
-  componentDidLoad(): void;
-  private appendChangeListener;
-  /** Serializes all form controls elements and returns a `FormData` object. */
-  getFormData(): Promise<FormData>;
-  /** Gets all form control elements (native and custom). */
-  getFormControls(): Promise<HTMLFormElement[]>;
-  /**
-   * Submits the form. If all controls are valid, the `six-form-submit` event will be emitted and the promise will resolve
-   * with `true`. If any form control is invalid, the promise will resolve with `false` and no event will be emitted.
-   */
-  submit(): Promise<boolean>;
-  /** Checks for validity. */
-  checkValidity(): Promise<boolean>;
-  /** Resets the form and resets the value of all descendants*/
-  reset(): Promise<void>;
-  handleClick(event: MouseEvent): void;
-  handleKeyDown(event: KeyboardEvent): void;
-  handleChange(el: HTMLFormElement): void;
-  serializeElement(el: HTMLFormElement, formData: FormData): void;
-  render(): any;
-}
-export {};

package/dist/types/components/six-timepicker/six-time-format.d.ts

@@ -1,13 +0,0 @@
-export declare enum SixTimeFormat {
-  HHmmss = "HH:mm:ss",
-  hhmmssaa = "hh:mm:ss:aa",
-  HHmmssms = "HH:mm:ss:ms",
-  hhmmssmsaa = "hh:mm:ss:ms:aa",
-  HHmm = "HH:mm",
-  hhmmaa = "hh:mm:aa",
-  HH = "HH",
-  hhaa = "hh:aa",
-  mm = "mm",
-  ss = "ss",
-  ms = "ms"
-}

package/dist/types/components/six-timepicker/six-timepicker.types.d.ts

@@ -1,36 +0,0 @@
-export declare enum SixTimePeriod {
-  AM = "AM",
-  PM = "PM"
-}
-export declare enum SixTimePropertyName {
-  HOURS = "hours",
-  MINUTES = "minutes",
-  SECONDS = "seconds",
-  MILLISECONDS = "milliseconds",
-  HAS_24_HOURS = "has24Hours",
-  PERIOD = "period"
-}
-export interface SixTime {
-  [SixTimePropertyName.HOURS]?: number;
-  [SixTimePropertyName.MINUTES]?: number;
-  [SixTimePropertyName.SECONDS]?: number;
-  [SixTimePropertyName.MILLISECONDS]?: number;
-  [SixTimePropertyName.HAS_24_HOURS]?: boolean;
-  [SixTimePropertyName.PERIOD]?: SixTimePeriod;
-}
-export declare enum TIME_FORMAT_CHAR {
-  HOUR_24 = "HH",
-  HOUR_12 = "hh",
-  MINUTE = "mm",
-  SECOND = "ss",
-  MILLISECOND = "ms",
-  PERIOD = "aa"
-}
-export declare const TIME_FORMAT_CHAR_TO_SIX_TIME_PROPERTY_MAP: {
-  HH: string;
-  hh: string;
-  mm: string;
-  ss: string;
-  ms: string;
-  aa: string;
-};

package/dist/types/utils/as-array.d.ts

@@ -1 +0,0 @@
-export declare const asArray: (value?: unknown) => any[];

package/dist/types/utils/matchers.d.ts

@@ -1,2 +0,0 @@
-export declare const equals: (expected: unknown) => (value: unknown) => boolean;
-export declare const notEquals: (expected: unknown) => (value: unknown) => boolean;

package/dist/types/utils/popper.d.ts

@@ -1,33 +0,0 @@
-declare const top: 'top';
-declare const bottom: 'bottom';
-declare const right: 'right';
-declare const left: 'left';
-declare const auto: 'auto';
-declare type BasePlacement = typeof top | typeof bottom | typeof right | typeof left;
-declare type VariationPlacement =
-  | 'top-start'
-  | 'top-end'
-  | 'bottom-start'
-  | 'bottom-end'
-  | 'right-start'
-  | 'right-end'
-  | 'left-start'
-  | 'left-end';
-declare type AutoPlacement = 'auto' | 'auto-start' | 'auto-end';
-declare type Placement = AutoPlacement | BasePlacement | VariationPlacement;
-declare type OptionsGeneric<TModifier> = {
-  placement: Placement;
-  modifiers: Array<TModifier>;
-  strategy: any;
-  onFirstUpdate?: (arg0: Partial<any>) => void;
-};
-
-declare type SetAction<S> = S | ((prev: S) => S);
-
-export interface PopperInstance {
-  state: any;
-  destroy: () => void;
-  forceUpdate: () => void;
-  update: () => Promise<Partial<any>>;
-  setOptions: (setOptionsAction: SetAction<Partial<OptionsGeneric<any>>>) => Promise<Partial<any>>;
-}

package/dist/types/utils/testing.d.ts

@@ -1,2 +0,0 @@
-import { E2EPage } from '@stencil/core/testing';
-export declare const selectByTestId: (page: E2EPage, testId: string) => Promise<import("puppeteer").ElementHandle<any>>;

package/dist/ui-library/p-054e12cc.entry.js

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

package/dist/ui-library/p-054e12cc.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["sixDialogCss","hasPreventScroll","isPreventScrollSupported","id","SixDialog","this","componentId","willShow","willHide","handleOpenChange","open","show","hide","connectedCallback","handleCloseClick","bind","handleTransitionEnd","handleKeyDown","handleOverlayClick","handleSlotChange","modal","Modal","host","onFocusOut","panel","focus","componentWillLoad","disconnectedCallback","unlockBodyScrolling","async","sixShow","emit","defaultPrevented","isVisible","activate","lockBodyScrolling","requestAnimationFrame","sixInitialFocus","preventScroll","dialog","addEventListener","once","sixHide","deactivate","event","key","sixOverlayDismiss","hasFooter","hasSlot","target","propertyName","classList","contains","sixAfterShow","sixAfterHide","render","h","ref","el","part","class","onKeyDown","onTransitionEnd","onClick","role","noHeader","label","tabIndex","name","String","fromCharCode","exportparts","onSlotchange"],"sources":["./src/components/six-dialog/six-dialog.scss?tag=six-dialog&encapsulation=shadow","./src/components/six-dialog/six-dialog.tsx"],"sourcesContent":["@import 'src/global/component';\n@import 'src/global/mixins/hidden';\n\n/**\n * @prop --width: The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.\n */\n:host {\n  --width: 31rem;\n\n  display: contents;\n}\n\n.dialog {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: var(--six-z-index-dialog);\n  color: var(--six-color-web-rock-900);\n\n  &:not(.dialog--visible) {\n    @include hidden;\n  }\n}\n\n.dialog__panel {\n  display: flex;\n  flex-direction: column;\n  z-index: 2;\n  width: var(--width);\n  max-width: calc(100% - var(--six-spacing-xx-large));\n  max-height: calc(100% - var(--six-spacing-xx-large));\n  background-color: var(--six-panel-background-color);\n  border-radius: var(--six-border-radius-medium);\n  box-shadow: var(--six-shadow-x-large);\n  opacity: 0;\n  transform: scale(0.8);\n  transition: var(--six-transition-medium) opacity, var(--six-transition-medium) transform;\n\n  &:focus {\n    outline: none;\n  }\n}\n\n// Ensure there's enough vertical padding for phones that don't update vh when chrome appears (e.g. iPhone)\n@media screen and (max-width: 420px) {\n  .dialog__panel {\n    max-height: 80vh;\n  }\n}\n\n.dialog--open .dialog__panel {\n  display: flex;\n  opacity: 1;\n  transform: none;\n}\n\n.dialog__header {\n  flex: 0 0 auto;\n  display: flex;\n}\n\n.dialog__title {\n  flex: 1 1 auto;\n  font-size: var(--six-font-size-x-large);\n  font-weight: var(--six-font-weight-bold);\n  line-height: var(--six-line-height-dense);\n  padding: var(--six-spacing-large) var(--six-spacing-large) var(--six-spacing-small);\n}\n\n.dialog__close {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: var(--six-font-size-x-large);\n  padding: 0 var(--six-spacing-x-small);\n}\n\n.dialog__body {\n  flex: 1 1 auto;\n  padding: var(--six-spacing-small) var(--six-spacing-large) var(--six-spacing-large);\n  overflow: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n.dialog__footer {\n  flex: 0 0 auto;\n  text-align: right;\n  padding: var(--six-spacing-large);\n\n  ::slotted(six-button:not(:first-of-type)) {\n    margin-left: var(--six-spacing-xx-small);\n  }\n}\n\n.dialog:not(.dialog--has-footer) .dialog__footer {\n  display: none;\n}\n\n.dialog__overlay {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: var(--six-overlay-background-color);\n  opacity: 0;\n  transition: var(--six-transition-medium) opacity;\n}\n\n.dialog--open .dialog__overlay {\n  opacity: 0.8;\n}\n","import { Component, Element, Event, EventEmitter, Method, Prop, State, Watch, h } from '@stencil/core';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport { hasSlot } from '../../utils/slot';\nimport { isPreventScrollSupported } from '../../utils/support';\nimport Modal from '../../utils/modal';\nimport { EmptyPayload } from '../../utils/types';\n\nconst hasPreventScroll = isPreventScrollSupported();\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The dialog's content.\n * @slot label - The dialog's label. Alternatively, you can use the label prop.\n * @slot footer - The dialog's footer, usually one or more buttons representing various options.\n *\n * @part base - The component's base wrapper.\n * @part overlay - The overlay.\n * @part panel - The dialog panel (where the dialog and its content is rendered).\n * @part header - The dialog header.\n * @part title - The dialog title.\n * @part close-button - The close button.\n * @part body - The dialog body.\n * @part footer - The dialog footer.\n *\n */\n@Component({\n  tag: 'six-dialog',\n  styleUrl: 'six-dialog.scss',\n  shadow: true,\n})\nexport class SixDialog {\n  componentId = `dialog-${++id}`;\n  dialog: HTMLElement;\n  modal: Modal;\n  panel: HTMLElement;\n  willShow = false;\n  willHide = false;\n\n  @Element() host: HTMLSixDialogElement;\n\n  @State() hasFooter = false;\n  @State() isVisible = false;\n\n  /** Indicates whether or not the dialog is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /**\n   * The dialog's label as displayed in the header. You should always include a relevant label even when using\n   * `no-header`, as it is required for proper accessibility.\n   */\n  @Prop() label = '';\n\n  /**\n   * Set to true to disable the header. This will also remove the default close button, so please ensure you provide an\n   * easy, accessible way for users to dismiss the dialog.\n   */\n  @Prop() noHeader = false;\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  /** Emitted when the dialog opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event({ eventName: 'six-dialog-show' }) sixShow: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the dialog opens and all transitions are complete. */\n  @Event({ eventName: 'six-dialog-after-show' }) sixAfterShow: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the dialog closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event({ eventName: 'six-dialog-hide' }) sixHide: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the dialog closes and all transitions are complete. */\n  @Event({ eventName: 'six-dialog-after-hide' }) sixAfterHide: EventEmitter<EmptyPayload>;\n\n  /**\n   * Emitted when the dialog opens and the panel gains focus. Calling `event.preventDefault()` will prevent focus and\n   * allow you to set it on a different element in the dialog, such as an input or button.\n   */\n  @Event({ eventName: 'six-dialog-initial-focus' }) sixInitialFocus: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the dialog from closing. */\n  @Event({ eventName: 'six-dialog-overlay-dismiss' }) sixOverlayDismiss: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    this.handleCloseClick = this.handleCloseClick.bind(this);\n    this.handleTransitionEnd = this.handleTransitionEnd.bind(this);\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n    this.handleOverlayClick = this.handleOverlayClick.bind(this);\n    this.handleSlotChange = this.handleSlotChange.bind(this);\n\n    this.modal = new Modal(this.host, {\n      onFocusOut: () => this.panel.focus(),\n    });\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n\n    // Show on init if open\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  disconnectedCallback() {\n    unlockBodyScrolling(this.host);\n  }\n\n  /** Shows the dialog */\n  @Method()\n  async show() {\n    if (this.willShow) {\n      return;\n    }\n\n    const sixShow = this.sixShow.emit();\n    if (sixShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.willShow = true;\n    this.isVisible = true;\n    this.open = true;\n    this.modal.activate();\n\n    lockBodyScrolling(this.host);\n\n    if (this.open) {\n      if (hasPreventScroll) {\n        // Wait for the next frame before setting initial focus so the dialog is technically visible\n        requestAnimationFrame(() => {\n          const sixInitialFocus = this.sixInitialFocus.emit();\n          if (!sixInitialFocus.defaultPrevented) {\n            this.panel.focus({ preventScroll: true });\n          }\n        });\n      } else {\n        // Once Safari supports { preventScroll: true } we can remove this nasty little hack, but until then we need to\n        // wait for the transition to complete before setting focus, otherwise the panel may render in a buggy way its\n        // out of view initially.\n        //\n        // Fiddle: https://jsfiddle.net/g6buoafq/1/\n        // Safari: https://bugs.webkit.org/show_bug.cgi?id=178583\n        //\n        this.dialog.addEventListener(\n          'transitionend',\n          () => {\n            const sixInitialFocus = this.sixInitialFocus.emit();\n            if (!sixInitialFocus.defaultPrevented) {\n              this.panel.focus();\n            }\n          },\n          { once: true }\n        );\n      }\n    }\n  }\n\n  /** Hides the dialog */\n  @Method()\n  async hide() {\n    if (this.willHide) {\n      return;\n    }\n\n    const sixHide = this.sixHide.emit();\n    if (sixHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.willHide = true;\n    this.open = false;\n    this.modal.deactivate();\n\n    unlockBodyScrolling(this.host);\n  }\n\n  handleCloseClick() {\n    this.hide();\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Escape') {\n      this.hide();\n    }\n  }\n\n  handleOverlayClick() {\n    const sixOverlayDismiss = this.sixOverlayDismiss.emit();\n\n    if (!sixOverlayDismiss.defaultPrevented) {\n      this.hide();\n    }\n  }\n\n  handleSlotChange() {\n    this.hasFooter = hasSlot(this.host, 'footer');\n  }\n\n  handleTransitionEnd(event: TransitionEvent) {\n    const target = event.target as HTMLElement;\n\n    // Ensure we only emit one event when the target element is no longer visible\n    if (event.propertyName === 'opacity' && target.classList.contains('dialog__panel')) {\n      this.isVisible = this.open;\n      this.willShow = false;\n      this.willHide = false;\n      this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n    }\n  }\n\n  render() {\n    return (\n      <div\n        ref={(el) => (this.dialog = el)}\n        part=\"base\"\n        class={{\n          dialog: true,\n          'dialog--open': this.open,\n          'dialog--visible': this.isVisible,\n          'dialog--has-footer': this.hasFooter,\n        }}\n        onKeyDown={this.handleKeyDown}\n        onTransitionEnd={this.handleTransitionEnd}\n      >\n        <div part=\"overlay\" class=\"dialog__overlay\" onClick={this.handleOverlayClick} />\n\n        <div\n          ref={(el) => (this.panel = el)}\n          part=\"panel\"\n          class=\"dialog__panel\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-hidden={this.open ? 'false' : 'true'}\n          aria-label={this.noHeader ? this.label : null}\n          aria-labelledby={!this.noHeader ? `${this.componentId}-title` : null}\n          tabIndex={0}\n        >\n          {!this.noHeader && (\n            <header part=\"header\" class=\"dialog__header\">\n              <span part=\"title\" class=\"dialog__title\" id={`${this.componentId}-title`}>\n                <slot name=\"label\">\n                  {/* If there's no label, use an invisible character to prevent the heading from collapsing */}\n                  {this.label || String.fromCharCode(65279)}\n                </slot>\n              </span>\n              <six-icon-button\n                exportparts=\"base:close-button\"\n                class=\"dialog__close\"\n                name=\"close\"\n                onClick={this.handleCloseClick}\n              />\n            </header>\n          )}\n\n          <div part=\"body\" class=\"dialog__body\">\n            <slot />\n          </div>\n\n          <footer part=\"footer\" class=\"dialog__footer\">\n            <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n          </footer>\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/ui-library/p-0786fa7c.js

@@ -1,2 +0,0 @@
-const t=35;const e=300;const n=(t,n=e)=>{let s;return(...e)=>{clearTimeout(s);s=setTimeout((()=>t.apply(undefined,e)),n)}};const s=(t,e)=>{const s=t._original||t;const o=n(s.emit.bind(s),e);return{_original:t,emit:o}};export{e as D,n as a,t as b,s as d};
-//# sourceMappingURL=p-0786fa7c.js.map

package/dist/ui-library/p-0786fa7c.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["DEFAULT_DEBOUNCE_INSANELY_FAST","DEFAULT_DEBOUNCE_FAST","debounce","callback","timeout","timer","args","clearTimeout","setTimeout","apply","this","debounceEvent","event","original","_original","emit","bind"],"sources":["./src/utils/execution-control.ts"],"sourcesContent":["import { EventEmitter } from '@stencil/core';\n\nexport const DEFAULT_DEBOUNCE_INSANELY_FAST = 35;\nexport const DEFAULT_DEBOUNCE_VERY_FAST = 100;\nexport const DEFAULT_DEBOUNCE_FAST = 300;\nexport const DEFAULT_DEBOUNCE_SLOW = 600;\n\n/**\n * Debounce function to implement a timeframe to wait for no new changes before executing a callback\n\n *  example usages:\n *    debounce(() => saveInput());\n *    debounce(() => saveInput(), 750);\n *    this.searchInput.addEventListener('six-input-input', debounce((event) => this.searchInputChange(event)));\n *\n *  regarding default timeout check https://lawsofux.com/doherty-threshold/\n *\n * @param callback\n * @param timeout\n */\nexport const debounce = (callback: Function, timeout = DEFAULT_DEBOUNCE_FAST) => {\n  let timer: NodeJS.Timeout;\n  return <T>(...args: T[]) => {\n    clearTimeout(timer);\n    timer = setTimeout(() => callback.apply(this, args), timeout);\n  };\n};\n\n/**\n * Debounce an event\n *\n * @param event\n * @param timeout\n */\nexport const debounceEvent = (event: EventEmitter, timeout: number): EventEmitter => {\n  const original = (event as any)._original || event;\n  const emit = debounce(original.emit.bind(original), timeout) as (any) => CustomEvent;\n  return {\n    _original: event,\n    emit: emit,\n  } as EventEmitter;\n};\n"],"mappings":"MAEaA,EAAiC,G,MAEjCC,EAAwB,I,MAgBxBC,EAAW,CAACC,EAAoBC,EAAUH,KACrD,IAAII,EACJ,MAAO,IAAOC,KACZC,aAAaF,GACbA,EAAQG,YAAW,IAAML,EAASM,MAAMC,UAAMJ,IAAOF,EAAQ,CAC9D,E,MASUO,EAAgB,CAACC,EAAqBR,KACjD,MAAMS,EAAYD,EAAcE,WAAaF,EAC7C,MAAMG,EAAOb,EAASW,EAASE,KAAKC,KAAKH,GAAWT,GACpD,MAAO,CACLU,UAAWF,EACXG,KAAMA,EACS,S"}

package/dist/ui-library/p-163f2bb0.entry.js

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

package/dist/ui-library/p-163f2bb0.entry.js.map

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

package/dist/ui-library/p-18e5f772.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as o,h as r,g as i}from"./p-ac4f4d45.js";import{s,g as a}from"./p-eb8f05a9.js";import{f as e}from"./p-b1e66136.js";const b=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{--tabs-border-color:var(--six-tab-border-color);display:block}.tab-group{display:flex;border:solid 1px transparent;border-radius:0}.tab-group .tab-group__tabs{display:flex;position:relative}.tab-group .tab-group__active-tab-indicator{position:absolute;transition:var(--six-transition-fast) transform ease, var(--six-transition-fast) width ease}.tab-group:not(.focus-visible) ::slotted(six-tab){--focus-ring:none}.tab-group--has-scroll-controls .tab-group__nav-container{position:relative;padding:0 var(--six-spacing-x-large)}.tab-group__scroll-button{display:flex;align-items:center;justify-content:center;position:absolute;top:0;bottom:0;width:var(--six-spacing-x-large)}.tab-group__scroll-button--left{left:0}.tab-group__scroll-button--right{right:0}.tab-group--top{flex-direction:column}.tab-group--top .tab-group__nav-container{order:1}.tab-group--top .tab-group__nav{display:flex;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.tab-group--top .tab-group__nav::-webkit-scrollbar{width:0;height:0}.tab-group--top .tab-group__tabs{flex:1 1 auto;position:relative;flex-direction:row;border-bottom:solid var(--six-tab-border-width) var(--tabs-border-color)}.tab-group--top .tab-group__active-tab-indicator{bottom:-2px;border-bottom:solid var(--six-tab-border-width-active) var(--six-tab-border-color-active)}.tab-group--top .tab-group__body{order:2}.tab-group--bottom{flex-direction:column}.tab-group--bottom .tab-group__nav-container{order:2}.tab-group--bottom .tab-group__nav{display:flex;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.tab-group--bottom .tab-group__nav::-webkit-scrollbar{width:0;height:0}.tab-group--bottom .tab-group__tabs{flex:1 1 auto;position:relative;flex-direction:row;border-top:solid var(--six-tab-border-width) var(--tabs-border-color)}.tab-group--bottom .tab-group__active-tab-indicator{top:-2px;border-top:solid var(--six-tab-border-width-active) var(--six-tab-border-color-active)}.tab-group--bottom .tab-group__body{order:1}.tab-group--left{flex-direction:row}.tab-group--left .tab-group__nav-container{order:1}.tab-group--left .tab-group__tabs{flex:0 0 auto;flex-direction:column;border-right:solid var(--six-tab-border-width) var(--tabs-border-color)}.tab-group--left .tab-group__active-tab-indicator{right:-2px;border-right:solid var(--six-tab-border-width-active) var(--six-tab-border-color-active)}.tab-group--left .tab-group__body{flex:1 1 auto;order:2}.tab-group--right{flex-direction:row}.tab-group--right .tab-group__nav-container{order:2}.tab-group--right .tab-group__tabs{flex:0 0 auto;flex-direction:column;border-left:solid var(--six-tab-border-width) var(--tabs-border-color)}.tab-group--right .tab-group__active-tab-indicator{left:-2px;border-left:solid var(--six-tab-border-width-active) var(--six-tab-border-color-active)}.tab-group--right .tab-group__body{flex:1 1 auto;order:1}";const l=class{constructor(r){t(this,r);this.sixTabShow=o(this,"six-tab-show",7);this.sixTabHide=o(this,"six-tab-hide",7);this.hasScrollControls=false;this.placement="top";this.noScrollControls=false}handlePlacementChange(){this.syncActiveTabIndicator()}handleNoScrollControlsChange(){this.updateScrollControls()}connectedCallback(){this.handleClick=this.handleClick.bind(this);this.handleKeyDown=this.handleKeyDown.bind(this);this.handleScrollLeft=this.handleScrollLeft.bind(this);this.handleScrollRight=this.handleScrollRight.bind(this);this.syncActiveTabIndicator=this.syncActiveTabIndicator.bind(this)}componentDidLoad(){const t=new IntersectionObserver(((t,o)=>{if(t[0].intersectionRatio>0){this.setAriaLabels();this.setActiveTab(this.getActiveTab()||this.getAllTabs()[0],false);o.unobserve(t[0].target)}}));t.observe(this.host);e.observe(this.tabGroup);this.resizeObserver=new ResizeObserver((()=>this.updateScrollControls()));this.resizeObserver.observe(this.nav);requestAnimationFrame((()=>this.updateScrollControls()));this.mutationObserver=new MutationObserver((t=>{if(t.some((t=>!["aria-labelledby","aria-controls"].includes(t.attributeName)))){setTimeout((()=>this.setAriaLabels()))}}));this.mutationObserver.observe(this.host,{attributes:true,childList:true,subtree:true})}disconnectedCallback(){this.mutationObserver.disconnect();e.unobserve(this.tabGroup);this.resizeObserver.unobserve(this.nav)}async show(t){const o=this.getAllTabs();const r=o.find((o=>o.panel===t));if(r){this.setActiveTab(r)}}getAllTabs(t=false){const o=this.tabs.querySelector("slot");return[...o.assignedElements()].filter((o=>t?o.tagName.toLowerCase()==="six-tab":o.tagName.toLowerCase()==="six-tab"&&!o.disabled))}getAllPanels(){const t=this.body.querySelector("slot");return[...t.assignedElements()].filter((t=>t.tagName.toLowerCase()==="six-tab-panel"))}getActiveTab(){return this.getAllTabs().find((t=>t.active))}handleClick(t){const o=t.target;const r=o.closest("six-tab");const i=r===null||r===void 0?void 0:r.closest("six-tab-group");if(i!==this.host){return false}if(r){this.setActiveTab(r)}}handleKeyDown(t){const o=t.target;const r=o.closest("six-tab");const i=r===null||r===void 0?void 0:r.closest("six-tab-group");if(i!==this.host){return false}if(["Enter"," "].includes(t.key)){if(r){this.setActiveTab(r);t.preventDefault()}}if(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key)){const o=document.activeElement;if(o&&o.tagName.toLowerCase()==="six-tab"){const r=this.getAllTabs();let i=r.indexOf(o);if(t.key==="Home"){i=0}else if(t.key==="End"){i=r.length-1}else if(t.key==="ArrowLeft"){i=Math.max(0,i-1)}else if(t.key==="ArrowRight"){i=Math.min(r.length-1,i+1)}r[i].setFocus({preventScroll:true});if(["top","bottom"].includes(this.placement)){s(r[i],this.nav,"horizontal")}t.preventDefault()}}}handleScrollLeft(){this.nav.scroll({left:this.nav.scrollLeft-this.nav.clientWidth,behavior:"smooth"})}handleScrollRight(){this.nav.scroll({left:this.nav.scrollLeft+this.nav.clientWidth,behavior:"smooth"})}updateScrollControls(){this.hasScrollControls=this.noScrollControls?false:["top","bottom"].includes(this.placement)&&this.nav.scrollWidth>this.nav.clientWidth}setActiveTab(t,o=true){if(t&&t!==this.activeTab&&!t.disabled){const r=this.activeTab;this.activeTab=t;this.getAllTabs().map((t=>t.active=t===this.activeTab));this.getAllPanels().map((t=>t.active=t.name===this.activeTab.panel));this.syncActiveTabIndicator();if(["top","bottom"].includes(this.placement)){s(this.activeTab,this.nav,"horizontal")}if(o){if(r){this.sixTabHide.emit({name:r.panel})}this.sixTabShow.emit({name:this.activeTab.panel})}}}setAriaLabels(){const t=this.getAllTabs();const o=this.getAllPanels();t.map((t=>{const r=o.find((o=>o.name===t.panel));if(r){t.setAttribute("aria-controls",r.getAttribute("id"));r.setAttribute("aria-labelledby",t.getAttribute("id"))}}))}syncActiveTabIndicator(){const t=this.getActiveTab();if(t){this.activeTabIndicator.style.display="block"}else{this.activeTabIndicator.style.display="none";return}const o=t.clientWidth;const r=t.clientHeight;const i=a(t,this.nav);const s=i.top+this.nav.scrollTop;const e=i.left+this.nav.scrollLeft;switch(this.placement){case"top":case"bottom":this.activeTabIndicator.style.width=`${o}px`;this.activeTabIndicator.style.height=null;this.activeTabIndicator.style.transform=`translateX(${e}px)`;break;case"left":case"right":this.activeTabIndicator.style.width=null;this.activeTabIndicator.style.height=`${r}px`;this.activeTabIndicator.style.transform=`translateY(${s}px)`;break}}render(){return r("div",{part:"base",ref:t=>this.tabGroup=t,class:{"tab-group":true,"tab-group--top":this.placement==="top","tab-group--bottom":this.placement==="bottom","tab-group--left":this.placement==="left","tab-group--right":this.placement==="right","tab-group--has-scroll-controls":this.hasScrollControls},onClick:this.handleClick,onKeyDown:this.handleKeyDown},r("div",{class:"tab-group__nav-container"},this.hasScrollControls&&r("six-icon-button",{class:"tab-group__scroll-button tab-group__scroll-button--left",exportparts:"base:scroll-button",name:"chevron_left",onClick:this.handleScrollLeft}),r("div",{ref:t=>this.nav=t,key:"nav",part:"nav",class:"tab-group__nav"},r("div",{ref:t=>this.tabs=t,part:"tabs",class:"tab-group__tabs",role:"tablist"},r("div",{ref:t=>this.activeTabIndicator=t,part:"active-tab-indicator",class:"tab-group__active-tab-indicator"}),r("slot",{name:"nav",onSlotchange:this.syncActiveTabIndicator}))),this.hasScrollControls&&r("six-icon-button",{class:"tab-group__scroll-button tab-group__scroll-button--right",exportparts:"base:scroll-button",name:"chevron_right",onClick:this.handleScrollRight})),r("div",{ref:t=>this.body=t,part:"body",class:"tab-group__body"},r("slot",{onSlotchange:this.syncActiveTabIndicator})))}get host(){return i(this)}static get watchers(){return{placement:["handlePlacementChange"],noScrollControls:["handleNoScrollControlsChange"]}}};l.style=b;export{l as six_tab_group};
-//# sourceMappingURL=p-18e5f772.entry.js.map