@supersoniks/concorde 1.0.7 → 1.0.8

package/core/components/ui/form/select/select.js

@@ -0,0 +1,220 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { PublisherManager } from "@supersoniks/concorde/core/utils/PublisherProxy.mjs";
+import { html, LitElement, css } from "lit";
+import { customElement, property, queryAssignedNodes, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { repeat } from "lit/directives/repeat.js";
+import { formControl } from "../css/form-control";
+import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
+import FormElement from "@supersoniks/concorde/core/mixins/FormElement";
+import "@supersoniks/concorde/core/components/ui/icon/icon";
+/**
+ * #### FormElement :
+ * * La propriété value est remplie automatiquement a l'aide de l'attribut name renseigné, ceci en prenant la valeur de la propriété du même nom dans les données du dataprovider associé.
+ * * Par défault lorsque l'on édite l'input, la valeur est également mise à jour via le même dataprovider
+ * * On peut cependant décider de mettre à jour la donnée à une autre adresse en renseigne l'attribut *formDataProvider*.
+ * * Par conséquent on peut par exemple le lier à un composant *queue* (via sa propriété *dataFilterProvider*) de manière à appeller en auto une api avec des filtres.
+ */
+let Select = class Select extends FormElement(Subscriber(LitElement)) {
+    constructor() {
+        super(...arguments);
+        this.valueKey = "value";
+        this.wordingKey = "wording";
+        this.multiple = null;
+        this.size = "";
+        this.selectSize = null;
+        this._options = [];
+        this._value = "";
+        /*
+         * TODO
+         * Mutualiser avec le composant select
+         */
+        this.label = "";
+        this.description = "";
+        this.hasDescription = false;
+        this.hasLabel = false;
+        this.hasSuffix = false;
+        this.hasPrefix = false;
+    }
+    set options(value) {
+        this._options = value;
+        if (!this.value && this._options.length > 0) {
+            this.value = this._options[0][this.valueKey];
+        }
+        this.requestUpdate();
+    }
+    get options() {
+        return this._options;
+    }
+    get value() {
+        return this._value;
+    }
+    set value(value) {
+        if (!value)
+            return;
+        if (this._value == value)
+            return;
+        this._value = value;
+        if (!this.formDataProvider)
+            this.formDataProvider = this.getAncestorAttributeValue("formDataProvider");
+        if (this.formDataProvider) {
+            PublisherManager.getInstance().get(this.formDataProvider)[this._name] = value;
+        }
+        else if (this.publisher)
+            this.publisher[this._name] = value;
+        this.requestUpdate();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        let options = this.querySelectorAll("option");
+        if (options.length > 0) {
+            this.options = Array.from(options).map((option) => {
+                return {
+                    value: option.value,
+                    wording: option.text,
+                };
+            });
+        }
+    }
+    updated() {
+        var _a, _b, _c, _d;
+        this.hasLabel = this.label || ((_a = this.slotLabelNodes) === null || _a === void 0 ? void 0 : _a.length) ? true : false;
+        this.hasDescription = this.description || ((_b = this.slotDescriptionNodes) === null || _b === void 0 ? void 0 : _b.length) ? true : false;
+        this.hasSuffix = ((_c = this.slotSuffixNodes) === null || _c === void 0 ? void 0 : _c.length) ? true : false;
+        this.hasPrefix = ((_d = this.slotPrefixNodes) === null || _d === void 0 ? void 0 : _d.length) ? true : false;
+    }
+    onSlotChange() {
+        this.requestUpdate();
+    }
+    render() {
+        const slotClasses = {
+            "has-prefix": this.hasPrefix,
+            "has-suffix": this.hasSuffix,
+        };
+        return html `
+      <label for="form-element" class="${this.hasLabel ? "form-label" : "hidden"}"
+        >${this.label ? this.label : ""}<slot name="label" @slotchange=${this.onSlotChange}></slot
+      ></label>
+
+      <div class="form-control ${classMap(slotClasses)}">
+        <slot name="prefix" @slotchange=${this.onSlotChange}></slot>
+        <div class="form-select-wrapper">
+          <select
+            @change=${this.handleChange}
+            disabled=${ifDefined(this.multiple)}
+            size=${ifDefined(this.selectSize)}
+            autofocus=${ifDefined(this.autofocus)}
+            required=${ifDefined(this.required)}
+            .value="${this.value}"
+            class="form-element"
+          >
+            ${repeat(this.options, (option) => option[this.valueKey], (option) => {
+            const isSelected = this.value == option[this.valueKey] ? "selected" : null;
+            return html `<option selected=${ifDefined(isSelected)} value="${option[this.valueKey]}">
+                  ${option[this.wordingKey]}
+                </option>`;
+        })}
+            <slot></slot>
+          </select>
+          <sonic-icon prefix="iconoir" name="nav-arrow-down" size="${this.size}"></sonic-icon>
+        </div>
+        <slot name="suffix" @slotchange=${this.onSlotChange}></slot>
+      </div>
+
+      <slot name="description" class=" ${this.hasDescription ? "form-description" : "hidden"}">
+        ${this.description ? html `${this.description}` : ""}
+      </slot>
+    `;
+    }
+};
+Select.styles = [
+    formControl,
+    css `
+      .form-element {
+        appearance: none;
+      }
+      .form-select-wrapper {
+        position: relative;
+        width: 100%;
+      }
+      sonic-icon {
+        position: absolute;
+        right: 1em;
+        top: 50%;
+        pointer-events: none;
+        transform: translateY(-50%);
+      }
+
+      option {
+        padding: 0.1rem 5rem;
+        color: var(--sc-base-content);
+        background: var(--sc-base);
+      }
+    `,
+];
+__decorate([
+    property({ type: String })
+], Select.prototype, "valueKey", void 0);
+__decorate([
+    property({ type: String })
+], Select.prototype, "wordingKey", void 0);
+__decorate([
+    property({ type: Boolean })
+], Select.prototype, "multiple", void 0);
+__decorate([
+    property({ type: String })
+], Select.prototype, "size", void 0);
+__decorate([
+    property({ type: String })
+], Select.prototype, "selectSize", void 0);
+__decorate([
+    property({ type: Array })
+], Select.prototype, "options", null);
+__decorate([
+    property()
+], Select.prototype, "value", null);
+__decorate([
+    property({ type: String })
+], Select.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], Select.prototype, "description", void 0);
+__decorate([
+    queryAssignedNodes({ slot: "label" })
+], Select.prototype, "slotLabelNodes", void 0);
+__decorate([
+    queryAssignedNodes({ slot: "description" })
+], Select.prototype, "slotDescriptionNodes", void 0);
+__decorate([
+    queryAssignedNodes({ slot: "suffix" })
+], Select.prototype, "slotSuffixNodes", void 0);
+__decorate([
+    queryAssignedNodes({ slot: "prefix" })
+], Select.prototype, "slotPrefixNodes", void 0);
+__decorate([
+    state()
+], Select.prototype, "hasDescription", void 0);
+__decorate([
+    state()
+], Select.prototype, "hasLabel", void 0);
+__decorate([
+    state()
+], Select.prototype, "hasSuffix", void 0);
+__decorate([
+    state()
+], Select.prototype, "hasPrefix", void 0);
+Select = __decorate([
+    customElement("sonic-select")
+], Select);
+export { Select };
+//Ajout pour Storybook
+try {
+    customElements.define("sonic-select", Select);
+}
+catch (e) { }

package/core/components/ui/form/textarea/textarea.d.ts

@@ -0,0 +1,69 @@
+import { LitElement } from "lit";
+declare const Textarea_base: {
+    new (...args: any[]): {
+        type: "number" | "search" | "file" | "button" | "password" | "url" | "color" | "hidden" | "time" | "image" | "text" | "reset" | "submit" | "month" | "week" | "checkbox" | "radio" | "range" | "tel" | "email" | "date" | "datetime-local";
+        tabindex: string | null;
+        autocomplete: "url" | "name" | "language" | "on" | "tel" | "email" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "photo" | null;
+        getFormPublisher(): any;
+        updateDataValue(): void;
+        handleChange(e?: any): void;
+        getValueForFormPublisher(): any;
+        error: true | null;
+        autofocus: true | null;
+        disabled: true | null;
+        required: true | null;
+        formDataProvider: string;
+        _value: any;
+        value: any;
+        _name: string;
+        name: string;
+        props: any;
+        getAncestorAttributeValue(attributeName: string): string;
+        hasAncestorAttribute(attributeName: string): boolean;
+        querySelectorAll(selector: string): NodeListOf<Element>;
+        publisher: any;
+        dataProvider: String;
+        noShadowDom: string | null;
+        debug: HTMLElement | null;
+        defferedDebug: boolean | null;
+        makeShadow(props: Record<string, any>, value: any): any;
+        dispatchEvent(event: Event): void;
+        setAttribute(name: string, value: string): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined): void;
+        removeAttribute(name: string): void;
+        initPublisher(): void;
+        getApiConfiguration(): import("../../../../utils/api").APIConfiguration;
+        connectedCallback(): void;
+        requestUpdate(): void;
+        getAttribute(name: string): string;
+        hasAttribute(attributeName: String): boolean;
+        disconnectedCallback(): void;
+    };
+} & (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/FormElement").FormElementInterface) & (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface) & typeof LitElement;
+export declare class Textarea extends Textarea_base {
+    static styles: import("lit").CSSResult[];
+    size: "" | "xs" | "sm" | "lg";
+    rows: string;
+    cols: string;
+    maxlength: string;
+    minlength: string;
+    wrap: "hard" | "soft" | null;
+    readonly: boolean | null;
+    placeholder: string;
+    label: string;
+    description: string;
+    slotLabelNodes: Array<Node>;
+    slotDescriptionNodes: Array<Node>;
+    slotSuffixNodes: Array<Node>;
+    slotPrefixNodes: Array<Node>;
+    hasDescription: true | false;
+    hasLabel: true | false;
+    hasSuffix: true | false;
+    hasPrefix: true | false;
+    slotClasses: {};
+    updated(): void;
+    onSlotChange(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};

package/core/components/ui/form/textarea/textarea.js

@@ -0,0 +1,150 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement, css } from "lit";
+import { customElement, property, state, queryAssignedNodes } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { formControl } from "../css/form-control";
+import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
+import FormElement from "@supersoniks/concorde/core/mixins/FormElement";
+import FormInput from "@supersoniks/concorde/core/mixins/FormInput";
+let Textarea = class Textarea extends FormInput(FormElement(Subscriber(LitElement))) {
+    constructor() {
+        super(...arguments);
+        // @property({ type: String })
+        // type: "" | "primary" | "warning" | "danger" | "success" | "info" = "";
+        // @property({ type: String }) variant: "" | "ghost" | "outline" = "";
+        this.size = "";
+        this.rows = "";
+        this.cols = "";
+        this.maxlength = "";
+        this.minlength = "";
+        this.wrap = null;
+        this.readonly = null;
+        this.placeholder = "";
+        /*
+         * TODO
+         * Mutualiser avec le composant select
+         */
+        this.label = "";
+        this.description = "";
+        this.hasDescription = false;
+        this.hasLabel = false;
+        this.hasSuffix = false;
+        this.hasPrefix = false;
+        this.slotClasses = {};
+    }
+    updated() {
+        var _a, _b, _c, _d;
+        this.hasLabel = this.label || ((_a = this.slotLabelNodes) === null || _a === void 0 ? void 0 : _a.length) ? true : false;
+        this.hasDescription = this.description || ((_b = this.slotDescriptionNodes) === null || _b === void 0 ? void 0 : _b.length) ? true : false;
+        this.hasSuffix = ((_c = this.slotSuffixNodes) === null || _c === void 0 ? void 0 : _c.length) ? true : false;
+        this.hasPrefix = ((_d = this.slotPrefixNodes) === null || _d === void 0 ? void 0 : _d.length) ? true : false;
+    }
+    onSlotChange() {
+        this.requestUpdate();
+    }
+    render() {
+        return html `
+      <label for="form-element" class="${this.hasLabel ? "form-label" : "hidden"}"
+        >${this.label ? this.label : ""}<slot name="label" @slotchange=${this.onSlotChange}></slot
+      ></label>
+
+      <div class="form-control">
+        <textarea
+          @input=${this.handleChange}
+          disabled=${ifDefined(this.disabled)}
+          autocomplete=${ifDefined(this.autocomplete)}
+          autofocus=${ifDefined(this.autofocus)}
+          rows=${ifDefined(this.rows)}
+          cols=${ifDefined(this.cols)}
+          maxlength=${ifDefined(this.maxlength)}
+          minlength=${ifDefined(this.minlength)}
+          readonly=${ifDefined(this.readonly)}
+          spellcheck=${ifDefined(this.spellcheck)}
+          wrap=${ifDefined(this.wrap)}
+          class="form-element textarea"
+          placeholder="${this.placeholder}"
+        >
+${this.value}</textarea
+        >
+      </div>
+
+      <slot name="description" class=" ${this.hasDescription ? "form-description" : "hidden"}">
+        ${this.description ? html `${this.description}` : ""}
+      </slot>
+    `;
+    }
+};
+Textarea.styles = [
+    formControl,
+    css `
+      textarea {
+        font-size: inherit;
+      }
+    `,
+];
+__decorate([
+    property({ type: String })
+], Textarea.prototype, "size", void 0);
+__decorate([
+    property({ type: String })
+], Textarea.prototype, "rows", void 0);
+__decorate([
+    property({ type: String })
+], Textarea.prototype, "cols", void 0);
+__decorate([
+    property({ type: String })
+], Textarea.prototype, "maxlength", void 0);
+__decorate([
+    property({ type: String })
+], Textarea.prototype, "minlength", void 0);
+__decorate([
+    property({ type: String })
+], Textarea.prototype, "wrap", void 0);
+__decorate([
+    property({ type: Boolean })
+], Textarea.prototype, "readonly", void 0);
+__decorate([
+    property({ type: String })
+], Textarea.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: String })
+], Textarea.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], Textarea.prototype, "description", void 0);
+__decorate([
+    queryAssignedNodes({ slot: "label" })
+], Textarea.prototype, "slotLabelNodes", void 0);
+__decorate([
+    queryAssignedNodes({ slot: "description" })
+], Textarea.prototype, "slotDescriptionNodes", void 0);
+__decorate([
+    queryAssignedNodes({ slot: "suffix" })
+], Textarea.prototype, "slotSuffixNodes", void 0);
+__decorate([
+    queryAssignedNodes({ slot: "prefix" })
+], Textarea.prototype, "slotPrefixNodes", void 0);
+__decorate([
+    state()
+], Textarea.prototype, "hasDescription", void 0);
+__decorate([
+    state()
+], Textarea.prototype, "hasLabel", void 0);
+__decorate([
+    state()
+], Textarea.prototype, "hasSuffix", void 0);
+__decorate([
+    state()
+], Textarea.prototype, "hasPrefix", void 0);
+__decorate([
+    property()
+], Textarea.prototype, "slotClasses", void 0);
+Textarea = __decorate([
+    customElement("sonic-textarea")
+], Textarea);
+export { Textarea };

package/core/components/ui/group/group.d.ts

@@ -0,0 +1,6 @@
+import { LitElement } from "lit";
+export declare class Group extends LitElement {
+    static styles: import("lit").CSSResult[];
+    updated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/core/components/ui/group/group.js

@@ -0,0 +1,57 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement, css } from "lit";
+import { customElement } from "lit/decorators.js";
+let Group = class Group extends LitElement {
+    updated() {
+        const children = this.querySelectorAll("sonic-input, sonic-button");
+        const nbChildren = children.length;
+        if (nbChildren > 1) {
+            children.forEach((item, index) => {
+                if (index === 0) {
+                    item.style.setProperty("--sc-item-rounded-tr", "0");
+                    item.style.setProperty("--sc-item-rounded-br", "0");
+                }
+                else if (index === nbChildren - 1) {
+                    item.style.setProperty("--sc-item-rounded-tl", "0");
+                    item.style.setProperty("--sc-item-rounded-bl", "0");
+                }
+                else {
+                    item.style.setProperty("--sc-item-rounded-tr", "0");
+                    item.style.setProperty("--sc-item-rounded-br", "0");
+                    item.style.setProperty("--sc-item-rounded-tl", "0");
+                    item.style.setProperty("--sc-item-rounded-bl", "0");
+                }
+            });
+        }
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+Group.styles = [
+    css `
+      :host {
+        display: inline-flex;
+        vertical-align: middle;
+      }
+
+      slot {
+        width: 100%;
+        display: flex;
+        align-items: flex-end;
+      }
+    `,
+];
+Group = __decorate([
+    customElement("sonic-group")
+], Group);
+export { Group };
+try {
+    customElements.define("sonic-group", Group);
+}
+catch (e) { }

package/core/components/ui/icon/icon.d.ts

@@ -0,0 +1,17 @@
+import { LitElement, nothing } from "lit";
+/**
+ * Afficher l'icone choisie parmis une liste prédéfinie dans icons.json
+ * les tailles suivantes sont disponible via l'attribut *size* : 2xs,xs,sm,"",lg,xl,2xl
+ */
+export declare class Icon extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Nom identifiant l'icone ex : *info*
+     */
+    name: string;
+    /**
+     * prefix de l'icone si nécessaire ex: *solid*. La valeur par défaut est "" qui est mappée sur *regular*
+     */
+    prefix: string;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+}

package/core/components/ui/icon/icon.js

@@ -0,0 +1,93 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement, css, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import Icons from "./icons";
+/**
+ * Afficher l'icone choisie parmis une liste prédéfinie dans icons.json
+ * les tailles suivantes sont disponible via l'attribut *size* : 2xs,xs,sm,"",lg,xl,2xl
+ */
+let Icon = class Icon extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Nom identifiant l'icone ex : *info*
+         */
+        this.name = "";
+        /**
+         * prefix de l'icone si nécessaire ex: *solid*. La valeur par défaut est "" qui est mappée sur *regular*
+         */
+        this.prefix = "";
+    }
+    render() {
+        if (!this.name) {
+            this.style.display = "none";
+            return nothing;
+        }
+        this.style.removeProperty("display");
+        return html `${Icons.default.get({ name: this.name, prefix: this.prefix })}`;
+    }
+};
+Icon.styles = css `
+    :host {
+      line-height: 0;
+      width: fit-content;
+      height: fit-content;
+      vertical-align: -0.125em;
+    }
+    svg {
+      height: var(--sc-icon-size, 1em);
+      width: var(--sc-icon-size, 1em);
+    }
+
+    svg:not([fill="none"]){
+      fill: currentColor;
+    }
+
+    svg[fill="none"]{
+      stroke-width: 2;
+    }
+    
+    :host([size="2xs"]) svg {
+      --sc-icon-size: 0.625em;
+    }
+
+    :host([size="xs"]) svg {
+      --sc-icon-size: 0.75em;
+    }
+
+    :host([size="sm"]) svg {
+      --sc-icon-size: 0.875em;
+    }
+
+    :host([size="lg"]) svg {
+      --sc-icon-size: 1.25em;
+    }
+
+    :host([size="xl"]) svg {
+      --sc-icon-size: 1.5em;
+    }
+
+    :host([size="2xl"]) svg {
+      --sc-icon-size: 2em;
+    }
+  `;
+__decorate([
+    property({ type: String })
+], Icon.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], Icon.prototype, "prefix", void 0);
+Icon = __decorate([
+    customElement("sonic-icon")
+], Icon);
+export { Icon };
+//Ajout pour la creation du cem notamment pour Storybook
+try {
+    customElements.define("sonic-icon", Icon);
+}
+catch (e) { }

package/core/components/ui/icon/icons.d.ts

@@ -0,0 +1,13 @@
+export declare type IconConf = {
+    name: string;
+    prefix?: string;
+};
+export default class Icons {
+    static fontAwesomeNext: {
+        get: (params: IconConf) => import("lit-html/directive").DirectiveResult<typeof import("lit-html/directives/unsafe-html").UnsafeHTMLDirective>;
+    };
+    static registerIcons(newIcons: Record<string, Record<string, string>>): void;
+    static default: {
+        get: (params: IconConf) => import("lit-html/directive").DirectiveResult<typeof import("lit-html/directives/unsafe-html").UnsafeHTMLDirective>;
+    };
+}

package/core/components/ui/icon/icons.js

@@ -0,0 +1,25 @@
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import icons from "./icons.json";
+;
+export default class Icons {
+    static registerIcons(newIcons) {
+        const record = icons;
+        for (let prefix in newIcons) {
+            const newObj = newIcons[prefix];
+            const currentRecord = record[prefix] || {};
+            for (let name in newObj) {
+                currentRecord[name] = newObj[name];
+            }
+            record[prefix] = currentRecord;
+        }
+    }
+}
+Icons.fontAwesomeNext = {
+    get: (params) => {
+        var _a;
+        let prefix = ((_a = params.prefix) === null || _a === void 0 ? void 0 : _a.replace("far", "regular").replace("fas", "solid")) || "regular";
+        let record = icons;
+        return unsafeHTML(record[prefix][params.name] || "");
+    },
+};
+Icons.default = Icons.fontAwesomeNext;

package/core/components/ui/icon/icons.json

@@ -0,0 +1 @@
+{"iconoir":{"cancel":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M6.75827 17.2426L12.0009 12M17.2435 6.75736L12.0009 12M12.0009 12L6.75827 6.75736M12.0009 12L17.2435 17.2426\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","check-circled-outline":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M7 12.5L10 15.5L17 8.5\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","check":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M5 13L9 17L19 7\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","emoji-think-left":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M10 15H7M2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M8.5 9C8.22386 9 8 8.77614 8 8.5C8 8.22386 8.22386 8 8.5 8C8.77614 8 9 8.22386 9 8.5C9 8.77614 8.77614 9 8.5 9Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M15.5 9C15.2239 9 15 8.77614 15 8.5C15 8.22386 15.2239 8 15.5 8C15.7761 8 16 8.22386 16 8.5C16 8.77614 15.7761 9 15.5 9Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","info-empty":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12 11.5V16.5\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 7.51L12.01 7.49889\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","more-vert":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12 12.5C12.2761 12.5 12.5 12.2761 12.5 12C12.5 11.7239 12.2761 11.5 12 11.5C11.7239 11.5 11.5 11.7239 11.5 12C11.5 12.2761 11.7239 12.5 12 12.5Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 18.5C12.2761 18.5 12.5 18.2761 12.5 18C12.5 17.7239 12.2761 17.5 12 17.5C11.7239 17.5 11.5 17.7239 11.5 18C11.5 18.2761 11.7239 18.5 12 18.5Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 6.5C12.2761 6.5 12.5 6.27614 12.5 6C12.5 5.72386 12.2761 5.5 12 5.5C11.7239 5.5 11.5 5.72386 11.5 6C11.5 6.27614 11.7239 6.5 12 6.5Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","nav-arrow-down":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","warning-circled-outline":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12 7L12 13\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 17.01L12.01 16.9989\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n"}}