@spw-ds/spw-stencil-library 1.2.1 → 1.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spw-ds/spw-stencil-library",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "Design System du SPW. Librairie Stencil.",
   "readme": "../../README.md",
   "main": "dist/index.cjs.js",

package/dist/components/p-BRzMlz9h.js

@@ -1,129 +0,0 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
-import { d as defineCustomElement$1 } from './p-_q4w18VU.js';
-
-const spwCheckboxCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{-webkit-text-size-adjust:100%;line-height:1.3}h1,h2,h3,h4,h5,h6,li,p,ul{margin:0;padding:0}ul{list-style:none}:host{-webkit-text-size-adjust:100%;--spw-ds-checkbox-checked-color:var(--spw-ds-primary);box-sizing:border-box;display:inline-flex;font-size:100%;line-height:1.3;vertical-align:top}:host *,:host :after,:host :before{box-sizing:inherit;font-family:Nunito Sans}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}:root{--spw-ds-container-xl:1200px;--spw-ds-container-lg:1024px;--spw-ds-container-md:768px;--spw-ds-container-sm:640px}.spw-ds-container{margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px;width:100%}@media (min-width:460px){.spw-ds-container{max-width:var(--spw-ds-container-sm)}}@media (min-width:768px){.spw-ds-container{max-width:var(--spw-ds-container-md)}}@media (min-width:1024px){.spw-ds-container{max-width:var(--spw-ds-container-lg)}}@media (min-width:1350px){.spw-ds-container{max-width:var(--spw-ds-container-xl)}}.spw-checkbox{align-items:flex-start;display:inline-flex;flex-direction:row;padding:0}.spw-checkbox__wrapper{align-items:center;background-color:var(--spw-ds-white);border:2px solid var(--spw-color-themes-grey-grey-900);border-radius:var(--spw-spacings-border-radius-2-xs);display:flex;flex:none;flex-grow:0;font-size:var(--spw-typography-body-body-3-font-size);height:20px;justify-content:center;order:0;position:relative;width:20px}.spw-checkbox__wrapper spw-icon{font-size:14px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.spw-checkbox__wrapper--error{border-color:var(--spw-colors-dark-states-error-error-300)}.spw-checkbox__wrapper:not(.spw-checkbox__wrapper--disabled):hover{outline:4px solid var(--spw-color-themes-grey-grey-300)}.spw-checkbox__wrapper:not(.spw-checkbox__wrapper--disabled):active,.spw-checkbox__wrapper:not(.spw-checkbox__wrapper--disabled):focus-visible,.spw-checkbox__wrapper:not(.spw-checkbox__wrapper--disabled):focus-within{box-shadow:0 0 0 4px #000;outline:2px solid #fff;outline-offset:0}.spw-checkbox__wrapper--disabled{border-color:var(--spw-color-themes-grey-grey-500)}.spw-checkbox__wrapper--checked{border-color:var(--spw-ds-checkbox-checked-color);color:var(--spw-ds-checkbox-checked-color)}.spw-checkbox__wrapper--checked--disabled{color:var(--spw-color-themes-grey-grey-500)}.spw-checkbox__wrapper--toggle{background:var(--spw-color-themes-grey-grey-500);border-color:var(--spw-color-themes-grey-grey-500);border-radius:40px;height:20px;width:32px}.spw-checkbox__wrapper--toggle spw-icon{line-height:0;opacity:0;transition:all .2s ease .3s}.spw-checkbox__wrapper--toggle:before{background:#fff;border-radius:50%;content:\"\";height:14px;left:2px;position:absolute;top:50%;transform:translateY(-50%);transition:all .2s ease;width:14px}.spw-checkbox__wrapper.spw-checkbox__wrapper--checked.spw-checkbox__wrapper--toggle{background:var(--spw-ds-checkbox-checked-color);border-color:var(--spw-ds-checkbox-checked-color)}.spw-checkbox__wrapper.spw-checkbox__wrapper--checked.spw-checkbox__wrapper--toggle:before{background:#fff;left:calc(100% - 16px)}.spw-checkbox__wrapper.spw-checkbox__wrapper--checked.spw-checkbox__wrapper--toggle spw-icon{color:var(--spw-ds-checkbox-checked-color);display:block;font-size:10px;margin-left:5px}.spw-checkbox__wrapper.spw-checkbox__wrapper--toggle.spw-checkbox__wrapper--disabled{background:#fff;border-color:var(--spw-color-themes-grey-grey-500)}.spw-checkbox__wrapper.spw-checkbox__wrapper--toggle.spw-checkbox__wrapper--disabled:before{background:var(--spw-color-themes-grey-grey-500)}.spw-checkbox__label{word-wrap:break-word;color:var(--spw-color-themes-grey-grey-900);order:1;padding-left:var(--spw-spacings-spacing-sm);padding-top:1px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.spw-checkbox__label:hover~.spw-checkbox__wrapper:not(.spw-checkbox__wrapper--disabled){outline:4px solid var(--spw-color-themes-grey-grey-300)}.spw-checkbox__label:active~.spw-checkbox__wrapper:not(.spw-checkbox__wrapper--disabled){box-shadow:0 0 0 4px #000;outline:2px solid #fff;outline-offset:0}.spw-checkbox__label--disabled{color:var(--spw-color-themes-grey-grey-500)}.spw-checkbox__label:hover,.spw-checkbox__wrapper:hover{cursor:pointer}.spw-checkbox__label--disabled:hover,.spw-checkbox__wrapper--disabled:hover{cursor:not-allowed}.-spw-tw-mt-1{margin-top:-.25rem}.spw-tw-mb-2{margin-bottom:.5rem}.spw-tw-mr-2{margin-right:.5rem}";
-
-const SpwCheckbox = /*@__PURE__*/ proxyCustomElement(class SpwCheckbox extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.spwChange = createEvent(this, "spwChange");
-        this.internals = this.attachInternals();
-        /** Détermine si la case à cocher est désactivée, rendant l'élément inutilisable */
-        this.disabled = false;
-        /** Propriété mutable qui reflète si la case à cocher est cochée ou non */
-        this.checked = false;
-        /** Indique s'il y a une erreur associée à la case à cocher, pour un affichage visuel */
-        this.error = false;
-        /** Icône à afficher lorsque la case à cocher est cochée */
-        this.icon = 'fa-check';
-        /** Type de variant pour la checkbox */
-        this.variant = 'default';
-    }
-    handleCheckbox() {
-        if (!this.disabled) {
-            this.internalChecked = !this.internalChecked;
-            this.checked = this.internalChecked;
-            this.updateFormValue();
-            this.spwChange.emit(this.internalChecked);
-        }
-    }
-    /** Méthode publique pour changer l'état de la case à cocher. */
-    async toggleCheckedState(newVal) {
-        this.internalChecked = newVal;
-        this.checked = newVal;
-        this.updateFormValue();
-    }
-    checkedChanged(newChecked) {
-        this.internalChecked = newChecked;
-        this.inputElement.checked = newChecked;
-        this.updateFormValue();
-    }
-    updateFormValue() {
-        if (this.internalChecked) {
-            this.internals.setFormValue('on');
-        }
-        else {
-            this.internals.setFormValue(null);
-        }
-    }
-    handleKeydown(event) {
-        if (event.key === ' ' || event.key === 'Enter') {
-            // Space or Enter keys
-            this.handleCheckbox();
-            event.preventDefault();
-        }
-    }
-    componentWillLoad() {
-        this.internalChecked = this.checked;
-        this.updateFormValue();
-    }
-    componentDidLoad() {
-        var _a;
-        (_a = this.el.closest('form')) === null || _a === void 0 ? void 0 : _a.addEventListener('formdata', (e) => {
-            if (this.internalChecked) {
-                e.formData.set(this.name, 'on');
-            }
-        });
-    }
-    formResetCallback() {
-        this.internalChecked = false;
-        this.checked = false;
-        this.updateFormValue();
-    }
-    get elementClass() {
-        return {
-            'spw-checkbox__wrapper': true,
-            [`spw-checkbox__wrapper--${this.variant}`]: true,
-            'spw-checkbox__wrapper--disabled': this.disabled,
-            'spw-checkbox__wrapper--checked': this.internalChecked,
-            'spw-checkbox__wrapper--error': this.error,
-        };
-    }
-    render() {
-        const slot = this.el.innerHTML;
-        const hasSlot = Boolean(slot);
-        return (h("div", { key: '51a08401d10268179bf2c4cb7724c16c429f59f6', class: "spw-checkbox" }, h("input", { key: 'b667048ec9264d847c11adc97c14b46c46996d1d', type: "checkbox", ref: el => (this.inputElement = el), checked: this.internalChecked, onChange: this.handleCheckbox.bind(this), name: this.name, disabled: this.disabled, style: { display: 'none' } }), hasSlot && (h("label", { key: '03ccc8358b7d53064db1486fdd3b774adc682667', htmlFor: this.name, class: `spw-checkbox__label ${this.disabled ? 'spw-checkbox__label--disabled' : ''}`, onClick: this.handleCheckbox.bind(this) }, h("slot", { key: '2f6b5d7a74f9c41bf91ed9f482fd67e9596f6d72' }))), h("div", { key: '5bd4f661b54525388bb2f3b554de712775197833', tabindex: this.disabled ? -1 : 0, onClick: this.handleCheckbox.bind(this), onKeyDown: this.handleKeydown.bind(this), role: "checkbox", "aria-checked": this.internalChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-labelledby": "label", class: this.elementClass }, this.internalChecked && h("spw-icon", { key: 'aec767de94d5fe31cb9fad4f124fb0a7eada5810', icon: this.icon }))));
-    }
-    static get formAssociated() { return true; }
-    get el() { return this; }
-    static get watchers() { return {
-        "checked": ["checkedChanged"]
-    }; }
-    static get style() { return spwCheckboxCss; }
-}, [65, "spw-checkbox", {
-        "disabled": [4],
-        "checked": [1540],
-        "error": [4],
-        "icon": [1],
-        "name": [1],
-        "variant": [1],
-        "internalChecked": [32],
-        "toggleCheckedState": [64]
-    }, undefined, {
-        "checked": ["checkedChanged"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["spw-checkbox", "spw-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "spw-checkbox":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SpwCheckbox);
-            }
-            break;
-        case "spw-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { SpwCheckbox as S, defineCustomElement as d };
-//# sourceMappingURL=p-BRzMlz9h.js.map
-
-//# sourceMappingURL=p-BRzMlz9h.js.map

package/dist/components/p-BRzMlz9h.js.map

@@ -1 +0,0 @@
-{"file":"p-BRzMlz9h.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/spw-checkbox/spw-checkbox.scss?tag=spw-checkbox&encapsulation=shadow","src/components/spw-checkbox/spw-checkbox.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  vertical-align: top;\n  --spw-ds-checkbox-checked-color: var(--spw-ds-primary);\n}\n\n.spw-checkbox {\n  display: inline-flex;\n  flex-direction: row;\n  align-items: flex-start;\n  padding: 0;\n\n  &__wrapper {\n    display: flex;\n    position: relative;\n    justify-content: center;\n    align-items: center;\n    width: 20px;\n    height: 20px;\n    background-color: var(--spw-ds-white);\n    border: 2px solid var(--spw-color-themes-grey-grey-900);\n    border-radius: var(--spw-spacings-border-radius-2-xs);\n    font-size: var(--spw-typography-body-body-3-font-size);\n    flex: none;\n    order: 0;\n    flex-grow: 0;\n\n    spw-icon {\n      font-size: 14px;\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n\n    &--error {\n      border-color: var(--spw-colors-dark-states-error-error-300);\n    }\n\n    &:not(.spw-checkbox__wrapper--disabled):hover {\n      outline: 4px solid var(--spw-color-themes-grey-grey-300);\n    }\n\n    &:not(.spw-checkbox__wrapper--disabled):focus-visible,\n    &:not(.spw-checkbox__wrapper--disabled):active,\n    &:not(.spw-checkbox__wrapper--disabled):focus-within,\n    &:not(.spw-checkbox__wrapper--disabled):active {\n      outline: 2px solid white;\n      outline-offset: 0;\n      box-shadow: 0 0 0 4px black;\n    }\n\n    &--disabled {\n      border-color: var(--spw-color-themes-grey-grey-500);\n    }\n\n    &--checked {\n      border-color: var(--spw-ds-checkbox-checked-color);\n      color: var(--spw-ds-checkbox-checked-color);\n\n      &--disabled {\n        color: var(--spw-color-themes-grey-grey-500);\n      }\n    }\n\n    &--toggle {\n      width: 32px;\n      height: 20px;\n      border-radius: 40px;\n      border-color: var(--spw-color-themes-grey-grey-500);\n      background: var(--spw-color-themes-grey-grey-500);\n      // transition: border-color 0.2s ease;\n      spw-icon {\n        opacity: 0;\n        line-height: 0;\n        transition: all 0.2s 0.3s ease;\n      }\n      &:before {\n        content: '';\n        position: absolute;\n        width: 14px;\n        height: 14px;\n        background: white;\n        border-radius: 50%;\n        top: 50%;\n        left: 2px;\n        transform: translateY(-50%);\n        transition: all 0.2s ease;\n      }\n    }\n    &.spw-checkbox__wrapper--checked.spw-checkbox__wrapper--toggle {\n      border-color: var(--spw-ds-checkbox-checked-color);\n      background: var(--spw-ds-checkbox-checked-color);\n      &:before {\n        left: calc(100% - 16px);\n        background: white;\n      }\n      spw-icon {\n        display: block;\n        color: var(--spw-ds-checkbox-checked-color);\n        font-size: 10px;\n        margin-left: 5px;\n        // opacity: 1;\n      }\n    }\n    &.spw-checkbox__wrapper--toggle.spw-checkbox__wrapper--disabled {\n      border-color: var(--spw-color-themes-grey-grey-500);\n      background: white;\n      &:before {\n        background: var(--spw-color-themes-grey-grey-500);\n      }\n    }\n  }\n\n  &__label {\n    color: var(--spw-color-themes-grey-grey-900);\n    word-wrap: break-word;\n    order: 1;\n    padding-top: 1px;\n    user-select: none;\n    padding-left: var(--spw-spacings-spacing-sm);\n\n    &:hover ~ .spw-checkbox__wrapper:not(.spw-checkbox__wrapper--disabled) {\n      outline: 4px solid var(--spw-color-themes-grey-grey-300);\n    }\n\n    &:active ~ .spw-checkbox__wrapper:not(.spw-checkbox__wrapper--disabled) {\n      outline: 2px solid white;\n      outline-offset: 0;\n      box-shadow: 0 0 0 4px black;\n    }\n\n    &--disabled {\n      color: var(--spw-color-themes-grey-grey-500);\n    }\n  }\n\n  &__wrapper,\n  &__label {\n    &:hover {\n      cursor: pointer;\n    }\n    &--disabled:hover {\n      cursor: not-allowed;\n    }\n  }\n}\n","import { Component, h, Prop, Element, State, Event, EventEmitter, Watch, Method, AttachInternals } from '@stencil/core';\n\n@Component({\n  tag: 'spw-checkbox',\n  styleUrl: 'spw-checkbox.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class SpwCheckbox {\n  private inputElement: HTMLInputElement;\n\n  @Element() el: HTMLSpwCheckboxElement;\n\n  /** Détermine si la case à cocher est désactivée, rendant l'élément inutilisable */\n  @Prop() disabled: boolean = false;\n  /** Propriété mutable qui reflète si la case à cocher est cochée ou non */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n  /** Indique s'il y a une erreur associée à la case à cocher, pour un affichage visuel */\n  @Prop() error: boolean = false;\n  /** Icône à afficher lorsque la case à cocher est cochée */\n  @Prop() icon: string = 'fa-check';\n  /** Nom de l'élément utilisé dans les formulaires */\n  @Prop() name: string;\n  /** Type de variant pour la checkbox */\n  @Prop() variant?: 'default' | 'toggle' = 'default';\n\n  @State() internalChecked: boolean;\n\n  @AttachInternals() internals: ElementInternals;\n\n  /** Événement déclenché lors d'un changement d'état de la case à cocher (cochée ou décochée) */\n  @Event({ bubbles: true, composed: true }) spwChange: EventEmitter<boolean>;\n\n  private handleCheckbox() {\n    if (!this.disabled) {\n      this.internalChecked = !this.internalChecked;\n      this.checked = this.internalChecked;\n      this.updateFormValue();\n      this.spwChange.emit(this.internalChecked);\n    }\n  }\n\n  /** Méthode publique pour changer l'état de la case à cocher. */\n  @Method()\n  async toggleCheckedState(newVal: boolean) {\n    this.internalChecked = newVal;\n    this.checked = newVal;\n    this.updateFormValue();\n  }\n\n  @Watch('checked')\n  checkedChanged(newChecked: boolean) {\n    this.internalChecked = newChecked;\n    this.inputElement.checked = newChecked;\n    this.updateFormValue();\n  }\n\n  private updateFormValue() {\n    if (this.internalChecked) {\n      this.internals.setFormValue('on');\n    } else {\n      this.internals.setFormValue(null);\n    }\n  }\n\n  private handleKeydown(event) {\n    if (event.key === ' ' || event.key === 'Enter') {\n      // Space or Enter keys\n      this.handleCheckbox();\n      event.preventDefault();\n    }\n  }\n\n  componentWillLoad() {\n    this.internalChecked = this.checked;\n    this.updateFormValue();\n  }\n\n  componentDidLoad() {\n    this.el.closest('form')?.addEventListener('formdata', (e: FormDataEvent) => {\n      if (this.internalChecked) {\n        e.formData.set(this.name, 'on');\n      }\n    });\n  }\n\n  formResetCallback() {\n    this.internalChecked = false;\n    this.checked = false;\n    this.updateFormValue();\n  }\n\n  private get elementClass(): { [className: string]: boolean } {\n    return {\n      'spw-checkbox__wrapper': true,\n      [`spw-checkbox__wrapper--${this.variant}`]: true,\n      'spw-checkbox__wrapper--disabled': this.disabled,\n      'spw-checkbox__wrapper--checked': this.internalChecked,\n      'spw-checkbox__wrapper--error': this.error,\n    };\n  }\n\n  render() {\n    const slot = this.el.innerHTML;\n    const hasSlot = Boolean(slot);\n\n    return (\n      <div class=\"spw-checkbox\">\n        <input\n          type=\"checkbox\"\n          ref={el => (this.inputElement = el)}\n          checked={this.internalChecked}\n          onChange={this.handleCheckbox.bind(this)}\n          name={this.name}\n          disabled={this.disabled}\n          style={{ display: 'none' }}\n        />\n        {hasSlot && (\n          <label htmlFor={this.name} class={`spw-checkbox__label ${this.disabled ? 'spw-checkbox__label--disabled' : ''}`} onClick={this.handleCheckbox.bind(this)}>\n            <slot />\n          </label>\n        )}\n        <div\n          tabindex={this.disabled ? -1 : 0}\n          onClick={this.handleCheckbox.bind(this)}\n          onKeyDown={this.handleKeydown.bind(this)}\n          role=\"checkbox\"\n          aria-checked={this.internalChecked ? 'true' : 'false'}\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          aria-labelledby=\"label\"\n          class={this.elementClass}\n        >\n          {this.internalChecked && <spw-icon icon={this.icon}></spw-icon>}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-DSus8Zwu.js

@@ -1,81 +0,0 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
-import { d as defineCustomElement$1 } from './p-_q4w18VU.js';
-
-const spwLinkCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{-webkit-text-size-adjust:100%;line-height:1.3}h1,h2,h3,h4,h5,h6,li,p,ul{margin:0;padding:0}ul{list-style:none}:host{-webkit-text-size-adjust:100%;--spw-link-color:var(--spw-ds-primary);--spw-link-hover-color:var(--spw-ds-variant);--spw-link-active-color:var(--spw-ds-active);--spw-link-padding:6px;box-sizing:border-box;display:inline;font-size:100%;line-height:1.3}:host *,:host :after,:host :before{box-sizing:inherit;font-family:Nunito Sans}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}:root{--spw-ds-container-xl:1200px;--spw-ds-container-lg:1024px;--spw-ds-container-md:768px;--spw-ds-container-sm:640px}.spw-ds-container{margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px;width:100%}@media (min-width:460px){.spw-ds-container{max-width:var(--spw-ds-container-sm)}}@media (min-width:768px){.spw-ds-container{max-width:var(--spw-ds-container-md)}}@media (min-width:1024px){.spw-ds-container{max-width:var(--spw-ds-container-lg)}}@media (min-width:1350px){.spw-ds-container{max-width:var(--spw-ds-container-xl)}}.spw-link{border-radius:4px;color:var(--spw-link-color);cursor:pointer;display:inline;font-weight:700;text-decoration:none}.spw-link--surface-dark{color:var(--spw-ds-white)}.spw-link__inner{border-bottom:1px solid var(--spw-link-color);display:inline}.spw-link--surface-dark .spw-link__inner{border-bottom:1px solid var(--spw-ds-white)}.spw-link:focus-visible{outline:3px solid #000;outline-offset:2px}.spw-link:hover{color:var(--spw-link-hover-color)}.spw-link:hover .spw-link__inner{border-bottom:2px solid var(--spw-link-hover-color)}.spw-link:active{color:var(--spw-link-active-color)}.spw-link:active .spw-link__inner{border-bottom:2px solid var(--spw-link-active-color)}.spw-link[aria-disabled=true]{color:var(--spw-color-themes-grey-grey-600);cursor:not-allowed;pointer-events:none}.spw-link--surface-dark:hover{color:var(--spw-ds-white)}.spw-link--surface-dark:hover .spw-link__inner{border-bottom:2px solid var(--spw-ds-white)}.spw-link--surface-dark:active{color:var(--spw-ds-white)}.spw-link--surface-dark:active .spw-link__inner{border-bottom:2px solid var(--spw-ds-white)}.spw-link--surface-dark[aria-disabled=true]{color:var(--spw-ds-white);opacity:.5}.spw-link--has-icon-right spw-icon{margin-left:var(--spw-link-padding);margin-right:4px}.spw-link--has-icon-left spw-icon{margin-left:4px;margin-right:var(--spw-link-padding)}";
-
-const SpwLink = /*@__PURE__*/ proxyCustomElement(class SpwLink extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.spwClick = createEvent(this, "spwClick");
-        /** Attribut target (détermine où ouvrir le lien) */
-        this.target = '_self';
-        /** Position de l'icône à l'intérieur du lien (gauche ou droite) */
-        this.iconPosition = 'right';
-        /** Si désactivé, le lien n'est pas cliquable */
-        this.disabled = false;
-        /** Permet de choisir la surface d'arrière-plan du lien */
-        this.surface = 'light';
-        this.onClick = (ev) => {
-            if (this.disabled) {
-                ev.preventDefault();
-                return;
-            }
-            this.spwClick.emit(ev);
-        };
-    }
-    get elementClass() {
-        return {
-            'spw-link': true,
-            'spw-link--has-icon-right': this.icon && this.iconPosition === 'right',
-            'spw-link--has-icon-left': this.icon && this.iconPosition === 'left',
-            [`spw-link--surface-${this.surface}`]: true,
-            'spw-link--has-icon': !!this.icon,
-        };
-    }
-    render() {
-        const { href, rel, target, icon, iconPosition, accAriaLabel, disabled } = this;
-        const ariaAttributes = {
-            'aria-label': accAriaLabel,
-            'aria-disabled': disabled ? 'true' : null,
-        };
-        const iconClass = `spw-icon--${iconPosition}`;
-        const iconElement = icon ? h("spw-icon", { class: iconClass, icon: icon }) : null;
-        return (h("a", Object.assign({ key: '2c75f1d80f27fe7fc5952dc77479d2d9f6e7e611', href: disabled ? undefined : href, rel: rel, target: target, class: this.elementClass, onClick: this.onClick }, ariaAttributes), iconPosition === 'left' && iconElement, h("div", { key: '843706fc9ac1683a47c6f8a606b0e065eaa652bf', class: "spw-link__inner" }, h("slot", { key: 'd7bf546509047aababa1d66088a62763716fe8ef' })), iconPosition === 'right' && iconElement));
-    }
-    get el() { return this; }
-    static get style() { return spwLinkCss; }
-}, [1, "spw-link", {
-        "href": [1],
-        "target": [1],
-        "rel": [1],
-        "icon": [1],
-        "iconPosition": [1, "icon-position"],
-        "disabled": [4],
-        "accAriaLabel": [1, "acc-aria-label"],
-        "surface": [1]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["spw-link", "spw-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "spw-link":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SpwLink);
-            }
-            break;
-        case "spw-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { SpwLink as S, defineCustomElement as d };
-//# sourceMappingURL=p-DSus8Zwu.js.map
-
-//# sourceMappingURL=p-DSus8Zwu.js.map

package/dist/components/p-DSus8Zwu.js.map

@@ -1 +0,0 @@
-{"file":"p-DSus8Zwu.js","mappings":";;;AAAA,MAAM,UAAU,GAAG,kiIAAkiI;;MCOxiI,OAAO,iBAAAA,kBAAA,CAAA,MAAA,OAAA,SAAAC,CAAA,CAAA;AALpB,IAAA,WAAA,GAAA;;;;;;AAWU,QAAA,IAAM,CAAA,MAAA,GAAY,OAAO;;AAMzB,QAAA,IAAY,CAAA,YAAA,GAAsB,OAAO;;AAEzC,QAAA,IAAQ,CAAA,QAAA,GAAa,KAAK;;AAI1B,QAAA,IAAO,CAAA,OAAA,GAAsB,OAAO;AAKpC,QAAA,IAAA,CAAA,OAAO,GAAG,CAAC,EAAc,KAAI;AACnC,YAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,EAAE,CAAC,cAAc,EAAE;gBACnB;;AAEF,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;AACxB,SAAC;AAgCF;AA9BC,IAAA,IAAY,YAAY,GAAA;QACtB,OAAO;AACL,YAAA,UAAU,EAAE,IAAI;YAChB,0BAA0B,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,YAAY,KAAK,OAAO;YACtE,yBAAyB,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,YAAY,KAAK,MAAM;AACpE,YAAA,CAAC,qBAAqB,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;AAC3C,YAAA,oBAAoB,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;SAClC;;IAGH,MAAM,GAAA;AACJ,QAAA,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,YAAY,EAAE,QAAQ,EAAE,GAAG,IAAI;AAC9E,QAAA,MAAM,cAAc,GAAG;AACrB,YAAA,YAAY,EAAE,YAAY;YAC1B,eAAe,EAAE,QAAQ,GAAG,MAAM,GAAG,IAAI;SAC1C;AAED,QAAA,MAAM,SAAS,GAAG,CAAa,UAAA,EAAA,YAAY,EAAE;QAC7C,MAAM,WAAW,GAAG,IAAI,GAAG,gBAAU,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAA,CAAa,GAAG,IAAI;AAErF,QAAA,QACE,CAAA,CAAA,GAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,IAAI,EAAE,QAAQ,GAAG,SAAS,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,IAAM,cAAc,CAAA,EAChI,YAAY,KAAK,MAAM,IAAI,WAAW,EACvC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EACL,YAAY,KAAK,OAAO,IAAI,WAAW,CACtC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/spw-link/spw-link.scss?tag=spw-link&encapsulation=shadow","src/components/spw-link/spw-link.tsx"],"sourcesContent":[":host {\n  display: inline;\n  --spw-link-color: var(--spw-ds-primary);\n  --spw-link-hover-color: var(--spw-ds-variant);\n  --spw-link-active-color: var(--spw-ds-active);\n  --spw-link-padding: 6px;\n}\n\n.spw-link {\n  display: inline;\n  text-decoration: none;\n  cursor: pointer;\n  color: var(--spw-link-color);\n  border-radius: 4px;\n  font-weight: 700;\n  &--surface-dark {\n    color: var(--spw-ds-white);\n  }\n\n  &__inner {\n    display: inline;\n    border-bottom: 1px solid var(--spw-link-color);\n    .spw-link--surface-dark & {\n      border-bottom: 1px solid var(--spw-ds-white);\n    }\n  }\n\n  &:focus-visible {\n    outline-offset: 2px;\n    outline: 3px solid black;\n  }\n\n  &:hover {\n    color: var(--spw-link-hover-color);\n    .spw-link__inner {\n      border-bottom: 2px solid var(--spw-link-hover-color);\n    }\n  }\n\n  &:active {\n    color: var(--spw-link-active-color);\n    .spw-link__inner {\n      border-bottom: 2px solid var(--spw-link-active-color);\n    }\n  }\n\n  &[aria-disabled='true'] {\n    pointer-events: none;\n    color: var(--spw-color-themes-grey-grey-600);\n    cursor: not-allowed;\n  }\n\n  &--surface-dark {\n    &:hover {\n      color: var(--spw-ds-white);\n      .spw-link__inner {\n        border-bottom: 2px solid var(--spw-ds-white);\n      }\n    }\n\n    &:active {\n      color: var(--spw-ds-white);\n      .spw-link__inner {\n        border-bottom: 2px solid var(--spw-ds-white);\n      }\n    }\n\n    &[aria-disabled='true'] {\n      color: var(--spw-ds-white);\n      opacity: 0.5;\n    }\n  }\n\n  &--has-icon-right spw-icon {\n    margin-left: var(--spw-link-padding);\n    margin-right: 4px;\n  }\n\n  &--has-icon-left spw-icon {\n    margin-left: 4px;\n    margin-right: var(--spw-link-padding);\n  }\n}\n","import { Component, Element, Prop, h, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'spw-link',\n  styleUrl: 'spw-link.scss',\n  shadow: true,\n})\nexport class SpwLink {\n  @Element() el: HTMLSpwLinkElement;\n\n  /** Spécifie le lien href */\n  @Prop() href: string;\n  /** Attribut target (détermine où ouvrir le lien) */\n  @Prop() target?: string = '_self';\n  /** Remplit l'attribut rel */\n  @Prop() rel?: string;\n  /** Si rempli, permet d'utiliser une référence d'icône font-awesome */\n  @Prop() icon?: string;\n  /** Position de l'icône à l'intérieur du lien (gauche ou droite) */\n  @Prop() iconPosition?: 'left' | 'right' = 'right';\n  /** Si désactivé, le lien n'est pas cliquable */\n  @Prop() disabled?: boolean = false;\n  /** Remplit l'attribut aria-label, utilisé à des fins d'accessibilité */\n  @Prop() accAriaLabel?: string;\n  /** Permet de choisir la surface d'arrière-plan du lien */\n  @Prop() surface?: 'light' | 'dark' = 'light';\n\n  /** Événement déclenché lors du clic sur le lien */\n  @Event() spwClick: EventEmitter<MouseEvent>;\n\n  private onClick = (ev: MouseEvent) => {\n    if (this.disabled) {\n      ev.preventDefault();\n      return;\n    }\n    this.spwClick.emit(ev);\n  };\n\n  private get elementClass(): { [className: string]: boolean } {\n    return {\n      'spw-link': true,\n      'spw-link--has-icon-right': this.icon && this.iconPosition === 'right',\n      'spw-link--has-icon-left': this.icon && this.iconPosition === 'left',\n      [`spw-link--surface-${this.surface}`]: true,\n      'spw-link--has-icon': !!this.icon,\n    };\n  }\n\n  render() {\n    const { href, rel, target, icon, iconPosition, accAriaLabel, disabled } = this;\n    const ariaAttributes = {\n      'aria-label': accAriaLabel,\n      'aria-disabled': disabled ? 'true' : null,\n    };\n\n    const iconClass = `spw-icon--${iconPosition}`;\n    const iconElement = icon ? <spw-icon class={iconClass} icon={icon}></spw-icon> : null;\n\n    return (\n      <a href={disabled ? undefined : href} rel={rel} target={target} class={this.elementClass} onClick={this.onClick} {...ariaAttributes}>\n        {iconPosition === 'left' && iconElement}\n        <div class=\"spw-link__inner\">\n          <slot></slot>\n        </div>\n        {iconPosition === 'right' && iconElement}\n      </a>\n    );\n  }\n}\n"],"version":3}