@supersoniks/concorde 4.8.0 → 4.9.0

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

@@ -0,0 +1,697 @@
+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";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { fontSize, } from "@supersoniks/concorde/core/components/ui/_css/size";
+import { PublisherManager } from "@supersoniks/concorde/utils";
+const tagName = "sonic-button";
+/**
+ * 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";
+        /**
+         * 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.alignItems = "center";
+        /**
+         * Propriété justify-content de *flex* appliquée à l'élément contenant les *slots*
+         */
+        this.justify = "center";
+        /**
+         * Propriété min-width du bouton
+         */
+        this.minWidth = "0";
+        /**
+         * Si un bouton n'a qu'une icone pour contenu, agrandi l'icone pour des raisons d'équilibre
+         */
+        this.icon = false;
+        this.download = null;
+        /**
+         * mode d'activation du bouton :
+         * - strict : l'url courante match exactement avec le href du bouton
+         * - partial : l'url courante match à gauche avec le href du bouton
+         * - strict-path-only : l'url courante match exactement avec le path du bouton sans les query params
+         * - disabled : aucune activation / désactivation
+         */
+        this.autoActive = "partial";
+        /**
+         * 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 = "";
+        this.goBack = null;
+        /**
+         * Si présent on passe en mode pushstate
+         */
+        this.pushState = false;
+        this.active = false;
+        this.autoRepeat = false;
+        this.pointerDownTime = 0;
+        this.lastRepeatTime = 0;
+        this.isRepeating = false;
+        this.handleRepeatend = () => {
+            window.removeEventListener("pointerup", this.handleRepeatend);
+            window.removeEventListener("blur", this.handleRepeatend);
+            if (this.autoRepeat) {
+                this.isRepeating = false;
+            }
+        };
+        this.location = "";
+    }
+    set href(value) {
+        this._href = value;
+        const str = this._href.toString();
+        if (str && str.indexOf("http") != 0) {
+            LocationHandler.onChange(this);
+        }
+        else
+            LocationHandler.offChange(this);
+        this.requestUpdate();
+    }
+    get href() {
+        return this._href;
+    }
+    handleNavigation(e) {
+        e.preventDefault();
+        LocationHandler.changeFromComponent(this);
+    }
+    handleChange(e) {
+        if (e?.type == "click" && this.autoRepeat)
+            return;
+        super.handleChange();
+        if (this.pushState || this.goBack !== null) {
+            e?.preventDefault();
+            e?.stopPropagation();
+            LocationHandler.changeFromComponent(this);
+        }
+        if (this.hasAttribute("reset")) {
+            /**
+             * On on veut pouvoir rest un autre form que celui qui contient le bouton
+             */
+            const resetDataProvider = this.getAttribute("reset");
+            const formPublisher = resetDataProvider
+                ? PublisherManager.get(resetDataProvider)
+                : this.getFormPublisher();
+            if (formPublisher)
+                formPublisher.set({});
+        }
+    }
+    handleRepeatStart(e) {
+        if (this.autoRepeat) {
+            this.handleChange(e);
+            this.pointerDownTime = Date.now();
+            this.isRepeating = true;
+            this.repeat();
+        }
+        window.addEventListener("pointerup", this.handleRepeatend);
+        window.addEventListener("blur", this.handleRepeatend);
+    }
+    repeat() {
+        if (!this.isRepeating)
+            return;
+        if (this.hasAttribute("disabled")) {
+            this.isRepeating = false;
+            return;
+        }
+        window.requestAnimationFrame(this.repeat.bind(this));
+        if (Date.now() - this.pointerDownTime < 500)
+            return;
+        if (Date.now() - this.lastRepeatTime < 100)
+            return;
+        this.handleChange();
+        this.lastRepeatTime = Date.now();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+    }
+    setCheckedValue(checked) {
+        if (this.name) {
+            if (checked)
+                this.setAttribute("active", "true");
+            else
+                this.removeAttribute("active");
+            if (checked == this._checked)
+                return;
+            super.setCheckedValue(checked);
+        }
+    }
+    disconnectedCallback() {
+        LocationHandler.offChange(this);
+        super.disconnectedCallback();
+    }
+    willUpdate(changedProperties) {
+        if (changedProperties.has("href") || changedProperties.has("autoActive")) {
+            LocationHandler.updateComponentActiveState(this);
+        }
+        if (changedProperties.has("location")) {
+            LocationHandler.updateComponentActiveState(this);
+        }
+    }
+    render() {
+        const btnStyles = {
+            flexDirection: this.direction,
+            alignItems: this.alignItems,
+            justifyContent: this.justify,
+            align: this.align,
+            minWidth: this.minWidth,
+        };
+        const btn = html `
+      <button
+        part="button"
+        class=${this.hasPrefix || this.hasSuffix ? "has-prefix-or-suffix" : ""}
+        style=${styleMap(btnStyles)}
+        aria-controls=${ifDefined(this.ariaControls)}
+        aria-expanded=${ifDefined(this.sonicAriaExpanded)}
+        aria-label=${ifDefined(this.ariaLabel)}
+        aria-labelledby=${ifDefined(this.ariaLabelledby)}
+        ?disabled=${this.disabled}
+        @click=${this.handleChange}
+        @pointerdown=${this.handleRepeatStart}
+      >
+        <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 name="loader" class="loader"></sonic-icon>`
+            : ""}
+      </button>
+    `;
+        return this.href
+            ? html `<a
+          href="${this.href}"
+          download=${ifDefined(this.download)}
+          target=${ifDefined(this.target)}
+          aria-label=${ifDefined(this.ariaLabel)}
+          aria-labelledby=${ifDefined(this.ariaLabelledby)}
+          @click=${this.pushState || this.goBack !== null
+                ? this.handleNavigation
+                : null}
+          >${btn}</a
+        >`
+            : html `${btn}`;
+    }
+    onSlotChange() {
+        this.hasPrefix = !!this.prefixes?.length;
+        this.hasSuffix = !!this.suffixes?.length;
+    }
+};
+Button.styles = [
+    fontSize,
+    css `
+      * {
+        box-sizing: border-box;
+      }
+      :host {
+        --sc-btn-gap: 0.35em;
+        --sc-btn-py: 0.25em;
+        --sc-btn-px: 1.1em;
+        --sc-btn-fs: var(--sc-_fs, 1rem);
+        --sc-btn-ff: var(
+          --sc-btn-font-family,
+          var(--sc-font-family-base, sans-serif)
+        );
+        --sc-btn-fw: var(--sc-btn-font-weight, 500);
+
+        --sc-btn-height: var(--sc-form-height, 2.5em);
+        --btn-color: var(--sc-btn-color, var(--sc-base-content, #000));
+        --btn-bg: var(--sc-btn-bg, var(--sc-base-100, rgba(0, 0, 0, 0.07)));
+
+        --sc-btn-border-style: solid;
+        --sc-btn-border-width: var(--sc-form-border-width);
+        --sc-btn-border-color: transparent;
+
+        --btn-outline-bg-hover: var(
+          --sc-btn-outline-bg-hover,
+          var(--sc-base-100, rgba(0, 0, 0, 0.07))
+        );
+        --sc-btn-ghost-bg-hover: var(--sc-base-100, rgba(0, 0, 0, 0.07));
+
+        --sc-btn-active-color: var(--sc-base, #fff);
+        --sc-btn-hover-filter: brightness(0.98);
+        --sc-btn-active-filter: brightness(0.97);
+        --sc-btn-active-bg: var(--sc-base-content, #000);
+
+        /* min permet une sécurité si btn-rounded 999px par exemple */
+        --sc-item-rounded-tr: min(
+          calc(var(--sc-form-height, 2.5em) / 2),
+          var(--sc-btn-rounded)
+        );
+        --sc-item-rounded-tl: min(
+          calc(var(--sc-form-height, 2.5em) / 2),
+          var(--sc-btn-rounded)
+        );
+        --sc-item-rounded-bl: min(
+          calc(var(--sc-form-height, 2.5em) / 2),
+          var(--sc-btn-rounded)
+        );
+        --sc-item-rounded-br: min(
+          calc(var(--sc-form-height, 2.5em) / 2),
+          var(--sc-btn-rounded)
+        );
+
+        display: inline-flex;
+        vertical-align: middle;
+        box-sizing: border-box;
+        -webkit-print-color-adjust: exact;
+      }
+
+      :host a {
+        display: contents;
+        color: unset;
+      }
+
+      :host button {
+        display: flex;
+        flex: 1;
+        box-sizing: border-box;
+        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.1;
+        border-radius: var(--sc-item-rounded-tl) var(--sc-item-rounded-tr)
+          var(--sc-item-rounded-br) var(--sc-item-rounded-bl);
+
+        background: var(--btn-bg);
+        color: var(--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-width) 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-visible,
+      :host button:hover {
+        filter: var(--sc-btn-hover-filter);
+      }
+
+      :host button:active {
+        filter: var(--sc-btn-active-filter);
+      }
+
+      /*TYPES*/
+      :host([type="default"]) button {
+        --btn-color: var(--sc-base-content, #000);
+        --btn-bg: var(--sc-base-100, rgba(0, 0, 0, 0.07));
+      }
+
+      :host([type="primary"]) button {
+        --btn-color: var(--sc-primary-content, var(--sc-base, #fff));
+        --btn-bg: var(--sc-primary, var(--sc-base-content, #000));
+      }
+      :host([type="warning"]) button {
+        --btn-color: var(--sc-warning-content, var(--sc-base, #fff));
+        --btn-bg: var(--sc-warning, var(--sc-base-content, #000));
+      }
+      :host([type="danger"]) button {
+        --btn-color: var(--sc-danger-content, var(--sc-base, #fff));
+        --btn-bg: var(--sc-danger, var(--sc-base-content, #000));
+      }
+      :host([type="info"]) button {
+        --btn-color: var(--sc-info-content, var(--sc-base, #fff));
+        --btn-bg: var(--sc-info, var(--sc-base-content, #000));
+      }
+      :host([type="success"]) button {
+        --btn-color: var(--sc-success-content, var(--sc-base, #fff));
+        --btn-bg: var(--sc-success, var(--sc-base-content, #000));
+      }
+      :host([type="neutral"]) button {
+        --btn-color: var(--sc-base, #fff);
+        --btn-bg: var(--sc-base-content, #000);
+      }
+      :host([type="custom"]) button {
+        --btn-color: var(--sc-btn-custom-color);
+        --btn-bg: var(--sc-btn-custom-bg);
+      }
+
+      /*UNSTYLED*/
+      :host([variant="unstyled"]) {
+        display: inline-flex;
+      }
+
+      :host([variant="unstyled"]) button {
+        all: unset;
+        cursor: pointer;
+        width: 100%;
+        flex: 1;
+        box-sizing: border-box;
+        --sc-btn-height: auto;
+      }
+
+      /*GESTION DU FOCUS*/
+      :host(:not([disabled])) button:focus-visible {
+        box-shadow: 0 0 0 0.18rem var(--sc-base-300, rgba(0, 0, 0, 0.18));
+        border-color: var(--sc-base-300, rgba(0, 0, 0, 0.18)) !important;
+        outline: none;
+      }
+
+      /*GHOST*/
+      :host([variant="ghost"][type]) button {
+        color: var(--btn-bg);
+        background: transparent;
+      }
+
+      :host([variant="ghost"][type="default"]) button {
+        color: var(--btn-color);
+        background: transparent;
+      }
+
+      /*:host([variant="ghost"]) button:focus-visible,*/
+      :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(--btn-bg);
+        color: var(--btn-bg);
+        background: transparent;
+      }
+
+      :host([variant="outline"][type="default"]) button {
+        border-color: var(--sc-base-content, #000);
+        color: var(--sc-base-content, #000);
+        background: transparent;
+      }
+
+      /*:host([variant="outline"]) button:focus-visible,*/
+      :host([variant="outline"]) button:hover {
+        background: var(--btn-outline-bg-hover);
+      }
+
+      /*OUTLINE*/
+      :host([variant="link"]:not([size])) {
+        vertical-align: baseline;
+        margin-left: 0.25em;
+        margin-right: 0.25em;
+      }
+
+      :host([variant="link"]:not([size])) {
+        font-size: inherit;
+      }
+
+      :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(--btn-bg);
+      }
+      :host([variant="link"][type="default"]) button {
+        color: inherit;
+      }
+
+      :host([variant="link"]) button:focus-visible,
+      :host([variant="link"]) button:hover {
+        text-decoration: none;
+      }
+
+      /* Alignement */
+      :host([align="left"]) button {
+        text-align: left !important;
+      }
+
+      :host([align="right"]) button {
+        text-align: right;
+      }
+
+      /*SHAPE*/
+      :host([shape="circle"]) button {
+        border-radius: 50%;
+      }
+      :host([shape="circle"]) .main-slot {
+        line-height: 1;
+      }
+
+      :host([shape="circle"]) button,
+      :host([shape="square"]) button {
+        width: var(--sc-btn-height);
+        height: var(--sc-btn-height);
+        /*overflow: hidden;*/ /* fix bug #42622 */
+        padding: 0;
+        align-items: center;
+        justify-content: 0;
+        text-align: center !important;
+      }
+
+      :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"]):not([variant="unstyled"])) button {
+        background: var(--sc-btn-active-bg);
+        color: var(--sc-btn-active-color);
+        border-color: var(--sc-btn-active-bg);
+      }
+
+      .main-slot {
+        flex-grow: 1;
+        min-width: 0;
+        display: block;
+      }
+
+      :host([minWidth]:not([shape="block"])) .main-slot {
+        flex-grow: 0;
+      }
+
+      slot[name="suffix"],
+      slot[name="prefix"] {
+        flex-shrink: 0;
+        min-width: 0;
+      }
+
+      /*ALIGNEMENT DES ICONES
+        permet de tous les avoir alignés dans un menu
+      */
+      ::slotted(sonic-icon) {
+        min-width: 1em;
+        text-align: center;
+      }
+
+      /*BOUTON Avec icone seulement*/
+      :host([icon]) ::slotted(:only-child),
+      :host([icon]) ::slotted(sonic-icon) {
+        font-size: 1.2em;
+        vertical-align: middle;
+      }
+
+      /*Tooltip ne joue pas sur le layout*/
+      sonic-tooltip {
+        display: contents;
+      }
+
+      /*OUTLINE*/
+      :host(:not([active])) ::slotted([swap="on"]) {
+        display: none !important;
+      }
+
+      :host([active]) ::slotted([swap="off"]) {
+        display: none !important;
+      }
+
+      /*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, "alignItems", void 0);
+__decorate([
+    property({ type: String })
+], Button.prototype, "justify", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Button.prototype, "align", void 0);
+__decorate([
+    property({ type: String })
+], Button.prototype, "minWidth", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Button.prototype, "icon", void 0);
+__decorate([
+    property({ type: String })
+], Button.prototype, "download", void 0);
+__decorate([
+    property({ type: String })
+], Button.prototype, "autoActive", 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, "target", void 0);
+__decorate([
+    property({ type: String })
+], Button.prototype, "href", null);
+__decorate([
+    property({ type: String })
+], Button.prototype, "goBack", void 0);
+__decorate([
+    property({ type: Boolean })
+], Button.prototype, "pushState", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Button.prototype, "active", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Button.prototype, "autoRepeat", void 0);
+__decorate([
+    property({ type: String, attribute: "data-aria-controls" })
+], Button.prototype, "ariaControls", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "data-aria-expanded" })
+], Button.prototype, "sonicAriaExpanded", void 0);
+__decorate([
+    state()
+], Button.prototype, "location", void 0);
+Button = __decorate([
+    customElement(tagName)
+], Button);
+export { Button };
+//# sourceMappingURL=button.js.map