@supersoniks/concorde 1.0.5 → 1.0.8

package/README.md

@@ -1,16 +1,24 @@
-# Concorde - A Supersonik(s) design system
-Based on Lit Element + Vite + Publisher Proxy
+# Concorde 
+Design system and functional components based on Lit Element + Vite + Tailwind CSS
 
 ## Getting Started
 
-Start the dev server:
+**Install Concorde**
 
-`npm run start`
+`npm install @supersoniks/concorde`
 
-Create a production build:
+**Import components**
 
-`npm run build`
+`import @suspersoniks/concorde/core/components/ui/ui`
 
-Serve the build directory:
+**Usage**
 
-`npm run serve`
+```html
+<sonic-theme>
+    <sonic-button variant="outline">
+    	Hello Concorde
+    </sonic-button>
+</sonic-theme>
+```
+
+**More docs to come...**

package/cli.js

@@ -0,0 +1,69 @@
+#!/usr/bin/env node
+const fs = require("fs");
+const path = require("path");
+function enableShortPaths() {
+  let conf = path.resolve(__dirname + "../../../../tsconfig.json");
+  let current = path.resolve(__dirname);
+  function listFiles(dir) {
+    let files = [];
+    let list = fs.readdirSync(dir);
+    list.forEach((file) => {
+      const path = dir + "/" + file;
+      let stat = fs.statSync(path);
+      if (stat && stat.isDirectory()) {
+        files = files.concat(listFiles(path));
+      } else {
+        files.push(path.substring(2));
+      }
+    });
+    return files;
+  }
+  if (fs.existsSync(conf)) {
+    const confJSON = require(conf);
+    let paths = confJSON.compilerOptions.paths || {};
+    let baseURL = confJSON.compilerOptions.baseUrl || ".";
+    if (baseURL.endsWith("/")) {
+      baseURL = baseURL.substring(0, baseURL.length - 1);
+    }
+    let baseURLSplit = baseURL.split("/");
+    let baseBackPath = "";
+    if (baseURLSplit[0] == ".") baseURLSplit.shift();
+    for (let i = 0; i < baseURLSplit.length; i++) {
+      baseBackPath += "../";
+    }
+    if (baseURLSplit.length == 0) baseBackPath = "./";
+
+    for (let z in paths) {
+      if (z.indexOf("@supersoniks/concorde") == 0) {
+        delete paths[z];
+      }
+    }
+    let files = listFiles(current).filter((file) => {
+      return file.indexOf(".js") != -1 && file.indexOf(".stories.") == -1 && file.indexOf("core/") != -1;
+    });
+    for (let file of files) {
+      let src = file
+        .replace(/.*?core\/components/, "@supersoniks/concorde")
+        .replace(/.*?core\/mixins/, "@supersoniks/concorde/mixins")
+        .replace(/.*?core\/utils/, "@supersoniks/concorde/utils")
+        .replace(/\/(\w+)\/\1\.js/, "/$1")
+        .replace(".js", "");
+      let dest =
+        baseBackPath + "node_modules/" + file.substring(file.indexOf("@supersoniks/concorde")).replace(".js", "");
+      paths[src] = [dest];
+    }
+    confJSON.compilerOptions.paths = paths;
+    fs.writeFileSync(conf, JSON.stringify(confJSON, null, 2));
+    console.log("✔️ Go and look to tsconfig.json to see generated paths");
+  }
+}
+switch (process.argv[2]) {
+  case "enable-short-paths":
+    enableShortPaths();
+    break;
+  default:
+    console.log("Usage: npx concorde <command>");
+    console.log("Commands:");
+    console.log("  enable-short-paths");
+    break;
+}

package/core/components/functional/date/date.d.ts

@@ -0,0 +1,34 @@
+import { LitElement, nothing } from "lit";
+declare const SonicDate_base: (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface) & (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/TemplatesContainer").TemplatesContainerInterface) & typeof LitElement;
+export declare class SonicDate extends SonicDate_base {
+    pageLanguage: string;
+    private duAu;
+    private _wording_billet_periode_validite;
+    get wording_billet_periode_validite(): string;
+    set wording_billet_periode_validite(value: string);
+    designMode: boolean | null;
+    date: number | null;
+    date_string: string | null;
+    start_date_string: string | null;
+    end_date_string: string | null;
+    start_date: number;
+    end_date: number;
+    era: "narrow" | "short" | "long" | "";
+    year: "numeric" | "2-digit";
+    month: "numeric" | "2-digit" | "narrow" | "short" | "long";
+    day: "numeric" | "2-digit";
+    weekday: "narrow" | "short" | "long";
+    hour: "numeric" | "2-digit" | null;
+    minute: "numeric" | "2-digit" | null;
+    language: string;
+    renderIf: boolean;
+    private startDateObject;
+    private endDateObject;
+    connectedCallback(): void;
+    /**
+     * Retourne un tableau des différentes parties de la date en fonction des options données, de la date de début et de fin.
+     */
+    getDatesParts(start_date: number, end_date: number, options: Intl.DateTimeFormatOptions): any;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+}
+export {};

package/core/components/functional/date/date.js

@@ -0,0 +1,187 @@
+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, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
+import HTML from "@supersoniks/concorde/core/utils/HTML";
+import Format from "@supersoniks/concorde/core/utils/Format";
+import TemplatesContainer from "@supersoniks/concorde/core/mixins/TemplatesContainer";
+let SonicDate = class SonicDate extends Subscriber(TemplatesContainer(LitElement)) {
+    constructor() {
+        super(...arguments);
+        this.pageLanguage = "fr";
+        this.duAu = [];
+        this._wording_billet_periode_validite = "";
+        this.designMode = null;
+        this.date = null;
+        this.date_string = null;
+        this.start_date_string = null;
+        this.end_date_string = null;
+        this.start_date = new Date().getTime() / 1000;
+        this.end_date = 0;
+        this.era = "";
+        this.year = "numeric";
+        this.month = "short";
+        this.day = "2-digit";
+        this.weekday = "short";
+        this.hour = "2-digit";
+        this.minute = "2-digit";
+        this.language = "";
+        this.renderIf = true;
+        // @property({type:String}) second: 'numeric' | '2-digit'= "2-digit"
+        // @property({ type: String }) hour12: boolean = false;
+        this.startDateObject = new Date();
+        this.endDateObject = new Date();
+    }
+    get wording_billet_periode_validite() {
+        return this._wording_billet_periode_validite;
+    }
+    set wording_billet_periode_validite(value) {
+        this._wording_billet_periode_validite = value;
+        this.duAu = this.wording_billet_periode_validite.split("%s").map((str) => str.trim());
+        this.duAu.pop();
+        this.requestUpdate();
+    }
+    connectedCallback() {
+        this.wording_billet_periode_validite = "Du %s au %s";
+        this.pageLanguage = HTML.getLanguage();
+        super.connectedCallback();
+    }
+    /**
+     * Retourne un tableau des différentes parties de la date en fonction des options données, de la date de début et de fin.
+     */
+    getDatesParts(start_date, end_date, options) {
+        const format = new Intl.DateTimeFormat(this.language || this.pageLanguage, options);
+        let start = this.startDateObject;
+        start.setTime(start_date * 1000);
+        let parts = null;
+        if (end_date > 0) {
+            let end = this.endDateObject;
+            end.setTime(end_date * 1000);
+            parts = format.formatRangeToParts(start, end);
+            if (this.designMode) {
+                for (let part of parts) {
+                    if (part.type == "literal" && this.designMode && part.value.trim() == ",") {
+                        part.hidden = true;
+                    }
+                }
+            }
+            if (parts.some((part) => part.source == "endRange")) {
+                for (let part of parts) {
+                    if (part.type == "literal" && part.source == "shared" && part.value.trim().length > 0) {
+                        part.value = " " + this.duAu[1] + " ";
+                        part.type = "to";
+                        break;
+                    }
+                }
+                if (!this.designMode)
+                    parts.unshift({ type: "from", value: this.duAu[0] + " ", source: "shared" });
+            }
+        }
+        else
+            parts = format.formatToParts(start);
+        parts[0].value = Format.ucFirst(parts[0].value);
+        parts = parts.filter((p) => p.hidden !== true);
+        return parts;
+    }
+    render() {
+        if (!this.renderIf)
+            return nothing;
+        if (this.date_string)
+            this.date = new Date(this.date_string).getTime() / 1000;
+        if (this.date)
+            this.start_date = this.date;
+        if (this.start_date_string)
+            this.start_date = new Date(this.start_date_string).getTime() / 1000;
+        if (this.end_date_string)
+            this.end_date = new Date(this.end_date_string).getTime() / 1000;
+        if (this.end_date > 0 && this.end_date < this.start_date) {
+            const copy = this.start_date;
+            this.start_date = this.end_date;
+            this.end_date = copy;
+        }
+        let options = {
+            weekday: this.weekday,
+            year: this.year,
+            month: this.month,
+            day: this.day,
+        };
+        if (this.hour)
+            options.hour = this.hour;
+        if (this.minute)
+            options.minute = this.minute;
+        if (this.era)
+            options.era = this.era;
+        let parts = this.getDatesParts(this.start_date, this.end_date, options);
+        return html `${parts.map((part) => {
+            let template = this.templateParts[part.type];
+            if (template) {
+                var clone = document.importNode(template.content, true);
+                let child = clone.children[0];
+                if (child.innerText.trim() == "")
+                    child.innerText = part.value;
+                return clone;
+            }
+            return html `<span class="${part.type}">${part.value}</span>`;
+        })}`;
+    }
+};
+__decorate([
+    property()
+], SonicDate.prototype, "wording_billet_periode_validite", null);
+__decorate([
+    property({ type: Boolean })
+], SonicDate.prototype, "designMode", void 0);
+__decorate([
+    property({ type: Number })
+], SonicDate.prototype, "date", void 0);
+__decorate([
+    property({ type: String })
+], SonicDate.prototype, "date_string", void 0);
+__decorate([
+    property({ type: String })
+], SonicDate.prototype, "start_date_string", void 0);
+__decorate([
+    property({ type: String })
+], SonicDate.prototype, "end_date_string", void 0);
+__decorate([
+    property({ type: Number })
+], SonicDate.prototype, "start_date", void 0);
+__decorate([
+    property({ type: Number })
+], SonicDate.prototype, "end_date", void 0);
+__decorate([
+    property({ type: String })
+], SonicDate.prototype, "era", void 0);
+__decorate([
+    property({ type: String })
+], SonicDate.prototype, "year", void 0);
+__decorate([
+    property({ type: String })
+], SonicDate.prototype, "month", void 0);
+__decorate([
+    property({ type: String })
+], SonicDate.prototype, "day", void 0);
+__decorate([
+    property({ type: String })
+], SonicDate.prototype, "weekday", void 0);
+__decorate([
+    property({ type: String })
+], SonicDate.prototype, "hour", void 0);
+__decorate([
+    property({ type: String })
+], SonicDate.prototype, "minute", void 0);
+__decorate([
+    property({ type: String })
+], SonicDate.prototype, "language", void 0);
+__decorate([
+    property({ type: Boolean })
+], SonicDate.prototype, "renderIf", void 0);
+SonicDate = __decorate([
+    customElement("sonic-date")
+], SonicDate);
+export { SonicDate };

package/core/components/functional/example/example.d.ts

@@ -0,0 +1,7 @@
+import { LitElement } from "lit";
+declare const SonicComponent_base: (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface) & typeof LitElement;
+export declare class SonicComponent extends SonicComponent_base {
+    text: string;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};

package/core/components/functional/example/example.js

@@ -0,0 +1,25 @@
+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 } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
+let SonicComponent = class SonicComponent extends Subscriber(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.text = "Example";
+    }
+    render() {
+        return html `${this.text}`;
+    }
+};
+__decorate([
+    property()
+], SonicComponent.prototype, "text", void 0);
+SonicComponent = __decorate([
+    customElement("sonic-example")
+], SonicComponent);
+export { SonicComponent };

package/core/components/functional/fetch/fetch.d.ts

@@ -0,0 +1,49 @@
+import { LitElement } from "lit";
+declare const Fetch_base: {
+    new (...args: any[]): {
+        api: import("../../../utils/api").default | null;
+        key: String;
+        isFirstLoad: boolean;
+        isLoading: boolean;
+        iObserver: IntersectionObserver | null;
+        isDefaultLoaderEnabled: boolean;
+        isFetchEnabled: boolean;
+        _fetchEventData(): Promise<void>;
+        disconnectedCallback(): void;
+        connectedCallback(): void;
+        firstUpdated(): void;
+        onIntersection(entries: IntersectionObserverEntry[]): void;
+        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;
+        requestUpdate(): void;
+        getAttribute(name: string): string;
+        hasAttribute(attributeName: String): boolean;
+    };
+} & (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface) & typeof LitElement;
+/**
+ * ###Fetch charge un contenu via un appel d'api web.
+ * * On indique notamment la route de l'api avec l'attribut endpoint dans la balise du composant.
+ * * Si l'attribut endpoint n'est pas disponible le composant utilise la valeur de dataProvider "ancêtre" le plus proche.
+ * * Les propriétés réactives de tout composants étendant [subscriber](./?path=/docs/miscallenous-🔔-subscriber--page) avec le même dataProvider seront renseignées avec les propriétés de l'objet chargé via l'api.
+ * * L'affichage du loader peut être désactivé en ajoutant l'attribut *noLoader* à la balise du composant.
+ */
+export declare class Fetch extends Fetch_base {
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};

package/core/components/functional/fetch/fetch.js

@@ -0,0 +1,38 @@
+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 { css, html, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
+import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
+import Fetcher from "@supersoniks/concorde/core/mixins/Fetcher";
+/**
+ * ###Fetch charge un contenu via un appel d'api web.
+ * * On indique notamment la route de l'api avec l'attribut endpoint dans la balise du composant.
+ * * Si l'attribut endpoint n'est pas disponible le composant utilise la valeur de dataProvider "ancêtre" le plus proche.
+ * * Les propriétés réactives de tout composants étendant [subscriber](./?path=/docs/miscallenous-🔔-subscriber--page) avec le même dataProvider seront renseignées avec les propriétés de l'objet chargé via l'api.
+ * * L'affichage du loader peut être désactivé en ajoutant l'attribut *noLoader* à la balise du composant.
+ */
+let Fetch = class Fetch extends Fetcher(Subscriber(LitElement)) {
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+Fetch.styles = [
+    css `
+      :host {
+        display: contents;
+      }
+    `,
+];
+Fetch = __decorate([
+    customElement("sonic-fetch")
+], Fetch);
+export { Fetch };
+//Ajout pour custom-elements-manifesy pour storybook notamment
+try {
+    customElements.define("sonic-fetch", Fetch);
+}
+catch (e) { }

package/core/components/functional/functional.d.ts

@@ -0,0 +1,11 @@
+import "./date/date";
+import "./fetch/fetch";
+import "./if/if";
+import "./list/list";
+import "./queue/queue";
+import "./subscriber/subscriber";
+import "./submit/submit";
+import "./router/router";
+import "./router/redirect";
+import "./states/states";
+import "./example/example";

package/core/components/functional/functional.js

@@ -0,0 +1,11 @@
+import "./date/date";
+import "./fetch/fetch";
+import "./if/if";
+import "./list/list";
+import "./queue/queue";
+import "./subscriber/subscriber";
+import "./submit/submit";
+import "./router/router";
+import "./router/redirect";
+import "./states/states";
+import "./example/example";

package/core/components/functional/if/if.d.ts

@@ -0,0 +1,12 @@
+import { LitElement, nothing } from "lit";
+/**
+ * Le composant *sonic-if* affiche son contenu dans le slot principal si sa propriété .condition est évaluée à true
+ */
+export declare class SonicIF extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Le contenu s'affiche si la condition est évaluée à true.
+     */
+    condition: boolean;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+}

package/core/components/functional/if/if.js

@@ -0,0 +1,43 @@
+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 { css, html, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+/**
+ * Le composant *sonic-if* affiche son contenu dans le slot principal si sa propriété .condition est évaluée à true
+ */
+let SonicIF = class SonicIF extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Le contenu s'affiche si la condition est évaluée à true.
+         */
+        this.condition = false;
+    }
+    render() {
+        if (!this.condition)
+            return nothing;
+        return html `
+      <slot></slot>
+    `;
+    }
+};
+SonicIF.styles = css `:host{
+    display:contents;
+  }
+  `;
+__decorate([
+    property({ type: Boolean })
+], SonicIF.prototype, "condition", void 0);
+SonicIF = __decorate([
+    customElement("sonic-if")
+], SonicIF);
+export { SonicIF };
+//Ajout pour custom-elements-manifesy pour storybook notamment
+try {
+    customElements.define("sonic-if", SonicIF);
+}
+catch (e) { }

package/core/components/functional/list/list.d.ts

@@ -0,0 +1,67 @@
+import { LitElement } from "lit";
+import "@supersoniks/concorde/core/components/ui/loader/loader";
+import "../subscriber/subscriber";
+declare const List_base: {
+    new (...args: any[]): {
+        api: import("../../../utils/api").default | null;
+        key: String;
+        isFirstLoad: boolean;
+        isLoading: boolean;
+        iObserver: IntersectionObserver | null;
+        isDefaultLoaderEnabled: boolean;
+        isFetchEnabled: boolean;
+        _fetchEventData(): Promise<void>;
+        disconnectedCallback(): void;
+        connectedCallback(): void;
+        firstUpdated(): void;
+        onIntersection(entries: IntersectionObserverEntry[]): void;
+        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;
+        requestUpdate(): void;
+        getAttribute(name: string): string;
+        hasAttribute(attributeName: String): boolean;
+    };
+} & (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface) & (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/TemplatesContainer").TemplatesContainerInterface) & typeof LitElement;
+/**
+ *  ### List boucle sur sa propriété "props" et crée des éléments a partir des données en bouclant également sur ses templates.
+ *
+ * * Si le composant possède un attribut *fetch* (quelque soit sa valeur), il charge un contenu via un appel d'api web comme le fait [fetch](./?path=/docs/core-components-functional-fetch--basic)
+ * Dans ce cas la proriété *key* (qui est issue du fetcher) peut être utilisé pour cibler une propriété particulière du retour de l'api.
+ *
+ *  * Chaque élément créé est englobé dans un objet [Subscriber](./?path=/docs/miscallenous-🔔-subscriber--page)
+ *  un dataProvider y est associé a l'adresse suivante *dataProvider-de-la-liste$/*index-e-la-ligne-courante*
+ *  Les éléments contenus dans le template seront donc remplis par les données si ils sont eux même des subscriber et qu'il possèdent des propriétés réactives correspondantes
+ *  * Lors du chargement un objet loader inline est affiché.
+ *  * Si le résultat de la requête n'est pas une liste, mais est un objet, alors il est imbriqué dans un tableau pour garantir le fonctionnement.
+ * On paut aussi extraire directement toutes les valeurs dans un tableau pour le rendu en ajoutant l'attribut **extractValues**
+ */
+export declare class List extends List_base {
+    static styles: import("lit").CSSResult[];
+    /**
+     * La propriété templateKey contient le nom de la propriété qui sera utilisé pour identifier le template à utiliser dans la donnée de la ligne.
+     * Par exemple si templateIdentifier = "name" et que la donnée de la ligne est {name: "myTemplate" ... }, alors le template possédant l'attribut data-value="myTemplate" sera utilisé.
+     */
+    templateKey: string;
+    /**
+     * La propriété idKey est utilisé repérer les lignes de manière unique si pour les item de la liste item[this.idKey] n'existe pas, alors l'index est utilisé
+     */
+    idKey: string;
+    connectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};