@supersoniks/concorde 1.0.7 → 1.0.8

package/core/components/ui/button/button.js

@@ -0,0 +1,558 @@
+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, queryAssignedElements, state } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+import FormElement from "@supersoniks/concorde/core/mixins/FormElement";
+import FormCheckable from "@supersoniks/concorde/core/mixins/FormCheckable";
+import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
+/**
+ * Un bouton simple avec deux slots, un nommé préfix et un nomé suffix de manière à pouvoir mettre (par exemple) une icone avant ou après le contenu.
+ * * L'objet et ses slot sont en display flex avec direction / alignement et justifications configurables
+ * * Le bouton est comparable au badge car il possèdent tous les deux les propriétés *type* (primary...), *variant*(outline, ghost), size(xs...)...
+ * * Le bouton possède cependant et notamment une propriété href contrairement à un badge
+ */
+let Button = class Button extends FormCheckable(FormElement(Subscriber(LitElement))) {
+    constructor() {
+        super(...arguments);
+        /**
+         * Le type change surtout la couleur composant
+         */
+        this.type = "default";
+        /**
+         * Le composant par defaut sans se paramètre à forte affordance
+         * * gost : composant super léger visuellement
+         * * outline : composant légé avec une bordure
+         */
+        this.variant = "default";
+        /**
+         * Taille du composant, implique notamment des modifications de typo et de marge interne
+         */
+        this.size = "md";
+        /**
+         * Forme du bouton, permet de le forcer en carré ou cercle
+         */
+        this.shape = "default";
+        /**
+         * Propriété de direction *flex* appliquée à l'élément contenant les *slots*
+         */
+        this.direction = "row";
+        /**
+         * Propriété align-items de *flex* appliquée à l'élément contenant les *slots*
+         */
+        this.align = "center";
+        /**
+         * Propriété justify-content de *flex* appliquée à l'élément contenant les *slots*
+         */
+        this.justify = "center";
+        /**
+         * Propriété text-align du bouton
+         */
+        this.textAlign = "center";
+        /**
+         * Propriété min-width du bouton
+         */
+        this.minWidth = "0";
+        /**
+         * Laisse apparaitre un loader en remplacement du contenu du bouton.
+         * Désactive également le clic sur le bouton
+         */
+        this.loading = false;
+        this.hasPrefix = false;
+        this.hasSuffix = false;
+        /**
+         * L'url
+         */
+        this._href = "";
+        /**
+         * Si présent on passe en mode pushstate
+         */
+        this.pushState = null;
+        this.active = false;
+        this._location = "";
+    }
+    set href(value) {
+        this._href = value;
+        if (this.href && this.href.indexOf("http") != 0) {
+            LocationHandler.onChange(this);
+            this.location = document.location.href.replace(document.location.origin, "");
+        }
+        else
+            LocationHandler.offChange(this);
+        this.requestUpdate();
+    }
+    get href() {
+        return this._href;
+    }
+    handlePushState(e) {
+        e.preventDefault();
+        LocationHandler.changeFromComponent(this);
+    }
+    handleChange(e) {
+        super.handleChange(e);
+        if (this.pushState) {
+            e.preventDefault();
+            e.stopPropagation();
+            LocationHandler.changeFromComponent(this);
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+    }
+    // _checked: true | null = null;
+    // @property() get checked(): true | null {
+    //   return this._checked;
+    // }
+    // set checked(checked: true | null) {
+    //   if (this.name) {
+    //     if (checked == this._checked) return;
+    //     super.setCheckedValue(checked);
+    //     if (this._checked) this.setAttribute("active", "true");
+    //     else this.removeAttribute("active");
+    //   }
+    // }
+    setCheckedValue(checked) {
+        if (this.name) {
+            if (checked == this._checked)
+                return;
+            super.setCheckedValue(checked);
+            if (this._checked)
+                this.setAttribute("active", "true");
+            else
+                this.removeAttribute("active");
+        }
+    }
+    disconnectedCallback() {
+        LocationHandler.offChange(this);
+        super.disconnectedCallback();
+    }
+    get location() {
+        return this._location;
+    }
+    set location(value) {
+        this._location = value;
+        LocationHandler.updateComponentActiveState(this);
+    }
+    render() {
+        const btnStyles = {
+            flexDirection: this.direction,
+            alignItems: this.align,
+            justifyContent: this.justify,
+            textAlign: this.textAlign,
+            minWidth: this.minWidth,
+        };
+        const btn = html `
+      <button part="button" class=${this.hasPrefix || this.hasSuffix ? 'has-prefix-or-suffix' : ''} style=${styleMap(btnStyles)} @click=${this.handleChange}>
+        <slot @slotchange=${this.onSlotChange} part="prefix" name="prefix"></slot>
+        <slot part="main" class="main-slot"></slot>
+        <slot @slotchange=${this.onSlotChange} part="suffix" name="suffix"></slot>
+        ${this.loading == true ? html `<sonic-icon prefix="iconoir" name="notch" class="loader"></sonic-icon>` : ""}
+      </button>
+    `;
+        return this.href
+            ? html `<a href="${this.href}" @click=${this.pushState ? this.handlePushState : null}>${btn}</a>`
+            : html `${btn}`;
+    }
+    onSlotChange() {
+        var _a, _b;
+        this.hasPrefix = !!((_a = this.prefixes) === null || _a === void 0 ? void 0 : _a.length);
+        this.hasSuffix = !!((_b = this.suffixes) === null || _b === void 0 ? void 0 : _b.length);
+    }
+};
+Button.styles = [
+    css `
+      * {
+        box-sizing: border-box;
+      }
+      :host {
+        --sc-btn-gap: 0.35em;
+        --sc-btn-py: 0.25em;
+        --sc-btn-px: 1.1em;
+        --sc-btn-fs: 1rem;
+        --sc-btn-fw: var(--sc-btn-font-weight);
+        --sc-btn-ff: var(--sc-btn-font-family);
+
+        --sc-btn-height: var(--sc-form-height, 2.5em);
+        --sc-btn-color: var(--sc-base-content, #1f2937);
+        --sc-btn-bg: var(--sc-base-100, #e5e7eb);
+
+        --sc-btn-border-style: solid;
+        --sc-btn-border-with: var(--sc-form-border-width, 0.1rem);
+        --sc-btn-border-color: transparent;
+
+        --sc-btn-outline-bg-hover: var(--sc-base-100);
+        --sc-btn-ghost-bg-hover: var(--sc-base-100);
+
+        --sc-btn-active-color: var(--sc-base);
+        --sc-btn-hover-filter: brightness(0.97);
+        --sc-btn-active-filter: brightness(0.96);
+        --sc-btn-active-bg: var(--sc-base-content);
+
+        --sc-item-rounded-tr: var(--sc-btn-rounded);
+        --sc-item-rounded-tl: var(--sc-btn-rounded);
+        --sc-item-rounded-bl: var(--sc-btn-rounded);
+        --sc-item-rounded-br: var(--sc-btn-rounded);
+
+        display: inline-flex;
+        vertical-align: middle;
+        box-sizing: border-box;
+      }
+
+      :host a {
+        display: contents;
+      }
+
+      :host button {
+        display: flex;
+        flex: 1;
+        box-sizing: border-box;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: center;
+
+        font-family: var(--sc-btn-ff);
+        font-weight: var(--sc-btn-fw);
+        font-size: var(--sc-btn-fs);
+
+        cursor: pointer;
+        text-align: center;
+        line-height: 1.2;
+        border-radius: var(--sc-item-rounded-tl) var(--sc-item-rounded-tr) var(--sc-item-rounded-br)
+        var(--sc-item-rounded-bl);
+
+        background: var(--sc-btn-bg);
+        color: var(--sc-btn-color);
+
+        padding-top: var(--sc-btn-py);
+        padding-bottom: var(--sc-btn-py);
+        padding-left: var(--sc-btn-px);
+        padding-right: var(--sc-btn-px);
+
+        border: var(--sc-btn-border-with) var(--sc-btn-border-style) var(--sc-btn-border-color);
+        min-height: var(--sc-btn-height);
+      }
+
+      :host button.has-prefix-or-suffix {
+        gap: var(--sc-btn-gap);
+      }
+
+      :host button:focus,
+      :host button:hover {
+        filter: var(--sc-btn-hover-filter);
+      }
+
+      :host button:active {
+        filter: var(--sc-btn-active-filter);
+      }
+
+      /*TYPES*/
+      :host([type="default"]) button {
+        --sc-btn-color: var(--sc-base-content);
+        --sc-btn-bg: var(--sc-base-100);
+      }
+
+      :host([type="primary"]) button {
+        --sc-btn-color: var(--sc-primary-content);
+        --sc-btn-bg: var(--sc-primary);
+      }
+      :host([type="warning"]) button {
+        --sc-btn-color: var(--sc-warning-content);
+        --sc-btn-bg: var(--sc-warning);
+      }
+      :host([type="danger"]) button {
+        --sc-btn-color: var(--sc-danger-content);
+        --sc-btn-bg: var(--sc-danger);
+      }
+      :host([type="info"]) button {
+        --sc-btn-color: var(--sc-info-content);
+        --sc-btn-bg: var(--sc-info);
+      }
+      :host([type="success"]) button {
+        --sc-btn-color: var(--sc-success-content);
+        --sc-btn-bg: var(--sc-success);
+      }
+      :host([type="neutral"]) button {
+        --sc-btn-color: var(--sc-base);
+        --sc-btn-bg: var(--sc-base-600);
+      }
+
+      /*SIZE*/
+      :host([size="xs"]) {
+        --sc-btn-fs: 0.75rem;
+      }
+      :host([size="sm"]) {
+        --sc-btn-fs: 0.85rem;
+      }
+      :host([size="lg"]) {
+        --sc-btn-fs: 1.2rem;
+      }
+      :host([size="xl"]) {
+        --sc-btn-fs: 1.5rem;
+      }
+
+      /*UNSTYLED*/
+      :host([variant="unstyled"]) button {
+        all: unset;
+        transition: 0.1s;
+        display: inline-flex;
+        cursor: pointer;
+        --sc-btn-height: auto;
+        --sc-btn-width: auto;
+      }
+
+      /*GESTION DU FOCUS*/
+      :host(:not([disabled])) button:focus {
+        box-shadow: 0 0 0 0.18rem var(--sc-base-300);
+        border-color: var(--sc-base-300) !important;
+        outline: none;
+      }
+
+      /*GHOST*/
+      :host([variant="ghost"][type]) button {
+        color: var(--sc-btn-bg);
+        background: transparent;
+      }
+
+      :host([variant="ghost"][type="default"]) button {
+        color: var(--sc-btn-color);
+        background: transparent;
+      }
+
+      /*:host([variant="ghost"]) button:focus,*/
+      :host([variant="ghost"]) button:hover {
+        background: var(--sc-btn-ghost-bg-hover);
+        filter: none;
+      }
+
+      :host([active][variant="ghost"]) button {
+        background: var(--sc-btn-ghost-bg-hover);
+        filter: none;
+      }
+
+      :host([active][variant="ghost"]) button:hover {
+        filter: var(--sc-btn-hover-filter);
+      }
+
+      /*OUTLINE*/
+      :host([variant="outline"][type]) button {
+        border-color: var(--sc-btn-bg);
+        color: var(--sc-btn-bg);
+        background: transparent;
+      }
+
+      :host([variant="outline"][type="default"]) button {
+        border-color: var(--sc-base-400);
+        color: var(--sc-base-500);
+        background: transparent;
+      }
+
+      /*:host([variant="outline"]) button:focus,*/
+      :host([variant="outline"]) button:hover {
+        background: var(--sc-btn-outline-bg-hover);
+      }
+
+      /*OUTLINE*/
+      :host([variant="link"]) {
+        vertical-align: baseline;
+      }
+
+      :host([variant="link"]) button {
+        text-decoration: underline;
+        padding: 0;
+        background: none;
+        border: none;
+        font-size: inherit;
+        min-height: 0;
+        color: inherit;
+      }
+
+      :host([variant="link"][type]) button {
+        color: var(--sc-btn-bg);
+      }
+      :host([variant="link"][type="default"]) button {
+        color: inherit;
+      }
+
+      :host([variant="link"]) button:focus,
+      :host([variant="link"]) button:hover {
+        text-decoration: none;
+      }
+
+      /*SHAPE*/
+      :host([shape="circle"]) button {
+        border-radius: 50%;
+      }
+
+      :host([shape="circle"]) button,
+      :host([shape="square"]) button {
+        width: var(--sc-btn-height);
+        height: var(--sc-btn-height);
+        overflow: hidden;
+        padding: 0;
+        align-items: center;
+        justify-content: 0;
+      }
+
+      :host([shape="block"]),
+      :host([shape="block"]) button {
+        width: 100%;
+      }
+
+      :host([disabled]) {
+        opacity: 0.3;
+        pointer-events: none;
+        user-select: none;
+      }
+
+      /*ACTIVE*/
+      :host([active]:not([variant="ghost"])) button {
+        background: var(--sc-btn-active-bg);
+        color: var(--sc-btn-active-color);
+        border-color: var(--sc-btn-active-bg);
+      }
+
+      :host([textAlign="left"]) button {
+        text-align: left;
+      }
+
+      :host([textAlign="right"]) button {
+        text-align: right;
+      }
+
+      .main-slot {
+        flex-grow: 1;
+        display: block;
+        /*align-items: center;
+        justify-content: center;*/
+      }
+
+      slot[name="suffix"],
+      slot[name="prefix"] {
+        flex-shrink: 0;
+      }
+
+      /*ALIGNEMENT DES ICONES
+        permet de tous les avoir alignés dans un menu
+      */
+      ::slotted(sonic-icon) {
+        min-width: 1.3em;
+        text-align: center;
+      }
+
+      /*Tooltip ne joue pas sur le layout*/
+      sonic-tooltip {
+        display: contents;
+      }
+
+      /*OUTLINE*/
+      :host(:not([active])) ::slotted([swap="on"]) {
+        display: none;
+      }
+
+      :host([active]) ::slotted([swap="off"]) {
+        display: none;
+      }
+
+      /*Loading*/
+      :host([loading]) {
+        pointer-events: none;
+        position: relative;
+      }
+
+      :host([loading]) slot {
+        opacity: 0 !important;
+        pointer-events: none;
+      }
+      /*Loading*/
+      :host([loading]) .loader {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        line-height: 0;
+        height: var(--sc-btn-ff);
+        width: var(--sc-btn-ff);
+        animation: rotation 2s infinite linear;
+      }
+
+      @keyframes rotation {
+        from {
+          transform-origin: 50% 50%;
+          transform: translate(-50%, -50%) rotate(0deg);
+        }
+        to {
+          transform-origin: 50% 50%;
+          transform: translate(-50%, -50%) rotate(359deg);
+        }
+      }
+    `,
+];
+__decorate([
+    property({ type: String, reflect: true })
+], Button.prototype, "type", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Button.prototype, "variant", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Button.prototype, "size", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Button.prototype, "shape", void 0);
+__decorate([
+    property({ type: String })
+], Button.prototype, "direction", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Button.prototype, "align", void 0);
+__decorate([
+    property({ type: String })
+], Button.prototype, "justify", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Button.prototype, "textAlign", void 0);
+__decorate([
+    property({ type: String })
+], Button.prototype, "minWidth", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Button.prototype, "loading", void 0);
+__decorate([
+    state()
+], Button.prototype, "hasPrefix", void 0);
+__decorate([
+    state()
+], Button.prototype, "hasSuffix", void 0);
+__decorate([
+    queryAssignedElements({ flatten: true, slot: 'prefix' })
+], Button.prototype, "prefixes", void 0);
+__decorate([
+    queryAssignedElements({ flatten: true, slot: 'suffix' })
+], Button.prototype, "suffixes", void 0);
+__decorate([
+    property({ type: String })
+], Button.prototype, "href", null);
+__decorate([
+    property({ type: Boolean })
+], Button.prototype, "pushState", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Button.prototype, "active", void 0);
+Button = __decorate([
+    customElement("sonic-button")
+], Button);
+export { Button };
+//Ajout pour Storybook
+try {
+    customElements.define("sonic-button", Button);
+}
+catch (e) { }
+export const SonicButton = Button;

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

@@ -0,0 +1,11 @@
+import { LitElement } from "lit";
+export declare class Divider extends LitElement {
+    static styles: import("lit").CSSResult[];
+    slotNodes: Array<Node>;
+    divider: HTMLDivElement;
+    label: string;
+    size: "xs" | "md" | "sm" | "lg";
+    align: "left" | "right" | "center";
+    firstUpdated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/core/components/ui/divider/divider.js

@@ -0,0 +1,144 @@
+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, queryAssignedNodes, query } from "lit/decorators.js";
+let Divider = class Divider extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.label = "";
+        this.size = "md";
+        this.align = "center";
+    }
+    firstUpdated() {
+        var _a, _b;
+        if (this.label || ((_a = this.slotNodes) === null || _a === void 0 ? void 0 : _a.length)) {
+            (_b = this.divider) === null || _b === void 0 ? void 0 : _b.classList.add("has-text");
+        }
+    }
+    render() {
+        return html `<div part="divider">
+      <span class="text">${this.label}<slot></slot></span>
+    </div>`;
+    }
+};
+Divider.styles = [
+    css `
+      :host {
+        --sc-divider-my: 0.5rem;
+        --sc-divider-mx: 0;
+        --sc-divider-border-width: min(2px, 0.15rem);
+        --sc-divider-border-color: var(--sc-base-200);
+        --sc-divider-border-style: solid;
+        --sc-divider-color: var(--sc-base-500);
+        --sc-divider-ff: var(--sc-font-family-base);
+        --sc-divider-fs: 1rem;
+        --sc-divider-fw: var(--sc-font-weight-base);
+        --sc-divider-fst: var(--sc-font-style-base);
+
+        margin: var(--sc-divider-my) var(--sc-divider-mx);
+        font-size: var(--sc-divider-fs);
+        font-style: var(--sc-divider-fst);
+        font-family: var(--sc-divider-ff);
+        font-weight: var(--sc-divider-fw);
+        color: var(--sc-divider-color);
+        display: block;
+      }
+
+      /*SIZE*/
+      :host([size="xs"]) {
+        --sc-divider-my: 0.5rem;
+        --sc-divider-fs: 0.75rem;
+      }
+
+      :host([size="sm"]) {
+        --sc-divider-my: 0.75rem;
+        --sc-divider-fs: 0.85rem;
+      }
+
+      :host([size="md"]) {
+        --sc-divider-my: 1.25rem;
+      }
+
+      :host([size="lg"]) {
+        --sc-divider-my: 1.85rem;
+      }
+
+      :host([size="xl"]) {
+        --sc-divider-my: 2.25rem;
+      }
+
+      :host([size="2xl"]) {
+        --sc-divider-my: 3rem;
+      }
+
+      div {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+
+      div:before {
+        content: "";
+        flex-grow: 1;
+        border-top: var(--sc-divider-border-width) var(--sc-divider-border-style) var(--sc-divider-border-color);
+        width: 100%;
+      }
+
+      div:after {
+        content: "";
+        flex-grow: 1;
+        border-top: var(--sc-divider-border-width) var(--sc-divider-border-style) var(--sc-divider-border-color);
+        width: 100%;
+      }
+
+      /*ALIGNEMENT*/
+      :host([align="left"]) div:before {
+        display: none;
+      }
+
+      :host([align="right"]) div:after {
+        display: none;
+      }
+
+      /*TEXT*/
+      .text {
+        flex-shrink: 0;
+        max-width: 80%;
+      }
+
+      .no-text .text {
+        display: none;
+      }
+
+      .has-text {
+        gap: 0.5rem;
+      }
+    `,
+];
+__decorate([
+    queryAssignedNodes()
+], Divider.prototype, "slotNodes", void 0);
+__decorate([
+    query("div")
+], Divider.prototype, "divider", void 0);
+__decorate([
+    property({ type: String })
+], Divider.prototype, "label", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Divider.prototype, "size", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Divider.prototype, "align", void 0);
+Divider = __decorate([
+    customElement("sonic-divider")
+], Divider);
+export { Divider };
+try {
+    customElements.define("sonic-divider", Divider);
+}
+catch (e) { }