@supersoniks/concorde 1.1.27 → 1.1.30

package/core/components/ui/image/image.js

@@ -18,7 +18,6 @@ let Image = class Image extends LitElement {
         this.ratio = "auto";
         this.objectPosition = "center center";
         this.imageRendering = "auto";
-        this.shadow = "none";
         this.cover = false;
     }
     render() {
@@ -83,25 +82,6 @@ Image.styles = [
         --sc-img-radius: 0 !important;
       }
 
-      /*OMBRE*/
-      :host([shadow]) > div,
-      :host([shadow="md"]) > div,
-      :host([shadow="true"]) > div {
-        box-shadow: var(--sc-shadow);
-      }
-
-      :host([shadow="sm"]) > div {
-        box-shadow: var(--sc-shadow-sm);
-      }
-
-      :host([shadow="none"]) > div {
-        box-shadow: none;
-      }
-
-      :host([shadow="lg"]) > div {
-        box-shadow: var(--sc-shadow-lg);
-      }
-
       :host([cover]),
       :host([cover]) > div,
       :host([cover]) img {
@@ -136,9 +116,6 @@ __decorate([
 __decorate([
     property({ type: String })
 ], Image.prototype, "imageRendering", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], Image.prototype, "shadow", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], Image.prototype, "cover", void 0);

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

@@ -7,6 +7,7 @@ export declare class Pop extends LitElement {
     popBtn: HTMLElement;
     popContent: HTMLElement;
     toggle: "true" | "false";
+    inline: boolean;
     /**
      * Ombre
      */

package/core/components/ui/pop/pop.js

@@ -14,6 +14,7 @@ let Pop = Pop_1 = class Pop extends LitElement {
         super(...arguments);
         this.open = false;
         this.toggle = "true";
+        this.inline = false;
         /**
          * Ombre
          */
@@ -196,6 +197,10 @@ Pop.styles = [
       :host([shadow="lg"]) slot[name="content"] {
         box-shadow: var(--sc-shadow-lg);
       }
+
+      :host([inline]) {
+        vertical-align: baseline;
+      }
     `,
 ];
 __decorate([
@@ -210,6 +215,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], Pop.prototype, "toggle", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Pop.prototype, "inline", void 0);
 __decorate([
     property({ type: String, reflect: true })
 ], Pop.prototype, "shadow", void 0);

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

@@ -3,6 +3,7 @@ export declare class Progress extends LitElement {
     static styles: import("lit").CSSResult[];
     value?: number;
     max: number;
+    invert: boolean;
     type: "default" | "primary" | "warning" | "danger" | "success" | "info";
     size: "xs" | "sm" | "md" | "lg" | "xl";
     render(): import("lit-html").TemplateResult<1>;

package/core/components/ui/progress/progress.js

@@ -7,11 +7,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, LitElement, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
+import { fontSize } from "@supersoniks/concorde/core/components/ui/_css/size";
 const tagName = "sonic-progress";
 let Progress = class Progress extends LitElement {
     constructor() {
         super(...arguments);
         this.max = 100;
+        this.invert = false;
         this.type = "default";
         this.size = "md";
     }
@@ -26,12 +28,13 @@ let Progress = class Progress extends LitElement {
     }
 };
 Progress.styles = [
+    fontSize,
     css `
       :host {
         --sc-progress-bg: var(--sc-input-bg, var(--sc-base-100, #f5f5f5));
         --sc-progress-color: var(--sc-base-content, #1f2937);
-        --sc-progress-height: .6rem;
-        --sc-progress-fs: 1rem;
+        --sc-progress-height: .6em;
+        --sc-progress-fs: var(--sc-fs, 1rem);
         --sc-progress-fw: 500;
         --sc-progress-rounded: var(--sc-rounded-lg);
         display: block;
@@ -103,25 +106,11 @@ Progress.styles = [
         --sc-progress-color: var(--sc-success);
       }
 
-      /* SIZES */
-      :host([size="xs"]) {
-        --sc-progress-height:.25rem;
-        --sc-progress-fs: 0.68rem;
+      :host([invert]) {
+        --sc-progress-bg: var(--sc-base-700);
       }
-
-      :host([size="sm"]) {
-        --sc-progress-height:.4rem;
-        --sc-progress-fs: 0.85rem;
-      }
-
-      :host([size="lg"]) {
-        --sc-progress-height:1rem;
-        --sc-progress-fs: 1.25rem;
-      }
-
-      :host([size="xl"]) {
-        --sc-progress-height:1.5rem;
-        --sc-progress-fs: 1.5rem;
+      :host([type="default"][invert]) {
+        --sc-progress-color: var(--sc-base);
       }
 
       slot[name="remaining"] {
@@ -135,6 +124,7 @@ Progress.styles = [
         display:flex;
         justify-content: space-between;
         gap:.5em;
+        margin-top:.15em;
       }
     `
 ];
@@ -144,6 +134,9 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], Progress.prototype, "max", void 0);
+__decorate([
+    property({ type: Boolean })
+], Progress.prototype, "invert", void 0);
 __decorate([
     property({ type: String, reflect: true })
 ], Progress.prototype, "type", void 0);

package/core/components/ui/table/table-td.d.ts

@@ -4,6 +4,7 @@ export declare class TableTd extends LitElement {
     colSpan?: number;
     rowSpan?: number;
     align?: string;
+    vAlign?: string;
     minWidth?: string;
     render(): import("lit-html").TemplateResult<1>;
 }

package/core/components/ui/table/table-td.js

@@ -9,11 +9,12 @@ import { customElement, property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { styleMap } from "lit/directives/style-map.js";
 const tagName = "sonic-td";
-import { typesColor } from "@supersoniks/concorde/core/components/ui/_css/types";
+import { typeColor } from "@supersoniks/concorde/core/components/ui/_css/type";
 let TableTd = class TableTd extends LitElement {
     render() {
         const styles = {
             textAlign: this.align,
+            verticalAlign: this.vAlign,
             minWidth: this.minWidth,
         };
         return html `<td
@@ -27,7 +28,7 @@ let TableTd = class TableTd extends LitElement {
     }
 };
 TableTd.styles = [
-    typesColor,
+    typeColor,
     css `
       :host {
         display: contents;
@@ -48,6 +49,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], TableTd.prototype, "align", void 0);
+__decorate([
+    property({ type: String })
+], TableTd.prototype, "vAlign", void 0);
 __decorate([
     property({ type: String })
 ], TableTd.prototype, "minWidth", void 0);

package/core/components/ui/table/table-th.js

@@ -8,7 +8,7 @@ import { html, LitElement, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { styleMap } from "lit/directives/style-map.js";
-import { typesColor } from "@supersoniks/concorde/core/components/ui/_css/types";
+import { typeColor } from "@supersoniks/concorde/core/components/ui/_css/type";
 const tagName = "sonic-th";
 let TableTh = class TableTh extends LitElement {
     render() {
@@ -27,7 +27,7 @@ let TableTh = class TableTh extends LitElement {
     }
 };
 TableTh.styles = [
-    typesColor,
+    typeColor,
     css `
       :host {
         display: contents;

package/core/components/ui/table/table-tr.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement, css } from "lit";
 import { customElement } from "lit/decorators.js";
-import { typesColor } from "@supersoniks/concorde/core/components/ui/_css/types";
+import { typeColor } from "@supersoniks/concorde/core/components/ui/_css/type";
 const tagName = "sonic-tr";
 let TableTr = class TableTr extends LitElement {
     render() {
@@ -14,11 +14,12 @@ let TableTr = class TableTr extends LitElement {
     }
 };
 TableTr.styles = [
-    typesColor,
+    typeColor,
     css `
       :host {
         display: table-row;
       }
+
     `
 ];
 TableTr = __decorate([

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

@@ -8,7 +8,7 @@ import "@supersoniks/concorde/core/components/ui/table/table-tfoot";
 import "@supersoniks/concorde/core/components/ui/table/table-caption";
 export declare class Table extends LitElement {
     static styles: import("lit").CSSResult[];
-    size: "xs" | "sm" | "md" | "lg" | "xl";
+    size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
     striped: boolean;
     sticky: boolean;
     bordered: boolean;

package/core/components/ui/table/table.js

@@ -15,11 +15,11 @@ import "@supersoniks/concorde/core/components/ui/table/table-thead";
 import "@supersoniks/concorde/core/components/ui/table/table-tbody";
 import "@supersoniks/concorde/core/components/ui/table/table-tfoot";
 import "@supersoniks/concorde/core/components/ui/table/table-caption";
+import { fontSize } from "@supersoniks/concorde/core/components/ui/_css/size";
 const tagName = "sonic-table";
 let Table = class Table extends LitElement {
     constructor() {
         super(...arguments);
-        this.size = "md";
         this.striped = false;
         this.sticky = false;
         this.bordered = false;
@@ -41,6 +41,7 @@ let Table = class Table extends LitElement {
 };
 Table.styles = [
     customScroll,
+    fontSize,
     css `
       :host {
         --sc-table-fw: var(--sc-font-weight-base);
@@ -56,38 +57,20 @@ Table.styles = [
         --sc-table-th-py: calc(1.8 * var(--sc-table-td-py) );
         --sc-table-td-px: .5em;
         --sc-table-td-py: .5em;
-
         display:block;
       }
 
-      .table-container {
+      :host([maxHeight]) .table-container {
         overflow-x: auto;
         -webkit-overflow-scrolling: touch;
       }
       
       .table {
         width: 100%;
-        font-size: var(--sc-table-fs);
         display: table;
         box-sizing:border-box;
       }
 
-      /*SIZES*/
-      :host([size="2xs"]) {
-        --sc-table-fs: 0.6rem;
-      }
-      :host([size="xs"]) {
-        --sc-table-fs: 0.75rem;
-      }
-      :host([size="sm"]) {
-        --sc-table-fs: 0.85rem;
-      }
-      :host([size="lg"]) {
-        --sc-table-fs: 1.2rem;
-      }
-      :host([size="xl"]) {
-        --sc-table-fs: 1.5rem;
-      }
       :host([bordered]) .table-container {
         border:var(--sc-border-width) solid var(--sc-table-border-color) !important;
       }

package/core/components/ui/theme/theme-collection/core-variables.js

@@ -20,35 +20,46 @@ export const coreVariables = css `
 
     /* ROUNDED*/
     --sc-rounded-sm: calc(var(--sc-rounded) * 0.5);
-    --sc-rounded: 0.35rem;
+    --sc-rounded: 0.375rem;
     --sc-rounded-md: calc(var(--sc-rounded) * 1.8);
     --sc-rounded-lg: calc(var(--sc-rounded) * 3.5);
     --sc-rounded-xl: calc(var(--sc-rounded) * 7);
+    --sc-rounded-size-intensity: calc((1em - 1rem) * .4);
 
-    --sc-btn-rounded: calc(var(--sc-rounded) * 1.2);
+    /* 4 for rounded full*/
+    --sc-btn-rounded-intensity : 1.4;
+    --sc-btn-font-weight: 500;
+    --sc-btn-rounded: calc((var(--sc-rounded) + var(--sc-rounded-size-intensity)) * var(--sc-btn-rounded-intensity) );
 
     /* Placeholder */
     --sc-placeholder-bg: rgba(17, 24, 39, 0.05);
 
-    /* Images*/
+    /* OMBRES */
     --sc-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
     --sc-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
     --sc-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
     --sc-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
     --sc-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
 
-    /* formulaires*/
-    --sc-border-width: max(1px, 0.085rem);
+    /* Forms */
+    --sc-border-width: max(1px, 0.12rem);
+    --sc-form-height : 2.5em;
     --sc-form-border-width: var(--sc-border-width);
     --sc-input-bg: var(--sc-base-100);
     --sc-input-border-color: var(--sc-input-bg);
-    --sc-input-rounded: calc(var(--sc-rounded) * 1.2);
+    --sc-input-rounded-intensity : 1.4;
+    --sc-input-rounded: calc((var(--sc-rounded) + var(--sc-rounded-size-intensity)) * var(--sc-input-rounded-intensity) );
+    --sc-label-font-weight: 500;
 
-    /*Couleurs -- textes sur images*/
+    /* Contrast -- ex : Text on images */
     --sc-contrast-content: #fff;
-    --sc-contrast: #0f172a;
+    --sc-contrast: #11151f;
 
     /*Scrollbar*/
     --sc-scrollbar-bg : var(--sc-base-400);
+
+    /*Body*/
+    --sc-body-bg: var(--sc-base);
+
   }
 `;

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

@@ -1,10 +1,17 @@
 import { LitElement } from "lit";
 export declare class Theme extends LitElement {
     static styles: import("lit").CSSResult[];
+    theme: string;
+    background: boolean;
+    color: boolean;
+    font: boolean;
+    contrastDarkMode: boolean;
     connectedCallback(): void;
+    updated(): void;
     postCSSVars(): void;
     receiveMessage(event: any): void;
-    theme: string;
     getCssVariables(): Record<string, string>;
+    contrast(color: string, percent: number): string;
+    contrastBg(): void;
     render(): import("lit-html").TemplateResult<1>;
 }

package/core/components/ui/theme/theme.js

@@ -15,12 +15,19 @@ let Theme = Theme_1 = class Theme extends LitElement {
     constructor() {
         super(...arguments);
         this.theme = "light";
+        this.background = false;
+        this.color = false;
+        this.font = false;
+        this.contrastDarkMode = false;
     }
     connectedCallback() {
         super.connectedCallback();
         window.addEventListener("message", (e) => this.receiveMessage(e), false);
         this.postCSSVars();
     }
+    updated() {
+        this.contrastBg();
+    }
     postCSSVars() {
         const stylesheets = document.styleSheets;
         const ssLength = stylesheets.length;
@@ -68,6 +75,24 @@ let Theme = Theme_1 = class Theme extends LitElement {
         names.forEach((name) => (result[name] = style.getPropertyValue(name)));
         return result;
     }
+    // function to darken a color based on an hexa value
+    contrast(color, percent) {
+        let num = parseInt(color.replace("#", ""), 16), amt = Math.round(2.55 * percent), R = (num >> 16) + amt, B = ((num >> 8) & 0x00ff) + amt, G = (num & 0x0000ff) + amt;
+        return ("#" +
+            (0x1000000 +
+                (R < 255 ? (R < 1 ? 0 : R) : 255) * 0x10000 +
+                (B < 255 ? (B < 1 ? 0 : B) : 255) * 0x100 +
+                (G < 255 ? (G < 1 ? 0 : G) : 255))
+                .toString(16)
+                .slice(1));
+    }
+    // get de computed value of --sc-base and darken it
+    contrastBg() {
+        if (this.theme === "dark" && this.contrastDarkMode && this.background) {
+            let baseColor = window.getComputedStyle(this).getPropertyValue("--sc-base");
+            this.style.setProperty("--sc-body-bg", this.contrast(baseColor, -2.5));
+        }
+    }
     render() {
         return html `<slot></slot>`;
     }
@@ -79,7 +104,11 @@ Theme.styles = [
     css `
       :host([background]) {
         display: block !important;
-        background: var(--sc-base) !important;
+        background: var(--sc-body-bg) !important;
+        min-height: 100vh;
+      }
+      :host([contrastDarkMode]) {
+        transition: background-color 2.5s ease;
       }
 
       :host([color]) {
@@ -96,6 +125,18 @@ Theme.styles = [
 __decorate([
     property({ type: String, reflect: true })
 ], Theme.prototype, "theme", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Theme.prototype, "background", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Theme.prototype, "color", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Theme.prototype, "font", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Theme.prototype, "contrastDarkMode", void 0);
 Theme = Theme_1 = __decorate([
     customElement(tagName)
 ], Theme);

package/core/components/ui/toast/toast-item.d.ts

@@ -4,10 +4,12 @@ import { ToastStatus } from "@supersoniks/concorde/core/components/ui/toast/type
 export declare class SonicToastItem extends LitElement {
     static styles: import("lit").CSSResult[];
     title: string;
+    id: string;
     text: string;
     status: ToastStatus;
     ghost: boolean;
     preserve: boolean;
+    dismissForever: boolean;
     maxHeight: string;
     visible: boolean;
     render(): import("lit-html").TemplateResult<1> | typeof nothing;

package/core/components/ui/toast/toast-item.js

@@ -20,14 +20,24 @@ let SonicToastItem = class SonicToastItem extends LitElement {
     constructor() {
         super(...arguments);
         this.title = "";
+        this.id = "";
         this.text = "";
         this.status = "";
         this.ghost = false;
         this.preserve = false;
+        this.dismissForever = false;
         this.maxHeight = '10rem';
         this.visible = true;
     }
     render() {
+        // check if the toast is dismissed
+        if (this.dismissForever) {
+            const dismissed = localStorage.getItem('sonic-toast-dismissed') || '{}';
+            const dismissedObj = JSON.parse(dismissed);
+            if (dismissedObj[this.id]) {
+                return nothing;
+            }
+        }
         if (!this.visible) {
             return nothing;
         }
@@ -58,6 +68,13 @@ let SonicToastItem = class SonicToastItem extends LitElement {
         if (!this.closest('sonic-toast')) {
             this.visible = false;
         }
+        if (this.dismissForever) {
+            // set in local Storage an Object with the id as key and if it's dismissed as value
+            const dismissed = localStorage.getItem('sonic-toast-dismissed') || '{}';
+            const dismissedObj = JSON.parse(dismissed);
+            dismissedObj[this.id] = true;
+            localStorage.setItem('sonic-toast-dismissed', JSON.stringify(dismissedObj));
+        }
         this.dispatchEvent(new CustomEvent("hide", { bubbles: true }));
     }
     show() {
@@ -107,7 +124,7 @@ SonicToastItem.styles = [
       }
 
       .sonic-toast-content {
-        padding: 1em 2rem 1em 1em;
+        padding: 1em 2.5rem 1em 1em;
         display: flex;
         gap: 0.5rem;
         overflow: auto;
@@ -239,6 +256,9 @@ SonicToastItem.styles = [
 __decorate([
     property({ type: String })
 ], SonicToastItem.prototype, "title", void 0);
+__decorate([
+    property({ type: String })
+], SonicToastItem.prototype, "id", void 0);
 __decorate([
     property({ type: String })
 ], SonicToastItem.prototype, "text", void 0);
@@ -251,6 +271,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], SonicToastItem.prototype, "preserve", void 0);
+__decorate([
+    property({ type: Boolean })
+], SonicToastItem.prototype, "dismissForever", void 0);
 __decorate([
     property({ type: String })
 ], SonicToastItem.prototype, "maxHeight", void 0);

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

@@ -14,6 +14,7 @@ export declare class SonicToast extends LitElement {
         status: import("@supersoniks/concorde/core/components/ui/toast/types").ToastStatus | undefined;
         preserve: boolean | undefined;
         ghost: boolean | undefined;
+        dismissForever: boolean | undefined;
     } | null;
     removeItem(item: Toast): void;
 }

package/core/components/ui/toast/toast.js

@@ -38,7 +38,11 @@ let SonicToast = class SonicToast extends LitElement {
             return nothing;
         return html `<div aria-live="polite" style=${styleMap(styles)}>
       ${repeat(this.toasts, (item) => item.id, (item) => html `
-          <sonic-toast-item maxHeight=${isIframe ? 'none' : '10rem'} status=${item.status} ?ghost=${item.ghost} ?preserve=${item.preserve} id=${item.id}
+          <sonic-toast-item maxHeight=${isIframe ? 'none' : '10rem'}
+            status=${item.status}
+            ?ghost=${item.ghost}
+            ?dismissForever=${item.dismissForever}
+            ?preserve=${item.preserve} id=${item.id}
             @hide=${() => this.removeItem(item)}
             ${animate({
             keyframeOptions: {
@@ -70,6 +74,7 @@ let SonicToast = class SonicToast extends LitElement {
     }
     // ADD TOAST
     static add(conf) {
+        var _a;
         // Init toast area si absente (au <sonic-theme> ou <body< à défaut)
         if (!document.querySelector("sonic-toast")) {
             let toastComponent = document.createElement("sonic-toast");
@@ -78,7 +83,7 @@ let SonicToast = class SonicToast extends LitElement {
         }
         // Ajoute le toast à la liste
         let toastComponent = document.querySelector("sonic-toast");
-        const nextId = new Date().valueOf();
+        const nextId = (_a = conf.id) !== null && _a !== void 0 ? _a : new Date().valueOf();
         const interactiveRegExp = new RegExp("</a>|</button>");
         const hasInteractive = interactiveRegExp.test(conf.text);
         const currentToast = {
@@ -88,7 +93,16 @@ let SonicToast = class SonicToast extends LitElement {
             status: conf.status,
             preserve: hasInteractive ? true : conf.preserve,
             ghost: conf.ghost,
+            dismissForever: conf.dismissForever,
         };
+        // check if the toast is dismissed
+        if (conf.dismissForever && conf.id) {
+            const dismissed = localStorage.getItem('sonic-toast-dismissed') || '{}';
+            const dismissedObj = JSON.parse(dismissed);
+            if (dismissedObj[conf.id]) {
+                return null;
+            }
+        }
         if (toastComponent.toasts.length > 0) {
             let toastA = Object.assign({}, currentToast);
             let toastB = Object.assign({}, toastComponent.toasts[toastComponent.toasts.length - 1]);

package/core/components/ui/toast/types.d.ts

@@ -6,4 +6,5 @@ export declare type Toast = {
     status?: ToastStatus;
     preserve?: boolean;
     ghost?: boolean;
+    dismissForever?: boolean;
 };

package/core/mixins/FormCheckable.d.ts

@@ -42,10 +42,11 @@ declare const Form: <T extends Constructor<FormElementInterface>>(superClass: T)
         initPublisher(): void;
         getFormPublisher(): any;
         updateDataValue(): void;
-        error: true | null;
-        autofocus: true | null;
+        handleBlur(e?: any): void;
+        error: boolean;
+        autofocus: boolean;
+        required: boolean;
         disabled: true | null;
-        required: true | null;
         formDataProvider: string;
         props: any;
         isConnected: boolean;

package/core/mixins/FormCheckable.js

@@ -98,9 +98,12 @@ const Form = (superClass) => {
         getValueForFormPublisher() {
             let publisher = this.getFormPublisher();
             let currentValue = publisher[this.name].get();
-            if (this.unique || this.radio) {
+            if (this.radio) {
                 return this.checked && this.value != null ? this.value : currentValue;
             }
+            if (this.unique) {
+                return this.checked && this.value != null ? this.value : null;
+            }
             if (!Array.isArray(currentValue)) {
                 currentValue = [];
             }

package/core/mixins/FormElement.d.ts

@@ -4,11 +4,12 @@ export interface FormElementInterface extends SubscriberInterface {
     getFormPublisher(): any;
     updateDataValue(): void;
     handleChange(e?: any): void;
+    handleBlur(e?: any): void;
     getValueForFormPublisher(): any;
-    error: true | null;
-    autofocus: true | null;
+    error: boolean;
+    autofocus: boolean;
+    required: boolean;
     disabled: true | null;
-    required: true | null;
     formDataProvider: string;
     _value: any;
     get value(): any;