@getflip/swirl-components 0.4.0 → 0.6.0

package/dist/components/flip-resource-list2.js

@@ -0,0 +1,87 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$1 } from './flip-stack2.js';
+
+const flipResourceListCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}";
+
+const FlipResourceList = /*@__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() {
+  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);
+      }
+      break;
+    case "flip-stack":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { FlipResourceList as F, defineCustomElement as d };

package/dist/components/flip-search.js

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

package/dist/components/flip-select.d.ts

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

package/dist/components/flip-select.js

@@ -0,0 +1,118 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { q as querySelectorAllDeep } from './utils.js';
+import { d as defineCustomElement$5 } from './flip-icon-expand-less2.js';
+import { d as defineCustomElement$4 } from './flip-icon-expand-more2.js';
+import { d as defineCustomElement$3 } from './flip-option-list2.js';
+import { d as defineCustomElement$2 } from './flip-popover2.js';
+
+const flipSelectCss = ".sc-flip-select-h{display:block;width:100%}.sc-flip-select-h *.sc-flip-select{box-sizing:border-box}.select.sc-flip-select{position:relative;display:flex;width:100%}.select--disabled.sc-flip-select .select__label.sc-flip-select{color:var(--s-text-disabled)}.select--disabled.sc-flip-select .select__indicator.sc-flip-select{color:var(--s-icon-disabled)}.select__label.sc-flip-select{display:block;overflow:hidden;width:100%;height:1.375rem;margin:0;padding:0;padding-right:calc(1.5rem + var(--s-space-8));border:none;background-color:transparent;font:inherit;line-height:var(--s-line-height-base);text-align:left;white-space:nowrap;text-overflow:ellipsis;cursor:default}.select__label.sc-flip-select:focus{outline:none}.select__indicator.sc-flip-select{position:absolute;top:calc(-1 * var(--s-space-12));right:0;display:inline-flex;color:var(--s-icon-default)}";
+
+const FlipSelect$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.valueChange = createEvent(this, "valueChange", 7);
+    this.options = [];
+    this.select = (event) => {
+      this.value = event.detail;
+      this.valueChange.emit(this.value);
+      if (!this.multiSelect) {
+        this.popover.close();
+      }
+    };
+    this.onSlotChange = () => {
+      this.updateOptions();
+    };
+    this.onOpen = () => {
+      this.open = true;
+    };
+    this.onClose = () => {
+      this.open = false;
+    };
+    this.onKeyDown = (event) => {
+      if (event.code === "Space" || event.code === "Enter") {
+        event.preventDefault();
+        this.popover.open();
+      }
+    };
+  }
+  componentWillLoad() {
+    queueMicrotask(() => {
+      this.updateOptions();
+    });
+  }
+  onWindowFocusIn(event) {
+    if (event.target === this.el.querySelector("input")) {
+      event.stopImmediatePropagation();
+    }
+  }
+  updateOptions() {
+    this.options = querySelectorAllDeep(this.el, "flip-option-list-item");
+  }
+  render() {
+    const label = Boolean(this.value)
+      ? this.value
+        .map((value) => { var _a; return (_a = this.options.find((option) => option.value === value)) === null || _a === void 0 ? void 0 : _a.label; })
+        .join(", ")
+      : "";
+    const ariaInvalid = this.invalid === true || this.invalid === false
+      ? String(this.invalid)
+      : undefined;
+    const className = classnames("select", {
+      "select--disabled": this.disabled,
+    });
+    return (h(Host, { onKeyDown: this.onKeyDown }, h("div", { class: className }, h("input", { "aria-describedby": this.flipAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, class: "select__label", disabled: this.disabled, id: "trigger", readOnly: true, type: "text", value: label }), h("span", { class: "select__indicator" }, this.open ? (h("flip-icon-expand-less", null)) : (h("flip-icon-expand-more", null))), h("flip-popover", { animation: "scale-in-y", class: "select__popover", enableFlip: false, label: this.label, offset: [16, -16], onPopoverClose: this.onClose, onPopoverOpen: this.onOpen, popoverId: "select-options", ref: (el) => (this.popover = el), trigger: "trigger", useContainerWidth: "flip-form-control" }, h("flip-option-list", { onValueChange: this.select, multiSelect: this.multiSelect, value: this.value }, h("slot", { onSlotchange: this.onSlotChange }))))));
+  }
+  get el() { return this; }
+  static get style() { return flipSelectCss; }
+}, [6, "flip-select", {
+    "disabled": [4],
+    "flipAriaDescribedby": [1, "flip-aria-describedby"],
+    "invalid": [4],
+    "label": [1],
+    "multiSelect": [4, "multi-select"],
+    "required": [4],
+    "value": [1040],
+    "options": [32],
+    "open": [32]
+  }, [[8, "focusin", "onWindowFocusIn"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["flip-select", "flip-icon-expand-less", "flip-icon-expand-more", "flip-option-list", "flip-popover"];
+  components.forEach(tagName => { switch (tagName) {
+    case "flip-select":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FlipSelect$1);
+      }
+      break;
+    case "flip-icon-expand-less":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "flip-icon-expand-more":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "flip-option-list":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "flip-popover":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const FlipSelect = FlipSelect$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { FlipSelect, defineCustomElement };

package/dist/components/flip-spinner.js

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

package/dist/components/flip-spinner2.js

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

package/dist/components/flip-stack.js

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

package/dist/components/flip-stack2.js

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

package/dist/components/flip-switch.js

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

package/dist/components/flip-tab.js

@@ -38,5 +38,3 @@ const FlipTab = FlipTab$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { FlipTab, defineCustomElement };
-
-//# sourceMappingURL=flip-tab.js.map

package/dist/components/flip-tabs.js

@@ -104,5 +104,3 @@ const FlipTabs = FlipTabs$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { FlipTabs, defineCustomElement };
-
-//# sourceMappingURL=flip-tabs.js.map

package/dist/components/flip-tag.js

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

package/dist/components/flip-text-input.js

@@ -1,198 +1,6 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as classnames } from './index2.js';
-import { d as defineCustomElement$6 } from './flip-icon-cancel2.js';
-import { d as defineCustomElement$5 } from './flip-icon-expand-less2.js';
-import { d as defineCustomElement$4 } from './flip-icon-expand-more2.js';
-import { d as defineCustomElement$3 } from './flip-icon-visibility2.js';
-import { d as defineCustomElement$2 } from './flip-icon-visibility-off2.js';
-
-const flipTextInputCss = ".sc-flip-text-input-h{display:block;width:100%}.sc-flip-text-input-h *.sc-flip-text-input{box-sizing:border-box}.text-input.sc-flip-text-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);font:inherit;line-height:var(--s-line-height-sm)}.text-input--clearable.sc-flip-text-input{padding-right:calc(1.5rem + var(--s-space-8))}.text-input--type-number.sc-flip-text-input{padding-right:calc(1.5rem + var(--s-space-8))}.text-input--show-password.sc-flip-text-input .text-input__input.sc-flip-text-input{width:100%}.text-input--disabled.sc-flip-text-input .text-input__character-counter.sc-flip-text-input{color:var(--s-text-disabled)}.text-input__input.sc-flip-text-input{display:inline-flex;width:100%;max-height:13.75rem;margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);resize:none;caret-color:var(--s-border-highlight)}.text-input__input.sc-flip-text-input:focus{outline:none}.text-input__input.sc-flip-text-input:disabled{color:var(--s-text-disabled);background-color:transparent}.text-input__input.sc-flip-text-input::-webkit-outer-spin-button,.text-input__input.sc-flip-text-input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.text-input__input[type=\"number\"].sc-flip-text-input{-moz-appearance:textfield}input.text-input__input.sc-flip-text-input:not([type=\"password\"]){width:0.25rem;min-width:0.25rem}.text-input__clear-button.sc-flip-text-input,.text-input__password-toggle.sc-flip-text-input{position:absolute;top:calc(-1 * var(--s-space-12));right:0;display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.text-input__clear-button.sc-flip-text-input:focus,.text-input__password-toggle.sc-flip-text-input:focus{outline-color:var(--s-focus-default)}.text-input__stepper.sc-flip-text-input{position:absolute;top:-1.4375rem;right:0;display:flex;flex-direction:column}.text-input__step-button.sc-flip-text-input{display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.text-input__step-button.sc-flip-text-input:focus{outline-color:var(--s-focus-default)}.text-input__character-counter.sc-flip-text-input{position:absolute;top:-1.375rem;right:0;display:flex;color:var(--s-text-subdued);line-height:var(--s-line-height-sm);flex-direction:column}.text-input__prefix.sc-flip-text-input{padding-right:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-base)}.text-input__suffix.sc-flip-text-input{padding-left:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-base)}";
-
-const FlipTextInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.valueChange = createEvent(this, "valueChange", 7);
-    this.autoComplete = "on";
-    this.clearButtonLabel = "Clear input";
-    this.rows = 1;
-    this.passwordToggleLabel = "Toggle password display";
-    this.type = "text";
-    this.showPassword = false;
-    this.clear = () => {
-      this.inputEl.value = "";
-      this.value = "";
-      this.valueChange.emit("");
-      this.inputEl.focus();
-    };
-    this.onChange = (event) => {
-      const el = event.target;
-      this.value = el.value;
-      this.valueChange.emit(el.value);
-    };
-    this.onFocus = (event) => {
-      this.handleAutoSelect(event);
-    };
-    this.onInput = (event) => {
-      this.onChange(event);
-    };
-    this.onKeyPress = (event) => {
-      if (this.type !== "number") {
-        return;
-      }
-      if (["+", "-", "e"].includes(event.key)) {
-        event.preventDefault();
-      }
-    };
-    this.decreaseValue = () => {
-      if (this.type !== "number") {
-        return;
-      }
-      const step = this.step || 1;
-      const currentValue = isNaN(this.inputEl.valueAsNumber)
-        ? this.min !== undefined
-          ? this.min + 1
-          : 1
-        : this.inputEl.valueAsNumber;
-      this.value = String(Math.max(this.min || -Infinity, currentValue - step));
-      this.valueChange.emit(this.value);
-    };
-    this.increaseValue = () => {
-      if (this.type !== "number") {
-        return;
-      }
-      const step = this.step || 1;
-      const currentValue = isNaN(this.inputEl.valueAsNumber)
-        ? this.min !== undefined
-          ? this.min - 1
-          : -1
-        : this.inputEl.valueAsNumber;
-      this.value = String(Math.min(this.max || Infinity, currentValue + step));
-      this.valueChange.emit(this.value);
-    };
-    this.togglePassword = () => {
-      if (this.type !== "password") {
-        return;
-      }
-      this.showPassword = !this.showPassword;
-    };
-  }
-  componentDidRender() {
-    this.adjustInputSize();
-  }
-  adjustInputSize() {
-    if (this.rows > 1) {
-      this.inputEl.style.width = "";
-      this.inputEl.style.height = "";
-      this.inputEl.style.height = this.inputEl.scrollHeight / 16 + "rem";
-    }
-    if (this.rows === 1) {
-      this.inputEl.style.height = "";
-      this.inputEl.style.width = "";
-      if (this.type !== "password") {
-        this.inputEl.style.width = this.inputEl.scrollWidth / 16 + "rem";
-      }
-    }
-  }
-  handleAutoSelect(event) {
-    if (!this.autoSelect) {
-      return;
-    }
-    event.target.select();
-  }
-  render() {
-    var _a;
-    const Tag = this.rows === 1 ? "input" : "textarea";
-    const ariaInvalid = this.invalid === true
-      ? "true"
-      : this.invalid === false
-        ? "false"
-        : undefined;
-    const showStepper = this.type === "number" && !this.disabled;
-    const showPasswordToggle = this.type === "password" && !this.disabled;
-    const showClearButton = this.clearable &&
-      !this.disabled &&
-      Boolean(this.value) &&
-      !showPasswordToggle &&
-      !showStepper &&
-      !this.showCharacterCounter;
-    const type = this.type === "password" && this.showPassword ? "text" : this.type;
-    const className = classnames("text-input", `text-input--type-${this.type}`, {
-      "text-input--clearable": this.clearable,
-      "text-input--disabled": this.disabled,
-      "text-input--show-password": this.type === "password" && this.showPassword,
-    });
-    return (h(Host, null, h("div", { class: className }, this.prefixLabel && (h("span", { class: "text-input__prefix" }, this.prefixLabel)), h(Tag, { "aria-describedby": this.flipAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoComplete: this.autoComplete, autoFocus: this.autoFocus, class: "text-input__input", disabled: this.disabled, inputMode: this.mode, maxLength: this.maxLength, max: this.type === "number" ? this.max : undefined, min: this.type === "number" ? this.min : undefined, onFocus: this.onFocus, onInput: this.onInput, onKeyPress: this.onKeyPress, ref: (el) => (this.inputEl = el), required: this.required, rows: this.rows > 1 ? this.rows : undefined, spellcheck: this.spellCheck, step: this.type === "number" ? this.step : undefined, type: type, value: this.rows === 1 ? this.value : undefined }, this.rows > 1 && this.value), this.suffixLabel && (h("span", { class: "text-input__suffix" }, this.suffixLabel)), showClearButton && (h("button", { "aria-label": this.clearButtonLabel, class: "text-input__clear-button", onClick: this.clear, type: "button" }, h("flip-icon-cancel", null))), showPasswordToggle && (h("button", { "aria-label": this.passwordToggleLabel, class: "text-input__password-toggle", onClick: this.togglePassword, type: "button" }, this.showPassword ? (h("flip-icon-visibility-off", null)) : (h("flip-icon-visibility", null)))), showStepper && (h("span", { class: "text-input__stepper" }, h("button", { "aria-hidden": "true", class: "text-input__step-button", onClick: this.increaseValue, tabIndex: -1, type: "button" }, h("flip-icon-expand-less", null)), h("button", { "aria-hidden": "true", class: "text-input__step-button", onClick: this.decreaseValue, tabIndex: -1, type: "button" }, h("flip-icon-expand-more", null)))), this.showCharacterCounter && (h("span", { class: "text-input__character-counter" }, ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0, " ", Boolean(this.maxLength) ? `/ ${this.maxLength}` : "")))));
-  }
-  static get style() { return flipTextInputCss; }
-}, [2, "flip-text-input", {
-    "autoComplete": [1, "auto-complete"],
-    "autoFocus": [4, "auto-focus"],
-    "autoSelect": [4, "auto-select"],
-    "clearable": [4],
-    "clearButtonLabel": [1, "clear-button-label"],
-    "disabled": [4],
-    "flipAriaDescribedby": [1, "flip-aria-describedby"],
-    "invalid": [4],
-    "maxLength": [2, "max-length"],
-    "max": [2],
-    "min": [2],
-    "mode": [1],
-    "prefixLabel": [1, "prefix-label"],
-    "required": [4],
-    "rows": [2],
-    "showCharacterCounter": [4, "show-character-counter"],
-    "spellCheck": [4, "spell-check"],
-    "suffixLabel": [1, "suffix-label"],
-    "step": [2],
-    "passwordToggleLabel": [1, "password-toggle-label"],
-    "type": [1],
-    "value": [1537],
-    "showPassword": [32]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["flip-text-input", "flip-icon-cancel", "flip-icon-expand-less", "flip-icon-expand-more", "flip-icon-visibility", "flip-icon-visibility-off"];
-  components.forEach(tagName => { switch (tagName) {
-    case "flip-text-input":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, FlipTextInput$1);
-      }
-      break;
-    case "flip-icon-cancel":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$6();
-      }
-      break;
-    case "flip-icon-expand-less":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "flip-icon-expand-more":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "flip-icon-visibility":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "flip-icon-visibility-off":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
-defineCustomElement$1();
+import { F as FlipTextInput$1, d as defineCustomElement$1 } from './flip-text-input2.js';
 
 const FlipTextInput = FlipTextInput$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { FlipTextInput, defineCustomElement };
-
-//# sourceMappingURL=flip-text-input.js.map