@nova-design-system/nova-webcomponents 3.0.0-beta.17

package/dist/collection/components/nv-badge/nv-badge.js

@@ -0,0 +1,354 @@
+import { Host, h, } from "@stencil/core";
+import clsx from "clsx";
+import { useFade, useCollapse, timeline } from "../../animations";
+/**
+ * @slot leading-icon - Icon before the label.
+ */
+export class NvBadge {
+    constructor() {
+        //#endregion LIFECYCLE
+        /****************************************************************************/
+        //#region METHODS
+        /**
+         * Handles the close button click.
+         * @param {MouseEvent} originalEvent - The original event.
+         */
+        this.handleClose = (originalEvent) => {
+            if (!this.preventAutoClose) {
+                this.hidden = true;
+            }
+            this.closeClicked.emit(originalEvent);
+        };
+        this.dismissal = false;
+        this.icon = undefined;
+        this.iconLocation = undefined;
+        this.color = '1';
+        this.label = null;
+        this.leadIcon = null;
+        this.dismissible = false;
+        this.hidden = false;
+        this._isHidden = this.hidden;
+        this.preventAutoClose = false;
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region WATCHERS
+    /**
+     * Handles the dismissal prop change.
+     * @param {boolean} dismissal - The new dismissal value.
+     */
+    handleDismissalChange(dismissal) {
+        this.dismissible = dismissal;
+    }
+    /**
+     * Handles the icon prop change.
+     * @param {string} icon - The new icon value.
+     */
+    handleIconChange(icon) {
+        this.leadIcon = icon;
+    }
+    /**
+     * Handles the hidden prop change.
+     * @param {boolean} hidden - The new hidden value.
+     */
+    async handleHiddenChange(hidden) {
+        this.hiddenChanged.emit(hidden);
+        if (this._isHidden === true)
+            this._isHidden = hidden;
+        const { fadeIn, fadeOut } = useFade(this.ref, { duration: 150 });
+        const { collapse, expand } = useCollapse(this.ref, { duration: 150 });
+        if (hidden === true)
+            await timeline(fadeOut, collapse).start();
+        if (hidden === false)
+            await timeline(expand, fadeIn).start();
+        this.hiddenChangedComplete.emit(hidden);
+        if (this._isHidden === false)
+            this._isHidden = hidden;
+    }
+    //#endregion WATCHERS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    /**
+     * Component will load.
+     */
+    componentWillLoad() {
+        if (this.dismissal) {
+            this.dismissible = this.dismissal;
+        }
+        if (this.icon != null && this.icon != '') {
+            this.leadIcon = this.icon;
+        }
+        if (this.hidden) {
+            const { setCollapsed } = useCollapse(this.ref);
+            const { setFadeOut } = useFade(this.ref);
+            setCollapsed();
+            setFadeOut();
+        }
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (h(Host, { key: '230bec882e7425786c0a57434b1d6fde7a5d19bc', class: clsx(`badge-${this.color}`, {
+                'has-close': this.dismissible,
+                'with-gap': this.dismissible || this.label,
+                'visually-hidden': this._isHidden,
+            }) }, h("slot", { key: 'cfeeaed354a34cbe1eaf1caeed9456b630a07265', name: "leading-icon" }, this.leadIcon && (h("nv-icon", { key: '10031f4f26339860458f1413b171916cbc97f98f', slot: "leading-icon", name: this.leadIcon, size: "sm" }))), this.label && h("span", { key: '8d165b104e3952c61084f1473d31ce1a05404966' }, this.label), this.dismissible && (h("button", { key: '8320177e0ac7f8c4f5d09b6c947d81d0eddadb4f', onClick: this.handleClose, class: "close", type: "button" }, h("nv-icon", { key: '3298bd640cb7bb62923e5f1e650944afc01a7385', name: "x", size: "sm" })))));
+    }
+    static get is() { return "nv-badge"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nv-badge.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nv-badge.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "dismissal": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "use dismissible instead."
+                        }],
+                    "text": "Whether the badge is dismissible."
+                },
+                "attribute": "dismissal",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "use leadIcon or slot=\"leading-icon\" instead."
+                        }],
+                    "text": "The icon to display in the badge."
+                },
+                "attribute": "icon",
+                "reflect": false
+            },
+            "iconLocation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'left' | 'right'",
+                    "resolved": "\"left\" | \"right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "only leadIcon now."
+                        }],
+                    "text": "The location of the icon in the badge."
+                },
+                "attribute": "icon-location",
+                "reflect": true
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The color of the badge. Use a string between 1 to 5"
+                },
+                "attribute": "color",
+                "reflect": true,
+                "defaultValue": "'1'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Main content of the badge."
+                },
+                "attribute": "label",
+                "reflect": true,
+                "defaultValue": "null"
+            },
+            "leadIcon": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The lead icon of the badge."
+                },
+                "attribute": "lead-icon",
+                "reflect": true,
+                "defaultValue": "null"
+            },
+            "dismissible": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the badge is dismissible."
+                },
+                "attribute": "dismissible",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "hidden": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls the visibility of the badge. Will animate with fade and collapse."
+                },
+                "attribute": "hidden",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "preventAutoClose": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true, the alert does not automatically close upon dismissing.\nUseful for externally controlled component behavior."
+                },
+                "attribute": "prevent-auto-close",
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "_isHidden": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "closeClicked",
+                "name": "closeClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the badge is dismissed."
+                },
+                "complexType": {
+                    "original": "MouseEvent",
+                    "resolved": "MouseEvent",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "hiddenChanged",
+                "name": "hiddenChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits when the 'hidden' prop changes, reflecting a change in visibility.\nPasses hidden value to the detail."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "hiddenChangedComplete",
+                "name": "hiddenChangedComplete",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the animations complete, detail includes the hidden value."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "ref"; }
+    static get watchers() {
+        return [{
+                "propName": "dismissal",
+                "methodName": "handleDismissalChange"
+            }, {
+                "propName": "icon",
+                "methodName": "handleIconChange"
+            }, {
+                "propName": "hidden",
+                "methodName": "handleHiddenChange"
+            }];
+    }
+}
+//# sourceMappingURL=nv-badge.js.map

package/dist/collection/components/nv-badge/nv-badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nv-badge.js","sourceRoot":"","sources":["../../../src/components/nv-badge/nv-badge.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Watch,\n  Element,\n  State,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { useFade, useCollapse, timeline } from '../../animations';\n\n/**\n * @slot leading-icon - Icon before the label.\n */\n@Component({\n  tag: 'nv-badge',\n  styleUrl: 'nv-badge.scss',\n  shadow: false,\n})\nexport class NvBadge {\n  @Element() ref: HTMLNvBadgeElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Whether the badge is dismissible.\n   * @deprecated use dismissible instead.\n   */\n  @Prop()\n  readonly dismissal: boolean = false;\n\n  /**\n   * The icon to display in the badge.\n   * @deprecated use leadIcon or slot=\"leading-icon\" instead.\n   */\n  @Prop()\n  readonly icon: string;\n\n  /**\n   * The location of the icon in the badge.\n   * @deprecated only leadIcon now.\n   */\n  @Prop({ reflect: true })\n  readonly iconLocation: 'left' | 'right';\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * The color of the badge. Use a string between 1 to 5\n   */\n  @Prop({ reflect: true })\n  readonly color?: string = '1';\n\n  /**\n   * Main content of the badge.\n   */\n  @Prop({ reflect: true })\n  readonly label?: string | null = null;\n\n  /**\n   * The lead icon of the badge.\n   */\n  @Prop({ reflect: true, mutable: true })\n  leadIcon?: string | null = null;\n\n  /**\n   * Whether the badge is dismissible.\n   */\n  @Prop({ reflect: true, mutable: true })\n  dismissible: boolean = false;\n\n  /**\n   * Controls the visibility of the badge. Will animate with fade and collapse.\n   */\n  @Prop({ reflect: true, mutable: true })\n  hidden: boolean = false; // eslint-disable-line @stencil-community/reserved-member-names\n  @State()\n  private _isHidden: boolean = this.hidden;\n\n  /**\n   * When true, the alert does not automatically close upon dismissing.\n   * Useful for externally controlled component behavior.\n   */\n  @Prop({ reflect: true })\n  readonly preventAutoClose: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the badge is dismissed.\n   */\n  @Event()\n  closeClicked: EventEmitter<MouseEvent>;\n\n  /**\n   * Emits when the 'hidden' prop changes, reflecting a change in visibility.\n   * Passes hidden value to the detail.\n   */\n  @Event()\n  hiddenChanged: EventEmitter<boolean>;\n\n  /**\n   * Emitted when the animations complete, detail includes the hidden value.\n   */\n  @Event()\n  hiddenChangedComplete: EventEmitter<boolean>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * Handles the dismissal prop change.\n   * @param {boolean} dismissal - The new dismissal value.\n   */\n  @Watch('dismissal')\n  handleDismissalChange(dismissal: boolean) {\n    this.dismissible = dismissal;\n  }\n\n  /**\n   * Handles the icon prop change.\n   * @param {string} icon - The new icon value.\n   */\n  @Watch('icon')\n  handleIconChange(icon: string) {\n    this.leadIcon = icon;\n  }\n\n  /**\n   * Handles the hidden prop change.\n   * @param {boolean} hidden - The new hidden value.\n   */\n  @Watch('hidden')\n  async handleHiddenChange(hidden: boolean) {\n    this.hiddenChanged.emit(hidden);\n    if (this._isHidden === true) this._isHidden = hidden;\n\n    const { fadeIn, fadeOut } = useFade(this.ref, { duration: 150 });\n    const { collapse, expand } = useCollapse(this.ref, { duration: 150 });\n\n    if (hidden === true) await timeline(fadeOut, collapse).start();\n    if (hidden === false) await timeline(expand, fadeIn).start();\n\n    this.hiddenChangedComplete.emit(hidden);\n\n    if (this._isHidden === false) this._isHidden = hidden;\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  /**\n   * Component will load.\n   */\n  componentWillLoad() {\n    if (this.dismissal) {\n      this.dismissible = this.dismissal;\n    }\n\n    if (this.icon != null && this.icon != '') {\n      this.leadIcon = this.icon;\n    }\n\n    if (this.hidden) {\n      const { setCollapsed } = useCollapse(this.ref);\n      const { setFadeOut } = useFade(this.ref);\n\n      setCollapsed();\n      setFadeOut();\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles the close button click.\n   * @param {MouseEvent} originalEvent - The original event.\n   */\n  private readonly handleClose = (originalEvent?: MouseEvent) => {\n    if (!this.preventAutoClose) {\n      this.hidden = true;\n    }\n\n    this.closeClicked.emit(originalEvent);\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        class={clsx(`badge-${this.color}`, {\n          'has-close': this.dismissible,\n          'with-gap': this.dismissible || this.label,\n          'visually-hidden': this._isHidden,\n        })}\n      >\n        <slot name=\"leading-icon\">\n          {this.leadIcon && (\n            <nv-icon\n              slot=\"leading-icon\"\n              name={this.leadIcon}\n              size=\"sm\"\n            ></nv-icon>\n          )}\n        </slot>\n        {this.label && <span>{this.label}</span>}\n        {this.dismissible && (\n          <button onClick={this.handleClose} class=\"close\" type=\"button\">\n            <nv-icon name=\"x\" size=\"sm\" />\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"]}

package/dist/collection/components/nv-base/nv-base.docs.js

@@ -0,0 +1,5 @@
+export default {
+    component: 'nv-base',
+    skip: true,
+};
+//# sourceMappingURL=nv-base.docs.js.map

package/dist/collection/components/nv-base/nv-base.docs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nv-base.docs.js","sourceRoot":"","sources":["../../../src/components/nv-base/nv-base.docs.tsx"],"names":[],"mappings":"AAGA,eAAe;IACb,SAAS,EAAE,SAAS;IACpB,IAAI,EAAE,IAAI;CAC2B,CAAC","sourcesContent":["import type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\n\nexport default {\n  component: 'nv-base',\n  skip: true,\n} satisfies NovaDocs<Components.NvBase>;\n"]}

package/dist/collection/components/nv-base/nv-base.js

@@ -0,0 +1,69 @@
+import { h, Host } from "@stencil/core";
+const classes = {
+    'w-full': 'w-full',
+    'wFull': 'w-full',
+    'is-active': 'is-active',
+    'is-selected': 'is-selected',
+};
+/**
+ * @slot default - render children
+ * @deprecated This is only to help with the migration from v2 to v3. It will be removed in the next major release.
+ */
+export class NvBaseComponent {
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillLoad() {
+        this.applyClassesOnInitialRender();
+    }
+    componentDidLoad() {
+        this.mutationObserver = new MutationObserver(mutations => {
+            console.log(mutations);
+            mutations.forEach(mutation => {
+                if (mutation.type === 'attributes') {
+                    const target = mutation.target;
+                    Object.keys(classes).forEach(attributeName => {
+                        if (target.hasAttribute(attributeName)) {
+                            target.classList.add(classes[attributeName]);
+                        }
+                        else {
+                            target.classList.remove(classes[attributeName]);
+                        }
+                    });
+                }
+            });
+        });
+        this.observeElements();
+    }
+    disconnectedCallback() {
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
+        }
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region METHODS
+    applyClassesOnInitialRender() {
+        Object.keys(classes).forEach(attributeName => {
+            const elements = this.el.querySelectorAll(`[${attributeName}]`);
+            elements.forEach(element => {
+                element.classList.add(classes[attributeName]);
+            });
+        });
+    }
+    observeElements() {
+        this.mutationObserver.observe(this.el, {
+            attributes: true,
+            attributeFilter: Object.keys(classes),
+            subtree: true,
+        });
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (h(Host, { key: 'b337eb1cfbe80ce8cefdb00a9d0d1fbb153869ba', style: { display: 'block' } }, h("slot", { key: '575c8605510de2b97bf202809492dd5e2ba4a285' })));
+    }
+    static get is() { return "nv-base"; }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=nv-base.js.map

package/dist/collection/components/nv-base/nv-base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nv-base.js","sourceRoot":"","sources":["../../../src/components/nv-base/nv-base.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAE5D,MAAM,OAAO,GAA2B;IACtC,QAAQ,EAAE,QAAQ;IAClB,OAAO,EAAE,QAAQ;IACjB,WAAW,EAAE,WAAW;IACxB,aAAa,EAAE,aAAa;CAC7B,CAAC;AAEF;;;GAGG;AAKH,MAAM,OAAO,eAAe;IAK1B,8EAA8E;IAC9E,mBAAmB;IAEnB,iBAAiB;QACf,IAAI,CAAC,2BAA2B,EAAE,CAAC;IACrC,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,SAAS,CAAC,EAAE;YACvD,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;YACvB,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;gBAC3B,IAAI,QAAQ,CAAC,IAAI,KAAK,YAAY,EAAE,CAAC;oBACnC,MAAM,MAAM,GAAG,QAAQ,CAAC,MAAqB,CAAC;oBAE9C,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,EAAE;wBAC3C,IAAI,MAAM,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,CAAC;4BACvC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC;wBAC/C,CAAC;6BAAM,CAAC;4BACN,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC;wBAClD,CAAC;oBACH,CAAC,CAAC,CAAC;gBACL,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC1B,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,CAAC;QACrC,CAAC;IACH,CAAC;IAED,sBAAsB;IACtB,8EAA8E;IAC9E,iBAAiB;IAET,2BAA2B;QACjC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,EAAE;YAC3C,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,IAAI,aAAa,GAAG,CAAC,CAAC;YAChE,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;gBACzB,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC;YAChD,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,eAAe;QACrB,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE;YACrC,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC;YACrC,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;IACL,CAAC;IAED,oBAAoB;IACpB,8EAA8E;IAC9E,gBAAgB;IAEhB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;YAC/B,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;CAGF","sourcesContent":["import { Component, Element, h, Host } from '@stencil/core';\n\nconst classes: Record<string, string> = {\n  'w-full': 'w-full',\n  'wFull': 'w-full',\n  'is-active': 'is-active',\n  'is-selected': 'is-selected',\n};\n\n/**\n * @slot default - render children\n * @deprecated This is only to help with the migration from v2 to v3. It will be removed in the next major release.\n */\n@Component({\n  tag: 'nv-base',\n  shadow: false,\n})\nexport class NvBaseComponent {\n  @Element() el: HTMLNvBaseElement;\n\n  private mutationObserver: MutationObserver;\n\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    this.applyClassesOnInitialRender();\n  }\n\n  componentDidLoad() {\n    this.mutationObserver = new MutationObserver(mutations => {\n      console.log(mutations);\n      mutations.forEach(mutation => {\n        if (mutation.type === 'attributes') {\n          const target = mutation.target as HTMLElement;\n\n          Object.keys(classes).forEach(attributeName => {\n            if (target.hasAttribute(attributeName)) {\n              target.classList.add(classes[attributeName]);\n            } else {\n              target.classList.remove(classes[attributeName]);\n            }\n          });\n        }\n      });\n    });\n    this.observeElements();\n  }\n\n  disconnectedCallback() {\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region METHODS\n\n  private applyClassesOnInitialRender() {\n    Object.keys(classes).forEach(attributeName => {\n      const elements = this.el.querySelectorAll(`[${attributeName}]`);\n      elements.forEach(element => {\n        element.classList.add(classes[attributeName]);\n      });\n    });\n  }\n\n  private observeElements() {\n    this.mutationObserver.observe(this.el, {\n      attributes: true,\n      attributeFilter: Object.keys(classes),\n      subtree: true,\n    });\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host style={{ display: 'block' }}>\n        <slot></slot>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"]}