@getflip/swirl-components 0.2.0 → 0.3.0

package/dist/collection/components/flip-date-picker/flip-date-picker.css

@@ -0,0 +1,239 @@
+:host {
+  display: block;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.date-picker {
+  padding: var(--s-space-8) var(--s-space-16);
+  background-color: var(--s-surface-overlay-default);
+  font-size: var(--s-font-size-sm);
+  line-height: var(--s-line-height-sm);
+  letter-spacing: var(--s-letter-spacing-tighter);
+}
+
+@media (min-width: 768px) {
+
+.date-picker {
+    max-width: 17.5rem
+}
+  }
+
+.air-datepicker--pointer {
+  display: none;
+}
+
+.air-datepicker-nav {
+  display: flex;
+  margin-bottom: var(--s-space-8);
+  align-items: center;
+  gap: var(--s-space-4);
+}
+
+.air-datepicker-nav--action {
+  position: relative;
+  display: inline-flex;
+  width: 2.5rem;
+  height: 2.5rem;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  color: var(--s-icon-highlight);
+  cursor: pointer;
+  order: 2;
+}
+
+.air-datepicker-nav--action:hover {
+    background-color: var(--s-surface-overlay-hovered);
+  }
+
+.air-datepicker-nav--title {
+  padding: var(--s-space-8);
+  flex-grow: 1;
+  border-radius: var(--s-border-radius-s);
+  font-size: var(--s-font-size-base);
+  font-weight: var(--s-font-weight-medium);
+  line-height: var(--s-line-height-base);
+  text-align: left;
+  cursor: pointer;
+  order: 0;
+}
+
+.air-datepicker-nav--title i {
+    font-style: normal;
+  }
+
+.air-datepicker-body--day-names {
+  display: flex;
+  margin-bottom: var(--s-space-8);
+  justify-content: space-between;
+  align-items: center;
+}
+
+.air-datepicker-body--day-name {
+  display: inline-flex;
+  flex-basis: calc(100 / 7 * 1%);
+  justify-content: center;
+  align-items: center;
+  color: var(--s-text-subdued);
+  aspect-ratio: 1;
+}
+
+.air-datepicker-body--cells {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.air-datepicker-body--cells.-months- {
+    gap: var(--s-space-2);
+  }
+
+.air-datepicker-cell {
+  position: relative;
+  display: inline-flex;
+  flex-basis: calc(100 / 7 * 1%);
+  justify-content: center;
+  align-items: center;
+  font-weight: var(--s-font-weight-medium);
+  cursor: pointer;
+  aspect-ratio: 1;
+}
+
+.air-datepicker-cell:not(.-month-):not(.-year-):not(.-in-range-):hover:before {
+      position: absolute;
+      z-index: -1;
+      border-radius: 50%;
+      background-color: var(--s-surface-overlay-hovered);
+      content: "";
+      inset: 0;
+    }
+
+.air-datepicker-cell.-month-,
+  .air-datepicker-cell.-year- {
+    height: 2.5rem;
+    flex-basis: calc(100 / 3 * 1% - var(--s-space-2) * 2);
+    border-radius: var(--s-border-radius-s);
+    aspect-ratio: auto;
+  }
+
+.air-datepicker-cell.-month-.-in-range-:before, .air-datepicker-cell.-year-.-in-range-:before {
+        border-radius: var(--s-border-radius-s);
+      }
+
+.air-datepicker-cell.-month-:hover:not(.-in-range-):not(.-selected-), .air-datepicker-cell.-year-:hover:not(.-in-range-):not(.-selected-) {
+      background-color: var(--s-surface-overlay-hovered);
+    }
+
+.air-datepicker-cell.-other-month- {
+    color: var(--s-text-subdued);
+  }
+
+.air-datepicker-cell.-current-:not(.-month-):not(.-year-):after {
+      position: absolute;
+      z-index: -1;
+      border: var(--s-border-width-default) solid var(--s-border-highlight);
+      border-radius: 50%;
+      content: "";
+      inset: 0;
+    }
+
+.air-datepicker-cell.-selected- {
+    color: var(--s-text-on-surface-highlight);
+  }
+
+.air-datepicker-cell.-selected-.-year-,
+    .air-datepicker-cell.-selected-.-month- {
+      background-color: var(--s-surface-highlight-default);
+    }
+
+.air-datepicker-cell.-selected-:not(.-month-):not(.-year-):not(.-in-range-):before {
+        position: absolute;
+        z-index: -1;
+        border-radius: 50%;
+        background-color: var(--s-surface-highlight-default);
+        content: "";
+        inset: 0;
+      }
+
+.air-datepicker-cell.-disabled- {
+    color: var(--s-text-subdued);
+    cursor: default;
+  }
+
+.air-datepicker-cell.-disabled-:hover {
+      background-color: transparent;
+    }
+
+.air-datepicker-cell.-in-range-:before {
+      position: absolute;
+      z-index: -1;
+      top: 0.0625rem;
+      right: 0;
+      bottom: 0.0625rem;
+      left: 0;
+      border-radius: 0;
+      background-color: var(--s-surface-highlight-default);
+      content: "";
+      opacity: 0.2;
+    }
+
+.air-datepicker-cell.-range-from-:not(.-month-):not(.-year-):not(.-range-to-):hover {
+      color: var(--s-text-on-surface-highlight);
+    }
+
+.air-datepicker-cell.-range-from-:not(.-month-):not(.-year-):not(.-range-to-):before {
+      position: absolute;
+      z-index: -1;
+      border-radius: 50%;
+      background-color: var(--s-surface-highlight-default);
+      content: "";
+      inset: 0;
+    }
+
+.air-datepicker-cell.-range-from-:not(.-month-):not(.-year-):not(.-range-to-):after {
+      position: absolute;
+      z-index: -1;
+      top: 0.0625rem;
+      right: 0;
+      bottom: 0.0625rem;
+      left: 50%;
+      border-radius: 0;
+      background-color: var(--s-surface-highlight-default);
+      content: "";
+      opacity: 0.2;
+    }
+
+.air-datepicker-cell.-range-to-:not(.-month-):not(.-year-):not(.-range-from-):hover {
+      color: var(--s-text-on-surface-highlight);
+    }
+
+.air-datepicker-cell.-range-to-:not(.-month-):not(.-year-):not(.-range-from-):before {
+      position: absolute;
+      z-index: -1;
+      border-radius: 50%;
+      background-color: var(--s-surface-highlight-default);
+      content: "";
+      inset: 0;
+    }
+
+.air-datepicker-cell.-range-to-:not(.-month-):not(.-year-):not(.-range-from-):after {
+      position: absolute;
+      z-index: -1;
+      top: 0.0625rem;
+      right: 50%;
+      bottom: 0.0625rem;
+      left: 0;
+      border-radius: 0;
+      background-color: var(--s-surface-highlight-default);
+      content: "";
+      opacity: 0.2;
+    }
+
+.-hidden- {
+  display: none;
+}

package/dist/collection/components/flip-date-picker/flip-date-picker.js

@@ -0,0 +1,219 @@
+import { Component, Event, h, Host, Prop, Watch, } from "@stencil/core";
+import AirDatepicker from "air-datepicker";
+import localeEn from "air-datepicker/locale/en";
+export class FlipDatePicker {
+  constructor() {
+    this.locale = localeEn;
+    this.onClick = (event) => {
+      event.stopPropagation();
+      event.preventDefault();
+    };
+  }
+  watchProps() {
+    this.init();
+  }
+  componentDidLoad() {
+    this.init();
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.picker) === null || _a === void 0 ? void 0 : _a.destroy();
+  }
+  init() {
+    var _a;
+    (_a = this.picker) === null || _a === void 0 ? void 0 : _a.destroy();
+    this.picker = new AirDatepicker(this.containerEl, {
+      classes: "date-picker",
+      inline: true,
+      locale: this.locale,
+      maxDate: this.maxDate,
+      minDate: this.minDate,
+      minView: "days",
+      nextHtml: "<flip-icon-chevron-right></flip-icon-chevron-right>",
+      onSelect: ({ date }) => {
+        this.valueChange.emit(date);
+      },
+      prevHtml: "<flip-icon-chevron-left></flip-icon-chevron-left>",
+      range: this.range,
+      selectedDates: this.value === undefined
+        ? undefined
+        : Array.isArray(this.value)
+          ? this.value
+          : [this.value],
+      startDate: this.startDate,
+      toggleSelected: !this.range,
+      view: "days",
+    });
+  }
+  render() {
+    return (h(Host, { onClick: this.onClick },
+      h("div", { ref: (el) => (this.containerEl = el) })));
+  }
+  static get is() { return "flip-date-picker"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-date-picker.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-date-picker.css"]
+  }; }
+  static get properties() { return {
+    "locale": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Partial<AirDatepickerLocale>",
+        "resolved": "{ days?: string[]; daysShort?: string[]; daysMin?: string[]; months?: string[]; monthsShort?: string[]; today?: string; clear?: string; dateFormat?: string; timeFormat?: string; firstDay?: 0 | 1 | 2 | 3 | 4 | 5 | 6; }",
+        "references": {
+          "Partial": {
+            "location": "global"
+          },
+          "AirDatepickerLocale": {
+            "location": "import",
+            "path": "air-datepicker"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "localeEn"
+    },
+    "maxDate": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Date",
+        "resolved": "Date",
+        "references": {
+          "Date": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    },
+    "minDate": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Date",
+        "resolved": "Date",
+        "references": {
+          "Date": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    },
+    "range": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "range",
+      "reflect": false
+    },
+    "startDate": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Date",
+        "resolved": "Date",
+        "references": {
+          "Date": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    },
+    "value": {
+      "type": "unknown",
+      "mutable": true,
+      "complexType": {
+        "original": "Date | Date[]",
+        "resolved": "Date | Date[]",
+        "references": {
+          "Date": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    }
+  }; }
+  static get events() { return [{
+      "method": "valueChange",
+      "name": "valueChange",
+      "bubbles": false,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "Date | Date[]",
+        "resolved": "Date | Date[]",
+        "references": {
+          "Date": {
+            "location": "global"
+          }
+        }
+      }
+    }]; }
+  static get watchers() { return [{
+      "propName": "locale",
+      "methodName": "watchProps"
+    }, {
+      "propName": "maxDate",
+      "methodName": "watchProps"
+    }, {
+      "propName": "minDate",
+      "methodName": "watchProps"
+    }, {
+      "propName": "range",
+      "methodName": "watchProps"
+    }, {
+      "propName": "startDate",
+      "methodName": "watchProps"
+    }, {
+      "propName": "value",
+      "methodName": "watchProps"
+    }]; }
+}
+//# sourceMappingURL=flip-date-picker.js.map

package/dist/collection/components/flip-date-picker/flip-date-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-date-picker.js","sourceRoot":"","sources":["../../../../src/components/flip-date-picker/flip-date-picker.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,aAAsC,MAAM,gBAAgB,CAAC;AAEpE,OAAO,QAAQ,MAAM,0BAA0B,CAAC;AAOhD,MAAM,OAAO,cAAc;EAL3B;IAMU,WAAM,GAAkC,QAAQ,CAAC;IA0DjD,YAAO,GAAG,CAAC,KAAiB,EAAE,EAAE;MACtC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,KAAK,CAAC,cAAc,EAAE,CAAC;IACzB,CAAC,CAAC;GASH;EApDC,UAAU;IACR,IAAI,CAAC,IAAI,EAAE,CAAC;EACd,CAAC;EAED,gBAAgB;IACd,IAAI,CAAC,IAAI,EAAE,CAAC;EACd,CAAC;EAED,oBAAoB;;IAClB,MAAA,IAAI,CAAC,MAAM,0CAAE,OAAO,EAAE,CAAC;EACzB,CAAC;EAEO,IAAI;;IACV,MAAA,IAAI,CAAC,MAAM,0CAAE,OAAO,EAAE,CAAC;IAEvB,IAAI,CAAC,MAAM,GAAG,IAAI,aAAa,CAAC,IAAI,CAAC,WAAW,EAAE;MAChD,OAAO,EAAE,aAAa;MACtB,MAAM,EAAE,IAAI;MACZ,MAAM,EAAE,IAAI,CAAC,MAAM;MACnB,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,OAAO,EAAE,MAAM;MACf,QAAQ,EAAE,qDAAqD;MAC/D,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;QACrB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;MAC9B,CAAC;MACD,QAAQ,EAAE,mDAAmD;MAC7D,KAAK,EAAE,IAAI,CAAC,KAAK;MACjB,aAAa,EACX,IAAI,CAAC,KAAK,KAAK,SAAS;QACtB,CAAC,CAAC,SAAS;QACX,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;UAC3B,CAAC,CAAC,IAAI,CAAC,KAAK;UACZ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;MAClB,SAAS,EAAE,IAAI,CAAC,SAAS;MACzB,cAAc,EAAE,CAAC,IAAI,CAAC,KAAK;MAC3B,IAAI,EAAE,MAAM;KACb,CAAC,CAAC;EACL,CAAC;EAOD,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,OAAO,EAAE,IAAI,CAAC,OAAO;MACzB,WAAK,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,GAAQ,CAC5C,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  Watch,\n} from \"@stencil/core\";\nimport AirDatepicker, { AirDatepickerLocale } from \"air-datepicker\";\n\nimport localeEn from \"air-datepicker/locale/en\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-date-picker.css\",\n  tag: \"flip-date-picker\",\n})\nexport class FlipDatePicker {\n  @Prop() locale?: Partial<AirDatepickerLocale> = localeEn;\n  @Prop() maxDate?: Date;\n  @Prop() minDate?: Date;\n  @Prop() range?: boolean;\n  @Prop() startDate?: Date;\n  @Prop({ mutable: true }) value?: Date | Date[];\n\n  @Event({ bubbles: false }) valueChange: EventEmitter<Date | Date[]>;\n\n  private containerEl: HTMLDivElement;\n  private picker: AirDatepicker<HTMLElement>;\n\n  @Watch(\"locale\")\n  @Watch(\"maxDate\")\n  @Watch(\"minDate\")\n  @Watch(\"range\")\n  @Watch(\"startDate\")\n  @Watch(\"value\")\n  watchProps() {\n    this.init();\n  }\n\n  componentDidLoad() {\n    this.init();\n  }\n\n  disconnectedCallback() {\n    this.picker?.destroy();\n  }\n\n  private init() {\n    this.picker?.destroy();\n\n    this.picker = new AirDatepicker(this.containerEl, {\n      classes: \"date-picker\",\n      inline: true,\n      locale: this.locale,\n      maxDate: this.maxDate,\n      minDate: this.minDate,\n      minView: \"days\",\n      nextHtml: \"<flip-icon-chevron-right></flip-icon-chevron-right>\",\n      onSelect: ({ date }) => {\n        this.valueChange.emit(date);\n      },\n      prevHtml: \"<flip-icon-chevron-left></flip-icon-chevron-left>\",\n      range: this.range,\n      selectedDates:\n        this.value === undefined\n          ? undefined\n          : Array.isArray(this.value)\n          ? this.value\n          : [this.value],\n      startDate: this.startDate,\n      toggleSelected: !this.range,\n      view: \"days\",\n    });\n  }\n\n  private onClick = (event: MouseEvent) => {\n    event.stopPropagation();\n    event.preventDefault();\n  };\n\n  render() {\n    return (\n      <Host onClick={this.onClick}>\n        <div ref={(el) => (this.containerEl = el)}></div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/flip-date-picker/flip-date-picker.stories.js

@@ -0,0 +1,23 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./flip-date-picker.mdx";
+export default {
+  argTypes: {
+    locale: {
+      control: { type: "object" },
+    },
+  },
+  component: "flip-date-picker",
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/FlipDatePicker",
+};
+const Template = (args) => {
+  const element = generateStoryElement("flip-date-picker", args);
+  return element;
+};
+export const FlipDatePicker = Template.bind({});
+FlipDatePicker.args = {};
+//# sourceMappingURL=flip-date-picker.stories.js.map

package/dist/collection/components/flip-date-picker/flip-date-picker.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-date-picker.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-date-picker/flip-date-picker.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,IAAI,MAAM,wBAAwB,CAAC;AAE1C,eAAe;EACb,QAAQ,EAAE;IACR,MAAM,EAAE;MACN,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;GACF;EACD,SAAS,EAAE,kBAAkB;EAC7B,UAAU,EAAE;IACV,IAAI,EAAE;MACJ,IAAI,EAAE,IAAI;KACX;GACF;EACD,KAAK,EAAE,2BAA2B;CACnC,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;EACxB,MAAM,OAAO,GAAG,oBAAoB,CAAC,kBAAkB,EAAE,IAAI,CAAC,CAAC;EAE/D,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,cAAc,CAAC,IAAI,GAAG,EAAE,CAAC","sourcesContent":["import { generateStoryElement } from \"../../utils\";\nimport Docs from \"./flip-date-picker.mdx\";\n\nexport default {\n  argTypes: {\n    locale: {\n      control: { type: \"object\" },\n    },\n  },\n  component: \"flip-date-picker\",\n  parameters: {\n    docs: {\n      page: Docs,\n    },\n  },\n  title: \"Components/FlipDatePicker\",\n};\n\nconst Template = (args) => {\n  const element = generateStoryElement(\"flip-date-picker\", args);\n\n  return element;\n};\n\nexport const FlipDatePicker = Template.bind({});\n\nFlipDatePicker.args = {};\n"]}

package/dist/collection/components/flip-description-list/flip-description-list.js

@@ -17,3 +17,4 @@ export class FlipDescriptionList {
     "$": ["flip-description-list.css"]
   }; }
 }
+//# sourceMappingURL=flip-description-list.js.map

package/dist/collection/components/flip-description-list/flip-description-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-description-list.js","sourceRoot":"","sources":["../../../../src/components/flip-description-list/flip-description-list.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;GAEG;AAMH,MAAM,OAAO,mBAAmB;EAC9B,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,UAAI,KAAK,EAAC,kBAAkB;QAC1B,eAAa,CACV,CACA,CACR,CAAC;EACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host } from \"@stencil/core\";\n\n/**\n * @slot slot - The description list items\n */\n@Component({\n  shadow: true,\n  styleUrl: \"flip-description-list.css\",\n  tag: \"flip-description-list\",\n})\nexport class FlipDescriptionList {\n  render() {\n    return (\n      <Host>\n        <dl class=\"description-list\">\n          <slot></slot>\n        </dl>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/flip-description-list/flip-description-list.stories.js

@@ -28,3 +28,4 @@ const Template = (args) => {
 };
 export const FlipDescriptionList = Template.bind({});
 FlipDescriptionList.args = {};
+//# sourceMappingURL=flip-description-list.stories.js.map

package/dist/collection/components/flip-description-list/flip-description-list.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-description-list.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-description-list/flip-description-list.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,IAAI,MAAM,6BAA6B,CAAC;AAE/C,eAAe;EACb,SAAS,EAAE,uBAAuB;EAClC,UAAU,EAAE;IACV,IAAI,EAAE;MACJ,IAAI,EAAE,IAAI;KACX;GACF;EACD,KAAK,EAAE,gCAAgC;CACxC,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;EACxB,MAAM,OAAO,GAAG,oBAAoB,CAAC,uBAAuB,EAAE,IAAI,CAAC,CAAC;EAEpE,OAAO,CAAC,SAAS,GAAG;;;;;;;;;;;;GAYnB,CAAC;EAEF,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAErD,mBAAmB,CAAC,IAAI,GAAG,EAAE,CAAC","sourcesContent":["import { generateStoryElement } from \"../../utils\";\nimport Docs from \"./flip-description-list.mdx\";\n\nexport default {\n  component: \"flip-description-list\",\n  parameters: {\n    docs: {\n      page: Docs,\n    },\n  },\n  title: \"Components/FlipDescriptionList\",\n};\n\nconst Template = (args) => {\n  const element = generateStoryElement(\"flip-description-list\", args);\n\n  element.innerHTML = `\n    <flip-description-list-item term=\"Term #1\">\n      A short description\n    </flip-description-list-item>\n    <flip-description-list-item term=\"A longer term that might wrap\">\n      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Metus eu\n      consectetur vestibulum tempus, nulla lobortis ipsum. Odio a ipsum purus\n      pellentesque maecenas.\n    </flip-description-list-item>\n    <flip-description-list-item term=\"Term #3\">\n      A short description\n    </flip-description-list-item>\n  `;\n\n  return element;\n};\n\nexport const FlipDescriptionList = Template.bind({});\n\nFlipDescriptionList.args = {};\n"]}

package/dist/collection/components/flip-description-list-item/flip-description-list-item.js

@@ -38,3 +38,4 @@ export class FlipDescriptionListItem {
     }
   }; }
 }
+//# sourceMappingURL=flip-description-list-item.js.map

package/dist/collection/components/flip-description-list-item/flip-description-list-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-description-list-item.js","sourceRoot":"","sources":["../../../../src/components/flip-description-list-item/flip-description-list-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;GAEG;AAMH,MAAM,OAAO,uBAAuB;EAGlC,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAC,uBAAuB;QAChC,UAAI,KAAK,EAAC,6BAA6B,IAAE,IAAI,CAAC,IAAI,CAAM;QACxD,UAAI,KAAK,EAAC,oCAAoC;UAC5C,eAAa,CACV,CACD,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from \"@stencil/core\";\n\n/**\n * @slot slot - The description\n */\n@Component({\n  shadow: true,\n  styleUrl: \"flip-description-list-item.css\",\n  tag: \"flip-description-list-item\",\n})\nexport class FlipDescriptionListItem {\n  @Prop() term!: string;\n\n  render() {\n    return (\n      <Host>\n        <div class=\"description-list-item\">\n          <dt class=\"description-list-item__term\">{this.term}</dt>\n          <dd class=\"description-list-item__description\">\n            <slot></slot>\n          </dd>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/flip-description-list-item/flip-description-list-item.stories.js

@@ -18,3 +18,4 @@ export const FlipDescriptionListItem = Template.bind({});
 FlipDescriptionListItem.args = {
   term: "Term or label",
 };
+//# sourceMappingURL=flip-description-list-item.stories.js.map

package/dist/collection/components/flip-description-list-item/flip-description-list-item.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-description-list-item.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-description-list-item/flip-description-list-item.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,IAAI,MAAM,kCAAkC,CAAC;AAEpD,eAAe;EACb,SAAS,EAAE,4BAA4B;EACvC,UAAU,EAAE;IACV,IAAI,EAAE;MACJ,IAAI,EAAE,IAAI;KACX;GACF;EACD,KAAK,EAAE,oCAAoC;CAC5C,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;EACxB,MAAM,OAAO,GAAG,oBAAoB,CAAC,4BAA4B,EAAE,IAAI,CAAC,CAAC;EAEzE,OAAO,CAAC,SAAS,GAAG,qBAAqB,CAAC;EAE1C,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEzD,uBAAuB,CAAC,IAAI,GAAG;EAC7B,IAAI,EAAE,eAAe;CACtB,CAAC","sourcesContent":["import { generateStoryElement } from \"../../utils\";\nimport Docs from \"./flip-description-list-item.mdx\";\n\nexport default {\n  component: \"flip-description-list-item\",\n  parameters: {\n    docs: {\n      page: Docs,\n    },\n  },\n  title: \"Components/FlipDescriptionListItem\",\n};\n\nconst Template = (args) => {\n  const element = generateStoryElement(\"flip-description-list-item\", args);\n\n  element.innerHTML = `A short description`;\n\n  return element;\n};\n\nexport const FlipDescriptionListItem = Template.bind({});\n\nFlipDescriptionListItem.args = {\n  term: \"Term or label\",\n};\n"]}

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

@@ -246,3 +246,4 @@ export class FlipDialog {
     }
   }; }
 }
+//# sourceMappingURL=flip-dialog.js.map

package/dist/collection/components/flip-dialog/flip-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-dialog.js","sourceRoot":"","sources":["../../../../src/components/flip-dialog/flip-dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from \"@stencil/core\";\nimport A11yDialog from \"a11y-dialog\";\nimport classnames from \"classnames\";\n\nexport type FlipDialogIntent = \"primary\" | \"critical\";\n\n/**\n * @slot slot - The dialog content\n */\n@Component({\n  shadow: true,\n  styleUrl: \"flip-dialog.css\",\n  tag: \"flip-dialog\",\n})\nexport class FlipDialog {\n  @Prop() hideLabel?: boolean;\n  @Prop() intent?: FlipDialogIntent = \"primary\";\n  @Prop() label!: string;\n  @Prop() primaryActionLabel?: string;\n  @Prop() secondaryActionLabel?: string;\n\n  @Event() primaryAction: EventEmitter<MouseEvent>;\n  @Event() secondaryAction: EventEmitter<MouseEvent>;\n\n  @State() closing = false;\n\n  private controlsContainerEl: HTMLElement;\n  private dialog: A11yDialog;\n  private dialogEl: HTMLDivElement;\n\n  componentDidLoad() {\n    this.dialog = new A11yDialog(this.dialogEl);\n\n    this.dialog.on(\"show\", () => {\n      this.controlsContainerEl\n        .querySelector<HTMLButtonElement>(\"flip-button button\")\n        ?.focus();\n    });\n  }\n\n  disconnectedCallback() {\n    this.dialog?.destroy();\n  }\n\n  /**\n   * Open the dialog.\n   */\n  @Method()\n  async open() {\n    this.dialog.show();\n  }\n\n  /**\n   * Close the dialog.\n   */\n  @Method()\n  async close() {\n    if (this.closing) {\n      return;\n    }\n\n    this.closing = true;\n\n    setTimeout(() => {\n      this.dialog.hide();\n      this.closing = false;\n    }, 150);\n  }\n\n  onKeyDown = (event: KeyboardEvent) => {\n    if (event.code === \"Escape\") {\n      this.close();\n    }\n  };\n\n  private onBackdropClick = () => {\n    this.close();\n  };\n\n  private onPrimaryAction = (event: MouseEvent) => {\n    this.primaryAction.emit(event);\n    this.close();\n  };\n\n  private onSecondaryAction = (event: MouseEvent) => {\n    this.secondaryAction.emit(event);\n    this.close();\n  };\n\n  render() {\n    const className = classnames(\"dialog\", { \"dialog--closing\": this.closing });\n\n    return (\n      <Host>\n        <div\n          aria-describedby=\"content\"\n          aria-hidden=\"true\"\n          aria-labelledby={this.hideLabel ? undefined : \"label\"}\n          aria-label={this.hideLabel ? this.label : undefined}\n          aria-modal=\"true\"\n          class={className}\n          onKeyDown={this.onKeyDown}\n          ref={(el) => (this.dialogEl = el)}\n          role=\"alertdialog\"\n        >\n          <div class=\"dialog__backdrop\" onClick={this.onBackdropClick}></div>\n          <div class=\"dialog__body\" role=\"document\">\n            {!this.hideLabel && (\n              <h2 class=\"dialog__heading\" id=\"label\">\n                {this.label}\n              </h2>\n            )}\n            <div class=\"dialog__content\" id=\"content\">\n              <slot></slot>\n            </div>\n            <flip-button-group\n              class=\"dialog__controls\"\n              ref={(el) => (this.controlsContainerEl = el)}\n              stretch\n              wrap\n            >\n              {this.secondaryActionLabel && (\n                <flip-button\n                  label={this.secondaryActionLabel}\n                  onClick={this.onSecondaryAction}\n                ></flip-button>\n              )}\n              {this.primaryActionLabel && (\n                <flip-button\n                  intent={this.intent}\n                  label={this.primaryActionLabel}\n                  onClick={this.onPrimaryAction}\n                  variant={this.intent === \"critical\" ? \"ghost\" : \"flat\"}\n                ></flip-button>\n              )}\n            </flip-button-group>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/flip-dialog/flip-dialog.stories.js

@@ -38,3 +38,4 @@ FlipDialog.args = {
   primaryActionLabel: "Leave",
   secondaryActionLabel: "Cancel",
 };
+//# sourceMappingURL=flip-dialog.stories.js.map

package/dist/collection/components/flip-dialog/flip-dialog.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-dialog.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-dialog/flip-dialog.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,IAAI,MAAM,mBAAmB,CAAC;AAErC,eAAe;EACb,SAAS,EAAE,aAAa;EACxB,UAAU,EAAE;IACV,IAAI,EAAE;MACJ,IAAI,EAAE,IAAI;MACV,MAAM,EAAE;QACN,IAAI,EAAE;;;;;;;UAOJ;OACH;KACF;GACF;EACD,KAAK,EAAE,uBAAuB;CAC/B,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;EACxB,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;EAChD,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;EACtD,MAAM,OAAO,GAAG,oBAAoB,CAClC,aAAa,EACb,IAAI,CACoB,CAAC;EAE3B,OAAO,CAAC,KAAK,GAAG,aAAa,CAAC;EAC9B,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC;EAExD,OAAO,CAAC,SAAS,GAAG;;GAEnB,CAAC;EAEF,SAAS,CAAC,MAAM,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;EAEnC,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE5C,UAAU,CAAC,IAAI,GAAG;EAChB,MAAM,EAAE,UAAU;EAClB,KAAK,EAAE,QAAQ;EACf,kBAAkB,EAAE,OAAO;EAC3B,oBAAoB,EAAE,QAAQ;CAC/B,CAAC","sourcesContent":["import { generateStoryElement } from \"../../utils\";\nimport Docs from \"./flip-dialog.mdx\";\n\nexport default {\n  component: \"flip-dialog\",\n  parameters: {\n    docs: {\n      page: Docs,\n      source: {\n        code: `<flip-dialog id=\"my-dialog\" label=\"Dialog\" primary-action-label=\"Leave\" secondary-action-label=\"Cancel\">\n  <p>Do you really want to leave this group chat?</p>\n</flip-dialog>\n\n<script>\n  const dialog = document.body.querySelector('#my-dialog');\n  dialog.open();\n</script>`,\n      },\n    },\n  },\n  title: \"Components/FlipDialog\",\n};\n\nconst Template = (args) => {\n  const container = document.createElement(\"div\");\n  const trigger = document.createElement(\"flip-button\");\n  const element = generateStoryElement(\n    \"flip-dialog\",\n    args\n  ) as HTMLFlipDialogElement;\n\n  trigger.label = \"Open dialog\";\n  trigger.addEventListener(\"click\", () => element.open());\n\n  element.innerHTML = `\n    <p>Do you really want to leave this group chat?</p>\n  `;\n\n  container.append(trigger, element);\n\n  return container;\n};\n\nexport const FlipDialog = Template.bind({});\n\nFlipDialog.args = {\n  intent: \"critical\",\n  label: \"Dialog\",\n  primaryActionLabel: \"Leave\",\n  secondaryActionLabel: \"Cancel\",\n};\n"]}

package/dist/collection/components/flip-empty-state/flip-empty-state.css

@@ -0,0 +1,26 @@
+:host {
+  display: block;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.empty-state {
+  display: flex;
+  max-width: 28rem;
+  align-items: center;
+  flex-direction: column;
+  gap: var(--s-space-16);
+}
+
+.empty-state__illustration {
+  max-width: 16rem;
+}
+
+.empty-state__body {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  gap: var(--s-space-8);
+}

package/dist/collection/components/flip-empty-state/flip-empty-state.js

@@ -0,0 +1,58 @@
+import { Component, h, Host, Prop } from "@stencil/core";
+export class FlipEmptyState {
+  render() {
+    return (h(Host, null,
+      h("div", { class: "empty-state" },
+        this.illustration && (h("img", { alt: "", class: "empty-state__illustration", src: this.illustration })),
+        h("div", { class: "empty-state__body" },
+          this.heading && (h("flip-heading", { align: "center", as: "p", text: this.heading })),
+          h("div", { class: "empty-state__content" },
+            h("flip-text", { align: "center", color: "subdued" },
+              h("slot", null)))))));
+  }
+  static get is() { return "flip-empty-state"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-empty-state.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-empty-state.css"]
+  }; }
+  static get properties() { return {
+    "heading": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "heading",
+      "reflect": false
+    },
+    "illustration": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "illustration",
+      "reflect": false
+    }
+  }; }
+}
+//# sourceMappingURL=flip-empty-state.js.map

package/dist/collection/components/flip-empty-state/flip-empty-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-empty-state.js","sourceRoot":"","sources":["../../../../src/components/flip-empty-state/flip-empty-state.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,cAAc;EAIzB,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAC,aAAa;QACrB,IAAI,CAAC,YAAY,IAAI,CACpB,WACE,GAAG,EAAC,EAAE,EACN,KAAK,EAAC,2BAA2B,EACjC,GAAG,EAAE,IAAI,CAAC,YAAY,GACtB,CACH;QAED,WAAK,KAAK,EAAC,mBAAmB;UAC3B,IAAI,CAAC,OAAO,IAAI,CACf,oBACE,KAAK,EAAC,QAAQ,EACd,EAAE,EAAC,GAAG,EACN,IAAI,EAAE,IAAI,CAAC,OAAO,GACJ,CACjB;UAED,WAAK,KAAK,EAAC,sBAAsB;YAC/B,iBAAW,KAAK,EAAC,QAAQ,EAAC,KAAK,EAAC,SAAS;cACvC,eAAa,CACH,CACR,CACF,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from \"@stencil/core\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-empty-state.css\",\n  tag: \"flip-empty-state\",\n})\nexport class FlipEmptyState {\n  @Prop() heading?: string;\n  @Prop() illustration?: string;\n\n  render() {\n    return (\n      <Host>\n        <div class=\"empty-state\">\n          {this.illustration && (\n            <img\n              alt=\"\"\n              class=\"empty-state__illustration\"\n              src={this.illustration}\n            />\n          )}\n\n          <div class=\"empty-state__body\">\n            {this.heading && (\n              <flip-heading\n                align=\"center\"\n                as=\"p\"\n                text={this.heading}\n              ></flip-heading>\n            )}\n\n            <div class=\"empty-state__content\">\n              <flip-text align=\"center\" color=\"subdued\">\n                <slot></slot>\n              </flip-text>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}