@3ddv/software-division-components 1.5.0 → 2.0.0

package/generic/select/lib/hlm-select-trigger.ts

@@ -0,0 +1,53 @@
+import { HlmIcon } from '@3ddv/software-division-components/generic/icon';
+import { ChangeDetectionStrategy, Component, computed, contentChild, inject, input } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideChevronDown } from '@ng-icons/lucide';
+import { hlm } from '@spartan-ng/brain/core';
+import { BrnSelect, BrnSelectTrigger } from '@spartan-ng/brain/select';
+import { cva } from 'class-variance-authority';
+import type { ClassValue } from 'clsx';
+
+export const selectTriggerVariants = cva(
+  `border-input [&>ng-icon]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 dark:bg-input/30 dark:hover:bg-input/50 flex w-full items-center justify-between gap-2 rounded-3xl border bg-transparent px-3 py-1.5 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-6 [&>ng-icon]:pointer-events-none [&>ng-icon]:shrink-0 [&>ng-icon]:size-4`,
+  {
+    variants: {
+      error: {
+        auto: '[&.ng-invalid.ng-touched]:text-destructive [&.ng-invalid.ng-touched]:border-destructive [&.ng-invalid.ng-touched]:focus-visible:ring-destructive/20 dark:[&.ng-invalid.ng-touched]:focus-visible:ring-destructive/40',
+        true: 'text-destructive border-destructive focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40',
+      },
+    },
+    defaultVariants: {
+      error: 'auto',
+    },
+  }
+);
+
+@Component({
+  selector: 'hlm-select-trigger',
+  imports: [BrnSelectTrigger, NgIcon, HlmIcon],
+  providers: [provideIcons({ lucideChevronDown })],
+  template: `
+    <button #button brnSelectTrigger hlmInput type="button" [attr.data-size]="size()" [class]="_computedClass()">
+      <ng-content />
+      @if (_icon()) {
+        <ng-content select="ng-icon" />
+      } @else {
+        <ng-icon class="ml-2 flex-none" hlm name="lucideChevronDown" size="sm" />
+      }
+    </button>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class HlmSelectTrigger {
+  protected readonly _icon = contentChild(HlmIcon);
+
+  protected readonly _brnSelect = inject(BrnSelect, { optional: true });
+
+  public readonly userClass = input<ClassValue>('', { alias: 'class' });
+
+  public readonly size = input<'default' | 'sm'>('default');
+
+  protected readonly _computedClass = computed(() =>
+    hlm(selectTriggerVariants({ error: this._brnSelect?.errorState() }), this.userClass())
+  );
+}

package/generic/select/lib/hlm-select-value.ts

@@ -0,0 +1,17 @@
+import { computed, Directive, input } from '@angular/core';
+import { hlm } from '@spartan-ng/brain/core';
+import type { ClassValue } from 'clsx';
+
+@Directive({
+  selector: 'hlm-select-value,[hlmSelectValue], brn-select-value[hlm]',
+
+  host: {
+    '[class]': '_computedClass()',
+  },
+})
+export class HlmSelectValue {
+  public readonly userClass = input<ClassValue>('', { alias: 'class' });
+  protected readonly _computedClass = computed(() =>
+    hlm('line-clamp-1 flex items-center gap-2 overflow-hidden text-ellipsis', this.userClass())
+  );
+}

package/generic/select/lib/hlm-select.ts

@@ -0,0 +1,15 @@
+import { computed, Directive, input } from '@angular/core';
+import { hlm } from '@spartan-ng/brain/core';
+import type { ClassValue } from 'clsx';
+
+@Directive({
+  selector: 'hlm-select, brn-select [hlm]',
+
+  host: {
+    '[class]': '_computedClass()',
+  },
+})
+export class HlmSelect {
+  public readonly userClass = input<ClassValue>('', { alias: 'class' });
+  protected readonly _computedClass = computed(() => hlm(this.userClass()));
+}

package/generic/select/lib/index.ts

@@ -0,0 +1,38 @@
+import { NgModule } from '@angular/core';
+import { HlmSelect } from './hlm-select';
+import { HlmSelectContent } from './hlm-select-content';
+import { HlmSelectGroup } from './hlm-select-group';
+import { HlmSelectLabel } from './hlm-select-label';
+import { HlmSelectOption } from './hlm-select-option';
+import { HlmSelectScrollDown } from './hlm-select-scroll-down';
+import { HlmSelectScrollUp } from './hlm-select-scroll-up';
+import { HlmSelectTrigger } from './hlm-select-trigger';
+import { HlmSelectValue } from './hlm-select-value';
+
+export * from './hlm-select';
+export * from './hlm-select-content';
+export * from './hlm-select-group';
+export * from './hlm-select-label';
+export * from './hlm-select-option';
+export * from './hlm-select-scroll-down';
+export * from './hlm-select-scroll-up';
+export * from './hlm-select-trigger';
+export * from './hlm-select-value';
+
+export const HlmSelectImports = [
+  HlmSelectContent,
+  HlmSelectTrigger,
+  HlmSelectOption,
+  HlmSelectValue,
+  HlmSelect,
+  HlmSelectScrollUp,
+  HlmSelectScrollDown,
+  HlmSelectLabel,
+  HlmSelectGroup,
+] as const;
+
+@NgModule({
+  imports: [...HlmSelectImports],
+  exports: [...HlmSelectImports],
+})
+export class HlmSelectModule {}

package/generic/select/ng-package.json

@@ -0,0 +1 @@
+{ "lib": { "entryFile": "public-api.ts" } }

package/generic/select/{public-api.d.ts → public-api.ts}

@@ -1,3 +1,3 @@
+export * from './lib';
 export * from './select.component';
 export * from './types';
-//# sourceMappingURL=public-api.d.ts.map

package/generic/select/select.component.css

@@ -0,0 +1,65 @@
+/* inline-block w-full */
+.select-root {
+  display: inline-block;
+  width: 100%;
+}
+
+/* shared between both triggers:
+   flex justify-between items-center rounded-full focus:outline-none focus:ring-2 focus:ring-accent
+   w-full overflow-hidden text-white text-xs text-center text-ellipsis whitespace-nowrap
+*/
+.select-trigger {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-radius: 25px !important; /* rounded-full */
+  outline: none; /* focus:outline-none */
+  width: 100%; /* w-full */
+  overflow: hidden; /* overflow-hidden */
+  color: #ffffff; /* text-white */
+  font-size: 0.75rem; /* text-xs */
+  text-align: center; /* text-center */
+  white-space: nowrap; /* whitespace-nowrap */
+  text-overflow: ellipsis; /* text-ellipsis */
+}
+
+/* focus:ring-2 focus:ring-accent */
+.select-trigger:focus,
+.select-trigger:focus-visible {
+  outline: none;
+  /* Replace --accent (or --ring-accent) with your theme token if different */
+  box-shadow: 0 0 0 2px var(--accent, var(--ring-accent, #0ea5e9));
+}
+
+/* FIRST trigger: lg:hidden + base flex */
+.select-trigger--sm {
+  display: flex; /* visible by default (mobile) */
+}
+
+/* SECOND trigger: hidden + lg:flex */
+.select-trigger--lg {
+  display: none; /* hidden on mobile */
+}
+
+/* lg breakpoint = 1024px (Tailwind's default) */
+@media (min-width: 1024px) {
+  /* lg:hidden */
+  .select-trigger--sm {
+    display: none;
+    /* the original also had lg:font-medium lg:text-sm, but it's hidden at lg */
+    font-weight: 500; /* lg:font-medium (has no effect since hidden) */
+    font-size: 0.875rem; /* lg:text-sm (has no effect since hidden) */
+  }
+
+  /* hidden lg:flex + lg:font-medium lg:text-sm */
+  .select-trigger--lg {
+    display: flex; /* lg:flex */
+    font-weight: 500; /* lg:font-medium */
+    font-size: 0.875rem; /* lg:text-sm */
+  }
+}
+
+/* content full-width toggle */
+.full-width {
+  width: 100%;
+}

package/generic/select/select.component.html

@@ -0,0 +1,19 @@
+<hlm-select
+  class="select-root"
+  [value]="defaultValue()?.value"
+  [placeholder]="placeholder()"
+  (valueChange)="valueChange.emit($event)">
+  <hlm-select-trigger class="select-trigger select-trigger--sm" size="sm" [ngClass]="variantClasses">
+    <hlm-select-value [ngClass]="variantClasses" />
+  </hlm-select-trigger>
+
+  <hlm-select-trigger class="select-trigger select-trigger--lg" size="default" [ngClass]="variantClasses">
+    <hlm-select-value [ngClass]="variantClasses" />
+  </hlm-select-trigger>
+
+  <hlm-select-content [class]="fullWidth() ? 'full-width' : ''" [ngClass]="variantClasses">
+    @for (option of options(); track idx + option.label; let idx = $index) {
+      <hlm-option [ngClass]="variantClasses" [value]="option.value">{{ option.label }}</hlm-option>
+    }
+  </hlm-select-content>
+</hlm-select>

package/generic/select/select.component.ts

@@ -0,0 +1,25 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+import { BrnSelectImports } from '@spartan-ng/brain/select';
+import { HlmSelectImports } from './lib';
+import { SelectOptions } from './types';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'sdc-select',
+  imports: [CommonModule, BrnSelectImports, HlmSelectImports],
+  templateUrl: './select.component.html',
+  styleUrls: ['./select.component.css'],
+})
+export class SelectComponent {
+  public placeholder = input('');
+  public variant = input('light');
+  public options = input.required<SelectOptions[]>();
+  public fullWidth = input(false);
+  public defaultValue = input<SelectOptions[][number]>();
+  public readonly valueChange = output<unknown>();
+
+  protected get variantClasses(): string {
+    return this.variant() === 'dark' ? 'bg-black text-white' : 'bg-white text-black';
+  }
+}

package/generic/select/types.ts

@@ -0,0 +1,4 @@
+export interface SelectOptions {
+  label: string;
+  value: unknown;
+}

package/ng-package.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "./dist",
+  "deleteDestPath": true,
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "assets": ["./tailwind.config.js", "./styles.css"],
+  "allowedNonPeerDependencies": ["rxjs-interop"]
+}

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@3ddv/software-division-components",
-  "version": "1.5.0",
+  "version": "2.0.0",
   "main": "./fesm2022/3ddv-software-division-components.mjs",
-  "module": "fesm2022/3ddv-software-division-components.mjs",
-  "typings": "index.d.ts",
+  "module": "./fesm2022/3ddv-software-division-components.mjs",
+  "typings": "./index.d.ts",
   "type": "module",
-  "gitHead": "eaa323a083384b245cfe533a0fa03ae0dce068c2",
+  "gitHead": "3d9e318e75549aafd068536d31065b84db102c6a",
   "exports": {
     ".": {
       "types": "./index.d.ts",
@@ -13,23 +13,23 @@
     },
     "./styles.css": {
       "style": "./styles.css",
-      "import": "./styles.css",
-      "require": "./styles.css",
       "browser": "./styles.css",
-      "default": "./styles.css",
+      "sass": "./styles.css",
       "less": "./styles.css",
       "production": "./styles.css",
-      "sass": "./styles.css"
+      "import": "./styles.css",
+      "require": "./styles.css",
+      "default": "./styles.css"
     },
     "./styles": {
       "style": "./styles.css",
-      "import": "./styles.css",
-      "require": "./styles.css",
       "browser": "./styles.css",
-      "default": "./styles.css",
+      "sass": "./styles.css",
       "less": "./styles.css",
       "production": "./styles.css",
-      "sass": "./styles.css"
+      "import": "./styles.css",
+      "require": "./styles.css",
+      "default": "./styles.css"
     },
     "./*": {
       "import": "./fesm2022/*.js",
@@ -39,120 +39,101 @@
       "import": "./fesm2022/**/*.mjs",
       "require": "./fesm2022/**/*.cjs"
     },
-    "./dvm": {
-      "types": "./dvm/index.d.ts",
-      "default": "./fesm2022/dvm/index.mjs"
-    },
-    "./backoffice": {
-      "types": "./backoffice/index.d.ts",
-      "default": "./fesm2022/backoffice/index.mjs"
-    },
-    "./generic": {
-      "types": "./generic/index.d.ts",
-      "default": "./fesm2022/generic/index.mjs"
-    },
     "./utils": {
-      "types": "./utils/index.d.ts",
-      "default": "./fesm2022/utils/index.mjs"
+      "types": "./types/3ddv-software-division-components-utils.d.ts",
+      "default": "./fesm2022/3ddv-software-division-components-utils.mjs"
     },
     "./utils/validate-styles-for-component": {
       "types": "./utils/validate-styles-for-component.d.ts",
       "default": "./fesm2022/utils/validate-styles-for-component.mjs"
     },
     "./shared": {
-      "types": "./shared/index.d.ts",
-      "default": "./fesm2022/shared/index.mjs"
+      "types": "./types/3ddv-software-division-components-shared.d.ts",
+      "default": "./fesm2022/3ddv-software-division-components-shared.mjs"
     },
     "./backoffice/checkbox": {
-      "types": "./backoffice/checkbox/index.d.ts",
-      "default": "./fesm2022/backoffice/checkbox/index.mjs"
+      "types": "./types/3ddv-software-division-components-backoffice-checkbox.d.ts",
+      "default": "./fesm2022/3ddv-software-division-components-backoffice-checkbox.mjs"
     },
     "./backoffice/datepicker": {
-      "types": "./backoffice/datepicker/index.d.ts",
-      "default": "./fesm2022/backoffice/datepicker/index.mjs"
+      "types": "./types/3ddv-software-division-components-backoffice-datepicker.d.ts",
+      "default": "./fesm2022/3ddv-software-division-components-backoffice-datepicker.mjs"
     },
     "./backoffice/input": {
-      "types": "./backoffice/input/index.d.ts",
-      "default": "./fesm2022/backoffice/input/index.mjs"
+      "types": "./types/3ddv-software-division-components-backoffice-input.d.ts",
+      "default": "./fesm2022/3ddv-software-division-components-backoffice-input.mjs"
     },
     "./backoffice/radio": {
-      "types": "./backoffice/radio/index.d.ts",
-      "default": "./fesm2022/backoffice/radio/index.mjs"
+      "types": "./types/3ddv-software-division-components-backoffice-radio.d.ts",
+      "default": "./fesm2022/3ddv-software-division-components-backoffice-radio.mjs"
     },
     "./generic/select": {
-      "types": "./generic/select/index.d.ts",
-      "default": "./esm2022/generic/select/index.mjs"
+      "types": "./types/3ddv-software-division-components-generic-select.d.ts",
+      "default": "./fesm2022/3ddv-software-division-components-generic-select.mjs"
     },
     "./backoffice/table": {
-      "types": "./backoffice/table/index.d.ts",
-      "default": "./fesm2022/backoffice/table/index.mjs"
+      "types": "./types/3ddv-software-division-components-backoffice-table.d.ts",
+      "default": "./fesm2022/3ddv-software-division-components-backoffice-table.mjs"
     },
     "./dvm/cart-item": {
-      "types": "./dvm/cart-item/index.d.ts",
-      "default": "./fesm2022/dvm/cart-item/index.mjs"
+      "types": "./types/3ddv-software-division-components-dvm-cart-item.d.ts",
+      "default": "./fesm2022/3ddv-software-division-components-dvm-cart-item.mjs"
     },
     "./dvm/cart": {
-      "types": "./dvm/cart/index.d.ts",
-      "default": "./fesm2022/dvm/cart/index.mjs"
+      "types": "./types/3ddv-software-division-components-dvm-cart.d.ts",
+      "default": "./fesm2022/3ddv-software-division-components-dvm-cart.mjs"
     },
     "./dvm/legend": {
-      "types": "./dvm/legend/index.d.ts",
-      "default": "./fesm2022/dvm/legend/index.mjs"
+      "types": "./types/3ddv-software-division-components-dvm-legend.d.ts",
+      "default": "./fesm2022/3ddv-software-division-components-dvm-legend.mjs"
     },
     "./dvm/loader": {
-      "types": "./dvm/loader/index.d.ts",
-      "default": "./fesm2022/dvm/loader/index.mjs"
+      "types": "./types/3ddv-software-division-components-dvm-loader.d.ts",
+      "default": "./fesm2022/3ddv-software-division-components-dvm-loader.mjs"
     },
     "./dvm/neighbors": {
-      "types": "./dvm/neighbors/index.d.ts",
-      "default": "./fesm2022/dvm/neighbors/index.mjs"
+      "types": "./types/3ddv-software-division-components-dvm-neighbors.d.ts",
+      "default": "./fesm2022/3ddv-software-division-components-dvm-neighbors.mjs"
     },
     "./dvm/popover": {
-      "types": "./dvm/popover/index.d.ts",
-      "default": "./fesm2022/dvm/popover/index.mjs"
+      "types": "./types/3ddv-software-division-components-dvm-popover.d.ts",
+      "default": "./fesm2022/3ddv-software-division-components-dvm-popover.mjs"
     },
     "./dvm/stepper": {
-      "types": "./dvm/stepper/index.d.ts",
-      "default": "./fesm2022/dvm/stepper/index.mjs"
+      "types": "./types/3ddv-software-division-components-dvm-stepper.d.ts",
+      "default": "./fesm2022/3ddv-software-division-components-dvm-stepper.mjs"
     },
     "./dvm/map-loader": {
-      "types": "./dvm/map-loader/index.d.ts",
-      "default": "./fesm2022/dvm/map-loader/index.mjs"
+      "types": "./types/3ddv-software-division-components-dvm-map-loader.d.ts",
+      "default": "./fesm2022/3ddv-software-division-components-dvm-map-loader.mjs"
     },
     "./dvm/ticket-info-item": {
-      "types": "./dvm/ticket-info-item/index.d.ts",
-      "default": "./fesm2022/dvm/ticket-info-item/index.mjs"
+      "types": "./types/3ddv-software-division-components-dvm-ticket-info-item.d.ts",
+      "default": "./fesm2022/3ddv-software-division-components-dvm-ticket-info-item.mjs"
     },
     "./generic/add-digital-wallet": {
-      "types": "./generic/add-digital-wallet/index.d.ts",
-      "default": "./fesm2022/generic/add-digital-wallet/index.mjs"
+      "types": "./types/3ddv-software-division-components-generic-add-digital-wallet.d.ts",
+      "default": "./fesm2022/3ddv-software-division-components-generic-add-digital-wallet.mjs"
     },
     "./generic/braintree": {
-      "types": "./generic/braintree/index.d.ts",
-      "default": "./fesm2022/generic/braintree/index.mjs"
+      "types": "./types/3ddv-software-division-components-generic-braintree.d.ts",
+      "default": "./fesm2022/3ddv-software-division-components-generic-braintree.mjs"
     },
     "./generic/button": {
-      "types": "./generic/button/index.d.ts",
-      "default": "./fesm2022/generic/button/index.mjs"
+      "types": "./types/3ddv-software-division-components-generic-button.d.ts",
+      "default": "./fesm2022/3ddv-software-division-components-generic-button.mjs"
     },
     "./generic/dialog": {
-      "types": "./generic/dialog/index.d.ts",
-      "default": "./fesm2022/generic/dialog/index.mjs"
+      "types": "./types/3ddv-software-division-components-generic-dialog.d.ts",
+      "default": "./fesm2022/3ddv-software-division-components-generic-dialog.mjs"
     },
     "./generic/drawer": {
-      "types": "./generic/drawer/index.d.ts",
-      "default": "./fesm2022/generic/drawer/index.mjs"
+      "types": "./types/3ddv-software-division-components-generic-drawer.d.ts",
+      "default": "./fesm2022/3ddv-software-division-components-generic-drawer.mjs"
     },
     "./generic/icon": {
-      "types": "./generic/icon/index.d.ts",
-      "default": "./fesm2022/generic/icon/index.mjs"
-    },
-    "./generic/rich-text-editor": {
-      "types": "./generic/rich-text-editor/index.d.ts",
-      "default": "./fesm2022/generic/rich-text-editor/index.mjs"
-    },
-    "./package.json": {
-      "default": "./package.json"
+      "types": "./types/3ddv-software-division-components-generic-icon.d.ts",
+      "default": "./fesm2022/3ddv-software-division-components-generic-icon.mjs"
     }
   },
   "repository": {
@@ -166,20 +147,24 @@
   "peerDependencies": {
     "@3ddv/dvm-internal": "^2.7.4",
     "@3ddv/ngx-dvm-internal": "^4.2.4",
-    "@angular/animations": "^19.2.0",
-    "@angular/cdk": "^19.2.0",
-    "@angular/common": "^19.2.0",
-    "@angular/compiler": "^19.2.0",
-    "@angular/core": "^19.2.0",
-    "@angular/forms": "^19.2.0",
-    "@angular/platform-browser": "^19.2.0",
-    "@angular/platform-browser-dynamic": "^19.2.0",
-    "@angular/router": "^19.2.0",
-    "@tiptap/core": "^3.1.0",
-    "@tiptap/extension-link": "^3.1.0",
-    "@tiptap/extension-placeholder": "^3.1.0",
-    "@tiptap/extension-underline": "^3.1.0",
-    "@tiptap/starter-kit": "^3.1.0",
+    "@angular/animations": "^21.0.0",
+    "@angular/cdk": "^21.0.0",
+    "@angular/common": "^21.0.0",
+    "@angular/compiler": "^21.0.0",
+    "@angular/core": "^21.0.0",
+    "@angular/forms": "^21.0.0",
+    "@angular/platform-browser": "^21.0.0",
+    "@angular/platform-browser-dynamic": "^21.0.0",
+    "@angular/router": "^21.0.0",
+    "@floating-ui/dom": "^1.6.13",
+    "@ng-icons/core": "^31.4.0",
+    "@ng-icons/lucide": "^31.4.0",
+    "@popperjs/core": "^2.11.8",
+    "@spartan-ng/brain": "0.0.1-alpha.499",
+    "@tanstack/angular-table": "^8.21.3",
+    "animejs": "^4.0.2",
+    "class-variance-authority": "^0.7.0",
+    "embla-carousel-angular": ">=19.0.0",
     "rxjs": "^7.8.0",
     "zone.js": "~0.15.0"
   },
@@ -187,25 +172,54 @@
     "rxjs": {
       "optional": false
     },
-    "@tiptap/core": {
-      "optional": true
-    },
-    "@tiptap/extension-link": {
+    "animejs": {
       "optional": true
     },
-    "@tiptap/extension-placeholder": {
+    "@popperjs/core": {
       "optional": true
     },
-    "@tiptap/extension-underline": {
+    "@tanstack/angular-table": {
       "optional": true
     },
-    "@tiptap/starter-kit": {
+    "embla-carousel-angular": {
       "optional": true
     }
   },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.2",
+    "@compodoc/compodoc": "^1.1.26",
+    "@spartan-ng/cli": "^0.0.1-alpha.499",
+    "@storybook/addon-a11y": "^8.4.6",
+    "@storybook/addon-designs": "^8.0.4",
+    "@storybook/addon-docs": "^8.4.6",
+    "@storybook/addon-essentials": "^8.4.5",
+    "@storybook/addon-interactions": "^8.4.5",
+    "@storybook/addon-links": "^8.4.6",
+    "@storybook/addon-onboarding": "^8.4.5",
+    "@storybook/addon-storysource": "^8.4.6",
+    "@storybook/addon-themes": "^8.4.7",
+    "@storybook/angular": "^8.4.5",
+    "@storybook/blocks": "^8.4.5",
+    "@storybook/builder-vite": "^8.4.6",
+    "@storybook/test": "^8.4.5",
+    "@tailwindcss/postcss": "^4.1.11",
+    "@takuma-ru/auto-story-generator": "^0.3.3",
+    "auto-angular-story-generator": "^0.1.11",
+    "chromatic": "^11.20.0",
+    "postcss": "^8.5.6",
+    "storybook-addon-jsdoc-to-mdx": "^1.0.4",
+    "tailwind-merge": "^2.5.4",
+    "tailwindcss": "^4.1.12",
+    "tailwindcss-animate": "^1.0.6",
+    "tslib": "^2.3.0"
+  },
   "sideEffects": false,
   "dependencies": {
-    "rxjs-interop": "link:@angular/core/rxjs-interop",
-    "tslib": "^2.3.0"
+    "rxjs-interop": "link:@angular/core/rxjs-interop"
+  },
+  "scripts": {
+    "storybook": "echo \"cwd: $(pwd)\" && ng run software-division-components:storybook",
+    "build-storybook": "ng run software-division-components:build-storybook",
+    "chromatic": "npx chromatic --project-token=chpt_9e3636db2de59d1"
   }
 }

package/shared/apply-theme-variables/apply-theme-variables.ts

@@ -0,0 +1,35 @@
+import { ApplicationRef } from '@angular/core';
+import { filter, first } from 'rxjs';
+
+/** * Declares CSS variables globally based on the 'theme' and 'dvmStyles' property of the configuration. */
+export function applyGlobalCssVariables(appRef: ApplicationRef, theme: Record<string, string>): void {
+  // First application of the theme
+  applyGlobalCssVariablesToNodes(theme);
+
+  appRef.isStable
+    .pipe(
+      filter(stable => stable),
+      first()
+    )
+    // Second application of the theme when the application is stable
+    .subscribe(() => applyGlobalCssVariablesToNodes(theme));
+}
+
+function applyGlobalCssVariablesToNodes(theme: Record<string, string>) {
+  // Grab elements from the DOM
+  const documentElement = document.documentElement;
+  const root: HTMLElement | null = document.querySelector(':root');
+
+  if (root) {
+    // Get theme in a new object
+    const mergedStyles = Object.assign({}, theme);
+
+    for (const [key, value] of Object.entries(mergedStyles)) {
+      // For each of the styles, declare a new CSS variable on root element
+      if (typeof value === 'string') {
+        root.style.setProperty('--' + key, value);
+        documentElement.style.setProperty('--' + key, value);
+      }
+    }
+  }
+}

package/shared/apply-theme-variables/{index.d.ts → index.ts}

@@ -1,2 +1 @@
 export * from './apply-theme-variables';
-//# sourceMappingURL=index.d.ts.map