@paperless/core 0.1.0-alpha.99 → 1.3.0

package/dist/components/p-select.js

@@ -0,0 +1,340 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as childOf } from './child-of.js';
+import { d as defineCustomElement$a } from './dropdown.component.js';
+import { d as defineCustomElement$9 } from './dropdown-menu-container.component.js';
+import { d as defineCustomElement$8 } from './dropdown-menu-item.component.js';
+import { d as defineCustomElement$7 } from './helper.component.js';
+import { d as defineCustomElement$6 } from './icon.component.js';
+import { d as defineCustomElement$5 } from './input-error.component.js';
+import { d as defineCustomElement$4 } from './input-group.component.js';
+import { d as defineCustomElement$3 } from './loader.component.js';
+import { d as defineCustomElement$2 } from './tooltip.component.js';
+
+const selectComponentCss = ".flex{display:flex!important}.w-full{width:100%!important}*{box-sizing:border-box}p-select{display:flex;flex-direction:column;width:100%}p-select input.read-only{text-overflow:ellipsis}.static{position:static!important}.h-6{height:1.5rem!important}.cursor-pointer{cursor:pointer!important}.rounded{border-radius:.25rem!important}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.visible{visibility:visible!important}.absolute{position:absolute!important}.blur{--tw-blur:blur(8px)!important;filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-0,.-rotate-135{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-270{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-315{--tw-rotate:-315deg!important}.-rotate-315,.-rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-90,.rotate-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-0{--tw-rotate:0deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-25{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-25{--tw-rotate:25deg!important}.rotate-270{--tw-rotate:270deg!important}.rotate-270,.rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-315{--tw-rotate:315deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-90{--tw-rotate:90deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-y-flip{--tw-scale-y:-1!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important;line-height:1.75rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xl{font-size:1.25rem!important;line-height:1.75rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-xxs{font-size:.6875rem!important}.text-negative{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!important}.text-negative-light{--tw-text-opacity:1!important;color:rgb(255 204 211/var(--tw-text-opacity))!important}.hover\\:text-negative:hover{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!important}.ml-1{margin-left:.25rem!important}.ml-2{margin-left:.5rem!important}.items-end{align-items:flex-end!important}.justify-between{justify-content:space-between!important}.rounded-bl-none{border-bottom-left-radius:0!important}.rounded-br-none{border-bottom-right-radius:0!important}.rounded-tl-none{border-top-left-radius:0!important}.rounded-tr-none{border-top-right-radius:0!important}.border-l-0{border-left-width:0!important}.border-r-0{border-right-width:0!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}.inline{display:inline!important}.justify-center{justify-content:center!important}";
+
+const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.queryChange = createEvent(this, "queryChange", 7);
+    this.valueChange = createEvent(this, "valueChange", 7);
+    this.dropdownShown = createEvent(this, "dropdownShown", 7);
+    this.items = undefined;
+    this.icon = undefined;
+    this.query = undefined;
+    this.placeholder = undefined;
+    this.autocompletePlaceholder = undefined;
+    this.value = undefined;
+    this.displayKey = 'text';
+    this.valueKey = undefined;
+    this.identifierKey = undefined;
+    this.queryKey = undefined;
+    this.autoSelectFirst = true;
+    this.showChevron = true;
+    this.maxDisplayedItems = 10;
+    this.enableAutocomplete = true;
+    this.keepQuery = true;
+    this.asyncFilter = false;
+    this.loading = false;
+    this.size = 'medium';
+    this.prefix = undefined;
+    this.label = undefined;
+    this.helper = undefined;
+    this.required = undefined;
+    this.error = undefined;
+    this.disabled = false;
+    this._showDropdown = false;
+    this._selectedItem = null;
+    this._isAutoCompleting = false;
+  }
+  get _items() {
+    var _a, _b;
+    if (!this.items || this.loading) {
+      return [];
+    }
+    let items = typeof this.items === 'string'
+      ? JSON.parse(this.items)
+      : this.items;
+    if (typeof (items === null || items === void 0 ? void 0 : items[0]) === 'string') {
+      this.displayKey = 'text';
+      this.valueKey = 'value';
+      items = items.map((str) => ({
+        value: str,
+        text: str,
+      }));
+    }
+    if (this._isAutoCompleting &&
+      ((_a = this.query) === null || _a === void 0 ? void 0 : _a.length) &&
+      this.query !== ((_b = this._selectedItem) === null || _b === void 0 ? void 0 : _b[this.displayKey]) &&
+      !this.asyncFilter) {
+      items = items.filter((item) => {
+        if (this.queryKey) {
+          return this._checkvalue(this.queryKey, item);
+        }
+        return (this._checkvalue(this._identifierKey, item) ||
+          this._checkvalue(this.displayKey, item));
+      });
+    }
+    return items === null || items === void 0 ? void 0 : items.slice(0, this.maxDisplayedItems);
+  }
+  get _displayValue() {
+    var _a;
+    if (this._isAutoCompleting) {
+      return this.query;
+    }
+    return (_a = this._selectedItem) === null || _a === void 0 ? void 0 : _a[this.displayKey];
+  }
+  get _placeholder() {
+    var _a;
+    return this._isAutoCompleting && ((_a = this.autocompletePlaceholder) === null || _a === void 0 ? void 0 : _a.length)
+      ? this.autocompletePlaceholder
+      : this.placeholder;
+  }
+  get _identifierKey() {
+    var _a, _b;
+    return (_b = (_a = this.identifierKey) !== null && _a !== void 0 ? _a : this.valueKey) !== null && _b !== void 0 ? _b : 'value';
+  }
+  componentDidLoad() {
+    if (!this.valueKey && !this.identifierKey) {
+      throw new Error('You must provide a valueKey or identifierKey');
+    }
+    if (this.value) {
+      this._valueChange();
+      return;
+    }
+    this.itemChanges();
+  }
+  render() {
+    return (h(Host, { class: "p-select" }, this._showDropdown && (!!this._items.length || this.loading), this._isAutoCompleting, h("p-dropdown", { disableTriggerClick: true, calculateWidth: true, insideClick: true, show: this._showDropdown &&
+        (!!this._items.length || this.loading) }, h("p-input-group", { slot: "trigger", icon: this.icon, size: this.size, prefix: this.prefix, label: this.label, helper: this.helper, required: this.required, error: this.error, disabled: this.disabled, focused: this._showDropdown, focusMethod: this.enableAutocomplete ? 'focus' : 'click' }, h("input", { slot: "input", type: "text", placeholder: this._placeholder, value: this._displayValue, class: `p-input cursor-pointer ${!this._isAutoCompleting && 'read-only'}`, onFocus: (ev) => this._onFocus(ev), onMouseDown: (ev) => this._onMouseDown(ev), onClick: () => this._onClick(), onInput: (ev) => this._onChange(ev) }), this.showChevron && (h("p-icon", { variant: "chevron", slot: "suffix" }))), h("div", { slot: "items" }, this.loading
+      ? this._getLoadingItems()
+      : this._getItems()))));
+  }
+  documentClickHandler({ target }) {
+    if (!this._showDropdown || childOf(target, this._el)) {
+      return;
+    }
+    this._showDropdown = false;
+    this._isAutoCompleting = false;
+  }
+  _valueChange() {
+    this._preselectItem();
+  }
+  itemChanges() {
+    this._preselectItem();
+  }
+  _showDropdownChanges() {
+    this.dropdownShown.emit({
+      value: this._showDropdown,
+      query: this.query,
+    });
+  }
+  _preselectItem() {
+    var _a, _b, _c;
+    if (this._isAutoCompleting && ((_a = this.query) === null || _a === void 0 ? void 0 : _a.length)) {
+      return;
+    }
+    let value = this.value;
+    if (!this._selectedItem && !value && this.autoSelectFirst) {
+      value = this._items[0];
+    }
+    // if (!value) {
+    //     this._selectValue(null);
+    //     return;
+    // }
+    const identifier = typeof value === 'object' && value !== null
+      ? value[this._identifierKey]
+      : value;
+    const parsedValue = typeof identifier === 'string' || typeof identifier === 'number'
+      ? identifier
+      : JSON.stringify(identifier);
+    const currentValue = this._selectedItem
+      ? (_b = this._selectedItem) === null || _b === void 0 ? void 0 : _b[this._identifierKey]
+      : null;
+    const currentParsedValue = typeof currentValue === 'string' || typeof currentValue === 'number'
+      ? currentValue
+      : JSON.stringify(currentValue);
+    if (this._selectedItem && currentParsedValue === parsedValue) {
+      return;
+    }
+    if (!((_c = this._items) === null || _c === void 0 ? void 0 : _c.length) && value) {
+      this._selectValue(value);
+      return;
+    }
+    const item = this._items.find((i) => {
+      const itemIdentifier = i === null || i === void 0 ? void 0 : i[this._identifierKey];
+      const parsedItemIdentifier = typeof itemIdentifier === 'string' ||
+        typeof itemIdentifier === 'number'
+        ? itemIdentifier
+        : JSON.stringify(itemIdentifier);
+      return parsedItemIdentifier === parsedValue;
+    });
+    this._selectValue(!!item ? item : value);
+  }
+  _selectValue(item) {
+    this._selectedItem = item;
+    const value = !!this.valueKey && this.valueKey !== 'false' && item !== null
+      ? item === null || item === void 0 ? void 0 : item[this.valueKey]
+      : item;
+    this.query = this.keepQuery ? item === null || item === void 0 ? void 0 : item[this.displayKey] : null;
+    this.value = value;
+    this.valueChange.emit(value);
+    this._onBlur(true);
+  }
+  _onFocus(ev) {
+    if (!this.enableAutocomplete) {
+      ev.preventDefault();
+      ev.stopPropogation();
+      if (!this._showDropdown) {
+        this._showDropdown = true;
+      }
+      return;
+    }
+    this._showDropdown = true;
+    this._isAutoCompleting = true;
+  }
+  _onMouseDown(ev) {
+    if (this.enableAutocomplete) {
+      return;
+    }
+    ev.preventDefault();
+  }
+  _onClick() {
+    if (this.enableAutocomplete) {
+      return;
+    }
+    this._showDropdown = !this._showDropdown;
+  }
+  _onBlur(force = false) {
+    if (!this.enableAutocomplete && !force) {
+      return;
+    }
+    this._isAutoCompleting = false;
+    this._showDropdown = false;
+  }
+  _onChange(ev) {
+    if (!this.enableAutocomplete) {
+      return;
+    }
+    if (!this._isAutoCompleting) {
+      this._isAutoCompleting = true;
+      this._showDropdown = true;
+    }
+    this.query = ev.target.value;
+    this.queryChange.emit(ev.target.value);
+  }
+  _checkvalue(key, item) {
+    var _a, _b, _c;
+    return (((_b = (_a = item === null || item === void 0 ? void 0 : item[key]) === null || _a === void 0 ? void 0 : _a.toString()) === null || _b === void 0 ? void 0 : _b.toLowerCase().indexOf((_c = this.query) === null || _c === void 0 ? void 0 : _c.toLowerCase())) >= 0);
+  }
+  _getItems() {
+    return this._items.map((item) => {
+      var _a;
+      return (h("p-dropdown-menu-item", { onClick: () => this._selectValue(item), active: item[this._identifierKey] ===
+          ((_a = this._selectedItem) === null || _a === void 0 ? void 0 : _a[this._identifierKey]) }, item[this.displayKey]));
+    });
+  }
+  _getLoadingItems() {
+    return [0, 0, 0].map(() => (h("p-dropdown-menu-item", { enableHover: false }, h("p-loader", { variant: "ghost", class: "h-6 w-full rounded" }))));
+  }
+  get _el() { return this; }
+  static get watchers() { return {
+    "value": ["_valueChange"],
+    "items": ["itemChanges"],
+    "_showDropdown": ["_showDropdownChanges"]
+  }; }
+  static get style() { return selectComponentCss; }
+}, [0, "p-select", {
+    "items": [1],
+    "icon": [1],
+    "query": [1],
+    "placeholder": [1],
+    "autocompletePlaceholder": [1, "autocomplete-placeholder"],
+    "value": [8],
+    "displayKey": [1, "display-key"],
+    "valueKey": [1, "value-key"],
+    "identifierKey": [1, "identifier-key"],
+    "queryKey": [1, "query-key"],
+    "autoSelectFirst": [4, "auto-select-first"],
+    "showChevron": [4, "show-chevron"],
+    "maxDisplayedItems": [2, "max-displayed-items"],
+    "enableAutocomplete": [4, "enable-autocomplete"],
+    "keepQuery": [4, "keep-query"],
+    "asyncFilter": [4, "async-filter"],
+    "loading": [4],
+    "size": [1],
+    "prefix": [1],
+    "label": [1],
+    "helper": [1],
+    "required": [516],
+    "error": [513],
+    "disabled": [516],
+    "_showDropdown": [32],
+    "_selectedItem": [32],
+    "_isAutoCompleting": [32]
+  }, [[6, "click", "documentClickHandler"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["p-select", "p-dropdown", "p-dropdown-menu-container", "p-dropdown-menu-item", "p-helper", "p-icon", "p-input-error", "p-input-group", "p-loader", "p-tooltip"];
+  components.forEach(tagName => { switch (tagName) {
+    case "p-select":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Select);
+      }
+      break;
+    case "p-dropdown":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$a();
+      }
+      break;
+    case "p-dropdown-menu-container":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$9();
+      }
+      break;
+    case "p-dropdown-menu-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "p-helper":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "p-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "p-input-error":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "p-input-group":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "p-loader":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "p-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const PSelect = Select;
+const defineCustomElement = defineCustomElement$1;
+
+export { PSelect, defineCustomElement };
+
+//# sourceMappingURL=p-select.js.map

package/dist/components/p-select.js.map

@@ -0,0 +1 @@
+{"file":"p-select.js","mappings":"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","names":[],"sources":["./src/components/molecules/select/select.component.scss?tag=p-select","./src/components/molecules/select/select.component.tsx"],"sourcesContent":["p-select {\n    @apply flex w-full flex-col;\n\n    input.read-only {\n        @apply text-ellipsis;\n    }\n}\n","import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Listen,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { childOf } from '../../../utils';\nimport { IconVariant } from '../../atoms/icon/icon.component';\n\n@Component({\n    tag: 'p-select',\n    styleUrl: 'select.component.scss',\n    shadow: false,\n})\nexport class Select {\n    /**\n     * The items to show in the dropdown\n     */\n    @Prop() items: string | any[];\n\n    /**\n     * Icon of the select box\n     */\n    @Prop() icon: IconVariant;\n\n    /**\n     * The current query\n     */\n    @Prop() query: string;\n\n    /**\n     * The placeholder of the input\n     */\n    @Prop() placeholder: string;\n\n    /**\n     * The placeholder of the input when auto completing\n     */\n    @Prop() autocompletePlaceholder: string;\n\n    /**\n     * The current value\n     */\n    @Prop() value: any;\n\n    /**\n     * The key of the object to display\n     */\n    @Prop() displayKey: string = 'text';\n\n    /**\n     * The key of the object to return\n     */\n    @Prop() valueKey: string;\n\n    /**\n     * The key to identify an object\n     */\n    @Prop() identifierKey: string;\n\n    /**\n     * The key of the object to display\n     */\n    @Prop() queryKey?: string;\n\n    /**\n     * Wether to automatically select the first item\n     */\n    @Prop() autoSelectFirst: boolean = true;\n\n    /**\n     * Wether to show the chevron or not\n     */\n    @Prop() showChevron: boolean = true;\n\n    /**\n     * The maximum amount of items to display\n     */\n    @Prop() maxDisplayedItems: number = 10;\n\n    /**\n     * Wether to enable autocomplete\n     */\n    @Prop() enableAutocomplete: boolean = true;\n\n    /**\n     * Wether to keep the query or not\n     */\n    @Prop() keepQuery: boolean = true;\n\n    /**\n     * Wether the input uses async filtering\n     */\n    @Prop() asyncFilter: boolean = false;\n\n    /**\n     * Wether to show loading items\n     */\n    @Prop() loading: boolean = false;\n\n    /**\n     * Event when the query of the autocomplete changes\n     */\n    @Event() queryChange: EventEmitter<string>;\n\n    /**\n     * Event when the value changes\n     */\n    @Event() valueChange: EventEmitter<any>;\n\n    /**\n     * Event when the dropdown shows\n     */\n    @Event() dropdownShown: EventEmitter<any>;\n\n    /**\n     * The size of the input group used by the select\n     */\n    @Prop() size: 'small' | 'medium' = 'medium';\n\n    /**\n     * The prefix of the input group used by the select\n     */\n    @Prop() prefix: string;\n\n    /**\n     * The label of the input group used by the select\n     */\n    @Prop() label: string;\n\n    /**\n     * The helper of the input group used by the select\n     */\n    @Prop() helper: string;\n\n    /**\n     * Wether the field is required\n     */\n    @Prop({ reflect: true }) required: boolean;\n\n    /**\n     * The helper of the input group used by the select\n     */\n    @Prop({ reflect: true }) error: string;\n\n    /**\n     * Wether the input group is disabled used by the select\n     */\n    @Prop({ reflect: true }) disabled: boolean = false;\n\n    /**\n     * The host element\n     */\n    @Element() private _el: HTMLElement;\n\n    @State() private _showDropdown: any = false;\n    @State() private _selectedItem: any = null;\n\n    @State() private _isAutoCompleting: boolean = false;\n\n    get _items() {\n        if (!this.items || this.loading) {\n            return [];\n        }\n\n        let items =\n            typeof this.items === 'string'\n                ? JSON.parse(this.items)\n                : this.items;\n\n        if (typeof items?.[0] === 'string') {\n            this.displayKey = 'text';\n            this.valueKey = 'value';\n\n            items = items.map((str) => ({\n                value: str,\n                text: str,\n            }));\n        }\n\n        if (\n            this._isAutoCompleting &&\n            this.query?.length &&\n            this.query !== this._selectedItem?.[this.displayKey] &&\n            !this.asyncFilter\n        ) {\n            items = items.filter((item) => {\n                if (this.queryKey) {\n                    return this._checkvalue(this.queryKey, item);\n                }\n\n                return (\n                    this._checkvalue(this._identifierKey, item) ||\n                    this._checkvalue(this.displayKey, item)\n                );\n            });\n        }\n\n        return items?.slice(0, this.maxDisplayedItems);\n    }\n\n    get _displayValue() {\n        if (this._isAutoCompleting) {\n            return this.query;\n        }\n\n        return this._selectedItem?.[this.displayKey];\n    }\n\n    get _placeholder() {\n        return this._isAutoCompleting && this.autocompletePlaceholder?.length\n            ? this.autocompletePlaceholder\n            : this.placeholder;\n    }\n\n    get _identifierKey() {\n        return this.identifierKey ?? this.valueKey ?? 'value';\n    }\n\n    componentDidLoad() {\n        if (!this.valueKey && !this.identifierKey) {\n            throw new Error('You must provide a valueKey or identifierKey');\n        }\n\n        if (this.value) {\n            this._valueChange();\n            return;\n        }\n\n        this.itemChanges();\n    }\n\n    render() {\n        return (\n            <Host class=\"p-select\">\n                {this._showDropdown && (!!this._items.length || this.loading)}\n                {this._isAutoCompleting}\n                <p-dropdown\n                    disableTriggerClick={true}\n                    calculateWidth={true}\n                    insideClick={true}\n                    show={\n                        this._showDropdown &&\n                        (!!this._items.length || this.loading)\n                    }\n                >\n                    <p-input-group\n                        slot=\"trigger\"\n                        icon={this.icon}\n                        size={this.size}\n                        prefix={this.prefix}\n                        label={this.label}\n                        helper={this.helper}\n                        required={this.required}\n                        error={this.error}\n                        disabled={this.disabled}\n                        focused={this._showDropdown}\n                        focusMethod={\n                            this.enableAutocomplete ? 'focus' : 'click'\n                        }\n                    >\n                        <input\n                            slot=\"input\"\n                            type=\"text\"\n                            placeholder={this._placeholder}\n                            value={this._displayValue}\n                            class={`p-input cursor-pointer ${\n                                !this._isAutoCompleting && 'read-only'\n                            }`}\n                            onFocus={(ev) => this._onFocus(ev)}\n                            onMouseDown={(ev) => this._onMouseDown(ev)}\n                            onClick={() => this._onClick()}\n                            onInput={(ev) => this._onChange(ev)}\n                        />\n\n                        {this.showChevron && (\n                            <p-icon variant=\"chevron\" slot=\"suffix\" />\n                        )}\n                    </p-input-group>\n                    <div slot=\"items\">\n                        {this.loading\n                            ? this._getLoadingItems()\n                            : this._getItems()}\n                    </div>\n                </p-dropdown>\n            </Host>\n        );\n    }\n\n    @Listen('click', { target: 'document', capture: true })\n    protected documentClickHandler({ target }) {\n        if (!this._showDropdown || childOf(target, this._el)) {\n            return;\n        }\n\n        this._showDropdown = false;\n        this._isAutoCompleting = false;\n    }\n\n    @Watch('value')\n    private _valueChange() {\n        this._preselectItem();\n    }\n\n    @Watch('items')\n    public itemChanges() {\n        this._preselectItem();\n    }\n\n    @Watch('_showDropdown')\n    public _showDropdownChanges() {\n        this.dropdownShown.emit({\n            value: this._showDropdown,\n            query: this.query,\n        });\n    }\n\n    private _preselectItem() {\n        if (this._isAutoCompleting && this.query?.length) {\n            return;\n        }\n\n        let value = this.value;\n\n        if (!this._selectedItem && !value && this.autoSelectFirst) {\n            value = this._items[0];\n        }\n\n        // if (!value) {\n        //     this._selectValue(null);\n        //     return;\n        // }\n\n        const identifier =\n            typeof value === 'object' && value !== null\n                ? value[this._identifierKey]\n                : value;\n        const parsedValue =\n            typeof identifier === 'string' || typeof identifier === 'number'\n                ? identifier\n                : JSON.stringify(identifier);\n\n        const currentValue = this._selectedItem\n            ? this._selectedItem?.[this._identifierKey]\n            : null;\n        const currentParsedValue =\n            typeof currentValue === 'string' || typeof currentValue === 'number'\n                ? currentValue\n                : JSON.stringify(currentValue);\n\n        if (this._selectedItem && currentParsedValue === parsedValue) {\n            return;\n        }\n\n        if (!this._items?.length && value) {\n            this._selectValue(value);\n            return;\n        }\n\n        const item = this._items.find((i) => {\n            const itemIdentifier = i?.[this._identifierKey];\n            const parsedItemIdentifier =\n                typeof itemIdentifier === 'string' ||\n                typeof itemIdentifier === 'number'\n                    ? itemIdentifier\n                    : JSON.stringify(itemIdentifier);\n\n            return parsedItemIdentifier === parsedValue;\n        });\n\n        this._selectValue(!!item ? item : value);\n    }\n\n    private _selectValue(item) {\n        this._selectedItem = item;\n        const value =\n            !!this.valueKey && this.valueKey !== 'false' && item !== null\n                ? item?.[this.valueKey]\n                : item;\n\n        this.query = this.keepQuery ? item?.[this.displayKey] : null;\n        this.value = value;\n        this.valueChange.emit(value);\n\n        this._onBlur(true);\n    }\n\n    private _onFocus(ev) {\n        if (!this.enableAutocomplete) {\n            ev.preventDefault();\n            ev.stopPropogation();\n\n            if (!this._showDropdown) {\n                this._showDropdown = true;\n            }\n            return;\n        }\n\n        this._showDropdown = true;\n        this._isAutoCompleting = true;\n    }\n\n    private _onMouseDown(ev) {\n        if (this.enableAutocomplete) {\n            return;\n        }\n\n        ev.preventDefault();\n    }\n\n    private _onClick() {\n        if (this.enableAutocomplete) {\n            return;\n        }\n\n        this._showDropdown = !this._showDropdown;\n    }\n\n    private _onBlur(force = false) {\n        if (!this.enableAutocomplete && !force) {\n            return;\n        }\n\n        this._isAutoCompleting = false;\n        this._showDropdown = false;\n    }\n\n    private _onChange(ev) {\n        if (!this.enableAutocomplete) {\n            return;\n        }\n\n        if (!this._isAutoCompleting) {\n            this._isAutoCompleting = true;\n            this._showDropdown = true;\n        }\n\n        this.query = ev.target.value;\n        this.queryChange.emit(ev.target.value);\n    }\n\n    private _checkvalue(key, item) {\n        return (\n            item?.[key]\n                ?.toString()\n                ?.toLowerCase()\n                .indexOf(this.query?.toLowerCase()) >= 0\n        );\n    }\n\n    private _getItems() {\n        return this._items.map((item) => (\n            <p-dropdown-menu-item\n                onClick={() => this._selectValue(item)}\n                active={\n                    item[this._identifierKey] ===\n                    this._selectedItem?.[this._identifierKey]\n                }\n            >\n                {item[this.displayKey]}\n            </p-dropdown-menu-item>\n        ));\n    }\n\n    private _getLoadingItems() {\n        return [0, 0, 0].map(() => (\n            <p-dropdown-menu-item enableHover={false}>\n                <p-loader variant=\"ghost\" class=\"h-6 w-full rounded\" />\n            </p-dropdown-menu-item>\n        ));\n    }\n}\n"],"version":3}

package/dist/components/p-slider-indicator.js

@@ -4,3 +4,5 @@ const PSliderIndicator = SliderIndicator;
 const defineCustomElement = defineCustomElement$1;
 
 export { PSliderIndicator, defineCustomElement };
+
+//# sourceMappingURL=p-slider-indicator.js.map

package/dist/components/p-slider-indicator.js.map

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

package/dist/components/p-status.js

@@ -1,16 +1,16 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './icon.component.js';
 
-const statusComponentCss = ".static{position:static!important}.mr-2{margin-right:.5rem!important}.flex{display:flex!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-storm-vague{--tw-text-opacity:1!important;color:rgb(152 154 183/var(--tw-text-opacity))!important}*{box-sizing:border-box}p-status{--tw-text-opacity:1;align-items:center;color:rgb(152 154 183/var(--tw-text-opacity));display:flex;font-size:.875rem;font-weight:500;line-height:1.25rem}p-status p-icon{font-size:1rem;line-height:1.5rem;margin-right:.5rem}p-status.variant-positive{--tw-text-opacity:1;color:rgb(40 209 124/var(--tw-text-opacity))}p-status.variant-unbiased{--tw-text-opacity:1;color:rgb(255 199 45/var(--tw-text-opacity))}p-status.variant-negative{--tw-text-opacity:1;color:rgb(185 30 40/var(--tw-text-opacity))}";
+const statusComponentCss = ".mr-2{margin-right:.5rem!important}.flex{display:flex!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-storm-vague{--tw-text-opacity:1!important;color:rgb(152 154 183/var(--tw-text-opacity))!important}*{box-sizing:border-box}p-status{--tw-text-opacity:1;align-items:center;color:rgb(152 154 183/var(--tw-text-opacity));display:flex;font-size:.875rem;font-weight:500;line-height:1.25rem}p-status p-icon{font-size:1rem;line-height:1.5rem;margin-right:.5rem}p-status.variant-positive{--tw-text-opacity:1;color:rgb(40 209 124/var(--tw-text-opacity))}p-status.variant-unbiased{--tw-text-opacity:1;color:rgb(255 199 45/var(--tw-text-opacity))}p-status.variant-negative{--tw-text-opacity:1;color:rgb(185 30 40/var(--tw-text-opacity))}.static{position:static!important}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-0,.-rotate-135{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-270{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-315{--tw-rotate:-315deg!important}.-rotate-315,.-rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-90,.rotate-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-0{--tw-rotate:0deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-25{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-25{--tw-rotate:25deg!important}.rotate-270{--tw-rotate:270deg!important}.rotate-270,.rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-315{--tw-rotate:315deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-90{--tw-rotate:90deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-y-flip{--tw-scale-y:-1!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important}.text-lg,.text-xl{line-height:1.75rem!important}.text-xl{font-size:1.25rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-xxs{font-size:.6875rem!important}";
 
-const Status = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const Status = /*@__PURE__*/ proxyCustomElement(class Status extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    /**
-     * The variant of the status
-     */
     this.variant = 'default';
+    this.icon = undefined;
+    this.iconFlip = undefined;
+    this.iconRotate = undefined;
   }
   render() {
     return (h(Host, { class: `p-status variant-${this.variant}
@@ -71,3 +71,5 @@ const PStatus = Status;
 const defineCustomElement = defineCustomElement$1;
 
 export { PStatus, defineCustomElement };
+
+//# sourceMappingURL=p-status.js.map

package/dist/components/p-status.js.map

@@ -0,0 +1 @@
+{"file":"p-status.js","mappings":";;;AAAA,MAAM,kBAAkB,GAAG,kkJAAkkJ;;MCQhlJ,MAAM;;;;mBAKX,SAAS;;;;;EAiBb,MAAM;IACF,QACI,EAAC,IAAI,IACD,KAAK,EAAE,oBAAoB,IAAI,CAAC,OAAO;kBACrC,IAED,IAAI,CAAC,QAAQ,EAAE,EAChB,eAAQ,CACL,EACT;GACL;EAEO,QAAQ;IACZ,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;IAEjD,IAAI,CAAC,IAAI,EAAE;MACP,OAAO;KACV;IAED,QACI,cACI,OAAO,EAAE,IAAI,EACb,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,MAAM,EAAE,IAAI,CAAC,UAAU,GACzB,EACJ;GACL;EAEO,eAAe;IACnB,IAAI,IAAI,GAAG,IAAI,CAAC;IAChB,QAAQ,IAAI,CAAC,OAAO;MAChB,KAAK,UAAU;QACX,IAAI,GAAG,WAAW,CAAC;QACnB,MAAM;MACV,KAAK,UAAU;QACX,IAAI,GAAG,UAAU,CAAC;QAClB,MAAM;MACV,KAAK,UAAU;QACX,IAAI,GAAG,OAAO,CAAC;QACf,MAAM;MACV;QACI,IAAI,GAAG,IAAI,CAAC;QACZ,MAAM;KACb;IAED,OAAO,IAAI,CAAC;GACf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/atoms/status/status.component.scss?tag=p-status","./src/components/atoms/status/status.component.tsx"],"sourcesContent":["p-status {\n    @apply flex items-center;\n    @apply text-sm text-storm-vague font-medium;\n\n    p-icon {\n        @apply mr-2 text-base;\n    }\n\n    &.variant-positive {\n        @apply text-positive;\n    }\n\n    &.variant-unbiased {\n        @apply text-unbiased;\n    }\n\n    &.variant-negative {\n        @apply text-negative;\n    }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\nimport { RotateOptions } from '../../../types/tailwind';\nimport { IconFlipOptions, IconVariant } from '../icon/icon.component';\n\n@Component({\n    tag: 'p-status',\n    styleUrl: 'status.component.scss',\n})\nexport class Status {\n    /**\n     * The variant of the status\n     */\n    @Prop() variant: 'default' | 'positive' | 'unbiased' | 'negative' =\n        'default';\n\n    /**\n     * Icon to show on the status\n     */\n    @Prop() icon: IconVariant;\n\n    /**\n     * Icon flip\n     */\n    @Prop() iconFlip: IconFlipOptions;\n\n    /**\n     * Icon rotate\n     */\n    @Prop() iconRotate: RotateOptions;\n\n    render() {\n        return (\n            <Host\n                class={`p-status variant-${this.variant}\n                }`}\n            >\n                {this._getIcon()}\n                <slot />\n            </Host>\n        );\n    }\n\n    private _getIcon() {\n        const icon = this.icon || this._getVariantIcon();\n\n        if (!icon) {\n            return;\n        }\n\n        return (\n            <p-icon\n                variant={icon}\n                flip={this.iconFlip}\n                rotate={this.iconRotate}\n            />\n        );\n    }\n\n    private _getVariantIcon() {\n        let icon = null;\n        switch (this.variant) {\n            case 'positive':\n                icon = 'checkmark';\n                break;\n            case 'negative':\n                icon = 'negative';\n                break;\n            case 'unbiased':\n                icon = 'clock';\n                break;\n            default:\n                icon = null;\n                break;\n        }\n\n        return icon;\n    }\n}\n"],"version":3}

package/dist/components/p-stepper-item.js

@@ -1,6 +1,52 @@
-import { S as StepperItem, d as defineCustomElement$1 } from './stepper-item.component.js';
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './icon.component.js';
+
+const stepperItemComponentCss = ".absolute{position:absolute!important}.relative{position:relative!important}.left-1\\/2{left:50%!important}.top-0{top:0!important}.order-2{order:2!important}.ml-0{margin-left:0!important}.mr-4{margin-right:1rem!important}.flex{display:flex!important}.h-4{height:1rem!important}.min-h-\\[1rem\\]{min-height:1rem!important}.w-4{width:1rem!important}.w-full{width:100%!important}.min-w-\\[calc\\(100\\%-2rem\\)\\]{min-width:calc(100% - 2rem)!important}.-translate-x-1\\/2{--tw-translate-x:-50%!important}.-translate-x-1\\/2,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.items-end{align-items:flex-end!important}.items-center{align-items:center!important}.bg-mystic-dark{--tw-bg-opacity:1!important;background-color:rgb(218 230 240/var(--tw-bg-opacity))!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.transition{transition-duration:.15s!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important}.duration-500{transition-duration:.5s!important}*{box-sizing:border-box}:host{align-items:flex-end;display:flex;justify-content:center;position:relative;width:100%}:host .content{--tw-text-opacity:1;color:rgb(176 178 203/var(--tw-text-opacity));font-size:.875rem;line-height:1.25rem;min-width:calc(100% - 2rem);white-space:nowrap}:host .circle{--tw-bg-opacity:1;--tw-text-opacity:1;align-items:center;background-color:rgb(218 230 240/var(--tw-bg-opacity));border-radius:100%;color:rgb(255 255 255/var(--tw-text-opacity));display:flex;height:1rem;justify-content:center;transition-duration:.5s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);width:1rem}:host .circle p-icon{display:flex!important;font-size:.625rem}:host([direction=horizontal]){height:2.5rem}:host([direction=horizontal]) .content{min-width:0;order:1;position:absolute;top:0}:host([direction=horizontal]) .circle{order:2}:host([direction=vertical]){align-items:center;min-height:1rem}:host([direction=vertical]) .content{margin-left:1rem;order:2}:host([direction=vertical]) .circle{order:1}:host([active]) .content,:host([finished]) .content{--tw-text-opacity:1;color:rgb(82 138 250/var(--tw-text-opacity))}:host([active]) .circle,:host([finished]) .circle{--tw-bg-opacity:1;background-color:rgb(82 138 250/var(--tw-bg-opacity))}:host([direction=horizontal][align=start]) .content{left:0}:host([direction=horizontal][align=end]) .content{right:0}:host([direction=horizontal][align=center]) .content{--tw-translate-x:-50%;left:50%;text-align:center;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:host([direction=vertical][content-position=start]){flex-direction:row-reverse}:host([direction=vertical][content-position=start]) .content{display:flex;justify-content:flex-end;margin-left:0;margin-right:1rem}.static{position:static!important}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-0,.-rotate-135{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-270{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-315{--tw-rotate:-315deg!important}.-rotate-315,.-rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-90,.rotate-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-0{--tw-rotate:0deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-25{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-25{--tw-rotate:25deg!important}.rotate-270{--tw-rotate:270deg!important}.rotate-270,.rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-315{--tw-rotate:315deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-90{--tw-rotate:90deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-y-flip{--tw-scale-y:-1!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important}.text-lg,.text-xl{line-height:1.75rem!important}.text-xl{font-size:1.25rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-xxs{font-size:.6875rem!important}";
+
+const StepperItem = /*@__PURE__*/ proxyCustomElement(class StepperItem extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.align = 'center';
+    this.direction = 'horizontal';
+    this.contentPosition = 'end';
+    this.finished = false;
+    this.active = false;
+  }
+  render() {
+    return (h(Host, { class: "p-stepper-item" }, h("div", { class: "circle" }, this.finished && h("p-icon", { variant: "checkmark" })), h("div", { class: "content" }, h("slot", { name: "content" }))));
+  }
+  static get style() { return stepperItemComponentCss; }
+}, [1, "p-stepper-item", {
+    "align": [513],
+    "direction": [513],
+    "contentPosition": [513, "content-position"],
+    "finished": [516],
+    "active": [516]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["p-stepper-item", "p-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "p-stepper-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, StepperItem);
+      }
+      break;
+    case "p-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
 
 const PStepperItem = StepperItem;
 const defineCustomElement = defineCustomElement$1;
 
 export { PStepperItem, defineCustomElement };
+
+//# sourceMappingURL=p-stepper-item.js.map

package/dist/components/p-stepper-item.js.map

@@ -0,0 +1 @@
+{"file":"p-stepper-item.js","mappings":";;;AAAA,MAAM,uBAAuB,GAAG,qsPAAqsP;;MCOxtP,WAAW;;;;;iBAIyC,QAAQ;qBAMjE,YAAY;2BAK4C,KAAK;oBAKpB,KAAK;kBAKP,KAAK;;EAEhD,MAAM;IACF,QACI,EAAC,IAAI,IAAC,KAAK,EAAC,gBAAgB,IACxB,WAAK,KAAK,EAAC,QAAQ,IACd,IAAI,CAAC,QAAQ,IAAI,cAAQ,OAAO,EAAC,WAAW,GAAG,CAC9C,EACN,WAAK,KAAK,EAAC,SAAS,IAChB,YAAM,IAAI,EAAC,SAAS,GAAG,CACrB,CACH,EACT;GACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/atoms/stepper-item/stepper-item.component.scss?tag=p-stepper-item&encapsulation=shadow","./src/components/atoms/stepper-item/stepper-item.component.tsx"],"sourcesContent":[":host {\n    @apply relative flex w-full items-end justify-center;\n\n    .content {\n        @apply min-w-[calc(100%-2rem)] whitespace-nowrap;\n        @apply text-sm text-storm-light;\n    }\n\n    .circle {\n        @apply transition duration-500 ease-in-out;\n        @apply flex items-center justify-center;\n        @apply h-4 w-4 rounded-round;\n        @apply bg-mystic-dark text-white;\n\n        p-icon {\n            @apply flex #{!important};\n            font-size: 0.625rem;\n        }\n    }\n}\n\n:host([direction='horizontal']) {\n    @apply h-10;\n\n    .content {\n        @apply absolute top-0 min-w-0;\n        @apply order-1;\n    }\n\n    .circle {\n        @apply order-2;\n    }\n}\n\n:host([direction='vertical']) {\n    @apply min-h-[1rem] items-center;\n\n    .content {\n        @apply order-2 ml-4;\n    }\n\n    .circle {\n        @apply order-1;\n    }\n}\n\n:host([active]),\n:host([finished]) {\n    .content {\n        @apply text-indigo;\n    }\n\n    .circle {\n        @apply bg-indigo;\n    }\n}\n\n:host([direction='horizontal'][align='start']) {\n    .content {\n        @apply left-0;\n    }\n}\n\n:host([direction='horizontal'][align='end']) {\n    .content {\n        @apply right-0;\n    }\n}\n\n:host([direction='horizontal'][align='center']) {\n    .content {\n        @apply left-1/2 -translate-x-1/2 transform text-center;\n    }\n}\n\n:host([direction='vertical'][content-position='start']) {\n    @apply flex-row-reverse;\n\n    .content {\n        @apply ml-0 mr-4 flex justify-end;\n    }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n    tag: 'p-stepper-item',\n    styleUrl: 'stepper-item.component.scss',\n    shadow: true,\n})\nexport class StepperItem {\n    /**\n     * The alignment of the step content\n     */\n    @Prop({ reflect: true }) align: 'start' | 'center' | 'end' = 'center';\n\n    /**\n     * The direction of the stepper step\n     */\n    @Prop({ reflect: true }) direction: 'horizontal' | 'vertical' =\n        'horizontal';\n\n    /**\n     * The position of the content in case of vertical direction\n     */\n    @Prop({ reflect: true }) contentPosition: 'start' | 'end' = 'end';\n\n    /**\n     * Wether the step is finished\n     */\n    @Prop({ reflect: true }) finished: boolean = false;\n\n    /**\n     * Wether the step is active\n     */\n    @Prop({ reflect: true }) active: boolean = false;\n\n    render() {\n        return (\n            <Host class=\"p-stepper-item\">\n                <div class=\"circle\">\n                    {this.finished && <p-icon variant=\"checkmark\" />}\n                </div>\n                <div class=\"content\">\n                    <slot name=\"content\" />\n                </div>\n            </Host>\n        );\n    }\n}\n"],"version":3}

package/dist/components/p-stepper-line.js

@@ -4,3 +4,5 @@ const PStepperLine = StepperLine;
 const defineCustomElement = defineCustomElement$1;
 
 export { PStepperLine, defineCustomElement };
+
+//# sourceMappingURL=p-stepper-line.js.map

package/dist/components/p-stepper-line.js.map

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