@six-group/ui-library 0.0.0-insider.0014c08

package/dist/components/six-file-upload.d.ts

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

package/dist/components/six-file-upload.js

@@ -0,0 +1,190 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-D512q9rn.js';
+import { h as hasSlot } from './p-j3oIB5oT.js';
+import { d as defineCustomElement$4 } from './p-BLocui1Z.js';
+import { d as defineCustomElement$3 } from './p-C84iXIFp.js';
+import { d as defineCustomElement$2 } from './p-BB2rei7y.js';
+
+const sixFileUploadCss = ".sc-six-file-upload-h{position:relative;box-sizing:border-box}.sc-six-file-upload-h *.sc-six-file-upload,.sc-six-file-upload-h *.sc-six-file-upload:before,.sc-six-file-upload-h *.sc-six-file-upload:after{box-sizing:border-box}.sr-only.sc-six-file-upload{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.sc-six-file-upload-h{position:static;display:block}.six-file-upload.sc-six-file-upload six-card.sc-six-file-upload{box-shadow:none;padding:0;width:100%}.six-file-upload__label--highlighted.sc-six-file-upload{color:var(--six-color-action-600)}.six-file-upload__container--full.sc-six-file-upload{border:dashed 1px var(--six-color-web-rock-500)}.six-file-upload__drop-zone.sc-six-file-upload{padding:2rem 0;display:flex;justify-content:center;width:100%;transition:background-color 0.3s}.six-file-upload__drop-zone__spinner-container.sc-six-file-upload{display:flex;align-items:center}.six-file-upload__drop-zone__spinner-container.sc-six-file-upload six-spinner.sc-six-file-upload{margin-right:var(--six-spacing-x-small)}.six-file-upload__drop-zone--compact.sc-six-file-upload{padding:0}.six-file-upload__input.sc-six-file-upload{cursor:pointer;position:absolute;top:0;left:0;width:100%;user-select:none;height:100%;opacity:0;outline:none}.six-file-upload--disabled.sc-six-file-upload .six-file-upload__drop-zone.sc-six-file-upload{background-color:var(--six-color-inactive);cursor:not-allowed}.six-file-upload.sc-six-file-upload:not(.six-file-upload--disabled) .six-file-upload__drop-zone.sc-six-file-upload:hover,.six-file-upload__drop-zone--hover.sc-six-file-upload{background-color:var(--six-color-action-light-to-be-defined)}.six-file-upload.sc-six-file-upload:not(.six-file-upload--disabled) .six-file-upload__drop-zone.sc-six-file-upload:hover.six-file-upload__drop-zone--compact,.six-file-upload__drop-zone--hover.six-file-upload__drop-zone--compact.sc-six-file-upload{background-color:inherit}.six-file-upload--disabled.sc-six-file-upload .six-file-upload__input.sc-six-file-upload{cursor:not-allowed}.six-file-upload__error-text.sc-six-file-upload{font-size:var(--six-input-help-text-font-size-medium)}";
+
+const SixFileUpload$1 = /*@__PURE__*/ proxyCustomElement(class SixFileUpload extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.success = createEvent(this, "six-file-upload-success");
+        this.failure = createEvent(this, "six-file-upload-failure");
+        this.isOver = false;
+        this.hasError = false;
+        /** Set to true if file control should be small. */
+        this.compact = false;
+        /** Set when button is disabled. */
+        this.disabled = false;
+        /** More than one file allowed. */
+        this.multiple = false;
+        /** Set to true to draw the control in a loading state. */
+        this.uploading = false;
+        /** The error message shown, if `invalid` is set to true.  */
+        this.errorText = '';
+        /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */
+        this.invalid = false;
+        this.handleSlotChange = () => {
+            let validType = false;
+            if (this.errorText != null &&
+                ((typeof this.errorText == 'string' && this.errorText.trim().length > 0) ||
+                    (typeof this.errorText == 'object' && this.errorText.length > 0))) {
+                validType = true;
+            }
+            this.hasError = validType || hasSlot(this.host, 'error-text');
+        };
+        this.handleFiles = (files) => {
+            if (this.disabled || files.length === 0 || this.uploading) {
+                return;
+            }
+            if (!this.multiple && files.length > 1) {
+                return this.failure.emit({
+                    reason: 'Only one file is allowed.',
+                    code: 'ONLY_ONE_FILE_ALLOWED',
+                });
+            }
+            for (const file of files) {
+                if (file == null) {
+                    return;
+                }
+                let acceptedTypesList = [];
+                if (this.accept != null) {
+                    acceptedTypesList = this.accept.replace(/\s/g, '').split(',');
+                }
+                if (acceptedTypesList.length > 0 && acceptedTypesList.indexOf(file.type) === -1) {
+                    const reason = files.length > 1 ? 'One or more files have invalid MIME type.' : 'File has invalid MIME type.';
+                    const code = files.length > 1 ? 'ONE_OR_MORE_FILES_HAVE_INVALID_MIME_TYPE' : 'INVALID_MIME_TYPE';
+                    return this.failure.emit({ reason, code });
+                }
+                if (this.maxFileSize != null && file.size > this.maxFileSize) {
+                    const reason = files.length > 1 ? 'One or more files are too big' : 'File is too big.';
+                    const code = files.length > 1 ? 'ONE_OR_MULTIPLE_FILES_TOO_BIG' : 'FILE_TOO_BIG';
+                    return this.failure.emit({ reason, code });
+                }
+            }
+            this.success.emit({ files });
+        };
+        this.onChange = () => {
+            var _a;
+            if (((_a = this.fileInput) === null || _a === void 0 ? void 0 : _a.files) != null) {
+                const files = this.fileInput.files;
+                this.handleFiles(files);
+                this.fileInput.value = '';
+            }
+        };
+    }
+    dragenterHandler() {
+        if (!this.disabled) {
+            this.isOver = true;
+        }
+    }
+    dragoverHandler() {
+        if (!this.disabled) {
+            this.isOver = true;
+        }
+    }
+    dragleaveHandler() {
+        if (!this.disabled) {
+            this.isOver = false;
+        }
+    }
+    dropHandler() {
+        if (!this.disabled) {
+            this.isOver = false;
+        }
+    }
+    componentWillLoad() {
+        this.handleSlotChange();
+    }
+    componentDidLoad() {
+        var _a;
+        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {
+            this.host.addEventListener(eventName, this.preventDefaults, false);
+            document.body.addEventListener(eventName, this.preventDefaults, false);
+        });
+        (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.addEventListener('slotchange', this.handleSlotChange);
+    }
+    disconnectedCallback() {
+        var _a;
+        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {
+            this.host.removeEventListener(eventName, this.preventDefaults, false);
+            document.body.removeEventListener(eventName, this.preventDefaults, false);
+        });
+        (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeEventListener('slotchange', this.handleSlotChange);
+    }
+    preventDefaults(e) {
+        e.preventDefault();
+        e.stopPropagation();
+    }
+    renderLabel() {
+        var _a;
+        return ((_a = this.label) !== null && _a !== void 0 ? _a : (this.compact ? ('Upload') : (h("span", null, "Drop files to upload, or ", h("span", { class: "six-file-upload__label--highlighted" }, "browse")))));
+    }
+    render() {
+        const Container = this.compact ? 'six-button' : 'six-card';
+        const errorMessages = (Array.isArray(this.errorText) ? this.errorText : [this.errorText]).filter((text) => text != null && text.trim() !== '');
+        return (h("div", { key: '5e0eadc451195cb2c4d5c4f383e1a27b19a80dc4', class: {
+                'six-file-upload': true,
+                'six-file-upload--disabled': this.disabled || this.uploading,
+            } }, h(Container, { key: '16c443d8a887a3098cc04956bc607577ac3630b0', disabled: this.disabled || this.uploading, "aria-invalid": this.invalid ? 'true' : 'false', class: {
+                'six-file-upload__container--compact': this.compact,
+                'six-file-upload__container--full': !this.compact,
+            } }, this.compact && !this.uploading && h("six-icon", { key: '9fe02f54c63e61928f0c1f5886982f568b926d0d', slot: "prefix" }, "arrow_circle_up"), h("div", { key: '45350fcd292a61ddc6997019448b41d4bc94d5c8', class: {
+                'six-file-upload__drop-zone': true,
+                'six-file-upload__drop-zone--hover': this.isOver,
+                'six-file-upload__drop-zone--compact': this.compact,
+            } }, this.uploading ? (h("span", { class: "six-file-upload__drop-zone__spinner-container" }, h("six-spinner", null), " Uploading...")) : (h("div", null, h("span", null, this.renderLabel()), h("input", { class: "six-file-upload__input", type: "file", name: "resume", disabled: this.disabled, accept: this.accept, multiple: this.multiple, onChange: this.onChange, ref: (el) => (this.fileInput = el) }))))), h("div", { key: 'f5aa7f521d1ef6b2af5c23b697fa1014c87e1827', "aria-hidden": this.invalid ? 'false' : 'true' }, h("slot", { key: 'ab2f2bf8bf27b3c67304b61c491e5ab73e76398f', name: "error-text" }, errorMessages.map((text) => (h("six-error", null, h("div", { class: "six-file-upload__error-text" }, text))))))));
+    }
+    get host() { return this; }
+    static get style() { return sixFileUploadCss; }
+}, [6, "six-file-upload", {
+        "compact": [4],
+        "label": [1],
+        "disabled": [4],
+        "accept": [1],
+        "multiple": [4],
+        "maxFileSize": [2, "max-file-size"],
+        "uploading": [516],
+        "errorText": [1, "error-text"],
+        "invalid": [516],
+        "isOver": [32],
+        "hasError": [32]
+    }, [[1, "dragenter", "dragenterHandler"], [1, "dragover", "dragoverHandler"], [1, "dragleave", "dragleaveHandler"], [1, "drop", "dropHandler"]]]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["six-file-upload", "six-error", "six-icon", "six-spinner"];
+    components.forEach(tagName => { switch (tagName) {
+        case "six-file-upload":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SixFileUpload$1);
+            }
+            break;
+        case "six-error":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "six-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "six-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const SixFileUpload = SixFileUpload$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SixFileUpload, defineCustomElement };
+//# sourceMappingURL=six-file-upload.js.map
+
+//# sourceMappingURL=six-file-upload.js.map

package/dist/components/six-file-upload.js.map

@@ -0,0 +1 @@
+{"file":"six-file-upload.js","mappings":"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","names":["SixFileUpload","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/six-file-upload/six-file-upload.scss?tag=six-file-upload&encapsulation=scoped","src/components/six-file-upload/six-file-upload.tsx"],"sourcesContent":["@import 'src/global/component';\n\n$over-color: var(--six-color-action-light-to-be-defined);\n$disabled-color: var(--six-color-inactive);\n$transition: 0.3s;\n$margin: 1rem;\n\n:host {\n  position: static;\n  display: block;\n}\n\n.six-file-upload {\n  six-card {\n    box-shadow: none;\n    padding: 0;\n    width: 100%;\n  }\n\n  &__label {\n    &--highlighted {\n      color: var(--six-color-action-600);\n    }\n  }\n\n  &__container {\n    &--full {\n      border: dashed 1px var(--six-color-web-rock-500);\n    }\n  }\n\n  &__drop-zone {\n    padding: 2rem 0;\n    display: flex;\n    justify-content: center;\n    width: 100%;\n    transition: background-color $transition;\n\n    &__spinner-container {\n      display: flex;\n      align-items: center;\n\n      six-spinner {\n        margin-right: var(--six-spacing-x-small);\n      }\n    }\n\n    &--compact {\n      padding: 0;\n    }\n  }\n\n  &__input {\n    cursor: pointer;\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    user-select: none;\n    height: 100%;\n    opacity: 0;\n    outline: none;\n  }\n\n  &--disabled &__drop-zone {\n    background-color: $disabled-color;\n    cursor: not-allowed;\n  }\n\n  &:not(.six-file-upload--disabled) &__drop-zone:hover,\n  &__drop-zone--hover {\n    background-color: $over-color;\n\n    &.six-file-upload__drop-zone--compact {\n      background-color: inherit;\n    }\n  }\n\n  &--disabled &__input {\n    cursor: not-allowed;\n  }\n\n  &__error-text {\n    font-size: var(--six-input-help-text-font-size-medium);\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Prop, State } from '@stencil/core';\nimport { hasSlot } from '../../utils/slot';\n\nexport interface SixFileUploadSuccessPayload {\n  files: FileList;\n}\n\nexport interface SixFileUploadFailurePayload {\n  reason: string;\n  code:\n    | 'ONLY_ONE_FILE_ALLOWED'\n    | 'ONE_OR_MORE_FILES_HAVE_INVALID_MIME_TYPE'\n    | 'INVALID_MIME_TYPE'\n    | 'ONE_OR_MULTIPLE_FILES_TOO_BIG'\n    | 'FILE_TOO_BIG';\n}\n\n/**\n * @since 2.0.0\n * @status experimental\n *\n * @slot error-text - Error text that is shown when the status is set to invalid. Alternatively, you can use the error-text prop.\n */\n@Component({\n  tag: 'six-file-upload',\n  styleUrl: 'six-file-upload.scss',\n  scoped: true,\n  shadow: false,\n})\nexport class SixFileUpload {\n  @Element() readonly host!: HTMLSixFileUploadElement;\n\n  private fileInput?: HTMLInputElement;\n\n  @State() isOver = false;\n  @State() hasError = false;\n\n  /** Set to true if file control should be small. */\n  @Prop() readonly compact: boolean = false;\n\n  /** Label of the drop area. */\n  @Prop() readonly label?: string;\n\n  /** Set when button is disabled. */\n  @Prop() readonly disabled = false;\n\n  /** Accepted MIME-Types. */\n  @Prop() readonly accept?: string;\n\n  /** More than one file allowed. */\n  @Prop() readonly multiple = false;\n\n  /** Allowed max file size in bytes. */\n  @Prop() readonly maxFileSize?: number;\n\n  /** Set to true to draw the control in a loading state. */\n  @Prop({ reflect: true }) uploading = false;\n\n  /** The error message shown, if `invalid` is set to true.  */\n  @Prop() errorText: string | string[] = '';\n\n  /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */\n  @Prop({ reflect: true }) invalid = false;\n\n  /** Triggers when a file is added. */\n  @Event({ eventName: 'six-file-upload-success' }) success!: EventEmitter<SixFileUploadSuccessPayload>;\n\n  /** Triggers when an uploaded file doesn't match MIME type or max file size. */\n  @Event({ eventName: 'six-file-upload-failure' }) failure!: EventEmitter<SixFileUploadFailurePayload>;\n\n  @Listen('dragenter', { capture: false })\n  dragenterHandler() {\n    if (!this.disabled) {\n      this.isOver = true;\n    }\n  }\n\n  @Listen('dragover', { capture: false })\n  dragoverHandler() {\n    if (!this.disabled) {\n      this.isOver = true;\n    }\n  }\n\n  @Listen('dragleave', { capture: false })\n  dragleaveHandler() {\n    if (!this.disabled) {\n      this.isOver = false;\n    }\n  }\n\n  @Listen('drop', { capture: false })\n  dropHandler() {\n    if (!this.disabled) {\n      this.isOver = false;\n    }\n  }\n\n  private handleSlotChange = () => {\n    let validType = false;\n\n    if (\n      this.errorText != null &&\n      ((typeof this.errorText == 'string' && this.errorText.trim().length > 0) ||\n        (typeof this.errorText == 'object' && this.errorText.length > 0))\n    ) {\n      validType = true;\n    }\n\n    this.hasError = validType || hasSlot(this.host, 'error-text');\n  };\n\n  private handleFiles = (files: FileList) => {\n    if (this.disabled || files.length === 0 || this.uploading) {\n      return;\n    }\n\n    if (!this.multiple && files.length > 1) {\n      return this.failure.emit({\n        reason: 'Only one file is allowed.',\n        code: 'ONLY_ONE_FILE_ALLOWED',\n      });\n    }\n\n    for (const file of files) {\n      if (file == null) {\n        return;\n      }\n\n      let acceptedTypesList: string[] = [];\n      if (this.accept != null) {\n        acceptedTypesList = this.accept.replace(/\\s/g, '').split(',');\n      }\n\n      if (acceptedTypesList.length > 0 && acceptedTypesList.indexOf(file.type) === -1) {\n        const reason = files.length > 1 ? 'One or more files have invalid MIME type.' : 'File has invalid MIME type.';\n        const code = files.length > 1 ? 'ONE_OR_MORE_FILES_HAVE_INVALID_MIME_TYPE' : 'INVALID_MIME_TYPE';\n        return this.failure.emit({ reason, code });\n      }\n\n      if (this.maxFileSize != null && file.size > this.maxFileSize) {\n        const reason = files.length > 1 ? 'One or more files are too big' : 'File is too big.';\n        const code = files.length > 1 ? 'ONE_OR_MULTIPLE_FILES_TOO_BIG' : 'FILE_TOO_BIG';\n        return this.failure.emit({ reason, code });\n      }\n    }\n\n    this.success.emit({ files } as SixFileUploadSuccessPayload);\n  };\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  componentDidLoad() {\n    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {\n      this.host.addEventListener(eventName, this.preventDefaults, false);\n      document.body.addEventListener(eventName, this.preventDefaults, false);\n    });\n    this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n  }\n\n  disconnectedCallback() {\n    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {\n      this.host.removeEventListener(eventName, this.preventDefaults, false);\n      document.body.removeEventListener(eventName, this.preventDefaults, false);\n    });\n    this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n  }\n\n  private preventDefaults(e: Event) {\n    e.preventDefault();\n    e.stopPropagation();\n  }\n\n  private onChange = () => {\n    if (this.fileInput?.files != null) {\n      const files = this.fileInput.files;\n      this.handleFiles(files);\n      this.fileInput.value = '';\n    }\n  };\n\n  private renderLabel() {\n    return (\n      this.label ??\n      (this.compact ? (\n        'Upload'\n      ) : (\n        <span>\n          Drop files to upload, or <span class=\"six-file-upload__label--highlighted\">browse</span>\n        </span>\n      ))\n    );\n  }\n\n  render() {\n    const Container = this.compact ? 'six-button' : 'six-card';\n\n    const errorMessages = (Array.isArray(this.errorText) ? this.errorText : [this.errorText]).filter(\n      (text) => text != null && text.trim() !== ''\n    );\n\n    return (\n      <div\n        class={{\n          'six-file-upload': true,\n          'six-file-upload--disabled': this.disabled || this.uploading,\n        }}\n      >\n        <Container\n          disabled={this.disabled || this.uploading}\n          aria-invalid={this.invalid ? 'true' : 'false'}\n          class={{\n            'six-file-upload__container--compact': this.compact,\n            'six-file-upload__container--full': !this.compact,\n          }}\n        >\n          {this.compact && !this.uploading && <six-icon slot=\"prefix\">arrow_circle_up</six-icon>}\n          <div\n            class={{\n              'six-file-upload__drop-zone': true,\n              'six-file-upload__drop-zone--hover': this.isOver,\n              'six-file-upload__drop-zone--compact': this.compact,\n            }}\n          >\n            {this.uploading ? (\n              <span class=\"six-file-upload__drop-zone__spinner-container\">\n                <six-spinner /> Uploading...\n              </span>\n            ) : (\n              <div>\n                <span>{this.renderLabel()}</span>\n                <input\n                  class=\"six-file-upload__input\"\n                  type=\"file\"\n                  name=\"resume\"\n                  disabled={this.disabled}\n                  accept={this.accept}\n                  multiple={this.multiple}\n                  onChange={this.onChange}\n                  ref={(el) => (this.fileInput = el)}\n                />\n              </div>\n            )}\n          </div>\n        </Container>\n        <div aria-hidden={this.invalid ? 'false' : 'true'}>\n          <slot name=\"error-text\">\n            {errorMessages.map((text) => (\n              <six-error>\n                <div class=\"six-file-upload__error-text\">{text}</div>\n              </six-error>\n            ))}\n          </slot>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

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

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

package/dist/components/six-footer.js

@@ -0,0 +1,36 @@
+import { p as proxyCustomElement, H, h } from './p-D512q9rn.js';
+
+const sixFooterCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{display:block}.six-footer{color:var(--six-color-web-rock-900);padding:var(--six-spacing-x-small) 0;text-align:center;width:100%;background-color:var(--six-footer-background-color);box-shadow:var(--six-shadow-medium-top)}";
+
+const SixFooter$1 = /*@__PURE__*/ proxyCustomElement(class SixFooter extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    render() {
+        return (h("footer", { key: '21f693d3b5de440dba60926318d0627ca1c260b1', class: "six-footer" }, h("slot", { key: 'ecd570f552abf35060d5b449c4ce900b23b2abb6' })));
+    }
+    static get style() { return sixFooterCss; }
+}, [1, "six-footer"]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["six-footer"];
+    components.forEach(tagName => { switch (tagName) {
+        case "six-footer":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SixFooter$1);
+            }
+            break;
+    } });
+}
+
+const SixFooter = SixFooter$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SixFooter, defineCustomElement };
+//# sourceMappingURL=six-footer.js.map
+
+//# sourceMappingURL=six-footer.js.map

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

@@ -0,0 +1 @@
+{"file":"six-footer.js","mappings":";;AAAA,MAAM,YAAY,GAAG,wcAAwc;;MCchdA,WAAS,iBAAAC,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;;;;;;IACpB,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,YAAY,EAAA,EACxB,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACD;;;;;;;;;;;;;;;;;;;;;;;","names":["SixFooter","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/six-footer/six-footer.scss?tag=six-footer&encapsulation=shadow","src/components/six-footer/six-footer.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: block;\n}\n\n.six-footer {\n  color: var(--six-color-web-rock-900);\n  padding: var(--six-spacing-x-small) 0;\n  text-align: center;\n  width: 100%;\n  background-color: var(--six-footer-background-color);\n  box-shadow: var(--six-shadow-medium-top);\n}\n","import { Component, h } from '@stencil/core';\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the content of the footer.\n */\n\n@Component({\n  tag: 'six-footer',\n  styleUrl: 'six-footer.scss',\n  shadow: true,\n})\nexport class SixFooter {\n  render() {\n    return (\n      <footer class=\"six-footer\">\n        <slot />\n      </footer>\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,94 @@
+import { p as proxyCustomElement, H, h } from './p-D512q9rn.js';
+import { F as FormControl } from './p-DIkvCBxr.js';
+import { h as hasSlot } from './p-j3oIB5oT.js';
+import { d as defineCustomElement$2 } from './p-BLocui1Z.js';
+
+const sixGroupLabelCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none;text-align:left}.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:\"*\";transform:scale(1.1);margin-left:var(--six-spacing-xxx-small);position:absolute}.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;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 H {
+    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;
+        /** The label's size. */
+        this.size = 'medium';
+        /** The wrapper label's label. Alternatively, you can use the label slot. */
+        this.label = '';
+        /** The wrapper label's help text. Alternatively, you can use the help-text slot. */
+        this.helpText = '';
+        /** Set to true to disable the label. */
+        this.disabled = false;
+        /** Set to true to show an asterisk beneath the label. */
+        this.required = false;
+        this.handleSlotChange = () => {
+            this.hasLabelSlot = hasSlot(this.host, 'label');
+            this.hasHelpTextSlot = hasSlot(this.host, 'help-text');
+        };
+    }
+    handleLabelChange() {
+        this.handleSlotChange();
+    }
+    connectedCallback() {
+        var _a;
+        (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.addEventListener('slotchange', this.handleSlotChange);
+    }
+    componentWillLoad() {
+        this.handleSlotChange();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeEventListener('slotchange', this.handleSlotChange);
+    }
+    render() {
+        return (h(FormControl, { key: '69a1a4643e5c47c3348c90f7a8c6227da1bdf6c0', 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", { key: '49f66c0010c80c65a8d95c6f68ed06adbab00fdb' })));
+    }
+    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": [4],
+        "hasHelpTextSlot": [32],
+        "hasLabelSlot": [32]
+    }, undefined, {
+        "helpText": ["handleLabelChange"],
+        "label": ["handleLabelChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["six-group-label", "six-error"];
+    components.forEach(tagName => { switch (tagName) {
+        case "six-group-label":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SixGroupLabel$1);
+            }
+            break;
+        case "six-error":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const SixGroupLabel = SixGroupLabel$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SixGroupLabel, defineCustomElement };
+//# sourceMappingURL=six-group-label.js.map
+
+//# 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,onFAAonF;;ACI7oF,IAAI,EAAE,GAAG,CAAC;MAoBGA,eAAa,iBAAAC,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;AAL1B,IAAA,WAAA,GAAA;;;;AAMU,QAAA,IAAA,CAAA,cAAc,GAAG,SAAS,EAAE,EAAE,EAAE;AAChC,QAAA,IAAA,CAAA,OAAO,GAAG,CAAe,YAAA,EAAA,EAAE,EAAE;AAC7B,QAAA,IAAA,CAAA,UAAU,GAAG,CAAmB,gBAAA,EAAA,EAAE,EAAE;AAInC,QAAA,IAAe,CAAA,eAAA,GAAG,KAAK;AACvB,QAAA,IAAY,CAAA,YAAA,GAAG,KAAK;;AAGJ,QAAA,IAAI,CAAA,IAAA,GAAiC,QAAQ;;AAG9D,QAAA,IAAK,CAAA,KAAA,GAAG,EAAE;;AAGV,QAAA,IAAQ,CAAA,QAAA,GAAG,EAAE;;AAGI,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;;AAGjC,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAoBhB,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAK;YAC9B,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC;YAC/C,IAAI,CAAC,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC;AACxD,SAAC;AAoBF;IAvCC,iBAAiB,GAAA;QACf,IAAI,CAAC,gBAAgB,EAAE;;IAGzB,iBAAiB,GAAA;;AACf,QAAA,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC;;IAG7E,iBAAiB,GAAA;QACf,IAAI,CAAC,gBAAgB,EAAE;;IAGzB,oBAAoB,GAAA;;AAClB,QAAA,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC;;IAQhF,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAC,WAAW,EAAA,EAAA,GAAA,EAAA,0CAAA,EACV,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,EAAA,EAEvB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixGroupLabel","__stencil_proxyCustomElement","HTMLElement"],"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  private wrapperLabelId = `label-${++id}`;\n  private labelId = `label-label-${id}`;\n  private 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  /** Set to true to show an asterisk beneath the label. */\n  @Prop() required = false;\n\n  @Watch('helpText')\n  @Watch('label')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  connectedCallback() {\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  private 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-dropdown-item.d.ts

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

package/dist/components/six-header-dropdown-item.js

@@ -0,0 +1,114 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-D512q9rn.js';
+import { g as getSlot } from './p-j3oIB5oT.js';
+import { d as defineCustomElement$8 } from './p-BKl-wAjt.js';
+import { d as defineCustomElement$7 } from './p-C6ozoFuw.js';
+import { d as defineCustomElement$6 } from './p-BLocui1Z.js';
+import { d as defineCustomElement$5 } from './p-C84iXIFp.js';
+import { d as defineCustomElement$4 } from './p-C-TgkYhI.js';
+import { d as defineCustomElement$3 } from './p-CXsF3egB.js';
+import { d as defineCustomElement$2 } from './p-SZP6K3B0.js';
+
+const sixHeaderDropdownItemCss = ":host{height:100%;display:flex;align-items:center;box-sizing:border-box;padding:0 var(--six-spacing-large);border-bottom:solid var(--six-header-border-height) transparent;border-top:solid var(--six-header-border-height) transparent}:host(.six-header-dropdown-item--active){border-bottom:solid var(--six-header-border-height) var(--six-header-border-color-open)}";
+
+const SixHeaderDropdownItem$1 = /*@__PURE__*/ proxyCustomElement(class SixHeaderDropdownItem extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /**
+         * Set to true to allow auto filtering for entries in the dropdown.
+         * With this flag the dropdown will automatically filter itsel.
+         * If you need to coordinate the shown elements yourself,
+         * e.g. because you need to call an endpoint use asyncFilter instead
+         */
+        this.filter = false;
+        /** The filter's placeholder text. */
+        this.filterPlaceholder = 'Filter...';
+        this.active = false;
+    }
+    connectedCallback() {
+        this.updateDropdownDistance();
+    }
+    componentDidLoad() {
+        this.updateDropdownDistance();
+    }
+    render() {
+        return (h(Host, { key: '98b4b1ccfd9a0857cc30679ce08bdf79fd22ba57', class: {
+                'six-header-dropdown-item--active': this.active,
+            } }, h("six-dropdown", { key: '584f301f301f84f39e7dcbc724fb5afd7adeca55', ref: (el) => (this.dropdownElement = el), hoist: true, skidding: 0, placement: "bottom-end", "onSix-dropdown-show": () => (this.active = true), "onSix-dropdown-hide": () => (this.active = false), filter: this.filter, filterPlaceholder: this.filterPlaceholder }, h("slot", { key: 'cff60f757172303731a50d00717a476f48f3e56c', slot: "trigger", name: "trigger" }), h("slot", { key: 'f1a80cd16e7c30352a15db4a1550c38fa0a21023' }))));
+    }
+    updateDropdownDistance() {
+        const trigger = getSlot(this.host, 'trigger');
+        const header = this.host.closest('six-header');
+        if (trigger != null && header != null && this.dropdownElement != null && this.host != null) {
+            const hostRight = this.host.getBoundingClientRect().right;
+            const triggerRight = trigger.getBoundingClientRect().right;
+            const headerBottom = header.getBoundingClientRect().bottom;
+            const triggerBottom = trigger.getBoundingClientRect().bottom;
+            this.dropdownElement.distance = headerBottom - triggerBottom + 3;
+            this.dropdownElement.skidding = hostRight - triggerRight;
+        }
+    }
+    get host() { return this; }
+    static get style() { return sixHeaderDropdownItemCss; }
+}, [1, "six-header-dropdown-item", {
+        "filter": [4],
+        "filterPlaceholder": [1, "filter-placeholder"],
+        "active": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["six-header-dropdown-item", "six-checkbox", "six-dropdown", "six-error", "six-icon", "six-input", "six-menu", "six-menu-item"];
+    components.forEach(tagName => { switch (tagName) {
+        case "six-header-dropdown-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SixHeaderDropdownItem$1);
+            }
+            break;
+        case "six-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "six-dropdown":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "six-error":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "six-icon":
+            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 SixHeaderDropdownItem = SixHeaderDropdownItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SixHeaderDropdownItem, defineCustomElement };
+//# sourceMappingURL=six-header-dropdown-item.js.map
+
+//# sourceMappingURL=six-header-dropdown-item.js.map

package/dist/components/six-header-dropdown-item.js.map

@@ -0,0 +1 @@
+{"file":"six-header-dropdown-item.js","mappings":";;;;;;;;;;AAAA,MAAM,wBAAwB,GAAG,2WAA2W;;MCa/XA,uBAAqB,iBAAAC,kBAAA,CAAA,MAAA,qBAAA,SAAAC,CAAA,CAAA;AALlC,IAAA,WAAA,GAAA;;;;AAME;;;;;AAKG;AACK,QAAA,IAAM,CAAA,MAAA,GAAG,KAAK;;AAGd,QAAA,IAAiB,CAAA,iBAAA,GAAG,WAAW;AAE9B,QAAA,IAAM,CAAA,MAAA,GAAG,KAAK;AAkDxB;IA5CC,iBAAiB,GAAA;QACf,IAAI,CAAC,sBAAsB,EAAE;;IAG/B,gBAAgB,GAAA;QACd,IAAI,CAAC,sBAAsB,EAAE;;IAG/B,MAAM,GAAA;QACJ,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;gBACL,kCAAkC,EAAE,IAAI,CAAC,MAAM;aAChD,EAAA,EAED,CACE,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC,EACxC,KAAK,EACL,IAAA,EAAA,QAAQ,EAAE,CAAC,EACX,SAAS,EAAC,YAAY,EACD,qBAAA,EAAA,OAAO,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,EAC1B,qBAAA,EAAA,OAAO,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,EAChD,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EAAA,EAEzC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAG,CAAA,EACtC,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACK,CACV;;IAIH,sBAAsB,GAAA;QAC5B,MAAM,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,SAAS,CAAC;QAC7C,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC;QAC9C,IAAI,OAAO,IAAI,IAAI,IAAI,MAAM,IAAI,IAAI,IAAI,IAAI,CAAC,eAAe,IAAI,IAAI,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,EAAE;YAC1F,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC,KAAK;YACzD,MAAM,YAAY,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC,KAAK;YAC1D,MAAM,YAAY,GAAG,MAAM,CAAC,qBAAqB,EAAE,CAAC,MAAM;YAC1D,MAAM,aAAa,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC,MAAM;YAC5D,IAAI,CAAC,eAAe,CAAC,QAAQ,GAAG,YAAY,GAAG,aAAa,GAAG,CAAC;YAChE,IAAI,CAAC,eAAe,CAAC,QAAQ,GAAG,SAAS,GAAG,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixHeaderDropdownItem","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/six-header-dropdown-item/six-header-dropdown-item.scss?tag=six-header-dropdown-item&encapsulation=shadow","src/components/six-header-dropdown-item/six-header-dropdown-item.tsx"],"sourcesContent":[":host {\n  height: 100%;\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  padding: 0 var(--six-spacing-large);\n  border-bottom: solid var(--six-header-border-height) transparent;\n  border-top: solid var(--six-header-border-height) transparent;\n}\n\n:host(.six-header-dropdown-item--active) {\n  border-bottom: solid var(--six-header-border-height) var(--six-header-border-color-open);\n}\n","import { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { getSlot } from '../../utils/slot';\n\n/**\n * @since 4.2.7\n * @status stable\n */\n\n@Component({\n  tag: 'six-header-dropdown-item',\n  styleUrl: 'six-header-dropdown-item.scss',\n  shadow: true,\n})\nexport class SixHeaderDropdownItem {\n  /**\n   * Set to true to allow auto filtering for entries in the dropdown.\n   * With this flag the dropdown will automatically filter itsel.\n   * If you need to coordinate the shown elements yourself,\n   * e.g. because you need to call an endpoint use asyncFilter instead\n   */\n  @Prop() filter = false;\n\n  /** The filter's placeholder text. */\n  @Prop() filterPlaceholder = 'Filter...';\n\n  @State() active = false;\n\n  @Element() host!: HTMLSixHeaderDropdownItemElement;\n\n  private dropdownElement?: HTMLSixDropdownElement;\n\n  connectedCallback() {\n    this.updateDropdownDistance();\n  }\n\n  componentDidLoad() {\n    this.updateDropdownDistance();\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'six-header-dropdown-item--active': this.active,\n        }}\n      >\n        <six-dropdown\n          ref={(el) => (this.dropdownElement = el)}\n          hoist\n          skidding={0}\n          placement=\"bottom-end\"\n          onSix-dropdown-show={() => (this.active = true)}\n          onSix-dropdown-hide={() => (this.active = false)}\n          filter={this.filter}\n          filterPlaceholder={this.filterPlaceholder}\n        >\n          <slot slot=\"trigger\" name=\"trigger\" />\n          <slot />\n        </six-dropdown>\n      </Host>\n    );\n  }\n\n  private updateDropdownDistance() {\n    const trigger = getSlot(this.host, 'trigger');\n    const header = this.host.closest('six-header');\n    if (trigger != null && header != null && this.dropdownElement != null && this.host != null) {\n      const hostRight = this.host.getBoundingClientRect().right;\n      const triggerRight = trigger.getBoundingClientRect().right;\n      const headerBottom = header.getBoundingClientRect().bottom;\n      const triggerBottom = trigger.getBoundingClientRect().bottom;\n      this.dropdownElement.distance = headerBottom - triggerBottom + 3;\n      this.dropdownElement.skidding = hostRight - triggerRight;\n    }\n  }\n}\n"],"version":3}

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

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

package/dist/components/six-header-item.js

@@ -0,0 +1,46 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-D512q9rn.js';
+
+const sixHeaderItemCss = ":host{position:relative;isolation:isolate;height:100%;display:flex;align-items:center;box-sizing:border-box;padding:0 var(--six-spacing-large);border-bottom:solid var(--six-header-border-height) transparent;border-top:solid var(--six-header-border-height) transparent}:host(.six-header-item--active){border-bottom:solid var(--six-header-border-height) var(--six-header-border-color-open)}";
+
+const SixHeaderItem$1 = /*@__PURE__*/ proxyCustomElement(class SixHeaderItem extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /**
+         * Indicates whether the item is styled as active.
+         * When set to `true`, a border is displayed below the trigger element.
+         *
+         * Use <code>six-header-dropdown-item</code> to automatically set the active
+         * state for dropdowns.
+         */
+        this.active = false;
+    }
+    render() {
+        return (h(Host, { key: 'e94d72bc167c8ade7d81f416f48ee900693f48c0', class: { 'six-header-item--active': this.active } }, h("slot", { key: '86eac95abbec808cfe2bab0f1ad4b89dd69d781d' })));
+    }
+    static get style() { return sixHeaderItemCss; }
+}, [1, "six-header-item", {
+        "active": [516]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["six-header-item"];
+    components.forEach(tagName => { switch (tagName) {
+        case "six-header-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SixHeaderItem$1);
+            }
+            break;
+    } });
+}
+
+const SixHeaderItem = SixHeaderItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SixHeaderItem, defineCustomElement };
+//# sourceMappingURL=six-header-item.js.map
+
+//# sourceMappingURL=six-header-item.js.map

package/dist/components/six-header-item.js.map

@@ -0,0 +1 @@
+{"file":"six-header-item.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,sYAAsY;;MCYlZA,eAAa,iBAAAC,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;AAL1B,IAAA,WAAA,GAAA;;;;AAME;;;;;;AAMG;AACsB,QAAA,IAAM,CAAA,MAAA,GAAG,KAAK;AASxC;IAPC,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAE,EAAE,yBAAyB,EAAE,IAAI,CAAC,MAAM,EAAE,EAAA,EACrD,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixHeaderItem","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/six-header-item/six-header-item.scss?tag=six-header-item&encapsulation=shadow","src/components/six-header-item/six-header-item.tsx"],"sourcesContent":[":host {\n  position: relative;\n  isolation: isolate;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  padding: 0 var(--six-spacing-large);\n  border-bottom: solid var(--six-header-border-height) transparent;\n  border-top: solid var(--six-header-border-height) transparent;\n}\n\n:host(.six-header-item--active) {\n  border-bottom: solid var(--six-header-border-height) var(--six-header-border-color-open);\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * @since 4.2.7\n * @status stable\n */\n\n@Component({\n  tag: 'six-header-item',\n  styleUrl: 'six-header-item.scss',\n  shadow: true,\n})\nexport class SixHeaderItem {\n  /**\n   * Indicates whether the item is styled as active.\n   * When set to `true`, a border is displayed below the trigger element.\n   *\n   * Use <code>six-header-dropdown-item</code> to automatically set the active\n   * state for dropdowns.\n   */\n  @Prop({ reflect: true }) active = false;\n\n  render() {\n    return (\n      <Host class={{ 'six-header-item--active': this.active }}>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

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