@getflip/swirl-components 0.4.0 → 0.5.0

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

@@ -0,0 +1,395 @@
+import { autoUpdate, computePosition, offset, } from "@floating-ui/dom";
+import { Component, Element, Event, h, Host, Listen, Prop, State, } from "@stencil/core";
+import classnames from "classnames";
+import { debounce } from "../../utils";
+export class FlipAutocomplete {
+  constructor() {
+    this.clearable = true;
+    this.clearButtonLabel = "Clear input";
+    this.generateSuggestions = async () => [];
+    this.menuLabel = "Suggestions";
+    this.active = false;
+    this.loading = false;
+    this.suggestions = [];
+    this.onChange = debounce(async (event) => {
+      this.value = event.detail;
+      this.valueChange.emit(this.value);
+      this.updateSuggestions();
+      this.open();
+    }, 250, false);
+    this.onSelect = (event) => {
+      var _a;
+      if (Boolean(event.detail[0])) {
+        this.value = event.detail[0];
+        this.valueChange.emit(this.value);
+      }
+      (_a = this.inputEl.querySelector("input")) === null || _a === void 0 ? void 0 : _a.focus();
+      this.close();
+    };
+    this.onFocusOut = (event) => {
+      const relatedTarget = event.relatedTarget;
+      if (Boolean(relatedTarget) && !this.el.contains(relatedTarget)) {
+        this.close();
+      }
+    };
+    this.onFocus = () => {
+      this.updateSuggestions();
+      this.open();
+    };
+    this.onKeyDown = (event) => {
+      if (event.code === "Escape") {
+        event.preventDefault();
+        this.inputEl.querySelector("input").focus();
+        this.close();
+      }
+    };
+    this.onInputKeyDown = (event) => {
+      if (event.code === "ArrowDown") {
+        event.preventDefault();
+        this.listboxEl.querySelector('[role="listbox"]').focus();
+      }
+    };
+  }
+  componentWillLoad() {
+    const index = document.querySelectorAll("flip-datepicker").length;
+    this.id = `autocomplete-${index}`;
+  }
+  onWindowClick(event) {
+    const target = event.target;
+    if (!this.el.contains(target)) {
+      this.close();
+    }
+  }
+  async close() {
+    if (!this.active) {
+      return;
+    }
+    if (this.disableAutoUpdate) {
+      this.disableAutoUpdate();
+    }
+    this.active = false;
+  }
+  async open() {
+    if (this.active) {
+      return;
+    }
+    this.active = true;
+    requestAnimationFrame(async () => {
+      await this.reposition();
+      if (this.disableAutoUpdate) {
+        this.disableAutoUpdate();
+      }
+      this.disableAutoUpdate = autoUpdate(this.inputEl, this.listboxContainerEl, this.reposition.bind(this));
+      this.listboxContainerEl.scrollTop = 0;
+    });
+  }
+  async reposition() {
+    if (!Boolean(this.listboxContainerEl)) {
+      return;
+    }
+    this.position = await computePosition(this.inputEl, this.listboxContainerEl, {
+      middleware: [offset({ crossAxis: -16, mainAxis: 16 })],
+      placement: "bottom-start",
+      strategy: "fixed",
+    });
+  }
+  async updateSuggestions() {
+    this.loading = true;
+    this.suggestions = [];
+    this.suggestions = await this.generateSuggestions(this.value);
+    this.loading = false;
+  }
+  render() {
+    var _a, _b, _c;
+    const suggestionsMenuId = `${this.id}-suggestions`;
+    const className = classnames("autocomplete", {
+      "autocomplete--inactive": !this.active,
+    });
+    return (h(Host, null,
+      h("div", { class: className, onFocusout: this.onFocusOut, onKeyDown: this.onKeyDown },
+        h("flip-text-input", { autoSelect: this.autoSelect, class: "autocomplete__input", clearable: this.clearable, clearButtonLabel: this.clearButtonLabel, disabled: this.disabled, disableDynamicWidth: true, flipAriaAutocomplete: "list", flipAriaControls: suggestionsMenuId, flipAriaDescribedby: this.flipAriaDescribedby, flipAriaExpanded: String(this.active), flipRole: "combobox", id: this.id, invalid: this.invalid, onInputFocus: this.onFocus, onKeyDown: this.onInputKeyDown, onValueChange: this.onChange, maxLength: this.maxLength, mode: this.mode, ref: (el) => (this.inputEl = el), required: this.required, spellCheck: this.spellCheck, value: this.value }),
+        h("div", { class: "autocomplete__listbox-container", ref: (el) => (this.listboxContainerEl = el), style: {
+            top: Boolean(this.position) ? `${(_a = this.position) === null || _a === void 0 ? void 0 : _a.y}px` : "",
+            left: Boolean(this.position) ? `${(_b = this.position) === null || _b === void 0 ? void 0 : _b.x}px` : "",
+            width: `${((_c = this.inputEl) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect().width) + 32}px`,
+          } },
+          this.loading && (h("div", { class: "autocomplete__spinner" },
+            h("flip-spinner", null))),
+          h("flip-option-list", { label: this.menuLabel, onValueChange: this.onSelect, optionListId: suggestionsMenuId, ref: (el) => (this.listboxEl = el), value: [this.value] }, this.suggestions.map((suggestion) => (h("flip-option-list-item", { selected: this.value === suggestion.label, key: suggestion.id, disabled: suggestion.disabled, label: suggestion.label, value: suggestion.label }))))))));
+  }
+  static get is() { return "flip-autocomplete"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-autocomplete.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-autocomplete.css"]
+  }; }
+  static get properties() { return {
+    "autoSelect": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "auto-select",
+      "reflect": false
+    },
+    "clearable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "clearable",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "clearButtonLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "clear-button-label",
+      "reflect": false,
+      "defaultValue": "\"Clear input\""
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disabled",
+      "reflect": false
+    },
+    "flipAriaDescribedby": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "flip-aria-describedby",
+      "reflect": false
+    },
+    "generateSuggestions": {
+      "type": "unknown",
+      "mutable": true,
+      "complexType": {
+        "original": "(\n    currentValue: string\n  ) => Promise<FlipAutocompleteSuggestion[]>",
+        "resolved": "(currentValue: string) => Promise<FlipAutocompleteSuggestion[]>",
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "FlipAutocompleteSuggestion": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "async () => []"
+    },
+    "invalid": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "invalid",
+      "reflect": false
+    },
+    "maxLength": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "max-length",
+      "reflect": false
+    },
+    "menuLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "menu-label",
+      "reflect": false,
+      "defaultValue": "\"Suggestions\""
+    },
+    "mode": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "FlipTextInputMode",
+        "resolved": "\"decimal\" | \"email\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\"",
+        "references": {
+          "FlipTextInputMode": {
+            "location": "import",
+            "path": "../flip-text-input/flip-text-input"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "mode",
+      "reflect": false
+    },
+    "required": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "required",
+      "reflect": false
+    },
+    "spellCheck": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "spell-check",
+      "reflect": false
+    },
+    "value": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "value",
+      "reflect": true
+    }
+  }; }
+  static get states() { return {
+    "active": {},
+    "loading": {},
+    "position": {},
+    "suggestions": {}
+  }; }
+  static get events() { return [{
+      "method": "valueChange",
+      "name": "valueChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+  static get listeners() { return [{
+      "name": "click",
+      "method": "onWindowClick",
+      "target": "window",
+      "capture": false,
+      "passive": false
+    }]; }
+}

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

@@ -0,0 +1,77 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./flip-autocomplete.mdx";
+export default {
+  component: "flip-autocomplete",
+  parameters: {
+    docs: {
+      page: Docs,
+      source: {
+        code: `<flip-form-control label="Autocomplete">
+  <flip-autocomplete id="autocomplete"></flip-autocomplete>
+</flip-form-control>
+
+<script>
+  const autocomplete = document.getElementById('autocomplete');
+
+  const suggestions = [
+    {
+      id: "1",
+      label: "Item #1",
+    },
+    {
+      disabled: true,
+      id: "2",
+      label: "Item #2",
+    },
+    {
+      id: "3",
+      label: "Item #3",
+    },
+  ];
+
+  // The generateSuggestions callback should always return a promise.
+  autocomplete.generateSuggestions = async (value) => {
+    if (!Boolean(value)) {
+      return suggestions;
+    }
+
+    return suggestions.filter((suggestion) =>
+      suggestion.label.toLowerCase().includes(value.toLowerCase())
+    );
+  }
+</script>`,
+      },
+    },
+  },
+  title: "Components/FlipAutocomplete",
+};
+const Template = (args) => {
+  const formControl = document.createElement("flip-form-control");
+  const element = generateStoryElement("flip-autocomplete", args);
+  formControl.label = "Autocomplete";
+  const suggestions = [
+    {
+      id: "1",
+      label: "Item #1",
+    },
+    {
+      disabled: true,
+      id: "2",
+      label: "Item #2",
+    },
+    {
+      id: "3",
+      label: "Item #3",
+    },
+  ];
+  element.generateSuggestions = async (value) => {
+    if (!Boolean(value)) {
+      return suggestions;
+    }
+    return suggestions.filter((suggestion) => suggestion.label.toLowerCase().includes(value.toLowerCase()));
+  };
+  formControl.append(element);
+  return formControl;
+};
+export const FlipAutocomplete = Template.bind({});
+FlipAutocomplete.args = {};

package/dist/collection/components/flip-avatar/flip-avatar.css

@@ -137,6 +137,41 @@
     border-radius: 2.25rem;
   }
 
+.avatar--color-banana .avatar__initials {
+    color: var(--s-decorative-banana-text);
+    background-color: var(--s-decorative-banana-surface-subdued);
+  }
+
+.avatar--color-blueberry .avatar__initials {
+    color: var(--s-decorative-blueberry-text);
+    background-color: var(--s-decorative-blueberry-surface-subdued);
+  }
+
+.avatar--color-chilli .avatar__initials {
+    color: var(--s-decorative-chilli-text);
+    background-color: var(--s-decorative-chilli-surface-subdued);
+  }
+
+.avatar--color-grape .avatar__initials {
+    color: var(--s-decorative-grape-text);
+    background-color: var(--s-decorative-grape-surface-subdued);
+  }
+
+.avatar--color-kiwi .avatar__initials {
+    color: var(--s-decorative-kiwi-text);
+    background-color: var(--s-decorative-kiwi-surface-subdued);
+  }
+
+.avatar--color-pumpkin .avatar__initials {
+    color: var(--s-decorative-pumpkin-text);
+    background-color: var(--s-decorative-pumpkin-surface-subdued);
+  }
+
+.avatar--color-radish .avatar__initials {
+    color: var(--s-decorative-radish-text);
+    background-color: var(--s-decorative-radish-surface-subdued);
+  }
+
 .avatar__image {
   overflow: hidden;
   width: 100%;
@@ -175,7 +210,7 @@
   justify-content: center;
   align-items: center;
   border-radius: 50%;
-  background-color: var(--s-decorative-6-default);
+  font-weight: var(--s-font-weight-medium);
 }
 
 .avatar__initials > span {

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

@@ -11,6 +11,7 @@ const flipAvatarSizeMappings = {
 export class FlipAvatar {
   constructor() {
     this.badgePosition = "bottom";
+    this.color = "kiwi";
     this.interactive = false;
     this.showLabel = false;
     this.size = "m";
@@ -62,7 +63,7 @@ export class FlipAvatar {
     const showFallbackIcon = !showImage && !showInitials && !showIcon;
     const showBadge = Boolean(this.badge) && this.size === "m";
     const role = this.interactive ? "button" : "img";
-    const className = classnames("avatar", `avatar--size-${this.size}`, `avatar--variant-${this.variant}`, {
+    const className = classnames("avatar", `avatar--color-${this.color}`, `avatar--size-${this.size}`, `avatar--variant-${this.variant}`, {
       "avatar--has-icon": showIcon || showFallbackIcon,
       "avatar--has-initials": showInitials,
       "avatar--interactive": this.interactive,
@@ -128,6 +129,28 @@ export class FlipAvatar {
       "reflect": false,
       "defaultValue": "\"bottom\""
     },
+    "color": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "FlipAvatarColor",
+        "resolved": "\"banana\" | \"blueberry\" | \"chilli\" | \"grape\" | \"kiwi\" | \"pumpkin\" | \"radish\"",
+        "references": {
+          "FlipAvatarColor": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "color",
+      "reflect": false,
+      "defaultValue": "\"kiwi\""
+    },
     "icon": {
       "type": "string",
       "mutable": false,
@@ -286,4 +309,3 @@ export class FlipAvatar {
       "methodName": "watchSrcProp"
     }]; }
 }
-//# sourceMappingURL=flip-avatar.js.map

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

@@ -38,4 +38,3 @@ FlipAvatar.args = {
   label: "John Doe",
   src: "https://picsum.photos/id/433/144/144",
 };
-//# sourceMappingURL=flip-avatar.stories.js.map

package/dist/collection/components/flip-avatar-group/flip-avatar-group.js

@@ -52,4 +52,3 @@ export class FlipAvatarGroup {
     }
   }; }
 }
-//# sourceMappingURL=flip-avatar-group.js.map

package/dist/collection/components/flip-avatar-group/flip-avatar-group.stories.js

@@ -31,4 +31,3 @@ export const FlipAvatarGroup = Template.bind({});
 FlipAvatarGroup.args = {
   badge: `<flip-badge aria-label="3 new messages" label="3"></flip-badge>`,
 };
-//# sourceMappingURL=flip-avatar-group.stories.js.map

package/dist/collection/components/flip-badge/flip-badge.css

@@ -54,37 +54,43 @@
 }
 
 .badge--intent-critical {
+  color: var(--s-text-on-status);
   background-color: var(--s-surface-critical-default);
 }
 
-.badge--intent-decorative-1 {
-  background-color: var(--s-decorative-1-default);
+.badge--intent-banana {
+  color: var(--s-text-dark);
+  background-color: var(--s-decorative-banana-surface);
 }
 
-.badge--intent-decorative-2 {
-  background-color: var(--s-decorative-2-default);
+.badge--intent-blueberry {
+  color: var(--s-text-on-status);
+  background-color: var(--s-decorative-blueberry-surface);
 }
 
-.badge--intent-decorative-3 {
-  color: var(--s-text-default);
-  background-color: var(--s-decorative-3-default);
+.badge--intent-chilli {
+  color: var(--s-text-on-status);
+  background-color: var(--s-decorative-chilli-surface);
 }
 
-.badge--intent-decorative-4 {
-  color: var(--s-text-default);
-  background-color: var(--s-decorative-4-default);
+.badge--intent-grape {
+  color: var(--s-text-on-status);
+  background-color: var(--s-decorative-grape-surface);
 }
 
-.badge--intent-decorative-5 {
-  background-color: var(--s-decorative-5-default);
+.badge--intent-kiwi {
+  color: var(--s-text-on-status);
+  background-color: var(--s-decorative-kiwi-surface);
 }
 
-.badge--intent-decorative-6 {
-  background-color: var(--s-decorative-6-default);
+.badge--intent-pumpkin {
+  color: var(--s-text-dark);
+  background-color: var(--s-decorative-pumpkin-surface);
 }
 
-.badge--intent-decorative-7 {
-  background-color: var(--s-decorative-7-default);
+.badge--intent-radish {
+  color: var(--s-text-on-status);
+  background-color: var(--s-decorative-radish-surface);
 }
 
 .badge--variant-dot {

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

@@ -46,7 +46,7 @@ export class FlipBadge {
       "mutable": false,
       "complexType": {
         "original": "FlipBadgeIntent",
-        "resolved": "\"critical\" | \"decorative-1\" | \"decorative-2\" | \"decorative-3\" | \"decorative-4\" | \"decorative-5\" | \"decorative-6\" | \"decorative-7\"",
+        "resolved": "\"banana\" | \"blueberry\" | \"chilli\" | \"critical\" | \"grape\" | \"kiwi\" | \"pumpkin\" | \"radish\"",
         "references": {
           "FlipBadgeIntent": {
             "location": "local"
@@ -126,4 +126,3 @@ export class FlipBadge {
     }
   }; }
 }
-//# sourceMappingURL=flip-badge.js.map

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

@@ -29,4 +29,3 @@ FlipBadge.args = {
   "aria-label": "3 new messages",
   label: "3",
 };
-//# sourceMappingURL=flip-badge.stories.js.map

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

@@ -220,4 +220,3 @@ export class FlipBanner {
     }]; }
   static get elementRef() { return "element"; }
 }
-//# sourceMappingURL=flip-banner.js.map

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

@@ -20,4 +20,3 @@ FlipBanner.args = {
   dismissable: true,
   intent: "critical",
 };
-//# sourceMappingURL=flip-banner.stories.js.map