@supersoniks/concorde 1.0.7 → 1.0.8

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

@@ -0,0 +1,325 @@
+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, nothing } from "lit";
+import { customElement, property, queryAssignedElements, query } from "lit/decorators.js";
+import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
+import { animate, fadeIn, fadeOut } from "@lit-labs/motion";
+import { styleMap } from "lit/directives/style-map.js";
+import "./modal-actions";
+import "./modal-title";
+import "./modal-subtitle";
+import "./modal-content";
+import "./modal-close";
+let Modal = class Modal extends Subscriber(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.hideOnOverlayClick = true;
+        this.hideOnEscape = true;
+        this.align = "center";
+        this.padding = "var(--sc-modal-py) var(--sc-modal-px)";
+        this.maxWidth = "var(--sc-modal-max-w) ";
+        this.maxHeight = "var(--sc-modal-max-h) ";
+        this.width = "100%";
+        this.height = "auto";
+        this.fullScreen = false;
+        this.visible = false;
+    }
+    static create(options) {
+        const modal = document.createElement("sonic-modal");
+        modal.innerHTML =
+            `<sonic-modal-close></sonic-modal-close><sonic-modal-content>${options.content}</sonic-modal-content>` || "";
+        let container = document.querySelector("sonic-theme") || document.body;
+        container.appendChild(modal);
+        modal.show();
+        return modal;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+    }
+    updated() {
+        const currentModal = this;
+        document.addEventListener("keydown", this.handleEscape);
+        currentModal.closeBtn.forEach((closeBtn) => {
+            closeBtn.addEventListener("click", function () {
+                currentModal.hide();
+            }, { once: true });
+        });
+    }
+    render() {
+        if (this.visible == false)
+            return nothing;
+        this.handleFullsceen();
+        const modalStyles = {
+            padding: this.padding,
+            maxWidth: this.maxWidth,
+            maxHeight: this.maxHeight,
+            width: this.width,
+            height: this.height,
+            borderRadius: this.fullScreen ? "0" : "var(--sc-modal-rounded)",
+        };
+        const modalWrapperStyles = {
+            maxWidth: this.maxWidth,
+            maxHeight: this.maxHeight,
+            width: this.width,
+            height: this.height,
+            borderRadius: this.fullScreen ? "0" : "var(--sc-modal-rounded)",
+        };
+        return html `<div
+        class="modal-wrapper"
+        style=${styleMap(modalWrapperStyles)}
+        ${animate({
+            out: fadeOut,
+        })}
+        tabindex="0"
+      >
+        <div
+          part="modal"
+          class="modal"
+          style=${styleMap(modalStyles)}
+          ${animate({
+            keyframeOptions: {
+                duration: 400,
+                easing: `cubic-bezier(0.250, 0.250, 0.420, 1.225)`,
+            },
+            in: [{ transform: "translateY(25%) scale(1)", boxShadow: "0 0 0 rgba(0,0,0,0)", opacity: 0 }],
+            out: [{ transform: "translateY(20%) scale(1)", boxShadow: "0 0 0 rgba(0,0,0,0)", opacity: 0 }],
+        })}
+        >
+          <div class="modal-content">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+
+      <div
+        class="overlay"
+        @click="${this.hideOnOverlayClick ? this.hide : ""}"
+        ${animate({
+            keyframeOptions: {
+                duration: 500,
+            },
+            in: fadeIn,
+            out: [{ opacity: 0, pointerEvents: "none" }],
+        })}
+      ></div>`;
+    }
+    show() {
+        var _a, _b;
+        this.visible = true;
+        (_a = this.modalElement) === null || _a === void 0 ? void 0 : _a.setAttribute("tabindex", "0");
+        (_b = this.modalElement) === null || _b === void 0 ? void 0 : _b.focus();
+        this.dispatchEvent(new CustomEvent("show"));
+    }
+    hide() {
+        var _a;
+        this.visible = false;
+        (_a = this.modalElement) === null || _a === void 0 ? void 0 : _a.setAttribute("tabindex", "-1");
+        this.dispatchEvent(new CustomEvent("hide"));
+    }
+    dispose() {
+        this.hide();
+        this.remove();
+    }
+    handleEscape(e) {
+        if (e.key === "Escape") {
+            const modals = [...document.querySelectorAll("sonic-modal")];
+            modals.forEach((item) => {
+                if (this.hideOnEscape == true) {
+                    item.hide();
+                }
+            });
+        }
+    }
+    handleFullsceen() {
+        // set fullscreen
+        if (this.fullScreen) {
+            this.width = "100%";
+            this.height = "100%";
+            this.maxWidth = "none";
+            this.maxHeight = "none";
+        }
+    }
+};
+Modal.styles = [
+    css `
+      :host {
+        --sc-modal-py: 2.5rem;
+        --sc-modal-px: 1.5rem;
+        --sc-modal-content: var(--sc-base-content);
+        --sc-modal-bg: var(--sc-base);
+        --sc-modal-max-w: min(100vw, 64ch);
+        --sc-modal-max-h: 80vh;
+        --sc-modal-scrollbar-bg: var(--sc-base-300);
+        --sc-modal-rounded: var(--sc-rounded-lg);
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      .modal-wrapper {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        z-index: 990;
+        text-align: center;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        display: flex;
+        pointer-events: none;
+      }
+
+      /*SCROLLBAR*/
+      .modal-content::-webkit-scrollbar-track {
+        z-index: 20;
+        background-color: transparent;
+      }
+
+      .modal-content::-webkit-scrollbar {
+        width: 0.9rem;
+        background-color: transparent;
+      }
+
+      .modal-content::-webkit-scrollbar-thumb {
+        background-color: var(--sc-modal-scrollbar-bg);
+        border: 0.3rem solid rgba(0, 0, 0, 0);
+        background-clip: padding-box;
+        border-radius: var(--sc-modal-rounded);
+      }
+      .modal-content {
+        overflow-y: auto;
+        display: flex;
+        flex-direction: column;
+        text-align: center;
+        align-items: center;
+        min-height: 10rem;
+      }
+
+      .modal {
+        background: var(--sc-base);
+        width: 100%;
+        box-shadow: var(--sc-shadow-lg);
+        border-radius: var(--sc-modal-rounded) var(--sc-modal-rounded) 0 0;
+        pointer-events: auto;
+        overflow: hidden;
+        transform: translateZ(0);
+      }
+
+      .overlay {
+        background: var(--sc-base-200);
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 900;
+        opacity: 0.8;
+        position: fixed;
+      }
+
+      ::slotted(sonic-modal-title) {
+        margin-bottom: 1rem;
+      }
+
+      ::slotted(sonic-modal-subtitle) {
+        margin-top: -0.45rem;
+        margin-bottom: 1rem;
+      }
+
+      @media (max-width: 767.5px) {
+        .modal-wrapper,
+        .modal {
+          max-width: none !important;
+          width: 100% !important;
+        }
+      }
+
+      @media (min-width: 768px) {
+        .modal-wrapper {
+          top: 50%;
+          left: 50%;
+          bottom: auto;
+          right: auto;
+          transform: translateX(-50%) translateY(-50%);
+        }
+
+        .modal {
+          top: 50%;
+          bottom: auto;
+          right: auto;
+          border-radius: var(--sc-modal-rounded);
+        }
+      }
+
+      :host([align="left"]) .modal-content {
+        text-align: left;
+        align-items: flex-start;
+      }
+
+      :host([align="right"]) .modal-content {
+        text-align: right;
+        align-items: flex-end;
+      }
+
+      /* Border radius */
+      :host([rounded="none"]) modal {
+        --sc-img-radius: 0 !important;
+      }
+    `,
+];
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Modal.prototype, "hideOnOverlayClick", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Modal.prototype, "hideOnEscape", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Modal.prototype, "align", void 0);
+__decorate([
+    property({ type: String })
+], Modal.prototype, "padding", void 0);
+__decorate([
+    property({ type: String })
+], Modal.prototype, "maxWidth", void 0);
+__decorate([
+    property({ type: String })
+], Modal.prototype, "maxHeight", void 0);
+__decorate([
+    property({ type: String })
+], Modal.prototype, "width", void 0);
+__decorate([
+    property({ type: String })
+], Modal.prototype, "height", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Modal.prototype, "fullScreen", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Modal.prototype, "visible", void 0);
+__decorate([
+    query(".modal-wrapper")
+], Modal.prototype, "modalWrapper", void 0);
+__decorate([
+    query(".modal")
+], Modal.prototype, "modalElement", void 0);
+__decorate([
+    queryAssignedElements({ selector: "sonic-modal-close" })
+], Modal.prototype, "closeBtn", void 0);
+Modal = __decorate([
+    customElement("sonic-modal")
+], Modal);
+export { Modal };
+if (typeof window !== "undefined") {
+    let win = window;
+    win.SonicModal = Modal;
+}
+try {
+    customElements.define("sonic-modal", Modal);
+}
+catch (e) { }

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

@@ -0,0 +1,28 @@
+import { LitElement } from "lit";
+declare type PopPlacement = "bottom" | "top" | "right" | "left";
+export declare class Pop extends LitElement {
+    static pops: Set<Pop>;
+    static styles: import("lit").CSSResult[];
+    open: boolean;
+    popBtn: HTMLElement;
+    popContent: HTMLElement;
+    toggle: "true" | "false";
+    /**
+     * Ombre
+     */
+    shadow: "" | "none" | "sm" | "md" | "lg";
+    placement: PopPlacement;
+    positioningRuns: boolean;
+    lastContentX: number;
+    lastContentY: number;
+    runPositioning(): void;
+    _toggle(e: any): void;
+    _show(): void;
+    _hide(): void;
+    _handleClosePop(e: Event): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    _setUpMenu(placement: PopPlacement): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};

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

@@ -0,0 +1,223 @@
+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;
+};
+var Pop_1;
+import { html, LitElement, css } from "lit";
+import { customElement, query, state, property } from "lit/decorators.js";
+import HTML from "@supersoniks/concorde/core/utils/HTML";
+let Pop = Pop_1 = class Pop extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.open = false;
+        this.toggle = "true";
+        /**
+         * Ombre
+         */
+        this.shadow = "lg";
+        this.placement = "bottom";
+        this.positioningRuns = false;
+        this.lastContentX = Number.NaN;
+        this.lastContentY = Number.NaN;
+    }
+    runPositioning() {
+        if (!this.positioningRuns)
+            return;
+        this.positioningRuns = true;
+        this._setUpMenu(this.placement);
+        window.requestAnimationFrame(() => this.runPositioning());
+    }
+    _toggle(e) {
+        if (this.open && this.toggle == "false")
+            return;
+        if (e.type == "keydown" && (e.key != "ArrowDown" || this.open))
+            return;
+        this.open = !this.open;
+        this.open ? this._show() : this._hide();
+    }
+    _show() {
+        this.open = true;
+        this.popContent.setAttribute("tabindex", "0");
+        if (this.popBtn && this.popContent && !this.positioningRuns) {
+            this.positioningRuns = true;
+            this.lastContentX = Number.NaN;
+            this.lastContentY = Number.NaN;
+            this.runPositioning();
+        }
+    }
+    _hide() {
+        this.open = false;
+        this.popContent.setAttribute("tabindex", "-1");
+        this.positioningRuns = false;
+    }
+    _handleClosePop(e) {
+        let target = e.target;
+        Pop_1.pops.forEach((pop) => {
+            var _a;
+            const popContainsTarget = pop.contains(target);
+            const popContentContainsTarget = (_a = pop.querySelector('[slot="content"]')) === null || _a === void 0 ? void 0 : _a.contains(target);
+            const isCloseManual = HTML.getAncestorAttributeValue(target, "data-on-select") === "keep";
+            if (e.type == "pointerdown" && popContainsTarget)
+                return;
+            if (e.type == "click" && ((popContainsTarget && isCloseManual) || !popContentContainsTarget))
+                return;
+            pop._hide();
+        });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (Pop_1.pops.size == 0) {
+            document.addEventListener("pointerdown", this._handleClosePop);
+            document.addEventListener("click", this._handleClosePop);
+        }
+        Pop_1.pops.add(this);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        Pop_1.pops.delete(this);
+        if (Pop_1.pops.size == 0) {
+            document.removeEventListener("pointerdown", this._handleClosePop);
+            document.removeEventListener("click", this._handleClosePop);
+        }
+    }
+    _setUpMenu(placement) {
+        var _a;
+        const contentRect = (_a = this.popContent) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        const padding = 8;
+        const shiftPadding = 20;
+        const thisRect = this.getBoundingClientRect();
+        if (!this.offsetParent)
+            return;
+        let bodyRect = this.offsetParent.getBoundingClientRect();
+        let x0 = thisRect.left - bodyRect.left;
+        let y0 = thisRect.top - bodyRect.top;
+        let x = x0, y = y0;
+        let yTop = y0 - contentRect.height - padding;
+        let xLeft = x0 - contentRect.width - 2 * padding;
+        let xRight = x0 + thisRect.width + 2 * padding;
+        let yBottom = y0 + thisRect.height + padding;
+        switch (placement) {
+            case "bottom":
+                y = yBottom;
+                break;
+            case "top":
+                y = yTop;
+                break;
+            case "left":
+                x = xLeft;
+                break;
+            case "right":
+                x = xRight;
+                break;
+        }
+        let dxRight = window.innerWidth - xRight - bodyRect.left - contentRect.width - shiftPadding;
+        if (dxRight < 0 && placement === "right")
+            x = xLeft;
+        if (dxRight < 0 && ["top", "bottom"].includes(placement))
+            x = Math.max(x + dxRight, xLeft + thisRect.width);
+        let dxLeft = -bodyRect.left - xLeft;
+        if (dxLeft > shiftPadding && placement === "left")
+            x = xRight;
+        let dyBottom = window.innerHeight - yBottom - bodyRect.top - contentRect.height - shiftPadding;
+        if (dyBottom < 0 && placement === "bottom")
+            y = yTop;
+        if (dyBottom < 0 && ["left", "right"].includes(placement))
+            y = Math.max(y + dyBottom, yTop + thisRect.height);
+        let dyTop = -bodyRect.top - yTop;
+        if (dyTop > -shiftPadding && placement === "top")
+            y = yBottom;
+        this.lastContentX = x;
+        this.lastContentY = y;
+        Object.assign(this.popContent.style, {
+            left: `${x}px`,
+            top: `${y}px`,
+        });
+    }
+    render() {
+        return html `
+      <slot @click=${this._toggle} @keydown=${this._toggle} class="contents"></slot>
+      <slot
+        name="content"
+        tabindex="-1"
+        part="content"
+        class="  
+          ${this.open ? "is-open" : ""}"
+      ></slot>
+    `;
+    }
+};
+Pop.pops = new Set();
+Pop.styles = [
+    css `
+      :host {
+        display: inline-block;
+        vertical-align: middle;
+      }
+      slot[name="content"] {
+        background-color: var(--sc-base);
+        position: absolute;
+        z-index: 50;
+        display: block;
+        transform: translateY(1rem) scale(0.95);
+        opacity: 0;
+        pointer-events: none;
+        transition: 0.2s ease;
+        border-radius: min(calc(var(--sc-btn-rounded) * 2), 0.4em);
+      }
+
+      slot[name="content"].is-open {
+        transform: translateY(0) scale(1);
+        opacity: 1;
+        pointer-events: auto;
+        transition: 0.2s cubic-bezier(0.25, 0.25, 0.42, 1.225);
+      }
+
+      /*OMBRE*/
+      :host([shadow]) slot[name="content"],
+      :host([shadow="md"]) slot[name="content"],
+      :host([shadow="true"]) slot[name="content"] {
+        box-shadow: var(--sc-shadow);
+      }
+
+      :host([shadow="sm"]) slot[name="content"] {
+        box-shadow: var(--sc-shadow-sm);
+      }
+
+      :host([shadow="none"]) slot[name="content"] {
+        box-shadow: none;
+      }
+
+      :host([shadow="lg"]) slot[name="content"] {
+        box-shadow: var(--sc-shadow-lg);
+      }
+    `,
+];
+__decorate([
+    state()
+], Pop.prototype, "open", void 0);
+__decorate([
+    query("slot:not([name=content])")
+], Pop.prototype, "popBtn", void 0);
+__decorate([
+    query("slot[name=content]")
+], Pop.prototype, "popContent", void 0);
+__decorate([
+    property({ type: String })
+], Pop.prototype, "toggle", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Pop.prototype, "shadow", void 0);
+__decorate([
+    property({ type: String })
+], Pop.prototype, "placement", void 0);
+Pop = Pop_1 = __decorate([
+    customElement("sonic-pop")
+], Pop);
+export { Pop };
+//Ajout pour la creation du cem notamment pour Storybook
+try {
+    customElements.define("sonic-pop", Pop);
+}
+catch (e) { }

package/core/components/ui/tabs/tab.d.ts

@@ -0,0 +1,6 @@
+import { Button } from "../button/button";
+export declare class Tab extends Button {
+    static styles: (import("lit").CSSResult | import("lit").CSSResultGroup[])[];
+    constructor();
+    connectedCallback(): void;
+}

package/core/components/ui/tabs/tab.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 { css } from "lit";
+import { customElement } from "lit/decorators.js";
+import { Button } from "../button/button";
+let Tab = class Tab extends Button {
+    constructor() {
+        super();
+    }
+    connectedCallback() {
+        if (!this.hasAttribute("variant")) {
+            this.variant = "ghost";
+        }
+        super.connectedCallback();
+    }
+};
+Tab.styles = [
+    Button.styles,
+    css `
+      :host {
+        --sc-tab-white-space : nowrap;
+        --sc-tab-flex-wrap : nowrap ;
+        flex-wrap:nowrap;
+        scroll-snap-align: start;
+      }
+
+      button {
+        flex-wrap:var(--sc-tab-flex-wrap) !important;
+        white-space:var(--sc-tab-white-space);
+      }
+
+    `,
+];
+Tab = __decorate([
+    customElement("sonic-tab")
+], Tab);
+export { Tab };
+//Ajout pour Storybook
+try {
+    customElements.define("sonic-tab", Tab);
+}
+catch (e) { }

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

@@ -0,0 +1,14 @@
+import { LitElement, PropertyValues } from "lit";
+import { ResizeController } from "@lit-labs/observers/resize_controller.js";
+export declare class Tabs extends LitElement {
+    static styles: import("lit").CSSResult[];
+    size: "md" | "xs" | "sm" | "lg";
+    direction: "" | "row" | "column";
+    icon: boolean;
+    menu: HTMLElement;
+    _resizeController: ResizeController;
+    updated(_changedProperties: PropertyValues): void;
+    firstUpdated(): void;
+    _setChildrenSize(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}