@getflip/swirl-components 0.2.0 → 0.3.0

package/dist/collection/components/flip-file-viewer/viewers/flip-file-viewer-text/flip-file-viewer-text.js

@@ -0,0 +1,84 @@
+import { Component, h, Host, Prop, State, Watch } from "@stencil/core";
+export class FlipFileViewerText {
+  constructor() {
+    this.errorMessage = "File could not be loaded.";
+  }
+  componentWillLoad() {
+    this.updateText();
+  }
+  async updateText() {
+    this.error = false;
+    this.loading = true;
+    try {
+      const response = await fetch(this.file);
+      this.text = await response.text();
+      this.loading = false;
+    }
+    catch (e) {
+      this.loading = false;
+      this.error = true;
+    }
+  }
+  render() {
+    return (h(Host, { class: "file-viewer-text" },
+      this.error && (h("flip-inline-error", { class: "file-viewer-text__error", message: this.errorMessage })),
+      h("pre", { class: "file-viewer-text__text", tabIndex: 0 }, this.text),
+      this.loading && (h("div", { class: "file-viewer-text__spinner" },
+        h("flip-spinner", null)))));
+  }
+  static get is() { return "flip-file-viewer-text"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-file-viewer-text.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-file-viewer-text.css"]
+  }; }
+  static get properties() { return {
+    "errorMessage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "error-message",
+      "reflect": false,
+      "defaultValue": "\"File could not be loaded.\""
+    },
+    "file": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "file",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "error": {},
+    "loading": {},
+    "text": {}
+  }; }
+  static get watchers() { return [{
+      "propName": "file",
+      "methodName": "updateText"
+    }]; }
+}
+//# sourceMappingURL=flip-file-viewer-text.js.map

package/dist/collection/components/flip-file-viewer/viewers/flip-file-viewer-text/flip-file-viewer-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-file-viewer-text.js","sourceRoot":"","sources":["../../../../../../src/components/flip-file-viewer/viewers/flip-file-viewer-text/flip-file-viewer-text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAOvE,MAAM,OAAO,kBAAkB;EAL/B;IAMU,iBAAY,GAAY,2BAA2B,CAAC;GA+C7D;EAxCC,iBAAiB;IACf,IAAI,CAAC,UAAU,EAAE,CAAC;EACpB,CAAC;EAGD,KAAK,CAAC,UAAU;IACd,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;IACnB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;IAEpB,IAAI;MACF,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;MAExC,IAAI,CAAC,IAAI,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;MAClC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;KACtB;IAAC,OAAO,CAAC,EAAE;MACV,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;MACrB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;KACnB;EACH,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAC,kBAAkB;MAC3B,IAAI,CAAC,KAAK,IAAI,CACb,yBACE,KAAK,EAAC,yBAAyB,EAC/B,OAAO,EAAE,IAAI,CAAC,YAAY,GACP,CACtB;MACD,WAAK,KAAK,EAAC,wBAAwB,EAAC,QAAQ,EAAE,CAAC,IAC5C,IAAI,CAAC,IAAI,CACN;MACL,IAAI,CAAC,OAAO,IAAI,CACf,WAAK,KAAK,EAAC,2BAA2B;QACpC,uBAA6B,CACzB,CACP,CACI,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop, State, Watch } from \"@stencil/core\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-file-viewer-text.css\",\n  tag: \"flip-file-viewer-text\",\n})\nexport class FlipFileViewerText {\n  @Prop() errorMessage?: string = \"File could not be loaded.\";\n  @Prop() file!: string;\n\n  @State() error: boolean;\n  @State() loading: boolean;\n  @State() text: string;\n\n  componentWillLoad() {\n    this.updateText();\n  }\n\n  @Watch(\"file\")\n  async updateText() {\n    this.error = false;\n    this.loading = true;\n\n    try {\n      const response = await fetch(this.file);\n\n      this.text = await response.text();\n      this.loading = false;\n    } catch (e) {\n      this.loading = false;\n      this.error = true;\n    }\n  }\n\n  render() {\n    return (\n      <Host class=\"file-viewer-text\">\n        {this.error && (\n          <flip-inline-error\n            class=\"file-viewer-text__error\"\n            message={this.errorMessage}\n          ></flip-inline-error>\n        )}\n        <pre class=\"file-viewer-text__text\" tabIndex={0}>\n          {this.text}\n        </pre>\n        {this.loading && (\n          <div class=\"file-viewer-text__spinner\">\n            <flip-spinner></flip-spinner>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/flip-file-viewer/viewers/flip-file-viewer-video/flip-file-viewer-video.css

@@ -0,0 +1,14 @@
+:host {
+  display: inline-flex;
+  width: 100%;
+  height: 100%;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.file-viewer-video__video {
+  width: 100%;
+  height: 100%;
+}

package/dist/collection/components/flip-file-viewer/viewers/flip-file-viewer-video/flip-file-viewer-video.js

@@ -0,0 +1,53 @@
+import { Component, h, Host, Prop } from "@stencil/core";
+export class FlipFileViewerVideo {
+  render() {
+    return (h(Host, { class: "file-viewer-video" },
+      h("video", { class: "file-viewer-video__video", controls: true },
+        h("source", { src: this.file, type: this.type }))));
+  }
+  static get is() { return "flip-file-viewer-video"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-file-viewer-video.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-file-viewer-video.css"]
+  }; }
+  static get properties() { return {
+    "file": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "file",
+      "reflect": false
+    },
+    "type": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "type",
+      "reflect": false
+    }
+  }; }
+}
+//# sourceMappingURL=flip-file-viewer-video.js.map

package/dist/collection/components/flip-file-viewer/viewers/flip-file-viewer-video/flip-file-viewer-video.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-file-viewer-video.js","sourceRoot":"","sources":["../../../../../../src/components/flip-file-viewer/viewers/flip-file-viewer-video/flip-file-viewer-video.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,mBAAmB;EAI9B,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAC,mBAAmB;MAC7B,aAAO,KAAK,EAAC,0BAA0B,EAAC,QAAQ;QAC9C,cAAQ,GAAG,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAW,CAC5C,CACH,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from \"@stencil/core\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-file-viewer-video.css\",\n  tag: \"flip-file-viewer-video\",\n})\nexport class FlipFileViewerVideo {\n  @Prop() file!: string;\n  @Prop() type!: string;\n\n  render() {\n    return (\n      <Host class=\"file-viewer-video\">\n        <video class=\"file-viewer-video__video\" controls>\n          <source src={this.file} type={this.type}></source>\n        </video>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/flip-form-control/flip-form-control.css

@@ -0,0 +1,89 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.form-control {
+  display: block;
+  width: 100%;
+  line-height: var(--s-line-height-sm);
+}
+
+.form-control.form-control--has-focus:not(.form-control--disabled) .form-control__label {
+      border-color: var(--s-border-highlight);
+      box-shadow: 0 0 0 var(--s-border-width-default) var(--s-border-highlight);
+    }
+
+.form-control:not(.form-control--has-value):not(.form-control--has-focus) .form-control__input {
+      overflow: hidden;
+      max-height: 0;
+    }
+
+.form-control:not(.form-control--has-value):not(.form-control--has-focus) .form-control__label-text {
+      bottom: 50%;
+      font-size: var(--s-font-size-base);
+      transform: translateY(50%);
+    }
+
+.form-control--invalid.form-control--has-focus:not(.form-control--disabled) .form-control__label {
+      border-color: var(--s-border-critical);
+      box-shadow: 0 0 0 var(--s-border-width-default) var(--s-border-critical);
+    }
+
+.form-control--invalid .form-control__label {
+    border-color: var(--s-border-critical);
+  }
+
+.form-control--disabled .form-control__label {
+    border-color: var(--s-border-disabled);
+    color: var(--s-text-disabled);
+  }
+
+.form-control--disabled .form-control__description {
+    color: var(--s-text-disabled);
+  }
+
+.form-control__label {
+  position: relative;
+  display: flex;
+  width: 100%;
+  min-height: 4.375rem;
+  padding: calc(var(--s-space-12) + 1.25rem) var(--s-space-16) var(--s-space-12);
+  justify-content: center;
+  border: var(--s-border-width-default) solid var(--s-border-strong);
+  border-radius: var(--s-border-radius-sm);
+  color: var(--s-text-subdued);
+  flex-direction: column;
+  gap: var(--s-space-2);
+}
+
+.form-control__label-text {
+  position: absolute;
+  right: var(--s-space-16);
+  bottom: calc(100% - 1.25rem - var(--s-space-12));
+  left: var(--s-space-16);
+  overflow: hidden;
+  font-size: var(--s-font-size-sm);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  transition: font-size 0.15s, transform 0.15s, top 0.15s;
+  transform: none;
+}
+
+.form-control__description {
+  display: block;
+  margin-top: var(--s-space-4);
+  padding-left: var(--s-space-4);
+  color: var(--s-text-subdued);
+  font-size: var(--s-font-size-sm);
+}
+
+.form-control__error-message {
+  display: block;
+  margin-top: var(--s-space-4);
+  padding-left: var(--s-space-4);
+}

package/dist/collection/components/flip-form-control/flip-form-control.js

@@ -0,0 +1,205 @@
+import { Component, Element, h, Host, Listen, Prop, State, Watch, } from "@stencil/core";
+import classnames from "classnames";
+/**
+ * @slot slot - The input element, e.g. `<flip-text-input></flip-text-input>`
+ */
+export class FlipFormControl {
+  constructor() {
+    this.descriptionId = `form-control-description-${Math.round(Math.random() * 100000)}`;
+    this.listenToInputValueChanges = () => {
+      this.inputEl.addEventListener("valueChange", this.checkInputValue);
+    };
+    this.checkInputValue = () => {
+      var _a;
+      this.inputValue = (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.value;
+    };
+    this.onFocusIn = () => {
+      this.hasFocus = true;
+    };
+    this.onFocusOut = (event) => {
+      if (Boolean(event.relatedTarget)) {
+        this.hasFocus = false;
+      }
+    };
+  }
+  componentWillLoad() {
+    this.inputEl = this.el.children[0];
+    this.associateDescriptionWithInputElement();
+    this.setInputElementDisabledState();
+    this.setInputElementInvalidState();
+    this.checkInputValue();
+    this.listenToInputValueChanges();
+  }
+  associateDescriptionWithInputElement() {
+    if (!Boolean(this.description) || !Boolean(this.inputEl)) {
+      return;
+    }
+    this.inputEl.setAttribute("flip-aria-describedby", this.descriptionId);
+  }
+  setInputElementDisabledState() {
+    if (!Boolean(this.inputEl)) {
+      return;
+    }
+    if (this.disabled) {
+      this.inputEl.setAttribute("disabled", "true");
+    }
+    else {
+      this.inputEl.removeAttribute("disabled");
+    }
+  }
+  setInputElementInvalidState() {
+    if (!Boolean(this.inputEl)) {
+      return;
+    }
+    if (this.invalid) {
+      this.inputEl.setAttribute("invalid", "true");
+    }
+    else {
+      this.inputEl.removeAttribute("invalid");
+    }
+  }
+  onWindowClick(event) {
+    const target = event.target;
+    if (this.el.contains(target)) {
+      return;
+    }
+    this.hasFocus = false;
+  }
+  render() {
+    const showErrorMessage = Boolean(this.errorMessage);
+    const showDescription = Boolean(this.description) && !showErrorMessage;
+    const className = classnames("form-control", {
+      "form-control--disabled": this.disabled,
+      "form-control--has-focus": this.hasFocus,
+      "form-control--has-value": Boolean(this.inputValue),
+      "form-control--invalid": this.invalid,
+    });
+    return (h(Host, { onFocusin: this.onFocusIn, onFocusout: this.onFocusOut },
+      h("div", { class: className, role: "group" },
+        h("label", { class: "form-control__label" },
+          h("span", { class: "form-control__label-text" }, this.label),
+          h("span", { class: "form-control__input" },
+            h("slot", null))),
+        showDescription && (h("span", { class: "form-control__description", id: this.descriptionId }, this.description)),
+        showErrorMessage && (h("span", { "aria-live": "polite", class: "form-control__error-message", id: this.descriptionId },
+          h("flip-inline-error", { message: this.errorMessage, size: "s" }))))));
+  }
+  static get is() { return "flip-form-control"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-form-control.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-form-control.css"]
+  }; }
+  static get properties() { return {
+    "description": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "description",
+      "reflect": false
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disabled",
+      "reflect": false
+    },
+    "errorMessage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "error-message",
+      "reflect": false
+    },
+    "invalid": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "invalid",
+      "reflect": false
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "hasFocus": {},
+    "inputValue": {}
+  }; }
+  static get elementRef() { return "el"; }
+  static get watchers() { return [{
+      "propName": "description",
+      "methodName": "associateDescriptionWithInputElement"
+    }, {
+      "propName": "disabled",
+      "methodName": "setInputElementDisabledState"
+    }, {
+      "propName": "invalid",
+      "methodName": "setInputElementInvalidState"
+    }]; }
+  static get listeners() { return [{
+      "name": "click",
+      "method": "onWindowClick",
+      "target": "window",
+      "capture": false,
+      "passive": false
+    }]; }
+}
+//# sourceMappingURL=flip-form-control.js.map

package/dist/collection/components/flip-form-control/flip-form-control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-form-control.js","sourceRoot":"","sources":["../../../../src/components/flip-form-control/flip-form-control.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from \"@stencil/core\";\nimport classnames from \"classnames\";\n\n/**\n * @slot slot - The input element, e.g. `<flip-text-input></flip-text-input>`\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-form-control.css\",\n  tag: \"flip-form-control\",\n})\nexport class FlipFormControl {\n  @Element() el: HTMLElement;\n\n  @Prop() description?: string;\n  @Prop() disabled?: boolean;\n  @Prop() errorMessage?: string;\n  @Prop() invalid?: boolean;\n  @Prop() label!: string;\n\n  @State() hasFocus: boolean;\n  @State() inputValue: string;\n\n  private descriptionId = `form-control-description-${Math.round(\n    Math.random() * 100000\n  )}`;\n\n  private inputEl: HTMLElement;\n\n  componentWillLoad() {\n    this.inputEl = this.el.children[0] as HTMLElement;\n\n    this.associateDescriptionWithInputElement();\n    this.setInputElementDisabledState();\n    this.setInputElementInvalidState();\n    this.checkInputValue();\n    this.listenToInputValueChanges();\n  }\n\n  @Watch(\"description\")\n  associateDescriptionWithInputElement() {\n    if (!Boolean(this.description) || !Boolean(this.inputEl)) {\n      return;\n    }\n\n    this.inputEl.setAttribute(\"flip-aria-describedby\", this.descriptionId);\n  }\n\n  @Watch(\"disabled\")\n  setInputElementDisabledState() {\n    if (!Boolean(this.inputEl)) {\n      return;\n    }\n\n    if (this.disabled) {\n      this.inputEl.setAttribute(\"disabled\", \"true\");\n    } else {\n      this.inputEl.removeAttribute(\"disabled\");\n    }\n  }\n\n  @Watch(\"invalid\")\n  setInputElementInvalidState() {\n    if (!Boolean(this.inputEl)) {\n      return;\n    }\n\n    if (this.invalid) {\n      this.inputEl.setAttribute(\"invalid\", \"true\");\n    } else {\n      this.inputEl.removeAttribute(\"invalid\");\n    }\n  }\n\n  @Listen(\"click\", { target: \"window\" })\n  onWindowClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n\n    if (this.el.contains(target)) {\n      return;\n    }\n\n    this.hasFocus = false;\n  }\n\n  private listenToInputValueChanges = () => {\n    this.inputEl.addEventListener(\"valueChange\", this.checkInputValue);\n  };\n\n  private checkInputValue = () => {\n    this.inputValue = (this.inputEl as HTMLInputElement)?.value;\n  };\n\n  private onFocusIn = () => {\n    this.hasFocus = true;\n  };\n\n  private onFocusOut = (event: FocusEvent) => {\n    if (Boolean(event.relatedTarget)) {\n      this.hasFocus = false;\n    }\n  };\n\n  render() {\n    const showErrorMessage = Boolean(this.errorMessage);\n    const showDescription = Boolean(this.description) && !showErrorMessage;\n\n    const className = classnames(\"form-control\", {\n      \"form-control--disabled\": this.disabled,\n      \"form-control--has-focus\": this.hasFocus,\n      \"form-control--has-value\": Boolean(this.inputValue),\n      \"form-control--invalid\": this.invalid,\n    });\n\n    return (\n      <Host onFocusin={this.onFocusIn} onFocusout={this.onFocusOut}>\n        <div class={className} role=\"group\">\n          <label class=\"form-control__label\">\n            <span class=\"form-control__label-text\">{this.label}</span>\n            <span class=\"form-control__input\">\n              <slot></slot>\n            </span>\n          </label>\n          {showDescription && (\n            <span class=\"form-control__description\" id={this.descriptionId}>\n              {this.description}\n            </span>\n          )}\n          {showErrorMessage && (\n            <span\n              aria-live=\"polite\"\n              class=\"form-control__error-message\"\n              id={this.descriptionId}\n            >\n              <flip-inline-error\n                message={this.errorMessage}\n                size=\"s\"\n              ></flip-inline-error>\n            </span>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/flip-form-control/flip-form-control.stories.js

@@ -0,0 +1,43 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./flip-form-control.mdx";
+export default {
+  component: "flip-form-control",
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/FlipFormControl",
+};
+const Template = (args) => {
+  const container = document.createElement("flip-stack");
+  container.spacing = "24";
+  const textInput = generateStoryElement("flip-form-control", args);
+  textInput.innerHTML = `
+    <flip-text-input clearable="true" type="text"></flip-text-input>
+  `;
+  const numberInput = generateStoryElement("flip-form-control", Object.assign(Object.assign({}, args), { label: "Number Control" }));
+  numberInput.innerHTML = `
+    <flip-text-input suffix-label="€" type="number"></flip-text-input>
+  `;
+  const dateInput = generateStoryElement("flip-form-control", Object.assign(Object.assign({}, args), { label: "Date Control" }));
+  dateInput.innerHTML = `
+    <flip-date-input></flip-date-input>
+  `;
+  const passwordInput = generateStoryElement("flip-form-control", Object.assign(Object.assign({}, args), { label: "Password Control" }));
+  passwordInput.innerHTML = `
+    <flip-text-input type="password"></flip-text-input>
+  `;
+  const multilineInput = generateStoryElement("flip-form-control", Object.assign(Object.assign({}, args), { label: "Multiline Control" }));
+  multilineInput.innerHTML = `
+    <flip-text-input max-length="200" show-character-counter="true" rows="5" type="text"></flip-text-input>
+  `;
+  container.append("\n  ", textInput, "\n  ", numberInput, "\n  ", dateInput, "\n  ", passwordInput, "\n  ", multilineInput, "\n");
+  return container;
+};
+export const FlipFormControl = Template.bind({});
+FlipFormControl.args = {
+  description: "Optional description of the control.",
+  label: "Form Control Label",
+};
+//# sourceMappingURL=flip-form-control.stories.js.map

package/dist/collection/components/flip-form-control/flip-form-control.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-form-control.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-form-control/flip-form-control.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,IAAI,MAAM,yBAAyB,CAAC;AAE3C,eAAe;EACb,SAAS,EAAE,mBAAmB;EAC9B,UAAU,EAAE;IACV,IAAI,EAAE;MACJ,IAAI,EAAE,IAAI;KACX;GACF;EACD,KAAK,EAAE,4BAA4B;CACpC,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;EACxB,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;EAEvD,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;EAEzB,MAAM,SAAS,GAAG,oBAAoB,CAAC,mBAAmB,EAAE,IAAI,CAAC,CAAC;EAElE,SAAS,CAAC,SAAS,GAAG;;GAErB,CAAC;EAEF,MAAM,WAAW,GAAG,oBAAoB,CAAC,mBAAmB,kCACvD,IAAI,KACP,KAAK,EAAE,gBAAgB,IACvB,CAAC;EAEH,WAAW,CAAC,SAAS,GAAG;;GAEvB,CAAC;EAEF,MAAM,SAAS,GAAG,oBAAoB,CAAC,mBAAmB,kCACrD,IAAI,KACP,KAAK,EAAE,cAAc,IACrB,CAAC;EAEH,SAAS,CAAC,SAAS,GAAG;;GAErB,CAAC;EAEF,MAAM,aAAa,GAAG,oBAAoB,CAAC,mBAAmB,kCACzD,IAAI,KACP,KAAK,EAAE,kBAAkB,IACzB,CAAC;EAEH,aAAa,CAAC,SAAS,GAAG;;GAEzB,CAAC;EAEF,MAAM,cAAc,GAAG,oBAAoB,CAAC,mBAAmB,kCAC1D,IAAI,KACP,KAAK,EAAE,mBAAmB,IAC1B,CAAC;EAEH,cAAc,CAAC,SAAS,GAAG;;GAE1B,CAAC;EAEF,SAAS,CAAC,MAAM,CACd,MAAM,EACN,SAAS,EACT,MAAM,EACN,WAAW,EACX,MAAM,EACN,SAAS,EACT,MAAM,EACN,aAAa,EACb,MAAM,EACN,cAAc,EACd,IAAI,CACL,CAAC;EAEF,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEjD,eAAe,CAAC,IAAI,GAAG;EACrB,WAAW,EAAE,sCAAsC;EACnD,KAAK,EAAE,oBAAoB;CAC5B,CAAC","sourcesContent":["import { generateStoryElement } from \"../../utils\";\nimport Docs from \"./flip-form-control.mdx\";\n\nexport default {\n  component: \"flip-form-control\",\n  parameters: {\n    docs: {\n      page: Docs,\n    },\n  },\n  title: \"Components/FlipFormControl\",\n};\n\nconst Template = (args) => {\n  const container = document.createElement(\"flip-stack\");\n\n  container.spacing = \"24\";\n\n  const textInput = generateStoryElement(\"flip-form-control\", args);\n\n  textInput.innerHTML = `\n    <flip-text-input clearable=\"true\" type=\"text\"></flip-text-input>\n  `;\n\n  const numberInput = generateStoryElement(\"flip-form-control\", {\n    ...args,\n    label: \"Number Control\",\n  });\n\n  numberInput.innerHTML = `\n    <flip-text-input suffix-label=\"€\" type=\"number\"></flip-text-input>\n  `;\n\n  const dateInput = generateStoryElement(\"flip-form-control\", {\n    ...args,\n    label: \"Date Control\",\n  });\n\n  dateInput.innerHTML = `\n    <flip-date-input></flip-date-input>\n  `;\n\n  const passwordInput = generateStoryElement(\"flip-form-control\", {\n    ...args,\n    label: \"Password Control\",\n  });\n\n  passwordInput.innerHTML = `\n    <flip-text-input type=\"password\"></flip-text-input>\n  `;\n\n  const multilineInput = generateStoryElement(\"flip-form-control\", {\n    ...args,\n    label: \"Multiline Control\",\n  });\n\n  multilineInput.innerHTML = `\n    <flip-text-input max-length=\"200\" show-character-counter=\"true\" rows=\"5\" type=\"text\"></flip-text-input>\n  `;\n\n  container.append(\n    \"\\n  \",\n    textInput,\n    \"\\n  \",\n    numberInput,\n    \"\\n  \",\n    dateInput,\n    \"\\n  \",\n    passwordInput,\n    \"\\n  \",\n    multilineInput,\n    \"\\n\"\n  );\n\n  return container;\n};\n\nexport const FlipFormControl = Template.bind({});\n\nFlipFormControl.args = {\n  description: \"Optional description of the control.\",\n  label: \"Form Control Label\",\n};\n"]}

package/dist/collection/components/flip-form-group/flip-form-group.css

@@ -0,0 +1,28 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-space-24);
+}
+
+@media (min-width: 768px) {
+
+.form-group {
+    gap: var(--s-space-32)
+}
+  }
+
+@media (min-width: 768px) {
+
+.form-group--orientation-horizontal {
+    flex-direction: row
+}
+  }

package/dist/collection/components/flip-form-group/flip-form-group.js

@@ -0,0 +1,46 @@
+import { Component, h, Host, Prop } from "@stencil/core";
+import classnames from "classnames";
+export class FlipFormGroup {
+  constructor() {
+    this.orientation = "vertical";
+  }
+  render() {
+    const className = classnames("form-group", `form-group--orientation-${this.orientation}`);
+    return (h(Host, null,
+      h("div", { class: className },
+        h("slot", null))));
+  }
+  static get is() { return "flip-form-group"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-form-group.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-form-group.css"]
+  }; }
+  static get properties() { return {
+    "orientation": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "FlipFormGroupOrientation",
+        "resolved": "\"horizontal\" | \"vertical\"",
+        "references": {
+          "FlipFormGroupOrientation": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "orientation",
+      "reflect": false,
+      "defaultValue": "\"vertical\""
+    }
+  }; }
+}
+//# sourceMappingURL=flip-form-group.js.map

package/dist/collection/components/flip-form-group/flip-form-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-form-group.js","sourceRoot":"","sources":["../../../../src/components/flip-form-group/flip-form-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,UAAU,MAAM,YAAY,CAAC;AAgBpC,MAAM,OAAO,aAAa;EAZ1B;IAaU,gBAAW,GAA6B,UAAU,CAAC;GAgB5D;EAdC,MAAM;IACJ,MAAM,SAAS,GAAG,UAAU,CAC1B,YAAY,EACZ,2BAA2B,IAAI,CAAC,WAAW,EAAE,CAC9C,CAAC;IAEF,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAE,SAAS;QACnB,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipFormGroupOrientation = \"horizontal\" | \"vertical\";\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-form-group.css\",\n  tag: \"flip-form-group\",\n})\nexport class FlipFormGroup {\n  @Prop() orientation: FlipFormGroupOrientation = \"vertical\";\n\n  render() {\n    const className = classnames(\n      \"form-group\",\n      `form-group--orientation-${this.orientation}`\n    );\n\n    return (\n      <Host>\n        <div class={className}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/flip-form-group/flip-form-group.stories.js

@@ -0,0 +1,32 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./flip-form-group.mdx";
+export default {
+  component: "flip-form-group",
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/FlipFormGroup",
+};
+const Template = (args) => {
+  const element = generateStoryElement("flip-form-group", args);
+  element.innerHTML = `
+    <flip-form-group orientation="horizontal">
+      <flip-form-control label="First name">
+        <flip-text-input type="text" value="John"></flip-text-input>
+      </flip-form-control>
+      <flip-form-control label="Last name">
+        <flip-text-input type="text" value="Doe"></flip-text-input>
+      </flip-form-control>
+    </flip-form-group>
+
+    <flip-form-control label="Email">
+      <flip-text-input type="email"></flip-text-input>
+    </flip-form-control>
+  `;
+  return element;
+};
+export const FlipFormGroup = Template.bind({});
+FlipFormGroup.args = {};
+//# sourceMappingURL=flip-form-group.stories.js.map

package/dist/collection/components/flip-form-group/flip-form-group.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-form-group.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-form-group/flip-form-group.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,CAAC,SAAS,GAAG;;;;;;;;;;;;;GAanB,CAAC;EAEF,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,EAAE,CAAC","sourcesContent":["import { generateStoryElement } from \"../../utils\";\nimport Docs from \"./flip-form-group.mdx\";\n\nexport default {\n  component: \"flip-form-group\",\n  parameters: {\n    docs: {\n      page: Docs,\n    },\n  },\n  title: \"Components/FlipFormGroup\",\n};\n\nconst Template = (args) => {\n  const element = generateStoryElement(\"flip-form-group\", args);\n\n  element.innerHTML = `\n    <flip-form-group orientation=\"horizontal\">\n      <flip-form-control label=\"First name\">\n        <flip-text-input type=\"text\" value=\"John\"></flip-text-input>\n      </flip-form-control>\n      <flip-form-control label=\"Last name\">\n        <flip-text-input type=\"text\" value=\"Doe\"></flip-text-input>\n      </flip-form-control>\n    </flip-form-group>\n\n    <flip-form-control label=\"Email\">\n      <flip-text-input type=\"email\"></flip-text-input>\n    </flip-form-control>\n  `;\n\n  return element;\n};\n\nexport const FlipFormGroup = Template.bind({});\n\nFlipFormGroup.args = {};\n"]}