npm - @getflip/swirl-components - Versions diffs - 0.2.0 → 0.3.0 - Mend

@getflip/swirl-components 0.2.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1766) hide show

package/dist/collection/components/flip-radio-group/flip-radio-group.js CHANGED Viewed

@@ -20,6 +20,7 @@ export class FlipRadioGroup {
       radio.addEventListener("valueChange", () => {
         if (radio.checked === true || radio.checked === "true") {
           this.valueChange.emit(radio.value);
+          this.value = radio.value;
           this.radioButtons.forEach((r, k) => {
             if (String(k) === key) {
               return;
@@ -31,7 +32,7 @@ export class FlipRadioGroup {
     }
   }
   render() {
-    return (h(Host, { role: "radiogroup" },
+    return (h(Host, { "aria-describedby": this.flipAriaDescribedby, role: "radiogroup" },
       h("div", { class: "radio-group" },
         h("slot", null))));
   }
@@ -44,6 +45,23 @@ export class FlipRadioGroup {
     "$": ["flip-radio-group.css"]
   }; }
   static get properties() { return {
+    "flipAriaDescribedby": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "flip-aria-describedby",
+      "reflect": false
+    },
     "value": {
       "type": "string",
       "mutable": true,
@@ -59,7 +77,7 @@ export class FlipRadioGroup {
         "text": ""
       },
       "attribute": "value",
-      "reflect": false
+      "reflect": true
     }
   }; }
   static get events() { return [{
@@ -80,3 +98,4 @@ export class FlipRadioGroup {
     }]; }
   static get elementRef() { return "el"; }
 }
+//# sourceMappingURL=flip-radio-group.js.map

package/dist/collection/components/flip-radio-group/flip-radio-group.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"flip-radio-group.js","sourceRoot":"","sources":["../../../../src/components/flip-radio-group/flip-radio-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,IAAI,GACL,MAAM,eAAe,CAAC;AAcvB,MAAM,OAAO,cAAc;EAUzB,gBAAgB;IACd,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC,CAAC;IACvE,IAAI,CAAC,SAAS,EAAE,CAAC;IACjB,IAAI,CAAC,kBAAkB,EAAE,CAAC;EAC5B,CAAC;EAEO,SAAS;IACf,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;MAC5B,OAAO;KACR;IAED,MAAM,cAAc,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAC3C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CACtC,CAAC;IAEF,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,EAAE;MAC5B,OAAO;KACR;IAED,cAAc,CAAC,OAAO,GAAG,IAAI,CAAC;EAChC,CAAC;EAEO,kBAAkB;IACxB,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE;MAC5D,KAAK,CAAC,gBAAgB,CAAC,aAAa,EAAE,GAAG,EAAE;QACzC,IAAI,KAAK,CAAC,OAAO,KAAK,IAAI,IAAI,KAAK,CAAC,OAAO,KAAK,MAAM,EAAE;UACtD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;UACnC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;UAEzB,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;YACjC,IAAI,MAAM,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE;cACrB,OAAO;aACR;YAED,CAAC,CAAC,OAAO,GAAG,KAAK,CAAC;UACpB,CAAC,CAAC,CAAC;SACJ;MACH,CAAC,CAAC,CAAC;KACJ;EACH,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,wBAAmB,IAAI,CAAC,mBAAmB,EAAE,IAAI,EAAC,YAAY;MACjE,WAAK,KAAK,EAAC,aAAa;QACtB,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n} from \"@stencil/core\";\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-radio-group.css\",\n tag: \"flip-radio-group\",\n})\nexport class FlipRadioGroup {\n @Element() el: HTMLElement;\n\n @Prop() flipAriaDescribedby?: string;\n @Prop({ mutable: true, reflect: true }) value?: string;\n\n @Event() valueChange: EventEmitter<string>;\n\n private radioButtons: HTMLFlipRadioElement[];\n\n componentDidLoad() {\n this.radioButtons = Array.from(this.el.querySelectorAll(\"flip-radio\"));\n this.initValue();\n this.handleValueChanges();\n }\n\n private initValue() {\n if (this.value === undefined) {\n return;\n }\n\n const radioWithValue = this.radioButtons.find(\n (radio) => radio.value === this.value\n );\n\n if (!Boolean(radioWithValue)) {\n return;\n }\n\n radioWithValue.checked = true;\n }\n\n private handleValueChanges() {\n for (const [key, radio] of Object.entries(this.radioButtons)) {\n radio.addEventListener(\"valueChange\", () => {\n if (radio.checked === true || radio.checked === \"true\") {\n this.valueChange.emit(radio.value);\n this.value = radio.value;\n\n this.radioButtons.forEach((r, k) => {\n if (String(k) === key) {\n return;\n }\n\n r.checked = false;\n });\n }\n });\n }\n }\n\n render() {\n return (\n <Host aria-describedby={this.flipAriaDescribedby} role=\"radiogroup\">\n <div class=\"radio-group\">\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/flip-radio-group/flip-radio-group.stories.js CHANGED Viewed

@@ -23,3 +23,4 @@ FlipRadioGroup.args = {
   "aria-label": "Radio group",
   value: "2",
 };
+//# sourceMappingURL=flip-radio-group.stories.js.map

package/dist/collection/components/flip-radio-group/flip-radio-group.stories.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"flip-radio-group.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-radio-group/flip-radio-group.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,IAAI,MAAM,wBAAwB,CAAC;AAE1C,eAAe;EACb,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,CAAC,SAAS,GAAG;;;;GAInB,CAAC;EAEF,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,cAAc,CAAC,IAAI,GAAG;EACpB,YAAY,EAAE,aAAa;EAC3B,KAAK,EAAE,GAAG;CACX,CAAC","sourcesContent":["import { generateStoryElement } from \"../../utils\";\nimport Docs from \"./flip-radio-group.mdx\";\n\nexport default {\n component: \"flip-radio-group\",\n parameters: {\n docs: {\n page: Docs,\n },\n },\n title: \"Components/FlipRadioGroup\",\n};\n\nconst Template = (args) => {\n const element = generateStoryElement(\"flip-radio-group\", args);\n\n element.innerHTML = `\n <flip-radio input-id=\"radio-1\" input-name=\"radio\" label=\"Radio button #1\" value=\"1\"></flip-radio>\n <flip-radio input-id=\"radio-2\" input-name=\"radio\" label=\"Radio button #2\" value=\"2\"></flip-radio>\n <flip-radio input-id=\"radio-3\" input-name=\"radio\" label=\"Radio button #3\" value=\"3\"></flip-radio>\n `;\n\n return element;\n};\n\nexport const FlipRadioGroup = Template.bind({});\n\nFlipRadioGroup.args = {\n \"aria-label\": \"Radio group\",\n value: \"2\",\n};\n"]}

package/dist/collection/components/flip-resource-list/flip-resource-list.js CHANGED Viewed

@@ -83,3 +83,4 @@ export class FlipResourceList {
   }; }
   static get elementRef() { return "el"; }
 }
+//# sourceMappingURL=flip-resource-list.js.map

package/dist/collection/components/flip-resource-list/flip-resource-list.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"flip-resource-list.js","sourceRoot":"","sources":["../../../../src/components/flip-resource-list/flip-resource-list.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOlE,MAAM,OAAO,gBAAgB;EAL7B;IAUU,iBAAY,GAAG,CAAC,CAAC;IA6CjB,YAAO,GAAG,GAAG,EAAE;MACrB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC3C,CAAC,CAAC;IAEM,cAAS,GAAG,CAAC,KAAoB,EAAE,EAAE;MAC3C,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE;QAC7B,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,gBAAgB,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;OACpE;WAAM,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,EAAE;QAClC,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,MAAM,SAAS,GACb,IAAI,CAAC,YAAY,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;QAE1E,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC;OAClC;WAAM,IAAI,KAAK,CAAC,GAAG,KAAK,MAAM,EAAE;QAC/B,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC;OAC1B;WAAM,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE;QAC9B,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;OAC9C;IACH,CAAC,CAAC;GAgBH;EAlFC,gBAAgB;IACd,IAAI,CAAC,YAAY,EAAE,CAAC;IACpB,IAAI,CAAC,uBAAuB,EAAE,CAAC;EACjC,CAAC;EAEO,YAAY;IAClB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,CACrB,IAAI,CAAC,EAAE,CAAC,gBAAgB,CACtB,uDAAuD,CACxD,CACF,CAAC;EACJ,CAAC;EAEO,uBAAuB;IAC7B,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;;MAC1B,OAAA,MAAA,MAAA,IAAI,CAAC,UAAU,0CACX,aAAa,CACb,wDAAwD,CACzD,0CACC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAA;KAAA,CACnC,CAAC;EACJ,CAAC;EAEO,gBAAgB,CAAC,KAAa;IACpC,IAAI,CAAC,uBAAuB,EAAE,CAAC;IAE/B,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAE/B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;MAClB,OAAO;KACR;IAED,MAAM,kBAAkB,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CACtD,wDAAwD,CACzD,CAAC;IAEF,kBAAkB,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;IACjD,kBAAkB,CAAC,KAAK,EAAE,CAAC;IAE3B,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;EAC5B,CAAC;EA4BD,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,SAAS,EAAE,IAAI,CAAC,SAAS;MAC7B,gCACc,IAAI,CAAC,KAAK,EACtB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,CAAC;QAEX,eAAa,CACF,CACR,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop } from \"@stencil/core\";\n\n@Component({\n shadow: true,\n styleUrl: \"flip-resource-list.css\",\n tag: \"flip-resource-list\",\n})\nexport class FlipResourceList {\n @Element() el: HTMLElement;\n\n @Prop() label?: string;\n\n private focusedIndex = 0;\n private items: HTMLFlipResourceListItemElement[];\n\n componentDidLoad() {\n this.collectItems();\n this.removeItemsFromTabOrder();\n }\n\n private collectItems() {\n this.items = Array.from(\n this.el.querySelectorAll(\n \"flip-resource-list-item, flip-resource-list-file-item\"\n )\n );\n }\n\n private removeItemsFromTabOrder() {\n this.items.forEach((item) =>\n item.shadowRoot\n ?.querySelector(\n \".resource-list-item__content, .resource-list-file-item\"\n )\n ?.setAttribute(\"tabIndex\", \"-1\")\n );\n }\n\n private focusItemAtIndex(index: number) {\n this.removeItemsFromTabOrder();\n\n const item = this.items[index];\n\n if (!Boolean(item)) {\n return;\n }\n\n const interactiveElement = item.shadowRoot.querySelector<HTMLElement>(\n \".resource-list-item__content, .resource-list-file-item\"\n );\n\n interactiveElement.setAttribute(\"tabIndex\", \"0\");\n interactiveElement.focus();\n\n this.focusedIndex = index;\n }\n\n private onFocus = () => {\n this.focusItemAtIndex(this.focusedIndex);\n };\n\n private onKeyDown = (event: KeyboardEvent) => {\n if (event.key === \"ArrowDown\") {\n event.preventDefault();\n this.focusItemAtIndex((this.focusedIndex + 1) % this.items.length);\n } else if (event.key === \"ArrowUp\") {\n event.preventDefault();\n\n const prevIndex =\n this.focusedIndex === 0 ? this.items.length - 1 : this.focusedIndex - 1;\n\n this.focusItemAtIndex(prevIndex);\n } else if (event.key === \"Home\") {\n event.preventDefault();\n\n this.focusItemAtIndex(0);\n } else if (event.key === \"End\") {\n event.preventDefault();\n\n this.focusItemAtIndex(this.items.length - 1);\n }\n };\n\n render() {\n return (\n <Host onKeyDown={this.onKeyDown}>\n <flip-stack\n aria-label={this.label}\n onFocus={this.onFocus}\n role=\"grid\"\n tabIndex={0}\n >\n <slot></slot>\n </flip-stack>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/flip-resource-list/flip-resource-list.stories.js CHANGED Viewed

@@ -34,3 +34,4 @@ export const FlipResourceList = Template.bind({});
 FlipResourceList.args = {
   label: "A resource list",
 };
+//# sourceMappingURL=flip-resource-list.stories.js.map

package/dist/collection/components/flip-resource-list/flip-resource-list.stories.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"flip-resource-list.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-resource-list/flip-resource-list.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,IAAI,MAAM,0BAA0B,CAAC;AAE5C,eAAe;EACb,SAAS,EAAE,oBAAoB;EAC/B,UAAU,EAAE;IACV,IAAI,EAAE;MACJ,IAAI,EAAE,IAAI;KACX;GACF;EACD,KAAK,EAAE,6BAA6B;CACrC,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;EACxB,MAAM,OAAO,GAAG,oBAAoB,CAAC,oBAAoB,EAAE,IAAI,CAAC,CAAC;EAEjE,OAAO,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;;GAgBnB,CAAC;EAEF,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAElD,gBAAgB,CAAC,IAAI,GAAG;EACtB,KAAK,EAAE,iBAAiB;CACzB,CAAC","sourcesContent":["import { generateStoryElement } from \"../../utils\";\nimport Docs from \"./flip-resource-list.mdx\";\n\nexport default {\n component: \"flip-resource-list\",\n parameters: {\n docs: {\n page: Docs,\n },\n },\n title: \"Components/FlipResourceList\",\n};\n\nconst Template = (args) => {\n const element = generateStoryElement(\"flip-resource-list\", args);\n\n element.innerHTML = `\n <flip-resource-list-item\n description=\"With a description\"\n label=\"This is a resource item\"\n media=\"<flip-avatar label="John Doe" src="https://picsum.photos/id/433/144/144"></flip-avatar>\"\n ></flip-resource-list-item>\n <flip-resource-list-item\n description=\"With a description\"\n label=\"This is a resource item\"\n media=\"<flip-avatar label="John Doe" src="https://picsum.photos/id/103/144/144"></flip-avatar>\"\n ></flip-resource-list-item>\n <flip-resource-list-item\n description=\"With a description\"\n label=\"This is a resource item\"\n media=\"<flip-avatar label="John Doe" src="https://picsum.photos/id/1027/144/144"></flip-avatar>\"\n ></flip-resource-list-item>\n `;\n\n return element;\n};\n\nexport const FlipResourceList = Template.bind({});\n\nFlipResourceList.args = {\n label: \"A resource list\",\n};\n"]}

package/dist/collection/components/flip-resource-list-file-item/flip-resource-list-file-item.css CHANGED Viewed

@@ -44,7 +44,7 @@
 .resource-list-file-item__label-container:after {
     position: absolute;
     right: 0;
-    bottom: calc(-1 * var(--s-space-12) + 0.0625rem);
+    bottom: calc(-1 * var(--s-space-12));
     left: 0;
     height: 0.0625rem;
     background-color: var(--s-border-default);

package/dist/collection/components/flip-resource-list-file-item/flip-resource-list-file-item.js CHANGED Viewed

@@ -178,3 +178,4 @@ export class FlipResourceListFileItem {
       }
     }]; }
 }
+//# sourceMappingURL=flip-resource-list-file-item.js.map

package/dist/collection/components/flip-resource-list-file-item/flip-resource-list-file-item.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"flip-resource-list-file-item.js","sourceRoot":"","sources":["../../../../src/components/flip-resource-list-file-item/flip-resource-list-file-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC9E,OAAO,UAAU,MAAM,YAAY,CAAC;AAOpC,MAAM,OAAO,wBAAwB;EALrC;IAQU,SAAI,GAAY,mCAAmC,CAAC;IAIpD,sBAAiB,GAAY,aAAa,CAAC;GA6DpD;EAzDC,MAAM;IACJ,MAAM,SAAS,GAAG,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC7C,MAAM,eAAe,GAAG,CAAC,SAAS,IAAI,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAChE,MAAM,WAAW,GAAG,CAAC,SAAS,IAAI,IAAI,CAAC,OAAO,CAAC;IAC/C,MAAM,gBAAgB,GAAG,IAAI,CAAC,SAAS,IAAI,CAAC,WAAW,CAAC;IAExD,MAAM,SAAS,GAAG,UAAU,CAAC,yBAAyB,EAAE;MACtD,sCAAsC,EAAE,WAAW,IAAI,gBAAgB;KACxE,CAAC,CAAC;IAEH,OAAO,CACL,EAAC,IAAI,IAAC,IAAI,EAAC,KAAK;MACd,WAAK,KAAK,EAAE,SAAS,EAAE,IAAI,EAAC,UAAU;QACpC,YACE,KAAK,EAAC,+BAA+B,EACrC,SAAS,EAAE,IAAI,CAAC,IAAI,GACd;QACR,YAAM,KAAK,EAAC,0CAA0C;UACpD,YAAM,KAAK,EAAC,gCAAgC,EAAC,EAAE,EAAC,OAAO,IACpD,IAAI,CAAC,KAAK,CACN;UACN,eAAe,IAAI,CAClB,YAAM,KAAK,EAAC,sCAAsC,IAC/C,IAAI,CAAC,WAAW,CACZ,CACR;UACA,SAAS,IAAI,CACZ,yBACY,QAAQ,EAClB,KAAK,EAAC,wCAAwC;YAE9C,yBACE,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,IAAI,EAAC,GAAG,GACW,CAChB,CACR,CACI;QACN,WAAW,IAAI,CACd,YAAM,KAAK,EAAC,kCAAkC;UAC5C,oBAAc,IAAI,EAAC,GAAG,GAAgB,CACjC,CACR;QACA,gBAAgB,IAAI,CACnB,YAAM,KAAK,EAAC,wCAAwC;UAClD,mBACE,SAAS,QACT,IAAI,EAAC,qCAAqC,EAC1C,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAC7B,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,GACZ,CACV,CACR,CACG,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\n@Component({\n shadow: true,\n styleUrl: \"flip-resource-list-file-item.css\",\n tag: \"flip-resource-list-file-item\",\n})\nexport class FlipResourceListFileItem {\n @Prop() description?: string;\n @Prop() errorMessage?: string;\n @Prop() icon?: string = \"<flip-icon-file></flip-icon-file>\";\n @Prop() label!: string;\n @Prop() loading: boolean;\n @Prop() removable?: boolean;\n @Prop() removeButtonLabel?: string = \"Remove file\";\n\n @Event() remove: EventEmitter<MouseEvent>;\n\n render() {\n const showError = Boolean(this.errorMessage);\n const showDescription = !showError && Boolean(this.description);\n const showSpinner = !showError && this.loading;\n const showRemoveButton = this.removable && !showSpinner;\n\n const className = classnames(\"resource-list-file-item\", {\n \"resource-list-file-item--has-control\": showSpinner || showRemoveButton,\n });\n\n return (\n <Host role=\"row\">\n <div class={className} role=\"gridcell\">\n <span\n class=\"resource-list-file-item__icon\"\n innerHTML={this.icon}\n ></span>\n <span class=\"resource-list-file-item__label-container\">\n <span class=\"resource-list-file-item__label\" id=\"label\">\n {this.label}\n </span>\n {showDescription && (\n <span class=\"resource-list-file-item__description\">\n {this.description}\n </span>\n )}\n {showError && (\n <span\n aria-live=\"polite\"\n class=\"resource-list-file-item__error-message\"\n >\n <flip-inline-error\n message={this.errorMessage}\n size=\"s\"\n ></flip-inline-error>\n </span>\n )}\n </span>\n {showSpinner && (\n <span class=\"resource-list-file-item__spinner\">\n <flip-spinner size=\"s\"></flip-spinner>\n </span>\n )}\n {showRemoveButton && (\n <span class=\"resource-list-file-item__remove-button\">\n <flip-button\n hideLabel\n icon=\"<flip-icon-close></flip-icon-close>\"\n label={this.removeButtonLabel}\n onClick={this.remove.emit}\n ></flip-button>\n </span>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/flip-resource-list-file-item/flip-resource-list-file-item.stories.js CHANGED Viewed

@@ -33,3 +33,4 @@ FlipResourceListFileItem.args = {
   label: "Design_final-final-12.png",
   removable: true,
 };
+//# sourceMappingURL=flip-resource-list-file-item.stories.js.map

package/dist/collection/components/flip-resource-list-file-item/flip-resource-list-file-item.stories.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"flip-resource-list-file-item.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-resource-list-file-item/flip-resource-list-file-item.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,IAAI,MAAM,oCAAoC,CAAC;AAEtD,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,8BAA8B;EACzC,UAAU,EAAE;IACV,IAAI,EAAE;MACJ,IAAI,EAAE,IAAI;KACX;GACF;EACD,KAAK,EAAE,qCAAqC;CAC7C,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;EACxB,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;EAChD,MAAM,OAAO,GAAG,oBAAoB,CAAC,8BAA8B,EAAE,IAAI,CAAC,CAAC;EAE3E,SAAS,CAAC,YAAY,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;EAC7C,SAAS,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;EAEvC,SAAS,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,EAAE,IAAI,CAAC,CAAC;EAExC,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE1D,wBAAwB,CAAC,IAAI,GAAG;EAC9B,WAAW,EAAE,MAAM;EACnB,KAAK,EAAE,2BAA2B;EAClC,SAAS,EAAE,IAAI;CAChB,CAAC","sourcesContent":["import { generateStoryElement } from \"../../utils\";\nimport Docs from \"./flip-resource-list-file-item.mdx\";\n\nexport default {\n argTypes: {\n icon: {\n table: {\n type: {\n detail: \"e.g. <flip-icon-file></flip-icon-file>\",\n summary: \"flip-icon-*\",\n },\n },\n },\n },\n component: \"flip-resource-list-file-item\",\n parameters: {\n docs: {\n page: Docs,\n },\n },\n title: \"Components/FlipResourceListFileItem\",\n};\n\nconst Template = (args) => {\n const container = document.createElement(\"div\");\n const element = generateStoryElement(\"flip-resource-list-file-item\", args);\n\n container.setAttribute(\"aria-label\", \"List\");\n container.setAttribute(\"role\", \"grid\");\n\n container.append(\"\\n \", element, \"\\n\");\n\n return container;\n};\n\nexport const FlipResourceListFileItem = Template.bind({});\n\nFlipResourceListFileItem.args = {\n description: \"12MB\",\n label: \"Design_final-final-12.png\",\n removable: true,\n};\n"]}

package/dist/collection/components/flip-resource-list-item/flip-resource-list-item.css CHANGED Viewed

@@ -122,7 +122,7 @@
 .resource-list-item__label-container:after {
     position: absolute;
     right: 0;
-    bottom: calc(-1 * var(--s-space-12) + 0.0625rem);
+    bottom: calc(-1 * var(--s-space-12));
     left: 0;
     height: 0.0625rem;
     background-color: var(--s-border-default);

package/dist/collection/components/flip-resource-list-item/flip-resource-list-item.js CHANGED Viewed

@@ -301,3 +301,4 @@ export class FlipResourceListItem {
     }]; }
   static get elementRef() { return "el"; }
 }
+//# sourceMappingURL=flip-resource-list-item.js.map

package/dist/collection/components/flip-resource-list-item/flip-resource-list-item.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"flip-resource-list-item.js","sourceRoot":"","sources":["../../../../src/components/flip-resource-list-item/flip-resource-list-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n} from \"@stencil/core\";\nimport classnames from \"classnames\";\n\n@Component({\n shadow: true,\n styleUrl: \"flip-resource-list-item.css\",\n tag: \"flip-resource-list-item\",\n})\nexport class FlipResourceListItem {\n @Element() el: HTMLElement;\n\n @Prop({ mutable: true }) checked?: boolean = false;\n @Prop() description?: string;\n @Prop() disabled?: boolean;\n @Prop() hideDivider?: boolean;\n @Prop() href?: string;\n @Prop() label!: string;\n @Prop() media?: string;\n @Prop() menuTriggerId?: string;\n @Prop() menuTriggerLabel?: string = \"Options\";\n @Prop() meta?: string;\n @Prop() selectable?: boolean;\n @Prop() value?: string;\n\n @Event() valueChange: EventEmitter<boolean>;\n\n componentDidLoad() {\n this.forceAvatarProps();\n this.forceThumbnailProps();\n }\n\n private forceAvatarProps() {\n const avatarEl = this.el.querySelector(\"flip-avatar\");\n\n if (!Boolean(avatarEl)) {\n return;\n }\n\n avatarEl.removeAttribute(\"interactive\");\n avatarEl.removeAttribute(\"show-label\");\n avatarEl.removeAttribute(\"variant\");\n\n avatarEl.setAttribute(\"size\", \"l\");\n }\n\n private forceThumbnailProps() {\n const thumbnailEl = this.el.querySelector(\"flip-thumbnail\");\n\n if (!Boolean(thumbnailEl)) {\n return;\n }\n\n thumbnailEl.setAttribute(\"format\", \"landscape\");\n\n if (![\"s\", \"m\"].includes(thumbnailEl.getAttribute(\"size\"))) {\n thumbnailEl.setAttribute(\"size\", \"m\");\n }\n }\n\n private onClick = () => {\n if (!this.selectable) {\n return;\n }\n\n this.checked = !this.checked;\n this.valueChange.emit(this.checked);\n };\n\n private onMenuTriggerClick = (event: MouseEvent) => {\n if (this.disabled && !Boolean(this.href)) {\n event.stopPropagation();\n }\n };\n\n render() {\n const Tag = Boolean(this.href) && !this.selectable ? \"a\" : \"button\";\n\n const disabled = this.disabled && !Boolean(this.href);\n const hasMenu = Boolean(this.menuTriggerId);\n const showMenu = hasMenu && !Boolean(this.meta) && !this.selectable;\n const showMeta = Boolean(this.meta) && !this.selectable;\n\n const ariaChecked = this.selectable ? String(this.checked) : undefined;\n const role = this.selectable ? \"checkbox\" : undefined;\n\n const className = classnames(\"resource-list-item\", {\n \"resource-list-item--checked\": this.checked,\n \"resource-list-item--has-menu\": hasMenu,\n \"resource-list-item--hide-divider\": this.hideDivider,\n \"resource-list-item--selectable\": this.selectable,\n });\n\n return (\n <Host role=\"row\">\n <div class={className} role=\"gridcell\">\n <Tag\n aria-checked={ariaChecked}\n aria-disabled={disabled ? \"true\" : undefined}\n aria-labelledby=\"label\"\n class=\"resource-list-item__content\"\n href={this.href}\n disabled={disabled}\n onClick={this.onClick}\n role={role}\n tabIndex={0}\n >\n {Boolean(this.media) && (\n <span\n class=\"resource-list-item__media\"\n innerHTML={this.media}\n ></span>\n )}\n <span class=\"resource-list-item__label-container\">\n <span class=\"resource-list-item__label\" id=\"label\">\n {this.label}\n </span>\n {this.description && (\n <span class=\"resource-list-item__description\">\n {this.description}\n </span>\n )}\n </span>\n </Tag>\n {this.selectable && (\n <span aria-hidden=\"true\" class=\"resource-list-item__checkbox\">\n <span class=\"resource-list-item__checkbox-icon\">\n {this.checked && (\n <flip-icon-check-strong></flip-icon-check-strong>\n )}\n </span>\n </span>\n )}\n {showMeta && (\n <span class=\"resource-list-item__meta\">{this.meta}</span>\n )}\n {showMenu && (\n <flip-button\n aria-disabled={disabled ? \"true\" : undefined}\n class=\"resource-list-item__menu-trigger\"\n disabled={disabled}\n hideLabel\n icon=\"<flip-icon-more-horizontal></flip-icon-more-horizontal>\"\n id={this.menuTriggerId}\n intent=\"primary\"\n label={this.menuTriggerLabel}\n onClick={this.onMenuTriggerClick}\n ></flip-button>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/flip-resource-list-item/flip-resource-list-item.stories.js CHANGED Viewed

@@ -62,3 +62,4 @@ FlipResourceListItem.args = {
   media: `<flip-avatar label="Jane Doe" src="https://avatars.dicebear.com/api/adventurer-neutral/a.svg?size=144" size="s"></flip-avatar>`,
   menuTriggerId: "trigger",
 };
+//# sourceMappingURL=flip-resource-list-item.stories.js.map

package/dist/collection/components/flip-resource-list-item/flip-resource-list-item.stories.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"flip-resource-list-item.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-resource-list-item/flip-resource-list-item.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,IAAI,MAAM,+BAA+B,CAAC;AAEjD,eAAe;EACb,SAAS,EAAE,yBAAyB;EACpC,UAAU,EAAE;IACV,IAAI,EAAE;MACJ,IAAI,EAAE,IAAI;MACV,MAAM,EAAE;QACN,IAAI,EAAE;;;;;;;;;;;;;;;;;;;gBAmBE;OACT;KACF;GACF;EACD,KAAK,EAAE,iCAAiC;CACzC,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,cAAc,CAAC,CAAC;EACvD,MAAM,OAAO,GAAG,oBAAoB,CAAC,yBAAyB,EAAE,IAAI,CAAC,CAAC;EAEtE,SAAS,CAAC,YAAY,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;EAC7C,SAAS,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;EAEvC,OAAO,CAAC,KAAK,GAAG,SAAS,CAAC;EAC1B,OAAO,CAAC,SAAS,GAAG,SAAS,CAAC;EAC9B,OAAO,CAAC,OAAO,GAAG,SAAS,CAAC;EAE5B,OAAO,CAAC,SAAS,GAAG;;;;;;;;;;;GAWnB,CAAC;EAEF,SAAS,CAAC,MAAM,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;EAEnC,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEtD,oBAAoB,CAAC,IAAI,GAAG;EAC1B,WAAW,EAAE,oBAAoB;EACjC,KAAK,EAAE,yBAAyB;EAChC,KAAK,EAAE,gIAAgI;EACvI,aAAa,EAAE,SAAS;CACzB,CAAC","sourcesContent":["import { generateStoryElement } from \"../../utils\";\nimport Docs from \"./flip-resource-list-item.mdx\";\n\nexport default {\n component: \"flip-resource-list-item\",\n parameters: {\n docs: {\n page: Docs,\n source: {\n code: `<flip-resource-list-item\n description=\"With a description\"\n label=\"This is a resource item\"\n media=\"<flip-avatar label="John Doe" src="https://picsum.photos/id/433/144/144"></flip-avatar>\"\n menu-trigger-id=\"trigger\"\n>\n</flip-resource-list-item>\n\n<flip-popover label=\"Popover\" popover-id=\"popover\" trigger=\"trigger\">\n <flip-action-list>\n <flip-action-list-item\n icon=\"<flip-icon-mention></flip-icon-mention>\"\n label=\"Action item 1\"\n ></flip-action-list-item>\n <flip-action-list-item\n icon=\"<flip-icon-mention></flip-icon-mention>\"\n label=\"Action item 2\"\n ></flip-action-list-item>\n </flip-action-list>\n</flip-popover>`,\n },\n },\n },\n title: \"Components/FlipResourceListItem\",\n};\n\nconst Template = (args) => {\n const container = document.createElement(\"div\");\n const popover = document.createElement(\"flip-popover\");\n const element = generateStoryElement(\"flip-resource-list-item\", args);\n\n container.setAttribute(\"aria-label\", \"List\");\n container.setAttribute(\"role\", \"grid\");\n\n popover.label = \"Options\";\n popover.popoverId = \"popover\";\n popover.trigger = \"trigger\";\n\n popover.innerHTML = `\n <flip-action-list>\n <flip-action-list-item\n icon=\"<flip-icon-mention></flip-icon-mention>\"\n label=\"Action item 1\"\n ></flip-action-list-item>\n <flip-action-list-item\n icon=\"<flip-icon-mention></flip-icon-mention>\"\n label=\"Action item 2\"\n ></flip-action-list-item>\n </flip-action-list>\n `;\n\n container.append(element, popover);\n\n return container;\n};\n\nexport const FlipResourceListItem = Template.bind({});\n\nFlipResourceListItem.args = {\n description: \"With a description\",\n label: \"This is a resource item\",\n media: `<flip-avatar label=\"Jane Doe\" src=\"https://avatars.dicebear.com/api/adventurer-neutral/a.svg?size=144\" size=\"s\"></flip-avatar>`,\n menuTriggerId: \"trigger\",\n};\n"]}

package/dist/collection/components/flip-search/flip-search.js CHANGED Viewed

@@ -245,3 +245,4 @@ export class FlipSearch {
       "passive": false
     }]; }
 }
+//# sourceMappingURL=flip-search.js.map

package/dist/collection/components/flip-search/flip-search.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"flip-search.js","sourceRoot":"","sources":["../../../../src/components/flip-search/flip-search.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,IAAI,GACL,MAAM,eAAe,CAAC;AACvB,OAAO,UAAU,MAAM,YAAY,CAAC;AAcpC,MAAM,OAAO,UAAU;EAZvB;IAcU,qBAAgB,GAAY,mBAAmB,CAAC;IAKhD,gBAAW,GAAY,UAAU,CAAC;IAmBlC,UAAK,GAAG,GAAG,EAAE;MACnB,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC;MACtB,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;IACrB,CAAC,CAAC;IAEM,WAAM,GAAG,CAAC,KAAiB,EAAE,EAAE;MACrC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEM,aAAQ,GAAG,CAAC,KAAY,EAAE,EAAE;MAClC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAE,KAAK,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAC;IAClE,CAAC,CAAC;IAEM,YAAO,GAAG,CAAC,KAAiB,EAAE,EAAE;MACtC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9B,CAAC,CAAC;GA2CH;EAnEC,SAAS,CAAC,KAAoB;IAC5B,IACE,CAAC,KAAK,CAAC,IAAI,KAAK,MAAM,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,CAAC;MACjD,CAAC,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC,EAChC;MACA,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;KACpB;EACH,CAAC;EAmBD,MAAM;IACJ,MAAM,SAAS,GAAG,UAAU,CAAC,QAAQ,EAAE;MACrC,kBAAkB,EAAE,IAAI,CAAC,QAAQ;KAClC,CAAC,CAAC;IAEH,OAAO,CACL,EAAC,IAAI;MACH,YAAM,KAAK,EAAE,SAAS;QACpB,wBAAkB,KAAK,EAAC,cAAc,GAAoB;QAC1D,8BACiB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,gBACrC,IAAI,CAAC,KAAK,EACtB,YAAY,EAAC,KAAK,EAClB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAC,eAAe,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,SAAS,EAAC,QAAQ,EAClB,IAAI,EAAE,IAAI,CAAC,SAAS,EACpB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,EAC9B,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,GACjB;QACD,CAAC,IAAI,CAAC,QAAQ,IAAI,CACjB,4BACc,IAAI,CAAC,gBAAgB,EACjC,KAAK,EAAC,sBAAsB,EAC5B,OAAO,EAAE,IAAI,CAAC,KAAK,EACnB,IAAI,EAAC,QAAQ;UAEb,2BAAqC,CAC9B,CACV,CACI,CACF,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n} from \"@stencil/core\";\nimport classnames from \"classnames\";\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-search.css\",\n tag: \"flip-search\",\n})\nexport class FlipSearch {\n @Prop() autoFocus?: boolean;\n @Prop() clearButtonLabel?: string = \"Clear search term\";\n @Prop() disabled?: boolean;\n @Prop() inputName?: string;\n @Prop() inputId?: string;\n @Prop() label?: string;\n @Prop() placeholder?: string = \"Search …\";\n @Prop({ mutable: true }) value?: string;\n\n @Event() inputBlur: EventEmitter<FocusEvent>;\n @Event() inputFocus: EventEmitter<FocusEvent>;\n @Event() valueChange: EventEmitter<string>;\n\n private input: HTMLInputElement;\n\n @Listen(\"keydown\", { target: \"window\" })\n onKeyDown(event: KeyboardEvent) {\n if (\n (event.code === \"KeyK\" || event.code === \"Slash\") &&\n (event.ctrlKey || event.metaKey)\n ) {\n this.input.focus();\n }\n }\n\n private clear = () => {\n this.input.value = \"\";\n this.input.focus();\n };\n\n private onBlur = (event: FocusEvent) => {\n this.inputBlur.emit(event);\n };\n\n private onChange = (event: Event) => {\n this.valueChange.emit((event.target as HTMLInputElement).value);\n };\n\n private onFocus = (event: FocusEvent) => {\n this.inputFocus.emit(event);\n };\n\n render() {\n const className = classnames(\"search\", {\n \"search--disabled\": this.disabled,\n });\n\n return (\n <Host>\n <span class={className}>\n <flip-icon-search class=\"search__icon\"></flip-icon-search>\n <input\n aria-disabled={this.disabled ? \"true\" : undefined}\n aria-label={this.label}\n autoComplete=\"off\"\n autoFocus={this.autoFocus}\n class=\"search__input\"\n disabled={this.disabled}\n id={this.inputId}\n inputMode=\"search\"\n name={this.inputName}\n onBlur={this.onBlur}\n onChange={this.onChange}\n onFocus={this.onFocus}\n placeholder={this.placeholder}\n ref={(el) => (this.input = el)}\n type=\"search\"\n value={this.value}\n />\n {!this.disabled && (\n <button\n aria-label={this.clearButtonLabel}\n class=\"search__clear-button\"\n onClick={this.clear}\n type=\"button\"\n >\n <flip-icon-cancel></flip-icon-cancel>\n </button>\n )}\n </span>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/flip-search/flip-search.stories.js CHANGED Viewed

@@ -17,3 +17,4 @@ export const FlipSearch = Template.bind({});
 FlipSearch.args = {
   label: "Search",
 };
+//# sourceMappingURL=flip-search.stories.js.map

package/dist/collection/components/flip-search/flip-search.stories.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"flip-search.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-search/flip-search.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;KACX;GACF;EACD,KAAK,EAAE,uBAAuB;CAC/B,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;EACxB,MAAM,OAAO,GAAG,oBAAoB,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC;EAE1D,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE5C,UAAU,CAAC,IAAI,GAAG;EAChB,KAAK,EAAE,QAAQ;CAChB,CAAC","sourcesContent":["import { generateStoryElement } from \"../../utils\";\nimport Docs from \"./flip-search.mdx\";\n\nexport default {\n component: \"flip-search\",\n parameters: {\n docs: {\n page: Docs,\n },\n },\n title: \"Components/FlipSearch\",\n};\n\nconst Template = (args) => {\n const element = generateStoryElement(\"flip-search\", args);\n\n return element;\n};\n\nexport const FlipSearch = Template.bind({});\n\nFlipSearch.args = {\n label: \"Search\",\n};\n"]}

package/dist/collection/components/flip-spinner/flip-spinner.js CHANGED Viewed

@@ -64,3 +64,4 @@ export class FlipSpinner {
     }
   }; }
 }
+//# sourceMappingURL=flip-spinner.js.map

package/dist/collection/components/flip-spinner/flip-spinner.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"flip-spinner.js","sourceRoot":"","sources":["../../../../src/components/flip-spinner/flip-spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,UAAU,MAAM,YAAY,CAAC;AASpC,MAAM,OAAO,WAAW;EALxB;IAOU,SAAI,GAAqB,GAAG,CAAC;GA2CtC;EAzCC,MAAM;IACJ,MAAM,SAAS,GAAG,UAAU,CAAC,SAAS,EAAE,iBAAiB,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;IAEtE,OAAO,CACL,EAAC,IAAI;MACH,YACE,KAAK,EAAE,SAAS,EAChB,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;QAEhD,0BACc,MAAM,EAClB,KAAK,EAAC,oBAAoB,EAC1B,SAAS,EAAC,OAAO,EACjB,OAAO,EAAC,WAAW;UAEnB,cACE,KAAK,EAAC,qBAAqB,EAC3B,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,IAAI,EACN,IAAI,EAAC,MAAM,kBACE,GAAG,GAChB;UACF,cACE,KAAK,EAAC,iBAAiB,EACvB,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,IAAI,EACN,IAAI,EAAC,MAAM,kBACE,GAAG,GAChB,CACE;QACL,IAAI,CAAC,KAAK,IAAI,CACb;UACE,YAAM,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC3B,CACxB,CACI,CACF,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipSpinnerSize = \"s\" | \"m\";\n\n@Component({\n shadow: true,\n styleUrl: \"flip-spinner.css\",\n tag: \"flip-spinner\",\n})\nexport class FlipSpinner {\n @Prop() label?: string;\n @Prop() size?: FlipSpinnerSize = \"m\";\n\n render() {\n const className = classnames(\"spinner\", `spinner--size-${this.size}`);\n\n return (\n <Host>\n <span\n class={className}\n role={Boolean(this.label) ? \"status\" : undefined}\n >\n <svg\n aria-hidden=\"true\"\n class=\"spinner__indicator\"\n focusable=\"false\"\n viewBox=\"0 0 50 50\"\n >\n <circle\n class=\"spinner__background\"\n cx=\"25\"\n cy=\"25\"\n r=\"20\"\n fill=\"none\"\n stroke-width=\"4\"\n />\n <circle\n class=\"spinner__circle\"\n cx=\"25\"\n cy=\"25\"\n r=\"20\"\n fill=\"none\"\n stroke-width=\"4\"\n />\n </svg>\n {this.label && (\n <flip-visually-hidden>\n <span class=\"spinner__label\">{this.label}</span>\n </flip-visually-hidden>\n )}\n </span>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/flip-spinner/flip-spinner.stories.js CHANGED Viewed

@@ -17,3 +17,4 @@ export const FlipSpinner = Template.bind({});
 FlipSpinner.args = {
   label: "Loading messages …",
 };
+//# sourceMappingURL=flip-spinner.stories.js.map

package/dist/collection/components/flip-spinner/flip-spinner.stories.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"flip-spinner.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-spinner/flip-spinner.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,IAAI,MAAM,oBAAoB,CAAC;AAEtC,eAAe;EACb,SAAS,EAAE,cAAc;EACzB,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,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE7C,WAAW,CAAC,IAAI,GAAG;EACjB,KAAK,EAAE,oBAAoB;CAC5B,CAAC","sourcesContent":["import { generateStoryElement } from \"../../utils\";\nimport Docs from \"./flip-spinner.mdx\";\n\nexport default {\n component: \"flip-spinner\",\n parameters: {\n docs: {\n page: Docs,\n },\n },\n title: \"Components/FlipSpinner\",\n};\n\nconst Template = (args) => {\n const element = generateStoryElement(\"flip-spinner\", args);\n\n return element;\n};\n\nexport const FlipSpinner = Template.bind({});\n\nFlipSpinner.args = {\n label: \"Loading messages …\",\n};\n"]}

package/dist/collection/components/flip-stack/flip-stack.js CHANGED Viewed

@@ -151,3 +151,4 @@ export class FlipStack {
     }
   }; }
 }
+//# sourceMappingURL=flip-stack.js.map

package/dist/collection/components/flip-stack/flip-stack.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"flip-stack.js","sourceRoot":"","sources":["../../../../src/components/flip-stack/flip-stack.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,UAAU,MAAM,YAAY,CAAC;AA8BpC,MAAM,OAAO,SAAS;EALtB;IAMU,UAAK,GAAoB,OAAO,CAAC;IACjC,OAAE,GAAY,KAAK,CAAC;IACpB,YAAO,GAAsB,OAAO,CAAC;IACrC,gBAAW,GAA0B,UAAU,CAAC;IAChD,YAAO,GAAsB,GAAG,CAAC;IACjC,SAAI,GAAa,KAAK,CAAC;GAwBhC;EAtBC,MAAM;IACJ,MAAM,GAAG,GAAG,IAAI,CAAC,EAAE,CAAC;IAEpB,MAAM,SAAS,GAAG,UAAU,CAC1B,OAAO,EACP,gBAAgB,IAAI,CAAC,KAAK,EAAE,EAC5B,kBAAkB,IAAI,CAAC,OAAO,EAAE,EAChC,sBAAsB,IAAI,CAAC,WAAW,EAAE,EACxC,EAAE,aAAa,EAAE,IAAI,CAAC,IAAI,EAAE,CAC7B,CAAC;IAEF,OAAO,CACL,EAAC,IAAI;MACH,EAAC,GAAG,IACF,KAAK,EAAE,SAAS,EAChB,KAAK,EAAE,EAAE,GAAG,EAAE,iBAAiB,IAAI,CAAC,OAAO,GAAG,EAAE;QAEhD,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipStackAlign = \"start\" | \"center\" | \"end\" | \"stretch\";\n\nexport type FlipStackJustify =\n | \"start\"\n | \"center\"\n | \"end\"\n | \"space-between\"\n | \"space-around\"\n | \"space-evenly\"\n | \"stretch\";\n\nexport type FlipStackOrientation = \"horizontal\" | \"vertical\";\n\nexport type FlipStackSpacing =\n | \"0\"\n | \"2\"\n | \"4\"\n | \"8\"\n | \"12\"\n | \"16\"\n | \"24\"\n | \"32\";\n\n@Component({\n shadow: true,\n styleUrl: \"flip-stack.css\",\n tag: \"flip-stack\",\n})\nexport class FlipStack {\n @Prop() align?: FlipStackAlign = \"start\";\n @Prop() as?: string = \"div\";\n @Prop() justify?: FlipStackJustify = \"start\";\n @Prop() orientation?: FlipStackOrientation = \"vertical\";\n @Prop() spacing?: FlipStackSpacing = \"0\";\n @Prop() wrap?: boolean = false;\n\n render() {\n const Tag = this.as;\n\n const className = classnames(\n \"stack\",\n `stack--align-${this.align}`,\n `stack--justify-${this.justify}`,\n `stack--orientation-${this.orientation}`,\n { \"stack--wrap\": this.wrap }\n );\n\n return (\n <Host>\n <Tag\n class={className}\n style={{ gap: `var(--s-space-${this.spacing})` }}\n >\n <slot></slot>\n </Tag>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/flip-stack/flip-stack.stories.js CHANGED Viewed

@@ -24,3 +24,4 @@ const Template = (args) => {
 };
 export const FlipStack = Template.bind({});
 FlipStack.args = {};
+//# sourceMappingURL=flip-stack.stories.js.map

package/dist/collection/components/flip-stack/flip-stack.stories.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"flip-stack.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-stack/flip-stack.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,IAAI,MAAM,kBAAkB,CAAC;AAEpC,eAAe;EACb,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,CAAC,SAAS,GAAG;;;;;;;;GAQnB,CAAC;EAEF,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE3C,SAAS,CAAC,IAAI,GAAG,EAAE,CAAC","sourcesContent":["import { generateStoryElement } from \"../../utils\";\nimport Docs from \"./flip-stack.mdx\";\n\nexport default {\n component: \"flip-stack\",\n parameters: {\n docs: {\n page: Docs,\n },\n },\n title: \"Components/FlipStack\",\n};\n\nconst Template = (args) => {\n const element = generateStoryElement(\"flip-stack\", args);\n\n element.innerHTML = `\n <flip-badge label=\"Dennis\" intent=\"decorative-1\"></flip-badge>\n <flip-badge label=\"Lennart\" intent=\"decorative-2\"></flip-badge>\n <flip-badge label=\"Jan\" intent=\"decorative-3\"></flip-badge>\n <flip-badge label=\"Konsti\" intent=\"decorative-4\"></flip-badge>\n <flip-badge label=\"Adam\" intent=\"decorative-5\"></flip-badge>\n <flip-badge label=\"Dario\" intent=\"decorative-6\"></flip-badge>\n <flip-badge label=\"Fabi\" intent=\"decorative-7\"></flip-badge>\n `;\n\n return element;\n};\n\nexport const FlipStack = Template.bind({});\n\nFlipStack.args = {};\n"]}

package/dist/collection/components/flip-switch/flip-switch.js CHANGED Viewed

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

package/dist/collection/components/flip-switch/flip-switch.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"flip-switch.js","sourceRoot":"","sources":["../../../../src/components/flip-switch/flip-switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n} from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipSwitchSize = \"s\" | \"m\";\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-switch.css\",\n tag: \"flip-switch\",\n})\nexport class FlipSwitch {\n @Element() el: HTMLElement;\n\n @Prop({ mutable: true }) checked?: boolean = false;\n @Prop() disabled?: boolean = false;\n @Prop() inputId!: string;\n @Prop() inputName!: string;\n @Prop() label?: string;\n @Prop() size?: FlipSwitchSize = \"m\";\n @Prop() value?: string;\n\n @Event() valueChange: EventEmitter<boolean>;\n\n private control: HTMLElement;\n private dragging = false;\n private recentlyDragged = false;\n private thumb: HTMLElement;\n\n @Listen(\"pointerup\", { target: \"window\" })\n onWindowPointerUp() {\n this.onEndDrag();\n }\n\n private onChange = () => {\n if (this.dragging) {\n return;\n }\n\n if (this.recentlyDragged) {\n this.recentlyDragged = false;\n return;\n }\n\n this.checked = !this.checked;\n this.valueChange.emit(this.checked);\n };\n\n private onStartDrag = () => {\n if (this.disabled) {\n return;\n }\n\n this.dragging = true;\n this.thumb.style.transition = \"none\";\n };\n\n private onEndDrag = () => {\n if (this.disabled) {\n return;\n }\n\n if (this.recentlyDragged) {\n const controlBonds = this.control.getBoundingClientRect();\n const thumbBounds = this.thumb.getBoundingClientRect();\n\n const on =\n this.thumb.offsetLeft + thumbBounds.width / 2 > controlBonds.width / 2;\n\n if (this.checked !== on) {\n this.checked = on;\n this.valueChange.emit(on);\n }\n }\n\n this.thumb.style.left = \"\";\n this.thumb.style.transition = \"\";\n\n this.dragging = false;\n\n setTimeout(() => {\n this.recentlyDragged = false;\n });\n };\n\n private onDrag = (event: PointerEvent) => {\n if (!this.dragging) {\n return;\n }\n\n this.recentlyDragged = true;\n\n const controlBonds = this.control.getBoundingClientRect();\n const thumbBounds = this.thumb.getBoundingClientRect();\n\n let pos = Math.round(event.offsetX - thumbBounds.width / 2);\n\n if (pos < 0) {\n pos = 0;\n }\n\n if (pos > Math.round(controlBonds.width - thumbBounds.width)) {\n pos = Math.round(controlBonds.width - thumbBounds.width);\n }\n\n this.thumb.style.left = `${pos}px`;\n };\n\n render() {\n const off = !this.checked;\n const on = this.checked;\n\n const ariaCheckedLabel = on ? \"true\" : \"false\";\n\n const className = classnames(\"switch\", `switch--size-${this.size}`, {\n \"switch--off\": off,\n \"switch--on\": on,\n \"switch--disabled\": this.disabled,\n });\n\n return (\n <Host>\n <label class={className} htmlFor={this.inputId}>\n <span\n class=\"switch__control\"\n onPointerDown={this.onStartDrag}\n onPointerMove={this.onDrag}\n onPointerUp={this.onEndDrag}\n ref={(el) => (this.control = el)}\n >\n <flip-visually-hidden>\n <input\n aria-checked={ariaCheckedLabel}\n checked={on}\n class=\"switch__input\"\n disabled={this.disabled}\n id={this.inputId}\n name={this.inputName}\n onChange={this.onChange}\n role=\"switch\"\n type=\"checkbox\"\n value={this.value}\n />\n </flip-visually-hidden>\n <span\n aria-hidden=\"true\"\n class=\"switch__thumb\"\n ref={(el) => (this.thumb = el)}\n ></span>\n </span>\n {this.label && <span class=\"switch__label\">{this.label}</span>}\n </label>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/flip-switch/flip-switch.stories.js CHANGED Viewed

@@ -20,3 +20,4 @@ FlipSwitch.args = {
   inputName: "switch",
   label: "Switch",
 };
+//# sourceMappingURL=flip-switch.stories.js.map

package/dist/collection/components/flip-switch/flip-switch.stories.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"flip-switch.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-switch/flip-switch.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;KACX;GACF;EACD,KAAK,EAAE,uBAAuB;CAC/B,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;EACxB,MAAM,OAAO,GAAG,oBAAoB,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC;EAE1D,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE5C,UAAU,CAAC,IAAI,GAAG;EAChB,OAAO,EAAE,IAAI;EACb,OAAO,EAAE,QAAQ;EACjB,SAAS,EAAE,QAAQ;EACnB,KAAK,EAAE,QAAQ;CAChB,CAAC","sourcesContent":["import { generateStoryElement } from \"../../utils\";\nimport Docs from \"./flip-switch.mdx\";\n\nexport default {\n component: \"flip-switch\",\n parameters: {\n docs: {\n page: Docs,\n },\n },\n title: \"Components/FlipSwitch\",\n};\n\nconst Template = (args) => {\n const element = generateStoryElement(\"flip-switch\", args);\n\n return element;\n};\n\nexport const FlipSwitch = Template.bind({});\n\nFlipSwitch.args = {\n checked: true,\n inputId: \"switch\",\n inputName: \"switch\",\n label: \"Switch\",\n};\n"]}

package/dist/collection/components/flip-tab/flip-tab.js CHANGED Viewed

@@ -69,3 +69,4 @@ export class FlipTab {
     }
   }; }
 }
+//# sourceMappingURL=flip-tab.js.map

package/dist/collection/components/flip-tab/flip-tab.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"flip-tab.js","sourceRoot":"","sources":["../../../../src/components/flip-tab/flip-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,UAAU,MAAM,YAAY,CAAC;AAOpC,MAAM,OAAO,OAAO;EAKlB,MAAM;IACJ,MAAM,SAAS,GAAG,UAAU,CAAC,KAAK,EAAE,EAAE,aAAa,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;IAEpE,OAAO,CACL,EAAC,IAAI,uBACc,OAAO,IAAI,CAAC,KAAK,EAAE,EACpC,EAAE,EAAE,IAAI,CAAC,KAAK,EACd,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;MAE9B,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\n@Component({\n shadow: true,\n styleUrl: \"flip-tab.css\",\n tag: \"flip-tab\",\n})\nexport class FlipTab {\n @Prop() active?: boolean;\n @Prop() label!: string;\n @Prop() tabId!: string;\n\n render() {\n const className = classnames(\"tab\", { \"tab--active\": this.active });\n\n return (\n <Host\n aria-labelledby={`tab-${this.tabId}`}\n id={this.tabId}\n role=\"tabpanel\"\n tabIndex={this.active ? 0 : -1}\n >\n <div class={className}>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/flip-tab/flip-tab.stories.js CHANGED Viewed

@@ -20,3 +20,4 @@ FlipTab.args = {
   label: "Label",
   tabId: "tab-id",
 };
+//# sourceMappingURL=flip-tab.stories.js.map

package/dist/collection/components/flip-tab/flip-tab.stories.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"flip-tab.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-tab/flip-tab.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,IAAI,MAAM,gBAAgB,CAAC;AAElC,eAAe;EACb,SAAS,EAAE,UAAU;EACrB,UAAU,EAAE;IACV,IAAI,EAAE;MACJ,IAAI,EAAE,IAAI;KACX;GACF;EACD,KAAK,EAAE,oBAAoB;CAC5B,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;EACxB,MAAM,OAAO,GAAG,oBAAoB,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;EAEvD,OAAO,CAAC,SAAS,GAAG,SAAS,CAAC;EAE9B,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEzC,OAAO,CAAC,IAAI,GAAG;EACb,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,OAAO;EACd,KAAK,EAAE,QAAQ;CAChB,CAAC","sourcesContent":["import { generateStoryElement } from \"../../utils\";\nimport Docs from \"./flip-tab.mdx\";\n\nexport default {\n component: \"flip-tab\",\n parameters: {\n docs: {\n page: Docs,\n },\n },\n title: \"Components/FlipTab\",\n};\n\nconst Template = (args) => {\n const element = generateStoryElement(\"flip-tab\", args);\n\n element.innerHTML = `Content`;\n\n return element;\n};\n\nexport const FlipTab = Template.bind({});\n\nFlipTab.args = {\n active: true,\n label: \"Label\",\n tabId: \"tab-id\",\n};\n"]}

package/dist/collection/components/flip-tabs/flip-tabs.js CHANGED Viewed

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

package/dist/collection/components/flip-tabs/flip-tabs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"flip-tabs.js","sourceRoot":"","sources":["../../../../src/components/flip-tabs/flip-tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,MAAM,EACN,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,UAAU,MAAM,YAAY,CAAC;AAQpC,MAAM,OAAO,QAAQ;EANrB;IAkBU,SAAI,GAAyB,EAAE,CAAC;IAgHhC,cAAS,GAAG,CAAC,KAAoB,EAAE,EAAE;MAC3C,IAAI,KAAK,CAAC,IAAI,KAAK,WAAW,EAAE;QAC9B,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,mBAAmB,EAAE,CAAC;OAC5B;WAAM,IAAI,KAAK,CAAC,IAAI,KAAK,YAAY,EAAE;QACtC,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,eAAe,EAAE,CAAC;OACxB;IACH,CAAC,CAAC;IAEM,iBAAY,GAAG,CAAC,KAAiB,EAAE,GAAuB,EAAE,EAAE;MACpE,IAAI,GAAG,CAAC,KAAK,KAAK,IAAI,CAAC,SAAS,EAAE;QAChC,IAAI,CAAC,cAAc,GAAG,SAAS,CAAC;QAChC,OAAO;OACR;MAED,IAAI,CAAC,cAAc;QAChB,KAAK,CAAC,MAAsB,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,SAAS,CAAC;IACrE,CAAC,CAAC;IAEM,iBAAY,GAAG,GAAG,EAAE;MAC1B,IAAI,CAAC,cAAc,GAAG,SAAS,CAAC;IAClC,CAAC,CAAC;GAiDH;EArLC,iBAAiB;IACf,IAAI,CAAC,WAAW,EAAE,CAAC;EACrB,CAAC;EAED,kBAAkB;IAChB,IAAI,CAAC,uBAAuB,EAAE,CAAC;EACjC,CAAC;EAGD,cAAc;IACZ,IAAI,CAAC,uBAAuB,EAAE,CAAC;EACjC,CAAC;EAED;;;KAGG;EAEI,KAAK,CAAC,WAAW,CAAC,KAAa;IACpC,IAAI,IAAI,CAAC,SAAS,KAAK,KAAK,EAAE;MAC5B,OAAO;KACR;IAED,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IACvB,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,MAAM,GAAG,KAAK,CAAC,CAAC,CAAC;IAEjD,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;IAEzD,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;MACjB,OAAO;KACR;IAED,IAAI,CAAC,cAAc,GAAG,SAAS,CAAC;IAEhC,GAAG,CAAC,MAAM,GAAG,IAAI,CAAC;IAClB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;EAC9B,CAAC;EAEO,eAAe;IACrB,MAAM,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,CACtC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,KAAK,KAAK,IAAI,CAAC,SAAS,CACtC,CAAC;IAEF,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,YAAY,GAAG,CAAC,CAAC,CAAC;IAEnE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,KAAK,CAAC,CAAC;IAE7C,qBAAqB,CAAC,GAAG,EAAE;;MACzB,MAAA,IAAI,CAAC,EAAE,CAAC,aAAa,CAAoB,oBAAoB,CAAC,0CAAE,KAAK,EAAE,CAAC;IAC1E,CAAC,CAAC,CAAC;EACL,CAAC;EAEO,mBAAmB;IACzB,MAAM,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,CACtC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,KAAK,KAAK,IAAI,CAAC,SAAS,CACtC,CAAC;IAEF,MAAM,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,YAAY,GAAG,CAAC,CAAC,CAAC;IAEpD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,KAAK,CAAC,CAAC;IAEjD,qBAAqB,CAAC,GAAG,EAAE;;MACzB,MAAA,IAAI,CAAC,EAAE,CAAC,aAAa,CAAoB,oBAAoB,CAAC,0CAAE,KAAK,EAAE,CAAC;IAC1E,CAAC,CAAC,CAAC;EACL,CAAC;EAEO,WAAW;IACjB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC,CAAC;IAE7D,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE;MAC1B,OAAO;KACR;IAED,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,KAAK,KAAK,IAAI,CAAC,UAAU,CAAC,CAAC;IAE1E,IAAI,CAAC,WAAW,CACd,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAC5D,CAAC;EACJ,CAAC;EAEO,uBAAuB;IAC7B,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,KAAK,KAAK,IAAI,CAAC,SAAS,CAAC,CAAC;IAExE,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,cAAc,CAAC,EAAE;MACxD,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC;MAClC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,SAAS,GAAG,EAAE,CAAC;MACtC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,eAAe,GAAG,EAAE,CAAC;MAC5C,OAAO;KACR;IAED,MAAM,WAAW,GACf,IAAI,CAAC,cAAc;MACnB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAoB,QAAQ,SAAS,CAAC,KAAK,EAAE,CAAC,CAAC;IAEtE,MAAM,gBAAgB,GACpB,WAAW,CAAC,aAAa,CAAkB,kBAAkB,CAAC,CAAC;IAEjE,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,KAAK,GAAG,GAC7B,gBAAgB,CAAC,qBAAqB,EAAE,CAAC,KAAK,GAAG,EACnD,KAAK,CAAC;IAEN,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,SAAS,GAAG,eACjC,gBAAgB,CAAC,UAAU,GAAG,EAChC,YAAY,CAAC;IAEb,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,cAAc,CAAC;MACnE,CAAC,CAAC,yBAAyB;MAC3B,CAAC,CAAC,EAAE,CAAC;EACT,CAAC;EA0BD,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAC,MAAM;QACf,yBACc,IAAI,CAAC,KAAK,EACtB,KAAK,EAAC,eAAe,EACrB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,IAAI,EAAC,SAAS;UAEb,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE;YACrB,MAAM,QAAQ,GAAG,GAAG,CAAC,KAAK,KAAK,IAAI,CAAC,SAAS,CAAC;YAC9C,MAAM,SAAS,GAAG,UAAU,CAAC,WAAW,EAAE;cACxC,mBAAmB,EAAE,QAAQ;aAC9B,CAAC,CAAC;YAEH,OAAO,CACL,+BACiB,GAAG,CAAC,KAAK,mBACT,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC1C,KAAK,EAAE,SAAS,EAChB,EAAE,EAAE,OAAO,GAAG,CAAC,KAAK,EAAE,EACtB,GAAG,EAAE,GAAG,CAAC,KAAK;cACd,6CAA6C;cAC7C,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,KAAK,CAAC;cAC1C,6CAA6C;cAC7C,YAAY,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,CAAC,EACtD,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,IAAI,EAAC,KAAK,EACV,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAC3B,IAAI,EAAC,QAAQ;cAEb,YAAM,KAAK,EAAC,iBAAiB,IAAE,GAAG,CAAC,KAAK,CAAQ,CACzC,CACV,CAAC;UACJ,CAAC,CAAC;UAEF,YACE,KAAK,EAAC,iBAAiB,EACvB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,GAC9B,CACJ;QACN,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Method,\n Prop,\n State,\n} from \"@stencil/core\";\nimport classnames from \"classnames\";\n\n@Component({\n scoped: true,\n shadow: false,\n styleUrl: \"flip-tabs.css\",\n tag: \"flip-tabs\",\n})\nexport class FlipTabs {\n @Element() el: HTMLElement;\n\n @Prop() initialTab?: string;\n @Prop() label!: string;\n\n @State() activeTab?: string;\n @State() highlightedTab: HTMLElement | undefined;\n\n @Event() tabActivated: EventEmitter<HTMLFlipTabElement>;\n\n private indicatorEl: HTMLElement;\n private tabs: HTMLFlipTabElement[] = [];\n\n componentWillLoad() {\n this.collectTabs();\n }\n\n componentDidRender() {\n this.updateIndicatorPosition();\n }\n\n @Listen(\"resize\", { target: \"window\" })\n onWindowResize() {\n this.updateIndicatorPosition();\n }\n\n /**\n * Activate a tab.\n * @param tabId\n */\n @Method()\n public async activateTab(tabId: string) {\n if (this.activeTab === tabId) {\n return;\n }\n\n this.activeTab = tabId;\n this.tabs.forEach((tab) => (tab.active = false));\n\n const tab = this.tabs.find((tab) => tab.tabId === tabId);\n\n if (!Boolean(tab)) {\n return;\n }\n\n this.highlightedTab = undefined;\n\n tab.active = true;\n this.tabActivated.emit(tab);\n }\n\n private activateNextTab() {\n const currentIndex = this.tabs.findIndex(\n (tab) => tab.tabId === this.activeTab\n );\n\n const nextIndex = Math.min(this.tabs.length - 1, currentIndex + 1);\n\n this.activateTab(this.tabs[nextIndex].tabId);\n\n requestAnimationFrame(() => {\n this.el.querySelector<HTMLButtonElement>(\".tabs__tab--active\")?.focus();\n });\n }\n\n private activatePreviousTab() {\n const currentIndex = this.tabs.findIndex(\n (tab) => tab.tabId === this.activeTab\n );\n\n const previousIndex = Math.max(0, currentIndex - 1);\n\n this.activateTab(this.tabs[previousIndex].tabId);\n\n requestAnimationFrame(() => {\n this.el.querySelector<HTMLButtonElement>(\".tabs__tab--active\")?.focus();\n });\n }\n\n private collectTabs() {\n this.tabs = Array.from(this.el.querySelectorAll(\"flip-tab\"));\n\n if (this.tabs.length === 0) {\n return;\n }\n\n const initialTab = this.tabs.find((tab) => tab.tabId === this.initialTab);\n\n this.activateTab(\n Boolean(initialTab) ? initialTab.tabId : this.tabs[0].tabId\n );\n }\n\n private updateIndicatorPosition() {\n const activeTab = this.tabs.find((tab) => tab.tabId === this.activeTab);\n\n if (!Boolean(activeTab) && !Boolean(this.highlightedTab)) {\n this.indicatorEl.style.width = \"\";\n this.indicatorEl.style.transform = \"\";\n this.indicatorEl.style.backgroundColor = \"\";\n return;\n }\n\n const activeTabEl =\n this.highlightedTab ||\n this.el.querySelector<HTMLButtonElement>(`#tab-${activeTab.tabId}`);\n\n const activeTabLabelEl =\n activeTabEl.querySelector<HTMLSpanElement>(\".tabs__tab-label\");\n\n this.indicatorEl.style.width = `${\n activeTabLabelEl.getBoundingClientRect().width / 16\n }rem`;\n\n this.indicatorEl.style.transform = `translate3d(${\n activeTabLabelEl.offsetLeft / 16\n }rem, 0, 0)`;\n\n this.indicatorEl.style.backgroundColor = Boolean(this.highlightedTab)\n ? \"var(--s-border-default)\"\n : \"\";\n }\n\n private onKeyDown = (event: KeyboardEvent) => {\n if (event.code === \"ArrowLeft\") {\n event.preventDefault();\n this.activatePreviousTab();\n } else if (event.code === \"ArrowRight\") {\n event.preventDefault();\n this.activateNextTab();\n }\n };\n\n private onMouseEnter = (event: MouseEvent, tab: HTMLFlipTabElement) => {\n if (tab.tabId === this.activeTab) {\n this.highlightedTab = undefined;\n return;\n }\n\n this.highlightedTab =\n (event.target as HTMLElement).closest(\".tabs__tab\") || undefined;\n };\n\n private onMouseLeave = () => {\n this.highlightedTab = undefined;\n };\n\n render() {\n return (\n <Host>\n <div class=\"tabs\">\n <div\n aria-label={this.label}\n class=\"tabs__tab-bar\"\n onKeyDown={this.onKeyDown}\n role=\"tablist\"\n >\n {this.tabs.map((tab) => {\n const isActive = tab.tabId === this.activeTab;\n const className = classnames(\"tabs__tab\", {\n \"tabs__tab--active\": isActive,\n });\n\n return (\n <button\n aria-controls={tab.tabId}\n aria-selected={isActive ? \"true\" : \"false\"}\n class={className}\n id={`tab-${tab.tabId}`}\n key={tab.tabId}\n // eslint-disable-next-line react/jsx-no-bind\n onClick={() => this.activateTab(tab.tabId)}\n // eslint-disable-next-line react/jsx-no-bind\n onMouseEnter={(event) => this.onMouseEnter(event, tab)}\n onMouseLeave={this.onMouseLeave}\n role=\"tab\"\n tabIndex={isActive ? 0 : -1}\n type=\"button\"\n >\n <span class=\"tabs__tab-label\">{tab.label}</span>\n </button>\n );\n })}\n\n <span\n class=\"tabs__indicator\"\n ref={(el) => (this.indicatorEl = el)}\n ></span>\n </div>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/flip-tabs/flip-tabs.stories.js CHANGED Viewed

@@ -23,3 +23,4 @@ FlipTabs.args = {
   initialTab: "tab-2",
   label: "Tabs",
 };
+//# sourceMappingURL=flip-tabs.stories.js.map

package/dist/collection/components/flip-tabs/flip-tabs.stories.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"flip-tabs.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-tabs/flip-tabs.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,IAAI,MAAM,iBAAiB,CAAC;AAEnC,eAAe;EACb,SAAS,EAAE,WAAW;EACtB,UAAU,EAAE;IACV,IAAI,EAAE;MACJ,IAAI,EAAE,IAAI;KACX;GACF;EACD,KAAK,EAAE,qBAAqB;CAC7B,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;EACxB,MAAM,OAAO,GAAG,oBAAoB,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;EAExD,OAAO,CAAC,SAAS,GAAG;;;;GAInB,CAAC;EAEF,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE1C,QAAQ,CAAC,IAAI,GAAG;EACd,UAAU,EAAE,OAAO;EACnB,KAAK,EAAE,MAAM;CACd,CAAC","sourcesContent":["import { generateStoryElement } from \"../../utils\";\nimport Docs from \"./flip-tabs.mdx\";\n\nexport default {\n component: \"flip-tabs\",\n parameters: {\n docs: {\n page: Docs,\n },\n },\n title: \"Components/FlipTabs\",\n};\n\nconst Template = (args) => {\n const element = generateStoryElement(\"flip-tabs\", args);\n\n element.innerHTML = `\n <flip-tab label=\"Tab #1\" tab-id=\"tab-1\">Tab 1</flip-tab>\n <flip-tab label=\"Tab #2\" tab-id=\"tab-2\">Tab 2</flip-tab>\n <flip-tab label=\"Tab Number 3\" tab-id=\"tab-3\">Tab 3</flip-tab>\n `;\n\n return element;\n};\n\nexport const FlipTabs = Template.bind({});\n\nFlipTabs.args = {\n initialTab: \"tab-2\",\n label: \"Tabs\",\n};\n"]}

package/dist/collection/components/flip-tag/flip-tag.js CHANGED Viewed

@@ -122,3 +122,4 @@ export class FlipTag {
       }
     }]; }
 }
+//# sourceMappingURL=flip-tag.js.map

package/dist/collection/components/flip-tag/flip-tag.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"flip-tag.js","sourceRoot":"","sources":["../../../../src/components/flip-tag/flip-tag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC9E,OAAO,UAAU,MAAM,YAAY,CAAC;AAcpC,MAAM,OAAO,OAAO;EALpB;IAMU,WAAM,GAAmB,SAAS,CAAC;IAGnC,uBAAkB,GAAY,QAAQ,CAAC;IAIvC,aAAQ,GAAG,CAAC,KAAiB,EAAE,EAAE;;MACvC,MAAA,IAAI,CAAC,MAAM,0CAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IAC3B,CAAC,CAAC;GAuBH;EArBC,MAAM;IACJ,MAAM,SAAS,GAAG,UAAU,CAAC,KAAK,EAAE,eAAe,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;IAElE,OAAO,CACL,EAAC,IAAI;MACH,YAAM,KAAK,EAAE,SAAS;QACnB,IAAI,CAAC,KAAK;QACV,IAAI,CAAC,SAAS,IAAI,CACjB,4BACc,IAAI,CAAC,kBAAkB,EACnC,KAAK,EAAC,qBAAqB,EAC3B,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,IAAI,EAAC,QAAQ;UAEb,uBAAiB,IAAI,EAAE,EAAE,GAAoB,CACtC,CACV,CACI,CACF,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipTagIntent =\n | \"default\"\n | \"critical\"\n | \"warning\"\n | \"success\"\n | \"info\";\n\n@Component({\n shadow: true,\n styleUrl: \"flip-tag.css\",\n tag: \"flip-tag\",\n})\nexport class FlipTag {\n @Prop() intent?: FlipTagIntent = \"default\";\n @Prop() label!: string;\n @Prop() removable?: boolean;\n @Prop() removalButtonLabel?: string = \"Remove\";\n\n @Event() remove?: EventEmitter<MouseEvent>;\n\n private onRemove = (event: MouseEvent) => {\n this.remove?.emit(event);\n };\n\n render() {\n const className = classnames(\"tag\", `tag--intent-${this.intent}`);\n\n return (\n <Host>\n <span class={className}>\n {this.label}\n {this.removable && (\n <button\n aria-label={this.removalButtonLabel}\n class=\"tag__removal-button\"\n onClick={this.onRemove}\n type=\"button\"\n >\n <flip-icon-close size={16}></flip-icon-close>\n </button>\n )}\n </span>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/flip-tag/flip-tag.stories.js CHANGED Viewed

@@ -18,3 +18,4 @@ FlipTag.args = {
   label: "Label",
   removable: true,
 };
+//# sourceMappingURL=flip-tag.stories.js.map

package/dist/collection/components/flip-tag/flip-tag.stories.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"flip-tag.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-tag/flip-tag.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,IAAI,MAAM,gBAAgB,CAAC;AAElC,eAAe;EACb,SAAS,EAAE,UAAU;EACrB,UAAU,EAAE;IACV,IAAI,EAAE;MACJ,IAAI,EAAE,IAAI;KACX;GACF;EACD,KAAK,EAAE,oBAAoB;CAC5B,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;EACxB,MAAM,OAAO,GAAG,oBAAoB,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;EAEvD,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEzC,OAAO,CAAC,IAAI,GAAG;EACb,KAAK,EAAE,OAAO;EACd,SAAS,EAAE,IAAI;CAChB,CAAC","sourcesContent":["import { generateStoryElement } from \"../../utils\";\nimport Docs from \"./flip-tag.mdx\";\n\nexport default {\n component: \"flip-tag\",\n parameters: {\n docs: {\n page: Docs,\n },\n },\n title: \"Components/FlipTag\",\n};\n\nconst Template = (args) => {\n const element = generateStoryElement(\"flip-tag\", args);\n\n return element;\n};\n\nexport const FlipTag = Template.bind({});\n\nFlipTag.args = {\n label: \"Label\",\n removable: true,\n};\n"]}

package/dist/collection/components/flip-text/flip-text.css ADDED Viewed

@@ -0,0 +1,83 @@
+:host {
+  display: block;
+}
+  :host * {
+    box-sizing: border-box;
+  }
+.text {
+  margin: 0;
+  padding: 0;
+}
+.text--align-start {
+  text-align: start;
+}
+.text--align-center {
+  text-align: center;
+}
+.text--align-end {
+  text-align: end;
+}
+.text--color-default {
+  color: var(--s-text-default);
+}
+.text--color-subdued {
+  color: var(--s-text-subdued);
+}
+.text--color-critical {
+  color: var(--s-text-critical);
+}
+.text--color-success {
+  color: var(--s-text-success);
+}
+.text--color-warning {
+  color: var(--s-text-warning);
+}
+.text--size-sm {
+  font-size: var(--s-font-size-sm);
+  line-height: var(--s-line-height-sm);
+}
+.text--size-base {
+  font-size: var(--s-font-size-base);
+  line-height: var(--s-line-height-base);
+}
+.text--size-lg {
+  font-size: var(--s-font-size-lg);
+  line-height: var(--s-line-height-lg);
+}
+.text--weight-normal {
+  font-weight: var(--s-font-weight-normal);
+}
+.text--weight-medium {
+  font-weight: var(--s-font-weight-medium);
+}
+.text--weight-semibold {
+  font-weight: var(--s-font-weight-semibold);
+}
+.text--weight-bold {
+  font-weight: var(--s-font-weight-bold);
+}
+.text--font-style-normal {
+  font-style: normal;
+}
+.text--font-style-italic {
+  font-style: italic;
+}