@supersoniks/concorde 1.0.7 → 1.1.1

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

@@ -0,0 +1,14 @@
+import { LitElement } from "lit";
+export declare class Image extends LitElement {
+    static styles: import("lit").CSSResult[];
+    rounded: "" | "none" | "full" | "sm" | "md" | "lg";
+    src: string;
+    alt: string;
+    loading: "eager" | "lazy";
+    ratio: string;
+    objectPosition: string;
+    imageRendering: string;
+    shadow: "" | "none" | "sm" | "md";
+    cover: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,152 @@
+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, property } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+let Image = class Image extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.rounded = "none";
+        this.src = "";
+        this.alt = "";
+        this.loading = "lazy";
+        this.ratio = "auto";
+        this.objectPosition = "center center";
+        this.imageRendering = "auto";
+        this.shadow = "none";
+        this.cover = false;
+    }
+    render() {
+        const imgStyles = {
+            aspectRatio: this.cover ? "auto" : this.ratio,
+            imageRendering: this.imageRendering,
+            objectPosition: this.objectPosition,
+        };
+        return html `<div part="image">
+      <picture part="picture"
+        ><img part="img" src="${this.src}" loading="${this.loading}" alt="${this.alt}" style=${styleMap(imgStyles)}
+      /></picture>
+    </div>`;
+    }
+};
+Image.styles = [
+    css `
+      :host {
+        --sc-img-radius: 0;
+        --sc-img-bg: var(--sc-placeholder-bg);
+        border-radius: var(--sc-img-radius);
+        display: block;
+        width: 100%;
+        background: var(--sc-img-bg);
+      }
+
+      img {
+        width: 100%;
+        vertical-align: middle;
+        object-fit: cover;
+      }
+
+      img[src=""] {
+        visibility: hidden;
+      }
+
+      /*Rounded*/
+      :host([rounded]) {
+        --sc-img-radius: var(--sc-rounded);
+        overflow: hidden;
+      }
+      :host([rounded="sm"]) {
+        --sc-img-radius: var(--sc-rounded-sm);
+      }
+
+      :host([rounded="md"]) {
+        --sc-img-radius: var(--sc-rounded-md);
+      }
+
+      :host([rounded="lg"]) {
+        --sc-img-radius: var(--sc-rounded-lg);
+      }
+      :host([rounded="xl"]) {
+        --sc-img-radius: var(--sc-rounded-xl);
+      }
+
+      /*Cercle*/
+      :host([rounded="full"]) {
+        --sc-img-radius: 50% !important;
+      }
+      :host([rounded="none"]) {
+        --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 {
+        position: absolute !important;
+        left: 0 !important;
+        top: 0 !important;
+        right: 0 !important;
+        bottom: 0 !important;
+        height: 100% !important;
+        width: 100% !important;
+      }
+    `,
+];
+__decorate([
+    property({ type: String })
+], Image.prototype, "rounded", void 0);
+__decorate([
+    property({ type: String })
+], Image.prototype, "src", void 0);
+__decorate([
+    property({ type: String })
+], Image.prototype, "alt", void 0);
+__decorate([
+    property({ type: String })
+], Image.prototype, "loading", void 0);
+__decorate([
+    property({ type: String })
+], Image.prototype, "ratio", void 0);
+__decorate([
+    property({ type: String })
+], Image.prototype, "objectPosition", void 0);
+__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);
+Image = __decorate([
+    customElement("sonic-image")
+], Image);
+export { Image };
+//Ajout pour la creation du cem notamment pour Storybook
+try {
+    customElements.define("sonic-image", Image);
+}
+catch (e) { }

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

@@ -0,0 +1,16 @@
+import { LitElement } from "lit";
+export declare class Link extends LitElement {
+    static styles: import("lit").CSSResult[];
+    href: string;
+    private _location;
+    get location(): string;
+    set location(value: string);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Si présent on passe en mode pushstate
+     */
+    pushState: null;
+    handlePushState(e: Event): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/core/components/ui/link/link.js

@@ -0,0 +1,70 @@
+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 LocationHandler from "@supersoniks/concorde/core/utils/LocationHandler";
+import { html, LitElement, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+let Link = class Link extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.href = "";
+        this._location = "";
+        /**
+         * Si présent on passe en mode pushstate
+         */
+        this.pushState = null;
+    }
+    get location() {
+        return this._location;
+    }
+    set location(value) {
+        this._location = value;
+        LocationHandler.updateComponentActiveState(this);
+    }
+    connectedCallback() {
+        if (this.href && this.href.indexOf("http") != 0) {
+            LocationHandler.onChange(this);
+            this.location = document.location.href.replace(document.location.origin, "");
+        }
+        super.connectedCallback();
+    }
+    disconnectedCallback() {
+        LocationHandler.offChange(this);
+        super.disconnectedCallback();
+    }
+    handlePushState(e) {
+        e.preventDefault();
+        LocationHandler.changeFromComponent(this);
+    }
+    render() {
+        if (!this.href)
+            return html `<slot></slot>`;
+        return html `
+      <a href="${this.href}" @click=${this.pushState ? this.handlePushState : null}>
+        <slot></slot>
+      </a>
+    `;
+    }
+};
+Link.styles = [
+    css `
+      a {
+        color: inherit;
+        text-decoration: none;
+        display:contents;
+      }
+    `,
+];
+__decorate([
+    property({ type: String })
+], Link.prototype, "href", void 0);
+__decorate([
+    property({ type: Boolean })
+], Link.prototype, "pushState", void 0);
+Link = __decorate([
+    customElement("sonic-link")
+], Link);
+export { Link };

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

@@ -0,0 +1,20 @@
+import { LitElement } from "lit";
+declare type LoaderConf = {
+    mode?: string;
+    container?: HTMLElement;
+};
+export declare class Loader extends LitElement {
+    static styles: import("lit").CSSResult[];
+    static loader: Loader;
+    static callCounter: number;
+    static show(conf?: LoaderConf): void;
+    static hide(): void;
+    /**
+     * Mode d'affichage du loader
+     * * inline : Loader dans le contenu
+     * * fixed : Loader global par dessus la page
+     */
+    mode: "inline" | "fixed";
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};

package/core/components/ui/loader/loader.js

@@ -0,0 +1,94 @@
+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 Loader_1;
+import { html, LitElement, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { inline } from "./styles/inline";
+import { fixed } from "./styles/fixed";
+let Loader = Loader_1 = class Loader extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Mode d'affichage du loader
+         * * inline : Loader dans le contenu
+         * * fixed : Loader global par dessus la page
+         */
+        this.mode = "fixed";
+    }
+    static show(conf) {
+        if (!Loader_1.loader)
+            Loader_1.loader = document.createElement("sonic-loader");
+        let loader = Loader_1.loader;
+        if (!conf)
+            conf = {};
+        let v = conf;
+        for (let z in v)
+            loader.setAttribute(z, v[z]);
+        if (!conf.container) {
+            conf.container = document.querySelector("sonic-theme") || document.body;
+            conf.mode = "fixed";
+        }
+        conf.container.appendChild(loader);
+        Loader_1.callCounter++;
+    }
+    static hide() {
+        Loader_1.callCounter--;
+        if (Loader_1.callCounter > 0)
+            return;
+        if (Loader_1.loader)
+            Loader_1.loader.remove();
+    }
+    render() {
+        return html `<div class="sonic-loader sonic-loader--${this.mode} ">
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>`;
+    }
+};
+Loader.styles = [
+    inline,
+    fixed,
+    css `
+      :host {
+        --sc-loader-bg: var(--sc-primary, currentColor);
+        pointer-events: none;
+      }
+
+      .sonic-loader {
+        opacity: 0;
+        animation: showLoader 0.5s 0.5s forwards;
+      }
+      .sonic-loader--inline {
+        animation-delay: 0s;
+      }
+
+      @keyframes showLoader {
+        0% {
+          opacity: 0;
+        }
+
+        100% {
+          opacity: 1;
+        }
+      }
+    `,
+];
+Loader.callCounter = 0;
+__decorate([
+    property({ type: String })
+], Loader.prototype, "mode", void 0);
+Loader = Loader_1 = __decorate([
+    customElement("sonic-loader")
+], Loader);
+export { Loader };
+//Ajout pour la creation du cem notamment pour Storybook
+try {
+    customElements.define("sonic-loader", Loader);
+}
+catch (e) { }

package/core/components/ui/loader/styles/fixed.js

@@ -0,0 +1,57 @@
+import { css } from "lit";
+export const fixed = css `
+
+  @keyframes sonic-loader--fixed {
+    0% {
+      transform: scale(0);
+      opacity: 0;
+    }
+    5% {
+      opacity: 1;
+    }
+    70% {
+      opacity:90%;
+    }
+    100% {
+      transform: scale(1);
+      opacity: 0;
+    }
+  }
+
+  .sonic-loader--fixed {
+    position: fixed;
+    top:50%;
+    left:50%;
+    transform:transateY(-50%) translateX(-50%);
+    z-index:999;
+  }
+  
+  .sonic-loader--fixed > div:nth-child(2) {
+    animation-delay: -0.5s;
+  }
+  .sonic-loader--fixed > div:nth-child(3) {
+    animation-delay: -0.2s;
+  }
+
+  .sonic-loader--fixed > div:nth-child(4) {
+    display:none !important;
+  }
+  .sonic-loader--fixed > div {
+    background-color: var(--sc-loader-bg);
+    width: 5rem;
+    height: 5rem;
+    border-radius: 100%;
+    margin: 2px;
+    animation-fill-mode: both;
+    position: absolute;
+    top: 0px;
+    opacity: 0;
+    margin: 0;
+    top: -2.5rem;
+    left: -2.5rem;
+    width: 5rem;
+    height: 5rem;
+    animation: sonic-loader--fixed 1s 0s linear infinite;
+  }
+  
+`;

package/core/components/ui/loader/styles/inline.js

@@ -0,0 +1,71 @@
+import { css } from "lit";
+export const inline = css `
+
+  :host([align="left"]) .sonic-loader--inline {
+    margin-left:0;
+  }
+  
+  :host([align="right"]) .sonic-loader--inline {
+    margin-left:auto;
+    margin-right:0;
+  }
+  .sonic-loader--inline {
+    display:block;
+    position: relative;
+    width: 80px;
+    height: 80px;
+    margin:auto;
+    z-index:20;
+  }
+  .sonic-loader--inline  div {
+    position: absolute;
+    top: 33px;
+    width: 13px;
+    height: 13px;
+    border-radius: 50%;
+    background:var(--sc-loader-bg);
+    animation-timing-function: cubic-bezier(0, 1, 1, 0);
+  }
+  .sonic-loader--inline  div:nth-child(1) {
+    left: 8px;
+    animation: lds-ellipsis1 0.6s infinite;
+  }
+  .sonic-loader--inline  div:nth-child(2) {
+    left: 8px;
+    animation: lds-ellipsis2 0.6s infinite;
+  }
+  .sonic-loader--inline  div:nth-child(3) {
+    left: 32px;
+    animation: lds-ellipsis2 0.6s infinite;
+  }
+  .sonic-loader--inline div:nth-child(4) {
+    left: 56px;
+    animation: lds-ellipsis3 0.6s infinite;
+  }
+
+  @keyframes lds-ellipsis1 {
+    0% {
+      transform: scale(0);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
+  @keyframes lds-ellipsis3 {
+    0% {
+      transform: scale(1);
+    }
+    100% {
+      transform: scale(0);
+    }
+  }
+  @keyframes lds-ellipsis2 {
+    0% {
+      transform: translate(0, 0);
+    }
+    100% {
+      transform: translate(24px, 0);
+    }
+  }
+
+`;

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

@@ -0,0 +1,5 @@
+import { Button } from "../button/button";
+export declare class MenuItem extends Button {
+    constructor();
+    connectedCallback(): void;
+}

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

@@ -0,0 +1,37 @@
+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 { customElement } from "lit/decorators.js";
+import { Button } from "../button/button";
+let MenuItem = class MenuItem extends Button {
+    constructor() {
+        super();
+    }
+    connectedCallback() {
+        if (!this.hasAttribute('variant')) {
+            this.variant = "ghost";
+        }
+        if (!this.hasAttribute('type')) {
+            this.type = "primary";
+        }
+        if (!this.hasAttribute('shape')) {
+            this.shape = "block";
+        }
+        if (!this.hasAttribute('textAlign')) {
+            this.textAlign = "left";
+        }
+        super.connectedCallback();
+    }
+};
+MenuItem = __decorate([
+    customElement("sonic-menu-item")
+], MenuItem);
+export { MenuItem };
+//Ajout pour Storybook
+try {
+    customElements.define("sonic-menu-item", MenuItem);
+}
+catch (e) { }

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

@@ -0,0 +1,26 @@
+import { LitElement, PropertyValues } from "lit";
+export declare class MenuItems extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * 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.
+     */
+    size: "" | "xs" | "sm" | "lg";
+    /**
+     * Direction // todo
+     */
+    direction: "" | "row" | "column";
+    /**
+     * Ombre
+     */
+    shadow: "" | "none" | "sm" | "md";
+    /**
+     * Propriété min-width du bouton
+     */
+    minWidth: string;
+    menuChildren: Array<HTMLElement>;
+    menuNodes: Array<Node>;
+    updated(_changedProperties: PropertyValues): void;
+    _setChildrenSize(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}