@nova-design-system/nova-webcomponents 3.9.1 → 3.10.0

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

@@ -60,8 +60,8 @@ export class NvToggle {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '7aac2ef8519d5c033a0e74461755e2286420032a', class: clsx(this.labelPlacement === 'before' && 'label-placement-before') }, h("div", { key: 'fb0f560aff50b9d3c2b75ba2b59dd68012f5af10', class: "input-container" }, h("input", { key: '61ff98c20dec0822979f04ad3b3316fc3caac31f', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly })), h("div", { key: '543ad351428f6ae60e94bd31e3a7a6922c02e5d4', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '42f764c9c4454cf5b8b1fa88c2c43654170a5222', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, h("slot", { key: '125247eeea72b68de829f36ad817a4381541ad07', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'a2fcd0d39a8f555e7d6b64879e84ff7f011e4901', class: "description" }, h("slot", { key: '4e7af6b6a0a25fcb4d9529dcb1a32cb7c928c7de', name: "description" }, this.description))))));
+        return (h(Host, { key: 'caafe3f48598a1323132e20b0492070e73c95885', class: clsx(this.labelPlacement === 'before' && 'label-placement-before') }, h("div", { key: '2b95ace9e3713bfeda007d8d9eb693fca688b45f', class: "input-container" }, h("input", { key: '703e41e527f018071ac7d02d8318314014568995', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly })), h("div", { key: '54b2d88481800d6f988900ca6405a45ecad48352', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '41f04a6166fada0f522e5a6682d50b9e14d26ca1', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, h("slot", { key: '6f24ee6e06ea767e04263a3451e29b24b8d8bf95', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'ec177dadeadba62b9e69a6f3577a7a8166abb029', class: "description" }, h("slot", { key: 'd52e04c1aa3a607015f01fed95cb9f2300071087', name: "description" }, this.description))))));
     }
     static get is() { return "nv-toggle"; }
     static get formAssociated() { return true; }

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"nv-togglebutton.docs.js","sourceRoot":"","sources":["../../../src/components/nv-togglebutton/nv-togglebutton.docs.tsx"],"names":[],"mappings":"AAGA,MAAM,kBAAkB,GAAwC;IAC9D,SAAS,EAAE,iBAAiB;IAC5B,IAAI,EAAE,IAAI;CACX,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["import type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\n\nconst NvTogglebuttonDocs: NovaDocs<Components.NvTogglebutton> = {\n  component: 'nv-togglebutton',\n  skip: true,\n};\n\nexport default NvTogglebuttonDocs;\n"]}

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

@@ -0,0 +1,191 @@
+import { Host, h } from "@stencil/core";
+/**
+ * @slot default - Child content of the toggle button.
+ */
+export class NvTogglebutton {
+    constructor() {
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Determines how large or small the togglebutton appears, allowing for
+         * customization of the togglebutton's dimensions to fit different design
+         * specifications and user needs.
+         */
+        this.size = 'md';
+        /**
+         * Prevents all interaction, rendering the toggle in a non-interactive state.
+         */
+        this.disabled = false;
+        /**
+         * Whether the button is active or not. Will not toggle automatically but
+         * needs to be controlled externally.
+         */
+        this.active = false;
+        /**
+         * Make it more or less visually prominent to users.
+         */
+        this.emphasis = 'high';
+        //#endregion PROPERTIES
+        /****************************************************************************/
+        //#region METHODS
+        this.handleClick = () => {
+            if (this.disabled)
+                return;
+            this.toggled.emit({
+                value: this.value,
+                active: this.active,
+            });
+        };
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (h(Host, { key: '81e773d6bafc0fd451fb7e71cb14ca709af2d07e', role: "button", tabindex: "0", "aria-pressed": String(this.active), onClick: this.handleClick }, h("slot", { key: '4cec2d6ae5388cdfd285ab15af356e9833b0ccb3' })));
+    }
+    static get is() { return "nv-togglebutton"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["styles/nv-togglebutton.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["styles/nv-togglebutton.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "`${ToggleButtonSize}`",
+                    "resolved": "\"lg\" | \"md\" | \"sm\" | \"xs\"",
+                    "references": {
+                        "ToggleButtonSize": {
+                            "location": "import",
+                            "path": "../../utils/constants",
+                            "id": "src/utils/constants.ts::ToggleButtonSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines how large or small the togglebutton appears, allowing for\ncustomization of the togglebutton's dimensions to fit different design\nspecifications and user needs."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": true,
+                "defaultValue": "'md'"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value to associated with the button when selected in a\nTogglebuttongroup."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "reflect": true
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Prevents all interaction, rendering the toggle in a non-interactive state."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the button is active or not. Will not toggle automatically but\nneeds to be controlled externally."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "active",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "emphasis": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "`${ToggleButtonEmphasis}`",
+                    "resolved": "\"high\" | \"low\"",
+                    "references": {
+                        "ToggleButtonEmphasis": {
+                            "location": "import",
+                            "path": "../../utils/constants",
+                            "id": "src/utils/constants.ts::ToggleButtonEmphasis"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Make it more or less visually prominent to users."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "emphasis",
+                "reflect": true,
+                "defaultValue": "'high'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "toggled",
+                "name": "toggled",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the button is toggled."
+                },
+                "complexType": {
+                    "original": "{\n    /** The value associated with the button. */\n    value: string;\n    /** If the button is active when clicked. */\n    active: boolean;\n  }",
+                    "resolved": "{ value: string; active: boolean; }",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=nv-togglebutton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nv-togglebutton.js","sourceRoot":"","sources":["../../../src/components/nv-togglebutton/nv-togglebutton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAG9E;;GAEG;AAMH,MAAM,OAAO,cAAc;IAL3B;QAME,8EAA8E;QAC9E,oBAAoB;QAEpB;;;;WAIG;QAEM,SAAI,GAA0B,IAAI,CAAC;QAS5C;;WAEG;QAEM,aAAQ,GAAY,KAAK,CAAC;QAEnC;;;WAGG;QAEM,WAAM,GAAY,KAAK,CAAC;QAEjC;;WAEG;QAEM,aAAQ,GAA8B,MAAM,CAAC;QAEtD,uBAAuB;QACvB,8EAA8E;QAC9E,iBAAiB;QAET,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAE1B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;gBAChB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,MAAM,EAAE,IAAI,CAAC,MAAM;aACpB,CAAC,CAAC;QACL,CAAC,CAAC;KAiCH;IAhBC,mBAAmB;IACnB,8EAA8E;IAC9E,gBAAgB;IAChB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAC,GAAG,kBACE,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,EACjC,OAAO,EAAE,IAAI,CAAC,WAAW;YAEzB,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { ToggleButtonEmphasis, ToggleButtonSize } from '../../utils/constants';\n\n/**\n * @slot default - Child content of the toggle button.\n */\n@Component({\n  tag: 'nv-togglebutton',\n  styleUrl: 'styles/nv-togglebutton.scss',\n  shadow: false,\n})\nexport class NvTogglebutton {\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Determines how large or small the togglebutton appears, allowing for\n   * customization of the togglebutton's dimensions to fit different design\n   * specifications and user needs.\n   */\n  @Prop({ reflect: true })\n  readonly size: `${ToggleButtonSize}` = 'md';\n\n  /**\n   * The value to associated with the button when selected in a\n   * Togglebuttongroup.\n   */\n  @Prop({ reflect: true })\n  readonly value: string;\n\n  /**\n   * Prevents all interaction, rendering the toggle in a non-interactive state.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Whether the button is active or not. Will not toggle automatically but\n   * needs to be controlled externally.\n   */\n  @Prop({ reflect: true })\n  readonly active: boolean = false;\n\n  /**\n   * Make it more or less visually prominent to users.\n   */\n  @Prop({ reflect: true })\n  readonly emphasis: `${ToggleButtonEmphasis}` = 'high';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  private handleClick = () => {\n    if (this.disabled) return;\n\n    this.toggled.emit({\n      value: this.value,\n      active: this.active,\n    });\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the button is toggled.\n   */\n  @Event({ eventName: 'toggled' })\n  toggled: EventEmitter<{\n    /** The value associated with the button. */\n    value: string;\n    /** If the button is active when clicked. */\n    active: boolean;\n  }>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region RENDER\n  render() {\n    return (\n      <Host\n        role=\"button\"\n        tabindex=\"0\"\n        aria-pressed={String(this.active)}\n        onClick={this.handleClick}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n  // #endregion RENDER\n}\n"]}

package/dist/collection/components/nv-togglebutton/styles/nv-togglebutton.css

@@ -0,0 +1,135 @@
+nv-togglebutton {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+}
+nv-togglebutton[size=xs] {
+  padding: var(--button-xs-padding-y) var(--button-xs-padding-x);
+  gap: var(--button-xs-gap);
+  border-radius: var(--button-xs-border-radius);
+  line-height: var(--button-xs-line-height);
+  font-size: var(--button-xs-font-size);
+  padding-top: calc(var(--togglegroup-xs-button-padding-y) - 1px);
+  padding-bottom: calc(var(--togglegroup-xs-button-padding-y) - 1px);
+  border-radius: calc(var(--togglegroup-xs-button-radius));
+  border-width: 0;
+}
+nv-togglebutton[size=xs] nv-icon > svg {
+  width: var(--spacing-3);
+  height: var(--spacing-3);
+  stroke-width: 1.2px;
+}
+nv-togglebutton[size=sm] {
+  padding: var(--button-sm-padding-y) var(--button-sm-padding-x);
+  gap: var(--button-sm-gap);
+  border-radius: var(--button-sm-border-radius);
+  line-height: var(--button-sm-line-height);
+  font-size: var(--button-sm-font-size);
+  padding-top: calc(var(--togglegroup-sm-button-padding-y) - 1px);
+  padding-bottom: calc(var(--togglegroup-sm-button-padding-y) - 1px);
+  border-radius: calc(var(--togglegroup-sm-button-radius));
+  border-width: 0;
+}
+nv-togglebutton[size=sm] nv-icon > svg {
+  width: var(--spacing-4);
+  height: var(--spacing-4);
+  stroke-width: 1.5px;
+}
+nv-togglebutton[size=md] {
+  padding: var(--button-md-padding-y) var(--button-md-padding-x);
+  gap: var(--button-md-gap);
+  border-radius: var(--button-md-border-radius);
+  line-height: var(--button-md-line-height);
+  font-size: var(--button-md-font-size);
+  padding-top: calc(var(--togglegroup-md-button-padding-y) - 1px);
+  padding-bottom: calc(var(--togglegroup-md-button-padding-y) - 1px);
+  border-radius: calc(var(--togglegroup-md-button-radius));
+  border-width: 0;
+}
+nv-togglebutton[size=md] nv-icon > svg {
+  width: var(--spacing-5);
+  height: var(--spacing-5);
+  stroke-width: 1.6px;
+}
+nv-togglebutton[size=lg] {
+  padding: var(--button-lg-padding-y) var(--button-lg-padding-x);
+  gap: var(--button-lg-gap);
+  border-radius: var(--button-lg-border-radius);
+  line-height: var(--button-lg-line-height);
+  font-size: var(--button-lg-font-size);
+  padding-top: calc(var(--togglegroup-lg-button-padding-y) - 1px);
+  padding-bottom: calc(var(--togglegroup-lg-button-padding-y) - 1px);
+  border-radius: calc(var(--togglegroup-lg-button-radius));
+  border-width: 0;
+}
+nv-togglebutton[size=lg] nv-icon > svg {
+  width: var(--spacing-6);
+  height: var(--spacing-6);
+  stroke-width: 1.8px;
+}
+nv-togglebutton[emphasis=high] {
+  background: var(--components-button-low-background);
+  border: 1px solid var(--components-button-low-border);
+  color: var(--components-button-low-text);
+}
+nv-togglebutton[emphasis=high]:hover {
+  background: var(--components-button-low-background-hover);
+  border: 1px solid var(--components-button-low-border);
+  color: var(--components-button-low-text-hover);
+}
+nv-togglebutton[emphasis=high]:active {
+  background: var(--components-button-low-background-active);
+  border: 1px solid var(--components-button-low-border-active);
+  color: var(--components-button-low-text-active);
+}
+nv-togglebutton[emphasis=high]:focus, nv-togglebutton[emphasis=high]:focus-within {
+  outline: none;
+}
+nv-togglebutton[emphasis=high]:focus-visible, nv-togglebutton[emphasis=high]:has(:focus-visible) {
+  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);
+  outline-offset: calc(var(--focus-outline-offset) * 1);
+  z-index: 111;
+}
+nv-togglebutton[emphasis=high]:disabled:not([disabled=false]) {
+  opacity: 0.5;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+nv-togglebutton[emphasis=high][active]:not([active=false]) {
+  background: var(--components-button-low-background-active);
+  border: 1px solid var(--components-button-low-border-active);
+  color: var(--components-button-low-text-active);
+}
+nv-togglebutton[emphasis=low] {
+  background: var(--components-button-lower-background);
+  border: 1px solid var(--components-button-lower-border);
+  color: var(--components-button-lower-text);
+}
+nv-togglebutton[emphasis=low]:hover {
+  background: var(--components-button-lower-background-hover);
+  border: 1px solid var(--components-button-lower-border);
+  color: var(--components-button-lower-text-hover);
+}
+nv-togglebutton[emphasis=low]:active {
+  background: var(--components-button-lower-background-active);
+  border: 1px solid var(--components-button-lower-border-active);
+  color: var(--components-button-lower-text-active);
+}
+nv-togglebutton[emphasis=low]:focus, nv-togglebutton[emphasis=low]:focus-within {
+  outline: none;
+}
+nv-togglebutton[emphasis=low]:focus-visible, nv-togglebutton[emphasis=low]:has(:focus-visible) {
+  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);
+  outline-offset: calc(var(--focus-outline-offset) * 1);
+  z-index: 111;
+}
+nv-togglebutton[emphasis=low]:disabled:not([disabled=false]) {
+  opacity: 0.5;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+nv-togglebutton[emphasis=low][active]:not([active=false]), nv-togglebutton[emphasis=low]:active {
+  background: var(--components-button-lower-background-hover);
+  border: 1px solid var(--components-button-lower-border);
+  color: var(--components-button-lower-text-hover);
+}

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

@@ -0,0 +1,56 @@
+import { h } from "@stencil/core";
+import { nameof } from "../../utils/class.utils";
+const NvTogglebuttongroupDocs = {
+    component: 'nv-togglebuttongroup',
+    composedComponents: ['nv-togglebutton'],
+    subcomponents: ['nv-togglebutton', 'nv-icon'],
+    badge: 'beta',
+    stories: [
+        {
+            name: 'Default',
+            template: (h("nv-togglebuttongroup", { "data-storybook-args": true }, h("nv-togglebutton", { value: "left" }, h("nv-icon", { name: "align-left" })), h("nv-togglebutton", { value: "center" }, h("nv-icon", { name: "align-center" })), h("nv-togglebutton", { value: "right" }, h("nv-icon", { name: "align-right" })))),
+        },
+        {
+            name: nameof(x => x.value),
+            args: {
+                value: ['left', 'center'],
+                size: 'md',
+            },
+            template: (h("nv-togglebuttongroup", { "data-storybook-args": true }, h("nv-togglebutton", { value: "left" }, h("nv-icon", { name: "align-left" })), h("nv-togglebutton", { value: "center" }, h("nv-icon", { name: "align-center" })), h("nv-togglebutton", { value: "right" }, h("nv-icon", { name: "align-right" })))),
+        },
+        {
+            name: nameof(x => x.exclusive),
+            args: {
+                exclusive: true,
+            },
+            template: (h("nv-togglebuttongroup", { "data-storybook-args": true }, h("nv-togglebutton", { value: "android" }, "Android"), h("nv-togglebutton", { value: "ios" }, "iOS"), h("nv-togglebutton", { value: "win" }, "Windows"))),
+        },
+        {
+            name: nameof(x => x.enforceValue),
+            args: {
+                enforceValue: true,
+                value: ['ios', 'win'],
+            },
+            template: (h("nv-togglebuttongroup", { "data-storybook-args": true }, h("nv-togglebutton", { value: "android" }, "Android"), h("nv-togglebutton", { value: "ios" }, "iOS"), h("nv-togglebutton", { value: "win" }, "Windows"))),
+        },
+        {
+            name: 'enforceValueWithExclusive',
+            args: {
+                enforceValue: true,
+                exclusive: true,
+                value: ['ios'],
+            },
+            template: (h("nv-togglebuttongroup", { "data-storybook-args": true }, h("nv-togglebutton", { value: "android" }, "Android"), h("nv-togglebutton", { value: "ios" }, "iOS"), h("nv-togglebutton", { value: "win" }, "Windows"))),
+        },
+        {
+            name: nameof(x => x.emphasis),
+            template: (h("div", { "data-class": "flex flex-col gap-4" }, h("nv-togglebuttongroup", { "data-storybook-args": true, emphasis: "low" }, h("nv-togglebutton", { value: "left" }, h("nv-icon", { name: "align-left" })), h("nv-togglebutton", { value: "center" }, h("nv-icon", { name: "align-center" })), h("nv-togglebutton", { value: "right" }, h("nv-icon", { name: "align-right" }))), h("nv-togglebuttongroup", { "data-storybook-args": true, emphasis: "high" }, h("nv-togglebutton", { value: "left" }, h("nv-icon", { name: "align-left" })), h("nv-togglebutton", { value: "center" }, h("nv-icon", { name: "align-center" })), h("nv-togglebutton", { value: "right" }, h("nv-icon", { name: "align-right" }))))),
+        },
+        {
+            name: nameof(x => x.size),
+            template: (h("div", { "data-class": "flex flex-col gap-4" }, h("nv-togglebuttongroup", { "data-storybook-args": true, size: "xs" }, h("nv-togglebutton", { value: "left" }, h("nv-icon", { name: "align-left" })), h("nv-togglebutton", { value: "center" }, h("nv-icon", { name: "align-center" })), h("nv-togglebutton", { value: "right" }, h("nv-icon", { name: "align-right" }))), h("nv-togglebuttongroup", { "data-storybook-args": true, size: "sm" }, h("nv-togglebutton", { value: "left" }, h("nv-icon", { name: "align-left" })), h("nv-togglebutton", { value: "center" }, h("nv-icon", { name: "align-center" })), h("nv-togglebutton", { value: "right" }, h("nv-icon", { name: "align-right" }))), h("nv-togglebuttongroup", { "data-storybook-args": true }, h("nv-togglebutton", { value: "left" }, h("nv-icon", { name: "align-left" })), h("nv-togglebutton", { value: "center" }, h("nv-icon", { name: "align-center" })), h("nv-togglebutton", { value: "right" }, h("nv-icon", { name: "align-right" }))), h("nv-togglebuttongroup", { "data-storybook-args": true, size: "lg" }, h("nv-togglebutton", { value: "left" }, h("nv-icon", { name: "align-left" })), h("nv-togglebutton", { value: "center" }, h("nv-icon", { name: "align-center" })), h("nv-togglebutton", { value: "right" }, h("nv-icon", { name: "align-right" }))))),
+        },
+    ],
+};
+export default NvTogglebuttongroupDocs;
+//# sourceMappingURL=nv-togglebuttongroup.docs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nv-togglebuttongroup.docs.js","sourceRoot":"","sources":["../../../src/components/nv-togglebuttongroup/nv-togglebuttongroup.docs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\nimport { nameof } from '../../utils/class.utils';\n\nconst NvTogglebuttongroupDocs: NovaDocs<Components.NvTogglebuttongroup> = {\n  component: 'nv-togglebuttongroup',\n  composedComponents: ['nv-togglebutton'],\n  subcomponents: ['nv-togglebutton', 'nv-icon'],\n  badge: 'beta',\n  stories: [\n    {\n      name: 'Default',\n      template: (\n        <nv-togglebuttongroup data-storybook-args>\n          <nv-togglebutton value=\"left\">\n            <nv-icon name=\"align-left\"></nv-icon>\n          </nv-togglebutton>\n          <nv-togglebutton value=\"center\">\n            <nv-icon name=\"align-center\"></nv-icon>\n          </nv-togglebutton>\n          <nv-togglebutton value=\"right\">\n            <nv-icon name=\"align-right\"></nv-icon>\n          </nv-togglebutton>\n        </nv-togglebuttongroup>\n      ),\n    },\n    {\n      name: nameof<Components.NvTogglebuttongroup>(x => x.value),\n      args: {\n        value: ['left', 'center'],\n        size: 'md',\n      },\n      template: (\n        <nv-togglebuttongroup data-storybook-args>\n          <nv-togglebutton value=\"left\">\n            <nv-icon name=\"align-left\"></nv-icon>\n          </nv-togglebutton>\n          <nv-togglebutton value=\"center\">\n            <nv-icon name=\"align-center\"></nv-icon>\n          </nv-togglebutton>\n          <nv-togglebutton value=\"right\">\n            <nv-icon name=\"align-right\"></nv-icon>\n          </nv-togglebutton>\n        </nv-togglebuttongroup>\n      ),\n    },\n    {\n      name: nameof<Components.NvTogglebuttongroup>(x => x.exclusive),\n      args: {\n        exclusive: true,\n      },\n      template: (\n        <nv-togglebuttongroup data-storybook-args>\n          <nv-togglebutton value=\"android\">Android</nv-togglebutton>\n          <nv-togglebutton value=\"ios\">iOS</nv-togglebutton>\n          <nv-togglebutton value=\"win\">Windows</nv-togglebutton>\n        </nv-togglebuttongroup>\n      ),\n    },\n    {\n      name: nameof<Components.NvTogglebuttongroup>(x => x.enforceValue),\n      args: {\n        enforceValue: true,\n        value: ['ios', 'win'],\n      },\n      template: (\n        <nv-togglebuttongroup data-storybook-args>\n          <nv-togglebutton value=\"android\">Android</nv-togglebutton>\n          <nv-togglebutton value=\"ios\">iOS</nv-togglebutton>\n          <nv-togglebutton value=\"win\">Windows</nv-togglebutton>\n        </nv-togglebuttongroup>\n      ),\n    },\n    {\n      name: 'enforceValueWithExclusive',\n      args: {\n        enforceValue: true,\n        exclusive: true,\n        value: ['ios'],\n      },\n      template: (\n        <nv-togglebuttongroup data-storybook-args>\n          <nv-togglebutton value=\"android\">Android</nv-togglebutton>\n          <nv-togglebutton value=\"ios\">iOS</nv-togglebutton>\n          <nv-togglebutton value=\"win\">Windows</nv-togglebutton>\n        </nv-togglebuttongroup>\n      ),\n    },\n    {\n      name: nameof<Components.NvTogglebuttongroup>(x => x.emphasis),\n      template: (\n        <div data-class=\"flex flex-col gap-4\">\n          <nv-togglebuttongroup data-storybook-args emphasis=\"low\">\n            <nv-togglebutton value=\"left\">\n              <nv-icon name=\"align-left\"></nv-icon>\n            </nv-togglebutton>\n            <nv-togglebutton value=\"center\">\n              <nv-icon name=\"align-center\"></nv-icon>\n            </nv-togglebutton>\n            <nv-togglebutton value=\"right\">\n              <nv-icon name=\"align-right\"></nv-icon>\n            </nv-togglebutton>\n          </nv-togglebuttongroup>\n          <nv-togglebuttongroup data-storybook-args emphasis=\"high\">\n            <nv-togglebutton value=\"left\">\n              <nv-icon name=\"align-left\"></nv-icon>\n            </nv-togglebutton>\n            <nv-togglebutton value=\"center\">\n              <nv-icon name=\"align-center\"></nv-icon>\n            </nv-togglebutton>\n            <nv-togglebutton value=\"right\">\n              <nv-icon name=\"align-right\"></nv-icon>\n            </nv-togglebutton>\n          </nv-togglebuttongroup>\n        </div>\n      ),\n    },\n    {\n      name: nameof<Components.NvTogglebuttongroup>(x => x.size),\n      template: (\n        <div data-class=\"flex flex-col gap-4\">\n          <nv-togglebuttongroup data-storybook-args size=\"xs\">\n            <nv-togglebutton value=\"left\">\n              <nv-icon name=\"align-left\"></nv-icon>\n            </nv-togglebutton>\n            <nv-togglebutton value=\"center\">\n              <nv-icon name=\"align-center\"></nv-icon>\n            </nv-togglebutton>\n            <nv-togglebutton value=\"right\">\n              <nv-icon name=\"align-right\"></nv-icon>\n            </nv-togglebutton>\n          </nv-togglebuttongroup>\n          <nv-togglebuttongroup data-storybook-args size=\"sm\">\n            <nv-togglebutton value=\"left\">\n              <nv-icon name=\"align-left\"></nv-icon>\n            </nv-togglebutton>\n            <nv-togglebutton value=\"center\">\n              <nv-icon name=\"align-center\"></nv-icon>\n            </nv-togglebutton>\n            <nv-togglebutton value=\"right\">\n              <nv-icon name=\"align-right\"></nv-icon>\n            </nv-togglebutton>\n          </nv-togglebuttongroup>\n          <nv-togglebuttongroup data-storybook-args>\n            <nv-togglebutton value=\"left\">\n              <nv-icon name=\"align-left\"></nv-icon>\n            </nv-togglebutton>\n            <nv-togglebutton value=\"center\">\n              <nv-icon name=\"align-center\"></nv-icon>\n            </nv-togglebutton>\n            <nv-togglebutton value=\"right\">\n              <nv-icon name=\"align-right\"></nv-icon>\n            </nv-togglebutton>\n          </nv-togglebuttongroup>\n          <nv-togglebuttongroup data-storybook-args size=\"lg\">\n            <nv-togglebutton value=\"left\">\n              <nv-icon name=\"align-left\"></nv-icon>\n            </nv-togglebutton>\n            <nv-togglebutton value=\"center\">\n              <nv-icon name=\"align-center\"></nv-icon>\n            </nv-togglebutton>\n            <nv-togglebutton value=\"right\">\n              <nv-icon name=\"align-right\"></nv-icon>\n            </nv-togglebutton>\n          </nv-togglebuttongroup>\n        </div>\n      ),\n    },\n  ],\n};\n\nexport default NvTogglebuttongroupDocs;\n"]}