@supersoniks/concorde 1.1.21 → 1.1.23

package/core/components/functional/submit/submit.js

@@ -56,14 +56,27 @@ let Submit = class Submit extends Subscriber(LitElement) {
     submit() {
         var _a, _b, _c, _d, _e;
         return __awaiter(this, void 0, void 0, function* () {
+            const formPublisher = PublisherManager.getInstance().get(this.getAncestorAttributeValue("formDataProvider"));
+            //
+            // Validation du formulaire 
+            formPublisher.isFormValid = true;
+            formPublisher.invalidate();
+            if (!formPublisher.isFormValid.get())
+                return;
             this.publisher.disabled = true;
+            formPublisher.isFormValid;
+            //
+            //Recup données
             let method = ((_a = this.getAttribute("method")) === null || _a === void 0 ? void 0 : _a.toLocaleLowerCase()) || "post";
-            let postData = PublisherManager.getInstance().get(this.getAncestorAttributeValue("formDataProvider")).get();
+            let postData = formPublisher.get();
+            delete postData.isFormValid;
             let headerData = PublisherManager.getInstance().get(this.getAncestorAttributeValue("headersDataProvider")).get();
             let result = null;
             let dataProvider = this.getAncestorAttributeValue("dataProvider");
             let endPoint = this.endPoint || dataProvider;
             Loader.show();
+            //
+            //envoi données
             switch (method) {
                 case "put":
                     result = yield ((_b = this.api) === null || _b === void 0 ? void 0 : _b.put(endPoint, postData, headerData));

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

@@ -46,6 +46,7 @@ declare const Checkbox_base: {
     };
 } & {
     new (...args: any[]): {
+        validateFormElement(): void;
         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;

package/core/components/ui/form/css/form-control.js

@@ -145,7 +145,7 @@ export const formControl = css `
     --sc-input-border-color: var(--sc-danger);
   }
 
-  :host :not([value=""]):not(:focus):invalid {
+  :host :not(select):not(textarea):not([value=""]):not(:focus):invalid {
     --sc-input-color: var(--sc-danger);
   }
 

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

@@ -1,6 +1,7 @@
 import { LitElement } from "lit";
 declare const Input_base: {
     new (...args: any[]): {
+        validateFormElement(): void;
         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;

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

@@ -34,6 +34,7 @@ export declare class Select extends Select_base {
     hasPrefix: true | false;
     updated(): void;
     onSlotChange(): void;
+    validateFormElement(): void;
     render(): import("lit-html").TemplateResult<1>;
 }
 export {};

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

@@ -92,6 +92,15 @@ let Select = class Select extends FormElement(Subscriber(LitElement)) {
     onSlotChange() {
         this.requestUpdate();
     }
+    validateFormElement() {
+        var _a;
+        const that = this;
+        const select = (_a = that.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("select");
+        if (!select || select.checkValidity())
+            return;
+        this.getFormPublisher().isFormValid = false;
+        select.reportValidity();
+    }
     render() {
         const slotClasses = {
             "has-prefix": this.hasPrefix,

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

@@ -1,6 +1,7 @@
 import { LitElement } from "lit";
 declare const Textarea_base: {
     new (...args: any[]): {
+        validateFormElement(): void;
         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;
@@ -64,6 +65,7 @@ export declare class Textarea extends Textarea_base {
     slotClasses: {};
     updated(): void;
     onSlotChange(): void;
+    validateFormElement(): void;
     render(): import("lit-html").TemplateResult<1>;
 }
 export {};

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

@@ -47,6 +47,15 @@ let Textarea = class Textarea extends FormInput(FormElement(Subscriber(LitElemen
     onSlotChange() {
         this.requestUpdate();
     }
+    validateFormElement() {
+        var _a;
+        const that = this;
+        const textarea = (_a = that.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("textarea");
+        if (!textarea || textarea.checkValidity())
+            return;
+        this.getFormPublisher().isFormValid = false;
+        textarea.reportValidity();
+    }
     render() {
         return html `
       <label for="form-element" class="${this.hasLabel ? "form-label" : "hidden"}"
@@ -57,6 +66,7 @@ let Textarea = class Textarea extends FormInput(FormElement(Subscriber(LitElemen
         <textarea
           @input=${this.handleChange}
           ?disabled=${this.disabled}
+          ?required=${this.required}
           autocomplete=${ifDefined(this.autocomplete)}
           autofocus=${ifDefined(this.autofocus)}
           rows=${ifDefined(this.rows)}

package/core/mixins/FormElement.js

@@ -26,6 +26,7 @@ const Form = (superClass) => {
             this.required = null;
             this.onValueAssign = null;
             this.onFormValueAssign = null;
+            this.onFormDataInValidate = null;
             this.formDataProvider = "";
             /**
              * Le nom du champ avec des caractéristiques similaire à un input html classique.
@@ -42,6 +43,12 @@ const Form = (superClass) => {
             this.onFormValueAssign = (value) => {
                 this.setFormValueFromPublisher(value);
             };
+            this.onFormDataInValidate = () => {
+                if (!this.getFormPublisher().isFormValid.get()) {
+                    return;
+                }
+                this.validateFormElement();
+            };
         }
         get name() {
             return this._name;
@@ -49,6 +56,7 @@ const Form = (superClass) => {
         set name(value) {
             this._name = value;
         }
+        validateFormElement() { }
         updateDataValue() {
             if (this._name) {
                 let formPublisher = this.getFormPublisher();
@@ -119,8 +127,10 @@ const Form = (superClass) => {
                 this.publisher[this._name].onAssign(this.onValueAssign);
             }
             formPublisher = this.getFormPublisher();
-            if (this._name && formPublisher)
+            if (this._name && formPublisher) {
                 formPublisher[this._name].onAssign(this.onFormValueAssign);
+                formPublisher.onInvalidate((this.onFormDataInValidate));
+            }
         }
         handleChange(e) {
             this.value = e.target.value;
@@ -202,8 +212,10 @@ const Form = (superClass) => {
             if (this._name && this.publisher)
                 this.publisher[this._name].offAssign(this.onValueAssign);
             let formPublisher = this.getFormPublisher();
-            if (this._name && formPublisher)
+            if (this._name && formPublisher) {
                 formPublisher[this._name].offAssign(this.onFormValueAssign);
+                formPublisher.offInvalidate(this.onFormDataInValidate);
+            }
         }
     }
     __decorate([

package/core/mixins/FormInput.d.ts

@@ -2,6 +2,7 @@ import { FormElementInterface } from "@supersoniks/concorde/core/mixins/FormElem
 declare type Constructor<T> = new (...args: any[]) => T;
 declare const Form: <T extends Constructor<FormElementInterface>>(superClass: T) => {
     new (...args: any[]): {
+        validateFormElement(): void;
         /**
          * 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

package/core/mixins/FormInput.js

@@ -18,6 +18,15 @@ const Form = (superClass) => {
             this.autocomplete = null;
             args;
         }
+        validateFormElement() {
+            var _a;
+            const that = this;
+            const input = (_a = that.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("input");
+            if (!input || input.checkValidity())
+                return;
+            this.getFormPublisher().isFormValid = false;
+            input.reportValidity();
+        }
     }
     __decorate([
         property({ type: String })

package/core/utils/PublisherProxy.mjs

@@ -398,7 +398,7 @@ export default class Publisher extends PublisherProxy {
              * Autres propriétés classiques d'un objet implémentées par le proxy
              */
             deleteProperty: function (oTarget, sKey) {
-                that._proxies_.get(sKey).set(null);
+                // that._proxies_.get(sKey).set(null);
                 that._publishDynamicFilling_(sKey, null);
                 that._proxies_.delete(sKey);
                 return delete that._value_[sKey];

package/mixins.d.ts

@@ -0,0 +1,133 @@
+export declare const Fetcher: <T extends new (...args: any[]) => mySubscriber.SubscriberInterface>(superClass: T) => {
+    new (...args: any[]): {
+        api: import("./core/utils/api").default | null;
+        key: String;
+        isFirstLoad: boolean;
+        isLoading: boolean;
+        iObserver: IntersectionObserver | null;
+        isDefaultLoaderEnabled: boolean;
+        isFetchEnabled: boolean;
+        _endPoint: string;
+        endPoint: string;
+        _fetchData(): Promise<void>;
+        onInvalidate: any;
+        disconnectedCallback(): void;
+        connectedCallback(): void;
+        firstUpdated(): void;
+        onIntersection(entries: IntersectionObserverEntry[]): void;
+        props: any;
+        isConnected: boolean;
+        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;
+        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("./core/utils/api").APIConfiguration;
+        requestUpdate(): void;
+        getAttribute(name: string): string;
+        hasAttribute(attributeName: String): boolean;
+    };
+} & T;
+export declare const FormCheckable: <T extends new (...args: any[]) => myFormElement.FormElementInterface>(superClass: T) => {
+    new (...args: any[]): {
+        _value: string | null;
+        value: string | null;
+        _name: string;
+        name: string;
+        unique: true | null;
+        radio: true | null;
+        _checked: true | null;
+        checked: true | null;
+        setCheckedValue(checked: true | null): void;
+        handleChange(): void;
+        getValueForFormPublisher(): any;
+        setFormValueFromPublisher(value: any): void;
+        initPublisher(): void;
+        getFormPublisher(): any;
+        updateDataValue(): void;
+        error: true | null;
+        autofocus: true | null;
+        disabled: true | null;
+        required: true | null;
+        formDataProvider: string;
+        props: any;
+        isConnected: boolean;
+        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;
+        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;
+        getApiConfiguration(): import("./core/utils/api").APIConfiguration;
+        connectedCallback(): void;
+        requestUpdate(): void;
+        getAttribute(name: string): string;
+        hasAttribute(attributeName: String): boolean;
+        disconnectedCallback(): void;
+    };
+} & T;
+import * as myFormElement from "./core/mixins/FormElement";
+export declare const FormElement: <T extends new (...args: any[]) => mySubscriber.SubscriberInterface>(superClass: T) => (new (...args: any[]) => myFormElement.FormElementInterface) & T;
+export declare const FormInput: <T extends new (...args: any[]) => myFormElement.FormElementInterface>(superClass: T) => {
+    new (...args: any[]): {
+        validateFormElement(): void;
+        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;
+        isConnected: boolean;
+        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;
+        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("./core/utils/api").APIConfiguration;
+        connectedCallback(): void;
+        requestUpdate(): void;
+        getAttribute(name: string): string;
+        hasAttribute(attributeName: String): boolean;
+        disconnectedCallback(): void;
+    };
+} & T;
+import * as mySubscriber from "./core/mixins/Subscriber";
+export declare const Subscriber: <T extends new (...args: any[]) => import("lit").LitElement>(superClass: T) => (new (...args: any[]) => mySubscriber.SubscriberInterface) & T;
+import * as myTemplatesContainer from "./core/mixins/TemplatesContainer";
+export declare const TemplatesContainer: <T extends new (...args: any[]) => import("lit").LitElement>(superClass: T) => (new (...args: any[]) => myTemplatesContainer.TemplatesContainerInterface) & T;

package/mixins.js

@@ -0,0 +1,23 @@
+//
+import * as myFetcher from "./core/mixins/Fetcher";
+export const Fetcher = myFetcher.default;
+import * as myFormCheckable from "./core/mixins/FormCheckable";
+export const FormCheckable = myFormCheckable.default;
+import * as myFormElement from "./core/mixins/FormElement";
+export const FormElement = myFormElement.default;
+import * as myFormInput from "./core/mixins/FormInput";
+export const FormInput = myFormInput.default;
+import * as mySubscriber from "./core/mixins/Subscriber";
+export const Subscriber = mySubscriber.default;
+import * as myTemplatesContainer from "./core/mixins/TemplatesContainer";
+export const TemplatesContainer = myTemplatesContainer.default;
+let win = window;
+win["concorde-mixins"] = win["concorde-mixins"] || {};
+win["concorde-mixins"] = {
+    Fetcher: Fetcher,
+    FormCheckable: FormCheckable,
+    FormElement: FormElement,
+    FormInput: FormInput,
+    Subscriber: Subscriber,
+    TemplatesContainer: TemplatesContainer
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@supersoniks/concorde",
-  "version": "1.1.21",
+  "version": "1.1.23",
   "customElements": "custom-elements.json",
   "license": "MIT",
   "publishConfig": {

package/utils.d.ts

@@ -0,0 +1,17 @@
+import * as myArrays from "./core/utils/Arrays";
+export declare const Arrays: typeof myArrays.default;
+import * as myDataBindObserver from "./core/utils/DataBindObserver";
+export declare const DataBindObserver: typeof myDataBindObserver.default;
+import * as myFormat from "./core/utils/Format";
+export declare const Format: typeof myFormat.default;
+import * as myHTML from "./core/utils/HTML";
+export declare const HTML: typeof myHTML.default;
+import * as myLocationHandler from "./core/utils/LocationHandler";
+export declare const LocationHandler: typeof myLocationHandler.default;
+import * as myObjects from "./core/utils/Objects";
+export declare const Objects: typeof myObjects.default;
+import * as myPublisherProxy from "./core/utils/PublisherProxy.mjs";
+export declare const PublisherProxy: typeof myPublisherProxy.default;
+export declare const PublisherManager: typeof myPublisherProxy.PublisherManager;
+import * as myApi from "./core/utils/api";
+export declare const api: typeof myApi.default;

package/utils.js

@@ -0,0 +1,32 @@
+//
+//
+import * as myArrays from "./core/utils/Arrays";
+export const Arrays = myArrays.default;
+import * as myDataBindObserver from "./core/utils/DataBindObserver";
+export const DataBindObserver = myDataBindObserver.default;
+import * as myFormat from "./core/utils/Format";
+export const Format = myFormat.default;
+import * as myHTML from "./core/utils/HTML";
+export const HTML = myHTML.default;
+import * as myLocationHandler from "./core/utils/LocationHandler";
+export const LocationHandler = myLocationHandler.default;
+import * as myObjects from "./core/utils/Objects";
+export const Objects = myObjects.default;
+import * as myPublisherProxy from "./core/utils/PublisherProxy.mjs";
+export const PublisherProxy = myPublisherProxy.default;
+export const PublisherManager = myPublisherProxy.PublisherManager;
+import * as myApi from "./core/utils/api";
+export const api = myApi.default;
+let win = window;
+win["concorde-utils"] = win["concorde-utils"] || {};
+win["concorde-utils"] = {
+    Arrays: Arrays,
+    DataBindObserver: DataBindObserver,
+    Format: Format,
+    HTML: HTML,
+    LocationHandler: LocationHandler,
+    Objects: Objects,
+    PublisherProxy: PublisherProxy,
+    PublisherManager: PublisherManager,
+    api: api
+};