@nova-design-system/nova-webcomponents 3.1.0 → 3.2.0

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

@@ -0,0 +1,264 @@
+import { h } from "@stencil/core";
+import { nameof } from "../../utils/class.utils";
+const NvFieldsliderDocs = {
+    component: 'nv-fieldslider',
+    badge: 'danger',
+    stories: [
+        {
+            name: 'Default',
+            template: h("nv-fieldslider", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.labelBeforeValue),
+            args: {
+                label: 'Price',
+                value: '50',
+                labelBeforeValue: '$',
+            },
+            template: h("nv-fieldslider", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.labelAfterValue),
+            args: {
+                label: 'Distance',
+                value: '25',
+                labelAfterValue: 'km',
+            },
+            template: h("nv-fieldslider", { "data-storybook-args": true }),
+        },
+        {
+            name: 'MinMax',
+            description: 'Slider with custom min/max range and initial value.',
+            args: {
+                label: 'Temperature (°C)',
+                min: -20,
+                max: 40,
+                value: '22',
+                labelAfterValue: '°C',
+            },
+            template: h("nv-fieldslider", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.step),
+            args: {
+                label: 'Volume (increments of 5)',
+                min: 0,
+                max: 100,
+                value: '25',
+                step: 5,
+            },
+            template: h("nv-fieldslider", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.snap),
+            args: {
+                label: 'Snapping Slider',
+                min: 0,
+                max: 100,
+                value: '35',
+                step: 5,
+                snap: true,
+            },
+            template: h("nv-fieldslider", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.showTicks),
+            args: {
+                label: 'Volume',
+                min: 0,
+                max: 100,
+                value: '40',
+                step: 10,
+                snap: true,
+                showTicks: true,
+            },
+            template: h("nv-fieldslider", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.ticks),
+            args: {
+                label: 'Temperature (°C)',
+                min: 0,
+                max: 100,
+                value: '7',
+                step: 1,
+                labelAfterValue: '°C',
+                ticks: [
+                    { value: 10, label: 'Cold' },
+                    { value: 80, label: 'Hot' },
+                ],
+            },
+            template: h("nv-fieldslider", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.snapTicks),
+            description: 'When snapTicks is true, the slider will snap to custom tick values rather than regular steps.',
+            args: {
+                label: 'Custom Pricing Tiers ($)',
+                min: 0,
+                max: 100,
+                value: '10',
+                step: 1,
+                snapTicks: true,
+                ticks: [
+                    { value: 0, label: 'Free' },
+                    { value: 10, label: 'Basic' },
+                    { value: 30, label: 'Pro' },
+                    { value: 75, label: 'Business' },
+                    { value: 100, label: 'Enterprise' },
+                ],
+                labelAfterValue: '$',
+            },
+            template: h("nv-fieldslider", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.hasField),
+            args: {
+                label: 'Price',
+                min: 0,
+                max: 1000,
+                value: '550',
+                step: 10,
+                hasField: true,
+            },
+            template: h("nv-fieldslider", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.range),
+            args: {
+                label: 'Price Range ($)',
+                min: 0,
+                max: 1000,
+                value: '200,800',
+                step: 50,
+                range: true,
+                labelAfterValue: '$',
+            },
+            template: h("nv-fieldslider", { "data-storybook-args": true }),
+        },
+        {
+            name: 'RangeFields',
+            description: 'Range slider with editable numeric fields for both values.',
+            args: {
+                label: 'Filter by Price ($)',
+                min: 0,
+                max: 1000,
+                value: '250,750',
+                step: 10,
+                range: true,
+                hasField: true,
+                labelAfterValue: '$',
+            },
+            template: h("nv-fieldslider", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.hideLabel),
+            args: {
+                label: 'Volume Level',
+                hideLabel: true,
+                value: '75',
+            },
+            template: h("nv-fieldslider", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.error),
+            args: {
+                label: 'Budget ($)',
+                value: '1500,20000',
+                min: 0,
+                max: 100000,
+                range: true,
+                error: true,
+                labelAfterValue: '$',
+            },
+            template: h("nv-fieldslider", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.errorDescription),
+            args: {
+                label: 'Budget ($)',
+                value: '1500,20000',
+                min: 0,
+                max: 100000,
+                range: true,
+                error: true,
+                errorDescription: 'Not enough funds!',
+                labelAfterValue: '$',
+            },
+            template: h("nv-fieldslider", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.success),
+            args: {
+                label: 'Target Achieved',
+                value: '30,70',
+                range: true,
+                min: 0,
+                max: 100,
+                success: true,
+            },
+            template: h("nv-fieldslider", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.disabled),
+            args: {
+                label: 'Settings (Locked)',
+                value: '30',
+                disabled: true,
+            },
+            template: h("nv-fieldslider", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.readonly),
+            args: {
+                label: 'Current Progress',
+                value: '65',
+                readonly: true,
+            },
+            template: h("nv-fieldslider", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.fluid),
+            args: {
+                label: 'Full Width Slider',
+                value: '50',
+                fluid: true,
+            },
+            template: h("nv-fieldslider", { "data-storybook-args": true }),
+        },
+        {
+            name: 'labelSlot',
+            description: 'Content to be placed as the label, will override the label prop.',
+            args: {
+                label: 'Original Label',
+                value: '45',
+            },
+            template: (h("nv-fieldslider", { "data-storybook-args": true }, h("span", { slot: "label" }, "Custom Label"))),
+        },
+        {
+            name: 'descriptionSlot',
+            description: 'Content to be placed as the description, will override the description prop.',
+            args: {
+                label: 'Description Example',
+                description: 'Original description',
+                value: '60',
+            },
+            template: (h("nv-fieldslider", { "data-storybook-args": true }, h("span", { slot: "description" }, "Custom Description"))),
+        },
+        {
+            name: 'errorDescriptionSlot',
+            description: 'Content to be placed as the error description, will override the errorDescription prop.',
+            args: {
+                label: 'Error Description Example',
+                errorDescription: 'Original error description',
+                value: '150',
+                min: 0,
+                max: 100,
+                error: true,
+            },
+            template: (h("nv-fieldslider", { "data-storybook-args": true }, h("span", { slot: "error-description" }, "Custom Error Description"))),
+        },
+    ],
+};
+export default NvFieldsliderDocs;
+//# sourceMappingURL=nv-fieldslider.docs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nv-fieldslider.docs.js","sourceRoot":"","sources":["../../../src/components/nv-fieldslider/nv-fieldslider.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 NvFieldsliderDocs: NovaDocs<Components.NvFieldslider> = {\n  component: 'nv-fieldslider',\n  badge: 'danger',\n  stories: [\n    {\n      name: 'Default',\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.labelBeforeValue),\n      args: {\n        label: 'Price',\n        value: '50',\n        labelBeforeValue: '$',\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.labelAfterValue),\n      args: {\n        label: 'Distance',\n        value: '25',\n        labelAfterValue: 'km',\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: 'MinMax',\n      description: 'Slider with custom min/max range and initial value.',\n      args: {\n        label: 'Temperature (°C)',\n        min: -20,\n        max: 40,\n        value: '22',\n        labelAfterValue: '°C',\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.step),\n      args: {\n        label: 'Volume (increments of 5)',\n        min: 0,\n        max: 100,\n        value: '25',\n        step: 5,\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.snap),\n      args: {\n        label: 'Snapping Slider',\n        min: 0,\n        max: 100,\n        value: '35',\n        step: 5,\n        snap: true,\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.showTicks),\n      args: {\n        label: 'Volume',\n        min: 0,\n        max: 100,\n        value: '40',\n        step: 10,\n        snap: true,\n        showTicks: true,\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.ticks),\n      args: {\n        label: 'Temperature (°C)',\n        min: 0,\n        max: 100,\n        value: '7',\n        step: 1,\n        labelAfterValue: '°C',\n        ticks: [\n          { value: 10, label: 'Cold' },\n          { value: 80, label: 'Hot' },\n        ],\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.snapTicks),\n      description:\n        'When snapTicks is true, the slider will snap to custom tick values rather than regular steps.',\n      args: {\n        label: 'Custom Pricing Tiers ($)',\n        min: 0,\n        max: 100,\n        value: '10',\n        step: 1,\n        snapTicks: true,\n        ticks: [\n          { value: 0, label: 'Free' },\n          { value: 10, label: 'Basic' },\n          { value: 30, label: 'Pro' },\n          { value: 75, label: 'Business' },\n          { value: 100, label: 'Enterprise' },\n        ],\n        labelAfterValue: '$',\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.hasField),\n      args: {\n        label: 'Price',\n        min: 0,\n        max: 1000,\n        value: '550',\n        step: 10,\n        hasField: true,\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.range),\n      args: {\n        label: 'Price Range ($)',\n        min: 0,\n        max: 1000,\n        value: '200,800',\n        step: 50,\n        range: true,\n        labelAfterValue: '$',\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: 'RangeFields',\n      description: 'Range slider with editable numeric fields for both values.',\n      args: {\n        label: 'Filter by Price ($)',\n        min: 0,\n        max: 1000,\n        value: '250,750',\n        step: 10,\n        range: true,\n        hasField: true,\n        labelAfterValue: '$',\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.hideLabel),\n      args: {\n        label: 'Volume Level',\n        hideLabel: true,\n        value: '75',\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.error),\n      args: {\n        label: 'Budget ($)',\n        value: '1500,20000',\n        min: 0,\n        max: 100000,\n        range: true,\n        error: true,\n        labelAfterValue: '$',\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.errorDescription),\n      args: {\n        label: 'Budget ($)',\n        value: '1500,20000',\n        min: 0,\n        max: 100000,\n        range: true,\n        error: true,\n        errorDescription: 'Not enough funds!',\n        labelAfterValue: '$',\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.success),\n      args: {\n        label: 'Target Achieved',\n        value: '30,70',\n        range: true,\n        min: 0,\n        max: 100,\n        success: true,\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.disabled),\n      args: {\n        label: 'Settings (Locked)',\n        value: '30',\n        disabled: true,\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.readonly),\n      args: {\n        label: 'Current Progress',\n        value: '65',\n        readonly: true,\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.fluid),\n      args: {\n        label: 'Full Width Slider',\n        value: '50',\n        fluid: true,\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: 'labelSlot',\n      description:\n        'Content to be placed as the label, will override the label prop.',\n      args: {\n        label: 'Original Label',\n        value: '45',\n      },\n      template: (\n        <nv-fieldslider data-storybook-args>\n          <span slot=\"label\">Custom Label</span>\n        </nv-fieldslider>\n      ),\n    },\n    {\n      name: 'descriptionSlot',\n      description:\n        'Content to be placed as the description, will override the description prop.',\n      args: {\n        label: 'Description Example',\n        description: 'Original description',\n        value: '60',\n      },\n      template: (\n        <nv-fieldslider data-storybook-args>\n          <span slot=\"description\">Custom Description</span>\n        </nv-fieldslider>\n      ),\n    },\n    {\n      name: 'errorDescriptionSlot',\n      description:\n        'Content to be placed as the error description, will override the errorDescription prop.',\n      args: {\n        label: 'Error Description Example',\n        errorDescription: 'Original error description',\n        value: '150',\n        min: 0,\n        max: 100,\n        error: true,\n      },\n      template: (\n        <nv-fieldslider data-storybook-args>\n          <span slot=\"error-description\">Custom Error Description</span>\n        </nv-fieldslider>\n      ),\n    },\n  ],\n};\n\nexport default NvFieldsliderDocs;\n"]}