@supersoniks/concorde 1.0.5 → 1.0.8

package/core/components/ui/menu/menu.js

@@ -0,0 +1,125 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement, css } from "lit";
+import { styleMap } from "lit/directives/style-map.js";
+import { customElement, property, queryAssignedElements, queryAssignedNodes } from "lit/decorators.js";
+let MenuItems = class MenuItems extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Taille du composant, peut avoir un effet sur ses composants enfants
+         * tels que les dividers / boutons,... qui n'auraient pas d'attribut size précisés.
+         */
+        this.size = "";
+        /**
+         * Direction // todo
+         */
+        this.direction = "column";
+        /**
+         * Ombre
+         */
+        this.shadow = "none";
+        /**
+         * Propriété min-width du bouton
+         */
+        this.minWidth = "0";
+    }
+    // connectedCallback(): void {
+    //   super.connectedCallback();
+    // }
+    updated(_changedProperties) {
+        super.updated(_changedProperties);
+        this._setChildrenSize();
+    }
+    _setChildrenSize() {
+        if (this.size) {
+            const children = this.querySelectorAll("sonic-button, sonic-menu-item");
+            children.forEach((elt) => {
+                if (!elt.hasAttribute("size")) {
+                    elt.setAttribute("size", this.size);
+                }
+            });
+        }
+        const children = this.querySelectorAll("sonic-divider");
+        children.forEach((elt) => {
+            if (!elt.hasAttribute("size")) {
+                elt.setAttribute("size", "xs");
+            }
+        });
+        // const isSmall = ["sm", "xs"].some((value) => {
+        //   return value === this.size;
+        // });
+        // console.log(isSmall);
+    }
+    render() {
+        const menuStyles = {
+            minWidth: this.minWidth,
+        };
+        return html `<menu part="menu" style=${styleMap(menuStyles)}> <slot></slot></menu>`;
+    }
+};
+MenuItems.styles = [
+    css `
+      :host {
+        display: block;
+      }
+      :host > menu {
+        display: flex;
+        flex-direction: column;
+        border-radius: min(calc(var(--sc-btn-rounded) * 2), 0.4em);
+        margin: 0;
+        padding: 0.35em;
+        gap: 0.15rem;
+      }
+
+      /*OMBRE*/
+      :host([shadow]) > :not(slot),
+      :host([shadow="md"]) > :not(slot),
+      :host([shadow="true"]) > :not(slot) {
+        box-shadow: var(--sc-shadow);
+      }
+
+      :host([shadow="sm"]) > :not(slot) {
+        box-shadow: var(--sc-shadow-sm);
+      }
+
+      :host([shadow="none"]) > :not(slot) {
+        box-shadow: none;
+      }
+
+      :host([shadow="lg"]) > :not(slot) {
+        box-shadow: var(--sc-shadow-lg);
+      }
+    `,
+];
+__decorate([
+    property({ type: String, reflect: true })
+], MenuItems.prototype, "size", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], MenuItems.prototype, "direction", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], MenuItems.prototype, "shadow", void 0);
+__decorate([
+    property({ type: String })
+], MenuItems.prototype, "minWidth", void 0);
+__decorate([
+    queryAssignedElements({ slot: "main", selector: "*" })
+], MenuItems.prototype, "menuChildren", void 0);
+__decorate([
+    queryAssignedNodes({ slot: "main", flatten: true })
+], MenuItems.prototype, "menuNodes", void 0);
+MenuItems = __decorate([
+    customElement("sonic-menu")
+], MenuItems);
+export { MenuItems };
+//Ajout pour la creation du cem notamment pour Storybook
+try {
+    customElements.define("sonic-menu", MenuItems);
+}
+catch (e) { }

package/core/components/ui/modal/modal-actions.d.ts

@@ -0,0 +1,7 @@
+import { LitElement } from "lit";
+export declare class ModalActions extends LitElement {
+    static styles: import("lit").CSSResult[];
+    buttons: Array<HTMLElement>;
+    firstUpdated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/core/components/ui/modal/modal-actions.js

@@ -0,0 +1,46 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement, css } from "lit";
+import { customElement, queryAssignedElements } from "lit/decorators.js";
+let ModalActions = class ModalActions extends LitElement {
+    firstUpdated() {
+        var _a;
+        (_a = this.buttons) === null || _a === void 0 ? void 0 : _a.forEach((btn) => {
+            btn.addEventListener("click", () => {
+                if (btn.getAttribute("hideModal") != "false") {
+                    const parentModal = this.closest("sonic-modal");
+                    parentModal === null || parentModal === void 0 ? void 0 : parentModal.hide();
+                }
+            });
+        });
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+ModalActions.styles = [
+    css `
+      :host {
+        display: flex;
+        gap: 0.5rem;
+        margin-top: auto;
+        padding-top: 1rem;
+      }
+    `,
+];
+__decorate([
+    queryAssignedElements({ selector: "sonic-button" })
+], ModalActions.prototype, "buttons", void 0);
+ModalActions = __decorate([
+    customElement("sonic-modal-actions")
+], ModalActions);
+export { ModalActions };
+//Ajout pour Storybook
+try {
+    customElements.define("sonic-modal-actions", ModalActions);
+}
+catch (e) { }

package/core/components/ui/modal/modal-close.d.ts

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

package/core/components/ui/modal/modal-close.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 { html, LitElement, css } from "lit";
+import { customElement } from "lit/decorators.js";
+let ModalClose = class ModalClose extends LitElement {
+    render() {
+        return html `<sonic-button shape="circle" variant="ghost" @click=${this.handleClick}
+      ><sonic-icon prefix="iconoir" name="cancel" size="lg"></sonic-icon
+    ></sonic-button>`;
+    }
+    handleClick() {
+        const parentModal = this.closest("sonic-modal");
+        parentModal.hide();
+    }
+};
+ModalClose.styles = [
+    css `
+      :host {
+        position: absolute;
+        right: 0.6rem;
+        top: 0.6rem;
+        z-index: 20;
+      }
+    `,
+];
+ModalClose = __decorate([
+    customElement("sonic-modal-close")
+], ModalClose);
+export { ModalClose };
+//Ajout pour Storybook
+try {
+    customElements.define("sonic-modal-close", ModalClose);
+}
+catch (e) { }

package/core/components/ui/modal/modal-content.d.ts

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

package/core/components/ui/modal/modal-content.js

@@ -0,0 +1,29 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement, css } from "lit";
+import { customElement } from "lit/decorators.js";
+let ModalContent = class ModalContent extends LitElement {
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+ModalContent.styles = [
+    css `
+      :host {
+        display: block;
+      }
+    `,
+];
+ModalContent = __decorate([
+    customElement("sonic-modal-content")
+], ModalContent);
+export { ModalContent };
+//Ajout pour Storybook
+try {
+    customElements.define("sonic-modal-content", ModalContent);
+}
+catch (e) { }

package/core/components/ui/modal/modal-subtitle.d.ts

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

package/core/components/ui/modal/modal-subtitle.js

@@ -0,0 +1,33 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement, css } from "lit";
+import { customElement } from "lit/decorators.js";
+let ModalSubTitle = class ModalSubTitle extends LitElement {
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+ModalSubTitle.styles = [
+    css `
+      :host {
+        font-size: 1.1rem;
+        display: block;
+        text-transform: uppercase;
+        line-height: var(--sc-headings-line-height);
+        font-family: var(--sc-headings-font-family);
+      }
+    `,
+];
+ModalSubTitle = __decorate([
+    customElement("sonic-modal-subtitle")
+], ModalSubTitle);
+export { ModalSubTitle };
+//Ajout pour Storybook
+try {
+    customElements.define("sonic-modal-subtitle", ModalSubTitle);
+}
+catch (e) { }

package/core/components/ui/modal/modal-title.d.ts

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

package/core/components/ui/modal/modal-title.js

@@ -0,0 +1,33 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement, css } from "lit";
+import { customElement } from "lit/decorators.js";
+let ModalTitle = class ModalTitle extends LitElement {
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+ModalTitle.styles = [
+    css `
+      :host {
+        font-weight: bold;
+        font-size: 1.5rem;
+        display: block;
+        line-height: var(--sc-headings-line-height);
+        font-family: var(--sc-headings-font-family);
+      }
+    `,
+];
+ModalTitle = __decorate([
+    customElement("sonic-modal-title")
+], ModalTitle);
+export { ModalTitle };
+//Ajout pour Storybook
+try {
+    customElements.define("sonic-modal-title", ModalTitle);
+}
+catch (e) { }

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

@@ -0,0 +1,36 @@
+import { LitElement, nothing } from "lit";
+import "./modal-actions";
+import "./modal-title";
+import "./modal-subtitle";
+import "./modal-content";
+import "./modal-close";
+declare type ModalCreateOptions = {
+    content?: string;
+};
+declare const Modal_base: (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface) & typeof LitElement;
+export declare class Modal extends Modal_base {
+    static styles: import("lit").CSSResult[];
+    hideOnOverlayClick: boolean;
+    hideOnEscape: boolean;
+    align: "center" | "right" | "left";
+    padding: string;
+    maxWidth: string;
+    maxHeight: string;
+    width: string;
+    height: string;
+    fullScreen: boolean;
+    visible: boolean;
+    modalWrapper: HTMLDivElement;
+    modalElement: HTMLDivElement;
+    closeBtn: Array<HTMLElement>;
+    static create(options: ModalCreateOptions): Modal;
+    connectedCallback(): void;
+    updated(): void;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+    show(): void;
+    hide(): void;
+    dispose(): void;
+    handleEscape(e: KeyboardEvent): void;
+    handleFullsceen(): void;
+}
+export {};