@supersoniks/concorde 1.0.7 → 1.1.1

package/core/components/ui/badge/badge.js

@@ -0,0 +1,177 @@
+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";
+/**
+ * Un badge simple avec deux slots, un nommé prefix et un nomé suffix de manière à pouvoir mettre (par exemple) une icone avant ou après le contenu.
+ * * Le badge est comparable au bouton car il possèdent tous les deux les propriétés *type* (primary...), *variant*(outline, ghost), size(xs...)...
+ * * Le badge n'est pas interactif contrairement au bouton
+ */
+let Badge = class Badge extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Le type change surtout la couleur composant
+         */
+        this.type = "default";
+        /**
+         * Le composant par defaut sans se paramètre à forte afordance
+         * * 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";
+    }
+    render() {
+        return html `
+      <slot name="prefix"></slot>
+      <slot></slot>
+      <slot name="suffix"></slot>
+    `;
+    }
+};
+Badge.styles = [
+    css `
+      :host {
+        --sc-badge-gap: 0.3em;
+        --sc-badge-py: 0.15em;
+        --sc-badge-px: 0.66em;
+        --sc-badge-fs: 1rem;
+        --sc-badge-fw: 1rem;
+
+        --sc-badge-color: var(--sc-base-content, #1f2937);
+        --sc-badge-bg: var(--sc-base-200, #e5e7eb);
+
+        --sc-badge-border-with: var(--sc-form-border-width, 0.1rem);
+        --sc-badge-border-color: transparent;
+        --sc-badge-border: var(--sc-badge-border-with) solid var(--sc-badge-border-color);
+
+        --sc-badge-rounded: 9999px;
+        --sc-badge-line-height: 1.15;
+        --sc-badge-fw: var(--sc-font-weight-base);
+
+        display: inline-flex;
+        align-items:center;
+        box-sizing: border-box;
+        line-height: var(--sc-badge-line-height);
+        border-radius: var(--sc-badge-rounded);
+        background: var(--sc-badge-bg);
+        color: var(--sc-badge-color);
+
+        font-family: var(--sc-badge-ff, var(--sc-font-family-base, inherit));
+        font-weight: var(--sc-badge-fw);
+
+        padding-top: var(--sc-badge-py);
+        padding-bottom: var(--sc-badge-py);
+        padding-left: var(--sc-badge-px);
+        padding-right: var(--sc-badge-px);
+        min-height: calc(var(--sc-badge-px) * 2);
+        border: var(--sc-badge-border);
+      }
+
+      /*TYPES*/
+      :host([type="primary"]) {
+        --sc-badge-color: var(--sc-primary-content);
+        --sc-badge-bg: var(--sc-primary);
+      }
+      :host([type="warning"]) {
+        --sc-badge-color: var(--sc-warning-content);
+        --sc-badge-bg: var(--sc-warning);
+      }
+      :host([type="danger"]) {
+        --sc-badge-color: var(--sc-danger-content);
+        --sc-badge-bg: var(--sc-danger);
+      }
+      :host([type="info"]) {
+        --sc-badge-color: var(--sc-info-content);
+        --sc-badge-bg: var(--sc-info);
+      }
+      :host([type="success"]) {
+        --sc-badge-color: var(--sc-success-content);
+        --sc-badge-bg: var(--sc-success);
+      }
+      :host([type="neutral"]) {
+        --sc-badge-color: var(--sc-base);
+        --sc-badge-bg: var(--sc-base-content);
+      }
+
+      /*SIZE*/
+      :host {
+        font-size: var(--sc-badge-fs);
+        gap: var(--sc-badge-gap);
+      }
+
+      :host([size="xs"]) {
+        --sc-badge-fs: 0.68rem;
+        --sc-badge-gap: 0.35em;
+      }
+
+      :host([size="sm"]) {
+        --sc-badge-fs: 0.85rem;
+        --sc-badge-gap: 0.35em;
+      }
+
+      :host([size="lg"]) {
+        --sc-badge-line-height: 1.2;
+        --sc-badge-fs: 1.25rem;
+        --sc-badge-gap: 0.5em;
+      }
+
+      :host([size="xl"]) {
+        --sc-badge-line-height: 1.2;
+        --sc-badge-fs: 1.5rem;
+        --sc-badge-gap: 0.5em;
+      }
+
+      /*OUTLINE*/
+      :host([variant="outline"][type]) {
+        border-width: var(--sc-badge-border-with) !important;
+        border-color: var(--sc-badge-bg);
+        color: var(--sc-badge-bg);
+        background: transparent;
+      }
+
+      :host([variant="outline"][type="default"]) {
+        border-color: var(--sc-base-400);
+        color: var(--sc-base-500);
+        background: transparent;
+      }
+
+      /*GHOST*/
+      :host([variant="ghost"][type]) {
+        color: var(--sc-badge-bg);
+        background: transparent;
+        padding: 0;
+      }
+
+      :host([variant="ghost"][type="default"]) {
+        color: var(--sc-badge-color);
+        background: transparent;
+      }
+    `,
+];
+__decorate([
+    property({ type: String, reflect: true })
+], Badge.prototype, "type", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Badge.prototype, "variant", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Badge.prototype, "size", void 0);
+Badge = __decorate([
+    customElement("sonic-badge")
+], Badge);
+export { Badge };
+//Ajout pour la creation du cem notamment pour Storybook
+try {
+    customElements.define("sonic-badge", Badge);
+}
+catch (e) { }

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

@@ -0,0 +1,125 @@
+import { LitElement, CSSResultGroup } from "lit";
+declare const Button_base: {
+    new (...args: any[]): {
+        _value: string | null;
+        value: string | null;
+        _name: string;
+        name: string;
+        unique: true | null;
+        radio: true | null;
+        _checked: true | null;
+        checked: true | null;
+        setCheckedValue(checked: true | null): void;
+        handleChange(): void;
+        getValueForFormPublisher(): any;
+        setFormValueFromPublisher(value: any): void;
+        initPublisher(): void;
+        getFormPublisher(): any;
+        updateDataValue(): void;
+        error: true | null;
+        autofocus: true | null;
+        disabled: true | null;
+        required: true | null;
+        formDataProvider: string;
+        props: any;
+        getAncestorAttributeValue(attributeName: string): string;
+        hasAncestorAttribute(attributeName: string): boolean;
+        querySelectorAll(selector: string): NodeListOf<Element>;
+        publisher: any;
+        dataProvider: String;
+        noShadowDom: string | null;
+        debug: HTMLElement | null;
+        defferedDebug: boolean | null;
+        makeShadow(props: Record<string, any>, value: any): any;
+        dispatchEvent(event: Event): void;
+        setAttribute(name: string, value: string): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined): void;
+        removeAttribute(name: string): void;
+        getApiConfiguration(): import("../../../utils/api").APIConfiguration;
+        connectedCallback(): void;
+        requestUpdate(): void;
+        getAttribute(name: string): string;
+        hasAttribute(attributeName: String): boolean;
+        disconnectedCallback(): void;
+    };
+} & (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/FormElement").FormElementInterface) & (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface) & typeof LitElement;
+/**
+ * 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
+ */
+export declare class Button extends Button_base {
+    static styles: CSSResultGroup[];
+    /**
+     * Le type change surtout la couleur composant
+     */
+    type: "default" | "primary" | "neutral" | "warning" | "danger" | "success" | "info";
+    /**
+     * Le composant par defaut sans se paramètre à forte affordance
+     * * gost : composant super léger visuellement
+     * * outline : composant légé avec une bordure
+     */
+    variant: "default" | "ghost" | "outline" | "unstyled";
+    /**
+     * Taille du composant, implique notamment des modifications de typo et de marge interne
+     */
+    size: "xs" | "sm" | "md" | "lg" | "xl";
+    /**
+     * Forme du bouton, permet de le forcer en carré ou cercle
+     */
+    shape: "default" | "circle" | "square" | "block";
+    /**
+     * Propriété de direction *flex* appliquée à l'élément contenant les *slots*
+     */
+    direction: string;
+    /**
+     * Propriété align-items de *flex* appliquée à l'élément contenant les *slots*
+     */
+    align: string;
+    /**
+     * Propriété justify-content de *flex* appliquée à l'élément contenant les *slots*
+     */
+    justify: string;
+    /**
+     * Propriété text-align du bouton
+     */
+    textAlign: "" | "right" | "left" | "center";
+    /**
+     * Propriété min-width du bouton
+     */
+    minWidth: string;
+    /**
+     * Laisse apparaitre un loader en remplacement du contenu du bouton.
+     * Désactive également le clic sur le bouton
+     */
+    loading: boolean;
+    hasPrefix: boolean;
+    hasSuffix: boolean;
+    prefixes: HTMLElement[];
+    suffixes: HTMLElement[];
+    /**
+     * L'url
+     */
+    private _href;
+    set href(value: string);
+    get href(): string;
+    /**
+     * Si présent on passe en mode pushstate
+     */
+    pushState: null;
+    active: boolean;
+    handlePushState(e: Event): void;
+    handleChange(e?: any): void;
+    connectedCallback(): void;
+    setCheckedValue(checked: true | null): void;
+    disconnectedCallback(): void;
+    private _location;
+    get location(): string;
+    set location(value: string);
+    render(): import("lit-html").TemplateResult<1>;
+    onSlotChange(): void;
+}
+export declare const SonicButton: typeof Button;
+export {};