@spw-ds/spw-stencil-library 0.0.1

package/dist/collection/components/spw-modal/spw-modal.js

@@ -0,0 +1,361 @@
+import { Host, h } from "@stencil/core";
+import { queryShadowRoot, isHidden, isFocusable } from "../../utils/focus-trap";
+import { animationTo, KEYFRAMES } from "../../utils/animation";
+export class SpwModal {
+    constructor() {
+        this.focusableElements = [];
+        this.handleClick = (event) => {
+            const trigger = event.target.closest('[data-modal-trigger]');
+            if (trigger) {
+                const modalId = trigger.getAttribute('data-modal-trigger');
+                if (modalId === this.hostElement.id) {
+                    this.opened = true;
+                }
+            }
+        };
+        this.handleClose = (event) => {
+            const trigger = event.target.closest('[data-modal-close]');
+            if (trigger) {
+                const modalId = trigger.getAttribute('data-modal-close');
+                if (modalId === this.hostElement.id) {
+                    this.opened = false;
+                }
+            }
+        };
+        this.handleTopFocus = () => {
+            this.attemptFocus(this.getLastFocusableElement());
+        };
+        this.handleBottomFocus = () => {
+            this.attemptFocus(this.getFirstFocusableElement());
+        };
+        this.handleKeypress = (event) => {
+            if (this.showModal && event.key === 'Escape') {
+                this.doBeforeClose('ESCAPE_KEY');
+            }
+        };
+        this.opened = false;
+        this.showModal = this.opened || false;
+        this.caption = 'Titre de la modal';
+        this.closeOnOverlayClick = true;
+        this.stickyButtons = false;
+        this.size = 'small';
+        this.alertIcon = '';
+        this.okButtonLabel = 'Confirmer';
+        this.cancelButtonLabel = 'Annuler';
+        this.slotButtonsPresent = false;
+        this.showCloseButton = true;
+    }
+    componentDidLoad() {
+        this.focusableElements = queryShadowRoot(this.hostElement.shadowRoot, el => isHidden(el) || el.matches('[data-focus-trap-edge]'), isFocusable);
+        document.addEventListener('click', this.handleClick);
+        document.addEventListener('click', this.handleClose);
+        document.addEventListener('keydown', this.handleKeypress);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('click', this.handleClick);
+        document.removeEventListener('click', this.handleClose);
+        document.removeEventListener('keydown', this.handleKeypress);
+    }
+    getFirstFocusableElement() {
+        return this.focusableElements[0];
+    }
+    getLastFocusableElement() {
+        return this.focusableElements[this.focusableElements.length - 1];
+    }
+    attemptFocus(element) {
+        if (element == null) {
+            setTimeout(() => {
+                this.closeButton.focus();
+            });
+            return;
+        }
+        setTimeout(() => {
+            element.focus();
+        }, 0);
+    }
+    open() {
+        this.showModal = true;
+        try {
+            const anim = animationTo(this.modalContainer, KEYFRAMES.fadeIn, {
+                duration: 200,
+            });
+            anim.addEventListener('finish', () => {
+                setTimeout(() => {
+                    var _a, _b;
+                    (_a = this.getLastFocusableElement()) === null || _a === void 0 ? void 0 : _a.focus();
+                    (_b = this.getLastFocusableElement()) === null || _b === void 0 ? void 0 : _b.blur();
+                }, 0);
+                this.spwModalOpen.emit();
+            });
+        }
+        catch (err) {
+            this.spwModalOpen.emit();
+        }
+    }
+    close() {
+        try {
+            const anim = animationTo(this.modalContainer, KEYFRAMES.fadeOut, {
+                duration: 200,
+            });
+            anim.addEventListener('finish', () => {
+                this.showModal = false;
+                this.spwModalClose.emit();
+            });
+        }
+        catch (err) {
+            this.showModal = false;
+            this.spwModalClose.emit();
+        }
+    }
+    doBeforeClose(trigger) {
+        const triggers = [];
+        triggers.push(trigger);
+        const prevented = triggers.some(event => event.defaultPrevented);
+        if (!prevented) {
+            this.opened = false;
+        }
+    }
+    openedChanged(newValue) {
+        newValue === true ? this.open() : this.close();
+    }
+    handleOverlayClick() {
+        if (this.closeOnOverlayClick) {
+            this.doBeforeClose('BACKDROP');
+        }
+    }
+    get elementClass() {
+        return {
+            'spw-modal': true,
+            'spw-modal--opened': this.showModal,
+            'spw-modal--sticky-buttons': this.stickyButtons,
+        };
+    }
+    render() {
+        return (h(Host, { key: '4fd8ce50409d48a8348542e0b8de43e93992e707' }, h("div", { key: 'e7d0beefb5b9fd255cf2d4728850189d8ef7f779', ref: el => (this.modalContainer = el), class: this.elementClass }, h("div", { key: '884d4f6e571b86a7c4956305e0d56c8612ac44a4', class: "spw-modal__overlay", onClick: () => this.handleOverlayClick() }), h("div", { key: 'c244eda2abf043741bd9478b68180b6ac58887b1', "data-focus-trap-edge": true, onFocus: this.handleTopFocus, tabindex: "0" }), h("div", { key: 'f134fba630f9ab4929ca0104e37f352aa23d187c', class: `spw-modal__content-container spw-modal__content-container--${this.size}`, role: "dialog", "aria-modal": "true", "aria-label": this.caption }, h("div", { key: '08f2f50cdc0073bd739d653bfe652d84889582de', class: "spw-modal__content" }, h("div", { key: '81581611eb5d7b384694de9fd56819696d169a9d', class: "spw-modal__header" }, h("h2", { key: 'cebf2dcdb0d0bf5b84dec83815f95d2bd04be4ff', class: "spw-modal__caption" }, this.caption), this.showCloseButton && (h("spw-icon", { key: '7fc41c76aebb18a8cba76eb6e76df0bd30735945', class: "spw-modal__close-button", ref: el => (this.closeButton = el), icon: "fa-xmark", onClick: () => this.doBeforeClose('CLOSE_BUTTON') }))), h("div", { key: '47c627e9b302629fe48110cd5696afc62f5f07a4', class: "spw-modal__body" }, h("slot", { key: 'b447f58d68463e2a038b2730cb92fe65cd89733b', name: "content" })), h("div", { key: 'f03e2d95cf416a4aeb7c64083568b050956515e0', class: "spw-modal__buttons" }, h("slot", { key: '8959b3535b64398ed8754aa736d6276daf462fb4', name: "buttons" })))), h("div", { key: '9842e77f6c9f504cc41fd04795a42dfaf27dd475', "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabindex: "0" }))));
+    }
+    static get is() { return "spw-modal"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["spw-modal.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["spw-modal.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "opened": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Indique si la modal est ouverte ou ferm\u00E9e, mutable et refl\u00E9t\u00E9e dans le DOM"
+                },
+                "attribute": "opened",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "caption": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Titre de la modal"
+                },
+                "attribute": "caption",
+                "reflect": false,
+                "defaultValue": "'Titre de la modal'"
+            },
+            "closeOnOverlayClick": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indique si la fermeture de la modal est possible en cliquant sur l'overlay"
+                },
+                "attribute": "close-on-overlay-click",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "stickyButtons": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Rend les boutons en bas de la modal \"collants\" (toujours visibles) si vrai"
+                },
+                "attribute": "sticky-buttons",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'medium' | 'large' | 'fluid'",
+                    "resolved": "\"fluid\" | \"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "D\u00E9finit la taille de la modal : 'small', 'medium', 'large' ou 'fluid'"
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'small'"
+            },
+            "alertIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Ic\u00F4ne d'alerte \u00E0 afficher dans la modal"
+                },
+                "attribute": "alert-icon",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "okButtonLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texte du bouton de confirmation"
+                },
+                "attribute": "ok-button-label",
+                "reflect": false,
+                "defaultValue": "'Confirmer'"
+            },
+            "cancelButtonLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texte du bouton d'annulation"
+                },
+                "attribute": "cancel-button-label",
+                "reflect": false,
+                "defaultValue": "'Annuler'"
+            },
+            "showCloseButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indique si le bouton de fermeture est visible"
+                },
+                "attribute": "show-close-button",
+                "reflect": false,
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "showModal": {},
+            "slotButtonsPresent": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "spwModalOpen",
+                "name": "spwModalOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u00C9v\u00E9nement d\u00E9clench\u00E9 lors de l'ouverture de la modal"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "spwModalClose",
+                "name": "spwModalClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u00C9v\u00E9nement d\u00E9clench\u00E9 lors de la fermeture de la modal"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "opened",
+                "methodName": "openedChanged"
+            }];
+    }
+}
+//# sourceMappingURL=spw-modal.js.map

package/dist/collection/components/spw-modal/spw-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spw-modal.js","sourceRoot":"","sources":["../../../src/components/spw-modal/spw-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Element, State, Event, Host, EventEmitter, h, Watch } from '@stencil/core';\nimport { queryShadowRoot, isHidden, isFocusable } from '@utils/focus-trap';\nimport { animationTo, KEYFRAMES } from '@utils/animation';\n\ntype CloseEventTrigger = 'CLOSE_BUTTON' | 'ESCAPE_KEY' | 'BACKDROP';\n\nexport interface BeforeCloseEventDetail {\n  trigger: CloseEventTrigger;\n}\n\n@Component({\n  tag: 'spw-modal',\n  styleUrl: 'spw-modal.scss',\n  shadow: true,\n})\nexport class SpwModal {\n  /** Indique si la modal est ouverte ou fermée, mutable et reflétée dans le DOM */\n  @Prop({ reflect: true, mutable: true }) opened?: boolean = false;\n\n  @State() showModal: boolean = this.opened || false;\n\n  /** Titre de la modal */\n  @Prop() caption: string = 'Titre de la modal';\n  /** Indique si la fermeture de la modal est possible en cliquant sur l'overlay */\n  @Prop() closeOnOverlayClick: boolean = true;\n  /** Rend les boutons en bas de la modal \"collants\" (toujours visibles) si vrai */\n  @Prop() stickyButtons: boolean = false;\n  /** Événement déclenché lors de l'ouverture de la modal */\n  @Event() spwModalOpen: EventEmitter;\n  /** Événement déclenché lors de la fermeture de la modal */\n  @Event() spwModalClose: EventEmitter;\n  /** Définit la taille de la modal : 'small', 'medium', 'large' ou 'fluid' */\n  @Prop() size: 'small' | 'medium' | 'large' | 'fluid' = 'small';\n  /** Icône d'alerte à afficher dans la modal */\n  @Prop() alertIcon: string = '';\n  /** Texte du bouton de confirmation */\n  @Prop() okButtonLabel: string = 'Confirmer';\n  /** Texte du bouton d'annulation */\n  @Prop() cancelButtonLabel: string = 'Annuler';\n\n  @Element() hostElement: HTMLSpwModalElement;\n\n  @State() slotButtonsPresent: boolean = false;\n\n  /** Indique si le bouton de fermeture est visible */\n  @Prop() showCloseButton: boolean = true;\n\n  private modalContainer: HTMLElement;\n  private focusableElements: HTMLElement[] = [];\n  private closeButton: HTMLSpwIconElement;\n\n  componentDidLoad() {\n    this.focusableElements = queryShadowRoot(this.hostElement.shadowRoot, el => isHidden(el) || el.matches('[data-focus-trap-edge]'), isFocusable);\n    document.addEventListener('click', this.handleClick);\n    document.addEventListener('click', this.handleClose);\n    document.addEventListener('keydown', this.handleKeypress);\n  }\n\n  disconnectedCallback() {\n    document.removeEventListener('click', this.handleClick);\n    document.removeEventListener('click', this.handleClose);\n    document.removeEventListener('keydown', this.handleKeypress);\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    const trigger = (event.target as HTMLElement).closest('[data-modal-trigger]');\n    if (trigger) {\n      const modalId = trigger.getAttribute('data-modal-trigger');\n      if (modalId === this.hostElement.id) {\n        this.opened = true;\n      }\n    }\n  };\n\n  private handleClose = (event: MouseEvent) => {\n    const trigger = (event.target as HTMLElement).closest('[data-modal-close]');\n    if (trigger) {\n      const modalId = trigger.getAttribute('data-modal-close');\n      if (modalId === this.hostElement.id) {\n        this.opened = false;\n      }\n    }\n  };\n\n  private getFirstFocusableElement(): HTMLElement | null {\n    return this.focusableElements[0];\n  }\n\n  private getLastFocusableElement(): HTMLElement | null {\n    return this.focusableElements[this.focusableElements.length - 1];\n  }\n\n  private handleTopFocus = () => {\n    this.attemptFocus(this.getLastFocusableElement());\n  };\n\n  private handleBottomFocus = () => {\n    this.attemptFocus(this.getFirstFocusableElement());\n  };\n\n  private attemptFocus(element: HTMLElement | null) {\n    if (element == null) {\n      setTimeout(() => {\n        this.closeButton.focus();\n      });\n      return;\n    }\n\n    setTimeout(() => {\n      element.focus();\n    }, 0);\n  }\n\n  private open() {\n    this.showModal = true;\n    try {\n      const anim = animationTo(this.modalContainer, KEYFRAMES.fadeIn, {\n        duration: 200,\n      });\n      anim.addEventListener('finish', () => {\n        setTimeout(() => {\n          this.getLastFocusableElement()?.focus();\n          this.getLastFocusableElement()?.blur();\n        }, 0);\n\n        this.spwModalOpen.emit();\n      });\n    } catch (err) {\n      this.spwModalOpen.emit();\n    }\n  }\n\n  private close() {\n    try {\n      const anim = animationTo(this.modalContainer, KEYFRAMES.fadeOut, {\n        duration: 200,\n      });\n      anim.addEventListener('finish', () => {\n        this.showModal = false;\n        this.spwModalClose.emit();\n      });\n    } catch (err) {\n      this.showModal = false;\n      this.spwModalClose.emit();\n    }\n  }\n\n  private handleKeypress = (event: KeyboardEvent) => {\n    if (this.showModal && event.key === 'Escape') {\n      this.doBeforeClose('ESCAPE_KEY');\n    }\n  };\n\n  private doBeforeClose(trigger: CloseEventTrigger) {\n    const triggers = [];\n    triggers.push(trigger);\n    const prevented = triggers.some(event => event.defaultPrevented);\n    if (!prevented) {\n      this.opened = false;\n    }\n  }\n\n  @Watch('opened')\n  openedChanged(newValue: boolean) {\n    newValue === true ? this.open() : this.close();\n  }\n\n  private handleOverlayClick() {\n    if (this.closeOnOverlayClick) {\n      this.doBeforeClose('BACKDROP');\n    }\n  }\n\n  private get elementClass(): { [className: string]: boolean } {\n    return {\n      'spw-modal': true,\n      'spw-modal--opened': this.showModal,\n      'spw-modal--sticky-buttons': this.stickyButtons,\n    };\n  }\n\n  render() {\n    return (\n      <Host>\n        <div ref={el => (this.modalContainer = el)} class={this.elementClass}>\n          <div class=\"spw-modal__overlay\" onClick={() => this.handleOverlayClick()}></div>\n          <div data-focus-trap-edge onFocus={this.handleTopFocus} tabindex=\"0\"></div>\n          <div class={`spw-modal__content-container spw-modal__content-container--${this.size}`} role=\"dialog\" aria-modal=\"true\" aria-label={this.caption}>\n            <div class=\"spw-modal__content\">\n              <div class=\"spw-modal__header\">\n                <h2 class=\"spw-modal__caption\">{this.caption}</h2>\n                {this.showCloseButton && (\n                  <spw-icon class=\"spw-modal__close-button\" ref={el => (this.closeButton = el)} icon=\"fa-xmark\" onClick={() => this.doBeforeClose('CLOSE_BUTTON')}></spw-icon>\n                )}\n              </div>\n              <div class=\"spw-modal__body\">\n                <slot name=\"content\" />\n              </div>\n              <div class=\"spw-modal__buttons\">\n                <slot name=\"buttons\"></slot>\n              </div>\n            </div>\n          </div>\n          <div data-focus-trap-edge onFocus={this.handleBottomFocus} tabindex=\"0\"></div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/spw-mosaic/spw-mosaic-item/spw-mosaic-item.css

@@ -0,0 +1,2 @@
+.spw-tw-px-3{padding-left:.75rem;padding-right:.75rem}
+ /*! 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-mosaic-item-width-mobile:100%;--spw-mosaic-item-width-tablet:100%;--spw-mosaic-item-width-desktop:100%;box-sizing:border-box;font-size:100%;line-height:1.3;margin-bottom:1.5rem;padding-left:.75rem;padding-right:.75rem;width:var(--spw-mosaic-item-width-mobile)}: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:1220px;--spw-ds-container-lg:1024px;--spw-ds-container-md:768px;--spw-ds-container-sm:640px}.spw-ds-container{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)}}@media (min-width:768px){:host{width:var(--spw-mosaic-item-width-tablet)}}@media (min-width:1024px){:host{width:var(--spw-mosaic-item-width-desktop)}}.spw-mobile-1{--spw-mosaic-item-width-mobile:100%}.spw-tablet-1{--spw-mosaic-item-width-tablet:100%}.spw-desktop-1{--spw-mosaic-item-width-desktop:100%}.spw-mobile-2{--spw-mosaic-item-width-mobile:50%}.spw-tablet-2{--spw-mosaic-item-width-tablet:50%}.spw-desktop-2{--spw-mosaic-item-width-desktop:50%}.spw-mobile-3{--spw-mosaic-item-width-mobile:33.33333%}.spw-tablet-3{--spw-mosaic-item-width-tablet:33.33333%}.spw-desktop-3{--spw-mosaic-item-width-desktop:33.33333%}.spw-mobile-4{--spw-mosaic-item-width-mobile:25%}.spw-tablet-4{--spw-mosaic-item-width-tablet:25%}.spw-desktop-4{--spw-mosaic-item-width-desktop:25%}.spw-mobile-5{--spw-mosaic-item-width-mobile:20%}.spw-tablet-5{--spw-mosaic-item-width-tablet:20%}.spw-desktop-5{--spw-mosaic-item-width-desktop:20%}.spw-mobile-6{--spw-mosaic-item-width-mobile:16.66667%}.spw-tablet-6{--spw-mosaic-item-width-tablet:16.66667%}.spw-desktop-6{--spw-mosaic-item-width-desktop:16.66667%}.spw-mobile-7{--spw-mosaic-item-width-mobile:14.28571%}.spw-tablet-7{--spw-mosaic-item-width-tablet:14.28571%}.spw-desktop-7{--spw-mosaic-item-width-desktop:14.28571%}.spw-mobile-8{--spw-mosaic-item-width-mobile:12.5%}.spw-tablet-8{--spw-mosaic-item-width-tablet:12.5%}.spw-desktop-8{--spw-mosaic-item-width-desktop:12.5%}.spw-mobile-9{--spw-mosaic-item-width-mobile:11.11111%}.spw-tablet-9{--spw-mosaic-item-width-tablet:11.11111%}.spw-desktop-9{--spw-mosaic-item-width-desktop:11.11111%}.spw-mobile-10{--spw-mosaic-item-width-mobile:10%}.spw-tablet-10{--spw-mosaic-item-width-tablet:10%}.spw-desktop-10{--spw-mosaic-item-width-desktop:10%}.spw-mobile-11{--spw-mosaic-item-width-mobile:9.09091%}.spw-tablet-11{--spw-mosaic-item-width-tablet:9.09091%}.spw-desktop-11{--spw-mosaic-item-width-desktop:9.09091%}.spw-mobile-12{--spw-mosaic-item-width-mobile:8.33333%}.spw-tablet-12{--spw-mosaic-item-width-tablet:8.33333%}.spw-desktop-12{--spw-mosaic-item-width-desktop:8.33333%}.spw-tw-mb-6{margin-bottom:1.5rem}

package/dist/collection/components/spw-mosaic/spw-mosaic-item/spw-mosaic-item.js

@@ -0,0 +1,40 @@
+import { Host, h } from "@stencil/core";
+export class SpwMosaicItem {
+    constructor() {
+        this.classString = 'spw-tw-px-3 spw-tw-mb-6';
+    }
+    componentDidLoad() {
+        this.el.closest('spw-mosaic').addEventListener('mosaicConfigurationChanged', this.handleConfigurationChange.bind(this));
+    }
+    disconnectedCallback() {
+        this.el.closest('spw-mosaic').removeEventListener('mosaicConfigurationChanged', this.handleConfigurationChange.bind(this));
+    }
+    handleConfigurationChange(event) {
+        const { colsMobile, colsTablet, colsDesktop } = event.detail;
+        this.el.style.setProperty('--spw-mosaic-item-width-mobile', `calc(100% / ${colsMobile})`);
+        this.el.style.setProperty('--spw-mosaic-item-width-tablet', `calc(100% / ${colsTablet})`);
+        this.el.style.setProperty('--spw-mosaic-item-width-desktop', `calc(100% / ${colsDesktop})`);
+    }
+    render() {
+        return (h(Host, { key: 'c2f0d85eed9a6c3a05b155f3adc340e788b40213' }, h("slot", { key: 'ea74766894f7a06dc67a991a4e13949cb3144b38' })));
+    }
+    static get is() { return "spw-mosaic-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["spw-mosaic-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["spw-mosaic-item.css"]
+        };
+    }
+    static get states() {
+        return {
+            "classString": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=spw-mosaic-item.js.map

package/dist/collection/components/spw-mosaic/spw-mosaic-item/spw-mosaic-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spw-mosaic-item.js","sourceRoot":"","sources":["../../../../src/components/spw-mosaic/spw-mosaic-item/spw-mosaic-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAOnE,MAAM,OAAO,aAAa;;2BAGO,yBAAyB;;IAExD,gBAAgB;QACd,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,gBAAgB,CAAC,4BAA4B,EAAE,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IAC1H,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,mBAAmB,CAAC,4BAA4B,EAAE,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IAC7H,CAAC;IAEO,yBAAyB,CAAC,KAAK;QACrC,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;QAC7D,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,gCAAgC,EAAE,eAAe,UAAU,GAAG,CAAC,CAAC;QAC1F,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,gCAAgC,EAAE,eAAe,UAAU,GAAG,CAAC,CAAC;QAC1F,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,iCAAiC,EAAE,eAAe,WAAW,GAAG,CAAC,CAAC;IAC9F,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;CACF","sourcesContent":["import { Element, Component, Host, h, State } from '@stencil/core';\n\n@Component({\n  tag: 'spw-mosaic-item',\n  styleUrl: 'spw-mosaic-item.scss',\n  shadow: true,\n})\nexport class SpwMosaicItem {\n  @Element() el: HTMLSpwMosaicItemElement;\n\n  @State() classString: string = 'spw-tw-px-3 spw-tw-mb-6';\n\n  componentDidLoad() {\n    this.el.closest('spw-mosaic').addEventListener('mosaicConfigurationChanged', this.handleConfigurationChange.bind(this));\n  }\n\n  disconnectedCallback() {\n    this.el.closest('spw-mosaic').removeEventListener('mosaicConfigurationChanged', this.handleConfigurationChange.bind(this));\n  }\n\n  private handleConfigurationChange(event) {\n    const { colsMobile, colsTablet, colsDesktop } = event.detail;\n    this.el.style.setProperty('--spw-mosaic-item-width-mobile', `calc(100% / ${colsMobile})`);\n    this.el.style.setProperty('--spw-mosaic-item-width-tablet', `calc(100% / ${colsTablet})`);\n    this.el.style.setProperty('--spw-mosaic-item-width-desktop', `calc(100% / ${colsDesktop})`);\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/spw-mosaic/spw-mosaic.css

@@ -0,0 +1,2 @@
+
+ /*! 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%;box-sizing:border-box;display:block;font-size:100%;line-height:1.3;margin-left:-.75rem;margin-right:-.75rem}: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:1220px;--spw-ds-container-lg:1024px;--spw-ds-container-md:768px;--spw-ds-container-sm:640px}.spw-ds-container{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-mosaic--no-masonry{display:flex;flex-wrap:wrap}