@supersoniks/concorde 2.0.6 → 3.0.0

package/core/mixins/FormElement.js

@@ -1,272 +0,0 @@
-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";
-import { property } from "lit/decorators.js";
-import Objects from "@supersoniks/concorde/core/utils/Objects";
-const keyboardLoops = new Map();
-const Form = (superClass) => {
-    /**
-     * ## FormElement est la mixin utilisée par les éléments de formulaire de concorde ainsi que par le composant sonic-button.
-     * * 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 renseignent 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.
-     *
-     */
-    class FormElement extends superClass {
-        constructor(...args) {
-            super();
-            this.touched = false;
-            this.error = false;
-            this.autofocus = false;
-            this.required = false;
-            this.forceAutoFill = false;
-            this.disabled = null;
-            this.formDataProvider = "";
-            /**
-             * Le nom du champ avec des caractéristiques similaire à un input html classique.
-             */
-            this._name = "";
-            /**
-             * La valeur du champ avec des caractéristiques similaire à un input html classique :
-             */
-            this._value = "";
-            args;
-            this.onValueAssign = (value) => {
-                this.setValueFromPublisher(value);
-            };
-            this.onFormValueAssign = async (value) => {
-                this.setFormValueFromPublisher(value);
-            };
-            this.onFormDataInValidate = () => {
-                const formPublisher = this.getFormPublisher();
-                if (!(formPublisher && formPublisher.isFormValid.get())) {
-                    return;
-                }
-                this.validateFormElement();
-            };
-        }
-        get name() {
-            return this._name;
-        }
-        set name(value) {
-            if (this.hasAttribute("name") && !this.forceAutoFill)
-                value = this.getAttribute("name");
-            this._name = value;
-            this.requestUpdate();
-        }
-        validateFormElement() {
-            //Implémentation dans une sous classe
-        }
-        updateDataValue() {
-            const name = this.getAttribute("name");
-            if (name) {
-                const formPublisher = this.getFormPublisher();
-                if (formPublisher) {
-                    formPublisher[name] = this.getValueForFormPublisher();
-                    this.setFormValueFromPublisher(formPublisher[name].get());
-                }
-            }
-        }
-        getFormPublisher() {
-            if (!this.formDataProvider)
-                this.formDataProvider = this.getAncestorAttributeValue("formDataProvider");
-            if (this.formDataProvider) {
-                return PublisherManager.get(this.formDataProvider);
-            }
-            return null;
-            //else return this.publisher;
-        }
-        /**
-         * Mise en forme de la valeur fournie au formPublisher associé au composant
-         * Destinée à être surchargée si besoin (cf Form-checkable)
-         */
-        getValueForFormPublisher() {
-            return this.value;
-        }
-        /**
-         * Mise à jour de la valeur interne du composant en fonction de la valeur venant du publisher associé au composant
-         * Destinée à être surchargée si besoin (cf Form-checkable)
-         */
-        setValueFromPublisher(value) {
-            this.value = value;
-        }
-        /**
-         * Mise à jour de la valeur interne du composant en fonction de la valeur venant du formPublisher associé au composant
-         * Destinée à être surchargée si besoin (cf Form-checkable)
-         */
-        setFormValueFromPublisher(value) {
-            this.value = value;
-        }
-        get value() {
-            return this._value;
-        }
-        set value(value) {
-            if (value == null)
-                value = "";
-            if (Objects.isObject(value) &&
-                Object.prototype.hasOwnProperty.call(value, "__value") &&
-                value._value == undefined)
-                value = "";
-            if (this._value == value)
-                return;
-            this._value = value;
-            this.updateDataValue();
-            this.requestUpdate();
-        }
-        initPublisher() {
-            let formPublisher = this.getFormPublisher();
-            const value = this.hasAncestorAttribute("initFromPublisher") && this._name && formPublisher[this._name].get()
-                ? formPublisher[this._name].get()
-                : this.getAttribute("value");
-            if (this._name && this.publisher)
-                this.publisher[this._name].offAssign(this.onValueAssign);
-            if (this._name && formPublisher)
-                formPublisher[this._name].offAssign(this.onFormValueAssign);
-            super.initPublisher();
-            if (!this.name)
-                this._name = this.getAttribute("name");
-            if (!this.value)
-                this._value = this.getAttribute("value");
-            if (this.publisher && this._name) {
-                this.publisher[this._name].onAssign(this.onValueAssign);
-            }
-            formPublisher = this.getFormPublisher();
-            if (this._name && formPublisher) {
-                formPublisher[this._name].onAssign(this.onFormValueAssign);
-                formPublisher.onInvalidate(this.onFormDataInValidate);
-            }
-            this.updateDataValue();
-            if (value)
-                this.value = value;
-        }
-        handleBlur() {
-            this.touched = true;
-            // this.validateFormElement();
-        }
-        handleChange(e) {
-            this.value = e.target.value;
-            const event = new Event("change");
-            this.dispatchEvent(event);
-        }
-        /**
-         * Ajoute un comportement de navigation au clavier pour les éléments de formulaire
-         * data-keyboard-nav peut contenir plusieurs valeurs qui identifient les boucles de navigation auquelles est attaché cet élément.
-         * Les valeurs sont séparées par des espaces.
-         * En appuyant sur la touche "Down", le composant va se déplacer dans la boucle de navigation correspondante en suivant le flux.
-         * En appuyant sur la touche "Up", le déplacement inverse est effectué.
-         */
-        addKeyboardNavigation() {
-            const keyboardLoopIds = this.getAncestorAttributeValue("data-keyboard-nav");
-            if (!keyboardLoopIds)
-                return;
-            const split = keyboardLoopIds.split(" ");
-            const keyboardLoopId = split[0];
-            if (!keyboardLoopId)
-                return;
-            for (const keyboardLoopId2 of split) {
-                if (!keyboardLoops.has(keyboardLoopId2)) {
-                    keyboardLoops.set(keyboardLoopId2, []);
-                }
-                const keyboardLoop = keyboardLoops.get(keyboardLoopId2);
-                if (keyboardLoop?.indexOf(this) == -1) {
-                    keyboardLoop.push(this);
-                }
-            }
-            const keyboardLoop = keyboardLoops.get(keyboardLoopId);
-            this.addEventListener("keydown", (e) => {
-                const keyboardEvent = e;
-                if (!["ArrowDown", "ArrowUp"].includes(keyboardEvent.key))
-                    return;
-                const selector = "input:not([disabled]), button:not([disabled]), select:not([disabled]), textarea:not([disabled])";
-                const loop = keyboardLoop?.filter((el) => {
-                    const child = el.shadowRoot?.querySelector(selector);
-                    if (!child)
-                        return false;
-                    const cpStyle = window.getComputedStyle(child);
-                    return (cpStyle.display !== "none" &&
-                        cpStyle.display !== "" &&
-                        cpStyle.pointerEvents != "none" &&
-                        cpStyle.visibility !== "hidden" &&
-                        child.getBoundingClientRect().width > 0);
-                });
-                let next = null;
-                if (keyboardEvent.key == "ArrowDown" && loop) {
-                    const index = loop.indexOf(this);
-                    if (index == loop.length - 1) {
-                        next = loop[0];
-                    }
-                    else {
-                        next = loop[index + 1];
-                    }
-                }
-                else if (keyboardEvent.key == "ArrowUp" && loop) {
-                    const index = loop.indexOf(this);
-                    if (index == 0) {
-                        next = loop[loop.length - 1];
-                    }
-                    else {
-                        next = loop[index - 1];
-                    }
-                }
-                const elt = next?.shadowRoot?.querySelector(selector);
-                if (elt && elt.focus) {
-                    elt.focus();
-                    e.preventDefault();
-                    e.stopPropagation();
-                }
-            });
-        }
-        connectedCallback() {
-            this.formDataProvider = this.getAncestorAttributeValue("formDataProvider");
-            super.connectedCallback();
-            this.addKeyboardNavigation();
-        }
-        disconnectedCallback() {
-            super.disconnectedCallback();
-            if (this._name && this.publisher)
-                this.publisher[this._name].offAssign(this.onValueAssign);
-            const formPublisher = this.getFormPublisher();
-            if (this._name && formPublisher) {
-                formPublisher[this._name].offAssign(this.onFormValueAssign);
-                formPublisher.offInvalidate(this.onFormDataInValidate);
-            }
-        }
-    }
-    __decorate([
-        property({ type: Boolean, reflect: true })
-    ], FormElement.prototype, "touched", void 0);
-    __decorate([
-        property({ type: Boolean })
-    ], FormElement.prototype, "error", void 0);
-    __decorate([
-        property({ type: Boolean })
-    ], FormElement.prototype, "autofocus", void 0);
-    __decorate([
-        property({ type: Boolean })
-    ], FormElement.prototype, "required", void 0);
-    __decorate([
-        property({ type: Boolean })
-    ], FormElement.prototype, "forceAutoFill", void 0);
-    __decorate([
-        property({ type: Boolean })
-    ], FormElement.prototype, "disabled", void 0);
-    __decorate([
-        property({ type: String, attribute: "data-aria-label" })
-    ], FormElement.prototype, "ariaLabel", void 0);
-    __decorate([
-        property({ type: String, attribute: "data-aria-labelledby" })
-    ], FormElement.prototype, "ariaLabelledby", void 0);
-    __decorate([
-        property()
-    ], FormElement.prototype, "name", null);
-    __decorate([
-        property()
-    ], FormElement.prototype, "value", null);
-    return FormElement;
-};
-export default Form;

package/core/mixins/FormInput.d.ts

@@ -1,70 +0,0 @@
-import { FormElementInterface } from "@supersoniks/concorde/core/mixins/FormElement";
-import { MixinArgsType } from "../_types/types";
-type Constructor<T> = new (...args: MixinArgsType[]) => T;
-type Type = "button" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "file" | "hidden" | "image" | "month" | "number" | "password" | "radio" | "range" | "reset" | "search" | "submit" | "tel" | "text" | "time" | "url" | "week";
-declare const Form: <T extends Constructor<FormElementInterface>>(superClass: T) => {
-    new (...args: MixinArgsType[]): {
-        validateFormElement(): void;
-        forceAutoFill: boolean;
-        /**
-         * Le type De l'input, comme en html cependant tous les types ne sont pas actuellements compatibles en raison du style en vigueur
-         * On peut essayer text, date, color, email par exemple, mais pas radio/checkbox/range a priori
-         */
-        _type: Type;
-        type: Type;
-        _description?: string | undefined;
-        description: string | undefined;
-        _label?: string | undefined;
-        label: string | undefined;
-        status: "default" | "success" | "error" | "warning" | "info";
-        tabindex?: number | undefined;
-        autocomplete?: "url" | "name" | "off" | "on" | "additional-name" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "address-line1" | "address-line2" | "address-line3" | "bday-day" | "bday-month" | "bday-year" | "cc-csc" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-family-name" | "cc-given-name" | "cc-name" | "cc-number" | "cc-type" | "country" | "country-name" | "current-password" | "family-name" | "given-name" | "honorific-prefix" | "honorific-suffix" | "new-password" | "one-time-code" | "organization" | "postal-code" | "street-address" | "transaction-amount" | "transaction-currency" | "username" | "email" | "tel" | "tel-area-code" | "tel-country-code" | "tel-extension" | "tel-local" | "tel-national" | "language" | "nickname" | "organization-title" | "cc-additional-name" | "bday" | "sex" | "impp" | "photo" | undefined;
-        getFormPublisher(): any;
-        updateDataValue(): void;
-        handleChange(e?: Event | undefined): void;
-        handleBlur(e?: Event | undefined): void;
-        getValueForFormPublisher(): string | object | string[] | null | undefined;
-        setValueFromPublisher(value: string | object | string[] | null | undefined): void;
-        focus?: (() => void) | undefined;
-        shadowRoot?: ShadowRoot | undefined;
-        error: boolean;
-        autofocus: boolean;
-        required: boolean;
-        disabled: true | null;
-        formDataProvider: string;
-        ariaLabelledby?: string | undefined;
-        ariaLabel?: string | undefined;
-        _value: string | object | string[] | null | undefined;
-        value: string | object | string[] | null | undefined;
-        _name: string;
-        name: string;
-        props: import("../_types/types").CoreJSType;
-        propertyMap: object;
-        isConnected: boolean;
-        children: HTMLCollection;
-        appendChild(node: Node): Node;
-        getAncestorAttributeValue(attributeName: string): string;
-        hasAncestorAttribute(attributeName: string): boolean;
-        querySelectorAll(selector: string): NodeListOf<Element>;
-        publisher: any;
-        dataProvider: string | null;
-        noShadowDom: string | null;
-        debug: HTMLElement | null;
-        defferedDebug: boolean | null;
-        displayContents: boolean;
-        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;
-        getBoundingClientRect(): DOMRect;
-    };
-} & T;
-export default Form;

package/core/mixins/FormInput.js

@@ -1,81 +0,0 @@
-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 { property } from "lit/decorators.js";
-const Form = (superClass) => {
-    class FormInput extends superClass {
-        constructor(...args) {
-            super();
-            this.forceAutoFill = false;
-            /**
-             * Le type De l'input, comme en html cependant tous les types ne sont pas actuellements compatibles en raison du style en vigueur
-             * On peut essayer text, date, color, email par exemple, mais pas radio/checkbox/range a priori
-             */
-            this._type = "text";
-            this.status = "default";
-            args;
-        }
-        validateFormElement() {
-            const input = this.shadowRoot?.querySelector("input");
-            if (!input || input.checkValidity())
-                return;
-            const formPublisher = this.getFormPublisher();
-            if (formPublisher)
-                formPublisher.isFormValid = false;
-            input.reportValidity();
-        }
-        set type(value) {
-            if (this.hasAttribute("type") && !this.forceAutoFill)
-                value = this.getAttribute("type");
-            this._type = value;
-            this.requestUpdate();
-        }
-        get type() {
-            return this._type;
-        }
-        get description() {
-            return this._description;
-        }
-        set description(value) {
-            if (this.hasAttribute("description") && !this.forceAutoFill)
-                value = this.getAttribute("description");
-            this._description = value;
-            this.requestUpdate();
-        }
-        get label() {
-            return this._label;
-        }
-        set label(value) {
-            if (this.hasAttribute("label") && !this.forceAutoFill)
-                value = this.getAttribute("label");
-            this._label = value;
-            this.requestUpdate();
-        }
-    }
-    __decorate([
-        property()
-    ], FormInput.prototype, "forceAutoFill", void 0);
-    __decorate([
-        property({ type: String })
-    ], FormInput.prototype, "type", null);
-    __decorate([
-        property()
-    ], FormInput.prototype, "description", null);
-    __decorate([
-        property()
-    ], FormInput.prototype, "label", null);
-    __decorate([
-        property({ type: String, reflect: true })
-    ], FormInput.prototype, "status", void 0);
-    __decorate([
-        property({ type: Number })
-    ], FormInput.prototype, "tabindex", void 0);
-    __decorate([
-        property({ type: String })
-    ], FormInput.prototype, "autocomplete", void 0);
-    return FormInput;
-};
-export default Form;

package/core/mixins/Subscriber.d.ts

@@ -1,36 +0,0 @@
-import { APIConfiguration } from "@supersoniks/concorde/core/utils/api";
-import { LitElement } from "lit";
-import { PublisherInterface, TypeAndRecordOfType, MixinArgsType, CoreJSType } from "@supersoniks/concorde/core/_types/types";
-type Constructor<T> = new (...args: MixinArgsType[]) => T;
-export interface SubscriberInterface<PropsType = CoreJSType> {
-    props: PropsType | null;
-    propertyMap: object;
-    isConnected: boolean;
-    children: HTMLCollection;
-    appendChild(node: Node): Node;
-    getAncestorAttributeValue(attributeName: string): string;
-    hasAncestorAttribute(attributeName: string): boolean;
-    querySelectorAll(selector: string): NodeListOf<Element>;
-    publisher: TypeAndRecordOfType<PublisherInterface<PropsType>>;
-    dataProvider: string | null;
-    noShadowDom: string | null;
-    debug: HTMLElement | null;
-    defferedDebug: boolean | null;
-    displayContents: boolean;
-    shadowRoot?: ShadowRoot;
-    dispatchEvent(event: Event): void;
-    setAttribute(name: string, value: string): void;
-    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
-    removeAttribute(name: string): void;
-    initPublisher(): void;
-    getApiConfiguration(): APIConfiguration;
-    connectedCallback(): void;
-    requestUpdate(): void;
-    getAttribute(name: string): string;
-    hasAttribute(attributeName: string): boolean;
-    disconnectedCallback(): void;
-    getBoundingClientRect(): DOMRect;
-}
-declare const Subscriber: <PropsType = CoreJSType, T extends Constructor<LitElement> = Constructor<LitElement>>(superClass: T, type?: PropsType | undefined) => Constructor<SubscriberInterface<PropsType>> & T;
-export default Subscriber;