@nova-design-system/nova-webcomponents 3.0.0-beta.35 → 3.0.0-beta.37

package/dist/collection/components/nv-fieldtime/nv-fieldtime.css

@@ -0,0 +1,261 @@
+nv-fieldtime {
+  --nv-field-border-default: var(--components-form-field-border-default);
+  --nv-field-border-hover: var(--components-form-field-border-hover);
+  --nv-field-border-focus: var(--components-form-field-border-focus);
+  --nv-field-border-disabled: var(--components-form-field-border-default);
+  --nv-field-border-readonly: var(--components-form-field-border-default);
+  --nv-field-focus-box-shadow: var(--color-focus-brand);
+  --nv-field-background: var(--components-form-field-background-default);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--form-gap-y);
+  box-sizing: border-box;
+}
+nv-fieldtime[readonly]:not([readonly=false]) {
+  --nv-field-border-default: var(--components-form-field-border-readonly);
+  --nv-field-border-hover: var(--nv-field-border-default);
+  --nv-field-border-focus: var(--components-form-field-border-focus);
+  --nv-field-border-disabled: var(--nv-field-border-default);
+  --nv-field-border-readonly: var(--nv-field-border-default);
+  --nv-field-background: var(--components-form-field-background-readonly);
+}
+nv-fieldtime[error]:not([error=false]) {
+  --nv-field-border-default: var(--components-form-field-border-error);
+  --nv-field-border-hover: var(--nv-field-border-default);
+  --nv-field-border-focus: var(--nv-field-border-default);
+  --nv-field-border-disabled: var(--nv-field-border-default);
+  --nv-field-border-readonly: var(--nv-field-border-default);
+  --nv-field-focus-box-shadow: var(--color-focus-destructive);
+}
+nv-fieldtime[success]:not([success=false]) {
+  --nv-field-border-default: var(--components-form-field-border-success);
+  --nv-field-border-hover: var(--nv-field-border-default);
+  --nv-field-border-focus: var(--nv-field-border-default);
+  --nv-field-border-disabled: var(--nv-field-border-default);
+  --nv-field-border-readonly: var(--nv-field-border-default);
+  --nv-field-focus-box-shadow: var(--color-focus-success);
+}
+nv-fieldtime[required]:not([required=false]) label::after {
+  content: "*";
+  color: var(--components-form-text-required);
+  font-weight: 700;
+}
+nv-fieldtime label {
+  display: flex;
+  align-items: center;
+  gap: var(--form-label-gap);
+  align-self: stretch;
+  color: var(--components-form-text-label-default);
+  font-family: "TT Norms Pro", sans-serif;
+  font-size: var(--form-label-font-size);
+  font-style: normal;
+  font-weight: 500;
+  line-height: var(--form-label-line-height);
+}
+nv-fieldtime nv-popover {
+  width: 100%;
+  display: block;
+}
+nv-fieldtime nv-popover [data-scope=popover] {
+  padding: var(--list-custom-padding);
+  background-color: var(--components-list-custom-background);
+  border: 1px solid var(--components-list-custom-border);
+  width: 100%;
+}
+nv-fieldtime .input-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--form-gap-x);
+  align-items: stretch;
+  align-self: stretch;
+  width: 100%;
+}
+nv-fieldtime .input-container {
+  display: flex;
+  flex-grow: 1;
+  padding: calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);
+  justify-content: center;
+  align-items: center;
+  gap: var(--form-field-gap);
+  align-self: stretch;
+  border-radius: var(--form-field-radius);
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--nv-field-border-default);
+  opacity: var(--components-form-opacity-default);
+  background: var(--nv-field-background);
+  transition: all 150ms ease-out;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  position: relative;
+  width: 100%;
+  min-height: 40px;
+  gap: 0;
+}
+nv-fieldtime .input-container:hover {
+  border-color: var(--nv-field-border-hover);
+}
+nv-fieldtime .input-container:focus-within {
+  border-color: var(--nv-field-border-focus);
+  box-shadow: 0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow);
+}
+nv-fieldtime .input-container:has(input:read-only) {
+  opacity: 0.5;
+  background-color: var(--components-form-field-background-readonly);
+  border-color: var(--nv-field-border-readonly);
+}
+nv-fieldtime .input-container:has(input:disabled) {
+  opacity: 0.5;
+  background-color: var(--components-form-field-background-disabled);
+  border-color: var(--nv-field-border-disabled);
+}
+nv-fieldtime .input-container input.time-input {
+  display: flex;
+  align-items: center;
+  flex: 1 0 0;
+  overflow: hidden;
+  background-color: transparent;
+  color: var(--components-form-field-content-text);
+  text-overflow: ellipsis;
+  font-size: var(--form-field-font-size);
+  font-style: normal;
+  font-weight: 500;
+  line-height: var(--form-field-line-height);
+  width: 100%;
+  min-width: 24px;
+  flex: 0 0 24px;
+  text-align: center;
+  padding: 0;
+  margin: 0;
+}
+nv-fieldtime .input-container input.time-input:focus {
+  outline: none;
+}
+nv-fieldtime .input-container input.time-input::placeholder {
+  overflow: hidden;
+  color: var(--components-form-field-content-placeholder);
+  text-overflow: ellipsis;
+  font-family: "TT Norms Pro", sans-serif;
+  font-size: var(--form-field-font-size);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--form-field-line-height);
+}
+nv-fieldtime .input-container input.time-input::-webkit-inner-spin-button, nv-fieldtime .input-container input.time-input::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+nv-fieldtime .input-container span {
+  width: 100%;
+  text-align: center;
+  min-width: 24px;
+  flex: 0 0 24px;
+  padding: 0 4px;
+  color: var(--components-form-field-content-text);
+}
+nv-fieldtime .input-container .toggle-time-icon {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-left: auto;
+}
+nv-fieldtime .input-container nv-icon.validation {
+  color: var(--nv-field-border-default);
+  position: absolute;
+  right: 50px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+nv-fieldtime .input-container.focus-within, nv-fieldtime .input-container:hover {
+  border-color: var(--nv-field-border-focus);
+  box-shadow: 0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow);
+}
+nv-fieldtime .description {
+  align-self: stretch;
+  color: var(--components-form-text-description-default);
+  font-family: "TT Norms Pro", sans-serif;
+  font-size: var(--form-description-font-size);
+  font-style: normal;
+  line-height: var(--form-description-line-height);
+}
+nv-fieldtime .error-description {
+  align-self: stretch;
+  color: var(--components-form-text-description-default);
+  font-family: "TT Norms Pro", sans-serif;
+  font-size: var(--form-description-font-size);
+  font-style: normal;
+  line-height: var(--form-description-line-height);
+  color: var(--components-form-text-description-error);
+}
+nv-fieldtime hr {
+  border: none;
+  border-top: 1px solid var(--dropdown-divider-color, #ccc);
+  margin: 0.5rem 0;
+}
+
+.input-container.focus-within,
+.input-container:hover {
+  border-color: var(--nv-field-border-focus);
+  box-shadow: 0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow);
+}
+
+.time-dropdown {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  width: 100%;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+}
+.time-dropdown .time-columns {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+.time-dropdown .time-columns .time-column {
+  flex: 1;
+  text-align: center;
+  max-height: 200px;
+  overflow-y: auto;
+  scroll-behavior: smooth;
+}
+.time-dropdown .time-columns .time-column::-webkit-scrollbar {
+  width: 4px;
+}
+.time-dropdown .time-columns .time-column::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+}
+.time-dropdown .time-columns .time-column:last-child {
+  border-right: none;
+}
+.time-dropdown .time-columns .time-column .time-option {
+  padding: 8px;
+  text-align: center;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.time-dropdown .time-columns .time-column .time-option:hover {
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--color-rainbow-10-background);
+}
+.time-dropdown .time-columns .time-column .time-option:hover, .time-dropdown .time-columns .time-column .time-option:focus, .time-dropdown .time-columns .time-column .time-option:focus-within {
+  background-color: var(--components-list-custom-item-background-hover);
+  color: var(--components-menu-contextual-item-content-hover);
+}
+.time-dropdown .time-columns .time-column .time-option.selected {
+  background: var(--color-rainbow-10-background);
+  color: var(--color-rainbow-10-text);
+}
+.time-dropdown .time-columns .time-column .time-option.highlighted {
+  background-color: var(--components-list-custom-item-background-hover);
+  color: var(--components-menu-contextual-item-content-hover);
+}

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

@@ -0,0 +1,110 @@
+import { h } from "@stencil/core";
+import { nameof } from "../../utils/class.utils";
+const NvFieldtimeDocs = {
+    component: 'nv-fieldtime',
+    subcomponents: ['nv-icon'],
+    stories: [
+        {
+            name: 'Default',
+            template: h("nv-fieldtime", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.value),
+            args: { value: '12:34:56' },
+            template: h("nv-fieldtime", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.label),
+            args: { label: 'Label' },
+            template: h("nv-fieldtime", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.readonly),
+            args: { readonly: true },
+            template: h("nv-fieldtime", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.disabled),
+            args: { disabled: true },
+            template: h("nv-fieldtime", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.required),
+            args: { required: true, label: 'Required' },
+            template: h("nv-fieldtime", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.name),
+            args: { name: 'name' },
+            template: h("nv-fieldtime", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.success),
+            args: { success: true },
+            template: h("nv-fieldtime", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.error),
+            args: { error: true },
+            template: h("nv-fieldtime", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.errorDescription),
+            args: { error: true, errorDescription: 'Error Description' },
+            template: h("nv-fieldtime", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.max),
+            args: { max: '20:59:59' },
+            template: h("nv-fieldtime", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.min),
+            args: { min: '01:00:00' },
+            template: h("nv-fieldtime", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.format),
+            args: { format: 'HH:mm:ss' },
+            template: (h("div", { "data-class": "flex flex-col gap-4 items-center w-full" }, h("nv-fieldtime", { "data-class": "w-full", label: "format", "data-storybook-args": true }), h("div", { "data-class": "flex flex-row gap-4 items-center w-full" }, h("nv-fieldtime", { "data-class": "w-full", label: "hh", format: "hh" }), h("nv-fieldtime", { "data-class": "w-full", label: "HH", format: "HH" })), h("div", { "data-class": "flex flex-row gap-4 items-center w-full" }, h("nv-fieldtime", { "data-class": "w-full", label: "hh:mm", format: "hh:mm" }), h("nv-fieldtime", { "data-class": "w-full", label: "HH:mm", format: "HH:mm" })), h("div", { "data-class": "flex flex-row gap-4 items-center w-full" }, h("nv-fieldtime", { "data-class": "w-full", label: "hh:mm:ss", format: "hh:mm:ss" }), h("nv-fieldtime", { "data-class": "w-full", label: "HH:mm:ss", format: "HH:mm:ss" })))),
+        },
+        {
+            name: nameof(x => x.description),
+            args: { description: 'Description' },
+            template: h("nv-fieldtime", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.open),
+            args: { open: true },
+            template: h("nv-fieldtime", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.step),
+            args: { step: 7200000 },
+            template: h("nv-fieldtime", { "data-storybook-args": true }),
+        },
+        {
+            name: 'SlotLabel',
+            template: (h("nv-fieldtime", { "data-storybook-args": true }, h("span", { slot: "label" }, "Label Slot"))),
+        },
+        {
+            name: 'SlotBeforeInput',
+            template: (h("nv-fieldtime", { "data-storybook-args": true }, h("span", { slot: "before-input" }, "Before Input Slot"))),
+        },
+        {
+            name: 'SlotAfterInput',
+            template: (h("nv-fieldtime", { "data-storybook-args": true }, h("span", { slot: "after-input" }, "After Input Slot"))),
+        },
+        {
+            name: 'SlotLeadingInput',
+            template: (h("nv-fieldtime", { "data-storybook-args": true }, h("nv-icon", { slot: "leading-input", name: "clock" }))),
+        },
+        {
+            name: 'SlotErrorDescription',
+            args: { error: true },
+            template: (h("nv-fieldtime", { "data-storybook-args": true }, h("span", { slot: "error-description" }, "Error Description Slot"))),
+        },
+    ],
+};
+export default NvFieldtimeDocs;
+//# sourceMappingURL=nv-fieldtime.docs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nv-fieldtime.docs.js","sourceRoot":"","sources":["../../../src/components/nv-fieldtime/nv-fieldtime.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 NvFieldtimeDocs: NovaDocs<Components.NvFieldtime> = {\n  component: 'nv-fieldtime',\n  subcomponents: ['nv-icon'],\n  stories: [\n    {\n      name: 'Default',\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.value),\n      args: { value: '12:34:56' },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.label),\n      args: { label: 'Label' },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.readonly),\n      args: { readonly: true },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.disabled),\n      args: { disabled: true },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.required),\n      args: { required: true, label: 'Required' },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.name),\n      args: { name: 'name' },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.success),\n      args: { success: true },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.error),\n      args: { error: true },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.errorDescription),\n      args: { error: true, errorDescription: 'Error Description' },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.max),\n      args: { max: '20:59:59' },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.min),\n      args: { min: '01:00:00' },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.format),\n      args: { format: 'HH:mm:ss' },\n      template: (\n        <div data-class=\"flex flex-col gap-4 items-center w-full\">\n          <nv-fieldtime\n            data-class=\"w-full\"\n            label=\"format\"\n            data-storybook-args\n          />\n\n          <div data-class=\"flex flex-row gap-4 items-center w-full\">\n            <nv-fieldtime data-class=\"w-full\" label=\"hh\" format=\"hh\" />\n            <nv-fieldtime data-class=\"w-full\" label=\"HH\" format=\"HH\" />\n          </div>\n          <div data-class=\"flex flex-row gap-4 items-center w-full\">\n            <nv-fieldtime data-class=\"w-full\" label=\"hh:mm\" format=\"hh:mm\" />\n            <nv-fieldtime data-class=\"w-full\" label=\"HH:mm\" format=\"HH:mm\" />\n          </div>\n          <div data-class=\"flex flex-row gap-4 items-center w-full\">\n            <nv-fieldtime\n              data-class=\"w-full\"\n              label=\"hh:mm:ss\"\n              format=\"hh:mm:ss\"\n            />\n            <nv-fieldtime\n              data-class=\"w-full\"\n              label=\"HH:mm:ss\"\n              format=\"HH:mm:ss\"\n            />\n          </div>\n        </div>\n      ),\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.description),\n      args: { description: 'Description' },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.open),\n      args: { open: true },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.step),\n      args: { step: 7200000 },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: 'SlotLabel',\n      template: (\n        <nv-fieldtime data-storybook-args>\n          <span slot=\"label\">Label Slot</span>\n        </nv-fieldtime>\n      ),\n    },\n    {\n      name: 'SlotBeforeInput',\n      template: (\n        <nv-fieldtime data-storybook-args>\n          <span slot=\"before-input\">Before Input Slot</span>\n        </nv-fieldtime>\n      ),\n    },\n    {\n      name: 'SlotAfterInput',\n      template: (\n        <nv-fieldtime data-storybook-args>\n          <span slot=\"after-input\">After Input Slot</span>\n        </nv-fieldtime>\n      ),\n    },\n    {\n      name: 'SlotLeadingInput',\n      template: (\n        <nv-fieldtime data-storybook-args>\n          <nv-icon slot=\"leading-input\" name=\"clock\" />\n        </nv-fieldtime>\n      ),\n    },\n    {\n      name: 'SlotErrorDescription',\n      args: { error: true },\n      template: (\n        <nv-fieldtime data-storybook-args>\n          <span slot=\"error-description\">Error Description Slot</span>\n        </nv-fieldtime>\n      ),\n    },\n  ],\n};\n\nexport default NvFieldtimeDocs;\n"]}