@ngneers/controls-themes 0.0.1-pre2

package/nova/paginator/index.d.ts

@@ -0,0 +1,133 @@
+export declare const paginatorStyles: import("@ngneers/controls-themes").ThemePart<"paginator", import("@ngneers/controls-themes").ControlTemplate<"paginator", ["root", "page-size-options"], readonly [import("@ngneers/controls-themes").ControlTemplate<"button", ["root", "inline", "loading", `kind-${string}`, `color-${string}`], readonly import("@ngneers/controls-themes").ControlTemplate<string, string[], readonly any[]>[]>, 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<"paginator">[], [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/paginator/index.d.ts.map

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

package/nova/paginator/index.js

@@ -0,0 +1,19 @@
+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 { paginatorControlTemplate } from '@ngneers/controls-themes/templates/paginator';
+export const paginatorStyles = createThemePart({
+    controlTemplate: paginatorControlTemplate,
+    base: baseStyles.paginator,
+    dependencies: [colorsTemplate, sizesTemplate],
+    root: {
+        css: ({ v, c, d }) => css `
+      ${c('root')} > ${d('item-view', 'root')} {
+        justify-content: center;
+      }
+      ${c('page-size-options')} {
+        min-width: 4rem;
+      }
+    `,
+    },
+});

package/nova/popover/index.d.ts

@@ -0,0 +1,147 @@
+export declare const popoverStyles: import("@ngneers/controls-themes").ThemePart<"popover", import("@ngneers/controls-themes").ControlTemplate<"popover", ["root", "content", "content-closing", "anim-in", "anim-out"], readonly import("@ngneers/controls-themes").ControlTemplate<string, string[], readonly any[]>[]>, import("@ngneers/controls-themes").VariableTemplate<"popover">[], [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;
+    };
+}>, import("@ngneers/controls-themes").VariableTemplate<"anim", {
+    time: {
+        fade: null;
+        snappyFade: null;
+    };
+    ease: {
+        fade: null;
+        snappyFade: null;
+    };
+}>, import("@ngneers/controls-themes").VariableTemplate<"shadow", {
+    sm: null;
+    md: null;
+    lg: null;
+    xl: null;
+}>]>;
+//# sourceMappingURL=index.d.ts.map

package/nova/popover/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/nova/popover/index.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA0DxB,CAAC"}

package/nova/popover/index.js

@@ -0,0 +1,65 @@
+import { createThemePart, css } from '@ngneers/controls-themes/api';
+import { baseStyles } from '@ngneers/controls-themes/base';
+import { animationTemplate, colorsTemplate, shadowTemplate, sizesTemplate, } from '@ngneers/controls-themes/nova/base';
+import { popoverControlTemplate } from '@ngneers/controls-themes/templates/popover';
+const TRANSITION_BUFFER = '50ms';
+const MOVE_AMOUNT = 6; // in px
+export const popoverStyles = createThemePart({
+    controlTemplate: popoverControlTemplate,
+    base: baseStyles.popover,
+    dependencies: [colorsTemplate, sizesTemplate, animationTemplate, shadowTemplate],
+    root: {
+        css: ({ v, c }) => css `
+      ${c('root')} {
+        /** to make space for the animation (prevent overflow) */
+        padding-bottom: ${MOVE_AMOUNT + 1}px;
+        overflow: visible; /** so that box-shadow is not clipped */
+        /* The 100 ms buffer is so that the animation of the content finishes before the popover closes (Animation doesn't get cancelled) */
+        transition:
+          display calc(${v('anim.time.fade')} + ${TRANSITION_BUFFER}) allow-discrete,
+          overlay calc(${v('anim.time.fade')} + ${TRANSITION_BUFFER}) allow-discrete;
+        /* Currently not supported by webkit & firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1971162 */
+      }
+      ${c('content')} {
+        border-style: solid;
+        background: ${v('color.background')};
+        color: ${v('color.text')};
+        border-color: ${v('color.surface.300')};
+        border-radius: ${v('size.rounded.md')};
+        border-width: 1px;
+        padding: ${v('size.padding.md')};
+        opacity: 0;
+        box-shadow: ${v('shadow.md')};
+        /* We add some delay that is larger than the TRANSITION_BUFFER to not hide the content shortly during opening */
+        transition: display ${v('anim.time.fade')} allow-discrete;
+        animation: ${c('anim-in', 'animation')} ${v('anim.time.fade')} ${v('anim.ease.fade')}
+          forwards;
+        &${c('content-closing')} {
+          animation: ${c('anim-out', 'animation')} ${v('anim.time.fade')} ${v('anim.ease.fade')}
+            forwards;
+        }
+      }
+      @keyframes ${c('anim-in', 'animation')} {
+        from {
+          opacity: 0;
+          transform: translateY(${MOVE_AMOUNT}px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+      @keyframes ${c('anim-out', 'animation')} {
+        from {
+          opacity: 1;
+          transform: translateY(0);
+        }
+        to {
+          opacity: 0;
+          transform: translateY(${MOVE_AMOUNT}px);
+          display: none;
+        }
+      }
+    `,
+    },
+});

package/nova/progress/index.d.ts

@@ -0,0 +1,142 @@
+export declare const progressStyles: import("@ngneers/controls-themes").ThemePart<"progress", import("@ngneers/controls-themes").ControlTemplate<"progress", ["root", "svg", "track", "indeterminate", "circular", "fill", "fill2"], readonly import("@ngneers/controls-themes").ControlTemplate<string, string[], readonly any[]>[]>, import("@ngneers/controls-themes").VariableTemplate<"progress">[], [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;
+    };
+}>, import("@ngneers/controls-themes").VariableTemplate<"anim", {
+    time: {
+        fade: null;
+        snappyFade: null;
+    };
+    ease: {
+        fade: null;
+        snappyFade: null;
+    };
+}>]>;
+//# sourceMappingURL=index.d.ts.map

package/nova/progress/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/nova/progress/index.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA+EzB,CAAC"}

package/nova/progress/index.js

@@ -0,0 +1,84 @@
+import { createThemePart, css } from '@ngneers/controls-themes/api';
+import { baseStyles } from '@ngneers/controls-themes/base';
+import { animationTemplate, colorsTemplate, sizesTemplate, } from '@ngneers/controls-themes/nova/base';
+import { progressControlTemplate } from '@ngneers/controls-themes/templates/progress';
+export const progressStyles = createThemePart({
+    controlTemplate: progressControlTemplate,
+    base: baseStyles.progress,
+    dependencies: [colorsTemplate, sizesTemplate, animationTemplate],
+    root: {
+        css: ({ v, c, d }) => {
+            void d;
+            return css `
+        ${c('track')} {
+          background: ${v('color.surface.200')};
+          border-radius: ${v('size.rounded.md')};
+          height: 0.5rem;
+        }
+        ${c('fill')}, ${c('fill2')} {
+          background: ${v('color.primary.500')};
+          border-radius: ${v('size.rounded.md')};
+          transition: width ${v('anim.time.fade')} ${v('anim.ease.fade')};
+          height: 100%;
+        }
+        ${c('indeterminate')} {
+          ${c('fill')} {
+            animation: ${c('fill', 'animation')} 2s infinite;
+          }
+          ${c('fill2')} {
+            animation: ${c('fill2', 'animation')} 2s 0.5s infinite;
+          }
+        }
+
+        @keyframes ${c('fill', 'animation')} {
+          from {
+            left: -10%;
+            width: 10%;
+          }
+          to {
+            left: 130%;
+            width: 100%;
+          }
+        }
+        @keyframes ${c('fill2', 'animation')} {
+          from {
+            left: -80%;
+            width: 80%;
+          }
+          to {
+            left: 110%;
+            width: 10%;
+          }
+        }
+
+        /* Circular mode styles */
+
+        ${c('circular')} ${c('track')} {
+          stroke: ${v('color.surface.200')};
+          background: none;
+        }
+        ${c('circular')} ${c('fill')} {
+          stroke: ${v('color.primary.500')};
+          background: none;
+          transform-origin: center;
+          transform: rotate(-90deg);
+          transition: stroke-dashoffset ${v('anim.time.fade')} ${v('anim.ease.fade')};
+        }
+
+        /* Circular indeterminate animation */
+        ${c('circular')}${c('indeterminate')} ${c('fill')} {
+          animation: ${c('circular', 'animation')} 1s linear infinite;
+        }
+
+        @keyframes ${c('circular', 'animation')} {
+          0% {
+            transform: rotate(0);
+          }
+          100% {
+            transform: rotate(360deg);
+          }
+        }
+      `;
+        },
+    },
+});