@six-group/ui-library 3.0.0-beta.1.8 → 4.0.0-beta.1

package/dist/components/six-form.js

@@ -0,0 +1,252 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { E as EventListeners } from './event-listeners.js';
+
+const sixFormCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block}";
+
+const SixForm$1 = /*@__PURE__*/ proxyCustomElement(class SixForm extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.sixSubmit = createEvent(this, "six-form-submit", 7);
+    this.sixChange = createEvent(this, "six-form-change", 7);
+    this.sixReset = createEvent(this, "six-form-reset", 7);
+    this.eventListeners = new EventListeners();
+    this.novalidate = false;
+  }
+  connectedCallback() {
+    this.formControls = [
+      {
+        tag: 'six-button',
+        serialize: (el, formData) => el.name && !el.disabled ? formData.append(el.name, el.value) : null,
+        click: (event) => {
+          const target = event.target;
+          if (target.submit) {
+            this.submit();
+          }
+          if (target.reset) {
+            this.reset();
+          }
+        },
+      },
+      {
+        tag: 'six-checkbox',
+        serialize: (el, formData) => el.name && el.checked && !el.disabled ? formData.append(el.name, el.value) : null,
+        changeEventName: 'six-checkbox-change',
+      },
+      {
+        tag: 'six-color-picker',
+        serialize: (el, formData) => el.name && !el.disabled ? formData.append(el.name, el.value) : null,
+      },
+      {
+        tag: 'six-input',
+        serialize: (el, formData) => el.name && !el.disabled ? formData.append(el.name, el.value) : null,
+        keyDown: (event) => {
+          if (event.key === 'Enter' && !event.defaultPrevented) {
+            this.submit();
+          }
+        },
+        changeEventName: 'six-input-change',
+      },
+      {
+        tag: 'six-datepicker',
+        serialize: (el, formData) => { var _a; return el.name && !el.disabled ? formData.append(el.name, (_a = el.value) === null || _a === void 0 ? void 0 : _a.toISOString()) : null; },
+        keyDown: (event) => {
+          if (event.key === 'Enter' && !event.defaultPrevented) {
+            this.submit();
+          }
+        },
+        changeEventName: 'six-datepicker-select',
+      },
+      {
+        tag: 'six-radio',
+        serialize: (el, formData) => el.name && el.checked && !el.disabled ? formData.append(el.name, el.value) : null,
+        changeEventName: 'six-radio-change',
+      },
+      {
+        tag: 'six-range',
+        serialize: (el, formData) => {
+          if (el.name && !el.disabled) {
+            formData.append(el.name, el.value + '');
+          }
+        },
+        changeEventName: 'six-range-change',
+      },
+      {
+        tag: 'six-select',
+        serialize: (el, formData) => {
+          if (el.name && !el.disabled) {
+            if (el.multiple) {
+              const selectedOptions = [...el.value];
+              if (selectedOptions.length) {
+                selectedOptions.map((value) => formData.append(el.name, value));
+              }
+              else {
+                formData.append(el.name, '');
+              }
+            }
+            else {
+              formData.append(el.name, el.value + '');
+            }
+          }
+        },
+        changeEventName: 'six-select-change',
+      },
+      {
+        tag: 'six-switch',
+        serialize: (el, formData) => el.name && el.checked && !el.disabled ? formData.append(el.name, el.value) : null,
+        changeEventName: 'six-switch-change',
+      },
+      {
+        tag: 'six-textarea',
+        serialize: (el, formData) => el.name && !el.disabled ? formData.append(el.name, el.value) : null,
+        changeEventName: 'six-textarea-change',
+      },
+      {
+        tag: 'six-timepicker',
+        serialize: (el, formData) => el.name && !el.disabled ? formData.append(el.name, el.value) : null,
+        keyDown: (event) => {
+          if (event.key === 'Enter' && !event.defaultPrevented) {
+            this.submit();
+          }
+        },
+        changeEventName: 'six-timepicker-change',
+      },
+    ];
+    this.handleClick = this.handleClick.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+  }
+  disconnectedCallback() {
+    this.eventListeners.removeAll();
+  }
+  componentDidLoad() {
+    this.getFormControls().then((controls) => controls.forEach((control) => this.appendChangeListener(control)));
+  }
+  appendChangeListener(el) {
+    const tag = el.tagName.toLowerCase();
+    for (const formControl of this.formControls) {
+      if (formControl.tag === tag && formControl.changeEventName) {
+        this.eventListeners.add(el, formControl.changeEventName, () => this.handleChange(el));
+      }
+    }
+  }
+  /** Serializes all form controls elements and returns a `FormData` object. */
+  async getFormData() {
+    const formData = new FormData();
+    const formControls = await this.getFormControls();
+    formControls.map((el) => this.serializeElement(el, formData));
+    return formData;
+  }
+  /** Gets all form control elements (native and custom). */
+  async getFormControls() {
+    const slot = this.form.querySelector('slot');
+    const tags = this.formControls.map((control) => control.tag);
+    return slot
+      .assignedElements({ flatten: true })
+      .reduce((all, el) => all.concat(el, [...el.querySelectorAll('*')]), [])
+      .filter((el) => tags.includes(el.tagName.toLowerCase()));
+  }
+  /**
+   * 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.
+   */
+  async submit() {
+    const formData = await this.getFormData();
+    const formControls = await this.getFormControls();
+    const formControlsThatReport = formControls.filter((el) => typeof el.reportValidity === 'function');
+    if (!this.novalidate) {
+      let isValid = true;
+      for (const el of formControlsThatReport) {
+        if (!(await el.reportValidity())) {
+          isValid = false;
+        }
+      }
+      if (!isValid) {
+        return false;
+      }
+    }
+    this.sixSubmit.emit({ formData, formControls });
+    return true;
+  }
+  /** Checks for validity. */
+  async checkValidity() {
+    const formControls = await this.getFormControls();
+    const validationTasks = formControls
+      .filter((el) => typeof el.checkValidity === 'function')
+      .map((el) => el.checkValidity());
+    const invalidControls = await Promise.all(validationTasks).then((results) => results.filter((valid) => valid === false));
+    return invalidControls.length == 0;
+  }
+  /** Resets the form and resets the value of all descendants*/
+  async reset() {
+    const formControls = await this.getFormControls();
+    formControls
+      .filter((control) => (control === null || control === void 0 ? void 0 : control.reset) && typeof (control === null || control === void 0 ? void 0 : control.reset) === 'function')
+      .forEach((formControl) => formControl.reset());
+    this.sixReset.emit();
+  }
+  handleClick(event) {
+    const target = event.target;
+    const tag = target.tagName.toLowerCase();
+    for (const formControl of this.formControls) {
+      if (formControl.tag === tag && formControl.click) {
+        formControl.click(event);
+      }
+    }
+  }
+  handleKeyDown(event) {
+    const target = event.target;
+    const tag = target.tagName.toLowerCase();
+    for (const formControl of this.formControls) {
+      if (formControl.tag === tag && formControl.keyDown) {
+        formControl.keyDown(event);
+      }
+    }
+  }
+  handleChange(el) {
+    this.checkValidity().then((isValid) => this.sixChange.emit({
+      valid: isValid,
+      formControl: el,
+    }));
+  }
+  serializeElement(el, formData) {
+    const tag = el.tagName.toLowerCase();
+    for (const formControl of this.formControls) {
+      if (formControl.tag === tag) {
+        return formControl.serialize(el, formData);
+      }
+    }
+    return null;
+  }
+  render() {
+    return (h("div", { ref: (el) => (this.form = el), part: "base", class: "form", role: "form", onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("slot", null)));
+  }
+  static get style() { return sixFormCss; }
+}, [1, "six-form", {
+    "novalidate": [4],
+    "getFormData": [64],
+    "getFormControls": [64],
+    "submit": [64],
+    "checkValidity": [64],
+    "reset": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["six-form"];
+  components.forEach(tagName => { switch (tagName) {
+    case "six-form":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SixForm$1);
+      }
+      break;
+  } });
+}
+
+const SixForm = SixForm$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SixForm, defineCustomElement };
+
+//# sourceMappingURL=six-form.js.map

package/dist/components/six-form.js.map

@@ -0,0 +1 @@
+{"file":"six-form.js","mappings":"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","names":["SixForm"],"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/components/six-group-label.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SixGroupLabel extends Components.SixGroupLabel, HTMLElement {}
+export const SixGroupLabel: {
+  prototype: SixGroupLabel;
+  new (): SixGroupLabel;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/six-group-label.js

@@ -0,0 +1,78 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { F as FormControl } from './form-control.js';
+import { h as hasSlot } from './slot.js';
+
+const sixGroupLabelCss = ":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}";
+
+let id = 0;
+const SixGroupLabel$1 = /*@__PURE__*/ proxyCustomElement(class SixGroupLabel extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.wrapperLabelId = `label-${++id}`;
+    this.labelId = `label-label-${id}`;
+    this.helpTextId = `label-help-text-${id}`;
+    this.hasHelpTextSlot = false;
+    this.hasLabelSlot = false;
+    this.size = 'medium';
+    this.label = '';
+    this.helpText = '';
+    this.disabled = false;
+    this.required = undefined;
+  }
+  handleLabelChange() {
+    this.handleSlotChange();
+  }
+  connectedCallback() {
+    this.handleSlotChange = this.handleSlotChange.bind(this);
+    this.host.shadowRoot.addEventListener('slotchange', this.handleSlotChange);
+  }
+  componentWillLoad() {
+    this.handleSlotChange();
+  }
+  disconnectedCallback() {
+    this.host.shadowRoot.removeEventListener('slotchange', this.handleSlotChange);
+  }
+  handleSlotChange() {
+    this.hasLabelSlot = hasSlot(this.host, 'label');
+    this.hasHelpTextSlot = hasSlot(this.host, 'help-text');
+  }
+  render() {
+    return (h(FormControl, { inputId: this.wrapperLabelId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, size: this.size, disabled: this.disabled, required: this.required }, h("slot", null)));
+  }
+  get host() { return this; }
+  static get watchers() { return {
+    "helpText": ["handleLabelChange"],
+    "label": ["handleLabelChange"]
+  }; }
+  static get style() { return sixGroupLabelCss; }
+}, [1, "six-group-label", {
+    "size": [513],
+    "label": [1],
+    "helpText": [1, "help-text"],
+    "disabled": [516],
+    "required": [516],
+    "hasHelpTextSlot": [32],
+    "hasLabelSlot": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["six-group-label"];
+  components.forEach(tagName => { switch (tagName) {
+    case "six-group-label":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SixGroupLabel$1);
+      }
+      break;
+  } });
+}
+
+const SixGroupLabel = SixGroupLabel$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SixGroupLabel, defineCustomElement };
+
+//# sourceMappingURL=six-group-label.js.map

package/dist/components/six-group-label.js.map

@@ -0,0 +1 @@
+{"file":"six-group-label.js","mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,w7EAAw7E;;ACIj9E,IAAI,EAAE,GAAG,CAAC,CAAC;MAoBEA,eAAa;;;;;IACxB,mBAAc,GAAG,SAAS,EAAE,EAAE,EAAE,CAAC;IACjC,YAAO,GAAG,eAAe,EAAE,EAAE,CAAC;IAC9B,eAAU,GAAG,mBAAmB,EAAE,EAAE,CAAC;2BAIV,KAAK;wBACR,KAAK;gBAGiC,QAAQ;iBAGtD,EAAE;oBAGC,EAAE;oBAGe,KAAK;;;EAOzC,iBAAiB;IACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;GACzB;EAED,iBAAiB;IACf,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACzD,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;GAC5E;EAED,iBAAiB;IACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;GACzB;EAED,oBAAoB;IAClB,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;GAC/E;EAED,gBAAgB;IACd,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IAChD,IAAI,CAAC,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;GACxD;EAED,MAAM;IACJ,QACE,EAAC,WAAW,IACV,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAEvB,eAAa,CACD,EACd;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixGroupLabel"],"sources":["./src/components/six-group-label/six-group-label.scss?tag=six-group-label&encapsulation=shadow","./src/components/six-group-label/six-group-label.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n  display: block;\n}\n","import { Component, Element, h, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\n\nlet id = 0;\n\n/**\n * @since 1.1\n * @status stable\n *\n * @slot label - The wrapped component's label. Alternatively, you can use the label prop.\n * @slot help-text - Help text that describes how to use the input.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n *\n * @part base - The component's base wrapper.\n * @part form-control - The form control that wraps the label, textarea, and help text.\n * @part label - The label of wrapped component.\n * @part help-text - The help text of the wrapped component.\n */\n@Component({\n  tag: 'six-group-label',\n  styleUrl: 'six-group-label.scss',\n  shadow: true,\n})\nexport class SixGroupLabel {\n  wrapperLabelId = `label-${++id}`;\n  labelId = `label-label-${id}`;\n  helpTextId = `label-help-text-${id}`;\n\n  @Element() host: HTMLSixGroupLabelElement;\n\n  @State() hasHelpTextSlot = false;\n  @State() hasLabelSlot = false;\n\n  /** The label's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** The wrapper label's label. Alternatively, you can use the label slot. */\n  @Prop() label = '';\n\n  /** The wrapper label's help text. Alternatively, you can use the help-text slot. */\n  @Prop() helpText = '';\n\n  /** Set to true to disable the label. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The label's required attribute. */\n  @Prop({ reflect: true }) required: boolean;\n\n  @Watch('helpText')\n  @Watch('label')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  connectedCallback() {\n    this.handleSlotChange = this.handleSlotChange.bind(this);\n    this.host.shadowRoot.addEventListener('slotchange', this.handleSlotChange);\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  disconnectedCallback() {\n    this.host.shadowRoot.removeEventListener('slotchange', this.handleSlotChange);\n  }\n\n  handleSlotChange() {\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n    this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n  }\n\n  render() {\n    return (\n      <FormControl\n        inputId={this.wrapperLabelId}\n        label={this.label}\n        labelId={this.labelId}\n        hasLabelSlot={this.hasLabelSlot}\n        helpTextId={this.helpTextId}\n        helpText={this.helpText}\n        hasHelpTextSlot={this.hasHelpTextSlot}\n        size={this.size}\n        disabled={this.disabled}\n        required={this.required}\n      >\n        <slot></slot>\n      </FormControl>\n    );\n  }\n}\n"],"version":3}

package/dist/components/six-header.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SixHeader extends Components.SixHeader, HTMLElement {}
+export const SixHeader: {
+  prototype: SixHeader;
+  new (): SixHeader;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/six-header.js

@@ -0,0 +1,219 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { E as EventListeners } from './event-listeners.js';
+import { g as getAvailableSlots } from './slot.js';
+import { d as defineCustomElement$7 } from './six-dropdown2.js';
+import { d as defineCustomElement$6 } from './six-icon2.js';
+import { d as defineCustomElement$5 } from './six-icon-button2.js';
+import { d as defineCustomElement$4 } from './six-input2.js';
+import { d as defineCustomElement$3 } from './six-menu2.js';
+import { d as defineCustomElement$2 } from './six-menu-item2.js';
+
+const sixHeaderCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block;user-select:none;--search-border-width:1px}::slotted(six-search-field){position:absolute;margin-left:var(--search-border-width);width:calc(100% - 2 * var(--search-border-width))}.six-header{display:flex;width:100%;height:3.75rem;background-color:var(--six-header-background-color);align-items:center;flex-wrap:wrap;box-shadow:var(--six-shadow-x-large);border-bottom:var(--six-header-border-with) solid var(--six-header-border-color)}.six-header__logo{width:6rem;margin-top:0.15rem}.six-header__logo--clickable{cursor:pointer}.six-header__placeholder{flex:1}.six-header__menu,.six-header__logo,.six-header__custom,.six-header__search,.six-header__notification,.six-header__app-switcher,.six-header__profile{height:calc(100% - 0.25rem - 1px);padding:0 1.25rem;display:flex;align-items:center;border-bottom:solid 0.25rem transparent}.six-header__menu--open,.six-header__logo--open,.six-header__custom--open,.six-header__search--open,.six-header__notification--open,.six-header__app-switcher--open,.six-header__profile--open{border-bottom:solid 0.25rem var(--six-header-border-color-open)}.six-header__selected-app{cursor:pointer;font-size:0.9rem;font-weight:600;padding-right:0;padding-left:0.3rem}.six-header__selected-app:hover{color:var(--six-header-selected-app-color-hover)}.six-header__search-field{opacity:0;transform:scale(0.9);transition:var(--six-transition-fast) opacity, var(--six-transition-fast) transform;display:none}.six-header__search-field--visible{opacity:1;transform:none;display:block}.six-header__search-field--shift-content.six-header__search-field--visible{height:2.65rem;transition:var(--six-transition-fast) height}.six-header__search-field--shift-content:not(.six-header__search-field--visible){height:0;transition:var(--six-transition-fast) height}";
+
+var Section;
+(function (Section) {
+  Section[Section["None"] = 0] = "None";
+  Section[Section["Search"] = 1] = "Search";
+  Section[Section["Notifications"] = 2] = "Notifications";
+  Section[Section["AppSwitcher"] = 3] = "AppSwitcher";
+  Section[Section["Profile"] = 4] = "Profile";
+})(Section || (Section = {}));
+var Slot;
+(function (Slot) {
+  Slot["Search"] = "search-field";
+  Slot["Notifications"] = "notifications";
+  Slot["AppSwitcher"] = "app-switcher-menu";
+  Slot["Profile"] = "profile-menu";
+  Slot["Logo"] = "logo";
+})(Slot || (Slot = {}));
+const getSlots = getAvailableSlots(Slot);
+const SixHeader$1 = /*@__PURE__*/ proxyCustomElement(class SixHeader extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.sixAppNameClicked = createEvent(this, "six-header-app-name-clicked", 7);
+    this.sixAppSwitcherSelect = createEvent(this, "six-header-app-switcher-select", 7);
+    this.sixProfileSelect = createEvent(this, "six-header-profile-select", 7);
+    this.sixHamburgerClick = createEvent(this, "six-header-hamburger-menu-clicked", 7);
+    this.sixLogoClick = createEvent(this, "six-header-logo-clicked", 7);
+    this.sixSearchFieldToggle = createEvent(this, "six-header-search-field-toggle", 7);
+    this.eventListeners = new EventListeners();
+    this.has = (slot) => this.slots[slot];
+    this.selected = (value) => value === this.selectedSection;
+    this.select = (value) => () => {
+      this.selectedSection = value;
+    };
+    this.toggleSearch = (value) => () => {
+      var _a;
+      if (value === Section.Search) {
+        const visible = this.selectedSection !== value;
+        if (visible) {
+          (_a = this.host.querySelector(`[slot="${Slot.Search}"]`).shadowRoot.querySelector('six-input')) === null || _a === void 0 ? void 0 : _a.setFocus();
+        }
+        this.sixSearchFieldToggle.emit({ visible });
+      }
+      this.selectedSection = this.selectedSection === value ? Section.None : value;
+    };
+    this.setupMenu = (el) => {
+      this.eventListeners.add(el, 'click', () => this.sixHamburgerClick.emit());
+    };
+    this.setupLogo = (el) => {
+      if (!this.clickableLogo) {
+        return;
+      }
+      this.eventListeners.add(el, 'click', () => this.sixLogoClick.emit());
+    };
+    this.setupProfile = (el) => {
+      this.eventListeners.add(el, 'six-dropdown-show', this.select(Section.Profile));
+      this.eventListeners.add(el, 'six-dropdown-hide', this.select(Section.None));
+      this.eventListeners.add(el, 'six-menu-item-selected', (event) => {
+        const { name, item } = event.detail;
+        this.sixProfileSelect.emit({ selectedLabel: item.innerText, name, item });
+      });
+    };
+    this.setupAppSwitcher = (el) => {
+      this.eventListeners.add(el, 'six-dropdown-show', this.select(Section.AppSwitcher));
+      this.eventListeners.add(el, 'six-dropdown-hide', this.select(Section.None));
+      this.eventListeners.add(el, 'six-menu-item-selected', (event) => {
+        const { name, item } = event.detail;
+        this.selectedApp = item.innerText;
+        this.sixAppSwitcherSelect.emit({ selectedLabel: item.innerText, name, item });
+      });
+    };
+    this.appNameClicked = () => this.sixAppNameClicked.emit();
+    this.computeSearchOpenState = () => {
+      this.selectedSection = this.openSearch ? Section.Search : Section.None;
+    };
+    this.shiftContent = false;
+    this.openHamburgerMenu = false;
+    this.openSearch = false;
+    this.clickableLogo = false;
+    this.selectedApp = undefined;
+    this.selectedSection = undefined;
+  }
+  handleOpenSearchChange() {
+    this.computeSearchOpenState();
+  }
+  /** Sets open state for search */
+  async setSearchOpenState(openState) {
+    if (this.selectedSection === Section.Search && !openState) {
+      this.selectedSection = Section.None;
+    }
+    else if (openState && this.selectedSection !== Section.Search) {
+      this.selectedSection = Section.Search;
+    }
+  }
+  /** Get open state for search */
+  async getIsSearchOpen() {
+    return this.selectedSection === Section.Search;
+  }
+  componentWillLoad() {
+    this.slots = getSlots(this.host);
+    if (this.has(Slot.AppSwitcher)) {
+      this.selectedApp = this.getSelectedApp();
+    }
+    if (this.has(Slot.Search)) {
+      this.computeSearchOpenState();
+    }
+  }
+  getSelectedApp() {
+    // there are more concise ways to select the first checked menu item, but this is one that works for jest
+    const element = this.host.querySelector(`[slot="${Slot.AppSwitcher}"]`);
+    const items = Array.from(element.querySelectorAll('six-menu-item'));
+    const firstCheckedMenuItem = items.find((item) => item.hasAttribute('checked'));
+    return firstCheckedMenuItem === null || firstCheckedMenuItem === void 0 ? void 0 : firstCheckedMenuItem.textContent;
+  }
+  disconnectedCallback() {
+    this.eventListeners.removeAll();
+  }
+  render() {
+    const search = this.has(Slot.Search) && (h("section", { class: {
+        'six-header__search': true,
+        'six-header__search--open': this.selected(Section.Search),
+      } }, h("six-icon-button", { name: "search", onClick: this.toggleSearch(Section.Search), "data-testid": "search-trigger" })));
+    const notifications = this.has(Slot.Notifications) && (h("section", { class: "six-header__notification" }, h("slot", { name: Slot.Notifications })));
+    const appSwitcher = this.has(Slot.AppSwitcher) && (h("section", { class: {
+        'six-header__app-switcher': true,
+        'six-header__app-switcher--open': this.selected(Section.AppSwitcher),
+      } }, h("a", { onClick: this.appNameClicked, class: "six-header__selected-app" }, this.selectedApp), h("six-dropdown", { distance: 13, skidding: 20, placement: "bottom-end", ref: this.setupAppSwitcher }, h("six-icon-button", { name: "apps", slot: "trigger" }), h("slot", { name: Slot.AppSwitcher }))));
+    const profile = this.has(Slot.Profile) && (h("section", { class: {
+        'six-header__profile': true,
+        'six-header__profile--open': this.selected(Section.Profile),
+      } }, h("six-dropdown", { distance: 17, skidding: 20, placement: "bottom-end", ref: this.setupProfile }, h("slot", { name: "profile-avatar", slot: "trigger" }), h("slot", { name: "profile-menu" }))));
+    const logo = this.has(Slot.Logo) ? (h("section", null, h("slot", { name: "logo" }))) : (h("section", { class: {
+        'six-header__logo': true,
+        'six-header__logo--clickable': this.clickableLogo,
+      }, ref: this.setupLogo }, h("svg", { height: "20", viewBox: "0 0 90 26", xmlns: "http://www.w3.org/2000/svg" }, h("title", null, "SIX"), h("g", { fill: "#DE3919", "fill-rule": "nonzero" }, h("path", { d: "m22.798 3.869c1.82-2.168 4.549-3.545 7.6-3.545h6.807v4.961h-6.807c-1.526 0-2.89.689-3.8 1.771l-12.19 14.526c-1.82 2.166-4.549 3.545-7.6 3.545h-6.808v-4.961h6.808c1.525 0 2.889-.689 3.799-1.773l12.191-14.525" }), h("path", { d: "m42.16.324h5.21v24.806h-5.21z" }), h("path", { d: "m66.743 3.869l4.195 4.999 4.195-4.999c1.819-2.168 4.549-3.545 7.6-3.545h6.806v4.961h-6.806c-1.526 0-2.89.689-3.8 1.771l-4.758 5.669 4.758 5.669c.91 1.084 2.274 1.773 3.8 1.773h6.806v4.961h-6.806c-3.051 0-5.781-1.379-7.6-3.545l-4.195-4.999-4.195 4.999c-1.82 2.166-4.55 3.545-7.6 3.545h-6.807v-4.961h6.807c1.525 0 2.889-.689 3.799-1.773l4.758-5.669-4.758-5.669c-.91-1.083-2.274-1.771-3.799-1.771h-6.807v-4.961h6.807c3.05 0 5.78 1.378 7.6 3.545" })))));
+    return (h(Host, null, h("header", { class: "six-header" }, h("section", { class: "six-header__menu" }, h("six-icon-button", { name: this.openHamburgerMenu ? 'menu_open' : 'menu', ref: this.setupMenu })), logo, h("section", { class: "six-header__placeholder" }), h("section", { class: "six-header__custom" }, h("slot", null)), search, notifications, appSwitcher, profile), h("div", { class: {
+        'six-header__search-field': true,
+        'six-header__search-field--visible': this.selected(Section.Search),
+        'six-header__search-field--shift-content': this.shiftContent,
+      } }, h("slot", { name: Slot.Search }))));
+  }
+  static get assetsDirs() { return ["assets"]; }
+  get host() { return this; }
+  static get watchers() { return {
+    "openSearch": ["handleOpenSearchChange"]
+  }; }
+  static get style() { return sixHeaderCss; }
+}, [1, "six-header", {
+    "shiftContent": [4, "shift-content"],
+    "openHamburgerMenu": [4, "open-hamburger-menu"],
+    "openSearch": [4, "open-search"],
+    "clickableLogo": [4, "clickable-logo"],
+    "selectedApp": [32],
+    "selectedSection": [32],
+    "setSearchOpenState": [64],
+    "getIsSearchOpen": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["six-header", "six-dropdown", "six-icon", "six-icon-button", "six-input", "six-menu", "six-menu-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "six-header":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SixHeader$1);
+      }
+      break;
+    case "six-dropdown":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "six-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "six-icon-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "six-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "six-menu":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "six-menu-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const SixHeader = SixHeader$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SixHeader, defineCustomElement };
+
+//# sourceMappingURL=six-header.js.map