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

@getflip/swirl-components 0.1.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 (1788) hide show

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

@@ -0,0 +1 @@

+ {"file":"flip-resource-list-item.js","mappings":"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","names":["FlipResourceListItem"],"sources":["./src/components/flip-resource-list-item/flip-resource-list-item.css?tag=flip-resource-list-item&encapsulation=shadow","./src/components/flip-resource-list-item/flip-resource-list-item.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n\n & * {\n box-sizing: border-box;\n }\n}\n\n.resource-list-item {\n position: relative;\n width: 100%;\n}\n\n.resource-list-item--checked {\n & .resource-list-item__checkbox {\n border-color: var(--s-icon-highlight);\n color: var(--s-text-on-status);\n background-color: var(--s-icon-highlight);\n }\n}\n\n.resource-list-item--has-menu {\n & .resource-list-item__label-container {\n padding-right: calc(var(--s-space-16) + 2.5rem + var(--s-space-12));\n }\n}\n\n.resource-list-item--selectable {\n & .resource-list-item__content {\n @media (--from-tablet) {\n padding-left: calc(var(--s-space-16) + 1.5rem + var(--s-space-12));\n }\n }\n\n & .resource-list-item__label-container {\n padding-right: calc(var(--s-space-16) + 1.5rem + var(--s-space-12));\n\n @media (--from-tablet) {\n padding-right: var(--s-space-16);\n }\n }\n}\n\n.resource-list-item--hide-divider {\n & .resource-list-item__label-container:after {\n display: none;\n }\n}\n\n.resource-list-item__content {\n --flip-avatar-group-border-color: var(--s-background-default);\n --flip-badge-border-color: var(--s-background-default);\n\n display: flex;\n width: 100%;\n padding-top: var(--s-space-12);\n padding-right: 0;\n padding-bottom: var(--s-space-12);\n padding-left: var(--s-space-16);\n align-items: center;\n border: none;\n color: var(--s-text-default);\n background-color: var(--s-background-default);\n font: inherit;\n line-height: var(--s-line-height-base);\n text-align: left;\n text-decoration: none;\n cursor: pointer;\n gap: var(--s-space-12);\n\n &:hover:not(:disabled) {\n background-color: var(--s-background-hovered);\n\n & .resource-list-item__media {\n --flip-avatar-group-border-color: var(--s-background-hovered);\n --flip-badge-border-color: var(--s-background-hovered);\n }\n }\n\n &:active:not(:disabled) {\n background-color: var(--s-background-pressed);\n\n & .resource-list-item__media {\n --flip-avatar-group-border-color: var(--s-background-pressed);\n --flip-badge-border-color: var(--s-background-pressed);\n }\n }\n\n &:focus {\n background-color: var(--s-background-hovered);\n outline: none;\n\n & .resource-list-item__media {\n --flip-avatar-group-border-color: var(--s-background-hovered);\n --flip-badge-border-color: var(--s-background-hovered);\n }\n }\n\n &:disabled {\n color: var(--s-text-disabled);\n background-color: var(--s-background-default);\n cursor: default;\n\n & .resource-list-item__description {\n color: var(--s-text-disabled);\n }\n }\n}\n\n.resource-list-item__media {\n display: inline-flex;\n}\n\n.resource-list-item__label-container {\n position: relative;\n display: flex;\n min-width: 0;\n min-height: 2.875rem;\n padding-right: var(--s-space-16);\n flex-grow: 1;\n justify-content: center;\n flex-direction: column;\n\n &:after {\n position: absolute;\n right: 0;\n bottom: calc(-1 * var(--s-space-12));\n left: 0;\n height: 0.0625rem;\n background-color: var(--s-border-default);\n content: \"\";\n }\n}\n\n.resource-list-item__label {\n overflow: hidden;\n font-weight: var(--s-font-weight-medium);\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n.resource-list-item__description {\n overflow: hidden;\n margin-top: var(--s-space-2);\n color: var(--s-text-subdued);\n font-size: var(--s-font-size-sm);\n line-height: var(--s-line-height-sm);\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n.resource-list-item__menu-trigger {\n position: absolute;\n top: 50%;\n right: var(--s-space-16);\n transform: translateY(-50%);\n}\n\n.resource-list-item__checkbox {\n position: absolute;\n top: 50%;\n right: var(--s-space-16);\n display: flex;\n width: 1.25rem;\n height: 1.25rem;\n justify-content: center;\n align-items: center;\n border: 0.125rem solid var(--s-icon-default);\n border-radius: var(--s-border-radius-s);\n transform: translateY(-50%);\n\n @media (--from-tablet) {\n right: auto;\n left: var(--s-space-16);\n }\n}\n\n.resource-list-item__checkbox-icon {\n display: inline-flex;\n width: 1.0625rem;\n height: 1.0625rem;\n\n & > *::part(icon) {\n width: 1.0625rem;\n height: 1.0625rem;\n }\n}\n\n.resource-list-item__meta {\n position: absolute;\n top: calc(var(--s-space-12) + var(--s-space-4));\n right: var(--s-space-16);\n color: var(--s-text-subdued);\n font-size: var(--s-font-size-sm);\n}\n","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"],"version":3}

package/dist/components/flip-resource-list.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+interface FlipResourceList extends Components.FlipResourceList, HTMLElement {}
+export const FlipResourceList: {
+  prototype: FlipResourceList;
+  new (): FlipResourceList;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,92 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './flip-stack2.js';
+const flipResourceListCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}";
+const FlipResourceList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.focusedIndex = 0;
+    this.onFocus = () => {
+      this.focusItemAtIndex(this.focusedIndex);
+    };
+    this.onKeyDown = (event) => {
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        this.focusItemAtIndex((this.focusedIndex + 1) % this.items.length);
+      }
+      else if (event.key === "ArrowUp") {
+        event.preventDefault();
+        const prevIndex = this.focusedIndex === 0 ? this.items.length - 1 : this.focusedIndex - 1;
+        this.focusItemAtIndex(prevIndex);
+      }
+      else if (event.key === "Home") {
+        event.preventDefault();
+        this.focusItemAtIndex(0);
+      }
+      else if (event.key === "End") {
+        event.preventDefault();
+        this.focusItemAtIndex(this.items.length - 1);
+      }
+    };
+  }
+  componentDidLoad() {
+    this.collectItems();
+    this.removeItemsFromTabOrder();
+  }
+  collectItems() {
+    this.items = Array.from(this.el.querySelectorAll("flip-resource-list-item, flip-resource-list-file-item"));
+  }
+  removeItemsFromTabOrder() {
+    this.items.forEach((item) => {
+      var _a, _b;
+      return (_b = (_a = item.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".resource-list-item__content, .resource-list-file-item")) === null || _b === void 0 ? void 0 : _b.setAttribute("tabIndex", "-1");
+    });
+  }
+  focusItemAtIndex(index) {
+    this.removeItemsFromTabOrder();
+    const item = this.items[index];
+    if (!Boolean(item)) {
+      return;
+    }
+    const interactiveElement = item.shadowRoot.querySelector(".resource-list-item__content, .resource-list-file-item");
+    interactiveElement.setAttribute("tabIndex", "0");
+    interactiveElement.focus();
+    this.focusedIndex = index;
+  }
+  render() {
+    return (h(Host, { onKeyDown: this.onKeyDown }, h("flip-stack", { "aria-label": this.label, onFocus: this.onFocus, role: "grid", tabIndex: 0 }, h("slot", null))));
+  }
+  get el() { return this; }
+  static get style() { return flipResourceListCss; }
+}, [1, "flip-resource-list", {
+    "label": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["flip-resource-list", "flip-stack"];
+  components.forEach(tagName => { switch (tagName) {
+    case "flip-resource-list":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FlipResourceList$1);
+      }
+      break;
+    case "flip-stack":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+const FlipResourceList = FlipResourceList$1;
+const defineCustomElement = defineCustomElement$1;
+export { FlipResourceList, defineCustomElement };
+//# sourceMappingURL=flip-resource-list.js.map

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

@@ -0,0 +1 @@

+ {"file":"flip-resource-list.js","mappings":";;;AAAA,MAAM,mBAAmB,GAAG,+DAA+D;;MCO9EA,kBAAgB;EAL7B;;;;IAUU,iBAAY,GAAG,CAAC,CAAC;IA6CjB,YAAO,GAAG;MAChB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;KAC1C,CAAC;IAEM,cAAS,GAAG,CAAC,KAAoB;MACvC,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE;QAC7B,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,gBAAgB,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,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,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,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;KACF,CAAC;GAgBH;EAlFC,gBAAgB;IACd,IAAI,CAAC,YAAY,EAAE,CAAC;IACpB,IAAI,CAAC,uBAAuB,EAAE,CAAC;GAChC;EAEO,YAAY;IAClB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,CACrB,IAAI,CAAC,EAAE,CAAC,gBAAgB,CACtB,uDAAuD,CACxD,CACF,CAAC;GACH;EAEO,uBAAuB;IAC7B,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI;;MACtB,OAAA,MAAA,MAAA,IAAI,CAAC,UAAU,0CACX,aAAa,CACb,wDAAwD,CACzD,0CACC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAA;KAAA,CACnC,CAAC;GACH;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;GAC3B;EA4BD,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,SAAS,EAAE,IAAI,CAAC,SAAS,IAC7B,gCACc,IAAI,CAAC,KAAK,EACtB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,CAAC,IAEX,eAAa,CACF,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["FlipResourceList"],"sources":["./src/components/flip-resource-list/flip-resource-list.css?tag=flip-resource-list&encapsulation=shadow","./src/components/flip-resource-list/flip-resource-list.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n\n & * {\n box-sizing: border-box;\n }\n}\n","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"],"version":3}

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

@@ -80,3 +80,5 @@ const FlipSearch = FlipSearch$1;
 const defineCustomElement = defineCustomElement$1;
 export { FlipSearch, defineCustomElement };
+//# sourceMappingURL=flip-search.js.map

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

@@ -0,0 +1 @@

+ {"file":"flip-search.js","mappings":";;;;;AAAA,MAAM,aAAa,GAAG,ulEAAulE;;MCuBhmEA,YAAU;EAZvB;;;;;;IAcU,qBAAgB,GAAY,mBAAmB,CAAC;IAKhD,gBAAW,GAAY,UAAU,CAAC;IAmBlC,UAAK,GAAG;MACd,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC;MACtB,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;KACpB,CAAC;IAEM,WAAM,GAAG,CAAC,KAAiB;MACjC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC5B,CAAC;IAEM,aAAQ,GAAG,CAAC,KAAY;MAC9B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAE,KAAK,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAC;KACjE,CAAC;IAEM,YAAO,GAAG,CAAC,KAAiB;MAClC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC7B,CAAC;GA2CH;EAnEC,SAAS,CAAC,KAAoB;IAC5B,IACE,CAAC,KAAK,CAAC,IAAI,KAAK,MAAM,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO;OAC/C,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC,EAChC;MACA,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;KACpB;GACF;EAmBD,MAAM;IACJ,MAAM,SAAS,GAAG,UAAU,CAAC,QAAQ,EAAE;MACrC,kBAAkB,EAAE,IAAI,CAAC,QAAQ;KAClC,CAAC,CAAC;IAEH,QACE,EAAC,IAAI,QACH,YAAM,KAAK,EAAE,SAAS,IACpB,wBAAkB,KAAK,EAAC,cAAc,GAAoB,EAC1D,8BACiB,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,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,MAAM,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,EAC9B,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,GACjB,EACD,CAAC,IAAI,CAAC,QAAQ,KACb,4BACc,IAAI,CAAC,gBAAgB,EACjC,KAAK,EAAC,sBAAsB,EAC5B,OAAO,EAAE,IAAI,CAAC,KAAK,EACnB,IAAI,EAAC,QAAQ,IAEb,2BAAqC,CAC9B,CACV,CACI,CACF,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["FlipSearch"],"sources":["./src/components/flip-search/flip-search.css?tag=flip-search&encapsulation=scoped","./src/components/flip-search/flip-search.tsx"],"sourcesContent":[":host {\n display: flex;\n width: 100%;\n\n & * {\n box-sizing: border-box;\n }\n}\n\n.search {\n position: relative;\n display: flex;\n width: 100%;\n}\n\n.search--disabled {\n & .search__icon {\n color: var(--s-icon-disabled);\n }\n\n & .search__input {\n color: var(--s-text-disabled);\n\n &::placeholder {\n color: var(--s-text-disabled);\n }\n }\n}\n\n.search__icon {\n position: absolute;\n top: 50%;\n left: var(--s-space-12);\n display: inline-flex;\n color: var(--s-icon-default);\n transform: translateY(-50%);\n}\n\n.search__input {\n width: 100%;\n height: 2.5rem;\n padding-top: var(--s-space-8);\n padding-right: calc(var(--s-space-12) + 1.5rem + var(--s-space-8));\n padding-bottom: var(--s-space-8);\n padding-left: calc(var(--s-space-12) + 1.5rem + var(--s-space-8));\n border: none;\n border-radius: var(--s-border-radius-base);\n color: var(--s-text-default);\n background-color: var(--s-surface-raised-default);\n font: inherit;\n line-height: var(--s-line-height-base);\n caret-color: var(--s-border-highlight);\n\n &:focus {\n outline-color: var(--s-focus-default);\n }\n\n &::placeholder {\n color: var(--s-text-subdued);\n }\n\n &::-webkit-search-decoration,\n &::-webkit-search-cancel-button,\n &::-webkit-search-results-button,\n &::-webkit-search-results-decoration {\n appearance: none;\n }\n\n &:not(:placeholder-shown) {\n & + .search__clear-button {\n display: inline-flex;\n }\n }\n}\n\n.search__clear-button {\n position: absolute;\n top: 50%;\n right: var(--s-space-12);\n display: none;\n padding: 0;\n border: none;\n color: var(--s-icon-default);\n background-color: transparent;\n cursor: pointer;\n transform: translateY(-50%);\n}\n","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"],"version":3}

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

@@ -1,46 +1,8 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as classnames } from './index2.js';
-import { d as defineCustomElement$2 } from './flip-visually-hidden2.js';
-const flipSpinnerCss = ":host{display:inline-flex}:host *{box-sizing:border-box}.spinner{position:relative;display:inline-flex;overflow:hidden;width:2.25rem;height:2.25rem}.spinner--size-s{width:1.5rem;height:1.5rem}.spinner--size-s .spinner__circle{stroke-width:0.1875rem}.spinner__indicator{position:absolute;inset:0;width:100%;height:100%;transform-origin:center center;-webkit-animation:spinner-rotate 2s linear infinite;animation:spinner-rotate 2s linear infinite}.spinner__background{stroke:var(--s-border-default);stroke-linecap:round}.spinner__circle{-webkit-animation:spinner-dash 1.5s ease-in-out infinite;animation:spinner-dash 1.5s ease-in-out infinite;stroke:var(--s-interactive-primary-default);stroke-dasharray:1, 200;stroke-dashoffset:0;stroke-linecap:round}@-webkit-keyframes spinner-rotate{100%{transform:rotate(360deg)}}@keyframes spinner-rotate{100%{transform:rotate(360deg)}}@-webkit-keyframes spinner-dash{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124}}@keyframes spinner-dash{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124}}";
-const FlipSpinner$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.size = "m";
-  }
-  render() {
-    const className = classnames("spinner", `spinner--size-${this.size}`);
-    return (h(Host, null, h("span", { class: className, role: Boolean(this.label) ? "status" : undefined }, h("svg", { "aria-hidden": "true", class: "spinner__indicator", focusable: "false", viewBox: "0 0 50 50" }, h("circle", { class: "spinner__background", cx: "25", cy: "25", r: "20", fill: "none", "stroke-width": "4" }), h("circle", { class: "spinner__circle", cx: "25", cy: "25", r: "20", fill: "none", "stroke-width": "4" })), this.label && (h("flip-visually-hidden", null, h("span", { class: "spinner__label" }, this.label))))));
-  }
-  static get style() { return flipSpinnerCss; }
-}, [1, "flip-spinner", {
-    "label": [1],
-    "size": [1]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["flip-spinner", "flip-visually-hidden"];
-  components.forEach(tagName => { switch (tagName) {
-    case "flip-spinner":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, FlipSpinner$1);
-      }
-      break;
-    case "flip-visually-hidden":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
-defineCustomElement$1();
+import { F as FlipSpinner$1, d as defineCustomElement$1 } from './flip-spinner2.js';
 const FlipSpinner = FlipSpinner$1;
 const defineCustomElement = defineCustomElement$1;
 export { FlipSpinner, defineCustomElement };
+//# sourceMappingURL=flip-spinner.js.map

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

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

package/dist/{esm/flip-spinner.entry.js → components/flip-spinner2.js} RENAMED Viewed

@@ -1,18 +1,45 @@
-import { r as registerInstance, h, H as Host } from './index-36517fab.js';
-import { c as classnames } from './index-3c78bcaf.js';
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { d as defineCustomElement$1 } from './flip-visually-hidden2.js';
 const flipSpinnerCss = ":host{display:inline-flex}:host *{box-sizing:border-box}.spinner{position:relative;display:inline-flex;overflow:hidden;width:2.25rem;height:2.25rem}.spinner--size-s{width:1.5rem;height:1.5rem}.spinner--size-s .spinner__circle{stroke-width:0.1875rem}.spinner__indicator{position:absolute;inset:0;width:100%;height:100%;transform-origin:center center;-webkit-animation:spinner-rotate 2s linear infinite;animation:spinner-rotate 2s linear infinite}.spinner__background{stroke:var(--s-border-default);stroke-linecap:round}.spinner__circle{-webkit-animation:spinner-dash 1.5s ease-in-out infinite;animation:spinner-dash 1.5s ease-in-out infinite;stroke:var(--s-interactive-primary-default);stroke-dasharray:1, 200;stroke-dashoffset:0;stroke-linecap:round}@-webkit-keyframes spinner-rotate{100%{transform:rotate(360deg)}}@keyframes spinner-rotate{100%{transform:rotate(360deg)}}@-webkit-keyframes spinner-dash{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124}}@keyframes spinner-dash{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124}}";
-const FlipSpinner = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
+const FlipSpinner = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
     this.size = "m";
   }
   render() {
     const className = classnames("spinner", `spinner--size-${this.size}`);
     return (h(Host, null, h("span", { class: className, role: Boolean(this.label) ? "status" : undefined }, h("svg", { "aria-hidden": "true", class: "spinner__indicator", focusable: "false", viewBox: "0 0 50 50" }, h("circle", { class: "spinner__background", cx: "25", cy: "25", r: "20", fill: "none", "stroke-width": "4" }), h("circle", { class: "spinner__circle", cx: "25", cy: "25", r: "20", fill: "none", "stroke-width": "4" })), this.label && (h("flip-visually-hidden", null, h("span", { class: "spinner__label" }, this.label))))));
   }
-};
-FlipSpinner.style = flipSpinnerCss;
+  static get style() { return flipSpinnerCss; }
+}, [1, "flip-spinner", {
+    "label": [1],
+    "size": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["flip-spinner", "flip-visually-hidden"];
+  components.forEach(tagName => { switch (tagName) {
+    case "flip-spinner":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FlipSpinner);
+      }
+      break;
+    case "flip-visually-hidden":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+export { FlipSpinner as F, defineCustomElement as d };
-export { FlipSpinner as flip_spinner };
+//# sourceMappingURL=flip-spinner2.js.map

package/dist/components/flip-spinner2.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"flip-spinner2.js","mappings":";;;;AAAA,MAAM,cAAc,GAAG,ktCAAktC;;MCU5tC,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,QACE,EAAC,IAAI,QACH,YACE,KAAK,EAAE,SAAS,EAChB,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,QAAQ,GAAG,SAAS,IAEhD,0BACc,MAAM,EAClB,KAAK,EAAC,oBAAoB,EAC1B,SAAS,EAAC,OAAO,EACjB,OAAO,EAAC,WAAW,IAEnB,cACE,KAAK,EAAC,qBAAqB,EAC3B,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,IAAI,EACN,IAAI,EAAC,MAAM,kBACE,GAAG,GAChB,EACF,cACE,KAAK,EAAC,iBAAiB,EACvB,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,IAAI,EACN,IAAI,EAAC,MAAM,kBACE,GAAG,GAChB,CACE,EACL,IAAI,CAAC,KAAK,KACT,gCACE,YAAM,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC3B,CACxB,CACI,CACF,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/flip-spinner/flip-spinner.css?tag=flip-spinner&encapsulation=shadow","./src/components/flip-spinner/flip-spinner.tsx"],"sourcesContent":[":host {\n display: inline-flex;\n\n & * {\n box-sizing: border-box;\n }\n}\n\n.spinner {\n position: relative;\n display: inline-flex;\n overflow: hidden;\n width: 2.25rem;\n height: 2.25rem;\n}\n\n.spinner--size-s {\n width: 1.5rem;\n height: 1.5rem;\n\n & .spinner__circle {\n stroke-width: 0.1875rem;\n }\n}\n\n.spinner__indicator {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n transform-origin: center center;\n animation: spinner-rotate 2s linear infinite;\n}\n\n.spinner__background {\n stroke: var(--s-border-default);\n stroke-linecap: round;\n}\n\n.spinner__circle {\n animation: spinner-dash 1.5s ease-in-out infinite;\n stroke: var(--s-interactive-primary-default);\n stroke-dasharray: 1, 200;\n stroke-dashoffset: 0;\n stroke-linecap: round;\n}\n\n@keyframes spinner-rotate {\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes spinner-dash {\n 0% {\n stroke-dasharray: 1, 200;\n stroke-dashoffset: 0;\n }\n 50% {\n stroke-dasharray: 89, 200;\n stroke-dashoffset: -35;\n }\n 100% {\n stroke-dasharray: 89, 200;\n stroke-dashoffset: -124;\n }\n}\n","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"],"version":3}

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

@@ -4,3 +4,5 @@ const FlipStack = FlipStack$1;
 const defineCustomElement = defineCustomElement$1;
 export { FlipStack, defineCustomElement };
+//# sourceMappingURL=flip-stack.js.map

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

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

package/dist/components/flip-stack2.js CHANGED Viewed

@@ -45,3 +45,5 @@ function defineCustomElement() {
 defineCustomElement();
 export { FlipStack as F, defineCustomElement as d };
+//# sourceMappingURL=flip-stack2.js.map

package/dist/components/flip-stack2.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"flip-stack2.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,w4BAAw4B;;MC+Bh5B,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,QACE,EAAC,IAAI,QACH,EAAC,GAAG,IACF,KAAK,EAAE,SAAS,EAChB,KAAK,EAAE,EAAE,GAAG,EAAE,iBAAiB,IAAI,CAAC,OAAO,GAAG,EAAE,IAEhD,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/flip-stack/flip-stack.css?tag=flip-stack&encapsulation=shadow","./src/components/flip-stack/flip-stack.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n\n & * {\n box-sizing: border-box;\n }\n}\n\n.stack {\n display: flex;\n width: 100%;\n max-width: 100%;\n\n & ::slotted(*) {\n min-width: 0;\n max-width: 100%;\n flex-basis: auto;\n flex-grow: 0;\n flex-shrink: 0;\n }\n}\n\n.stack--align-start {\n align-items: flex-start;\n}\n\n.stack--align-center {\n align-items: center;\n}\n\n.stack--align-end {\n align-items: flex-end;\n}\n\n.stack--align-stretch {\n align-items: stretch;\n}\n\n.stack--justify-start {\n justify-content: flex-start;\n}\n\n.stack--justify-center {\n justify-content: center;\n}\n\n.stack--justify-end {\n justify-content: flex-end;\n}\n\n.stack--justify-space-between {\n justify-content: space-between;\n}\n\n.stack--justify-space-around {\n justify-content: space-around;\n}\n\n.stack--justify-space-evenly {\n justify-content: space-evenly;\n}\n\n.stack--justify-stretch {\n justify-content: stretch;\n\n & ::slotted(*) {\n flex-grow: 1;\n }\n}\n\n.stack--orientation-vertical {\n flex-direction: column;\n}\n\n.stack--orientation-horizontal {\n flex-direction: row;\n}\n\n.stack--wrap {\n flex-wrap: wrap;\n}\n","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"],"version":3}

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

@@ -118,3 +118,5 @@ const FlipSwitch = FlipSwitch$1;
 const defineCustomElement = defineCustomElement$1;
 export { FlipSwitch, defineCustomElement };
+//# sourceMappingURL=flip-switch.js.map

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

@@ -0,0 +1 @@

+ {"file":"flip-switch.js","mappings":"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","names":["FlipSwitch"],"sources":["./src/components/flip-switch/flip-switch.css?tag=flip-switch&encapsulation=scoped","./src/components/flip-switch/flip-switch.tsx"],"sourcesContent":[":host {\n display: inline-flex;\n\n & * {\n box-sizing: border-box;\n }\n}\n\n.switch {\n display: inline-flex;\n align-items: center;\n touch-action: none;\n\n &:focus-within .switch__control {\n box-shadow: 0 0 0 0.0625rem var(--s-background-default),\n 0 0 0 0.1875rem var(--s-focus-default);\n }\n}\n\n.switch--size-m {\n & .switch__control {\n width: 2.75rem;\n height: 1.5rem;\n border-radius: calc(1.5rem / 2);\n }\n\n & .switch__thumb {\n width: 1.25rem;\n height: 1.25rem;\n }\n}\n\n.switch--on {\n &.switch--size-m {\n & .switch__thumb {\n left: calc(100% - 1.25rem - var(--s-space-2));\n }\n }\n\n & .switch__control {\n background-color: var(--s-interactive-primary-default);\n }\n\n & .switch__thumb {\n left: calc(100% - 0.875rem - var(--s-space-2));\n }\n}\n\n.switch--disabled {\n & .switch__control {\n background-color: var(--s-interactive-primary-disabled);\n cursor: default;\n }\n\n & .switch__thumb {\n background-color: var(--s-interactive-neutral-default);\n }\n\n & .switch__label {\n color: var(--s-text-disabled);\n }\n}\n\n.switch__control {\n position: relative;\n width: 1.875rem;\n height: 1.125rem;\n flex-shrink: 0;\n border-radius: calc(1.125rem / 2);\n background-color: var(--s-interactive-primary-disabled);\n cursor: pointer;\n transition: background-color 0.2s;\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n}\n\n.switch__thumb {\n position: absolute;\n top: var(--s-space-2);\n left: var(--s-space-2);\n width: 0.875rem;\n height: 0.875rem;\n border-radius: 50%;\n background-color: var(--s-surface-default);\n transition: left 0.2s;\n pointer-events: none;\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n}\n\n.switch__label {\n position: relative;\n z-index: 1;\n margin-left: var(--s-space-12);\n font-size: var(--s-font-size-sm);\n font-weight: var(--s-font-weight-medium);\n line-height: var(--s-line-height-base);\n}\n","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"],"version":3}

package/dist/components/flip-tab.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+interface FlipTab extends Components.FlipTab, HTMLElement {}
+export const FlipTab: {
+  prototype: FlipTab;
+  new (): FlipTab;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,42 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+const flipTabCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}.tab{display:none;width:100%;padding:var(--s-space-8)}.tab--active{display:block}";
+const FlipTab$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    const className = classnames("tab", { "tab--active": this.active });
+    return (h(Host, { "aria-labelledby": `tab-${this.tabId}`, id: this.tabId, role: "tabpanel", tabIndex: this.active ? 0 : -1 }, h("div", { class: className }, h("slot", null))));
+  }
+  static get style() { return flipTabCss; }
+}, [1, "flip-tab", {
+    "active": [4],
+    "label": [1],
+    "tabId": [1, "tab-id"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["flip-tab"];
+  components.forEach(tagName => { switch (tagName) {
+    case "flip-tab":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FlipTab$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+const FlipTab = FlipTab$1;
+const defineCustomElement = defineCustomElement$1;
+export { FlipTab, defineCustomElement };
+//# sourceMappingURL=flip-tab.js.map

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

@@ -0,0 +1 @@

+ {"file":"flip-tab.js","mappings":";;;AAAA,MAAM,UAAU,GAAG,gJAAgJ;;MCQtJA,SAAO;;;;;;EAKlB,MAAM;IACJ,MAAM,SAAS,GAAG,UAAU,CAAC,KAAK,EAAE,EAAE,aAAa,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;IAEpE,QACE,EAAC,IAAI,uBACc,OAAO,IAAI,CAAC,KAAK,EAAE,EACpC,EAAE,EAAE,IAAI,CAAC,KAAK,EACd,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC,IAE9B,WAAK,KAAK,EAAE,SAAS,IACnB,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["FlipTab"],"sources":["./src/components/flip-tab/flip-tab.css?tag=flip-tab&encapsulation=shadow","./src/components/flip-tab/flip-tab.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n\n & * {\n box-sizing: border-box;\n }\n}\n\n.tab {\n display: none;\n width: 100%;\n padding: var(--s-space-8);\n}\n\n.tab--active {\n display: block;\n}\n","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"],"version":3}

package/dist/components/flip-tabs.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+interface FlipTabs extends Components.FlipTabs, HTMLElement {}
+export const FlipTabs: {
+  prototype: FlipTabs;
+  new (): FlipTabs;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,146 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+const flipTabsCss = ".sc-flip-tabs-h{display:block;width:100%}.sc-flip-tabs-h *.sc-flip-tabs{box-sizing:border-box}.tabs.sc-flip-tabs{width:100%}.tabs__tab-bar.sc-flip-tabs{position:relative;display:flex;width:100%;padding-right:var(--s-space-16);padding-left:var(--s-space-16);justify-content:flex-start;border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (--from-tablet){.tabs__tab-bar.sc-flip-tabs{padding-right:0;padding-left:0}}.tabs__tab.sc-flip-tabs{display:block;min-width:0;margin:0;padding:var(--s-space-4) 0;border:none;background-color:transparent;font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);cursor:pointer}.tabs__tab.sc-flip-tabs:focus-visible{outline:none}.tabs__tab.sc-flip-tabs:focus-visible .tabs__tab-label.sc-flip-tabs{border-radius:var(--s-border-radius-s);box-shadow:inset 0 0 0 0.125rem var(--s-focus-default)}.tabs__tab.sc-flip-tabs:not(:first-of-type){padding-left:var(--s-space-8)}.tabs__tab.sc-flip-tabs:not(:last-of-type){padding-right:var(--s-space-8)}.tabs__tab-label.sc-flip-tabs{display:block;overflow:hidden;width:100%;padding:var(--s-space-8) var(--s-space-8);text-align:center;white-space:nowrap;text-overflow:ellipsis}.tabs__tab--active.sc-flip-tabs{color:var(--s-text-highlight)}.tabs__indicator.sc-flip-tabs{position:absolute;bottom:0;left:0;width:0;height:0.125rem;border-radius:0.0625rem;background-color:var(--s-border-highlight);transition:background-color 0.15s, transform 0.15s, width 0.15s;transform:translate3d(0, 0, 0);pointer-events:none}@media (prefers-reduced-motion){.tabs__indicator.sc-flip-tabs{transition:none}}";
+const FlipTabs$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.tabActivated = createEvent(this, "tabActivated", 7);
+    this.tabs = [];
+    this.onKeyDown = (event) => {
+      if (event.code === "ArrowLeft") {
+        event.preventDefault();
+        this.activatePreviousTab();
+      }
+      else if (event.code === "ArrowRight") {
+        event.preventDefault();
+        this.activateNextTab();
+      }
+    };
+    this.onMouseEnter = (event, tab) => {
+      if (tab.tabId === this.activeTab) {
+        this.highlightedTab = undefined;
+        return;
+      }
+      this.highlightedTab =
+        event.target.closest(".tabs__tab") || undefined;
+    };
+    this.onMouseLeave = () => {
+      this.highlightedTab = undefined;
+    };
+  }
+  componentWillLoad() {
+    this.collectTabs();
+  }
+  componentDidRender() {
+    this.updateIndicatorPosition();
+  }
+  onWindowResize() {
+    this.updateIndicatorPosition();
+  }
+  /**
+   * Activate a tab.
+   * @param tabId
+   */
+  async activateTab(tabId) {
+    if (this.activeTab === tabId) {
+      return;
+    }
+    this.activeTab = tabId;
+    this.tabs.forEach((tab) => (tab.active = false));
+    const tab = this.tabs.find((tab) => tab.tabId === tabId);
+    if (!Boolean(tab)) {
+      return;
+    }
+    this.highlightedTab = undefined;
+    tab.active = true;
+    this.tabActivated.emit(tab);
+  }
+  activateNextTab() {
+    const currentIndex = this.tabs.findIndex((tab) => tab.tabId === this.activeTab);
+    const nextIndex = Math.min(this.tabs.length - 1, currentIndex + 1);
+    this.activateTab(this.tabs[nextIndex].tabId);
+    requestAnimationFrame(() => {
+      var _a;
+      (_a = this.el.querySelector(".tabs__tab--active")) === null || _a === void 0 ? void 0 : _a.focus();
+    });
+  }
+  activatePreviousTab() {
+    const currentIndex = this.tabs.findIndex((tab) => tab.tabId === this.activeTab);
+    const previousIndex = Math.max(0, currentIndex - 1);
+    this.activateTab(this.tabs[previousIndex].tabId);
+    requestAnimationFrame(() => {
+      var _a;
+      (_a = this.el.querySelector(".tabs__tab--active")) === null || _a === void 0 ? void 0 : _a.focus();
+    });
+  }
+  collectTabs() {
+    this.tabs = Array.from(this.el.querySelectorAll("flip-tab"));
+    if (this.tabs.length === 0) {
+      return;
+    }
+    const initialTab = this.tabs.find((tab) => tab.tabId === this.initialTab);
+    this.activateTab(Boolean(initialTab) ? initialTab.tabId : this.tabs[0].tabId);
+  }
+  updateIndicatorPosition() {
+    const activeTab = this.tabs.find((tab) => tab.tabId === this.activeTab);
+    if (!Boolean(activeTab) && !Boolean(this.highlightedTab)) {
+      this.indicatorEl.style.width = "";
+      this.indicatorEl.style.transform = "";
+      this.indicatorEl.style.backgroundColor = "";
+      return;
+    }
+    const activeTabEl = this.highlightedTab ||
+      this.el.querySelector(`#tab-${activeTab.tabId}`);
+    const activeTabLabelEl = activeTabEl.querySelector(".tabs__tab-label");
+    this.indicatorEl.style.width = `${activeTabLabelEl.getBoundingClientRect().width / 16}rem`;
+    this.indicatorEl.style.transform = `translate3d(${activeTabLabelEl.offsetLeft / 16}rem, 0, 0)`;
+    this.indicatorEl.style.backgroundColor = Boolean(this.highlightedTab)
+      ? "var(--s-border-default)"
+      : "";
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "tabs" }, h("div", { "aria-label": this.label, class: "tabs__tab-bar", onKeyDown: this.onKeyDown, role: "tablist" }, this.tabs.map((tab) => {
+      const isActive = tab.tabId === this.activeTab;
+      const className = classnames("tabs__tab", {
+        "tabs__tab--active": isActive,
+      });
+      return (h("button", { "aria-controls": tab.tabId, "aria-selected": isActive ? "true" : "false", class: className, id: `tab-${tab.tabId}`, key: tab.tabId,
+        // eslint-disable-next-line react/jsx-no-bind
+        onClick: () => this.activateTab(tab.tabId),
+        // eslint-disable-next-line react/jsx-no-bind
+        onMouseEnter: (event) => this.onMouseEnter(event, tab), onMouseLeave: this.onMouseLeave, role: "tab", tabIndex: isActive ? 0 : -1, type: "button" }, h("span", { class: "tabs__tab-label" }, tab.label)));
+    }), h("span", { class: "tabs__indicator", ref: (el) => (this.indicatorEl = el) })), h("slot", null))));
+  }
+  get el() { return this; }
+  static get style() { return flipTabsCss; }
+}, [6, "flip-tabs", {
+    "initialTab": [1, "initial-tab"],
+    "label": [1],
+    "activeTab": [32],
+    "highlightedTab": [32],
+    "activateTab": [64]
+  }, [[9, "resize", "onWindowResize"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["flip-tabs"];
+  components.forEach(tagName => { switch (tagName) {
+    case "flip-tabs":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FlipTabs$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+const FlipTabs = FlipTabs$1;
+const defineCustomElement = defineCustomElement$1;
+export { FlipTabs, defineCustomElement };
+//# sourceMappingURL=flip-tabs.js.map

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

@@ -0,0 +1 @@

+ {"file":"flip-tabs.js","mappings":"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","names":["FlipTabs"],"sources":["./src/components/flip-tabs/flip-tabs.css?tag=flip-tabs&encapsulation=scoped","./src/components/flip-tabs/flip-tabs.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n\n & * {\n box-sizing: border-box;\n }\n}\n\n.tabs {\n width: 100%;\n}\n\n.tabs__tab-bar {\n position: relative;\n display: flex;\n width: 100%;\n padding-right: var(--s-space-16);\n padding-left: var(--s-space-16);\n justify-content: flex-start;\n border-bottom: var(--s-border-width-default) solid var(--s-border-default);\n\n @media (--from-tablet) {\n padding-right: 0;\n padding-left: 0;\n }\n}\n\n.tabs__tab {\n display: block;\n min-width: 0;\n margin: 0;\n padding: var(--s-space-4) 0;\n border: none;\n background-color: transparent;\n font: inherit;\n font-weight: var(--s-font-weight-medium);\n line-height: var(--s-line-height-base);\n cursor: pointer;\n\n &:focus-visible {\n outline: none;\n\n & .tabs__tab-label {\n border-radius: var(--s-border-radius-s);\n box-shadow: inset 0 0 0 0.125rem var(--s-focus-default);\n }\n }\n\n &:not(:first-of-type) {\n padding-left: var(--s-space-8);\n }\n\n &:not(:last-of-type) {\n padding-right: var(--s-space-8);\n }\n}\n\n.tabs__tab-label {\n display: block;\n overflow: hidden;\n width: 100%;\n padding: var(--s-space-8) var(--s-space-8);\n text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n.tabs__tab--active {\n color: var(--s-text-highlight);\n}\n\n.tabs__indicator {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 0;\n height: 0.125rem;\n border-radius: 0.0625rem;\n background-color: var(--s-border-highlight);\n transition: background-color 0.15s, transform 0.15s, width 0.15s;\n transform: translate3d(0, 0, 0);\n pointer-events: none;\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n}\n","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"],"version":3}

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

@@ -52,3 +52,5 @@ const FlipTag = FlipTag$1;
 const defineCustomElement = defineCustomElement$1;
 export { FlipTag, defineCustomElement };
+//# sourceMappingURL=flip-tag.js.map

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

@@ -0,0 +1 @@

+ {"file":"flip-tag.js","mappings":";;;;AAAA,MAAM,UAAU,GAAG,uwCAAuwC;;MCe7wCA,SAAO;EALpB;;;;;IAMU,WAAM,GAAmB,SAAS,CAAC;IAGnC,uBAAkB,GAAY,QAAQ,CAAC;IAIvC,aAAQ,GAAG,CAAC,KAAiB;;MACnC,MAAA,IAAI,CAAC,MAAM,0CAAE,IAAI,CAAC,KAAK,CAAC,CAAC;KAC1B,CAAC;GAuBH;EArBC,MAAM;IACJ,MAAM,SAAS,GAAG,UAAU,CAAC,KAAK,EAAE,eAAe,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;IAElE,QACE,EAAC,IAAI,QACH,YAAM,KAAK,EAAE,SAAS,IACnB,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,SAAS,KACb,4BACc,IAAI,CAAC,kBAAkB,EACnC,KAAK,EAAC,qBAAqB,EAC3B,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,IAAI,EAAC,QAAQ,IAEb,uBAAiB,IAAI,EAAE,EAAE,GAAoB,CACtC,CACV,CACI,CACF,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["FlipTag"],"sources":["./src/components/flip-tag/flip-tag.css?tag=flip-tag&encapsulation=shadow","./src/components/flip-tag/flip-tag.tsx"],"sourcesContent":[":host {\n display: inline-flex;\n\n & * {\n box-sizing: border-box;\n }\n}\n\n.tag {\n display: inline-flex;\n padding: var(--s-space-2) var(--s-space-8);\n align-items: center;\n border-radius: var(--s-border-radius-s);\n color: var(--s-text-default);\n background-color: var(--s-surface-neutral-subdued);\n font-size: var(--s-font-size-sm);\n font-weight: var(--s-font-weight-medium);\n line-height: var(--s-line-height-sm);\n gap: var(--s-space-4);\n}\n\n.tag--intent-info {\n color: var(--s-text-info);\n background-color: var(--s-surface-info-subdued);\n\n & .tag__removal-button {\n color: var(--icon-info);\n }\n}\n\n.tag--intent-critical {\n color: var(--s-text-critical);\n background-color: var(--s-surface-critical-subdued);\n\n & .tag__removal-button {\n color: var(--icon-critical);\n }\n}\n\n.tag--intent-warning {\n color: var(--s-text-warning);\n background-color: var(--s-surface-warning-subdued);\n\n & .tag__removal-button {\n color: var(--icon-warning);\n }\n}\n\n.tag--intent-success {\n color: var(--s-text-success);\n background-color: var(--s-surface-success-subdued);\n\n & .tag__removal-button {\n color: var(--icon-success);\n }\n}\n\n.tag__removal-button {\n display: inline-flex;\n margin-right: calc(-1 * var(--s-space-4));\n padding: 0;\n border: none;\n color: var(--s-icon-strong);\n background-color: transparent;\n cursor: pointer;\n\n &:focus {\n outline-color: var(--s-focus-default);\n }\n}\n","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"],"version":3}