@getflip/swirl-components 0.97.0 → 0.98.0

package/dist/collection/components/swirl-color-input/swirl-color-input.js

@@ -0,0 +1,292 @@
+import { h, Host, } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlColorInput {
+  constructor() {
+    this.onChange = (event) => {
+      const el = event.target;
+      this.value = el.value;
+    };
+    this.onBlur = (event) => {
+      this.inputBlur.emit(event);
+    };
+    this.onFocus = (event) => {
+      this.inputFocus.emit(event);
+      this.handleAutoSelect(event);
+    };
+    this.onInput = (event) => {
+      this.onChange(event);
+    };
+    this.autoFocus = undefined;
+    this.autoSelect = undefined;
+    this.disabled = undefined;
+    this.swirlAriaDescribedby = undefined;
+    this.inline = undefined;
+    this.invalid = undefined;
+    this.placeholder = undefined;
+    this.required = undefined;
+    this.value = undefined;
+  }
+  componentDidLoad() {
+    // see https://stackoverflow.com/a/27314017
+    if (this.autoFocus) {
+      setTimeout(() => {
+        this.inputEl.focus();
+      });
+    }
+  }
+  watchValue(newValue, oldValue) {
+    if (newValue !== oldValue) {
+      this.valueChange.emit(newValue);
+    }
+  }
+  handleAutoSelect(event) {
+    if (!this.autoSelect) {
+      return;
+    }
+    event.target.select();
+  }
+  render() {
+    const ariaInvalid = this.invalid === true || this.invalid === false
+      ? String(this.invalid)
+      : undefined;
+    const className = classnames("color-input", {
+      "color-input--inline": this.inline,
+    });
+    return (h(Host, null, h("div", { class: className }, h("input", { "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "color-input__input", disabled: this.disabled, maxLength: 9, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, spellcheck: "false", type: "text", value: this.value }), h("span", { class: "color-input__preview", style: {
+        backgroundColor: this.disabled
+          ? "var(--s-border-subdued)"
+          : this.value,
+      } }))));
+  }
+  static get is() { return "swirl-color-input"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["swirl-color-input.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["swirl-color-input.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "autoFocus": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "auto-focus",
+        "reflect": false
+      },
+      "autoSelect": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "auto-select",
+        "reflect": false
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": false
+      },
+      "swirlAriaDescribedby": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "swirl-aria-describedby",
+        "reflect": false
+      },
+      "inline": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "inline",
+        "reflect": false
+      },
+      "invalid": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "invalid",
+        "reflect": false
+      },
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "placeholder",
+        "reflect": false
+      },
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "required",
+        "reflect": false
+      },
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "value",
+        "reflect": true
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "inputBlur",
+        "name": "inputBlur",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "FocusEvent",
+          "resolved": "FocusEvent",
+          "references": {
+            "FocusEvent": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "method": "inputFocus",
+        "name": "inputFocus",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "FocusEvent",
+          "resolved": "FocusEvent",
+          "references": {
+            "FocusEvent": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "method": "valueChange",
+        "name": "valueChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }];
+  }
+  static get watchers() {
+    return [{
+        "propName": "value",
+        "methodName": "watchValue"
+      }];
+  }
+}

package/dist/collection/components/swirl-color-input/swirl-color-input.spec.js

@@ -0,0 +1,62 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SwirlColorInput } from "./swirl-color-input";
+describe("swirl-color-input", () => {
+  it("renders the input with props", async () => {
+    const page = await newSpecPage({
+      components: [SwirlColorInput],
+      html: `<swirl-color-input
+              disabled="true"
+              swirl-aria-describedby="id"
+              invalid="true"
+              required="true"
+              value="#ff0000">
+            </swirl-color-input>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-color-input disabled="true"
+                      swirl-aria-describedby="id"
+                      invalid="true"
+                      required="true"
+                      value="#ff0000">
+        <div class="color-input">
+          <input aria-describedby="id"
+                 aria-disabled="true"
+                 aria-invalid="true"
+                 class="color-input__input"
+                 disabled=""
+                 maxlength="9"
+                 required=""
+                 spellcheck="false"
+                 type="text"
+                 value="#ff0000">
+          <span class="color-input__preview" style="background-color: var(--s-border-subdued);"></span>
+        </div>
+      </swirl-color-input>
+    `);
+  });
+  it("shows a preview", async () => {
+    const page = await newSpecPage({
+      components: [SwirlColorInput],
+      html: `<swirl-color-input value="Value"></swirl-color-input>`,
+    });
+    const input = page.root.querySelector(".color-input__input");
+    input.value = "#ccddee";
+    input.dispatchEvent(new Event("input"));
+    await page.waitForChanges();
+    expect(page.root.querySelector(".color-input__preview").style
+      .backgroundColor).toEqual("#ccddee");
+  });
+  it("fires valueChange events", async () => {
+    const page = await newSpecPage({
+      components: [SwirlColorInput],
+      html: `<swirl-color-input value="Value"></swirl-color-input>`,
+    });
+    const spy = jest.fn();
+    const input = page.root.querySelector(".color-input__input");
+    page.root.addEventListener("valueChange", spy);
+    input.value = "New Value";
+    input.dispatchEvent(new Event("input"));
+    expect(spy).toHaveBeenCalled();
+    expect(spy.mock.calls[0][0].detail).toBe("New Value");
+  });
+});

package/dist/collection/components/swirl-color-input/swirl-color-input.stories.js

@@ -0,0 +1,22 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./swirl-color-input.mdx";
+export default {
+  component: "swirl-color-input",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/SwirlColorInput",
+};
+const Template = (args) => {
+  const formControl = document.createElement("swirl-form-control");
+  const element = generateStoryElement("swirl-color-input", args);
+  formControl.setAttribute("label", "Color input");
+  formControl.setAttribute("disabled", args.disabled ? "true" : "false");
+  formControl.append("\n  ", element, "\n");
+  return formControl;
+};
+export const SwirlColorInput = Template.bind({});
+SwirlColorInput.args = {};

package/dist/collection/components/swirl-modal/swirl-modal.css

@@ -129,6 +129,10 @@
   }
     }
 
+.modal--variant-drawer .modal__content {
+    min-height: 100%;
+  }
+
 @media (min-width: 768px) {
 
 .modal--variant-drawer.modal--padded .modal__content {

package/dist/components/swirl-accordion-item.d.ts

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

package/dist/components/swirl-accordion-item.js

@@ -0,0 +1,113 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { d as defineCustomElement$3 } from './swirl-icon2.js';
+import { d as defineCustomElement$2 } from './swirl-text2.js';
+import { v as v4 } from './v4.js';
+
+const swirlAccordionItemCss = ":host{display:block}:host *{box-sizing:border-box}:host(:last-child) .accordion-item{border-bottom:0.0625rem solid var(--s-border-default)}.accordion-item{display:grid;align-content:start;border-top:0.0625rem solid var(--s-border-default);transition:grid-template-rows 0.15s;grid-template-rows:auto 0fr;will-change:grid-template-rows}@media (prefers-reduced-motion){.accordion-item{transition:none}}.accordion-item--expanded{grid-template-rows:auto 1fr}.accordion-item--expanded .accordion-item__content{padding-top:var(--s-space-16);padding-bottom:var(--s-space-16);animation:accordion-overflow 0.01s;animation-delay:0.15s;animation-fill-mode:forwards}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.accordion-item--expanded .accordion-item__content{padding-top:var(--s-space-8)}}.accordion-item__heading{margin:0;padding:0;font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-semibold)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.accordion-item__heading{font-size:var(--s-font-size-sm)}}.accordion-item__toggle{display:flex;width:100%;padding:0;padding-top:var(--s-space-16);padding-bottom:var(--s-space-16);align-items:center;border:none;color:var(--s-text-default);background-color:var(--s-surface-default);font:inherit;line-height:var(--s-line-height-lg);text-align:start;cursor:pointer;gap:var(--s-space-16)}.accordion-item__toggle:hover{background-color:var(--s-surface-hovered)}.accordion-item__toggle:active{background-color:var(--s-surface-pressed)}.accordion-item__toggle:disabled{color:var(--s-text-disabled);background-color:var(--s-surface-default);cursor:default}.accordion-item__toggle:disabled .text{color:var(--s-text-disabled)}.accordion-item__toggle:focus:not(:focus-visible){outline:none}.accordion-item__toggle:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.accordion-item__toggle{line-height:var(--s-line-height-sm)}}.accordion-item__toggle-text{flex-grow:1}.accordion-item__icon{display:inline-flex;padding-right:var(--s-space-8);flex-shrink:0}.accordion-item__content{overflow:hidden;padding-top:0;padding-bottom:0;transition:padding-top 0.15s, padding-bottom 0.15s;animation:accordion-display 0.01s;animation-delay:0.15s;animation-fill-mode:forwards}@media (prefers-reduced-motion){.accordion-item__content{transition:none}}@keyframes accordion-overflow{from{overflow:hidden}to{overflow:visible}}@keyframes accordion-display{from{display:block}to{display:none}}";
+
+const SwirlAccordionItem$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAccordionItem extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.expansionChange = createEvent(this, "expansionChange", 7);
+    this.id = `accordion-item-${v4()}`;
+    this.headingId = `${this.id}-heading`;
+    this.onHeadingClick = () => {
+      this.toggle();
+    };
+    this.description = undefined;
+    this.disabled = undefined;
+    this.heading = undefined;
+    this.headingLevel = 2;
+    this.initiallyOpen = undefined;
+    this.expanded = false;
+  }
+  componentWillLoad() {
+    this.accordion = this.el.closest("swirl-accordion");
+    this.expanded = (this.initiallyOpen && !this.disabled) || false;
+    if (!Boolean(this.accordion)) {
+      throw new Error("[Swirl] swirl-accordion-item must be a child of a swirl-accordion.");
+    }
+  }
+  /**
+   * Collapsed the accordion item.
+   */
+  async collapse() {
+    if (!this.expanded || this.disabled) {
+      return;
+    }
+    this.expanded = false;
+    this.expansionChange.emit(this.expanded);
+  }
+  /**
+   * Expands the accordion item.
+   */
+  async expand() {
+    if (this.expanded || this.disabled) {
+      return;
+    }
+    this.expanded = true;
+    this.expansionChange.emit(this.expanded);
+  }
+  /**
+   * Toggles the accordion item.
+   */
+  async toggle() {
+    if (this.expanded) {
+      this.collapse();
+    }
+    else {
+      this.expand();
+    }
+  }
+  render() {
+    const HeadingTag = `h${this.headingLevel}`;
+    const className = classnames("accordion-item", {
+      "accordion-item--expanded": this.expanded,
+    });
+    return (h(Host, null, h("div", { class: className }, h(HeadingTag, { class: "accordion-item__heading" }, h("button", { "aria-controls": this.id, "aria-expanded": String(this.expanded), class: "accordion-item__toggle", disabled: this.disabled, id: this.headingId, onClick: this.onHeadingClick, type: "button" }, h("span", { class: "accordion-item__toggle-text" }, this.heading, this.description && (h("swirl-text", { as: "span", color: "subdued", size: "sm" }, this.description))), h("span", { class: "accordion-item__icon" }, !this.expanded && (h("swirl-icon", { glyph: "chevron-right", size: 20 })), this.expanded && (h("swirl-icon", { glyph: "expand-more", size: 20 }))))), h("div", { "aria-labelledby": this.headingId, class: "accordion-item__content", id: this.id, role: "region" }, h("slot", null)))));
+  }
+  get el() { return this; }
+  static get style() { return swirlAccordionItemCss; }
+}, [1, "swirl-accordion-item", {
+    "description": [1],
+    "disabled": [4],
+    "heading": [1],
+    "headingLevel": [2, "heading-level"],
+    "initiallyOpen": [4, "initially-open"],
+    "expanded": [32],
+    "collapse": [64],
+    "expand": [64],
+    "toggle": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-accordion-item", "swirl-icon", "swirl-text"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-accordion-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlAccordionItem$1);
+      }
+      break;
+    case "swirl-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "swirl-text":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const SwirlAccordionItem = SwirlAccordionItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlAccordionItem, defineCustomElement };

package/dist/components/swirl-accordion.d.ts

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

package/dist/components/swirl-accordion.js

@@ -0,0 +1,49 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const swirlAccordionCss = ":host{display:block}:host *{box-sizing:border-box}";
+
+const SwirlAccordion$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAccordion extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  componentDidLoad() {
+    this.el.addEventListener("expansionChange", (event) => {
+      if (event.detail) {
+        this.collapseInactiveItems(event.target);
+      }
+    });
+  }
+  collapseInactiveItems(activeItem) {
+    Array.from(this.el.querySelectorAll("swirl-accordion-item")).forEach((item) => {
+      if (item !== activeItem) {
+        item.collapse();
+      }
+    });
+  }
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+  get el() { return this; }
+  static get style() { return swirlAccordionCss; }
+}, [1, "swirl-accordion"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-accordion"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-accordion":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlAccordion$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const SwirlAccordion = SwirlAccordion$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlAccordion, defineCustomElement };

package/dist/components/swirl-color-input.d.ts

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