@getflip/swirl-components 0.2.0 → 0.3.0

package/dist/collection/components/flip-text-input/flip-text-input.js

@@ -0,0 +1,549 @@
+import { Component, Event, h, Host, Prop, State, } from "@stencil/core";
+import classnames from "classnames";
+export class FlipTextInput {
+  constructor() {
+    this.autoComplete = "on";
+    this.clearButtonLabel = "Clear input";
+    this.rows = 1;
+    this.passwordToggleLabel = "Toggle password display";
+    this.type = "text";
+    this.showPassword = false;
+    this.clear = () => {
+      this.inputEl.value = "";
+      this.value = "";
+      this.valueChange.emit("");
+      this.inputEl.focus();
+    };
+    this.onChange = (event) => {
+      const el = event.target;
+      this.value = el.value;
+      this.valueChange.emit(el.value);
+    };
+    this.onFocus = (event) => {
+      this.handleAutoSelect(event);
+    };
+    this.onInput = (event) => {
+      this.onChange(event);
+    };
+    this.onKeyPress = (event) => {
+      if (this.type !== "number") {
+        return;
+      }
+      if (["+", "-", "e"].includes(event.key)) {
+        event.preventDefault();
+      }
+    };
+    this.decreaseValue = () => {
+      if (this.type !== "number") {
+        return;
+      }
+      const step = this.step || 1;
+      const currentValue = isNaN(this.inputEl.valueAsNumber)
+        ? this.min !== undefined
+          ? this.min + 1
+          : 1
+        : this.inputEl.valueAsNumber;
+      this.value = String(Math.max(this.min || -Infinity, currentValue - step));
+      this.valueChange.emit(this.value);
+    };
+    this.increaseValue = () => {
+      if (this.type !== "number") {
+        return;
+      }
+      const step = this.step || 1;
+      const currentValue = isNaN(this.inputEl.valueAsNumber)
+        ? this.min !== undefined
+          ? this.min - 1
+          : -1
+        : this.inputEl.valueAsNumber;
+      this.value = String(Math.min(this.max || Infinity, currentValue + step));
+      this.valueChange.emit(this.value);
+    };
+    this.togglePassword = () => {
+      if (this.type !== "password") {
+        return;
+      }
+      this.showPassword = !this.showPassword;
+    };
+  }
+  componentDidRender() {
+    this.adjustInputSize();
+  }
+  adjustInputSize() {
+    if (this.rows > 1) {
+      this.inputEl.style.width = "";
+      this.inputEl.style.height = "";
+      this.inputEl.style.height = this.inputEl.scrollHeight / 16 + "rem";
+    }
+    if (this.rows === 1) {
+      this.inputEl.style.height = "";
+      this.inputEl.style.width = "";
+      if (this.type !== "password") {
+        this.inputEl.style.width = this.inputEl.scrollWidth / 16 + "rem";
+      }
+    }
+  }
+  handleAutoSelect(event) {
+    if (!this.autoSelect) {
+      return;
+    }
+    event.target.select();
+  }
+  render() {
+    var _a;
+    const Tag = this.rows === 1 ? "input" : "textarea";
+    const ariaInvalid = this.invalid === true
+      ? "true"
+      : this.invalid === false
+        ? "false"
+        : undefined;
+    const showStepper = this.type === "number" && !this.disabled;
+    const showPasswordToggle = this.type === "password" && !this.disabled;
+    const showClearButton = this.clearable &&
+      !this.disabled &&
+      Boolean(this.value) &&
+      !showPasswordToggle &&
+      !showStepper &&
+      !this.showCharacterCounter;
+    const type = this.type === "password" && this.showPassword ? "text" : this.type;
+    const className = classnames("text-input", `text-input--type-${this.type}`, {
+      "text-input--clearable": this.clearable,
+      "text-input--disabled": this.disabled,
+      "text-input--show-password": this.type === "password" && this.showPassword,
+    });
+    return (h(Host, null,
+      h("div", { class: className },
+        this.prefixLabel && (h("span", { class: "text-input__prefix" }, this.prefixLabel)),
+        h(Tag, { "aria-describedby": this.flipAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoComplete: this.autoComplete, autoFocus: this.autoFocus, class: "text-input__input", disabled: this.disabled, inputMode: this.mode, maxLength: this.maxLength, max: this.type === "number" ? this.max : undefined, min: this.type === "number" ? this.min : undefined, onFocus: this.onFocus, onInput: this.onInput, onKeyPress: this.onKeyPress, ref: (el) => (this.inputEl = el), required: this.required, rows: this.rows > 1 ? this.rows : undefined, spellcheck: this.spellCheck, step: this.type === "number" ? this.step : undefined, type: type, value: this.rows === 1 ? this.value : undefined }, this.rows > 1 && this.value),
+        this.suffixLabel && (h("span", { class: "text-input__suffix" }, this.suffixLabel)),
+        showClearButton && (h("button", { "aria-label": this.clearButtonLabel, class: "text-input__clear-button", onClick: this.clear, type: "button" },
+          h("flip-icon-cancel", null))),
+        showPasswordToggle && (h("button", { "aria-label": this.passwordToggleLabel, class: "text-input__password-toggle", onClick: this.togglePassword, type: "button" }, this.showPassword ? (h("flip-icon-visibility-off", null)) : (h("flip-icon-visibility", null)))),
+        showStepper && (h("span", { class: "text-input__stepper" },
+          h("button", { "aria-hidden": "true", class: "text-input__step-button", onClick: this.increaseValue, tabIndex: -1, type: "button" },
+            h("flip-icon-expand-less", null)),
+          h("button", { "aria-hidden": "true", class: "text-input__step-button", onClick: this.decreaseValue, tabIndex: -1, type: "button" },
+            h("flip-icon-expand-more", null)))),
+        this.showCharacterCounter && (h("span", { class: "text-input__character-counter" },
+          ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0,
+          " ",
+          Boolean(this.maxLength) ? `/ ${this.maxLength}` : "")))));
+  }
+  static get is() { return "flip-text-input"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-text-input.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-text-input.css"]
+  }; }
+  static get properties() { return {
+    "autoComplete": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "auto-complete",
+      "reflect": false,
+      "defaultValue": "\"on\""
+    },
+    "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
+    },
+    "clearable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "clearable",
+      "reflect": false
+    },
+    "clearButtonLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "clear-button-label",
+      "reflect": false,
+      "defaultValue": "\"Clear input\""
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disabled",
+      "reflect": false
+    },
+    "flipAriaDescribedby": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "flip-aria-describedby",
+      "reflect": false
+    },
+    "invalid": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "invalid",
+      "reflect": false
+    },
+    "maxLength": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "max-length",
+      "reflect": false
+    },
+    "max": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "max",
+      "reflect": false
+    },
+    "min": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "min",
+      "reflect": false
+    },
+    "mode": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "FlipTextInputMode",
+        "resolved": "\"decimal\" | \"email\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\"",
+        "references": {
+          "FlipTextInputMode": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "mode",
+      "reflect": false
+    },
+    "prefixLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "prefix-label",
+      "reflect": false
+    },
+    "required": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "required",
+      "reflect": false
+    },
+    "rows": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "rows",
+      "reflect": false,
+      "defaultValue": "1"
+    },
+    "showCharacterCounter": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "show-character-counter",
+      "reflect": false
+    },
+    "spellCheck": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "spell-check",
+      "reflect": false
+    },
+    "suffixLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "suffix-label",
+      "reflect": false
+    },
+    "step": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "step",
+      "reflect": false
+    },
+    "passwordToggleLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "password-toggle-label",
+      "reflect": false,
+      "defaultValue": "\"Toggle password display\""
+    },
+    "type": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "FlipTextInputType",
+        "resolved": "\"date\" | \"datetime-local\" | \"email\" | \"number\" | \"password\" | \"reset\" | \"tel\" | \"text\" | \"url\"",
+        "references": {
+          "FlipTextInputType": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "type",
+      "reflect": false,
+      "defaultValue": "\"text\""
+    },
+    "value": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "value",
+      "reflect": true
+    }
+  }; }
+  static get states() { return {
+    "showPassword": {}
+  }; }
+  static get events() { return [{
+      "method": "valueChange",
+      "name": "valueChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }]; }
+}
+//# sourceMappingURL=flip-text-input.js.map

package/dist/collection/components/flip-text-input/flip-text-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-text-input.js","sourceRoot":"","sources":["../../../../src/components/flip-text-input/flip-text-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n} from \"@stencil/core\";\nimport classnames from \"classnames\";\nimport { FlipFormInput } from \"../../utils\";\n\nexport type FlipTextInputType =\n  | \"date\"\n  | \"datetime-local\"\n  | \"email\"\n  | \"number\"\n  | \"password\"\n  | \"reset\"\n  | \"tel\"\n  | \"text\"\n  | \"url\";\n\nexport type FlipTextInputMode =\n  | \"decimal\"\n  | \"email\"\n  | \"numeric\"\n  | \"search\"\n  | \"tel\"\n  | \"text\"\n  | \"url\";\n\n@Component({\n  /**\n   * Form controls in shadow dom can still not be associated with labels in the\n   * light dom, cross browser. So for now we disable shadow dom for form\n   * controls (inputs, buttons, selects, etc.). Instead we use Stencil's scoping.\n   * https://caniuse.com/?search=attachInternals\n   */\n  scoped: true,\n  shadow: false,\n  styleUrl: \"flip-text-input.css\",\n  tag: \"flip-text-input\",\n})\nexport class FlipTextInput implements FlipFormInput {\n  @Prop() autoComplete?: string = \"on\";\n  @Prop() autoFocus?: boolean;\n  @Prop() autoSelect?: boolean;\n  @Prop() clearable?: boolean;\n  @Prop() clearButtonLabel?: string = \"Clear input\";\n  @Prop() disabled?: boolean;\n  @Prop() flipAriaDescribedby?: string;\n  @Prop() invalid?: boolean;\n  @Prop() maxLength?: number;\n  @Prop() max?: number;\n  @Prop() min?: number;\n  @Prop() mode?: FlipTextInputMode;\n  @Prop() prefixLabel?: string;\n  @Prop() required?: boolean;\n  @Prop() rows?: number = 1;\n  @Prop() showCharacterCounter?: boolean;\n  @Prop() spellCheck?: boolean;\n  @Prop() suffixLabel?: string;\n  @Prop() step?: number;\n  @Prop() passwordToggleLabel?: string = \"Toggle password display\";\n  @Prop() type?: FlipTextInputType = \"text\";\n  @Prop({ mutable: true, reflect: true }) value?: string;\n\n  @State() showPassword = false;\n\n  @Event() valueChange: EventEmitter<string>;\n\n  private inputEl: HTMLInputElement;\n\n  componentDidRender() {\n    this.adjustInputSize();\n  }\n\n  private adjustInputSize() {\n    if (this.rows > 1) {\n      this.inputEl.style.width = \"\";\n      this.inputEl.style.height = \"\";\n      this.inputEl.style.height = this.inputEl.scrollHeight / 16 + \"rem\";\n    }\n\n    if (this.rows === 1) {\n      this.inputEl.style.height = \"\";\n      this.inputEl.style.width = \"\";\n\n      if (this.type !== \"password\") {\n        this.inputEl.style.width = this.inputEl.scrollWidth / 16 + \"rem\";\n      }\n    }\n  }\n\n  private clear = () => {\n    this.inputEl.value = \"\";\n    this.value = \"\";\n    this.valueChange.emit(\"\");\n    this.inputEl.focus();\n  };\n\n  private onChange = (event: Event) => {\n    const el = event.target as HTMLInputElement;\n\n    this.value = el.value;\n    this.valueChange.emit(el.value);\n  };\n\n  private onFocus = (event: FocusEvent) => {\n    this.handleAutoSelect(event);\n  };\n\n  private onInput = (event: InputEvent) => {\n    this.onChange(event);\n  };\n\n  private onKeyPress = (event: KeyboardEvent) => {\n    if (this.type !== \"number\") {\n      return;\n    }\n\n    if ([\"+\", \"-\", \"e\"].includes(event.key)) {\n      event.preventDefault();\n    }\n  };\n\n  private decreaseValue = () => {\n    if (this.type !== \"number\") {\n      return;\n    }\n    const step = this.step || 1;\n    const currentValue = isNaN(this.inputEl.valueAsNumber)\n      ? this.min !== undefined\n        ? this.min + 1\n        : 1\n      : this.inputEl.valueAsNumber;\n\n    this.value = String(Math.max(this.min || -Infinity, currentValue - step));\n    this.valueChange.emit(this.value);\n  };\n\n  private increaseValue = () => {\n    if (this.type !== \"number\") {\n      return;\n    }\n\n    const step = this.step || 1;\n    const currentValue = isNaN(this.inputEl.valueAsNumber)\n      ? this.min !== undefined\n        ? this.min - 1\n        : -1\n      : this.inputEl.valueAsNumber;\n\n    this.value = String(Math.min(this.max || Infinity, currentValue + step));\n    this.valueChange.emit(this.value);\n  };\n\n  private handleAutoSelect(event: FocusEvent) {\n    if (!this.autoSelect) {\n      return;\n    }\n\n    (event.target as HTMLInputElement).select();\n  }\n\n  private togglePassword = () => {\n    if (this.type !== \"password\") {\n      return;\n    }\n\n    this.showPassword = !this.showPassword;\n  };\n\n  render() {\n    const Tag = this.rows === 1 ? \"input\" : \"textarea\";\n\n    const ariaInvalid =\n      this.invalid === true\n        ? \"true\"\n        : this.invalid === false\n        ? \"false\"\n        : undefined;\n\n    const showStepper = this.type === \"number\" && !this.disabled;\n    const showPasswordToggle = this.type === \"password\" && !this.disabled;\n\n    const showClearButton =\n      this.clearable &&\n      !this.disabled &&\n      Boolean(this.value) &&\n      !showPasswordToggle &&\n      !showStepper &&\n      !this.showCharacterCounter;\n\n    const type =\n      this.type === \"password\" && this.showPassword ? \"text\" : this.type;\n\n    const className = classnames(\n      \"text-input\",\n      `text-input--type-${this.type}`,\n      {\n        \"text-input--clearable\": this.clearable,\n        \"text-input--disabled\": this.disabled,\n        \"text-input--show-password\":\n          this.type === \"password\" && this.showPassword,\n      }\n    );\n\n    return (\n      <Host>\n        <div class={className}>\n          {this.prefixLabel && (\n            <span class=\"text-input__prefix\">{this.prefixLabel}</span>\n          )}\n          <Tag\n            aria-describedby={this.flipAriaDescribedby}\n            aria-disabled={this.disabled ? \"true\" : undefined}\n            aria-invalid={ariaInvalid}\n            autoComplete={this.autoComplete}\n            autoFocus={this.autoFocus}\n            class=\"text-input__input\"\n            disabled={this.disabled}\n            inputMode={this.mode}\n            maxLength={this.maxLength}\n            max={this.type === \"number\" ? this.max : undefined}\n            min={this.type === \"number\" ? this.min : undefined}\n            onFocus={this.onFocus}\n            onInput={this.onInput}\n            onKeyPress={this.onKeyPress}\n            ref={(el) => (this.inputEl = el)}\n            required={this.required}\n            rows={this.rows > 1 ? this.rows : undefined}\n            spellcheck={this.spellCheck}\n            step={this.type === \"number\" ? this.step : undefined}\n            type={type}\n            value={this.rows === 1 ? this.value : undefined}\n          >\n            {this.rows > 1 && this.value}\n          </Tag>\n          {this.suffixLabel && (\n            <span class=\"text-input__suffix\">{this.suffixLabel}</span>\n          )}\n          {showClearButton && (\n            <button\n              aria-label={this.clearButtonLabel}\n              class=\"text-input__clear-button\"\n              onClick={this.clear}\n              type=\"button\"\n            >\n              <flip-icon-cancel></flip-icon-cancel>\n            </button>\n          )}\n          {showPasswordToggle && (\n            <button\n              aria-label={this.passwordToggleLabel}\n              class=\"text-input__password-toggle\"\n              onClick={this.togglePassword}\n              type=\"button\"\n            >\n              {this.showPassword ? (\n                <flip-icon-visibility-off></flip-icon-visibility-off>\n              ) : (\n                <flip-icon-visibility></flip-icon-visibility>\n              )}\n            </button>\n          )}\n          {showStepper && (\n            <span class=\"text-input__stepper\">\n              <button\n                aria-hidden=\"true\"\n                class=\"text-input__step-button\"\n                onClick={this.increaseValue}\n                tabIndex={-1}\n                type=\"button\"\n              >\n                <flip-icon-expand-less></flip-icon-expand-less>\n              </button>\n              <button\n                aria-hidden=\"true\"\n                class=\"text-input__step-button\"\n                onClick={this.decreaseValue}\n                tabIndex={-1}\n                type=\"button\"\n              >\n                <flip-icon-expand-more></flip-icon-expand-more>\n              </button>\n            </span>\n          )}\n          {this.showCharacterCounter && (\n            <span class=\"text-input__character-counter\">\n              {this.value?.length || 0}{\" \"}\n              {Boolean(this.maxLength) ? `/ ${this.maxLength}` : \"\"}\n            </span>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/flip-text-input/flip-text-input.stories.js

@@ -0,0 +1,20 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./flip-text-input.mdx";
+export default {
+  component: "flip-text-input",
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/FlipTextInput",
+};
+const Template = (args) => {
+  const element = generateStoryElement("flip-text-input", args);
+  return element;
+};
+export const FlipTextInput = Template.bind({});
+FlipTextInput.args = {
+  value: "Value",
+};
+//# sourceMappingURL=flip-text-input.stories.js.map

package/dist/collection/components/flip-text-input/flip-text-input.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-text-input.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-text-input/flip-text-input.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,IAAI,MAAM,uBAAuB,CAAC;AAEzC,eAAe;EACb,SAAS,EAAE,iBAAiB;EAC5B,UAAU,EAAE;IACV,IAAI,EAAE;MACJ,IAAI,EAAE,IAAI;KACX;GACF;EACD,KAAK,EAAE,0BAA0B;CAClC,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;EACxB,MAAM,OAAO,GAAG,oBAAoB,CAAC,iBAAiB,EAAE,IAAI,CAAC,CAAC;EAE9D,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE/C,aAAa,CAAC,IAAI,GAAG;EACnB,KAAK,EAAE,OAAO;CACf,CAAC","sourcesContent":["import { generateStoryElement } from \"../../utils\";\nimport Docs from \"./flip-text-input.mdx\";\n\nexport default {\n  component: \"flip-text-input\",\n  parameters: {\n    docs: {\n      page: Docs,\n    },\n  },\n  title: \"Components/FlipTextInput\",\n};\n\nconst Template = (args) => {\n  const element = generateStoryElement(\"flip-text-input\", args);\n\n  return element;\n};\n\nexport const FlipTextInput = Template.bind({});\n\nFlipTextInput.args = {\n  value: \"Value\",\n};\n"]}

package/dist/collection/components/flip-theme-provider/flip-theme-provider.js

@@ -251,3 +251,4 @@ export class FlipThemeProvider {
       "methodName": "watchConfig"
     }]; }
 }
+//# sourceMappingURL=flip-theme-provider.js.map

package/dist/collection/components/flip-theme-provider/flip-theme-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-theme-provider.js","sourceRoot":"","sources":["../../../../src/components/flip-theme-provider/flip-theme-provider.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Host, Method, Prop, Watch } from \"@stencil/core\";\nimport { hsla, parseToHsla, toRgba } from \"color2k\";\nexport type FlipTheme = \"light\" | \"dark\";\n\nexport type FlipThemeProviderStorage = {\n  getItem: (key: string) => string;\n  removeItem: (key: string) => void;\n  setItem: (key: string, value: string) => void;\n};\n\nexport type FlipThemeProviderTenantColors = {\n  primary?: string;\n  primaryContrast?: string;\n  secondary?: string;\n  secondaryContrast?: string;\n  text?: string;\n};\n\nexport type FlipThemeProviderConfig = {\n  rootElement?: HTMLElement;\n  storage?: FlipThemeProviderStorage;\n  tenantColors?: FlipThemeProviderTenantColors;\n};\n\nconst preferredThemeStorageKey = \"flip-preferred-theme\";\n\nconst tenantColorMapping = {\n  \"--s-action-primary-default\": \"primary\",\n  \"--s-action-primary-hovered\": \"primaryHovered\",\n  \"--s-action-primary-pressed\": \"primaryPressed\",\n  \"--s-text-on-action-primary\": \"primaryContrast\",\n  \"--s-icon-on-action-primary\": \"primaryContrast\",\n  \"--s-surface-highlight-default\": \"secondary\",\n  \"--s-surface-highlight-hovered\": \"secondaryHovered\",\n  \"--s-surface-highlight-pressed\": \"secondaryPressed\",\n  \"--s-on-surface-highlight-default\": \"secondaryHovered\",\n  \"--s-text-on-surface-highlight\": \"secondaryContrast\",\n  \"--s-icon-on-surface-highlight\": \"secondaryContrast\",\n  \"--s-text-highlight\": \"text\",\n  \"--s-interactive-primary-default\": \"text\",\n  \"--s-interactive-primary-hovered\": \"textHovered\",\n  \"--s-interactive-primary-pressed\": \"textPressed\",\n};\n\n@Component({\n  scoped: true,\n  styleUrl: \"flip-theme-provider.css\",\n  tag: \"flip-theme-provider\",\n})\nexport class FlipThemeProvider {\n  @Prop() config: FlipThemeProviderConfig;\n\n  private appTheme: FlipTheme;\n  private osTheme: FlipTheme;\n  private resolvedConfig: FlipThemeProviderConfig;\n\n  componentWillLoad() {\n    this.resolveConfig();\n    this.determineOSTheme();\n    this.updateAppTheme();\n  }\n\n  @Watch(\"config\")\n  watchConfig() {\n    this.resolveConfig();\n    this.determineOSTheme();\n    this.updateAppTheme();\n  }\n\n  /**\n   * Returns the active app theme.\n   * @returns FlipTheme\n   */\n  @Method()\n  async getActiveTheme() {\n    return this.appTheme;\n  }\n\n  /**\n   * Returns the user's preferred theme stored in local storage.\n   * @returns FlipTheme\n   */\n  @Method()\n  async getPreferredTheme() {\n    if (!Boolean(this.resolvedConfig.storage)) {\n      return;\n    }\n\n    return this.resolvedConfig.storage.getItem(\n      preferredThemeStorageKey\n    ) as FlipTheme | null;\n  }\n\n  /**\n   * Sets the user's preferred theme and stores it in local storage. Overrides\n   * the OS theme.\n   */\n  @Method()\n  async setPreferredTheme(theme: FlipTheme) {\n    if (!Boolean(this.resolvedConfig.storage)) {\n      return;\n    }\n\n    this.resolvedConfig.storage.setItem(preferredThemeStorageKey, theme);\n\n    this.updateAppTheme();\n  }\n\n  /**\n   * Resets the user's preferred theme, using the OS theme instead.\n   */\n  @Method()\n  async resetPreferredTheme() {\n    if (!Boolean(this.resolvedConfig.storage)) {\n      return;\n    }\n\n    this.resolvedConfig.storage.removeItem(preferredThemeStorageKey);\n\n    this.updateAppTheme();\n  }\n\n  private resolveConfig() {\n    this.resolvedConfig = {\n      ...(this.config || {}),\n      rootElement: this.config?.rootElement || document.documentElement,\n      storage: this.config?.storage || window?.localStorage,\n    };\n  }\n\n  private determineOSTheme() {\n    if (!Boolean(window.matchMedia)) {\n      this.osTheme = \"light\";\n      return;\n    }\n\n    const darkThemeMediaQuery = window.matchMedia(\n      \"(prefers-color-scheme: dark)\"\n    );\n\n    this.osTheme = darkThemeMediaQuery.matches ? \"dark\" : \"light\";\n\n    darkThemeMediaQuery.addEventListener(\"change\", (e) => {\n      this.osTheme = e.matches ? \"dark\" : \"light\";\n\n      this.updateAppTheme();\n    });\n  }\n\n  private async updateAppTheme() {\n    this.appTheme = (await this.getPreferredTheme()) || this.osTheme;\n\n    if (this.appTheme === \"dark\") {\n      document.documentElement.classList.remove(\"theme-light\");\n      document.documentElement.classList.add(\"theme-dark\");\n    } else {\n      document.documentElement.classList.remove(\"theme-dark\");\n      document.documentElement.classList.add(\"theme-light\");\n    }\n\n    this.updateTenantVariables();\n  }\n\n  private updateTenantVariables() {\n    const tenantTheme = this.resolvedConfig?.tenantColors;\n\n    if (!Boolean(tenantTheme)) {\n      this.resetTenantVariables();\n      return;\n    }\n\n    const rootElement = this.resolvedConfig.rootElement;\n\n    // generate state colors (hovered, pressed) from base colors\n    const primaryHsla = parseToHsla(tenantTheme.primary);\n    const secondaryHsla = parseToHsla(tenantTheme.secondary);\n    const textHsla = parseToHsla(tenantTheme.text);\n\n    const primaryHovered = toRgba(\n      hsla(primaryHsla[0], primaryHsla[1] - 0.21, primaryHsla[2] + 0.09, 1)\n    );\n    const primaryPressed = toRgba(\n      hsla(primaryHsla[0], primaryHsla[1] - 0.2, primaryHsla[2] + 0.17, 1)\n    );\n\n    const secondaryHovered = toRgba(\n      hsla(secondaryHsla[0], secondaryHsla[1], secondaryHsla[2] + 0.07, 1)\n    );\n    const secondaryPressed = toRgba(\n      hsla(secondaryHsla[0], secondaryHsla[1], secondaryHsla[2] + 0.15, 1)\n    );\n\n    const textHovered = toRgba(\n      hsla(textHsla[0], textHsla[1] - 0.34, textHsla[2] + 0.1, 1)\n    );\n    const textPressed = toRgba(\n      hsla(textHsla[0], textHsla[1] - 0.48, textHsla[2] + 0.2, 1)\n    );\n\n    const tenantThemeWithGeneratedStateColors: FlipThemeProviderTenantColors & {\n      [key: string]: string;\n    } = {\n      ...tenantTheme,\n      primaryHovered: primaryHovered,\n      primaryPressed: primaryPressed,\n      secondaryHovered: secondaryHovered,\n      secondaryPressed: secondaryPressed,\n      textHovered: textHovered,\n      textPressed: textPressed,\n    };\n\n    // set custom properties for tenant theme colors\n    Object.entries(tenantColorMapping).forEach(([key, value]) =>\n      rootElement.style.setProperty(\n        key,\n        tenantThemeWithGeneratedStateColors[value]\n      )\n    );\n  }\n\n  private resetTenantVariables() {\n    const rootElement = this.resolvedConfig.rootElement;\n\n    [\n      ...Object.keys(tenantColorMapping),\n      \"primaryHovered\",\n      \"primaryPressed\",\n      \"secondaryHovered\",\n      \"secondaryPressed\",\n      \"textHovered\",\n      \"textPressed\",\n    ].forEach((key) => rootElement.style.removeProperty(key));\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/flip-theme-provider/flip-theme-provider.stories.js

@@ -78,3 +78,4 @@ const Template = (args) => {
 };
 export const FlipThemeProvider = Template.bind({});
 FlipThemeProvider.args = {};
+//# sourceMappingURL=flip-theme-provider.stories.js.map

package/dist/collection/components/flip-theme-provider/flip-theme-provider.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-theme-provider.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-theme-provider/flip-theme-provider.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { generateStoryElement } from \"../../utils\";\nimport Docs from \"./flip-theme-provider.mdx\";\n\nexport default {\n  component: \"flip-theme-provider\",\n  parameters: {\n    docs: {\n      inlineStories: false,\n      page: Docs,\n      source: {\n        code: `<flip-theme-provider>\n  <!-- Your app components … -->\n</flip-theme-provider>\n\n<script>\n  const provider = document.querySelector('flip-theme-provider');\n\n  provider.config = {\n    tenantColors: {\n      primary: \"rgba(184, 42, 32, 1)\",\n      primaryContrast: \"rgba(255, 255, 255, 1)\",\n      secondary: \"rgba(184, 42, 32, 1)\",\n      secondaryContrast: \"rgba(255, 255, 255, 1)\",\n      text: \"rgba(218, 31, 61, 1)\",\n    }\n  };\n\n  provider.setPreferredTheme('dark');\n</script>`,\n      },\n    },\n  },\n  title: \"Components/FlipThemeProvider\",\n};\n\nconst Template = (args) => {\n  const element = generateStoryElement(\n    \"flip-theme-provider\",\n    args\n  ) as HTMLFlipThemeProviderElement;\n\n  const config = {\n    tenantColors: {\n      primary: \"rgba(184, 42, 32, 1)\",\n      primaryContrast: \"rgba(255, 255, 255, 1)\",\n      secondary: \"rgba(184, 42, 32, 1)\",\n      secondaryContrast: \"rgba(255, 255, 255, 1)\",\n      text: \"rgba(218, 31, 61, 1)\",\n    },\n  };\n\n  const lightModeButton = document.createElement(\"flip-button\");\n  lightModeButton.intent = \"primary\";\n  lightModeButton.variant = \"flat\";\n  lightModeButton.label = \"Set light mode\";\n  lightModeButton.style.marginRight = \"1rem\";\n  lightModeButton.addEventListener(\"click\", () => {\n    element.setPreferredTheme(\"light\");\n  });\n\n  const darkModeButton = document.createElement(\"flip-button\");\n  darkModeButton.intent = \"primary\";\n  darkModeButton.variant = \"flat\";\n  darkModeButton.label = \"Set dark mode\";\n  darkModeButton.style.marginRight = \"1rem\";\n  darkModeButton.addEventListener(\"click\", () => {\n    element.setPreferredTheme(\"dark\");\n  });\n\n  const tenantButton = document.createElement(\"flip-button\");\n  tenantButton.intent = \"primary\";\n  tenantButton.variant = \"flat\";\n  tenantButton.label = \"Set tenant theme\";\n  tenantButton.style.marginRight = \"1rem\";\n  tenantButton.addEventListener(\"click\", () => {\n    element.config = config;\n  });\n\n  const resetButton = document.createElement(\"flip-button\");\n  resetButton.label = \"Reset\";\n  resetButton.style.marginRight = \"1rem\";\n  resetButton.addEventListener(\"click\", () => {\n    element.config = { tenantColors: undefined };\n    element.resetPreferredTheme();\n  });\n\n  element.append(lightModeButton, darkModeButton, tenantButton, resetButton);\n\n  return element;\n};\n\nexport const FlipThemeProvider = Template.bind({});\n\nFlipThemeProvider.args = {};\n"]}

package/dist/collection/components/flip-thumbnail/flip-thumbnail.js

@@ -100,3 +100,4 @@ export class FlipThumbnail {
     }
   }; }
 }
+//# sourceMappingURL=flip-thumbnail.js.map