@ngneers/controls-themes 0.0.1-pre2

package/nova/input-field/index.js

@@ -0,0 +1,247 @@
+import { createThemePart, css } from '@ngneers/controls-themes/api';
+import { baseStyles } from '@ngneers/controls-themes/base';
+import { animationTemplate, colorsTemplate, fontTemplate, sizesTemplate, } from '@ngneers/controls-themes/nova/base';
+import { inputFieldControlTemplate } from '@ngneers/controls-themes/templates/input-field';
+export const inputFieldStyles = createThemePart({
+    controlTemplate: inputFieldControlTemplate,
+    base: baseStyles.inputField,
+    dependencies: [colorsTemplate, sizesTemplate, animationTemplate, fontTemplate],
+    root: {
+        css: ({ v, c, d }) => {
+            const invalidDisabledSelector = `
+        ${c('invalid')}:disabled,
+        .ng-invalid.ng-touched:disabled ${c('root')},
+        ${c('root')}:has(.ng-invalid.ng-touched:disabled),
+        ${c('root')}:has(${d('input', 'invalid')}:disabled)
+      `;
+            const invalidReadonlySelector = `
+          ${c('invalid')}:read-only,
+          .ng-invalid.ng-touched:read-only ${c('root')},
+          ${c('root')}:has(.ng-invalid.ng-touched:read-only),
+          ${c('root')}:has(${d('input', 'invalid')}:read-only),
+          ${c('invalid')}[aria-readonly],
+          .ng-invalid.ng-touched[aria-readonly] ${c('root')},
+          ${c('root')}:has(.ng-invalid.ng-touched[aria-readonly]),
+          ${c('root')}:has(${d('input', 'invalid')}[aria-readonly])
+        `;
+            function getFloating(klass) {
+                return `${klass}:has(${d('input', 'root')}:focus),
+          ${klass}:has(${d('input', 'root')}:not(${d('input', 'empty')}))`;
+            }
+            return css `
+        ${c('root')} {
+          border-radius: ${v('size.rounded.md')};
+          border-color: ${v('color.border')};
+          border-width: 1px;
+          border-style: solid;
+          padding: ${v('size.padding.sm')} ${v('size.padding.md')};
+          background: ${v('color.background')};
+          color: ${v('color.text')};
+          transition:
+            border-color 0.1s ease-in-out,
+            color 0.1s ease-in-out,
+            outline-color 0.1s ease-in-out;
+          outline-color: transparent;
+          outline-width: 0;
+          outline-style: solid;
+          outline-offset: -1px;
+          overflow: auto;
+          /** line-height + vertical padding + border */
+          --baseHeight: calc(1lh + 2 * ${v('size.padding.sm')} + 2px);
+          height: max(var(--baseHeight), fit-content);
+
+          /* regular */
+          &:hover {
+            border-color: ${v('color.surface.500')};
+          }
+          &:focus-within,
+          :focus {
+            border-color: ${v('color.primary.500')};
+            outline-color: ${v('color.primary.500')};
+            outline-width: 2px;
+          }
+        }
+
+        /* disabled */
+        ${c('disabled')}, ${c('root')}:has(${d('input', 'root')}:disabled), :disabled ${c('root')}, ${c('root')}:has(${d('input', 'root')}[disabled]) {
+          background: ${v('color.disabled.background')};
+          border-color: ${v('color.disabled.border')};
+          color: ${v('color.disabled.text')};
+          &:hover {
+            border-color: ${v('color.disabled.border')};
+          }
+          &:focus-within,
+          :focus {
+            border-color: ${v('color.disabled.border')};
+            outline-width: 0;
+          }
+        }
+
+        /* read-only */
+        ${c('readonly')} ${c('root')}:has(${d('input', 'root')}:read-only), ${c('root')}:has(${d('input', 'root')}[aria-readonly]) {
+          border-color: ${v('color.disabled.border')};
+          &:hover {
+            border-color: ${v('color.disabled.border')};
+          }
+          &:focus-within,
+          :focus {
+            border-color: ${v('color.disabled.border')};
+            outline-color: ${v('color.disabled.border')};
+          }
+        }
+
+        /* invalid */
+        ${c('invalid')}, .ng-invalid.ng-touched ${c('root')}, ${c('root')}:has(.ng-invalid.ng-touched), ${c('root')}:has(${d('input', 'invalid')}) {
+          border-color: ${v('color.invalid.border')};
+          &:hover {
+            border-color: ${v('color.invalid.border')};
+          }
+          &:focus-within {
+            border-color: ${v('color.invalid.border')};
+            outline-color: ${v('color.invalid.border')};
+          }
+        }
+
+        /* invalid & disabled */
+        ${invalidDisabledSelector} {
+          border-color: ${v('color.invalid.border')};
+          &:hover {
+            border-color: ${v('color.invalid.border')};
+          }
+          &:focus-within {
+            border-color: ${v('color.invalid.border')};
+            outline-color: ${v('color.invalid.border')};
+          }
+        }
+
+        /* invalid & read-only */
+        ${invalidReadonlySelector} {
+          border-color: ${v('color.invalid.border')};
+          &:hover {
+            border-color: ${v('color.invalid.border')};
+          }
+          &:focus-within {
+            border-color: ${v('color.invalid.border')};
+            outline-color: ${v('color.invalid.border')};
+          }
+        }
+
+        ${c('clear-button')} {
+          font-size: calc(1em * 0.9);
+          color: ${v('color.surface.500')};
+          &:hover {
+            color: ${v('color.surface.700')};
+          }
+        }
+
+        /* Label Styles */
+        ${c('label')} {
+          color: ${v('color.surface.600')};
+          font-size: ${v('font.size.xs')};
+          font-weight: ${v('font.weight.medium')};
+
+          max-width: 100%;
+          white-space: pre;
+          overflow: hidden;
+          text-overflow: ellipsis;
+
+          transition-duration: ${v('anim.time.fade')};
+          transition-timing-function: ${v('anim.ease.fade')};
+        }
+
+        /* Label over */
+        ${c('labelKind-over')}, ${c('labelKind-floatOver')} {
+          position: relative;
+          ${c('label')} {
+            position: absolute;
+            top: 0;
+            transform: translateY(-100%);
+            left: 0;
+            padding: 0 ${v('size.padding.md')};
+            transition-property: top, transform, font-size;
+          }
+        }
+        /* float: not floating */
+        ${c('labelKind-floatOver')}:not(${getFloating(c('labelKind-floatOver'))}) {
+          ${c('label')} {
+            font-size: 1rem;
+            pointer-events: none;
+            top: 50%;
+            transform: translateY(-50%);
+          }
+        }
+
+        /* Label in */
+        ${c('labelKind-in')}, ${c('labelKind-floatIn')} {
+          position: relative;
+          ${c('root')} {
+            padding-top: 1.2rem;
+            height: max(calc(var(--baseHeight) + 1.2rem), fit-content);
+          }
+          ${c('label')} {
+            position: absolute;
+            padding: ${v('size.padding.sm')} ${v('size.padding.md')};
+            transform: translateY(0);
+            top: 0;
+            transition-property: top, transform, font-size;
+          }
+        }
+        /* float: not floating */
+        ${c('labelKind-floatIn')}:not(${getFloating(c('labelKind-floatIn'))}) {
+          ${c('label')} {
+            font-size: 1rem;
+            pointer-events: none;
+            top: 50%;
+            transform: translateY(-50%);
+          }
+        }
+
+        /* Label on */
+        ${c('labelKind-on')}, ${c('labelKind-floatOn')} {
+          position: relative;
+          ${c('label')} {
+            position: absolute;
+            padding: ${v('size.padding.sm')} 4px;
+            top: 0;
+            left: ${v('size.padding.md')};
+            max-width: calc(100% - ${v('size.padding.md')} * 2);
+            transform: translateY(-55%);
+            transition-property: top, left, font-size, transform, padding;
+
+            &:before {
+              content: '';
+              z-index: -1;
+              position: absolute;
+              top: 55%;
+              transform: translateY(-50%) scale(1);
+              left: 0;
+              width: 100%;
+              height: 5px;
+              background: ${v('color.background')};
+              transition: transform ${v('anim.time.fade')} ${v('anim.ease.fade')};
+            }
+          }
+        }
+        /* float: not floating */
+        ${c('labelKind-floatOn')}:not(${getFloating(c('labelKind-floatOn'))}) {
+          ${c('label')} {
+            font-size: 1rem;
+            pointer-events: none;
+            padding: 0 ${v('size.padding.md')};
+            left: 0;
+            transform: translateY(-50%);
+            top: 50%;
+            &:before {
+              transform: translateY(-50%) scale(0);
+            }
+          }
+        }
+
+        /* Label hidden */
+        ${c('labelKind-hidden')} ${c('label')} {
+          display: none;
+        }
+      `;
+        },
+    },
+});

package/nova/input-mask/index.d.ts

@@ -0,0 +1,133 @@
+export declare const inputMaskStyles: import("@ngneers/controls-themes").ThemePart<"input-mask", import("@ngneers/controls-themes").ControlTemplate<"input-mask", ["root", "mask", "mask-placeholder", "mask-text"], readonly [import("@ngneers/controls-themes").ControlTemplate<"input-field", ["root", "host", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`], readonly [import("@ngneers/controls-themes").ControlTemplate<"input", ["root", "invalid", "empty"], readonly import("@ngneers/controls-themes").ControlTemplate<string, string[], readonly any[]>[]>]>, import("@ngneers/controls-themes").ControlTemplate<"input", ["root", "invalid", "empty"], readonly import("@ngneers/controls-themes").ControlTemplate<string, string[], readonly any[]>[]>]>, import("@ngneers/controls-themes").VariableTemplate<"input-mask">[], [import("@ngneers/controls-themes").VariableTemplate<"color", {
+    background: null;
+    border: null;
+    text: null;
+    disabled: {
+        text: null;
+        border: null;
+        background: null;
+    };
+    invalid: {
+        text: null;
+        border: null;
+        background: null;
+    };
+    accent: {
+        '50': null;
+        '100': null;
+        '200': null;
+        '300': null;
+        '400': null;
+        '500': null;
+        '600': null;
+        '700': null;
+        '800': null;
+        '900': null;
+        '950': null;
+    };
+    error: {
+        '50': null;
+        '100': null;
+        '200': null;
+        '300': null;
+        '400': null;
+        '500': null;
+        '600': null;
+        '700': null;
+        '800': null;
+        '900': null;
+        '950': null;
+    };
+    info: {
+        '50': null;
+        '100': null;
+        '200': null;
+        '300': null;
+        '400': null;
+        '500': null;
+        '600': null;
+        '700': null;
+        '800': null;
+        '900': null;
+        '950': null;
+    };
+    primary: {
+        '50': null;
+        '100': null;
+        '200': null;
+        '300': null;
+        '400': null;
+        '500': null;
+        '600': null;
+        '700': null;
+        '800': null;
+        '900': null;
+        '950': null;
+    };
+    secondary: {
+        '50': null;
+        '100': null;
+        '200': null;
+        '300': null;
+        '400': null;
+        '500': null;
+        '600': null;
+        '700': null;
+        '800': null;
+        '900': null;
+        '950': null;
+    };
+    success: {
+        '50': null;
+        '100': null;
+        '200': null;
+        '300': null;
+        '400': null;
+        '500': null;
+        '600': null;
+        '700': null;
+        '800': null;
+        '900': null;
+        '950': null;
+    };
+    surface: {
+        '50': null;
+        '100': null;
+        '200': null;
+        '300': null;
+        '400': null;
+        '500': null;
+        '600': null;
+        '700': null;
+        '800': null;
+        '900': null;
+        '950': null;
+    };
+    warning: {
+        '50': null;
+        '100': null;
+        '200': null;
+        '300': null;
+        '400': null;
+        '500': null;
+        '600': null;
+        '700': null;
+        '800': null;
+        '900': null;
+        '950': null;
+    };
+}>, import("@ngneers/controls-themes").VariableTemplate<"size", {
+    rounded: {
+        sm: null;
+        md: null;
+        lg: null;
+        full: null;
+    };
+    padding: {
+        sm: null;
+        md: null;
+        lg: null;
+        xl: null;
+    };
+}>]>;
+//# sourceMappingURL=index.d.ts.map

package/nova/input-mask/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/nova/input-mask/index.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAkB1B,CAAC"}

package/nova/input-mask/index.js

@@ -0,0 +1,23 @@
+import { createThemePart, css } from '@ngneers/controls-themes/api';
+import { baseStyles } from '@ngneers/controls-themes/base';
+import { colorsTemplate, sizesTemplate } from '@ngneers/controls-themes/nova/base';
+import { inputMaskControlTemplate } from '@ngneers/controls-themes/templates/input-mask';
+export const inputMaskStyles = createThemePart({
+    controlTemplate: inputMaskControlTemplate,
+    base: baseStyles.inputMask,
+    dependencies: [colorsTemplate, sizesTemplate],
+    root: {
+        css: ({ v, c, d }) => css `
+      ${c('mask-text')} {
+        color: ${v('color.surface.400')};
+      }
+      ${c('root')}:has(${d('input', 'root')}${d('input-field', 'root')}) {
+        ${c('mask')} {
+          /* 1px for the top & left border of the input field */
+          top: calc(1px + ${v('size.padding.sm')});
+          left: calc(1px + ${v('size.padding.md')});
+        }
+      }
+    `,
+    },
+});

package/nova/item-view/index.d.ts

@@ -0,0 +1,133 @@
+export declare const itemViewStyles: import("@ngneers/controls-themes").ThemePart<"item-view", import("@ngneers/controls-themes").ControlTemplate<"item-view", ["root", "item", "item-overflowing", "more-items", "more-items-hidden", "more-items-default", "hidden-separator"], readonly import("@ngneers/controls-themes").ControlTemplate<string, string[], readonly any[]>[]>, import("@ngneers/controls-themes").VariableTemplate<"item-view">[], [import("@ngneers/controls-themes").VariableTemplate<"color", {
+    background: null;
+    border: null;
+    text: null;
+    disabled: {
+        text: null;
+        border: null;
+        background: null;
+    };
+    invalid: {
+        text: null;
+        border: null;
+        background: null;
+    };
+    accent: {
+        '50': null;
+        '100': null;
+        '200': null;
+        '300': null;
+        '400': null;
+        '500': null;
+        '600': null;
+        '700': null;
+        '800': null;
+        '900': null;
+        '950': null;
+    };
+    error: {
+        '50': null;
+        '100': null;
+        '200': null;
+        '300': null;
+        '400': null;
+        '500': null;
+        '600': null;
+        '700': null;
+        '800': null;
+        '900': null;
+        '950': null;
+    };
+    info: {
+        '50': null;
+        '100': null;
+        '200': null;
+        '300': null;
+        '400': null;
+        '500': null;
+        '600': null;
+        '700': null;
+        '800': null;
+        '900': null;
+        '950': null;
+    };
+    primary: {
+        '50': null;
+        '100': null;
+        '200': null;
+        '300': null;
+        '400': null;
+        '500': null;
+        '600': null;
+        '700': null;
+        '800': null;
+        '900': null;
+        '950': null;
+    };
+    secondary: {
+        '50': null;
+        '100': null;
+        '200': null;
+        '300': null;
+        '400': null;
+        '500': null;
+        '600': null;
+        '700': null;
+        '800': null;
+        '900': null;
+        '950': null;
+    };
+    success: {
+        '50': null;
+        '100': null;
+        '200': null;
+        '300': null;
+        '400': null;
+        '500': null;
+        '600': null;
+        '700': null;
+        '800': null;
+        '900': null;
+        '950': null;
+    };
+    surface: {
+        '50': null;
+        '100': null;
+        '200': null;
+        '300': null;
+        '400': null;
+        '500': null;
+        '600': null;
+        '700': null;
+        '800': null;
+        '900': null;
+        '950': null;
+    };
+    warning: {
+        '50': null;
+        '100': null;
+        '200': null;
+        '300': null;
+        '400': null;
+        '500': null;
+        '600': null;
+        '700': null;
+        '800': null;
+        '900': null;
+        '950': null;
+    };
+}>, import("@ngneers/controls-themes").VariableTemplate<"size", {
+    rounded: {
+        sm: null;
+        md: null;
+        lg: null;
+        full: null;
+    };
+    padding: {
+        sm: null;
+        md: null;
+        lg: null;
+        xl: null;
+    };
+}>]>;
+//# sourceMappingURL=index.d.ts.map

package/nova/item-view/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/nova/item-view/index.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAWzB,CAAC"}

package/nova/item-view/index.js

@@ -0,0 +1,16 @@
+import { createThemePart, css } from '@ngneers/controls-themes/api';
+import { baseStyles } from '@ngneers/controls-themes/base';
+import { colorsTemplate, sizesTemplate } from '@ngneers/controls-themes/nova/base';
+import { itemViewControlTemplate } from '@ngneers/controls-themes/templates/item-view';
+export const itemViewStyles = createThemePart({
+    controlTemplate: itemViewControlTemplate,
+    base: baseStyles.itemView,
+    dependencies: [colorsTemplate, sizesTemplate],
+    root: {
+        css: ({ v, c }) => css `
+      ${c('root')} {
+        gap: 4px;
+      }
+    `,
+    },
+});