@salla.sa/twilight-components 2.14.252 → 2.14.253

package/dist/esm/salla-accordion-body.entry.js

@@ -1,21 +0,0 @@
-/*!
- * Crafted with ❤ by Salla
- */
-import { r as registerInstance, h, H as Host } from './index-D4D34Ujk.js';
-
-const sallaAccordionBodyCss = "";
-
-const SallaAccordionBody = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    render() {
-        return (h(Host, { key: '298d42a5bf1bcefdb181ec35060220cf749b56ed', class: "s-accordion-body-wrapper" }, h("slot", { key: '6ab081e8b71b5dc69fb66fbdec82b4725ab53b0d' })));
-    }
-};
-SallaAccordionBody.style = sallaAccordionBodyCss;
-
-export { SallaAccordionBody as salla_accordion_body };
-//# sourceMappingURL=salla-accordion-body.entry.js.map
-
-//# sourceMappingURL=salla-accordion-body.entry.js.map

package/dist/esm/salla-accordion-body.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"salla-accordion-body.entry.js","sources":["src/components/salla-accordion/salla-accordion-body.scss?tag=salla-accordion-body","src/components/salla-accordion/salla-accordion-body.tsx"],"sourcesContent":["\n","import { Component, Host, h } from '@stencil/core';\n\n/**\n * @salla/ui-components\n * The `salla-accordion-body` component represents the body/content of an accordion.\n */\n@Component({\n  tag: 'salla-accordion-body',\n  styleUrl: 'salla-accordion-body.scss',\n  shadow: false\n})\nexport class SallaAccordionBody {\n  render() {\n    return (\n      <Host class=\"s-accordion-body-wrapper\">\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;;;;AAAA,MAAM,qBAAqB,GAAG,EAAE;;MCWnB,kBAAkB,GAAA,MAAA;;;;IAC7B,MAAM,GAAA;QACJ,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EACpC,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;"}

package/dist/esm/salla-accordion-head.entry.js

@@ -1,50 +0,0 @@
-/*!
- * Crafted with ❤ by Salla
- */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-D4D34Ujk.js';
-import { p as plusIcon, m as minusIcon } from './minus-DfeagqF1.js';
-
-const sallaAccordionHeadCss = "";
-
-const SallaAccordionHead = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.accordionToggle = createEvent(this, "accordionToggle");
-        /** Should the accordion be collapsible or not. */
-        this.collapsible = false;
-        /** Current collapsed state */
-        this.collapsed = true;
-    }
-    emitCollapsePanel() {
-        this.accordionToggle.emit({
-            payload: {
-                collapsed: this.collapsed,
-            },
-        });
-    }
-    toggleCollapse() {
-        var _a, _b, _c;
-        if (!this.collapsible)
-            return;
-        this.collapsed = !this.collapsed;
-        (_a = this.host.parentElement) === null || _a === void 0 ? void 0 : _a.setAttribute('data-collapsed', this.collapsed.toString());
-        (_c = (_b = this.host.parentElement) === null || _b === void 0 ? void 0 : _b.querySelector('salla-accordion-body')) === null || _c === void 0 ? void 0 : _c.setAttribute('data-collapsed', this.collapsed.toString());
-        this.emitCollapsePanel();
-    }
-    render() {
-        return (h(Host, { key: '9bb7ad4ad615f5316968b48839b2433619bd3850', "data-collapsed": this.collapsed.toString(), onClick: () => this.toggleCollapse(), class: "s-accordion-head-wrapper" }, h("div", { key: '6826492e1c552440d6407435dfe4e0ca3915cdf4', class: "s-accordion-head-wrapper-start" }, h("slot", { key: '2c19c500b57444ac8f69c2f64616904a819f54da', name: "title" }), h("slot", { key: 'a6ed0daccd969ec94128f5f749ccddfa9f62e5d3', name: "subtitle" })), h("div", { key: 'ddeff9dcacc42028d272298371c721ce00039176', class: "s-accordion-head-wrapper-end" }, h("slot", { key: 'daa4d8c9db6484f3fc67cf855250c5bc3cc59314', name: "notification" }), this.collapsible && (h("button", { key: '2bcc66dc07c3ae1ea9a31fbd0c7b8204f1eca2be', class: {
-                's-accordion-head-wrapper-toggle': true,
-                active: !this.collapsed,
-            }, onClick: e => {
-                e.stopPropagation();
-                this.toggleCollapse();
-            } }, h("span", { key: '2853844a2fbc662c002f7e2cacb299874c9debb3', class: "s-accordion-head-wrapper-toggle-icon", innerHTML: this.collapsed ? plusIcon : minusIcon }))))));
-    }
-    get host() { return getElement(this); }
-};
-SallaAccordionHead.style = sallaAccordionHeadCss;
-
-export { SallaAccordionHead as salla_accordion_head };
-//# sourceMappingURL=salla-accordion-head.entry.js.map
-
-//# sourceMappingURL=salla-accordion-head.entry.js.map

package/dist/esm/salla-accordion-head.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"salla-accordion-head.entry.js","sources":["src/components/salla-accordion/salla-accordion-head.scss?tag=salla-accordion-head","src/components/salla-accordion/salla-accordion-head.tsx"],"sourcesContent":["\n","import { Component, Element, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\nimport plusIcon from '../../assets/svg/add.svg';\nimport minusIcon from '../../assets/svg/minus.svg';\n\n/**\n * @salla/ui-components\n * The `salla-accordion-head` component represents the header of an accordion.\n */\n@Component({\n  tag: 'salla-accordion-head',\n  styleUrl: 'salla-accordion-head.scss',\n  shadow: false,\n})\nexport class SallaAccordionHead {\n  @Element() host: HTMLElement;\n\n  /** Should the accordion be collapsible or not. */\n  @Prop() collapsible: boolean = false;\n\n  /** Current collapsed state */\n  @Prop({ mutable: true, reflect: true }) collapsed: boolean = true;\n\n  /**\n   * Emitted when the accordion head is clicked and the collapsed state changes.\n   * Only emitted when the component is collapsible.\n   *\n   * @event accordionToggle\n   * @type {Object}\n   * @property {Object} detail.payload - The event payload\n   * @property {boolean} detail.payload.collapsed - The new collapsed state\n   */\n  @Event() accordionToggle: EventEmitter<Object>;\n\n  private emitCollapsePanel(): void {\n    this.accordionToggle.emit({\n      payload: {\n        collapsed: this.collapsed,\n      },\n    });\n  }\n\n  private toggleCollapse() {\n    if (!this.collapsible) return;\n    this.collapsed = !this.collapsed;\n    this.host.parentElement?.setAttribute('data-collapsed', this.collapsed.toString());\n    this.host.parentElement\n      ?.querySelector('salla-accordion-body')\n      ?.setAttribute('data-collapsed', this.collapsed.toString());\n    this.emitCollapsePanel();\n  }\n\n  render() {\n    return (\n      <Host\n        data-collapsed={this.collapsed.toString()}\n        onClick={() => this.toggleCollapse()}\n        class=\"s-accordion-head-wrapper\"\n      >\n        <div class=\"s-accordion-head-wrapper-start\">\n          <slot name=\"title\"></slot>\n          <slot name=\"subtitle\"></slot>\n        </div>\n\n        <div class=\"s-accordion-head-wrapper-end\">\n          <slot name=\"notification\"></slot>\n          {this.collapsible && (\n            <button\n              class={{\n                's-accordion-head-wrapper-toggle': true,\n                active: !this.collapsed,\n              }}\n              onClick={e => {\n                e.stopPropagation();\n                this.toggleCollapse();\n              }}\n            >\n              {<span class=\"s-accordion-head-wrapper-toggle-icon\" innerHTML={this.collapsed ? plusIcon : minusIcon}></span>}\n            </button>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;;;;;AAAA,MAAM,qBAAqB,GAAG,EAAE;;MCanB,kBAAkB,GAAA,MAAA;AAL/B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AASU,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;;AAGI,QAAA,IAAS,CAAA,SAAA,GAAY,IAAI;AA+DlE;IAlDS,iBAAiB,GAAA;AACvB,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;AACxB,YAAA,OAAO,EAAE;gBACP,SAAS,EAAE,IAAI,CAAC,SAAS;AAC1B,aAAA;AACF,SAAA,CAAC;;IAGI,cAAc,GAAA;;QACpB,IAAI,CAAC,IAAI,CAAC,WAAW;YAAE;AACvB,QAAA,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS;AAChC,QAAA,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,CAAC,aAAa,0CAAE,YAAY,CAAC,gBAAgB,EAAE,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC;AAClF,QAAA,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,CAAC,aAAa,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CACnB,aAAa,CAAC,sBAAsB,CAAC,0CACrC,YAAY,CAAC,gBAAgB,EAAE,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC;QAC7D,IAAI,CAAC,iBAAiB,EAAE;;IAG1B,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,gBAAA,EACa,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,EACzC,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,EACpC,KAAK,EAAC,0BAA0B,EAAA,EAEhC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gCAAgC,EAAA,EACzC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAQ,CAAA,EAC1B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,UAAU,EAAA,CAAQ,CACzB,EAEN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,8BAA8B,EAAA,EACvC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,cAAc,EAAQ,CAAA,EAChC,IAAI,CAAC,WAAW,KACf,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,iCAAiC,EAAE,IAAI;AACvC,gBAAA,MAAM,EAAE,CAAC,IAAI,CAAC,SAAS;AACxB,aAAA,EACD,OAAO,EAAE,CAAC,IAAG;gBACX,CAAC,CAAC,eAAe,EAAE;gBACnB,IAAI,CAAC,cAAc,EAAE;AACvB,aAAC,EAAA,EAEA,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sCAAsC,EAAC,SAAS,EAAE,IAAI,CAAC,SAAS,GAAG,QAAQ,GAAG,SAAS,EAAS,CAAA,CACtG,CACV,CACG,CACD;;;;;;;;"}

package/dist/esm/salla-accordion.entry.js

@@ -1,49 +0,0 @@
-/*!
- * Crafted with ❤ by Salla
- */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-D4D34Ujk.js';
-
-const sallaAccordionCss = "";
-
-const SallaAccordion = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        /** Should the accordion be collapsible or not. Default is true. */
-        this.collapsible = true;
-        /** Detect if accordion collapsed or not. */
-        this.collapsed = true;
-        /** Represents the direction of the layout. */
-        this.dir = document.dir || 'rtl';
-    }
-    directionChangedHandler(event) {
-        this.dir = event.detail.dir;
-    }
-    handleCollapse(event) {
-        this.collapsed = event.detail.payload.collapsed;
-    }
-    setcollapsibleProp() {
-        const head = this.host.querySelector('salla-accordion-head');
-        if (this.collapsible && head) {
-            head.setAttribute('collapsible', 'true');
-            head.setAttribute('collapsed', this.collapsed.toString());
-        }
-    }
-    componentDidRender() {
-        this.setcollapsibleProp();
-        const body = this.host.querySelector('salla-accordion-body');
-        if (this.collapsible) {
-            this.host.setAttribute('data-collapsed', this.collapsed.toString());
-            body === null || body === void 0 ? void 0 : body.setAttribute('data-collapsed', this.collapsed.toString());
-        }
-    }
-    render() {
-        return (h(Host, { key: '30e906d87cba59e197e71460bb24e578455f2d28', class: `s-accordion-wrapper ${this.dir}`, "data-collapsed": this.collapsed.toString() }, h("slot", { key: '8c26efc12856022567e5abe587c7537a5776285b' })));
-    }
-    get host() { return getElement(this); }
-};
-SallaAccordion.style = sallaAccordionCss;
-
-export { SallaAccordion as salla_accordion };
-//# sourceMappingURL=salla-accordion.entry.js.map
-
-//# sourceMappingURL=salla-accordion.entry.js.map

package/dist/esm/salla-accordion.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"salla-accordion.entry.js","sources":["src/components/salla-accordion/salla-accordion.scss?tag=salla-accordion","src/components/salla-accordion/salla-accordion.tsx"],"sourcesContent":["\n","import { Component, Host, h, Element, Prop, State, Listen } from '@stencil/core';\n\n/**\n * @salla/ui-components\n * The `salla-accordion` component represents an accordion element.\n * Use this component to encapsulate content within a collapsible section.\n */\n@Component({\n  tag: 'salla-accordion',\n  styleUrl: 'salla-accordion.scss',\n  shadow: false\n})\nexport class SallaAccordion {\n  /** Reference to the host element. */\n  @Element() host: HTMLElement;\n\n  /** Should the accordion be collapsible or not. Default is true. */\n  @Prop() collapsible: boolean = true;\n\n  /** Detect if accordion collapsed or not. */\n  @Prop({ mutable: true, reflect: true }) collapsed: boolean = true;\n\n  /** Represents the direction of the layout. */\n  @State() dir: string = document.dir || 'rtl';\n\n  @Listen('salla::language.change', { target: 'document' })\n  directionChangedHandler(event: CustomEvent) {\n    this.dir = event.detail.dir;\n  }\n\n  @Listen('accordionToggle')\n  handleCollapse(event: CustomEvent) {\n    this.collapsed = event.detail.payload.collapsed;\n  }\n\n  private setcollapsibleProp(): void {\n    const head = this.host.querySelector('salla-accordion-head');\n    if (this.collapsible && head) {\n      head.setAttribute('collapsible', 'true');\n      head.setAttribute('collapsed', this.collapsed.toString());\n    }\n  }\n\n  componentDidRender() {\n    this.setcollapsibleProp();\n\n    const body = this.host.querySelector('salla-accordion-body');\n    if (this.collapsible) {\n      this.host.setAttribute('data-collapsed', this.collapsed.toString());\n      body?.setAttribute('data-collapsed', this.collapsed.toString());\n    }\n  }\n\n  render() {\n    return (\n      <Host class={`s-accordion-wrapper ${this.dir}`} data-collapsed={this.collapsed.toString()}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;;;;AAAA,MAAM,iBAAiB,GAAG,EAAE;;MCYf,cAAc,GAAA,MAAA;AAL3B,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAUU,QAAA,IAAW,CAAA,WAAA,GAAY,IAAI;;AAGK,QAAA,IAAS,CAAA,SAAA,GAAY,IAAI;;QAGxD,IAAA,CAAA,GAAG,GAAW,QAAQ,CAAC,GAAG,IAAI,KAAK;AAqC7C;AAlCC,IAAA,uBAAuB,CAAC,KAAkB,EAAA;QACxC,IAAI,CAAC,GAAG,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG;;AAI7B,IAAA,cAAc,CAAC,KAAkB,EAAA;QAC/B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS;;IAGzC,kBAAkB,GAAA;QACxB,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,sBAAsB,CAAC;AAC5D,QAAA,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,EAAE;AAC5B,YAAA,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC;AACxC,YAAA,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC;;;IAI7D,kBAAkB,GAAA;QAChB,IAAI,CAAC,kBAAkB,EAAE;QAEzB,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,sBAAsB,CAAC;AAC5D,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE;AACpB,YAAA,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,gBAAgB,EAAE,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC;AACnE,YAAA,IAAI,aAAJ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,YAAY,CAAC,gBAAgB,EAAE,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC;;;IAInE,MAAM,GAAA;AACJ,QAAA,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAuB,oBAAA,EAAA,IAAI,CAAC,GAAG,CAAA,CAAE,EAAkB,gBAAA,EAAA,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAA,EACvF,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;"}