@getflip/swirl-components 0.1.0 → 0.3.0

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

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

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

@@ -0,0 +1,304 @@
+import { Component, Element, Event, h, Host, Prop, } from "@stencil/core";
+import classnames from "classnames";
+export class FlipResourceListItem {
+  constructor() {
+    this.checked = false;
+    this.menuTriggerLabel = "Options";
+    this.onClick = () => {
+      if (!this.selectable) {
+        return;
+      }
+      this.checked = !this.checked;
+      this.valueChange.emit(this.checked);
+    };
+    this.onMenuTriggerClick = (event) => {
+      if (this.disabled && !Boolean(this.href)) {
+        event.stopPropagation();
+      }
+    };
+  }
+  componentDidLoad() {
+    this.forceAvatarProps();
+    this.forceThumbnailProps();
+  }
+  forceAvatarProps() {
+    const avatarEl = this.el.querySelector("flip-avatar");
+    if (!Boolean(avatarEl)) {
+      return;
+    }
+    avatarEl.removeAttribute("interactive");
+    avatarEl.removeAttribute("show-label");
+    avatarEl.removeAttribute("variant");
+    avatarEl.setAttribute("size", "l");
+  }
+  forceThumbnailProps() {
+    const thumbnailEl = this.el.querySelector("flip-thumbnail");
+    if (!Boolean(thumbnailEl)) {
+      return;
+    }
+    thumbnailEl.setAttribute("format", "landscape");
+    if (!["s", "m"].includes(thumbnailEl.getAttribute("size"))) {
+      thumbnailEl.setAttribute("size", "m");
+    }
+  }
+  render() {
+    const Tag = Boolean(this.href) && !this.selectable ? "a" : "button";
+    const disabled = this.disabled && !Boolean(this.href);
+    const hasMenu = Boolean(this.menuTriggerId);
+    const showMenu = hasMenu && !Boolean(this.meta) && !this.selectable;
+    const showMeta = Boolean(this.meta) && !this.selectable;
+    const ariaChecked = this.selectable ? String(this.checked) : undefined;
+    const role = this.selectable ? "checkbox" : undefined;
+    const className = classnames("resource-list-item", {
+      "resource-list-item--checked": this.checked,
+      "resource-list-item--has-menu": hasMenu,
+      "resource-list-item--hide-divider": this.hideDivider,
+      "resource-list-item--selectable": this.selectable,
+    });
+    return (h(Host, { role: "row" },
+      h("div", { class: className, role: "gridcell" },
+        h(Tag, { "aria-checked": ariaChecked, "aria-disabled": disabled ? "true" : undefined, "aria-labelledby": "label", class: "resource-list-item__content", href: this.href, disabled: disabled, onClick: this.onClick, role: role, tabIndex: 0 },
+          Boolean(this.media) && (h("span", { class: "resource-list-item__media", innerHTML: this.media })),
+          h("span", { class: "resource-list-item__label-container" },
+            h("span", { class: "resource-list-item__label", id: "label" }, this.label),
+            this.description && (h("span", { class: "resource-list-item__description" }, this.description)))),
+        this.selectable && (h("span", { "aria-hidden": "true", class: "resource-list-item__checkbox" },
+          h("span", { class: "resource-list-item__checkbox-icon" }, this.checked && (h("flip-icon-check-strong", null))))),
+        showMeta && (h("span", { class: "resource-list-item__meta" }, this.meta)),
+        showMenu && (h("flip-button", { "aria-disabled": disabled ? "true" : undefined, class: "resource-list-item__menu-trigger", disabled: disabled, hideLabel: true, icon: "<flip-icon-more-horizontal></flip-icon-more-horizontal>", id: this.menuTriggerId, intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick })))));
+  }
+  static get is() { return "flip-resource-list-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-resource-list-item.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-resource-list-item.css"]
+  }; }
+  static get properties() { return {
+    "checked": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "checked",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "description": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "description",
+      "reflect": false
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disabled",
+      "reflect": false
+    },
+    "hideDivider": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "hide-divider",
+      "reflect": false
+    },
+    "href": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "href",
+      "reflect": false
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "media": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "media",
+      "reflect": false
+    },
+    "menuTriggerId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "menu-trigger-id",
+      "reflect": false
+    },
+    "menuTriggerLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "menu-trigger-label",
+      "reflect": false,
+      "defaultValue": "\"Options\""
+    },
+    "meta": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "meta",
+      "reflect": false
+    },
+    "selectable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "selectable",
+      "reflect": false
+    },
+    "value": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "value",
+      "reflect": false
+    }
+  }; }
+  static get events() { return [{
+      "method": "valueChange",
+      "name": "valueChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      }
+    }]; }
+  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

@@ -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

@@ -0,0 +1,65 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./flip-resource-list-item.mdx";
+export default {
+  component: "flip-resource-list-item",
+  parameters: {
+    docs: {
+      page: Docs,
+      source: {
+        code: `<flip-resource-list-item
+  description="With a description"
+  label="This is a resource item"
+  media="<flip-avatar label=&quot;John Doe&quot; src=&quot;https://picsum.photos/id/433/144/144&quot;></flip-avatar>"
+  menu-trigger-id="trigger"
+>
+</flip-resource-list-item>
+
+<flip-popover label="Popover" popover-id="popover" trigger="trigger">
+  <flip-action-list>
+    <flip-action-list-item
+      icon="<flip-icon-mention></flip-icon-mention>"
+      label="Action item 1"
+    ></flip-action-list-item>
+    <flip-action-list-item
+      icon="<flip-icon-mention></flip-icon-mention>"
+      label="Action item 2"
+    ></flip-action-list-item>
+  </flip-action-list>
+</flip-popover>`,
+      },
+    },
+  },
+  title: "Components/FlipResourceListItem",
+};
+const Template = (args) => {
+  const container = document.createElement("div");
+  const popover = document.createElement("flip-popover");
+  const element = generateStoryElement("flip-resource-list-item", args);
+  container.setAttribute("aria-label", "List");
+  container.setAttribute("role", "grid");
+  popover.label = "Options";
+  popover.popoverId = "popover";
+  popover.trigger = "trigger";
+  popover.innerHTML = `
+    <flip-action-list>
+      <flip-action-list-item
+        icon="<flip-icon-mention></flip-icon-mention>"
+        label="Action item 1"
+      ></flip-action-list-item>
+      <flip-action-list-item
+        icon="<flip-icon-mention></flip-icon-mention>"
+        label="Action item 2"
+      ></flip-action-list-item>
+    </flip-action-list>
+  `;
+  container.append(element, popover);
+  return container;
+};
+export const FlipResourceListItem = Template.bind({});
+FlipResourceListItem.args = {
+  description: "With a description",
+  label: "This is a resource item",
+  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

@@ -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=&quot;John Doe&quot; src=&quot;https://picsum.photos/id/433/144/144&quot;></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

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

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

@@ -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

@@ -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

@@ -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

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

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

@@ -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

@@ -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

@@ -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

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

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

@@ -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"]}