@six-group/ui-library 0.0.0-insider.012ddb2

package/dist/collection/components/six-button/six-button.js

@@ -0,0 +1,474 @@
+import { h } from "@stencil/core";
+import { hasSlot } from "../../utils/slot";
+import { submitForm } from "../../utils/form";
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
+ *
+ * @slot - The button's label.
+ * @slot prefix - Used to prepend an icon or similar element to the button.
+ * @slot suffix - Used to append an icon or similar element to the button.
+ *
+ * @part base - The component's base wrapper.
+ * @part prefix - The prefix container.
+ * @part label - The button's label.
+ * @part suffix - The suffix container.
+ * @part caret - The button's caret.
+ */
+export class SixButton {
+    constructor() {
+        this.handleSlotChange = () => {
+            this.hasLabel = hasSlot(this.host);
+            this.hasPrefix = hasSlot(this.host, 'prefix');
+            this.hasSuffix = hasSlot(this.host, 'suffix');
+        };
+        this.handleBlur = () => {
+            this.hasFocus = false;
+            this.sixBlur.emit();
+        };
+        this.handleFocus = () => {
+            this.hasFocus = true;
+            this.sixFocus.emit();
+        };
+        this.handleClick = (event) => {
+            if (this.disabled || this.loading) {
+                event.preventDefault();
+                event.stopPropagation();
+                return;
+            }
+            if (this.submit) {
+                event.preventDefault();
+                submitForm(this.host);
+            }
+        };
+        this.hasFocus = false;
+        this.hasLabel = false;
+        this.hasPrefix = false;
+        this.hasSuffix = false;
+        this.type = 'primary';
+        this.size = 'medium';
+        this.caret = false;
+        this.disabled = false;
+        this.loading = false;
+        this.pill = false;
+        this.circle = false;
+        this.submit = false;
+        this.reset = false;
+        this.name = '';
+        this.value = '';
+        this.href = undefined;
+        this.target = undefined;
+        this.download = undefined;
+    }
+    componentWillLoad() {
+        this.handleSlotChange();
+    }
+    /** Sets focus on the button. */
+    async setFocus(options) {
+        var _a;
+        (_a = this.nativeButton) === null || _a === void 0 ? void 0 : _a.focus(options);
+    }
+    /** Removes focus from the button. */
+    async removeFocus() {
+        var _a;
+        (_a = this.nativeButton) === null || _a === void 0 ? void 0 : _a.blur();
+    }
+    render() {
+        const isLink = this.href != null;
+        const isButton = !isLink;
+        const Button = isLink ? 'a' : 'button';
+        return (h("div", { onClick: this.handleClick, class: { 'button-wrapper--disabled': this.disabled } }, h(Button, { ref: (el) => (this.nativeButton = el), part: "base", class: {
+                button: true,
+                // Types
+                'button--secondary': this.type === 'secondary',
+                'button--primary': this.type === 'primary',
+                'button--link': this.type === 'link',
+                'button--success': this.type === 'success',
+                'button--warning': this.type === 'warning',
+                'button--danger': this.type === 'danger',
+                'button--action': this.type === 'action',
+                // Sizes
+                'button--small': this.size === 'small',
+                'button--medium': this.size === 'medium',
+                'button--large': this.size === 'large',
+                // Modifiers
+                'button--caret': this.caret,
+                'button--circle': this.circle,
+                'button--disabled': this.disabled,
+                'button--focused': this.hasFocus,
+                'button--loading': this.loading,
+                'button--pill': this.pill,
+                'button--has-label': this.hasLabel,
+                'button--has-prefix': this.hasPrefix,
+                'button--has-suffix': this.hasSuffix,
+            }, disabled: isButton ? this.disabled : undefined, tabindex: this.disabled ? '-1' : undefined, type: isButton ? (this.submit ? 'submit' : this.reset ? 'reset' : 'button') : undefined, name: isButton ? this.name : undefined, value: isButton ? this.value : undefined, href: isLink ? this.href : undefined, target: isLink && this.target != null ? this.target : undefined, download: isLink && this.download != null ? this.download : undefined, rel: isLink && this.target != null ? 'noreferrer noopener' : undefined, onBlur: this.handleBlur, onFocus: this.handleFocus, "data-testid": "button" }, h("span", { part: "prefix", class: "button__prefix" }, h("slot", { onSlotchange: this.handleSlotChange, name: "prefix" })), h("span", { part: "label", class: "button__label" }, h("slot", { onSlotchange: this.handleSlotChange })), h("span", { part: "suffix", class: "button__suffix" }, h("slot", { onSlotchange: this.handleSlotChange, name: "suffix" })), this.caret && (h("span", { part: "caret", class: "button__caret" }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { points: "6 9 12 15 18 9" })))), this.loading && h("six-spinner", null))));
+    }
+    static get is() { return "six-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["six-button.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["six-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'secondary' | 'primary' | 'link' | 'success' | 'warning' | 'danger' | 'action'",
+                    "resolved": "\"action\" | \"danger\" | \"link\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The button's type."
+                },
+                "attribute": "type",
+                "reflect": true,
+                "defaultValue": "'primary'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'medium' | 'large'",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The button's size."
+                },
+                "attribute": "size",
+                "reflect": true,
+                "defaultValue": "'medium'"
+            },
+            "caret": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true to draw the button with a caret for use with dropdowns, popovers, etc."
+                },
+                "attribute": "caret",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true to disable the button."
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true to draw the button in a loading state."
+                },
+                "attribute": "loading",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "pill": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true to draw a pill-style button with rounded edges."
+                },
+                "attribute": "pill",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "circle": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true to draw a circle button."
+                },
+                "attribute": "circle",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "submit": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates if activating the button should submit the form. Ignored when `href` is set."
+                },
+                "attribute": "submit",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "reset": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates if activating the button should reset the form."
+                },
+                "attribute": "reset",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "An optional name for the button. Ignored when `href` is set."
+                },
+                "attribute": "name",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "An optional value for the button. Ignored when `href` is set."
+                },
+                "attribute": "value",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`."
+                },
+                "attribute": "href",
+                "reflect": false
+            },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'_blank' | '_parent' | '_self' | '_top'",
+                    "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Tells the browser where to open the link. Only used when `href` is set."
+                },
+                "attribute": "target",
+                "reflect": false
+            },
+            "download": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Tells the browser to download the linked file as this filename. Only used when `href` is set."
+                },
+                "attribute": "download",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasFocus": {},
+            "hasLabel": {},
+            "hasPrefix": {},
+            "hasSuffix": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "sixBlur",
+                "name": "six-button-blur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the button loses focus."
+                },
+                "complexType": {
+                    "original": "EmptyPayload",
+                    "resolved": "undefined",
+                    "references": {
+                        "EmptyPayload": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::EmptyPayload"
+                        }
+                    }
+                }
+            }, {
+                "method": "sixFocus",
+                "name": "six-button-focus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the button gains focus."
+                },
+                "complexType": {
+                    "original": "EmptyPayload",
+                    "resolved": "undefined",
+                    "references": {
+                        "EmptyPayload": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::EmptyPayload"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "(options?: FocusOptions) => Promise<void>",
+                    "parameters": [{
+                            "name": "options",
+                            "type": "FocusOptions | undefined",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "FocusOptions": {
+                            "location": "global",
+                            "id": "global::FocusOptions"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets focus on the button.",
+                    "tags": []
+                }
+            },
+            "removeFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Removes focus from the button.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=six-button.js.map

package/dist/collection/components/six-button/six-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"six-button.js","sourceRoot":"","sources":["../../../src/components/six-button/six-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { submitForm } from '../../utils/form';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The button's label.\n * @slot prefix - Used to prepend an icon or similar element to the button.\n * @slot suffix - Used to append an icon or similar element to the button.\n *\n * @part base - The component's base wrapper.\n * @part prefix - The prefix container.\n * @part label - The button's label.\n * @part suffix - The suffix container.\n * @part caret - The button's caret.\n */\n\n@Component({\n  tag: 'six-button',\n  styleUrl: 'six-button.scss',\n  shadow: true,\n})\nexport class SixButton {\n  private nativeButton?: HTMLButtonElement | HTMLAnchorElement;\n\n  @Element() host!: HTMLSixButtonElement;\n\n  @State() hasFocus = false;\n  @State() hasLabel = false;\n  @State() hasPrefix = false;\n  @State() hasSuffix = false;\n\n  /** The button's type. */\n  @Prop({ reflect: true }) type: 'secondary' | 'primary' | 'link' | 'success' | 'warning' | 'danger' | 'action' =\n    'primary';\n\n  /** The button's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Set to true to draw the button with a caret for use with dropdowns, popovers, etc. */\n  @Prop() caret = false;\n\n  /** Set to true to disable the button. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Set to true to draw the button in a loading state. */\n  @Prop({ reflect: true }) loading = false;\n\n  /** Set to true to draw a pill-style button with rounded edges. */\n  @Prop({ reflect: true }) pill = false;\n\n  /** Set to true to draw a circle button. */\n  @Prop({ reflect: true }) circle = false;\n\n  /** Indicates if activating the button should submit the form. Ignored when `href` is set. */\n  @Prop({ reflect: true }) submit = false;\n\n  /** Indicates if activating the button should reset the form. */\n  @Prop({ reflect: true }) reset = false;\n\n  /** An optional name for the button. Ignored when `href` is set. */\n  @Prop() name = '';\n\n  /** An optional value for the button. Ignored when `href` is set. */\n  @Prop() value = '';\n\n  /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */\n  @Prop() href?: string;\n\n  /** Tells the browser where to open the link. Only used when `href` is set. */\n  @Prop() target?: '_blank' | '_parent' | '_self' | '_top';\n\n  /** Tells the browser to download the linked file as this filename. Only used when `href` is set. */\n  @Prop() download?: string;\n\n  /** Emitted when the button loses focus. */\n  @Event({ eventName: 'six-button-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the button gains focus. */\n  @Event({ eventName: 'six-button-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  /** Sets focus on the button. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.nativeButton?.focus(options);\n  }\n\n  /** Removes focus from the button. */\n  @Method()\n  async removeFocus() {\n    this.nativeButton?.blur();\n  }\n\n  private handleSlotChange = () => {\n    this.hasLabel = hasSlot(this.host);\n    this.hasPrefix = hasSlot(this.host, 'prefix');\n    this.hasSuffix = hasSlot(this.host, 'suffix');\n  };\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.sixBlur.emit();\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.sixFocus.emit();\n  };\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.disabled || this.loading) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n\n    if (this.submit) {\n      event.preventDefault();\n      submitForm(this.host);\n    }\n  };\n\n  render() {\n    const isLink = this.href != null;\n    const isButton = !isLink;\n    const Button = isLink ? 'a' : 'button';\n\n    return (\n      <div onClick={this.handleClick} class={{ 'button-wrapper--disabled': this.disabled }}>\n        <Button\n          ref={(el) => (this.nativeButton = el)}\n          part=\"base\"\n          class={{\n            button: true,\n\n            // Types\n            'button--secondary': this.type === 'secondary',\n            'button--primary': this.type === 'primary',\n            'button--link': this.type === 'link',\n            'button--success': this.type === 'success',\n            'button--warning': this.type === 'warning',\n            'button--danger': this.type === 'danger',\n            'button--action': this.type === 'action',\n\n            // Sizes\n            'button--small': this.size === 'small',\n            'button--medium': this.size === 'medium',\n            'button--large': this.size === 'large',\n\n            // Modifiers\n            'button--caret': this.caret,\n            'button--circle': this.circle,\n            'button--disabled': this.disabled,\n            'button--focused': this.hasFocus,\n            'button--loading': this.loading,\n            'button--pill': this.pill,\n            'button--has-label': this.hasLabel,\n            'button--has-prefix': this.hasPrefix,\n            'button--has-suffix': this.hasSuffix,\n          }}\n          disabled={isButton ? this.disabled : undefined}\n          tabindex={this.disabled ? '-1' : undefined}\n          type={isButton ? (this.submit ? 'submit' : this.reset ? 'reset' : 'button') : undefined}\n          name={isButton ? this.name : undefined}\n          value={isButton ? this.value : undefined}\n          href={isLink ? this.href : undefined}\n          target={isLink && this.target != null ? this.target : undefined}\n          download={isLink && this.download != null ? this.download : undefined}\n          rel={isLink && this.target != null ? 'noreferrer noopener' : undefined}\n          onBlur={this.handleBlur}\n          onFocus={this.handleFocus}\n          data-testid=\"button\"\n        >\n          <span part=\"prefix\" class=\"button__prefix\">\n            <slot onSlotchange={this.handleSlotChange} name=\"prefix\" />\n          </span>\n          <span part=\"label\" class=\"button__label\">\n            <slot onSlotchange={this.handleSlotChange} />\n          </span>\n          <span part=\"suffix\" class=\"button__suffix\">\n            <slot onSlotchange={this.handleSlotChange} name=\"suffix\" />\n          </span>\n          {this.caret && (\n            <span part=\"caret\" class=\"button__caret\">\n              <svg\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              >\n                <polyline points=\"6 9 12 15 18 9\" />\n              </svg>\n            </span>\n          )}\n\n          {this.loading && <six-spinner />}\n        </Button>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/six-button/test/six-button.spec.js

@@ -0,0 +1,69 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SixButton } from "../six-button";
+describe('six-button', () => {
+    it('should create a component instance', () => {
+        expect(new SixButton()).toBeInstanceOf(SixButton);
+    });
+    describe('rendering', () => {
+        let page;
+        let button;
+        beforeEach(async () => {
+            var _a, _b;
+            page = (await newSpecPage({
+                components: [SixButton],
+                html: `<six-button></six-button>`,
+                supportsShadowDom: true,
+            }));
+            const queryResult = (_b = (_a = page.root) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('[data-testid="button"]');
+            if (queryResult != null) {
+                button = queryResult;
+            }
+        });
+        it('renders', async () => {
+            expect(page.root).toEqualHtml(`
+      <six-button size="medium" type="primary">
+        <mock:shadow-root>
+         <div>
+          <button class="button button--primary button--medium" part="base" type="button" data-testid="button" value="">
+            <span part="prefix" class="button__prefix">
+              <slot name="prefix"></slot>
+            </span>
+            <span part="label" class="button__label">
+              <slot></slot>
+            </span>
+            <span part="suffix" class="button__suffix">
+              <slot name="suffix"></slot>
+            </span>
+          </button>
+         </div>
+        </mock:shadow-root>
+      </six-button>
+    `);
+        });
+        describe('custom events', () => {
+            it(`should propagate custom 'six-button-blur' event`, async () => {
+                var _a;
+                const spy = jest.fn();
+                (_a = page.root) === null || _a === void 0 ? void 0 : _a.addEventListener('six-button-blur', spy);
+                await page.waitForChanges();
+                // when
+                button.dispatchEvent(new Event('blur'));
+                await page.waitForChanges();
+                // then
+                expect(spy).toHaveBeenCalled();
+            });
+            it(`should propagate custom 'six-button-focus' event`, async () => {
+                var _a;
+                const spy = jest.fn();
+                (_a = page.root) === null || _a === void 0 ? void 0 : _a.addEventListener('six-button-focus', spy);
+                await page.waitForChanges();
+                // when
+                button.dispatchEvent(new Event('focus'));
+                await page.waitForChanges();
+                // then
+                expect(spy).toHaveBeenCalled();
+            });
+        });
+    });
+});
+//# sourceMappingURL=six-button.spec.js.map

package/dist/collection/components/six-button/test/six-button.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"six-button.spec.js","sourceRoot":"","sources":["../../../../src/components/six-button/test/six-button.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAY,MAAM,uBAAuB,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAM1C,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAC1B,EAAE,CAAC,oCAAoC,EAAE,GAAG,EAAE;QAC5C,MAAM,CAAC,IAAI,SAAS,EAAE,CAAC,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC;IACpD,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;QACzB,IAAI,IAA8B,CAAC;QACnC,IAAI,MAAyB,CAAC;QAE9B,UAAU,CAAC,KAAK,IAAI,EAAE;;YACpB,IAAI,GAAG,CAAC,MAAM,WAAW,CAAC;gBACxB,UAAU,EAAE,CAAC,SAAS,CAAC;gBACvB,IAAI,EAAE,2BAA2B;gBACjC,iBAAiB,EAAE,IAAI;aACxB,CAAC,CAA6B,CAAC;YAChC,MAAM,WAAW,GAAG,MAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,UAAU,0CAAE,aAAa,CAAC,wBAAwB,CAAC,CAAC;YACnF,IAAI,WAAW,IAAI,IAAI,EAAE;gBACvB,MAAM,GAAG,WAAgC,CAAC;aAC3C;QACH,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;YACvB,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;KAkB/B,CAAC,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;YAC7B,EAAE,CAAC,iDAAiD,EAAE,KAAK,IAAI,EAAE;;gBAC/D,MAAM,GAAG,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;gBACtB,MAAA,IAAI,CAAC,IAAI,0CAAE,gBAAgB,CAAC,iBAAiB,EAAE,GAAG,CAAC,CAAC;gBACpD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;gBAE5B,OAAO;gBACP,MAAM,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;gBACxC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;gBAE5B,OAAO;gBACP,MAAM,CAAC,GAAG,CAAC,CAAC,gBAAgB,EAAE,CAAC;YACjC,CAAC,CAAC,CAAC;YAEH,EAAE,CAAC,kDAAkD,EAAE,KAAK,IAAI,EAAE;;gBAChE,MAAM,GAAG,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;gBACtB,MAAA,IAAI,CAAC,IAAI,0CAAE,gBAAgB,CAAC,kBAAkB,EAAE,GAAG,CAAC,CAAC;gBACrD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;gBAE5B,OAAO;gBACP,MAAM,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;gBACzC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;gBAE5B,OAAO;gBACP,MAAM,CAAC,GAAG,CAAC,CAAC,gBAAgB,EAAE,CAAC;YACjC,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage, SpecPage } from '@stencil/core/testing';\nimport { SixButton } from '../six-button';\n\ninterface TypedSpecPage<T> extends Omit<SpecPage, 'root'> {\n  root?: HTMLElement & T;\n}\n\ndescribe('six-button', () => {\n  it('should create a component instance', () => {\n    expect(new SixButton()).toBeInstanceOf(SixButton);\n  });\n\n  describe('rendering', () => {\n    let page: TypedSpecPage<SixButton>;\n    let button: HTMLButtonElement;\n\n    beforeEach(async () => {\n      page = (await newSpecPage({\n        components: [SixButton],\n        html: `<six-button></six-button>`,\n        supportsShadowDom: true,\n      })) as TypedSpecPage<SixButton>;\n      const queryResult = page.root?.shadowRoot?.querySelector('[data-testid=\"button\"]');\n      if (queryResult != null) {\n        button = queryResult as HTMLButtonElement;\n      }\n    });\n\n    it('renders', async () => {\n      expect(page.root).toEqualHtml(`\n      <six-button size=\"medium\" type=\"primary\">\n        <mock:shadow-root>\n         <div>\n          <button class=\"button button--primary button--medium\" part=\"base\" type=\"button\" data-testid=\"button\" value=\"\">\n            <span part=\"prefix\" class=\"button__prefix\">\n              <slot name=\"prefix\"></slot>\n            </span>\n            <span part=\"label\" class=\"button__label\">\n              <slot></slot>\n            </span>\n            <span part=\"suffix\" class=\"button__suffix\">\n              <slot name=\"suffix\"></slot>\n            </span>\n          </button>\n         </div>\n        </mock:shadow-root>\n      </six-button>\n    `);\n    });\n\n    describe('custom events', () => {\n      it(`should propagate custom 'six-button-blur' event`, async () => {\n        const spy = jest.fn();\n        page.root?.addEventListener('six-button-blur', spy);\n        await page.waitForChanges();\n\n        // when\n        button.dispatchEvent(new Event('blur'));\n        await page.waitForChanges();\n\n        // then\n        expect(spy).toHaveBeenCalled();\n      });\n\n      it(`should propagate custom 'six-button-focus' event`, async () => {\n        const spy = jest.fn();\n        page.root?.addEventListener('six-button-focus', spy);\n        await page.waitForChanges();\n\n        // when\n        button.dispatchEvent(new Event('focus'));\n        await page.waitForChanges();\n\n        // then\n        expect(spy).toHaveBeenCalled();\n      });\n    });\n  });\n});\n"]}

package/dist/collection/components/six-card/six-card.css

@@ -0,0 +1,14 @@
+:host {
+  position: relative;
+  box-sizing: border-box;
+}
+:host *, :host *:before, :host *:after {
+  box-sizing: border-box;
+}
+
+:host {
+  display: inline-block;
+  box-shadow: var(--six-shadow-medium);
+  border: 1px solid var(--six-color-web-rock-100);
+  padding: var(--six-spacing-medium);
+}

package/dist/collection/components/six-card/six-card.js

@@ -0,0 +1,25 @@
+import { h, Host } from "@stencil/core";
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * @slot - Used to define the content of the card.
+ */
+export class SixCard {
+    render() {
+        return (h(Host, null, h("slot", null)));
+    }
+    static get is() { return "six-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["six-card.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["six-card.css"]
+        };
+    }
+}
+//# sourceMappingURL=six-card.js.map

package/dist/collection/components/six-card/six-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"six-card.js","sourceRoot":"","sources":["../../../src/components/six-card/six-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;GAKG;AAOH,MAAM,OAAO,OAAO;IAClB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,eAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host } from '@stencil/core';\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the content of the card.\n */\n\n@Component({\n  tag: 'six-card',\n  styleUrl: 'six-card.scss',\n  shadow: true,\n})\nexport class SixCard {\n  render() {\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/six-card/test/six-card.spec.js

@@ -0,0 +1,18 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SixCard } from "../six-card";
+describe('six-card', () => {
+    it('renders', async () => {
+        const page = await newSpecPage({
+            components: [SixCard],
+            html: `<six-card></six-card>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <six-card>
+        <mock:shadow-root>
+          <slot></slot>
+        </mock:shadow-root>
+      </six-card>
+    `);
+    });
+});
+//# sourceMappingURL=six-card.spec.js.map

package/dist/collection/components/six-card/test/six-card.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"six-card.spec.js","sourceRoot":"","sources":["../../../../src/components/six-card/test/six-card.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;IACxB,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,OAAO,CAAC;YACrB,IAAI,EAAE,uBAAuB;SAC9B,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;KAM7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixCard } from '../six-card';\n\ndescribe('six-card', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [SixCard],\n      html: `<six-card></six-card>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-card>\n        <mock:shadow-root>\n          <slot></slot>\n        </mock:shadow-root>\n      </six-card>\n    `);\n  });\n});\n"]}