@getflip/swirl-components 0.2.0 → 0.3.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"flip-thumbnail.js","sourceRoot":"","sources":["../../../../src/components/flip-thumbnail/flip-thumbnail.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,UAAU,MAAM,YAAY,CAAC;AAWpC,MAAM,OAAO,aAAa;EAL1B;IAOU,WAAM,GAAyB,WAAW,CAAC;IAC3C,SAAI,GAAsB,GAAG,CAAC;GAuBvC;EApBC,MAAM;IACJ,MAAM,SAAS,GAAG,UAAU,CAC1B,WAAW,EACX,qBAAqB,IAAI,CAAC,MAAM,EAAE,EAClC,mBAAmB,IAAI,CAAC,IAAI,EAAE,CAC/B,CAAC;IAEF,OAAO,CACL,EAAC,IAAI;MACH,YAAM,KAAK,EAAE,SAAS;QACpB,WACE,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAC,kBAAkB,EACxB,OAAO,EAAC,MAAM,EACd,GAAG,EAAE,IAAI,CAAC,GAAG,GACb,CACG,CACF,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipThumbnailFormat = \"portrait\" | \"landscape\" | \"square\";\n\nexport type FlipThumbnailSize = \"s\" | \"m\" | \"l\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-thumbnail.css\",\n  tag: \"flip-thumbnail\",\n})\nexport class FlipThumbnail {\n  @Prop() alt!: string;\n  @Prop() format?: FlipThumbnailFormat = \"landscape\";\n  @Prop() size: FlipThumbnailSize = \"m\";\n  @Prop() src!: string;\n\n  render() {\n    const className = classnames(\n      \"thumbnail\",\n      `thumbnail--format-${this.format}`,\n      `thumbnail--size-${this.size}`\n    );\n\n    return (\n      <Host>\n        <span class={className}>\n          <img\n            alt={this.alt}\n            class=\"thumbnail__image\"\n            loading=\"lazy\"\n            src={this.src}\n          />\n        </span>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -18,3 +18,4 @@ FlipThumbnail.args = {
   alt: "Brief description of the image.",
   src: "https://picsum.photos/id/433/400/400",
 };
+//# sourceMappingURL=flip-thumbnail.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"flip-thumbnail.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-thumbnail/flip-thumbnail.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,IAAI,MAAM,sBAAsB,CAAC;AAExC,eAAe;EACb,SAAS,EAAE,gBAAgB;EAC3B,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,gBAAgB,EAAE,IAAI,CAAC,CAAC;EAE7D,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,GAAG,EAAE,iCAAiC;EACtC,GAAG,EAAE,sCAAsC;CAC5C,CAAC","sourcesContent":["import { generateStoryElement } from \"../../utils\";\nimport Docs from \"./flip-thumbnail.mdx\";\n\nexport default {\n  component: \"flip-thumbnail\",\n  parameters: {\n    docs: {\n      page: Docs,\n    },\n  },\n  title: \"Components/FlipThumbnail\",\n};\n\nconst Template = (args) => {\n  const element = generateStoryElement(\"flip-thumbnail\", args);\n\n  return element;\n};\n\nexport const FlipThumbnail = Template.bind({});\n\nFlipThumbnail.args = {\n  alt: \"Brief description of the image.\",\n  src: \"https://picsum.photos/id/433/400/400\",\n};\n"]}

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

@@ -196,3 +196,4 @@ export class FlipToast {
       "methodName": "watchDuration"
     }]; }
 }
+//# sourceMappingURL=flip-toast.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"flip-toast.js","sourceRoot":"","sources":["../../../../src/components/flip-toast/flip-toast.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,UAAU,MAAM,YAAY,CAAC;AASpC,MAAM,OAAO,SAAS;EALtB;IAMU,2BAAsB,GAAY,SAAS,CAAC;IAK5C,WAAM,GAAqB,SAAS,CAAC;IAqCrC,cAAS,GAAG,GAAG,EAAE;MACvB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAClC,CAAC,CAAC;GAuBH;EAtDC,aAAa;IACX,IAAI,CAAC,UAAU,EAAE,CAAC;EACpB,CAAC;EAED,gBAAgB;IACd,IAAI,CAAC,UAAU,EAAE,CAAC;EACpB,CAAC;EAEO,UAAU;IAChB,IAAI,CAAC,UAAU,EAAE,CAAC;IAElB,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS,EAAE;MAC/B,OAAO;KACR;IAED,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;MAC7B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAClC,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;EACpB,CAAC;EAEO,UAAU;IAChB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;MAC1B,OAAO;KACR;IAED,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC3B,IAAI,CAAC,OAAO,GAAG,SAAS,CAAC;EAC3B,CAAC;EAMD,MAAM;IACJ,MAAM,SAAS,GAAG,UAAU,CAAC,OAAO,EAAE,iBAAiB,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;IAEtE,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAE,SAAS;QAClB,IAAI,CAAC,IAAI,IAAI,YAAM,KAAK,EAAC,aAAa,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,GAAS;QACrE,YAAM,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,OAAO,CAAQ;QAClD,4BACc,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,sBAAsB,EAC5D,KAAK,EAAC,uBAAuB,EAC7B,OAAO,EAAE,IAAI,CAAC,SAAS,EACvB,IAAI,EAAC,QAAQ;UAEZ,IAAI,CAAC,YAAY;UACjB,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,0BAAmC,CAC5D,CACL,CACD,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 classnames from \"classnames\";\n\nexport type FlipToastIntent = \"default\" | \"critical\" | \"success\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-toast.css\",\n  tag: \"flip-toast\",\n})\nexport class FlipToast {\n  @Prop() accessibleDismissLabel?: string = \"Dismiss\";\n  @Prop() content!: string;\n  @Prop() dismissLabel?: string;\n  @Prop() duration?: number;\n  @Prop() icon?: string;\n  @Prop() intent?: FlipToastIntent = \"default\";\n  @Prop() toastId!: string;\n\n  @Event() dismiss: EventEmitter<string>;\n\n  private timeout: NodeJS.Timeout;\n\n  @Watch(\"duration\")\n  watchDuration() {\n    this.startTimer();\n  }\n\n  componentDidLoad() {\n    this.startTimer();\n  }\n\n  private startTimer() {\n    this.clearTimer();\n\n    if (this.duration === undefined) {\n      return;\n    }\n\n    this.timeout = setTimeout(() => {\n      this.dismiss.emit(this.toastId);\n    }, this.duration);\n  }\n\n  private clearTimer() {\n    if (!Boolean(this.timeout)) {\n      return;\n    }\n\n    clearTimeout(this.timeout);\n    this.timeout = undefined;\n  }\n\n  private onDismiss = () => {\n    this.dismiss.emit(this.toastId);\n  };\n\n  render() {\n    const className = classnames(\"toast\", `toast--intent-${this.intent}`);\n\n    return (\n      <Host>\n        <div class={className}>\n          {this.icon && <span class=\"toast__icon\" innerHTML={this.icon}></span>}\n          <span class=\"toast__content\">{this.content}</span>\n          <button\n            aria-label={this.dismissLabel || this.accessibleDismissLabel}\n            class=\"toast__dismiss-button\"\n            onClick={this.onDismiss}\n            type=\"button\"\n          >\n            {this.dismissLabel}\n            {!Boolean(this.dismissLabel) && <flip-icon-close></flip-icon-close>}\n          </button>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -28,3 +28,4 @@ FlipToast.args = {
   content: `This is toast text with multiple lines. Try to keep the info as short as possible.`,
   icon: `<flip-icon-mail></flip-icon-mail>`,
 };
+//# sourceMappingURL=flip-toast.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"flip-toast.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-toast/flip-toast.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,IAAI,MAAM,kBAAkB,CAAC;AAEpC,eAAe;EACb,QAAQ,EAAE;IACR,IAAI,EAAE;MACJ,KAAK,EAAE;QACL,IAAI,EAAE;UACJ,MAAM,EAAE,wCAAwC;UAChD,OAAO,EAAE,aAAa;SACvB;OACF;KACF;GACF;EACD,SAAS,EAAE,YAAY;EACvB,UAAU,EAAE;IACV,IAAI,EAAE;MACJ,IAAI,EAAE,IAAI;KACX;GACF;EACD,KAAK,EAAE,sBAAsB;CAC9B,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;EACxB,MAAM,OAAO,GAAG,oBAAoB,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC;EAEzD,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE3C,SAAS,CAAC,IAAI,GAAG;EACf,OAAO,EAAE,oFAAoF;EAC7F,IAAI,EAAE,mCAAmC;CAC1C,CAAC","sourcesContent":["import { generateStoryElement } from \"../../utils\";\nimport Docs from \"./flip-toast.mdx\";\n\nexport default {\n  argTypes: {\n    icon: {\n      table: {\n        type: {\n          detail: \"e.g. <flip-icon-mail></flip-icon-mail>\",\n          summary: \"flip-icon-*\",\n        },\n      },\n    },\n  },\n  component: \"flip-toast\",\n  parameters: {\n    docs: {\n      page: Docs,\n    },\n  },\n  title: \"Components/FlipToast\",\n};\n\nconst Template = (args) => {\n  const element = generateStoryElement(\"flip-toast\", args);\n\n  return element;\n};\n\nexport const FlipToast = Template.bind({});\n\nFlipToast.args = {\n  content: `This is toast text with multiple lines. Try to keep the info as short as possible.`,\n  icon: `<flip-icon-mail></flip-icon-mail>`,\n};\n"]}

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

@@ -155,3 +155,4 @@ export class FlipToastProvider {
     }
   }; }
 }
+//# sourceMappingURL=flip-toast-provider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"flip-toast-provider.js","sourceRoot":"","sources":["../../../../src/components/flip-toast-provider/flip-toast-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAuBxE,MAAM,OAAO,iBAAiB;EAJ9B;IAWmB,WAAM,GAAuB,EAAE,CAAC;IAoDjD,cAAS,GAAG,CAAC,KAAmC,EAAE,EAAE;MAClD,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,MAAM,CACnC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,KAAK,KAAK,CAAC,MAAM,CAC1C,CAAC;IACJ,CAAC,CAAC;GAiBH;EAvEC;;;;KAIG;EAEH,KAAK,CAAC,QAAQ;IACZ,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;EACnB,CAAC;EAED;;;;KAIG;EAEH,KAAK,CAAC,OAAO,CAAC,OAAe;IAC3B,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,KAAK,OAAO,CAAC,CAAC;EAC9E,CAAC;EAED;;;;KAIG;EAEH,KAAK,CAAC,KAAK,CAAC,QAAyB;IACnC,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,KAAK,QAAQ,CAAC,OAAO,CAAC,EAAE;MACnE,OAAO;KACR;IAED,MAAM,QAAQ,GACZ,IAAI,CAAC,cAAc,KAAK,SAAS;MAC/B,CAAC,CAAC,QAAQ,CAAC,QAAQ;MACnB,CAAC,CAAC,IAAI,CAAC,cAAc,KAAK,CAAC;QAC3B,CAAC,CAAC,SAAS;QACX,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC;IAE1B,MAAM,cAAc,mCACf,QAAQ,KACX,SAAS,EAAE,IAAI,IAAI,EAAE,EACrB,QAAQ,EACR,OAAO,EAAE,QAAQ,CAAC,OAAO,IAAI,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,KAAK,CAAC,CAAC,GACvE,CAAC;IAEF,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;IAE/C,OAAO,cAAc,CAAC;EACxB,CAAC;EAQD,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,IAAI,EAAC,QAAQ;MACjB,kBAAY,OAAO,EAAC,IAAI,IACrB,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAC1B,gCACE,GAAG,EAAE,KAAK,CAAC,OAAO,EAClB,SAAS,EAAE,IAAI,CAAC,SAAS,IACrB,KAAK,EACG,CACf,CAAC,CACS,CACR,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Method, Prop, State } from \"@stencil/core\";\nimport { FlipToastCustomEvent } from \"../../components\";\nimport { FlipToastIntent } from \"../flip-toast/flip-toast\";\n\nexport type FlipToastConfig = {\n  accessibleDismissLabel?: string;\n  content: string;\n  dismissLabel?: string;\n  duration?: number;\n  icon?: string;\n  intent?: FlipToastIntent;\n  toastId?: string;\n};\n\nexport type FlipToastMessage = FlipToastConfig & {\n  createdAt: Date;\n  toastId: string;\n};\n\n@Component({\n  shadow: true,\n  tag: \"flip-toast-provider\",\n})\nexport class FlipToastProvider {\n  /**\n   * Optional global duration for all toasts. Overrides any durations set via\n   * the `toast` method. Set to 0 to disable automatic closing of toasts.\n   */\n  @Prop() globalDuration?: number;\n\n  @State() private toasts: FlipToastMessage[] = [];\n\n  /**\n   * Clear all toasts\n   * @param newToast\n   * @returns\n   */\n  @Method()\n  async clearAll() {\n    this.toasts = [];\n  }\n\n  /**\n   * Dismiss a toast\n   * @param toastId\n   * @returns\n   */\n  @Method()\n  async dismiss(toastId: string) {\n    this.toasts = [...this.toasts].filter((toast) => toast.toastId !== toastId);\n  }\n\n  /**\n   * Create a new toast\n   * @param newToast\n   * @returns\n   */\n  @Method()\n  async toast(newToast: FlipToastConfig): Promise<FlipToastMessage> {\n    if (this.toasts.some((toast) => toast.toastId === newToast.toastId)) {\n      return;\n    }\n\n    const duration =\n      this.globalDuration === undefined\n        ? newToast.duration\n        : this.globalDuration === 0\n        ? undefined\n        : this.globalDuration;\n\n    const newToastWithId: FlipToastMessage = {\n      ...newToast,\n      createdAt: new Date(),\n      duration,\n      toastId: newToast.toastId || String(Math.round(Math.random() * 10000)),\n    };\n\n    this.toasts = [...this.toasts, newToastWithId];\n\n    return newToastWithId;\n  }\n\n  onDismiss = (event: FlipToastCustomEvent<string>) => {\n    this.toasts = [...this.toasts].filter(\n      (toast) => toast.toastId !== event.detail\n    );\n  };\n\n  render() {\n    return (\n      <Host role=\"status\">\n        <flip-stack spacing=\"12\">\n          {this.toasts.map((toast) => (\n            <flip-toast\n              key={toast.toastId}\n              onDismiss={this.onDismiss}\n              {...toast}\n            ></flip-toast>\n          ))}\n        </flip-stack>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -56,3 +56,4 @@ const Template = () => {
   return container;
 };
 export const FlipToastProvider = Template.bind({});
+//# sourceMappingURL=flip-toast-provider.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"flip-toast-provider.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-toast-provider/flip-toast-provider.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,IAAI,MAAM,2BAA2B,CAAC;AAE7C,eAAe;EACb,SAAS,EAAE,qBAAqB;EAChC,UAAU,EAAE;IACV,IAAI,EAAE;MACJ,IAAI,EAAE,IAAI;MACV,MAAM,EAAE;QACN,IAAI,EAAE;;;;;;;;;;;;;;uCAcyB;OAChC;KACF;GACF;EACD,KAAK,EAAE,8BAA8B;CACtC,CAAC;AAEF,MAAM,QAAQ,GAAG,GAAG,EAAE;EACpB,MAAM,QAAQ,GAAG;IACf,aAAa;IACb,oFAAoF;IACpF,4HAA4H;GAC7H,CAAC;EAEF,MAAM,OAAO,GAAsB,CAAC,SAAS,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC;EAEtE,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;EAChD,MAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;EAC3D,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;EAC1D,MAAM,OAAO,GAAG,oBAAoB,CAClC,qBAAqB,EACrB,EAAE,CAC6B,CAAC;EAElC,YAAY,CAAC,OAAO,GAAG,MAAM,CAAC;EAC9B,YAAY,CAAC,KAAK,GAAG,qBAAqB,CAAC;EAC3C,YAAY,CAAC,KAAK,CAAC,WAAW,GAAG,QAAQ,CAAC;EAC1C,YAAY,CAAC,KAAK,CAAC,YAAY,GAAG,MAAM,CAAC;EAEzC,WAAW,CAAC,KAAK,GAAG,WAAW,CAAC;EAChC,WAAW,CAAC,KAAK,CAAC,YAAY,GAAG,MAAM,CAAC;EAExC,YAAY,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;IAC1C,OAAO,CAAC,KAAK,CAAC;MACZ,OAAO,EAAE,CAAC,GAAG,QAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC;MACzD,QAAQ,EAAE,IAAI;MACd,IAAI,EAAE,mCAAmC;MACzC,MAAM,EAAE,CAAC,GAAG,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC;KACxD,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,WAAW,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,CAAC;EAEhE,SAAS,CAAC,MAAM,CAAC,YAAY,EAAE,WAAW,EAAE,OAAO,CAAC,CAAC;EAErD,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { FlipToastIntent } from \"../flip-toast/flip-toast\";\nimport { generateStoryElement } from \"../../utils\";\nimport Docs from \"./flip-toast-provider.mdx\";\n\nexport default {\n  component: \"flip-toast-provider\",\n  parameters: {\n    docs: {\n      page: Docs,\n      source: {\n        code: `const toasts = document.createElement('flip-toast-provider');\nconst trigger = document.createElement('button');\n\ntrigger.innerText = 'Create toast';\n\ntrigger.addEventListener(\"click\", () => {\n  toasts.toast({\n    content: \"Hello World!\",\n    duration: 10000,\n    icon: \"<flip-icon-mail></flip-icon-mail>\",\n    intent: 'info'\n  });\n});\n\ndocument.body.append(trigger, toasts);`,\n      },\n    },\n  },\n  title: \"Components/FlipToastProvider\",\n};\n\nconst Template = () => {\n  const contents = [\n    \"Hello World\",\n    \"This is toast text with multiple lines. Try to keep the info as short as possible.\",\n    \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.\",\n  ];\n\n  const intents: FlipToastIntent[] = [\"default\", \"critical\", \"success\"];\n\n  const container = document.createElement(\"div\");\n  const createButton = document.createElement(\"flip-button\");\n  const clearButton = document.createElement(\"flip-button\");\n  const element = generateStoryElement(\n    \"flip-toast-provider\",\n    {}\n  ) as HTMLFlipToastProviderElement;\n\n  createButton.variant = \"flat\";\n  createButton.label = \"Create random toast\";\n  createButton.style.marginRight = \"0.5rem\";\n  createButton.style.marginBottom = \"1rem\";\n\n  clearButton.label = \"Clear all\";\n  clearButton.style.marginBottom = \"1rem\";\n\n  createButton.addEventListener(\"click\", () => {\n    element.toast({\n      content: [...contents].sort(() => Math.random() - 0.5)[0],\n      duration: 6000,\n      icon: \"<flip-icon-mail></flip-icon-mail>\",\n      intent: [...intents].sort(() => Math.random() - 0.5)[0],\n    });\n  });\n\n  clearButton.addEventListener(\"click\", () => element.clearAll());\n\n  container.append(createButton, clearButton, element);\n\n  return container;\n};\n\nexport const FlipToastProvider = Template.bind({});\n"]}

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

@@ -220,3 +220,4 @@ export class FlipTooltip {
       "passive": true
     }]; }
 }
+//# sourceMappingURL=flip-tooltip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"flip-tooltip.js","sourceRoot":"","sources":["../../../../src/components/flip-tooltip/flip-tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  computePosition,\n  ComputePositionConfig,\n  ComputePositionReturn,\n  flip,\n  offset,\n  shift,\n} from \"@floating-ui/dom\";\nimport { Component, h, Host, Listen, Prop, State, Watch } from \"@stencil/core\";\n\nexport type FlipTooltipPosition = \"top\" | \"right\" | \"bottom\" | \"left\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-tooltip.css\",\n  tag: \"flip-tooltip\",\n})\nexport class FlipTooltip {\n  @Prop() content!: string;\n  @Prop() delay?: number = 300;\n  @Prop() position?: FlipTooltipPosition = \"top\";\n\n  @State() actualPosition: ComputePositionReturn;\n  @State() visible = false;\n\n  private showTimeout: NodeJS.Timeout;\n  private options: Partial<ComputePositionConfig>;\n  private popperEl: HTMLSpanElement;\n  private referenceEl: HTMLSpanElement;\n\n  @Watch(\"position\")\n  watchPosition() {\n    this.updateOptions();\n  }\n\n  @Listen(\"mouseenter\")\n  onMouseEnter() {\n    this.showWithDelay();\n  }\n\n  @Listen(\"mouseleave\")\n  onMouseLeave() {\n    this.hide();\n  }\n\n  @Listen(\"resize\", { target: \"window\" })\n  onWindowResize() {\n    this.reposition();\n  }\n\n  @Listen(\"scroll\", { target: \"window\" })\n  onWindowScroll() {\n    this.reposition();\n  }\n\n  componentWillLoad() {\n    this.reposition();\n  }\n\n  componentDidLoad() {\n    this.updateOptions();\n  }\n\n  private onKeydown = (event: KeyboardEvent) => {\n    if (event.code === \"Escape\") {\n      this.hide();\n    }\n  };\n\n  private reposition = async () => {\n    if (!Boolean(this.referenceEl) || !Boolean(this.popperEl)) {\n      return;\n    }\n\n    this.actualPosition = await computePosition(\n      this.referenceEl,\n      this.popperEl,\n      this.options\n    );\n  };\n\n  private show = () => {\n    this.visible = true;\n\n    requestAnimationFrame(() => {\n      this.reposition();\n    });\n  };\n\n  private showWithDelay = () => {\n    if (Boolean(this.showTimeout)) {\n      clearTimeout(this.showTimeout);\n      this.showTimeout = undefined;\n    }\n\n    this.showTimeout = setTimeout(() => {\n      this.show();\n    }, this.delay);\n  };\n\n  private hide = () => {\n    if (Boolean(this.showTimeout)) {\n      clearTimeout(this.showTimeout);\n      this.showTimeout = undefined;\n    }\n\n    this.visible = false;\n  };\n\n  private updateOptions = () => {\n    const margin =\n      +getComputedStyle(document.documentElement)\n        .getPropertyValue(\"--s-space-12\")\n        .replace(\"rem\", \"\") * 16;\n\n    this.options = {\n      middleware: [offset(margin), shift(), flip()],\n      placement: this.position,\n      strategy: \"fixed\",\n    };\n  };\n\n  private getArrowStyles = () => {\n    if (this.actualPosition?.placement === \"top\") {\n      return {\n        top: \"100%\",\n        left: \"50%\",\n        transform: \"translate3d(-50%, -50%, 0) rotate(45deg)\",\n      };\n    }\n\n    if (this.actualPosition?.placement === \"bottom\") {\n      return {\n        bottom: \"100%\",\n        left: \"50%\",\n        transform: \"translate3d(-50%, 50%, 0) rotate(45deg)\",\n      };\n    }\n\n    if (this.actualPosition?.placement === \"right\") {\n      return {\n        top: \"50%\",\n        right: \"100%\",\n        transform: \"translate3d(50%, -50%, 0) rotate(45deg)\",\n      };\n    }\n\n    if (this.actualPosition?.placement === \"left\") {\n      return {\n        top: \"50%\",\n        left: \"100%\",\n        transform: \"translate3d(-50%, -50%, 0) rotate(45deg)\",\n      };\n    }\n  };\n\n  render() {\n    const arrowStyles = this.getArrowStyles();\n\n    return (\n      <Host onKeydown={this.onKeydown}>\n        <span class=\"tooltip\">\n          <span\n            class=\"tooltip__reference\"\n            aria-describedby=\"tooltip\"\n            onBlur={this.hide}\n            onClick={this.hide}\n            onFocus={this.show}\n            ref={(el) => (this.referenceEl = el)}\n            tabIndex={0}\n          >\n            <slot></slot>\n          </span>\n          <span\n            class=\"tooltip__popper\"\n            ref={(el) => (this.popperEl = el)}\n            style={{\n              top: Boolean(this.actualPosition)\n                ? `${this.actualPosition?.y}px`\n                : \"\",\n              left: Boolean(this.actualPosition)\n                ? `${this.actualPosition?.x}px`\n                : \"\",\n            }}\n          >\n            {this.visible && (\n              <span class=\"tooltip__bubble\" id=\"tooltip\" role=\"tooltip\">\n                <span class=\"tooltip__content\" innerHTML={this.content}></span>\n                <span class=\"tooltip__arrow\" style={arrowStyles}></span>\n              </span>\n            )}\n          </span>\n        </span>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -31,3 +31,4 @@ FlipTooltip.args = {
   content: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid officia, enim reiciendis esse minus impedit earum veniam, sunt eveniet.`,
   position: "top",
 };
+//# sourceMappingURL=flip-tooltip.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"flip-tooltip.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-tooltip/flip-tooltip.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,aAAa;AACb,OAAO,IAAI,MAAM,oBAAoB,CAAC;AAEtC,eAAe;EACb,SAAS,EAAE,cAAc;EACzB,UAAU,EAAE;IACV,CAAC,KAAK,EAAE,EAAE;MACR,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;MAEhD,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;MACjC,SAAS,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,CAAC;MACtC,SAAS,CAAC,KAAK,CAAC,cAAc,GAAG,QAAQ,CAAC;MAC1C,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;MAClC,SAAS,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;MAE1B,OAAO,SAAS,CAAC;IACnB,CAAC;GACF;EACD,UAAU,EAAE;IACV,IAAI,EAAE;MACJ,IAAI,EAAE,IAAI;KACX;GACF;EACD,KAAK,EAAE,wBAAwB;CAChC,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;EACxB,MAAM,OAAO,GAAG,oBAAoB,CAAC,cAAc,EAAE,IAAI,CAAC,CAAC;EAE3D,OAAO,CAAC,SAAS,GAAG,mBAAmB,CAAC;EAExC,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE7C,WAAW,CAAC,IAAI,GAAG;EACjB,OAAO,EAAE,0IAA0I;EACnJ,QAAQ,EAAE,KAAK;CAChB,CAAC","sourcesContent":["import { generateStoryElement } from \"../../utils\";\n// @ts-ignore\nimport Docs from \"./flip-tooltip.mdx\";\n\nexport default {\n  component: \"flip-tooltip\",\n  decorators: [\n    (story) => {\n      const container = document.createElement(\"div\");\n\n      container.style.display = \"flex\";\n      container.style.alignItems = \"center\";\n      container.style.justifyContent = \"center\";\n      container.style.padding = \"140px\";\n      container.append(story());\n\n      return container;\n    },\n  ],\n  parameters: {\n    docs: {\n      page: Docs,\n    },\n  },\n  title: \"Components/FlipTooltip\",\n};\n\nconst Template = (args) => {\n  const element = generateStoryElement(\"flip-tooltip\", args);\n\n  element.innerHTML = \"Hover or focus me\";\n\n  return element;\n};\n\nexport const FlipTooltip = Template.bind({});\n\nFlipTooltip.args = {\n  content: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid officia, enim reiciendis esse minus impedit earum veniam, sunt eveniet.`,\n  position: \"top\",\n};\n"]}

package/dist/collection/components/flip-video-thumbnail/flip-video-thumbnail.css

@@ -0,0 +1,68 @@
+:host {
+  display: flex;
+  width: 100%;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.video-thumbnail {
+  position: relative;
+  display: inline-flex;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+  container-type: inline-size;
+  container-name: video-thumbnail;
+}
+
+.video-thumbnail:after {
+    position: absolute;
+    background-color: rgba(0, 0, 0, 0.05);
+    content: "";
+    inset: 0;
+  }
+
+.video-thumbnail:focus {
+    outline-color: var(--s-focus-default);
+  }
+
+.video-thumbnail__image {
+  width: 100%;
+}
+
+.video-thumbnail__duration {
+  position: absolute;
+  bottom: var(--s-space-8);
+  left: var(--s-space-8);
+  padding: var(--s-space-2) var(--s-space-8);
+  border-radius: var(--s-border-radius-sm);
+  color: var(--s-text-on-image);
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
+    rgba(255, 255, 255, 0.1);
+  font-size: var(--s-font-size-sm);
+  font-weight: var(--s-font-weight-medium);
+  line-height: var(--s-line-height-sm);
+  letter-spacing: var(--s-letter-spacing-tighter);
+}
+
+.video-thumbnail__play-icon {
+  position: absolute;
+  z-index: 1;
+  top: 50%;
+  left: 50%;
+  width: 2.5rem;
+  height: 2.5rem;
+  transform: translate3d(-50%, -50%, 0);
+}
+
+@container video-thumbnail (min-width: 448px) {
+  .video-thumbnail__play-icon {
+    width: 3.5rem;
+    height: 4.5rem;
+  }
+}

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

@@ -0,0 +1,96 @@
+import { Component, h, Host, Prop } from "@stencil/core";
+export class FlipVideoThumbnail {
+  constructor() {
+    this.durationLabel = "Duration";
+  }
+  render() {
+    return (h(Host, null,
+      h("button", { "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" },
+        h("img", { alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }),
+        this.duration && (h("span", { class: "video-thumbnail__duration", id: "duration" },
+          h("flip-visually-hidden", null, this.durationLabel),
+          this.duration)),
+        h("svg", { class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" },
+          h("path", { d: "M15 14.65V25.35C15 26.1167 15.35 26.7 16.05 27.1C16.75 27.5 17.4333 27.4667 18.1 27L26.4 21.7C27.0333 21.3 27.35 20.7333 27.35 20C27.35 19.2667 27.0333 18.7 26.4 18.3L18.1 13C17.4333 12.5333 16.75 12.5 16.05 12.9C15.35 13.3 15 13.8833 15 14.65ZM20 40C17.2333 40 14.6333 39.4747 12.2 38.424C9.76667 37.3747 7.65 35.95 5.85 34.15C4.05 32.35 2.62533 30.2333 1.576 27.8C0.525334 25.3667 0 22.7667 0 20C0 17.2333 0.525334 14.6333 1.576 12.2C2.62533 9.76667 4.05 7.65 5.85 5.85C7.65 4.05 9.76667 2.62467 12.2 1.574C14.6333 0.524667 17.2333 0 20 0C22.7667 0 25.3667 0.524667 27.8 1.574C30.2333 2.62467 32.35 4.05 34.15 5.85C35.95 7.65 37.3747 9.76667 38.424 12.2C39.4747 14.6333 40 17.2333 40 20C40 22.7667 39.4747 25.3667 38.424 27.8C37.3747 30.2333 35.95 32.35 34.15 34.15C32.35 35.95 30.2333 37.3747 27.8 38.424C25.3667 39.4747 22.7667 40 20 40Z", fill: "white", "fill-opacity": "0.95" })))));
+  }
+  static get is() { return "flip-video-thumbnail"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-video-thumbnail.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-video-thumbnail.css"]
+  }; }
+  static get properties() { return {
+    "durationLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "duration-label",
+      "reflect": false,
+      "defaultValue": "\"Duration\""
+    },
+    "duration": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "duration",
+      "reflect": false
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "src": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "src",
+      "reflect": false
+    }
+  }; }
+}
+//# sourceMappingURL=flip-video-thumbnail.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"flip-video-thumbnail.js","sourceRoot":"","sources":["../../../../src/components/flip-video-thumbnail/flip-video-thumbnail.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,kBAAkB;EAL/B;IAMU,kBAAa,GAAY,UAAU,CAAC;GA4C7C;EAvCC,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,kCAEI,IAAI,CAAC,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,gBAE1C,IAAI,CAAC,KAAK,EACtB,KAAK,EAAC,iBAAiB,EACvB,IAAI,EAAC,QAAQ;QAEb,WACE,GAAG,EAAC,EAAE,EACN,KAAK,EAAC,wBAAwB,EAC9B,OAAO,EAAC,MAAM,EACd,GAAG,EAAE,IAAI,CAAC,GAAG,GACb;QACD,IAAI,CAAC,QAAQ,IAAI,CAChB,YAAM,KAAK,EAAC,2BAA2B,EAAC,EAAE,EAAC,UAAU;UACnD,gCAAuB,IAAI,CAAC,aAAa,CAAwB;UAChE,IAAI,CAAC,QAAQ,CACT,CACR;QACD,WACE,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B;UAElC,YACE,CAAC,EAAC,20BAA20B,EAC70B,IAAI,EAAC,OAAO,kBACC,MAAM,GACnB,CACE,CACC,CACJ,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from \"@stencil/core\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-video-thumbnail.css\",\n  tag: \"flip-video-thumbnail\",\n})\nexport class FlipVideoThumbnail {\n  @Prop() durationLabel?: string = \"Duration\";\n  @Prop() duration?: string;\n  @Prop() label!: string;\n  @Prop() src!: string;\n\n  render() {\n    return (\n      <Host>\n        <button\n          aria-describedby={\n            this.duration !== undefined ? \"duration\" : undefined\n          }\n          aria-label={this.label}\n          class=\"video-thumbnail\"\n          type=\"button\"\n        >\n          <img\n            alt=\"\"\n            class=\"video-thumbnail__image\"\n            loading=\"lazy\"\n            src={this.src}\n          />\n          {this.duration && (\n            <span class=\"video-thumbnail__duration\" id=\"duration\">\n              <flip-visually-hidden>{this.durationLabel}</flip-visually-hidden>\n              {this.duration}\n            </span>\n          )}\n          <svg\n            class=\"video-thumbnail__play-icon\"\n            fill=\"none\"\n            viewBox=\"0 0 40 40\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M15 14.65V25.35C15 26.1167 15.35 26.7 16.05 27.1C16.75 27.5 17.4333 27.4667 18.1 27L26.4 21.7C27.0333 21.3 27.35 20.7333 27.35 20C27.35 19.2667 27.0333 18.7 26.4 18.3L18.1 13C17.4333 12.5333 16.75 12.5 16.05 12.9C15.35 13.3 15 13.8833 15 14.65ZM20 40C17.2333 40 14.6333 39.4747 12.2 38.424C9.76667 37.3747 7.65 35.95 5.85 34.15C4.05 32.35 2.62533 30.2333 1.576 27.8C0.525334 25.3667 0 22.7667 0 20C0 17.2333 0.525334 14.6333 1.576 12.2C2.62533 9.76667 4.05 7.65 5.85 5.85C7.65 4.05 9.76667 2.62467 12.2 1.574C14.6333 0.524667 17.2333 0 20 0C22.7667 0 25.3667 0.524667 27.8 1.574C30.2333 2.62467 32.35 4.05 34.15 5.85C35.95 7.65 37.3747 9.76667 38.424 12.2C39.4747 14.6333 40 17.2333 40 20C40 22.7667 39.4747 25.3667 38.424 27.8C37.3747 30.2333 35.95 32.35 34.15 34.15C32.35 35.95 30.2333 37.3747 27.8 38.424C25.3667 39.4747 22.7667 40 20 40Z\"\n              fill=\"white\"\n              fill-opacity=\"0.95\"\n            />\n          </svg>\n        </button>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,22 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./flip-video-thumbnail.mdx";
+export default {
+  component: "flip-video-thumbnail",
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/FlipVideoThumbnail",
+};
+const Template = (args) => {
+  const element = generateStoryElement("flip-video-thumbnail", args);
+  return element;
+};
+export const FlipVideoThumbnail = Template.bind({});
+FlipVideoThumbnail.args = {
+  duration: "1:23",
+  label: "Play video of a cute pug.",
+  src: "https://picsum.photos/id/1062/680/380",
+};
+//# sourceMappingURL=flip-video-thumbnail.stories.js.map

package/dist/collection/components/flip-video-thumbnail/flip-video-thumbnail.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-video-thumbnail.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-video-thumbnail/flip-video-thumbnail.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,IAAI,MAAM,4BAA4B,CAAC;AAE9C,eAAe;EACb,SAAS,EAAE,sBAAsB;EACjC,UAAU,EAAE;IACV,IAAI,EAAE;MACJ,IAAI,EAAE,IAAI;KACX;GACF;EACD,KAAK,EAAE,+BAA+B;CACvC,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;EACxB,MAAM,OAAO,GAAG,oBAAoB,CAAC,sBAAsB,EAAE,IAAI,CAAC,CAAC;EAEnE,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEpD,kBAAkB,CAAC,IAAI,GAAG;EACxB,QAAQ,EAAE,MAAM;EAChB,KAAK,EAAE,2BAA2B;EAClC,GAAG,EAAE,uCAAuC;CAC7C,CAAC","sourcesContent":["import { generateStoryElement } from \"../../utils\";\nimport Docs from \"./flip-video-thumbnail.mdx\";\n\nexport default {\n  component: \"flip-video-thumbnail\",\n  parameters: {\n    docs: {\n      page: Docs,\n    },\n  },\n  title: \"Components/FlipVideoThumbnail\",\n};\n\nconst Template = (args) => {\n  const element = generateStoryElement(\"flip-video-thumbnail\", args);\n\n  return element;\n};\n\nexport const FlipVideoThumbnail = Template.bind({});\n\nFlipVideoThumbnail.args = {\n  duration: \"1:23\",\n  label: \"Play video of a cute pug.\",\n  src: \"https://picsum.photos/id/1062/680/380\",\n};\n"]}

package/dist/collection/components/flip-visually-hidden/flip-visually-hidden.js

@@ -13,3 +13,4 @@ export class FlipVisuallyHidden {
     "$": ["flip-visually-hidden.css"]
   }; }
 }
+//# sourceMappingURL=flip-visually-hidden.js.map

package/dist/collection/components/flip-visually-hidden/flip-visually-hidden.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-visually-hidden.js","sourceRoot":"","sources":["../../../../src/components/flip-visually-hidden/flip-visually-hidden.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,kBAAkB;EAC7B,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,eAAQ,CACH,CACR,CAAC;EACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host } from \"@stencil/core\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-visually-hidden.css\",\n  tag: \"flip-visually-hidden\",\n})\nexport class FlipVisuallyHidden {\n  render() {\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/flip-visually-hidden/flip-visually-hidden.stories.js

@@ -15,3 +15,4 @@ const Template = (args) => {
 };
 export const FlipVisuallyHidden = Template.bind({});
 FlipVisuallyHidden.args = {};
+//# sourceMappingURL=flip-visually-hidden.stories.js.map

package/dist/collection/components/flip-visually-hidden/flip-visually-hidden.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-visually-hidden.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-visually-hidden/flip-visually-hidden.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,IAAI,MAAM,4BAA4B,CAAC;AAE9C,eAAe;EACb,SAAS,EAAE,sBAAsB;EACjC,UAAU,EAAE;IACV,IAAI,EAAE;MACJ,IAAI,EAAE,IAAI;KACX;GACF;EACD,KAAK,EAAE,+BAA+B;CACvC,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;EACxB,MAAM,OAAO,GAAG,oBAAoB,CAAC,sBAAsB,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC;EAE9E,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEpD,kBAAkB,CAAC,IAAI,GAAG,EAAE,CAAC","sourcesContent":["import { generateStoryElement } from \"../../utils\";\nimport Docs from \"./flip-visually-hidden.mdx\";\n\nexport default {\n  component: \"flip-visually-hidden\",\n  parameters: {\n    docs: {\n      page: Docs,\n    },\n  },\n  title: \"Components/FlipVisuallyHidden\",\n};\n\nconst Template = (args) => {\n  const element = generateStoryElement(\"flip-visually-hidden\", args, \"Content\");\n\n  return element;\n};\n\nexport const FlipVisuallyHidden = Template.bind({});\n\nFlipVisuallyHidden.args = {};\n"]}

package/dist/collection/index.js

@@ -1 +1,2 @@
 export {};
+//# sourceMappingURL=index.js.map

package/dist/collection/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"","sourcesContent":["export { Components, JSX } from \"./components\";\n"]}

package/dist/collection/utils.js

@@ -13,6 +13,26 @@ export function generateStoryElement(tag, args, content) {
   }
   return element;
 }
+export function getVisibleHeight(element, container) {
+  const scrollTop = container.scrollTop;
+  const scrollBot = scrollTop + container.clientHeight;
+  const containerRect = container.getBoundingClientRect();
+  const eleRect = element.getBoundingClientRect();
+  const rect = {
+    top: eleRect.top - containerRect.top,
+    right: eleRect.right - containerRect.right,
+    bottom: eleRect.bottom - containerRect.bottom,
+    left: eleRect.left - containerRect.left,
+  };
+  const eleTop = rect.top + scrollTop;
+  const eleBot = eleTop + element.offsetHeight;
+  const visibleTop = eleTop < scrollTop ? scrollTop : eleTop;
+  const visibleBot = eleBot > scrollBot ? scrollBot : eleBot;
+  return visibleBot - visibleTop;
+}
+export function isMobileViewport() {
+  return !window.matchMedia("(min-width: 768px)").matches;
+}
 export function querySelectorAllDeep(root, selector) {
   function collectAllElementsDeep(selector, root) {
     if (!Boolean(root)) {
@@ -37,3 +57,4 @@ export function querySelectorAllDeep(root, selector) {
   const matches = collectAllElementsDeep(selector, root).filter((match, index, matches) => !matches.some((m, i) => m.isSameNode(match) && i > index));
   return matches;
 }
+//# sourceMappingURL=utils.js.map

package/dist/collection/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"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","sourcesContent":["import { EventEmitter } from \"@stencil/core\";\n\nexport interface FlipFormInput<ValueType = string> {\n  flipAriaDescribedby?: string;\n  disabled?: boolean;\n  invalid?: boolean;\n  required?: boolean;\n  value?: ValueType;\n  valueChange: EventEmitter;\n}\n\nexport function generateStoryElement(\n  tag: string,\n  args: { [arg: string]: any },\n  content?: string\n): HTMLElement {\n  const element = document.createElement(tag);\n\n  Object.entries(args)\n    .filter((arg) => arg[1] !== undefined && arg[1] !== null && arg[1] !== \"\")\n    .forEach(([attr, value]) => {\n      if (typeof value === \"object\") {\n        return (element[attr] = value);\n      }\n\n      return element.setAttribute(\n        attr.replace(\n          /[A-Z]+(?![a-z])|[A-Z]/g,\n          ($, ofs) => (ofs ? \"-\" : \"\") + $.toLowerCase()\n        ),\n        String(value)\n      );\n    });\n\n  if (Boolean(content)) {\n    element.innerHTML = content;\n  }\n\n  return element;\n}\n\nexport function getVisibleHeight(element: HTMLElement, container: HTMLElement) {\n  const scrollTop = container.scrollTop;\n  const scrollBot = scrollTop + container.clientHeight;\n  const containerRect = container.getBoundingClientRect();\n  const eleRect = element.getBoundingClientRect();\n  const rect = {\n    top: eleRect.top - containerRect.top,\n    right: eleRect.right - containerRect.right,\n    bottom: eleRect.bottom - containerRect.bottom,\n    left: eleRect.left - containerRect.left,\n  };\n\n  const eleTop = rect.top + scrollTop;\n  const eleBot = eleTop + element.offsetHeight;\n  const visibleTop = eleTop < scrollTop ? scrollTop : eleTop;\n  const visibleBot = eleBot > scrollBot ? scrollBot : eleBot;\n\n  return visibleBot - visibleTop;\n}\n\nexport function isMobileViewport() {\n  return !window.matchMedia(\"(min-width: 768px)\").matches;\n}\n\nexport function querySelectorAllDeep<TargetType extends Element = HTMLElement>(\n  root: HTMLElement,\n  selector: string\n): TargetType[] {\n  function collectAllElementsDeep(\n    selector: string,\n    root?: Element | ShadowRoot\n  ): TargetType[] {\n    if (!Boolean(root)) {\n      return [];\n    }\n\n    const lightDomMatches = Array.from(\n      root.querySelectorAll<TargetType>(selector)\n    );\n\n    const slottedChildren =\n      Boolean(window.HTMLSlotElement) && root instanceof HTMLSlotElement\n        ? root.assignedElements()\n        : [];\n\n    const children = [...Array.from(root.children), ...slottedChildren];\n\n    const shadowRoot = (root as Element).shadowRoot;\n\n    const shadowRootElements = collectAllElementsDeep(selector, shadowRoot);\n\n    const matches: TargetType[] = [\n      ...lightDomMatches,\n      ...children\n        .map((match) => collectAllElementsDeep(selector, match))\n        .flat(),\n      ...shadowRootElements,\n    ];\n\n    return matches;\n  }\n\n  const matches = collectAllElementsDeep(selector, root).filter(\n    (match, index, matches) =>\n      !matches.some((m, i) => m.isSameNode(match) && i > index)\n  );\n\n  return matches;\n}\n"]}

package/dist/components/_commonjsHelpers.js

@@ -0,0 +1,38 @@
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+function createCommonjsModule(fn, basedir, module) {
+	return module = {
+		path: basedir,
+		exports: {},
+		require: function (path, base) {
+			return commonjsRequire();
+		}
+	}, fn(module, module.exports), module.exports;
+}
+
+function getAugmentedNamespace(n) {
+	if (n.__esModule) return n;
+	var a = Object.defineProperty({}, '__esModule', {value: true});
+	Object.keys(n).forEach(function (k) {
+		var d = Object.getOwnPropertyDescriptor(n, k);
+		Object.defineProperty(a, k, d.get ? d : {
+			enumerable: true,
+			get: function () {
+				return n[k];
+			}
+		});
+	});
+	return a;
+}
+
+function commonjsRequire () {
+	throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
+}
+
+export { commonjsGlobal as a, getAugmentedNamespace as b, createCommonjsModule as c, commonjsRequire as d, getDefaultExportFromCjs as g };
+
+//# sourceMappingURL=_commonjsHelpers.js.map

package/dist/components/_commonjsHelpers.js.map

@@ -0,0 +1 @@
+{"file":"_commonjsHelpers.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}