xv-webcomponents 0.1.42 → 0.1.43

package/dist/xv-webcomponents/xv-login-modal.entry.js.map

@@ -0,0 +1 @@
+{"file":"xv-login-modal.entry.esm.js","mappings":"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","names":[],"sources":["src/components/xv-login-modal/xv-login-modal.scss?tag=xv-login-modal&encapsulation=shadow","src/components/xv-login-modal/xv-login-modal.tsx"],"sourcesContent":["@import '../../global.scss';\n","import { Component, Event, EventEmitter, h, Prop, State } from '@stencil/core';\n\ntype OAuthProvider = {\n  displayName: string;\n  providerName: string;\n  icon: string;\n  buttonClass: string;\n};\n\n@Component({\n  tag: 'xv-login-modal',\n  styleUrl: 'xv-login-modal.scss',\n  shadow: true,\n})\nexport class XvLoginModal {\n  @Prop() visible: boolean = false;\n  @Event() close: EventEmitter<void>;\n  @State() oauthProviders: OAuthProvider[] = [];\n  @State() bookNow: boolean = false;\n  @State() returnUrl: string = '/';\n  @State() passwordLoginEnabled: boolean = true;\n  @State() oauthLoginEnabled: boolean = true;\n  @State() passwordRegistrationEnabled: boolean = true;\n  @State() configurationName: string = 'Xv';\n  @State() xvMvcConfigName: string = 'Xv';\n  @State() contactUrl: string = 'https://sitefinity-qa.crossvertise.com/ueber-uns/kontakt';\n\n  componentWillLoad() {\n    this.setReturnUrl();\n    this.readMetaNavCookie();\n    this.oauthProviders = [\n      {\n        displayName: 'Google',\n        providerName: 'Google',\n        icon: 'fa fa-google',\n        buttonClass: 'btn btn-block btn-google-primary btn-primary',\n      },\n    ];\n  }\n\n  private setReturnUrl() {\n    const params = new URLSearchParams(window.location.search);\n    let url = params.get('returnUrl') || window.location.href;\n    if (url.toLowerCase().includes('resetpassword')) {\n      url = '/';\n    }\n    this.returnUrl = url;\n  }\n\n  private readMetaNavCookie() {\n    const metaNavCookie = document.cookie\n      .split('; ')\n      .find(row => row.startsWith('metaNav='));\n    if (!metaNavCookie) return;\n    try {\n      const cookieValue = decodeURIComponent(metaNavCookie.split('=')[1]);\n      const metaNavObj = JSON.parse(cookieValue);\n      this.passwordLoginEnabled = !!metaNavObj.PasswordLoginEnabled;\n      this.oauthLoginEnabled = !!metaNavObj.oauthLoginEnabled;\n      this.passwordRegistrationEnabled = !!metaNavObj.PasswordRegistrationEnabled;\n      this.configurationName = metaNavObj.ConfigurationName;\n      this.xvMvcConfigName = metaNavObj.XvMvcConfigName;\n      this.contactUrl = metaNavObj.ContactUrl;\n    } catch (e) {\n      console.warn('Could not parse metaNav cookie:', e);\n    }\n  }\n\n  private handleClose = () => {\n    this.close.emit();\n  };\n\n  private renderPasswordLogin() {\n    if (!this.passwordLoginEnabled) return null;\n    return (\n      <label class=\"pull-right spacer\">\n        <a href=\"/de-de/mycrossvertise/account/lostpassword\" target=\"_blank\" rel=\"noopener\">\n          Passwort vergessen?\n        </a>\n      </label>\n    );\n  }\n\n  private renderOAuthProviders() {\n    if (!this.oauthLoginEnabled) return null;\n    return (\n      <div class=\"row\">\n        <div class=\"col-xs-12\">\n          <div class=\"col-xs-12\">\n            <div class=\"row spacer spacer-bottom\">\n              <div class=\"col-xs-5\"><hr /></div>\n              <div class=\"col-xs-2 text-center placeholder\">oder</div>\n              <div class=\"col-xs-5\"><hr /></div>\n              <div class=\"col-xs-12\">\n                <span>Alternative Anmeldung:</span>\n              </div>\n            </div>\n          </div>\n          <div class=\"col-sm-12\">\n            <div class=\"col-xs-12 no-padding-right\">\n              <form\n                method=\"POST\"\n                class=\"spacer\"\n                action=\"/de-de/mycrossvertise/account/externallogin\"\n              >\n                <div class=\"row\">\n                  {this.oauthProviders.map(provider => (\n                    <div class=\"col-xs-6 col-sm-3 no-padding-left padding-bottom-10 center-cell\">\n                      <button\n                        type=\"submit\"\n                        style={{ maxWidth: '125px' }}\n                        name=\"provider\"\n                        class={`cell-content btn btn-primary ${provider.buttonClass} btn-block`}\n                        value={provider.providerName}\n                        title={`Mit ${provider.displayName} anmelden`}\n                      >\n                        <i class={`${provider.icon} pull-left`}></i>\n                        <span>{provider.displayName}</span>\n                      </button>\n                    </div>\n                  ))}\n                </div>\n                <input type=\"hidden\" name=\"BookNow\" value={this.bookNow.toString()} />\n              </form>\n            </div>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  private renderFooter() {\n    if (!this.passwordRegistrationEnabled && this.configurationName !== this.xvMvcConfigName) return null;\n    return (\n      <div class=\"modal-footer\">\n        <div class=\"col-sm-12 text-left\">\n          {this.passwordRegistrationEnabled && (\n            <div>\n              Noch kein Kunde?\n              <a\n                href={`/de-de/mycrossvertise/account/register?returnUrl=${encodeURIComponent(this.returnUrl)}`}\n              >\n                Jetzt kostenlos registrieren!\n              </a>\n            </div>\n          )}\n          {this.configurationName === this.xvMvcConfigName && (\n            <div>\n              <div class=\"spacer\">Sie sind bereits registriert, können sich aber nicht einloggen?</div>\n              <div>\n                <a href={this.contactUrl}>Kontaktieren Sie uns</a>, wir kümmern uns darum.\n              </div>\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n\n  render() {\n    if (!this.visible) return null;\n    return (\n      <div class=\"modal show\" style={{ display: 'block' }} id=\"login-modal\" tabIndex={-1} role=\"dialog\">\n        <div class=\"modal-dialog\" role=\"document\">\n          <div class=\"modal-content\">\n            <div class=\"modal-header\">\n              <div class=\"row\">\n                <div class=\"col-sm-10\">\n                  <div class=\"col-xs-12\">\n                    <h4 class=\"modal-title\">Login</h4>\n                  </div>\n                </div>\n                <div class=\"col-xs-1 pull-right\">\n                  <button onClick={this.handleClose} type=\"button\" class=\"close\">\n                    <span aria-hidden=\"true\">&times;</span>\n                  </button>\n                </div>\n              </div>\n            </div>\n            <div class=\"modal-body\">\n              <div class=\"row\">\n                <div class=\"col-sm-12\">\n                  <form\n                    autoComplete=\"off\"\n                    id=\"logon-modal-form\"\n                    action={`/de-de/mycrossvertise/account/logon?returnUrl=${encodeURIComponent(this.returnUrl)}`}\n                    method=\"post\"\n                    class=\"spacer\"\n                  >\n                    <input type=\"hidden\" name=\"returnUrl\" value={this.returnUrl} />\n                    <div class=\"form-group spacer-bottom\">\n                      <div class=\"control-label col-xs-12\">\n                        <label htmlFor=\"LoginPopup.UserName\">E-Mail</label>\n                        <strong class=\"text-danger\">*</strong>\n                      </div>\n                      <div class=\"col-xs-12\">\n                        <input class=\"form-control\" id=\"userName\" name=\"UserName\" type=\"text\" tabIndex={1} />\n                      </div>\n                    </div>\n                    <div class=\"form-group spacer\">\n                      <div class=\"control-label col-xs-6\">\n                        <label class=\"spacer\" htmlFor=\"LoginPopup.Password\">Passwort</label>\n                        <strong class=\"text-danger spacer\">*</strong>\n                      </div>\n                      <div class=\"col-xs-6\">\n                        {this.renderPasswordLogin()}\n                      </div>\n                      <div class=\"col-xs-12\">\n                        <input class=\"form-control\" id=\"password\" name=\"Password\" type=\"password\" tabIndex={2} />\n                      </div>\n                    </div>\n                    <div class=\"form-group spacer\">\n                      <div class=\"col-xs-12\">\n                        <button class=\"btn btn-primary btn-lg btn-block spacer\" type=\"submit\" tabIndex={3}>\n                          Anmelden\n                        </button>\n                      </div>\n                    </div>\n                    <div class=\"form-group\">\n                      <div class=\"checkbox col-xs-12\">\n                        <label htmlFor=\"RememberMe\">\n                          <input id=\"RememberMe\" name=\"RememberMe\" type=\"checkbox\" value=\"true\" />\n                          Angemeldet bleiben?\n                        </label>\n                      </div>\n                    </div>\n                  </form>\n                </div>\n              </div>\n              {this.renderOAuthProviders()}\n            </div>\n            {this.renderFooter()}\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/xv-webcomponents/xv-modal-v2.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xv-modal-v2.entry.esm.js","sources":["src/components/xv-modal/xv-modal.scss?tag=xv-modal-v2&encapsulation=shadow","src/components/xv-modal/xv-modal.tsx"],"sourcesContent":[":host {\r\n  display: inline-flex;\r\n\r\n  .backdrop {\r\n    position: fixed;\r\n    inset: 0;\r\n    background: rgba(0, 0, 0, 0.4);\r\n    opacity: 0;\r\n    pointer-events: none;\r\n    transition: opacity 0.3s ease;\r\n    z-index: 1000;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n  }\r\n\r\n  .modal {\r\n    display: flex;\r\n    flex-direction: column;\r\n    max-height: 60vh;\r\n    max-width: 960px;\r\n    position: relative;\r\n    animation: fadeIn 0.25s ease;\r\n    padding-block: var(--gap-md, 16px);\r\n    background: var(--layer-02, #FFF);\r\n    box-shadow: 0 6px 10px 4px rgba(39, 52, 53, 0.15), 0 2px 3px 0 rgba(39, 52, 53, 0.30);\r\n\r\n    &_header {\r\n      position: relative;\r\n      padding-inline: var(--gap-md, 16px);\r\n      &__title {\r\n        color: var(--text-text-primary, #333);\r\n        font-family: var(--ff-heading, \"Gill Sans\");\r\n        font-size: var(--fz-xl, 21px);\r\n        line-height: 133.333%;\r\n        margin: 0 20px 0 0;\r\n      }\r\n    }\r\n\r\n    &_content {\r\n      padding: var(--gap-md, 16px);\r\n      overflow: visible;\r\n      &.overflow {\r\n        overflow: auto;\r\n      }\r\n    }\r\n\r\n    &_footer {\r\n      position: relative;\r\n      padding-inline: var(--gap-md, 16px);\r\n    }\r\n\r\n    &_close {\r\n      z-index: +1;\r\n      cursor: pointer;\r\n      border: none;\r\n      outline: none;\r\n      font-size: 28px;\r\n      background-color: transparent;\r\n      position: absolute;\r\n      right: 10px;\r\n      top: 10px;\r\n      transition: 350ms ease-in-out opacity;\r\n      &:hover {\r\n        opacity: 0.6;\r\n      }\r\n      &:active {\r\n        opacity: 0.3;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n:host([open]) {\r\n  .backdrop {\r\n    opacity: 1;\r\n    pointer-events: all;\r\n  }\r\n}\r\n\r\n:host([size=\"xs\"]) {\r\n  .modal {\r\n    max-width: min(300px, 90vw);\r\n  }\r\n}\r\n:host([size=\"sm\"]) {\r\n  .modal {\r\n    max-width: min(480px, 90vw);\r\n  }\r\n}\r\n:host([size=\"md\"]) {\r\n  .modal {\r\n    max-width: min(600px, 90vw);\r\n  }\r\n}\r\n:host([size=\"lg\"]) {\r\n  .modal {\r\n    max-width: min(960px, 90vw);\r\n  }\r\n}\r\n:host([size=\"xl\"]) {\r\n  .modal {\r\n    max-width: min(1200px, 80vw);\r\n  }\r\n}\r\n\r\n@keyframes fadeIn {\r\n  from {\r\n    transform: translateY(-10px);\r\n    opacity: 0;\r\n  }\r\n  to {\r\n    transform: translateY(0);\r\n    opacity: 1;\r\n  }\r\n}\r\n","import { Component, Host, h, Prop, Element, Event, EventEmitter, Method } from '@stencil/core';\r\nimport { SIZE_VAR } from '../../types/enum';\r\n\r\n@Component({\r\n  tag: 'xv-modal-v2',\r\n  styleUrl: 'xv-modal.scss',\r\n  shadow: true,\r\n})\r\nexport class XvModal {\r\n  @Element() el: HTMLElement;\r\n  /**\r\n   * Is modal opened\r\n   */\r\n  @Prop({ reflect: true, mutable: true }) open: boolean = false;\r\n  /**\r\n   * If true then modal not be closed on backdrop click\r\n   */\r\n  @Prop({ reflect: true }) permanent: boolean = false;\r\n  /**\r\n   * Size of modal. But max size is 90% view width\r\n   */\r\n  @Prop({ reflect: true }) size: SIZE_VAR = SIZE_VAR.MD;\r\n  /**\r\n   * When need scroll modal content\r\n   */\r\n  @Prop({ reflect: true }) overflow: boolean = true;\r\n\r\n  @Event({ eventName: 'openChange' }) openChange!: EventEmitter<boolean>;\r\n\r\n  private triggerEl: HTMLElement | null = null;\r\n\r\n  @Method()\r\n  async openModal() {\r\n    this.open = true;\r\n    this.openChange?.emit(this.open);\r\n    return this.open\r\n  };\r\n\r\n  @Method()\r\n  async closeModal() {\r\n    this.open = false;\r\n    this.openChange?.emit(this.open);\r\n    return this.open\r\n  }\r\n\r\n  private onBackdropClick = async (e: MouseEvent) => {\r\n    if (this.permanent) return;\r\n    // click on backdrop\r\n    if (e.target === e.currentTarget) {\r\n      await this.closeModal();\r\n    }\r\n  };\r\n\r\n  private removeTriggerListener = () => {\r\n    this.triggerEl?.removeEventListener('click', this.openModal.bind(this));\r\n  };\r\n\r\n  private setupTrigger = () => {\r\n    this.removeTriggerListener();\r\n    const slot = this.el.shadowRoot.querySelector('slot[name=\"trigger\"]') as HTMLSlotElement;\r\n\r\n    if (slot) {\r\n      const assigned = slot.assignedElements();\r\n      if (assigned.length > 0) {\r\n        this.triggerEl = assigned[0] as HTMLElement;\r\n        this.triggerEl.addEventListener('click', this.openModal.bind(this));\r\n      }\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host role=\"dialog\" size={this.size} id={this.el.id}>\r\n        <slot name=\"trigger\" onSlotchange={this.setupTrigger} />\r\n\r\n        <div class={{ backdrop: true }} onClick={this.onBackdropClick}>\r\n          <div class=\"modal\">\r\n            <button class=\"modal_close\" onClick={this.closeModal.bind(this)}>&times;</button>\r\n            <div class=\"modal_header\">\r\n              <slot name=\"header\">\r\n                {this.el?.title && <h5 class=\"modal_header__title\">{this.el.title}</h5>}\r\n              </slot>\r\n            </div>\r\n\r\n            <div class={{ 'modal_content': true, overflow: this.overflow }}>\r\n              <slot />\r\n            </div>\r\n\r\n            <div class=\"modal_footer\">\r\n              <slot name=\"footer\" />\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.removeTriggerListener();\r\n  }\r\n}\r\n"],"names":[],"mappings":"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"}

package/dist/xv-webcomponents/xv-modal-v2.entry.js

@@ -0,0 +1,78 @@
+import { r as registerInstance, a as createEvent, h, d as Host, e as getElement } from './index-rZAC0WRb.js';
+import { S as SIZE_VAR } from './enum-DTBL51oP.js';
+
+const xvModalCss = ":host{display:inline-flex}:host .backdrop{position:fixed;inset:0;background:rgba(0, 0, 0, 0.4);opacity:0;pointer-events:none;transition:opacity 0.3s ease;z-index:1000;display:flex;align-items:center;justify-content:center}:host .modal{display:flex;flex-direction:column;max-height:60vh;max-width:960px;position:relative;animation:fadeIn 0.25s ease;padding-block:var(--gap-md, 16px);background:var(--layer-02, #FFF);box-shadow:0 6px 10px 4px rgba(39, 52, 53, 0.15), 0 2px 3px 0 rgba(39, 52, 53, 0.3)}:host .modal_header{position:relative;padding-inline:var(--gap-md, 16px)}:host .modal_header__title{color:var(--text-text-primary, #333);font-family:var(--ff-heading, \"Gill Sans\");font-size:var(--fz-xl, 21px);line-height:133.333%;margin:0 20px 0 0}:host .modal_content{padding:var(--gap-md, 16px);overflow:visible}:host .modal_content.overflow{overflow:auto}:host .modal_footer{position:relative;padding-inline:var(--gap-md, 16px)}:host .modal_close{z-index:1;cursor:pointer;border:none;outline:none;font-size:28px;background-color:transparent;position:absolute;right:10px;top:10px;transition:350ms ease-in-out opacity}:host .modal_close:hover{opacity:0.6}:host .modal_close:active{opacity:0.3}:host([open]) .backdrop{opacity:1;pointer-events:all}:host([size=xs]) .modal{max-width:min(300px, 90vw)}:host([size=sm]) .modal{max-width:min(480px, 90vw)}:host([size=md]) .modal{max-width:min(600px, 90vw)}:host([size=lg]) .modal{max-width:min(960px, 90vw)}:host([size=xl]) .modal{max-width:min(1200px, 80vw)}@keyframes fadeIn{from{transform:translateY(-10px);opacity:0}to{transform:translateY(0);opacity:1}}";
+
+const XvModal = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.openChange = createEvent(this, "openChange", 7);
+        /**
+         * Is modal opened
+         */
+        this.open = false;
+        /**
+         * If true then modal not be closed on backdrop click
+         */
+        this.permanent = false;
+        /**
+         * Size of modal. But max size is 90% view width
+         */
+        this.size = SIZE_VAR.MD;
+        /**
+         * When need scroll modal content
+         */
+        this.overflow = true;
+        this.triggerEl = null;
+        this.onBackdropClick = async (e) => {
+            if (this.permanent)
+                return;
+            // click on backdrop
+            if (e.target === e.currentTarget) {
+                await this.closeModal();
+            }
+        };
+        this.removeTriggerListener = () => {
+            var _a;
+            (_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', this.openModal.bind(this));
+        };
+        this.setupTrigger = () => {
+            this.removeTriggerListener();
+            const slot = this.el.shadowRoot.querySelector('slot[name="trigger"]');
+            if (slot) {
+                const assigned = slot.assignedElements();
+                if (assigned.length > 0) {
+                    this.triggerEl = assigned[0];
+                    this.triggerEl.addEventListener('click', this.openModal.bind(this));
+                }
+            }
+        };
+    }
+    async openModal() {
+        var _a;
+        this.open = true;
+        (_a = this.openChange) === null || _a === void 0 ? void 0 : _a.emit(this.open);
+        return this.open;
+    }
+    ;
+    async closeModal() {
+        var _a;
+        this.open = false;
+        (_a = this.openChange) === null || _a === void 0 ? void 0 : _a.emit(this.open);
+        return this.open;
+    }
+    render() {
+        var _a;
+        return (h(Host, { key: '0a56d578c7bbe7ad43737926b2ef5071e355ab94', role: "dialog", size: this.size, id: this.el.id }, h("slot", { key: '6568ce4923301038eeb020205a3845d9c65c9af5', name: "trigger", onSlotchange: this.setupTrigger }), h("div", { key: '3ef413484d6e8154f197c1aa8a65e2dd0d6bc383', class: { backdrop: true }, onClick: this.onBackdropClick }, h("div", { key: '82dad51a77c46fea6b3e73659c361201b1d1621f', class: "modal" }, h("button", { key: '9e4a5186c145a9d96f58d6332a02aacb4762d567', class: "modal_close", onClick: this.closeModal.bind(this) }, "\u00D7"), h("div", { key: '1f9259f32a4363ccb87c2c111f29500cd425340a', class: "modal_header" }, h("slot", { key: '399d7c863457aa9030affd7ca0b6e3cd908c5639', name: "header" }, ((_a = this.el) === null || _a === void 0 ? void 0 : _a.title) && h("h5", { key: '1159b73ed5624aeee0ea66a7d5cb363237fbef3b', class: "modal_header__title" }, this.el.title))), h("div", { key: '6597dcb36edc389965dfb03e06471c845918a0a8', class: { 'modal_content': true, overflow: this.overflow } }, h("slot", { key: '179310bcca74b8445117e2e2d0566f3fe0f0bd16' })), h("div", { key: '3a753f861d914df2a33dac30f9edb22ee121c651', class: "modal_footer" }, h("slot", { key: '27178fb54e549efc0dc11f4dde05a0fe48e9043e', name: "footer" }))))));
+    }
+    disconnectedCallback() {
+        this.removeTriggerListener();
+    }
+    get el() { return getElement(this); }
+};
+XvModal.style = xvModalCss;
+
+export { XvModal as xv_modal_v2 };
+//# sourceMappingURL=xv-modal-v2.entry.esm.js.map
+
+//# sourceMappingURL=xv-modal-v2.entry.js.map

package/dist/xv-webcomponents/xv-modal-v2.entry.js.map

@@ -0,0 +1 @@
+{"file":"xv-modal-v2.entry.esm.js","mappings":"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","names":[],"sources":["src/components/xv-modal/xv-modal.scss?tag=xv-modal-v2&encapsulation=shadow","src/components/xv-modal/xv-modal.tsx"],"sourcesContent":[":host {\r\n  display: inline-flex;\r\n\r\n  .backdrop {\r\n    position: fixed;\r\n    inset: 0;\r\n    background: rgba(0, 0, 0, 0.4);\r\n    opacity: 0;\r\n    pointer-events: none;\r\n    transition: opacity 0.3s ease;\r\n    z-index: 1000;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n  }\r\n\r\n  .modal {\r\n    display: flex;\r\n    flex-direction: column;\r\n    max-height: 60vh;\r\n    max-width: 960px;\r\n    position: relative;\r\n    animation: fadeIn 0.25s ease;\r\n    padding-block: var(--gap-md, 16px);\r\n    background: var(--layer-02, #FFF);\r\n    box-shadow: 0 6px 10px 4px rgba(39, 52, 53, 0.15), 0 2px 3px 0 rgba(39, 52, 53, 0.30);\r\n\r\n    &_header {\r\n      position: relative;\r\n      padding-inline: var(--gap-md, 16px);\r\n      &__title {\r\n        color: var(--text-text-primary, #333);\r\n        font-family: var(--ff-heading, \"Gill Sans\");\r\n        font-size: var(--fz-xl, 21px);\r\n        line-height: 133.333%;\r\n        margin: 0 20px 0 0;\r\n      }\r\n    }\r\n\r\n    &_content {\r\n      padding: var(--gap-md, 16px);\r\n      overflow: visible;\r\n      &.overflow {\r\n        overflow: auto;\r\n      }\r\n    }\r\n\r\n    &_footer {\r\n      position: relative;\r\n      padding-inline: var(--gap-md, 16px);\r\n    }\r\n\r\n    &_close {\r\n      z-index: +1;\r\n      cursor: pointer;\r\n      border: none;\r\n      outline: none;\r\n      font-size: 28px;\r\n      background-color: transparent;\r\n      position: absolute;\r\n      right: 10px;\r\n      top: 10px;\r\n      transition: 350ms ease-in-out opacity;\r\n      &:hover {\r\n        opacity: 0.6;\r\n      }\r\n      &:active {\r\n        opacity: 0.3;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n:host([open]) {\r\n  .backdrop {\r\n    opacity: 1;\r\n    pointer-events: all;\r\n  }\r\n}\r\n\r\n:host([size=\"xs\"]) {\r\n  .modal {\r\n    max-width: min(300px, 90vw);\r\n  }\r\n}\r\n:host([size=\"sm\"]) {\r\n  .modal {\r\n    max-width: min(480px, 90vw);\r\n  }\r\n}\r\n:host([size=\"md\"]) {\r\n  .modal {\r\n    max-width: min(600px, 90vw);\r\n  }\r\n}\r\n:host([size=\"lg\"]) {\r\n  .modal {\r\n    max-width: min(960px, 90vw);\r\n  }\r\n}\r\n:host([size=\"xl\"]) {\r\n  .modal {\r\n    max-width: min(1200px, 80vw);\r\n  }\r\n}\r\n\r\n@keyframes fadeIn {\r\n  from {\r\n    transform: translateY(-10px);\r\n    opacity: 0;\r\n  }\r\n  to {\r\n    transform: translateY(0);\r\n    opacity: 1;\r\n  }\r\n}\r\n","import { Component, Host, h, Prop, Element, Event, EventEmitter, Method } from '@stencil/core';\r\nimport { SIZE_VAR } from '../../types/enum';\r\n\r\n@Component({\r\n  tag: 'xv-modal-v2',\r\n  styleUrl: 'xv-modal.scss',\r\n  shadow: true,\r\n})\r\nexport class XvModal {\r\n  @Element() el: HTMLElement;\r\n  /**\r\n   * Is modal opened\r\n   */\r\n  @Prop({ reflect: true, mutable: true }) open: boolean = false;\r\n  /**\r\n   * If true then modal not be closed on backdrop click\r\n   */\r\n  @Prop({ reflect: true }) permanent: boolean = false;\r\n  /**\r\n   * Size of modal. But max size is 90% view width\r\n   */\r\n  @Prop({ reflect: true }) size: SIZE_VAR = SIZE_VAR.MD;\r\n  /**\r\n   * When need scroll modal content\r\n   */\r\n  @Prop({ reflect: true }) overflow: boolean = true;\r\n\r\n  @Event({ eventName: 'openChange' }) openChange!: EventEmitter<boolean>;\r\n\r\n  private triggerEl: HTMLElement | null = null;\r\n\r\n  @Method()\r\n  async openModal() {\r\n    this.open = true;\r\n    this.openChange?.emit(this.open);\r\n    return this.open\r\n  };\r\n\r\n  @Method()\r\n  async closeModal() {\r\n    this.open = false;\r\n    this.openChange?.emit(this.open);\r\n    return this.open\r\n  }\r\n\r\n  private onBackdropClick = async (e: MouseEvent) => {\r\n    if (this.permanent) return;\r\n    // click on backdrop\r\n    if (e.target === e.currentTarget) {\r\n      await this.closeModal();\r\n    }\r\n  };\r\n\r\n  private removeTriggerListener = () => {\r\n    this.triggerEl?.removeEventListener('click', this.openModal.bind(this));\r\n  };\r\n\r\n  private setupTrigger = () => {\r\n    this.removeTriggerListener();\r\n    const slot = this.el.shadowRoot.querySelector('slot[name=\"trigger\"]') as HTMLSlotElement;\r\n\r\n    if (slot) {\r\n      const assigned = slot.assignedElements();\r\n      if (assigned.length > 0) {\r\n        this.triggerEl = assigned[0] as HTMLElement;\r\n        this.triggerEl.addEventListener('click', this.openModal.bind(this));\r\n      }\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host role=\"dialog\" size={this.size} id={this.el.id}>\r\n        <slot name=\"trigger\" onSlotchange={this.setupTrigger} />\r\n\r\n        <div class={{ backdrop: true }} onClick={this.onBackdropClick}>\r\n          <div class=\"modal\">\r\n            <button class=\"modal_close\" onClick={this.closeModal.bind(this)}>&times;</button>\r\n            <div class=\"modal_header\">\r\n              <slot name=\"header\">\r\n                {this.el?.title && <h5 class=\"modal_header__title\">{this.el.title}</h5>}\r\n              </slot>\r\n            </div>\r\n\r\n            <div class={{ 'modal_content': true, overflow: this.overflow }}>\r\n              <slot />\r\n            </div>\r\n\r\n            <div class=\"modal_footer\">\r\n              <slot name=\"footer\" />\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.removeTriggerListener();\r\n  }\r\n}\r\n"],"version":3}

package/dist/xv-webcomponents/xv-notification-v2.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xv-notification-v2.entry.esm.js","sources":["src/components/xv-notification/_vars.ts","src/components/xv-notification/xv-notification.scss?tag=xv-notification-v2&encapsulation=shadow","src/components/xv-notification/xv-notification.tsx"],"sourcesContent":["export enum NOTIFICATION_VARIANTS {\r\n  INFO = 'info',\r\n  SUCCESS = 'success',\r\n  WARNING = 'warning',\r\n  ERROR = 'error'\r\n}\r\n",":host {\r\n  --notification-icon-size: 20px;\r\n\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: flex-start;\r\n  justify-content: flex-start;\r\n  border-radius: 3px;\r\n  padding: var(--gap-md, 16px);\r\n  column-gap: var(--gap-md, 16px);\r\n  border: 1px solid;\r\n\r\n  .content {\r\n    flex: 1;\r\n    text-align: left;\r\n    color: var(--text-primary, #333);\r\n    font-family: var(--ff-body, Tahoma);\r\n    font-size: var(--fz-md, 14px);\r\n    line-height: 128%;\r\n    letter-spacing: 0.16px;\r\n    display: flex;\r\n    flex-direction: column;\r\n    row-gap: var(--spacing-06, 24px);\r\n\r\n    &_title {\r\n      text-align: left;\r\n      margin: 0;\r\n      padding: 0;\r\n      font-weight: 700;\r\n      line-height: var(--notification-icon-size);\r\n    }\r\n  }\r\n\r\n  .icon {\r\n    width: var(--notification-icon-size);\r\n    height: var(--notification-icon-size);\r\n    font-size: var(--notification-icon-size);\r\n    fill: currentColor;\r\n  }\r\n\r\n  .close {\r\n    --notification-close-size: 16px;\r\n\r\n    background-color: transparent;\r\n    border: none;\r\n    width: var(--notification-close-size);\r\n    height: var(--notification-close-size);\r\n    min-width: var(--notification-close-size);\r\n    min-height: var(--notification-close-size);\r\n    position: relative;\r\n    padding: 0;\r\n    margin: 0;\r\n    box-sizing: border-box;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    cursor: pointer;\r\n    transition: 300ms ease-in-out opacity;\r\n\r\n    &:after, &:before {\r\n      content: '';\r\n      position: absolute;\r\n      top: calc(50% - (var(--notification-close-size) / 2));\r\n      left: calc(50% - 1px);\r\n      display: inline-block;\r\n      width: 2px;\r\n      height: 90%;\r\n      background-color: var(--button-tertiary, #273435);\r\n    }\r\n\r\n    &:after {\r\n      transform: rotate(45deg);\r\n    }\r\n\r\n    &:before {\r\n      transform: rotate(-45deg);\r\n    }\r\n\r\n    &:hover {\r\n      opacity: 0.7;\r\n    }\r\n\r\n    &:active {\r\n      opacity: 0.3;\r\n    }\r\n  }\r\n\r\n  ::slotted([slot=\"footer\"]) {\r\n    margin: 0;\r\n    padding: 0;\r\n  }\r\n}\r\n\r\n:host([type=\"info\"]) {\r\n  border-color: var(--support-info, #1B87B2);\r\n  background-color: var(--support-info-background, #E2F5F8);\r\n  .icon {\r\n    color: var(--support-info, #1B87B2);\r\n  }\r\n}\r\n\r\n:host([type=\"success\"]) {\r\n  border-color: var(--support-success, #97BF0D);\r\n  background-color: var(--support-success-background, #F4F7E5);\r\n  .icon {\r\n    color: var(--support-success, #1B87B2);\r\n  }\r\n}\r\n\r\n:host([type=\"warning\"]) {\r\n  border-color: var(--support-warning, #FF7F04);\r\n  background-color: var(--support-warning-backround, #FFF9C2);\r\n  .icon {\r\n    color: var(--support-warning, #FF7F04);\r\n  }\r\n}\r\n\r\n:host([type=\"error\"]) {\r\n  border-color: var(--support-error, #F1290E);\r\n  background-color: var(--support-error-background, #FEE9E8);\r\n  .icon {\r\n    color: var(--support-error, #F1290E);\r\n  }\r\n}\r\n","import { Component, Host, h, Prop, Element, Event, EventEmitter } from '@stencil/core';\r\nimport { NOTIFICATION_VARIANTS } from './_vars';\r\n\r\n@Component({\r\n  tag: 'xv-notification-v2',\r\n  styleUrl: 'xv-notification.scss',\r\n  shadow: true,\r\n  assetsDirs: ['xv-notification/icons']\r\n})\r\nexport class XvNotification {\r\n  @Element() el: HTMLElement;\r\n  @Prop({ reflect: true }) variant: NOTIFICATION_VARIANTS = NOTIFICATION_VARIANTS.INFO;\r\n  @Prop({ reflect: true }) dismissible: boolean = false;\r\n  @Event() close: EventEmitter<MouseEvent>;\r\n\r\n  private closeHandle = (e: MouseEvent) => this.close.emit(e);\r\n\r\n  render() {\r\n    return (\r\n      <Host class=\"xv-notification\" type={this.variant}>\r\n        {this.renderIcon(this.variant)}\r\n\r\n        <div class=\"content\">\r\n          <div class=\"content_wrapper\">\r\n            {this.el.title && <h5 class=\"content_title\">{this.el.title}</h5>}\r\n            <slot></slot>\r\n          </div>\r\n          <slot name=\"footer\"></slot>\r\n        </div>\r\n\r\n        {this.dismissible && <button class=\"close\" onClick={this.closeHandle} />}\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  private renderIcon = (variant: NOTIFICATION_VARIANTS, cls: string = 'icon') => {\r\n    switch (variant) {\r\n      case NOTIFICATION_VARIANTS.ERROR: {\r\n        return (\r\n          <svg class={cls} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\r\n            <path\r\n              d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z\" />\r\n          </svg>\r\n        );\r\n      }\r\n      case NOTIFICATION_VARIANTS.INFO: {\r\n        return (\r\n          <svg class={cls} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\r\n            <path\r\n              d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z\" />\r\n          </svg>\r\n        );\r\n      }\r\n      case NOTIFICATION_VARIANTS.SUCCESS: {\r\n        return (\r\n          <svg class={cls} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\r\n            <path\r\n              d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\" />\r\n          </svg>\r\n        )\r\n      }\r\n      case NOTIFICATION_VARIANTS.WARNING: {\r\n        return (\r\n          <svg class={cls} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\r\n            <path\r\n              d=\"M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z\" />\r\n          </svg>\r\n        );\r\n      }\r\n      default:\r\n        return null;\r\n    }\r\n  };\r\n}\r\n"],"names":[],"mappings":"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"}

package/dist/xv-webcomponents/xv-notification-v2.entry.js

@@ -0,0 +1,50 @@
+import { r as registerInstance, a as createEvent, h, d as Host, e as getElement } from './index-rZAC0WRb.js';
+
+var NOTIFICATION_VARIANTS;
+(function (NOTIFICATION_VARIANTS) {
+    NOTIFICATION_VARIANTS["INFO"] = "info";
+    NOTIFICATION_VARIANTS["SUCCESS"] = "success";
+    NOTIFICATION_VARIANTS["WARNING"] = "warning";
+    NOTIFICATION_VARIANTS["ERROR"] = "error";
+})(NOTIFICATION_VARIANTS || (NOTIFICATION_VARIANTS = {}));
+
+const xvNotificationCss = ":host{--notification-icon-size:20px;display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;border-radius:3px;padding:var(--gap-md, 16px);column-gap:var(--gap-md, 16px);border:1px solid}:host .content{flex:1;text-align:left;color:var(--text-primary, #333);font-family:var(--ff-body, Tahoma);font-size:var(--fz-md, 14px);line-height:128%;letter-spacing:0.16px;display:flex;flex-direction:column;row-gap:var(--spacing-06, 24px)}:host .content_title{text-align:left;margin:0;padding:0;font-weight:700;line-height:var(--notification-icon-size)}:host .icon{width:var(--notification-icon-size);height:var(--notification-icon-size);font-size:var(--notification-icon-size);fill:currentColor}:host .close{--notification-close-size:16px;background-color:transparent;border:none;width:var(--notification-close-size);height:var(--notification-close-size);min-width:var(--notification-close-size);min-height:var(--notification-close-size);position:relative;padding:0;margin:0;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:300ms ease-in-out opacity}:host .close:after,:host .close:before{content:\"\";position:absolute;top:calc(50% - var(--notification-close-size) / 2);left:calc(50% - 1px);display:inline-block;width:2px;height:90%;background-color:var(--button-tertiary, #273435)}:host .close:after{transform:rotate(45deg)}:host .close:before{transform:rotate(-45deg)}:host .close:hover{opacity:0.7}:host .close:active{opacity:0.3}:host ::slotted([slot=footer]){margin:0;padding:0}:host([type=info]){border-color:var(--support-info, #1B87B2);background-color:var(--support-info-background, #E2F5F8)}:host([type=info]) .icon{color:var(--support-info, #1B87B2)}:host([type=success]){border-color:var(--support-success, #97BF0D);background-color:var(--support-success-background, #F4F7E5)}:host([type=success]) .icon{color:var(--support-success, #1B87B2)}:host([type=warning]){border-color:var(--support-warning, #FF7F04);background-color:var(--support-warning-backround, #FFF9C2)}:host([type=warning]) .icon{color:var(--support-warning, #FF7F04)}:host([type=error]){border-color:var(--support-error, #F1290E);background-color:var(--support-error-background, #FEE9E8)}:host([type=error]) .icon{color:var(--support-error, #F1290E)}";
+
+const XvNotification = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.close = createEvent(this, "close", 7);
+        this.variant = NOTIFICATION_VARIANTS.INFO;
+        this.dismissible = false;
+        this.closeHandle = (e) => this.close.emit(e);
+        this.renderIcon = (variant, cls = 'icon') => {
+            switch (variant) {
+                case NOTIFICATION_VARIANTS.ERROR: {
+                    return (h("svg", { class: cls, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, h("path", { d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z" })));
+                }
+                case NOTIFICATION_VARIANTS.INFO: {
+                    return (h("svg", { class: cls, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, h("path", { d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z" })));
+                }
+                case NOTIFICATION_VARIANTS.SUCCESS: {
+                    return (h("svg", { class: cls, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, h("path", { d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z" })));
+                }
+                case NOTIFICATION_VARIANTS.WARNING: {
+                    return (h("svg", { class: cls, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, h("path", { d: "M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z" })));
+                }
+                default:
+                    return null;
+            }
+        };
+    }
+    render() {
+        return (h(Host, { key: '77b3d1f3ffce56939493d6eb6552571591cb132e', class: "xv-notification", type: this.variant }, this.renderIcon(this.variant), h("div", { key: 'c68af102f45795a4dfc3e8ffcbe0fd64508d1219', class: "content" }, h("div", { key: 'd6c496b1af00797a470f3169ed356581a15299d0', class: "content_wrapper" }, this.el.title && h("h5", { key: '5ad6447874279502162adcbe78d915c5e926c3d1', class: "content_title" }, this.el.title), h("slot", { key: '9b7488f2d4ebb16048b7ae9aed63c063fd6f3dd9' })), h("slot", { key: '3cb0c271ca8e851e9b33c88c6176e2c76543695a', name: "footer" })), this.dismissible && h("button", { key: 'ea55cf6883f2c289d6698ce59d1fd083e05a469c', class: "close", onClick: this.closeHandle })));
+    }
+    static get assetsDirs() { return ["xv-notification/icons"]; }
+    get el() { return getElement(this); }
+};
+XvNotification.style = xvNotificationCss;
+
+export { XvNotification as xv_notification_v2 };
+//# sourceMappingURL=xv-notification-v2.entry.esm.js.map
+
+//# sourceMappingURL=xv-notification-v2.entry.js.map

package/dist/xv-webcomponents/xv-notification-v2.entry.js.map

@@ -0,0 +1 @@
+{"file":"xv-notification-v2.entry.esm.js","mappings":"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","names":[],"sources":["src/components/xv-notification/_vars.ts","src/components/xv-notification/xv-notification.scss?tag=xv-notification-v2&encapsulation=shadow","src/components/xv-notification/xv-notification.tsx"],"sourcesContent":["export enum NOTIFICATION_VARIANTS {\r\n  INFO = 'info',\r\n  SUCCESS = 'success',\r\n  WARNING = 'warning',\r\n  ERROR = 'error'\r\n}\r\n",":host {\r\n  --notification-icon-size: 20px;\r\n\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: flex-start;\r\n  justify-content: flex-start;\r\n  border-radius: 3px;\r\n  padding: var(--gap-md, 16px);\r\n  column-gap: var(--gap-md, 16px);\r\n  border: 1px solid;\r\n\r\n  .content {\r\n    flex: 1;\r\n    text-align: left;\r\n    color: var(--text-primary, #333);\r\n    font-family: var(--ff-body, Tahoma);\r\n    font-size: var(--fz-md, 14px);\r\n    line-height: 128%;\r\n    letter-spacing: 0.16px;\r\n    display: flex;\r\n    flex-direction: column;\r\n    row-gap: var(--spacing-06, 24px);\r\n\r\n    &_title {\r\n      text-align: left;\r\n      margin: 0;\r\n      padding: 0;\r\n      font-weight: 700;\r\n      line-height: var(--notification-icon-size);\r\n    }\r\n  }\r\n\r\n  .icon {\r\n    width: var(--notification-icon-size);\r\n    height: var(--notification-icon-size);\r\n    font-size: var(--notification-icon-size);\r\n    fill: currentColor;\r\n  }\r\n\r\n  .close {\r\n    --notification-close-size: 16px;\r\n\r\n    background-color: transparent;\r\n    border: none;\r\n    width: var(--notification-close-size);\r\n    height: var(--notification-close-size);\r\n    min-width: var(--notification-close-size);\r\n    min-height: var(--notification-close-size);\r\n    position: relative;\r\n    padding: 0;\r\n    margin: 0;\r\n    box-sizing: border-box;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    cursor: pointer;\r\n    transition: 300ms ease-in-out opacity;\r\n\r\n    &:after, &:before {\r\n      content: '';\r\n      position: absolute;\r\n      top: calc(50% - (var(--notification-close-size) / 2));\r\n      left: calc(50% - 1px);\r\n      display: inline-block;\r\n      width: 2px;\r\n      height: 90%;\r\n      background-color: var(--button-tertiary, #273435);\r\n    }\r\n\r\n    &:after {\r\n      transform: rotate(45deg);\r\n    }\r\n\r\n    &:before {\r\n      transform: rotate(-45deg);\r\n    }\r\n\r\n    &:hover {\r\n      opacity: 0.7;\r\n    }\r\n\r\n    &:active {\r\n      opacity: 0.3;\r\n    }\r\n  }\r\n\r\n  ::slotted([slot=\"footer\"]) {\r\n    margin: 0;\r\n    padding: 0;\r\n  }\r\n}\r\n\r\n:host([type=\"info\"]) {\r\n  border-color: var(--support-info, #1B87B2);\r\n  background-color: var(--support-info-background, #E2F5F8);\r\n  .icon {\r\n    color: var(--support-info, #1B87B2);\r\n  }\r\n}\r\n\r\n:host([type=\"success\"]) {\r\n  border-color: var(--support-success, #97BF0D);\r\n  background-color: var(--support-success-background, #F4F7E5);\r\n  .icon {\r\n    color: var(--support-success, #1B87B2);\r\n  }\r\n}\r\n\r\n:host([type=\"warning\"]) {\r\n  border-color: var(--support-warning, #FF7F04);\r\n  background-color: var(--support-warning-backround, #FFF9C2);\r\n  .icon {\r\n    color: var(--support-warning, #FF7F04);\r\n  }\r\n}\r\n\r\n:host([type=\"error\"]) {\r\n  border-color: var(--support-error, #F1290E);\r\n  background-color: var(--support-error-background, #FEE9E8);\r\n  .icon {\r\n    color: var(--support-error, #F1290E);\r\n  }\r\n}\r\n","import { Component, Host, h, Prop, Element, Event, EventEmitter } from '@stencil/core';\r\nimport { NOTIFICATION_VARIANTS } from './_vars';\r\n\r\n@Component({\r\n  tag: 'xv-notification-v2',\r\n  styleUrl: 'xv-notification.scss',\r\n  shadow: true,\r\n  assetsDirs: ['xv-notification/icons']\r\n})\r\nexport class XvNotification {\r\n  @Element() el: HTMLElement;\r\n  @Prop({ reflect: true }) variant: NOTIFICATION_VARIANTS = NOTIFICATION_VARIANTS.INFO;\r\n  @Prop({ reflect: true }) dismissible: boolean = false;\r\n  @Event() close: EventEmitter<MouseEvent>;\r\n\r\n  private closeHandle = (e: MouseEvent) => this.close.emit(e);\r\n\r\n  render() {\r\n    return (\r\n      <Host class=\"xv-notification\" type={this.variant}>\r\n        {this.renderIcon(this.variant)}\r\n\r\n        <div class=\"content\">\r\n          <div class=\"content_wrapper\">\r\n            {this.el.title && <h5 class=\"content_title\">{this.el.title}</h5>}\r\n            <slot></slot>\r\n          </div>\r\n          <slot name=\"footer\"></slot>\r\n        </div>\r\n\r\n        {this.dismissible && <button class=\"close\" onClick={this.closeHandle} />}\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  private renderIcon = (variant: NOTIFICATION_VARIANTS, cls: string = 'icon') => {\r\n    switch (variant) {\r\n      case NOTIFICATION_VARIANTS.ERROR: {\r\n        return (\r\n          <svg class={cls} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\r\n            <path\r\n              d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z\" />\r\n          </svg>\r\n        );\r\n      }\r\n      case NOTIFICATION_VARIANTS.INFO: {\r\n        return (\r\n          <svg class={cls} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\r\n            <path\r\n              d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z\" />\r\n          </svg>\r\n        );\r\n      }\r\n      case NOTIFICATION_VARIANTS.SUCCESS: {\r\n        return (\r\n          <svg class={cls} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\r\n            <path\r\n              d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\" />\r\n          </svg>\r\n        )\r\n      }\r\n      case NOTIFICATION_VARIANTS.WARNING: {\r\n        return (\r\n          <svg class={cls} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\r\n            <path\r\n              d=\"M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z\" />\r\n          </svg>\r\n        );\r\n      }\r\n      default:\r\n        return null;\r\n    }\r\n  };\r\n}\r\n"],"version":3}

package/dist/xv-webcomponents/xv-overflow-menu-v2-item.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xv-overflow-menu-v2-item.entry.esm.js","sources":["src/components/xv-overflow-menu/_vars.ts","src/components/xv-overflow-menu/xv-overflow-menu-item/xv-overflow-menu-item.scss?tag=xv-overflow-menu-v2-item&encapsulation=shadow","src/components/xv-overflow-menu/xv-overflow-menu-item/xv-overflow-menu-item.tsx"],"sourcesContent":["export interface OverflowMenuEvent {\r\n  value: string | number | object | undefined;\r\n  event: PointerEvent;\r\n}\r\n\r\nexport enum OverflowMenuVariant {\r\n  DEFAULT = '',\r\n  DANGER = 'danger',\r\n}\r\n",":host {\r\n  flex: 1;\r\n  display: inline-block;\r\n  background-color: transparent;\r\n  transition: 200ms ease background-color;\r\n  user-select: none;\r\n  text-align: left;\r\n  color: var(--text-secondary, #515151);\r\n  font-family: var(--ff-body, Tahoma);\r\n  font-size: var(--fz-md, 14px);\r\n  line-height: 128.571%;\r\n  letter-spacing: 0.16px;\r\n}\r\n:host(:hover) {\r\n  cursor: pointer;\r\n  background-color: var(--layer-hover-01, #E9E9E9);\r\n}\r\n:host(:active) {\r\n  background-color: var(--layer-active-01, #D1D1D1);\r\n}\r\n:host(:focus) {\r\n  border: 2px solid var(--focus, #273435);\r\n}\r\n\r\n:host([variant=\"danger\"]) {\r\n  background-color: var(--text-error, #D62512);\r\n  color: var(--text-on-color, #FFF);\r\n}\r\n:host([variant=\"danger\"]:hover) {\r\n  background-color: var(--support-error, #F1290E);\r\n}\r\n:host([variant=\"danger\"]:active) {\r\n  background-color: var(--text-error, #D62512);\r\n}\r\n\r\n:host([disabled]) {\r\n  background-color: var(--layer-01, #F7F7F7) !important;\r\n  color: var(--text-disabled) !important;\r\n  cursor: not-allowed;\r\n}\r\n","import { Component, Host, h, Prop, Listen, Event, EventEmitter } from '@stencil/core';\r\nimport { OverflowMenuEvent, OverflowMenuVariant } from '../_vars';\r\n\r\n@Component({\r\n  tag: 'xv-overflow-menu-v2-item',\r\n  styleUrl: 'xv-overflow-menu-item.scss',\r\n  shadow: true,\r\n})\r\nexport class XvOverflowMenuItem {\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n  @Prop({ reflect: true }) value: OverflowMenuEvent['value'];\r\n  @Prop() variant: OverflowMenuVariant = OverflowMenuVariant.DEFAULT;\r\n  @Event() itemClick: EventEmitter<OverflowMenuEvent>;\r\n\r\n  @Listen('click')\r\n  handleClick(event: PointerEvent) {\r\n    if (this.disabled) return;\r\n\r\n    this.itemClick.emit({ event, value: this.value });\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host\r\n        class=\"xv-overflow-menu-item\"\r\n        role=\"menuitem\"\r\n        disabled={this.disabled}\r\n      >\r\n        <slot></slot>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"names":[],"mappings":";;AAKA,IAAY,mBAGX;AAHD,CAAA,UAAY,mBAAmB,EAAA;AAC7B,IAAA,mBAAA,CAAA,SAAA,CAAA,GAAA,EAAY;AACZ,IAAA,mBAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AACnB,CAAC,EAHW,mBAAmB,KAAnB,mBAAmB,GAG9B,EAAA,CAAA,CAAA;;ACRD,MAAM,qBAAqB,GAAG,w1BAAw1B;;MCQz2B,kBAAkB,GAAA,MAAA;AAL/B,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAM2B,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAE1C,QAAA,IAAA,CAAA,OAAO,GAAwB,mBAAmB,CAAC,OAAO;AAqBnE;AAjBC,IAAA,WAAW,CAAC,KAAmB,EAAA;QAC7B,IAAI,IAAI,CAAC,QAAQ;YAAE;AAEnB,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;;IAGnD,MAAM,GAAA;AACJ,QAAA,QACE,CAAC,CAAA,IAAI,EACH,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAC7B,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,EAEvB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;"}

package/dist/xv-webcomponents/xv-overflow-menu-v2-item.entry.js

@@ -0,0 +1,32 @@
+import { r as registerInstance, a as createEvent, h, d as Host } from './index-rZAC0WRb.js';
+
+var OverflowMenuVariant;
+(function (OverflowMenuVariant) {
+    OverflowMenuVariant["DEFAULT"] = "";
+    OverflowMenuVariant["DANGER"] = "danger";
+})(OverflowMenuVariant || (OverflowMenuVariant = {}));
+
+const xvOverflowMenuItemCss = ":host{flex:1;display:inline-block;background-color:transparent;transition:200ms ease background-color;user-select:none;text-align:left;color:var(--text-secondary, #515151);font-family:var(--ff-body, Tahoma);font-size:var(--fz-md, 14px);line-height:128.571%;letter-spacing:0.16px}:host(:hover){cursor:pointer;background-color:var(--layer-hover-01, #E9E9E9)}:host(:active){background-color:var(--layer-active-01, #D1D1D1)}:host(:focus){border:2px solid var(--focus, #273435)}:host([variant=danger]){background-color:var(--text-error, #D62512);color:var(--text-on-color, #FFF)}:host([variant=danger]:hover){background-color:var(--support-error, #F1290E)}:host([variant=danger]:active){background-color:var(--text-error, #D62512)}:host([disabled]){background-color:var(--layer-01, #F7F7F7) !important;color:var(--text-disabled) !important;cursor:not-allowed}";
+
+const XvOverflowMenuItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.itemClick = createEvent(this, "itemClick", 7);
+        this.disabled = false;
+        this.variant = OverflowMenuVariant.DEFAULT;
+    }
+    handleClick(event) {
+        if (this.disabled)
+            return;
+        this.itemClick.emit({ event, value: this.value });
+    }
+    render() {
+        return (h(Host, { key: 'f4942c598db6ce6fc3c9f03820ee7ba81720d817', class: "xv-overflow-menu-item", role: "menuitem", disabled: this.disabled }, h("slot", { key: '824c443302f7845247dc96fac0e891121a28b46c' })));
+    }
+};
+XvOverflowMenuItem.style = xvOverflowMenuItemCss;
+
+export { XvOverflowMenuItem as xv_overflow_menu_v2_item };
+//# sourceMappingURL=xv-overflow-menu-v2-item.entry.esm.js.map
+
+//# sourceMappingURL=xv-overflow-menu-v2-item.entry.js.map

package/dist/xv-webcomponents/xv-overflow-menu-v2-item.entry.js.map

@@ -0,0 +1 @@
+{"file":"xv-overflow-menu-v2-item.entry.esm.js","mappings":";;AAKA,IAAY,mBAGX;AAHD,CAAA,UAAY,mBAAmB,EAAA;AAC7B,IAAA,mBAAA,CAAA,SAAA,CAAA,GAAA,EAAY;AACZ,IAAA,mBAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AACnB,CAAC,EAHW,mBAAmB,KAAnB,mBAAmB,GAG9B,EAAA,CAAA,CAAA;;ACRD,MAAM,qBAAqB,GAAG,w1BAAw1B;;MCQz2B,kBAAkB,GAAA,MAAA;AAL/B,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAM2B,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAE1C,QAAA,IAAA,CAAA,OAAO,GAAwB,mBAAmB,CAAC,OAAO;AAqBnE;AAjBC,IAAA,WAAW,CAAC,KAAmB,EAAA;QAC7B,IAAI,IAAI,CAAC,QAAQ;YAAE;AAEnB,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;;IAGnD,MAAM,GAAA;AACJ,QAAA,QACE,CAAC,CAAA,IAAI,EACH,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAC7B,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,EAEvB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;","names":[],"sources":["src/components/xv-overflow-menu/_vars.ts","src/components/xv-overflow-menu/xv-overflow-menu-item/xv-overflow-menu-item.scss?tag=xv-overflow-menu-v2-item&encapsulation=shadow","src/components/xv-overflow-menu/xv-overflow-menu-item/xv-overflow-menu-item.tsx"],"sourcesContent":["export interface OverflowMenuEvent {\r\n  value: string | number | object | undefined;\r\n  event: PointerEvent;\r\n}\r\n\r\nexport enum OverflowMenuVariant {\r\n  DEFAULT = '',\r\n  DANGER = 'danger',\r\n}\r\n",":host {\r\n  flex: 1;\r\n  display: inline-block;\r\n  background-color: transparent;\r\n  transition: 200ms ease background-color;\r\n  user-select: none;\r\n  text-align: left;\r\n  color: var(--text-secondary, #515151);\r\n  font-family: var(--ff-body, Tahoma);\r\n  font-size: var(--fz-md, 14px);\r\n  line-height: 128.571%;\r\n  letter-spacing: 0.16px;\r\n}\r\n:host(:hover) {\r\n  cursor: pointer;\r\n  background-color: var(--layer-hover-01, #E9E9E9);\r\n}\r\n:host(:active) {\r\n  background-color: var(--layer-active-01, #D1D1D1);\r\n}\r\n:host(:focus) {\r\n  border: 2px solid var(--focus, #273435);\r\n}\r\n\r\n:host([variant=\"danger\"]) {\r\n  background-color: var(--text-error, #D62512);\r\n  color: var(--text-on-color, #FFF);\r\n}\r\n:host([variant=\"danger\"]:hover) {\r\n  background-color: var(--support-error, #F1290E);\r\n}\r\n:host([variant=\"danger\"]:active) {\r\n  background-color: var(--text-error, #D62512);\r\n}\r\n\r\n:host([disabled]) {\r\n  background-color: var(--layer-01, #F7F7F7) !important;\r\n  color: var(--text-disabled) !important;\r\n  cursor: not-allowed;\r\n}\r\n","import { Component, Host, h, Prop, Listen, Event, EventEmitter } from '@stencil/core';\r\nimport { OverflowMenuEvent, OverflowMenuVariant } from '../_vars';\r\n\r\n@Component({\r\n  tag: 'xv-overflow-menu-v2-item',\r\n  styleUrl: 'xv-overflow-menu-item.scss',\r\n  shadow: true,\r\n})\r\nexport class XvOverflowMenuItem {\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n  @Prop({ reflect: true }) value: OverflowMenuEvent['value'];\r\n  @Prop() variant: OverflowMenuVariant = OverflowMenuVariant.DEFAULT;\r\n  @Event() itemClick: EventEmitter<OverflowMenuEvent>;\r\n\r\n  @Listen('click')\r\n  handleClick(event: PointerEvent) {\r\n    if (this.disabled) return;\r\n\r\n    this.itemClick.emit({ event, value: this.value });\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host\r\n        class=\"xv-overflow-menu-item\"\r\n        role=\"menuitem\"\r\n        disabled={this.disabled}\r\n      >\r\n        <slot></slot>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/xv-webcomponents/xv-overflow-menu-v2.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xv-overflow-menu-v2.entry.esm.js","sources":["src/components/xv-overflow-menu/xv-overflow-menu.scss?tag=xv-overflow-menu-v2&encapsulation=shadow","src/components/xv-overflow-menu/xv-overflow-menu.tsx"],"sourcesContent":["$tag: xv-overflow-menu-v2;\r\n\r\n:host {\r\n  --overflow-menu-size: 40px;\r\n  --overflow-menu-item-padding: 11px 16px;\r\n\r\n  display: inline-flex;\r\n  flex-direction: column;\r\n  position: relative;\r\n\r\n  .btn {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: var(--overflow-menu-size);\r\n    height: var(--overflow-menu-size);\r\n    background-color: transparent;\r\n    border: 1px solid transparent;\r\n    transition: 300ms ease-in-out color, 300ms ease-in-out background-color, 200ms ease box-shadow;\r\n    font-size: calc(var(--overflow-menu-size) / 2);\r\n    color: var(--icon-primary);\r\n    border-radius: 5%;\r\n    margin: 0;\r\n    padding: 0;\r\n\r\n    &:hover {\r\n      cursor: pointer;\r\n      color: var(--link-primary-hover);\r\n      background-color: var(--background-hover);\r\n    }\r\n\r\n    &:active {\r\n      background-color: var(--background-active);\r\n      color: var(--icon-disabled);\r\n    }\r\n\r\n    &:disabled {\r\n      background-color: transparent;\r\n      opacity: 0.5;\r\n      cursor: not-allowed;\r\n    }\r\n  }\r\n\r\n  .list {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: stretch;\r\n    justify-content: flex-start;\r\n    background-color: var(--layer-01);\r\n    position: absolute;\r\n    top: 100%;\r\n    left: 0;\r\n    max-height: 0;\r\n    overflow: hidden;\r\n    border-radius: 3px;\r\n    transition: 200ms ease-in-out max-height, 100ms ease box-shadow;\r\n    min-width: 128px;\r\n    max-width: 50vw;\r\n    width: max-content;\r\n    &.open {\r\n      overflow: visible;\r\n    }\r\n\r\n    ::slotted(#{$tag}-item) {\r\n      padding: var(--overflow-menu-item-padding);\r\n    }\r\n\r\n    &.position-right {\r\n      left: initial;\r\n      right: 0;\r\n      border-top-right-radius: 0;\r\n    }\r\n\r\n    &.position-left {\r\n      border-top-left-radius: 0;\r\n    }\r\n  }\r\n}\r\n\r\n:host([size=\"xs\"]) {\r\n  --overflow-menu-item-padding: 4px 16px;\r\n  --overflow-menu-size: 24px;\r\n}\r\n:host([size=\"sm\"]) {\r\n  --overflow-menu-size: 32px;\r\n  --overflow-menu-item-padding: 7px 16px;\r\n}\r\n:host([size=\"md\"]) {\r\n  --overflow-menu-size: 40px;\r\n  --overflow-menu-item-padding: 11px 16px;\r\n}\r\n:host([size=\"lg\"]) {\r\n  --overflow-menu-size: 48px;\r\n  --overflow-menu-item-padding: 16px;\r\n}\r\n:host([size=\"xl\"]) {\r\n  --overflow-menu-size: 56px;\r\n  --overflow-menu-item-padding: 16px;\r\n}\r\n\r\n:host([open]) {\r\n  .btn {\r\n    border-bottom-left-radius: 0;\r\n    border-bottom-right-radius: 0;\r\n    background-color: var(--layer-01);\r\n    box-shadow: -2px 2px 2px 0 rgba(0, 0, 0, 0.1);\r\n    z-index: 1;\r\n  }\r\n\r\n  .list {\r\n    max-height: 500px;\r\n    z-index: 2;\r\n    box-shadow: -2px 2px 2px 0 rgba(0, 0, 0, 0.1);\r\n  }\r\n}\r\n","import { Component, Element, h, Host, Listen, Prop, Watch, Event, EventEmitter } from '@stencil/core';\r\nimport { SIZE_VAR } from '../../types/enum';\r\nimport { OverflowMenuEvent } from './_vars';\r\n\r\n@Component({\r\n  tag: 'xv-overflow-menu-v2',\r\n  styleUrl: 'xv-overflow-menu.scss',\r\n  shadow: true,\r\n})\r\nexport class XvOverflowMenu {\r\n  @Element() el: HTMLElement;\r\n  @Prop({ reflect: true, mutable: true }) open: boolean = false;\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n  @Prop() position: 'left' | 'right' = 'left';\r\n  @Prop() size: SIZE_VAR = SIZE_VAR.MD;\r\n  @Event() selectItem: EventEmitter<OverflowMenuEvent>;\r\n\r\n  @Listen('keydown')\r\n  handleKeyDown(ev: KeyboardEvent) {\r\n    if (ev.key === 'Escape'){\r\n      ev.stopPropagation();\r\n      ev.preventDefault();\r\n      this.handleClose();\r\n    }\r\n  }\r\n\r\n  @Watch('open')\r\n  openChangeHandle() {\r\n    if (this.disabled) return;\r\n\r\n    if (this.open) {\r\n      this.el.addEventListener('itemClick', this.handleSelectItem);\r\n      document.body.addEventListener('click', this.handleClick);\r\n    } else {\r\n      this.removeListeners();\r\n    }\r\n  }\r\n\r\n  private handleClose = () => {\r\n    if (this.open) this.open = false;\r\n  }\r\n\r\n  private removeListeners = () => {\r\n    this.el.removeEventListener('itemClick', this.handleSelectItem);\r\n    document.body.removeEventListener('click', this.handleClick);\r\n  }\r\n\r\n  private handleClick = (ev: MouseEvent) => {\r\n    if (!this.open || this.el.contains(ev.target as Node)) return;\r\n\r\n    ev.stopPropagation();\r\n    ev.preventDefault();\r\n    this.handleClose()\r\n  }\r\n\r\n  private onOpenToggle = () => {\r\n    this.open = !this.open;\r\n  };\r\n\r\n  private handleSelectItem = ({ detail }: CustomEvent<OverflowMenuEvent>) => {\r\n    this.selectItem.emit(detail);\r\n    this.handleClose();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host\r\n        class=\"xv-overflow-menu\"\r\n        size={this.size}\r\n        role=\"menu\"\r\n        tabindex={-1}\r\n      >\r\n        <button class={{ btn: true, open: this.open }} onClick={this.onOpenToggle} disabled={this.disabled}>\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 128 512\">\r\n            <path\r\n              d=\"M64 368a48 48 0 1 0 0 96 48 48 0 1 0 0-96zm0-160a48 48 0 1 0 0 96 48 48 0 1 0 0-96zM112 96A48 48 0 1 0 16 96a48 48 0 1 0 96 0z\" />\r\n          </svg>\r\n        </button>\r\n        <div class={{list: true, open: this.open, [`position-${this.position}`]: true }}>\r\n          <slot></slot>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.openChangeHandle();\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.removeListeners();\r\n  }\r\n}\r\n"],"names":[],"mappings":"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"}

package/dist/xv-webcomponents/xv-overflow-menu-v2.entry.js

@@ -0,0 +1,74 @@
+import { r as registerInstance, a as createEvent, h, d as Host, e as getElement } from './index-rZAC0WRb.js';
+import { S as SIZE_VAR } from './enum-DTBL51oP.js';
+
+const xvOverflowMenuCss = ":host{--overflow-menu-size:40px;--overflow-menu-item-padding:11px 16px;display:inline-flex;flex-direction:column;position:relative}:host .btn{display:inline-flex;align-items:center;justify-content:center;width:var(--overflow-menu-size);height:var(--overflow-menu-size);background-color:transparent;border:1px solid transparent;transition:300ms ease-in-out color, 300ms ease-in-out background-color, 200ms ease box-shadow;font-size:calc(var(--overflow-menu-size) / 2);color:var(--icon-primary);border-radius:5%;margin:0;padding:0}:host .btn:hover{cursor:pointer;color:var(--link-primary-hover);background-color:var(--background-hover)}:host .btn:active{background-color:var(--background-active);color:var(--icon-disabled)}:host .btn:disabled{background-color:transparent;opacity:0.5;cursor:not-allowed}:host .list{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;background-color:var(--layer-01);position:absolute;top:100%;left:0;max-height:0;overflow:hidden;border-radius:3px;transition:200ms ease-in-out max-height, 100ms ease box-shadow;min-width:128px;max-width:50vw;width:max-content}:host .list.open{overflow:visible}:host .list ::slotted(xv-overflow-menu-v2-item){padding:var(--overflow-menu-item-padding)}:host .list.position-right{left:initial;right:0;border-top-right-radius:0}:host .list.position-left{border-top-left-radius:0}:host([size=xs]){--overflow-menu-item-padding:4px 16px;--overflow-menu-size:24px}:host([size=sm]){--overflow-menu-size:32px;--overflow-menu-item-padding:7px 16px}:host([size=md]){--overflow-menu-size:40px;--overflow-menu-item-padding:11px 16px}:host([size=lg]){--overflow-menu-size:48px;--overflow-menu-item-padding:16px}:host([size=xl]){--overflow-menu-size:56px;--overflow-menu-item-padding:16px}:host([open]) .btn{border-bottom-left-radius:0;border-bottom-right-radius:0;background-color:var(--layer-01);box-shadow:-2px 2px 2px 0 rgba(0, 0, 0, 0.1);z-index:1}:host([open]) .list{max-height:500px;z-index:2;box-shadow:-2px 2px 2px 0 rgba(0, 0, 0, 0.1)}";
+
+const XvOverflowMenu = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.selectItem = createEvent(this, "selectItem", 7);
+        this.open = false;
+        this.disabled = false;
+        this.position = 'left';
+        this.size = SIZE_VAR.MD;
+        this.handleClose = () => {
+            if (this.open)
+                this.open = false;
+        };
+        this.removeListeners = () => {
+            this.el.removeEventListener('itemClick', this.handleSelectItem);
+            document.body.removeEventListener('click', this.handleClick);
+        };
+        this.handleClick = (ev) => {
+            if (!this.open || this.el.contains(ev.target))
+                return;
+            ev.stopPropagation();
+            ev.preventDefault();
+            this.handleClose();
+        };
+        this.onOpenToggle = () => {
+            this.open = !this.open;
+        };
+        this.handleSelectItem = ({ detail }) => {
+            this.selectItem.emit(detail);
+            this.handleClose();
+        };
+    }
+    handleKeyDown(ev) {
+        if (ev.key === 'Escape') {
+            ev.stopPropagation();
+            ev.preventDefault();
+            this.handleClose();
+        }
+    }
+    openChangeHandle() {
+        if (this.disabled)
+            return;
+        if (this.open) {
+            this.el.addEventListener('itemClick', this.handleSelectItem);
+            document.body.addEventListener('click', this.handleClick);
+        }
+        else {
+            this.removeListeners();
+        }
+    }
+    render() {
+        return (h(Host, { key: '6fe2946ebbd5f3f84dd69e8b9b87c8f029d55939', class: "xv-overflow-menu", size: this.size, role: "menu", tabindex: -1 }, h("button", { key: '2ebf332b3fd3329cdf963dafc6923c1ceba7a434', class: { btn: true, open: this.open }, onClick: this.onOpenToggle, disabled: this.disabled }, h("svg", { key: '2478245eea75a90ad357e002ea0df246ec75f899', xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 128 512" }, h("path", { key: '3621ee6ac999db6a7cae0f9af8b133ea58a52858', d: "M64 368a48 48 0 1 0 0 96 48 48 0 1 0 0-96zm0-160a48 48 0 1 0 0 96 48 48 0 1 0 0-96zM112 96A48 48 0 1 0 16 96a48 48 0 1 0 96 0z" }))), h("div", { key: '5bb2784b31b6f8eadeee44b841c7d2a6de2001a6', class: { list: true, open: this.open, [`position-${this.position}`]: true } }, h("slot", { key: '777f2815585fba40fb8f5a26ed116b33e8a87c4c' }))));
+    }
+    componentDidLoad() {
+        this.openChangeHandle();
+    }
+    disconnectedCallback() {
+        this.removeListeners();
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "open": ["openChangeHandle"]
+    }; }
+};
+XvOverflowMenu.style = xvOverflowMenuCss;
+
+export { XvOverflowMenu as xv_overflow_menu_v2 };
+//# sourceMappingURL=xv-overflow-menu-v2.entry.esm.js.map
+
+//# sourceMappingURL=xv-overflow-menu-v2.entry.js.map

package/dist/xv-webcomponents/xv-overflow-menu-v2.entry.js.map

@@ -0,0 +1 @@
+{"file":"xv-overflow-menu-v2.entry.esm.js","mappings":";;;AAAA,MAAM,iBAAiB,GAAG,0+DAA0+D;;MCSv/D,cAAc,GAAA,MAAA;AAL3B,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAO0C,QAAA,IAAI,CAAA,IAAA,GAAY,KAAK;AACpC,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAC1C,QAAA,IAAQ,CAAA,QAAA,GAAqB,MAAM;AACnC,QAAA,IAAA,CAAA,IAAI,GAAa,QAAQ,CAAC,EAAE;AAwB5B,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;YACzB,IAAI,IAAI,CAAC,IAAI;AAAE,gBAAA,IAAI,CAAC,IAAI,GAAG,KAAK;AAClC,SAAC;AAEO,QAAA,IAAe,CAAA,eAAA,GAAG,MAAK;YAC7B,IAAI,CAAC,EAAE,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,gBAAgB,CAAC;YAC/D,QAAQ,CAAC,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC;AAC9D,SAAC;AAEO,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,EAAc,KAAI;AACvC,YAAA,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,MAAc,CAAC;gBAAE;YAEvD,EAAE,CAAC,eAAe,EAAE;YACpB,EAAE,CAAC,cAAc,EAAE;YACnB,IAAI,CAAC,WAAW,EAAE;AACpB,SAAC;AAEO,QAAA,IAAY,CAAA,YAAA,GAAG,MAAK;AAC1B,YAAA,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI;AACxB,SAAC;QAEO,IAAA,CAAA,gBAAgB,GAAG,CAAC,EAAE,MAAM,EAAkC,KAAI;AACxE,YAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC;YAC5B,IAAI,CAAC,WAAW,EAAE;AACpB,SAAC;AA8BF;AA1EC,IAAA,aAAa,CAAC,EAAiB,EAAA;AAC7B,QAAA,IAAI,EAAE,CAAC,GAAG,KAAK,QAAQ,EAAC;YACtB,EAAE,CAAC,eAAe,EAAE;YACpB,EAAE,CAAC,cAAc,EAAE;YACnB,IAAI,CAAC,WAAW,EAAE;;;IAKtB,gBAAgB,GAAA;QACd,IAAI,IAAI,CAAC,QAAQ;YAAE;AAEnB,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,gBAAgB,CAAC;YAC5D,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC;;aACpD;YACL,IAAI,CAAC,eAAe,EAAE;;;IA8B1B,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAC,kBAAkB,EACxB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,CAAC,CAAC,EAAA,EAEZ,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,YAAY,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,EAChG,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,OAAO,EAAC,aAAa,EAAA,EACpF,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,CAAC,EAAC,gIAAgI,EAAA,CAAG,CACnI,CACC,EACT,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,EAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAA,SAAA,EAAY,IAAI,CAAC,QAAQ,CAAE,CAAA,GAAG,IAAI,EAAE,EAAA,EAC7E,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;IAIX,gBAAgB,GAAA;QACd,IAAI,CAAC,gBAAgB,EAAE;;IAGzB,oBAAoB,GAAA;QAClB,IAAI,CAAC,eAAe,EAAE;;;;;;;;;;;","names":[],"sources":["src/components/xv-overflow-menu/xv-overflow-menu.scss?tag=xv-overflow-menu-v2&encapsulation=shadow","src/components/xv-overflow-menu/xv-overflow-menu.tsx"],"sourcesContent":["$tag: xv-overflow-menu-v2;\r\n\r\n:host {\r\n  --overflow-menu-size: 40px;\r\n  --overflow-menu-item-padding: 11px 16px;\r\n\r\n  display: inline-flex;\r\n  flex-direction: column;\r\n  position: relative;\r\n\r\n  .btn {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: var(--overflow-menu-size);\r\n    height: var(--overflow-menu-size);\r\n    background-color: transparent;\r\n    border: 1px solid transparent;\r\n    transition: 300ms ease-in-out color, 300ms ease-in-out background-color, 200ms ease box-shadow;\r\n    font-size: calc(var(--overflow-menu-size) / 2);\r\n    color: var(--icon-primary);\r\n    border-radius: 5%;\r\n    margin: 0;\r\n    padding: 0;\r\n\r\n    &:hover {\r\n      cursor: pointer;\r\n      color: var(--link-primary-hover);\r\n      background-color: var(--background-hover);\r\n    }\r\n\r\n    &:active {\r\n      background-color: var(--background-active);\r\n      color: var(--icon-disabled);\r\n    }\r\n\r\n    &:disabled {\r\n      background-color: transparent;\r\n      opacity: 0.5;\r\n      cursor: not-allowed;\r\n    }\r\n  }\r\n\r\n  .list {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: stretch;\r\n    justify-content: flex-start;\r\n    background-color: var(--layer-01);\r\n    position: absolute;\r\n    top: 100%;\r\n    left: 0;\r\n    max-height: 0;\r\n    overflow: hidden;\r\n    border-radius: 3px;\r\n    transition: 200ms ease-in-out max-height, 100ms ease box-shadow;\r\n    min-width: 128px;\r\n    max-width: 50vw;\r\n    width: max-content;\r\n    &.open {\r\n      overflow: visible;\r\n    }\r\n\r\n    ::slotted(#{$tag}-item) {\r\n      padding: var(--overflow-menu-item-padding);\r\n    }\r\n\r\n    &.position-right {\r\n      left: initial;\r\n      right: 0;\r\n      border-top-right-radius: 0;\r\n    }\r\n\r\n    &.position-left {\r\n      border-top-left-radius: 0;\r\n    }\r\n  }\r\n}\r\n\r\n:host([size=\"xs\"]) {\r\n  --overflow-menu-item-padding: 4px 16px;\r\n  --overflow-menu-size: 24px;\r\n}\r\n:host([size=\"sm\"]) {\r\n  --overflow-menu-size: 32px;\r\n  --overflow-menu-item-padding: 7px 16px;\r\n}\r\n:host([size=\"md\"]) {\r\n  --overflow-menu-size: 40px;\r\n  --overflow-menu-item-padding: 11px 16px;\r\n}\r\n:host([size=\"lg\"]) {\r\n  --overflow-menu-size: 48px;\r\n  --overflow-menu-item-padding: 16px;\r\n}\r\n:host([size=\"xl\"]) {\r\n  --overflow-menu-size: 56px;\r\n  --overflow-menu-item-padding: 16px;\r\n}\r\n\r\n:host([open]) {\r\n  .btn {\r\n    border-bottom-left-radius: 0;\r\n    border-bottom-right-radius: 0;\r\n    background-color: var(--layer-01);\r\n    box-shadow: -2px 2px 2px 0 rgba(0, 0, 0, 0.1);\r\n    z-index: 1;\r\n  }\r\n\r\n  .list {\r\n    max-height: 500px;\r\n    z-index: 2;\r\n    box-shadow: -2px 2px 2px 0 rgba(0, 0, 0, 0.1);\r\n  }\r\n}\r\n","import { Component, Element, h, Host, Listen, Prop, Watch, Event, EventEmitter } from '@stencil/core';\r\nimport { SIZE_VAR } from '../../types/enum';\r\nimport { OverflowMenuEvent } from './_vars';\r\n\r\n@Component({\r\n  tag: 'xv-overflow-menu-v2',\r\n  styleUrl: 'xv-overflow-menu.scss',\r\n  shadow: true,\r\n})\r\nexport class XvOverflowMenu {\r\n  @Element() el: HTMLElement;\r\n  @Prop({ reflect: true, mutable: true }) open: boolean = false;\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n  @Prop() position: 'left' | 'right' = 'left';\r\n  @Prop() size: SIZE_VAR = SIZE_VAR.MD;\r\n  @Event() selectItem: EventEmitter<OverflowMenuEvent>;\r\n\r\n  @Listen('keydown')\r\n  handleKeyDown(ev: KeyboardEvent) {\r\n    if (ev.key === 'Escape'){\r\n      ev.stopPropagation();\r\n      ev.preventDefault();\r\n      this.handleClose();\r\n    }\r\n  }\r\n\r\n  @Watch('open')\r\n  openChangeHandle() {\r\n    if (this.disabled) return;\r\n\r\n    if (this.open) {\r\n      this.el.addEventListener('itemClick', this.handleSelectItem);\r\n      document.body.addEventListener('click', this.handleClick);\r\n    } else {\r\n      this.removeListeners();\r\n    }\r\n  }\r\n\r\n  private handleClose = () => {\r\n    if (this.open) this.open = false;\r\n  }\r\n\r\n  private removeListeners = () => {\r\n    this.el.removeEventListener('itemClick', this.handleSelectItem);\r\n    document.body.removeEventListener('click', this.handleClick);\r\n  }\r\n\r\n  private handleClick = (ev: MouseEvent) => {\r\n    if (!this.open || this.el.contains(ev.target as Node)) return;\r\n\r\n    ev.stopPropagation();\r\n    ev.preventDefault();\r\n    this.handleClose()\r\n  }\r\n\r\n  private onOpenToggle = () => {\r\n    this.open = !this.open;\r\n  };\r\n\r\n  private handleSelectItem = ({ detail }: CustomEvent<OverflowMenuEvent>) => {\r\n    this.selectItem.emit(detail);\r\n    this.handleClose();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host\r\n        class=\"xv-overflow-menu\"\r\n        size={this.size}\r\n        role=\"menu\"\r\n        tabindex={-1}\r\n      >\r\n        <button class={{ btn: true, open: this.open }} onClick={this.onOpenToggle} disabled={this.disabled}>\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 128 512\">\r\n            <path\r\n              d=\"M64 368a48 48 0 1 0 0 96 48 48 0 1 0 0-96zm0-160a48 48 0 1 0 0 96 48 48 0 1 0 0-96zM112 96A48 48 0 1 0 16 96a48 48 0 1 0 96 0z\" />\r\n          </svg>\r\n        </button>\r\n        <div class={{list: true, open: this.open, [`position-${this.position}`]: true }}>\r\n          <slot></slot>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.openChangeHandle();\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.removeListeners();\r\n  }\r\n}\r\n"],"version":3}

package/dist/xv-webcomponents/xv-progress-indicator-v2-item.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xv-progress-indicator-v2-item.entry.esm.js","sources":["src/components/xv-progress-indicator/xv-progress-indicator-item/xv-progress-indicator-item.scss?tag=xv-progress-indicator-v2-item&encapsulation=shadow","src/components/xv-progress-indicator/xv-progress-indicator-item/xv-progress-indicator-item.tsx"],"sourcesContent":[":host(.xv-progress-indicator-item) {\r\n  display: flex;\r\n  flex: 1;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  position: relative;\r\n  padding: 10px 16px;\r\n  row-gap: var(--gap-sm, 10px);\r\n  &:before {\r\n    width: 100%;\r\n  }\r\n\r\n  &:before, .line {\r\n    content: '';\r\n    z-index: 1;\r\n    display: inline-block;\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    right: 0;\r\n    height: 2px;\r\n    color: inherit;\r\n    background-color: var(--border-subtle-01, grey);\r\n  }\r\n\r\n  .line {\r\n    width: 0;\r\n    color: inherit;\r\n    transition: width 250ms ease;\r\n    background-color: var(--background-brand, currentColor);\r\n  }\r\n\r\n  .icon {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: var(--progress-indicator-icon-size, 22px);\r\n    height: var(--progress-indicator-icon-size, 22px);\r\n    min-width: var(--progress-indicator-icon-size, 22px);\r\n    min-height: var(--progress-indicator-icon-size, 22px);\r\n    max-width: var(--progress-indicator-icon-size, 22px);\r\n    max-height: var(--progress-indicator-icon-size, 22px);\r\n    border: 2px dashed var(--icon-primary, currentColor);\r\n    border-radius: 50%;\r\n    svg {\r\n      width: calc(var(--progress-indicator-icon-size, 22px) * 0.637);\r\n      height: calc(var(--progress-indicator-icon-size, 22px) * 0.637);\r\n      opacity: 0;\r\n      transition: opacity 500ms ease-in-out;\r\n    }\r\n  }\r\n\r\n  .label {\r\n    margin: 0;\r\n    color: var(--text-primary);\r\n    font-size: var(--progress-indicator-font-size, 14px);\r\n    line-height: 1.1;\r\n    letter-spacing: 0.16px;\r\n    text-overflow: ellipsis;\r\n    overflow: hidden;\r\n  }\r\n}\r\n\r\n:host([status=\"done\"]),\r\n:host([status=\"in_progress\"]), {\r\n  .icon {\r\n    border-color: var(--background-brand, currentColor);\r\n    color: var(--background-brand, inherit);\r\n    border-style: solid;\r\n    svg {\r\n      opacity: 1;\r\n    }\r\n  }\r\n\r\n  .line {\r\n    width: 100%;\r\n    background-color: var(--background-brand, currentColor);\r\n  }\r\n}\r\n\r\n:host([status=\"in_progress\"]) {\r\n  .icon {\r\n    border-color: var(--background-brand, currentColor);\r\n    color: var(--background-brand, inherit);\r\n    border-style: solid;\r\n    position: relative;\r\n    &:after {\r\n      content: '';\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      width: 50%;\r\n      height: 100%;\r\n      background-color: var(--background-brand, currentColor);\r\n      border-top-left-radius: 50% 100%;\r\n      border-bottom-left-radius: 50% 100%;\r\n    }\r\n\r\n    svg {\r\n      opacity: 0;\r\n    }\r\n  }\r\n}\r\n","import { Component, Host, h, Element, Prop } from '@stencil/core';\r\nimport { PROGRESS_ITEM_STATUS } from '../_vars';\r\n\r\n@Component({\r\n  tag: 'xv-progress-indicator-v2-item',\r\n  styleUrl: 'xv-progress-indicator-item.scss',\r\n  shadow: true,\r\n})\r\nexport class XvProgressIndicatorItem {\r\n  @Element() el: HTMLElement;\r\n  @Prop({ reflect: false }) status: PROGRESS_ITEM_STATUS = PROGRESS_ITEM_STATUS.NO_STARTED;\r\n\r\n  render() {\r\n    return (\r\n      <Host\r\n        status={this.status}\r\n        class={{'xv-progress-indicator-item': true}}\r\n      >\r\n        <span class=\"line\"/>\r\n        <span class=\"icon\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\">\r\n                <path\r\n                  fill=\"currentColor\"\r\n                  d=\"M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"\r\n                />\r\n          </svg>\r\n        </span>\r\n        <p class=\"label\"><slot/></p>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"names":[],"mappings":";;;AAAA,MAAM,0BAA0B,GAAG,2xEAA2xE;;MCQjzE,uBAAuB,GAAA,MAAA;AALpC,IAAA,WAAA,CAAA,OAAA,EAAA;;AAO4B,QAAA,IAAA,CAAA,MAAM,GAAyB,oBAAoB,CAAC,UAAU;AAqBzF;IAnBC,MAAM,GAAA;QACJ,QACE,CAAC,CAAA,IAAI,EACH,EAAA,GAAA,EAAA,0CAAA,EAAA,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,EAAC,4BAA4B,EAAE,IAAI,EAAC,EAAA,EAE3C,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAE,CAAA,EACpB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAA,EAChB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,aAAa,EAAA,EACvD,CACE,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,sLAAsL,EACxL,CAAA,CACF,CACD,EACP,CAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,OAAO,EAAA,EAAC,CAAO,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CAAI,CACvB;;;;;;;;"}

package/dist/xv-webcomponents/xv-progress-indicator-v2-item.entry.js

@@ -0,0 +1,21 @@
+import { r as registerInstance, h, d as Host, e as getElement } from './index-rZAC0WRb.js';
+import { a as PROGRESS_ITEM_STATUS } from './_vars-IZ3lIQzL.js';
+
+const xvProgressIndicatorItemCss = ":host(.xv-progress-indicator-item){display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;position:relative;padding:10px 16px;row-gap:var(--gap-sm, 10px)}:host(.xv-progress-indicator-item):before{width:100%}:host(.xv-progress-indicator-item):before,:host(.xv-progress-indicator-item) .line{content:\"\";z-index:1;display:inline-block;position:absolute;top:0;left:0;right:0;height:2px;color:inherit;background-color:var(--border-subtle-01, grey)}:host(.xv-progress-indicator-item) .line{width:0;color:inherit;transition:width 250ms ease;background-color:var(--background-brand, currentColor)}:host(.xv-progress-indicator-item) .icon{display:flex;align-items:center;justify-content:center;width:var(--progress-indicator-icon-size, 22px);height:var(--progress-indicator-icon-size, 22px);min-width:var(--progress-indicator-icon-size, 22px);min-height:var(--progress-indicator-icon-size, 22px);max-width:var(--progress-indicator-icon-size, 22px);max-height:var(--progress-indicator-icon-size, 22px);border:2px dashed var(--icon-primary, currentColor);border-radius:50%}:host(.xv-progress-indicator-item) .icon svg{width:calc(var(--progress-indicator-icon-size, 22px) * 0.637);height:calc(var(--progress-indicator-icon-size, 22px) * 0.637);opacity:0;transition:opacity 500ms ease-in-out}:host(.xv-progress-indicator-item) .label{margin:0;color:var(--text-primary);font-size:var(--progress-indicator-font-size, 14px);line-height:1.1;letter-spacing:0.16px;text-overflow:ellipsis;overflow:hidden}:host([status=done]) .icon,:host([status=in_progress]) .icon{border-color:var(--background-brand, currentColor);color:var(--background-brand, inherit);border-style:solid}:host([status=done]) .icon svg,:host([status=in_progress]) .icon svg{opacity:1}:host([status=done]) .line,:host([status=in_progress]) .line{width:100%;background-color:var(--background-brand, currentColor)}:host([status=in_progress]) .icon{border-color:var(--background-brand, currentColor);color:var(--background-brand, inherit);border-style:solid;position:relative}:host([status=in_progress]) .icon:after{content:\"\";position:absolute;top:0;left:0;width:50%;height:100%;background-color:var(--background-brand, currentColor);border-top-left-radius:50% 100%;border-bottom-left-radius:50% 100%}:host([status=in_progress]) .icon svg{opacity:0}";
+
+const XvProgressIndicatorItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.status = PROGRESS_ITEM_STATUS.NO_STARTED;
+    }
+    render() {
+        return (h(Host, { key: '8beb7b9cf6a754cc0b12d294bc10fc5749d48696', status: this.status, class: { 'xv-progress-indicator-item': true } }, h("span", { key: '061997f46686fdf5860971e8da8b839bfd1f826e', class: "line" }), h("span", { key: '4f8c6460c5170b28a422f621c13aedbcc7fd53de', class: "icon" }, h("svg", { key: 'a3d7f32facd1b2d1d24b1866a66887182ff2e4fe', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512" }, h("path", { key: '0d450bb499a475ef3827bd379092d2fd2c42b196', fill: "currentColor", d: "M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z" }))), h("p", { key: '9e3b67a83dd75a4da3d5e256ee783030c6398424', class: "label" }, h("slot", { key: '76dbccf58b96158e9a6b24ad3d354472abdb3a0f' }))));
+    }
+    get el() { return getElement(this); }
+};
+XvProgressIndicatorItem.style = xvProgressIndicatorItemCss;
+
+export { XvProgressIndicatorItem as xv_progress_indicator_v2_item };
+//# sourceMappingURL=xv-progress-indicator-v2-item.entry.esm.js.map
+
+//# sourceMappingURL=xv-progress-indicator-v2-item.entry.js.map

package/dist/xv-webcomponents/xv-progress-indicator-v2-item.entry.js.map

@@ -0,0 +1 @@
+{"file":"xv-progress-indicator-v2-item.entry.esm.js","mappings":";;;AAAA,MAAM,0BAA0B,GAAG,2xEAA2xE;;MCQjzE,uBAAuB,GAAA,MAAA;AALpC,IAAA,WAAA,CAAA,OAAA,EAAA;;AAO4B,QAAA,IAAA,CAAA,MAAM,GAAyB,oBAAoB,CAAC,UAAU;AAqBzF;IAnBC,MAAM,GAAA;QACJ,QACE,CAAC,CAAA,IAAI,EACH,EAAA,GAAA,EAAA,0CAAA,EAAA,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,EAAC,4BAA4B,EAAE,IAAI,EAAC,EAAA,EAE3C,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAE,CAAA,EACpB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAA,EAChB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,aAAa,EAAA,EACvD,CACE,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,sLAAsL,EACxL,CAAA,CACF,CACD,EACP,CAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,OAAO,EAAA,EAAC,CAAO,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CAAI,CACvB;;;;;;;;","names":[],"sources":["src/components/xv-progress-indicator/xv-progress-indicator-item/xv-progress-indicator-item.scss?tag=xv-progress-indicator-v2-item&encapsulation=shadow","src/components/xv-progress-indicator/xv-progress-indicator-item/xv-progress-indicator-item.tsx"],"sourcesContent":[":host(.xv-progress-indicator-item) {\r\n  display: flex;\r\n  flex: 1;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  position: relative;\r\n  padding: 10px 16px;\r\n  row-gap: var(--gap-sm, 10px);\r\n  &:before {\r\n    width: 100%;\r\n  }\r\n\r\n  &:before, .line {\r\n    content: '';\r\n    z-index: 1;\r\n    display: inline-block;\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    right: 0;\r\n    height: 2px;\r\n    color: inherit;\r\n    background-color: var(--border-subtle-01, grey);\r\n  }\r\n\r\n  .line {\r\n    width: 0;\r\n    color: inherit;\r\n    transition: width 250ms ease;\r\n    background-color: var(--background-brand, currentColor);\r\n  }\r\n\r\n  .icon {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: var(--progress-indicator-icon-size, 22px);\r\n    height: var(--progress-indicator-icon-size, 22px);\r\n    min-width: var(--progress-indicator-icon-size, 22px);\r\n    min-height: var(--progress-indicator-icon-size, 22px);\r\n    max-width: var(--progress-indicator-icon-size, 22px);\r\n    max-height: var(--progress-indicator-icon-size, 22px);\r\n    border: 2px dashed var(--icon-primary, currentColor);\r\n    border-radius: 50%;\r\n    svg {\r\n      width: calc(var(--progress-indicator-icon-size, 22px) * 0.637);\r\n      height: calc(var(--progress-indicator-icon-size, 22px) * 0.637);\r\n      opacity: 0;\r\n      transition: opacity 500ms ease-in-out;\r\n    }\r\n  }\r\n\r\n  .label {\r\n    margin: 0;\r\n    color: var(--text-primary);\r\n    font-size: var(--progress-indicator-font-size, 14px);\r\n    line-height: 1.1;\r\n    letter-spacing: 0.16px;\r\n    text-overflow: ellipsis;\r\n    overflow: hidden;\r\n  }\r\n}\r\n\r\n:host([status=\"done\"]),\r\n:host([status=\"in_progress\"]), {\r\n  .icon {\r\n    border-color: var(--background-brand, currentColor);\r\n    color: var(--background-brand, inherit);\r\n    border-style: solid;\r\n    svg {\r\n      opacity: 1;\r\n    }\r\n  }\r\n\r\n  .line {\r\n    width: 100%;\r\n    background-color: var(--background-brand, currentColor);\r\n  }\r\n}\r\n\r\n:host([status=\"in_progress\"]) {\r\n  .icon {\r\n    border-color: var(--background-brand, currentColor);\r\n    color: var(--background-brand, inherit);\r\n    border-style: solid;\r\n    position: relative;\r\n    &:after {\r\n      content: '';\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      width: 50%;\r\n      height: 100%;\r\n      background-color: var(--background-brand, currentColor);\r\n      border-top-left-radius: 50% 100%;\r\n      border-bottom-left-radius: 50% 100%;\r\n    }\r\n\r\n    svg {\r\n      opacity: 0;\r\n    }\r\n  }\r\n}\r\n","import { Component, Host, h, Element, Prop } from '@stencil/core';\r\nimport { PROGRESS_ITEM_STATUS } from '../_vars';\r\n\r\n@Component({\r\n  tag: 'xv-progress-indicator-v2-item',\r\n  styleUrl: 'xv-progress-indicator-item.scss',\r\n  shadow: true,\r\n})\r\nexport class XvProgressIndicatorItem {\r\n  @Element() el: HTMLElement;\r\n  @Prop({ reflect: false }) status: PROGRESS_ITEM_STATUS = PROGRESS_ITEM_STATUS.NO_STARTED;\r\n\r\n  render() {\r\n    return (\r\n      <Host\r\n        status={this.status}\r\n        class={{'xv-progress-indicator-item': true}}\r\n      >\r\n        <span class=\"line\"/>\r\n        <span class=\"icon\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\">\r\n                <path\r\n                  fill=\"currentColor\"\r\n                  d=\"M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"\r\n                />\r\n          </svg>\r\n        </span>\r\n        <p class=\"label\"><slot/></p>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/xv-webcomponents/xv-progress-indicator-v2.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xv-progress-indicator-v2.entry.esm.js","sources":["src/components/xv-progress-indicator/xv-progress-indicator.scss?tag=xv-progress-indicator-v2&encapsulation=shadow","src/components/xv-progress-indicator/xv-progress-indicator.tsx"],"sourcesContent":["$prefix: xv-progress-indicator-v2;\r\n\r\n:host {\r\n  --progress-indicator-icon-size: 22px;\r\n  --progress-indicator-font-size: var(--fz-md, 14px);\r\n\r\n  display: flex;\r\n  align-items: flex-start;\r\n  justify-content: space-between;\r\n  font-family: var(--ff-body, inherit);\r\n  overflow-x: auto;\r\n}\r\n\r\n:host([variant=\"horizontal\"]) {\r\n  ::slotted(#{$prefix}-item) {\r\n    flex-direction: row;\r\n    column-gap: var(--gap-xs, 8px);\r\n    justify-content: flex-start;\r\n    padding-left: 0;\r\n    white-space: nowrap;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n    text-align: left;\r\n  }\r\n}\r\n\r\n:host([size=\"xs\"]) {\r\n  --progress-indicator-icon-size: 14px;\r\n  --progress-indicator-font-size: var(--fz-md, 14px);\r\n}\r\n:host([size=\"sm\"]) {\r\n  --progress-indicator-icon-size: 16px;\r\n  --progress-indicator-font-size: var(--fz-md, 14px);\r\n}\r\n:host([size=\"md\"]) {\r\n  --progress-indicator-icon-size: 22px;\r\n  --progress-indicator-font-size: var(--fz-md, 14px);\r\n}\r\n:host([size=\"lg\"]) {\r\n  --progress-indicator-icon-size: 24px;\r\n  --progress-indicator-font-size: var(--fz-lg, 18px);\r\n}\r\n:host([size=\"xl\"]) {\r\n  --progress-indicator-icon-size: 32px;\r\n  --progress-indicator-font-size: var(--fz-xl, 20px);\r\n}\r\n","import { Component, Host, h, Prop, Watch, Element } from '@stencil/core';\r\nimport { PROGRESS_ITEM_STATUS, PROGRESS_VARIANTS } from './_vars';\r\nimport { SIZE_VAR } from '../../types/enum';\r\nimport { forEach } from '../../utils/utils';\r\n\r\n@Component({\r\n  tag: 'xv-progress-indicator-v2',\r\n  styleUrl: 'xv-progress-indicator.scss',\r\n  shadow: true,\r\n})\r\nexport class XvProgressIndicator {\r\n  @Element() el: HTMLElement;\r\n  /**\r\n   * Current progress\r\n   * from 0 to 100\r\n   */\r\n  @Prop({ reflect: true }) progress: number = 0;\r\n  /**\r\n   * Progress variant\r\n   * enum PROGRESS_VARIANTS\r\n   * possible option `horizontal`\r\n   */\r\n  @Prop() variant: PROGRESS_VARIANTS = PROGRESS_VARIANTS.DEFAULT;\r\n  /**\r\n   * Size of progress\r\n   * enum SIZE_VAR\r\n   * possible options `XS | SM | MD | LG | XL`\r\n   */\r\n  @Prop() size: SIZE_VAR = SIZE_VAR.MD;\r\n\r\n  // Update 'xv-progress-indicator-item' done status\r\n  @Watch('progress')\r\n  updateChildItems() {\r\n    const items = this.el.children;\r\n    const itemsCount = this.el.childElementCount;\r\n    const progressPerItem = 100 / itemsCount;\r\n\r\n    if (!items.length || !itemsCount) return;\r\n\r\n    forEach(items, (item, index) => {\r\n      const itemProgressStart = index * progressPerItem;\r\n      let status: PROGRESS_ITEM_STATUS;\r\n      const localProgress = Math.min(\r\n        Math.max((this.progress - itemProgressStart) / progressPerItem, 0), 1\r\n      ) * 100;\r\n\r\n      if (localProgress >= 100) {\r\n        status = PROGRESS_ITEM_STATUS.DONE;\r\n      } else if (localProgress > 0) {\r\n        status = PROGRESS_ITEM_STATUS.IN_PROGRESS;\r\n      } else {\r\n        status = PROGRESS_ITEM_STATUS.NO_STARTED;\r\n      }\r\n\r\n      // Set item current status\r\n      (item as HTMLElement).setAttribute('status', status);\r\n\r\n      // Update progress line\r\n      const line = (item as HTMLElement)?.shadowRoot?.querySelector('.line') as HTMLElement;\r\n      if (line) line.style.width = `${localProgress}%`;\r\n    });\r\n  }\r\n\r\n  // Load initial done status\r\n  componentDidLoad() {\r\n    this.updateChildItems()\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host variant={this.variant} size={this.size} class={{ 'xv-progress-indicator': true }}>\r\n        <slot></slot>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"names":[],"mappings":";;;;;AAAA,MAAM,sBAAsB,GAAG,i8BAAi8B;;MCUn9B,mBAAmB,GAAA,MAAA;AALhC,IAAA,WAAA,CAAA,OAAA,EAAA;;AAOE;;;AAGG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAW,CAAC;AAC7C;;;;AAIG;AACK,QAAA,IAAA,CAAA,OAAO,GAAsB,iBAAiB,CAAC,OAAO;AAC9D;;;;AAIG;AACK,QAAA,IAAA,CAAA,IAAI,GAAa,QAAQ,CAAC,EAAE;AA+CrC;;IA3CC,gBAAgB,GAAA;AACd,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,QAAQ;AAC9B,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,iBAAiB;AAC5C,QAAA,MAAM,eAAe,GAAG,GAAG,GAAG,UAAU;AAExC,QAAA,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,CAAC,UAAU;YAAE;QAElC,OAAO,CAAC,KAAK,EAAE,CAAC,IAAI,EAAE,KAAK,KAAI;;AAC7B,YAAA,MAAM,iBAAiB,GAAG,KAAK,GAAG,eAAe;AACjD,YAAA,IAAI,MAA4B;YAChC,MAAM,aAAa,GAAG,IAAI,CAAC,GAAG,CAC5B,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,iBAAiB,IAAI,eAAe,EAAE,CAAC,CAAC,EAAE,CAAC,CACtE,GAAG,GAAG;AAEP,YAAA,IAAI,aAAa,IAAI,GAAG,EAAE;AACxB,gBAAA,MAAM,GAAG,oBAAoB,CAAC,IAAI;;AAC7B,iBAAA,IAAI,aAAa,GAAG,CAAC,EAAE;AAC5B,gBAAA,MAAM,GAAG,oBAAoB,CAAC,WAAW;;iBACpC;AACL,gBAAA,MAAM,GAAG,oBAAoB,CAAC,UAAU;;;AAIzC,YAAA,IAAoB,CAAC,YAAY,CAAC,QAAQ,EAAE,MAAM,CAAC;;YAGpD,MAAM,IAAI,GAAG,CAAC,EAAA,GAAA,IAAoB,aAApB,IAAI,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAJ,IAAI,CAAkB,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,aAAa,CAAC,OAAO,CAAgB;AACrF,YAAA,IAAI,IAAI;gBAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,CAAG,EAAA,aAAa,GAAG;AAClD,SAAC,CAAC;;;IAIJ,gBAAgB,GAAA;QACd,IAAI,CAAC,gBAAgB,EAAE;;IAGzB,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,uBAAuB,EAAE,IAAI,EAAE,EAAA,EACpF,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;"}

package/dist/xv-webcomponents/xv-progress-indicator-v2.entry.js

@@ -0,0 +1,75 @@
+import { r as registerInstance, h, d as Host, e as getElement } from './index-rZAC0WRb.js';
+import { P as PROGRESS_VARIANTS, a as PROGRESS_ITEM_STATUS } from './_vars-IZ3lIQzL.js';
+import { S as SIZE_VAR } from './enum-DTBL51oP.js';
+import { a as forEach } from './utils-1tk8kwKx.js';
+
+const xvProgressIndicatorCss = ":host{--progress-indicator-icon-size:22px;--progress-indicator-font-size:var(--fz-md, 14px);display:flex;align-items:flex-start;justify-content:space-between;font-family:var(--ff-body, inherit);overflow-x:auto}:host([variant=horizontal]) ::slotted(xv-progress-indicator-v2-item){flex-direction:row;column-gap:var(--gap-xs, 8px);justify-content:flex-start;padding-left:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}:host([size=xs]){--progress-indicator-icon-size:14px;--progress-indicator-font-size:var(--fz-md, 14px)}:host([size=sm]){--progress-indicator-icon-size:16px;--progress-indicator-font-size:var(--fz-md, 14px)}:host([size=md]){--progress-indicator-icon-size:22px;--progress-indicator-font-size:var(--fz-md, 14px)}:host([size=lg]){--progress-indicator-icon-size:24px;--progress-indicator-font-size:var(--fz-lg, 18px)}:host([size=xl]){--progress-indicator-icon-size:32px;--progress-indicator-font-size:var(--fz-xl, 20px)}";
+
+const XvProgressIndicator = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * Current progress
+         * from 0 to 100
+         */
+        this.progress = 0;
+        /**
+         * Progress variant
+         * enum PROGRESS_VARIANTS
+         * possible option `horizontal`
+         */
+        this.variant = PROGRESS_VARIANTS.DEFAULT;
+        /**
+         * Size of progress
+         * enum SIZE_VAR
+         * possible options `XS | SM | MD | LG | XL`
+         */
+        this.size = SIZE_VAR.MD;
+    }
+    // Update 'xv-progress-indicator-item' done status
+    updateChildItems() {
+        const items = this.el.children;
+        const itemsCount = this.el.childElementCount;
+        const progressPerItem = 100 / itemsCount;
+        if (!items.length || !itemsCount)
+            return;
+        forEach(items, (item, index) => {
+            var _a;
+            const itemProgressStart = index * progressPerItem;
+            let status;
+            const localProgress = Math.min(Math.max((this.progress - itemProgressStart) / progressPerItem, 0), 1) * 100;
+            if (localProgress >= 100) {
+                status = PROGRESS_ITEM_STATUS.DONE;
+            }
+            else if (localProgress > 0) {
+                status = PROGRESS_ITEM_STATUS.IN_PROGRESS;
+            }
+            else {
+                status = PROGRESS_ITEM_STATUS.NO_STARTED;
+            }
+            // Set item current status
+            item.setAttribute('status', status);
+            // Update progress line
+            const line = (_a = item === null || item === void 0 ? void 0 : item.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.line');
+            if (line)
+                line.style.width = `${localProgress}%`;
+        });
+    }
+    // Load initial done status
+    componentDidLoad() {
+        this.updateChildItems();
+    }
+    render() {
+        return (h(Host, { key: 'f5865f1a9c9027826d7b47de1503e3a87a404474', variant: this.variant, size: this.size, class: { 'xv-progress-indicator': true } }, h("slot", { key: '900635f83a07c50b3dc8b84790804590c2315167' })));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "progress": ["updateChildItems"]
+    }; }
+};
+XvProgressIndicator.style = xvProgressIndicatorCss;
+
+export { XvProgressIndicator as xv_progress_indicator_v2 };
+//# sourceMappingURL=xv-progress-indicator-v2.entry.esm.js.map
+
+//# sourceMappingURL=xv-progress-indicator-v2.entry.js.map