@ks-digital/designsystem-angular 0.0.1-alpha.34 → 0.0.1-alpha.37

package/fesm2022/ks-digital-designsystem-angular-__internals.mjs

@@ -3,30 +3,94 @@ import { input, Directive, isDevMode } from '@angular/core';
 
 /* eslint-disable @angular-eslint/no-input-rename */
 /**
- * We use input aliasing to bridge the gap between Angular's camelCase property naming convention and our HTML data attributes.
- * This approach allows us to use valid HTML data attributes as documented by Designsystemet while maintaining
- * proper TypeScript intellisense support.
- *
- * Todo: Some components are using only a subset of colors, e.g., SeverityColors for Alert. We should reconsider this directive
+ * @deprecated Use individual directives instead
  */
 class CommonInputs {
     /**
      * Changes size for descendant Designsystemet components. Select from predefined sizes.
      * @attribute data-size
      */
-    dataSize = input(undefined, ...(ngDevMode ? [{ debugName: "dataSize", alias: 'data-size' }] : [{ alias: 'data-size' }]));
+    dataSize = input(undefined, { ...(ngDevMode ? { debugName: "dataSize" } : {}), alias: 'data-size' });
     /**
      * Changes color for descendant Designsystemet components.
-     * Select from predefined colors and colors defined using theme.designsystemet.no.
+     * Select from predefined colors and colors defined in theme.
      * @attribute data-color
      */
-    dataColor = input(undefined, ...(ngDevMode ? [{ debugName: "dataColor", alias: 'data-color' }] : [{ alias: 'data-color' }]));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CommonInputs, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: CommonInputs, isStandalone: true, inputs: { dataSize: { classPropertyName: "dataSize", publicName: "data-size", isSignal: true, isRequired: false, transformFunction: null }, dataColor: { classPropertyName: "dataColor", publicName: "data-color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    dataColor = input(undefined, { ...(ngDevMode ? { debugName: "dataColor" } : {}), alias: 'data-color' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CommonInputs, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: CommonInputs, isStandalone: true, inputs: { dataSize: { classPropertyName: "dataSize", publicName: "data-size", isSignal: true, isRequired: false, transformFunction: null }, dataColor: { classPropertyName: "dataColor", publicName: "data-color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-size": "dataSize() || null", "attr.data-color": "dataColor() || null" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CommonInputs, decorators: [{
-            type: Directive
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CommonInputs, decorators: [{
+            type: Directive,
+            args: [{
+                    host: {
+                        '[attr.data-size]': 'dataSize() || null',
+                        '[attr.data-color]': 'dataColor() || null',
+                    },
+                }]
         }], propDecorators: { dataSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "data-size", required: false }] }], dataColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "data-color", required: false }] }] } });
+/**
+ * Applies data-size attribute to host-element.
+ */
+class HostSize {
+    /**
+     * Changes size for descendant Designsystemet components. Select from predefined sizes.
+     * @attribute data-size
+     */
+    dataSize = input(undefined, { ...(ngDevMode ? { debugName: "dataSize" } : {}), alias: 'data-size' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: HostSize, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: HostSize, isStandalone: true, inputs: { dataSize: { classPropertyName: "dataSize", publicName: "data-size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-size": "dataSize() || null" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: HostSize, decorators: [{
+            type: Directive,
+            args: [{
+                    host: {
+                        '[attr.data-size]': 'dataSize() || null',
+                    },
+                }]
+        }], propDecorators: { dataSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "data-size", required: false }] }] } });
+/**
+ * Applies data-color attribute to host-element for all colors, including severity colors.
+ */
+class HostColor {
+    /**
+     * Changes color for descendant Designsystemet components.
+     * Select from predefined colors and colors defined in theme.
+     * @attribute data-color
+     */
+    dataColor = input(undefined, { ...(ngDevMode ? { debugName: "dataColor" } : {}), alias: 'data-color' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: HostColor, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: HostColor, isStandalone: true, inputs: { dataColor: { classPropertyName: "dataColor", publicName: "data-color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-color": "dataColor() || null" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: HostColor, decorators: [{
+            type: Directive,
+            args: [{
+                    host: {
+                        '[attr.data-color]': 'dataColor() || null',
+                    },
+                }]
+        }], propDecorators: { dataColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "data-color", required: false }] }] } });
+/**
+ * Applies data-color attribute to host-element for severity colors.
+ */
+class HostSeverityColors {
+    /**
+     * Changes color for descendant Designsystemet components.
+     * Select from predefined colors and colors defined in theme.
+     * @attribute data-color
+     */
+    dataColor = input(undefined, { ...(ngDevMode ? { debugName: "dataColor" } : {}), alias: 'data-color' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: HostSeverityColors, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: HostSeverityColors, isStandalone: true, inputs: { dataColor: { classPropertyName: "dataColor", publicName: "data-color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-color": "dataColor() || null" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: HostSeverityColors, decorators: [{
+            type: Directive,
+            args: [{
+                    host: {
+                        '[attr.data-color]': 'dataColor() || null',
+                    },
+                }]
+        }], propDecorators: { dataColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "data-color", required: false }] }] } });
 
 const logIfDevMode = ({ component, message, }) => {
     if (isDevMode()) {
@@ -42,5 +106,5 @@ const randomId = () => {
  * Generated bundle index. Do not edit.
  */
 
-export { CommonInputs, logIfDevMode, randomId };
+export { CommonInputs, HostColor, HostSeverityColors, HostSize, logIfDevMode, randomId };
 //# sourceMappingURL=ks-digital-designsystem-angular-__internals.mjs.map

package/fesm2022/ks-digital-designsystem-angular-__internals.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ks-digital-designsystem-angular-__internals.mjs","sources":["../../../../packages/angular/__internals/src/common-inputs.ts","../../../../packages/angular/__internals/src/log-if-devmode.ts","../../../../packages/angular/__internals/src/random-id.ts","../../../../packages/angular/__internals/src/ks-digital-designsystem-angular-__internals.ts"],"sourcesContent":["/* eslint-disable @angular-eslint/no-input-rename */\n\n/**\n * We use input aliasing to bridge the gap between Angular's camelCase property naming convention and our HTML data attributes.\n * This approach allows us to use valid HTML data attributes as documented by Designsystemet while maintaining\n * proper TypeScript intellisense support.\n *\n * Todo: Some components are using only a subset of colors, e.g., SeverityColors for Alert. We should reconsider this directive\n */\n\nimport { Directive, input } from '@angular/core'\nimport type { Color, Size } from '@digdir/designsystemet/types'\nexport type { Color, SeverityColors, Size } from '@digdir/designsystemet/types'\n\n@Directive()\nexport class CommonInputs {\n  /**\n   * Changes size for descendant Designsystemet components. Select from predefined sizes.\n   * @attribute data-size\n   */\n  dataSize = input<Size>(undefined, { alias: 'data-size' })\n\n  /**\n   * Changes color for descendant Designsystemet components.\n   * Select from predefined colors and colors defined using theme.designsystemet.no.\n   * @attribute data-color\n   */\n  dataColor = input<Color>(undefined, { alias: 'data-color' })\n}\n","import { isDevMode } from '@angular/core'\n\nexport const logIfDevMode = ({\n  component,\n  message,\n}: {\n  component: string\n  message: string\n}) => {\n  if (isDevMode()) {\n    console.log(`[${component}] ${message}`)\n  }\n}\n","export const randomId = () => {\n  return `${Math.random().toString(36).slice(2, 7)}`\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAAA;AAEA;;;;;;AAMG;MAOU,YAAY,CAAA;AACvB;;;AAGG;AACH,IAAA,QAAQ,GAAG,KAAK,CAAO,SAAS,4CAAI,KAAK,EAAE,WAAW,EAAA,CAAA,GAAA,CAApB,EAAE,KAAK,EAAE,WAAW,EAAE,GAAC;AAEzD;;;;AAIG;AACH,IAAA,SAAS,GAAG,KAAK,CAAQ,SAAS,6CAAI,KAAK,EAAE,YAAY,EAAA,CAAA,GAAA,CAArB,EAAE,KAAK,EAAE,YAAY,EAAE,GAAC;uGAZjD,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAZ,YAAY,EAAA,YAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAZ,YAAY,EAAA,UAAA,EAAA,CAAA;kBADxB;;;ACZM,MAAM,YAAY,GAAG,CAAC,EAC3B,SAAS,EACT,OAAO,GAIR,KAAI;IACH,IAAI,SAAS,EAAE,EAAE;QACf,OAAO,CAAC,GAAG,CAAC,CAAA,CAAA,EAAI,SAAS,CAAA,EAAA,EAAK,OAAO,CAAA,CAAE,CAAC;IAC1C;AACF;;ACZO,MAAM,QAAQ,GAAG,MAAK;AAC3B,IAAA,OAAO,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE;AACpD;;ACFA;;AAEG;;;;"}
+{"version":3,"file":"ks-digital-designsystem-angular-__internals.mjs","sources":["../../../../packages/angular/__internals/src/host-directives.ts","../../../../packages/angular/__internals/src/log-if-devmode.ts","../../../../packages/angular/__internals/src/random-id.ts","../../../../packages/angular/__internals/src/ks-digital-designsystem-angular-__internals.ts"],"sourcesContent":["/* eslint-disable @angular-eslint/no-input-rename */\n\nimport { Directive, input } from '@angular/core'\nimport {\n  ColorDefinitions,\n  SeverityColorDefinitions,\n  SizeDefinition,\n} from '@ks-digital/designsystem-themes/types'\n\n/**\n * @deprecated Use individual directives instead\n */\n@Directive({\n  host: {\n    '[attr.data-size]': 'dataSize() || null',\n    '[attr.data-color]': 'dataColor() || null',\n  },\n})\nexport class CommonInputs {\n  /**\n   * Changes size for descendant Designsystemet components. Select from predefined sizes.\n   * @attribute data-size\n   */\n  readonly dataSize = input<keyof SizeDefinition>(undefined, {\n    alias: 'data-size',\n  })\n\n  /**\n   * Changes color for descendant Designsystemet components.\n   * Select from predefined colors and colors defined in theme.\n   * @attribute data-color\n   */\n  readonly dataColor = input<keyof ColorDefinitions>(undefined, {\n    alias: 'data-color',\n  })\n}\n\n/**\n * Applies data-size attribute to host-element.\n */\n@Directive({\n  host: {\n    '[attr.data-size]': 'dataSize() || null',\n  },\n})\nexport class HostSize {\n  /**\n   * Changes size for descendant Designsystemet components. Select from predefined sizes.\n   * @attribute data-size\n   */\n  readonly dataSize = input<keyof SizeDefinition>(undefined, {\n    alias: 'data-size',\n  })\n}\n\n/**\n * Applies data-color attribute to host-element for all colors, including severity colors.\n */\n@Directive({\n  host: {\n    '[attr.data-color]': 'dataColor() || null',\n  },\n})\nexport class HostColor {\n  /**\n   * Changes color for descendant Designsystemet components.\n   * Select from predefined colors and colors defined in theme.\n   * @attribute data-color\n   */\n  readonly dataColor = input<\n    keyof ColorDefinitions | keyof SeverityColorDefinitions\n  >(undefined, { alias: 'data-color' })\n}\n\n/**\n * Applies data-color attribute to host-element for severity colors.\n */\n@Directive({\n  host: {\n    '[attr.data-color]': 'dataColor() || null',\n  },\n})\nexport class HostSeverityColors {\n  /**\n   * Changes color for descendant Designsystemet components.\n   * Select from predefined colors and colors defined in theme.\n   * @attribute data-color\n   */\n  readonly dataColor = input<keyof SeverityColorDefinitions>(undefined, {\n    alias: 'data-color',\n  })\n}\n","import { isDevMode } from '@angular/core'\n\nexport const logIfDevMode = ({\n  component,\n  message,\n}: {\n  component: string\n  message: string\n}) => {\n  if (isDevMode()) {\n    console.log(`[${component}] ${message}`)\n  }\n}\n","export const randomId = () => {\n  return `${Math.random().toString(36).slice(2, 7)}`\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ks-digital-designsystem-angular-alert.mjs

@@ -1,31 +1,30 @@
 import * as i0 from '@angular/core';
-import { input, Component } from '@angular/core';
+import { Component } from '@angular/core';
 import * as i1 from '@ks-digital/designsystem-angular/__internals';
-import { CommonInputs } from '@ks-digital/designsystem-angular/__internals';
+import { HostSize, HostSeverityColors } from '@ks-digital/designsystem-angular/__internals';
 
 /**
  * Alerts are used to inform users about important information, warnings, errors, or success.
  */
 class Alert {
-    /**
-     * The color variant of the alert.
-     */
-    /* eslint-disable-next-line @angular-eslint/no-input-rename */
-    dataColor = input(undefined, ...(ngDevMode ? [{ debugName: "dataColor", alias: 'data-color' }] : [{ alias: 'data-color' }]));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Alert, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: Alert, isStandalone: true, selector: "ksd-alert", inputs: { dataColor: { classPropertyName: "dataColor", publicName: "data-color", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ds-alert" }, hostDirectives: [{ directive: i1.CommonInputs, inputs: ["data-size", "data-size"] }], ngImport: i0, template: ` <ng-content />`, isInline: true, styles: [":host{display:block;--dsc-alert-icon-url: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128A104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z'/%3E%3C/svg%3E\")}:host[data-color=warning]{--dsc-alert-icon-url: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M120,136V80a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0ZM232,91.55v72.9a15.86,15.86,0,0,1-4.69,11.31l-51.55,51.55A15.86,15.86,0,0,1,164.45,232H91.55a15.86,15.86,0,0,1-11.31-4.69L28.69,175.76A15.86,15.86,0,0,1,24,164.45V91.55a15.86,15.86,0,0,1,4.69-11.31L80.24,28.69A15.86,15.86,0,0,1,91.55,24h72.9a15.86,15.86,0,0,1,11.31,4.69l51.55,51.55A15.86,15.86,0,0,1,232,91.55Zm-16,0L164.45,40H91.55L40,91.55v72.9L91.55,216h72.9L216,164.45ZM128,160a12,12,0,1,0,12,12A12,12,0,0,0,128,160Z'/%3E%3C/svg%3E\")}:host[data-color=success]{--dsc-alert-icon-url: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z'%3E%3C/path%3E%3C/svg%3E\")}:host[data-color=danger]{--dsc-alert-icon-url: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M165.66,101.66,139.31,128l26.35,26.34a8,8,0,0,1-11.32,11.32L128,139.31l-26.34,26.35a8,8,0,0,1-11.32-11.32L116.69,128,90.34,101.66a8,8,0,0,1,11.32-11.32L128,116.69l26.34-26.35a8,8,0,0,1,11.32,11.32ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z'%3E%3C/path%3E%3C/svg%3E\")}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Alert, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: Alert, isStandalone: true, selector: "ksd-alert", host: { classAttribute: "ds-alert" }, hostDirectives: [{ directive: i1.HostSize, inputs: ["data-size", "data-size"] }, { directive: i1.HostSeverityColors, inputs: ["data-color", "data-color"] }], ngImport: i0, template: ` <ng-content />`, isInline: true, styles: [":host{display:block;--dsc-alert-icon-url: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128A104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z'/%3E%3C/svg%3E\")}:host[data-color=warning]{--dsc-alert-icon-url: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M120,136V80a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0ZM232,91.55v72.9a15.86,15.86,0,0,1-4.69,11.31l-51.55,51.55A15.86,15.86,0,0,1,164.45,232H91.55a15.86,15.86,0,0,1-11.31-4.69L28.69,175.76A15.86,15.86,0,0,1,24,164.45V91.55a15.86,15.86,0,0,1,4.69-11.31L80.24,28.69A15.86,15.86,0,0,1,91.55,24h72.9a15.86,15.86,0,0,1,11.31,4.69l51.55,51.55A15.86,15.86,0,0,1,232,91.55Zm-16,0L164.45,40H91.55L40,91.55v72.9L91.55,216h72.9L216,164.45ZM128,160a12,12,0,1,0,12,12A12,12,0,0,0,128,160Z'/%3E%3C/svg%3E\")}:host[data-color=success]{--dsc-alert-icon-url: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z'%3E%3C/path%3E%3C/svg%3E\")}:host[data-color=danger]{--dsc-alert-icon-url: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M165.66,101.66,139.31,128l26.35,26.34a8,8,0,0,1-11.32,11.32L128,139.31l-26.34,26.35a8,8,0,0,1-11.32-11.32L116.69,128,90.34,101.66a8,8,0,0,1,11.32-11.32L128,116.69l26.34-26.35a8,8,0,0,1,11.32,11.32ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z'%3E%3C/path%3E%3C/svg%3E\")}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Alert, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Alert, decorators: [{
             type: Component,
             args: [{ selector: 'ksd-alert', template: ` <ng-content />`, host: {
                         class: 'ds-alert',
                     }, hostDirectives: [
                         {
-                            directive: CommonInputs,
+                            directive: HostSize,
                             inputs: ['data-size'],
                         },
+                        {
+                            directive: HostSeverityColors,
+                            inputs: ['data-color'],
+                        },
                     ], styles: [":host{display:block;--dsc-alert-icon-url: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128A104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z'/%3E%3C/svg%3E\")}:host[data-color=warning]{--dsc-alert-icon-url: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M120,136V80a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0ZM232,91.55v72.9a15.86,15.86,0,0,1-4.69,11.31l-51.55,51.55A15.86,15.86,0,0,1,164.45,232H91.55a15.86,15.86,0,0,1-11.31-4.69L28.69,175.76A15.86,15.86,0,0,1,24,164.45V91.55a15.86,15.86,0,0,1,4.69-11.31L80.24,28.69A15.86,15.86,0,0,1,91.55,24h72.9a15.86,15.86,0,0,1,11.31,4.69l51.55,51.55A15.86,15.86,0,0,1,232,91.55Zm-16,0L164.45,40H91.55L40,91.55v72.9L91.55,216h72.9L216,164.45ZM128,160a12,12,0,1,0,12,12A12,12,0,0,0,128,160Z'/%3E%3C/svg%3E\")}:host[data-color=success]{--dsc-alert-icon-url: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z'%3E%3C/path%3E%3C/svg%3E\")}:host[data-color=danger]{--dsc-alert-icon-url: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M165.66,101.66,139.31,128l26.35,26.34a8,8,0,0,1-11.32,11.32L128,139.31l-26.34,26.35a8,8,0,0,1-11.32-11.32L116.69,128,90.34,101.66a8,8,0,0,1,11.32-11.32L128,116.69l26.34-26.35a8,8,0,0,1,11.32,11.32ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z'%3E%3C/path%3E%3C/svg%3E\")}\n"] }]
-        }], propDecorators: { dataColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "data-color", required: false }] }] } });
+        }] });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/ks-digital-designsystem-angular-alert.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ks-digital-designsystem-angular-alert.mjs","sources":["../../../../packages/angular/alert/src/alert.ts","../../../../packages/angular/alert/src/ks-digital-designsystem-angular-alert.ts"],"sourcesContent":["import { Component, input } from '@angular/core'\nimport {\n  CommonInputs,\n  SeverityColors,\n} from '@ks-digital/designsystem-angular/__internals'\n\n/**\n * Alerts are used to inform users about important information, warnings, errors, or success.\n */\n@Component({\n  selector: 'ksd-alert',\n  template: ` <ng-content />`,\n  host: {\n    class: 'ds-alert',\n  },\n  /**\n   * Use Phosphor Icons\n   */\n  styles: `\n    :host {\n      display: block;\n      --dsc-alert-icon-url: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128A104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z'/%3E%3C/svg%3E\");\n    }\n    :host[data-color='warning'] {\n      --dsc-alert-icon-url: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M120,136V80a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0ZM232,91.55v72.9a15.86,15.86,0,0,1-4.69,11.31l-51.55,51.55A15.86,15.86,0,0,1,164.45,232H91.55a15.86,15.86,0,0,1-11.31-4.69L28.69,175.76A15.86,15.86,0,0,1,24,164.45V91.55a15.86,15.86,0,0,1,4.69-11.31L80.24,28.69A15.86,15.86,0,0,1,91.55,24h72.9a15.86,15.86,0,0,1,11.31,4.69l51.55,51.55A15.86,15.86,0,0,1,232,91.55Zm-16,0L164.45,40H91.55L40,91.55v72.9L91.55,216h72.9L216,164.45ZM128,160a12,12,0,1,0,12,12A12,12,0,0,0,128,160Z'/%3E%3C/svg%3E\");\n    }\n\n    :host[data-color='success'] {\n      --dsc-alert-icon-url: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z'%3E%3C/path%3E%3C/svg%3E\");\n    }\n\n    :host[data-color='danger'] {\n      --dsc-alert-icon-url: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M165.66,101.66,139.31,128l26.35,26.34a8,8,0,0,1-11.32,11.32L128,139.31l-26.34,26.35a8,8,0,0,1-11.32-11.32L116.69,128,90.34,101.66a8,8,0,0,1,11.32-11.32L128,116.69l26.34-26.35a8,8,0,0,1,11.32,11.32ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z'%3E%3C/path%3E%3C/svg%3E\");\n    }\n  `,\n  hostDirectives: [\n    {\n      directive: CommonInputs,\n      inputs: ['data-size'],\n    },\n  ],\n})\nexport class Alert {\n  /**\n   * The color variant of the alert.\n   */\n  /* eslint-disable-next-line @angular-eslint/no-input-rename */\n  dataColor = input<SeverityColors>(undefined, { alias: 'data-color' })\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAMA;;AAEG;MAkCU,KAAK,CAAA;AAChB;;AAEG;;AAEH,IAAA,SAAS,GAAG,KAAK,CAAiB,SAAS,6CAAI,KAAK,EAAE,YAAY,EAAA,CAAA,GAAA,CAArB,EAAE,KAAK,EAAE,YAAY,EAAE,GAAC;uGAL1D,KAAK,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAL,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAK,kVA/BN,CAAA,eAAA,CAAiB,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,85DAAA,CAAA,EAAA,CAAA;;2FA+BhB,KAAK,EAAA,UAAA,EAAA,CAAA;kBAjCjB,SAAS;+BACE,WAAW,EAAA,QAAA,EACX,iBAAiB,EAAA,IAAA,EACrB;AACJ,wBAAA,KAAK,EAAE,UAAU;qBAClB,EAAA,cAAA,EAqBe;AACd,wBAAA;AACE,4BAAA,SAAS,EAAE,YAAY;4BACvB,MAAM,EAAE,CAAC,WAAW,CAAC;AACtB,yBAAA;AACF,qBAAA,EAAA,MAAA,EAAA,CAAA,85DAAA,CAAA,EAAA;;;ACxCH;;AAEG;;;;"}
+{"version":3,"file":"ks-digital-designsystem-angular-alert.mjs","sources":["../../../../packages/angular/alert/src/alert.ts","../../../../packages/angular/alert/src/ks-digital-designsystem-angular-alert.ts"],"sourcesContent":["import { Component } from '@angular/core'\nimport {\n  HostSeverityColors,\n  HostSize,\n} from '@ks-digital/designsystem-angular/__internals'\n\n/**\n * Alerts are used to inform users about important information, warnings, errors, or success.\n */\n@Component({\n  selector: 'ksd-alert',\n  template: ` <ng-content />`,\n  host: {\n    class: 'ds-alert',\n  },\n  /**\n   * Use Phosphor Icons\n   */\n  styles: `\n    :host {\n      display: block;\n      --dsc-alert-icon-url: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128A104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z'/%3E%3C/svg%3E\");\n    }\n    :host[data-color='warning'] {\n      --dsc-alert-icon-url: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M120,136V80a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0ZM232,91.55v72.9a15.86,15.86,0,0,1-4.69,11.31l-51.55,51.55A15.86,15.86,0,0,1,164.45,232H91.55a15.86,15.86,0,0,1-11.31-4.69L28.69,175.76A15.86,15.86,0,0,1,24,164.45V91.55a15.86,15.86,0,0,1,4.69-11.31L80.24,28.69A15.86,15.86,0,0,1,91.55,24h72.9a15.86,15.86,0,0,1,11.31,4.69l51.55,51.55A15.86,15.86,0,0,1,232,91.55Zm-16,0L164.45,40H91.55L40,91.55v72.9L91.55,216h72.9L216,164.45ZM128,160a12,12,0,1,0,12,12A12,12,0,0,0,128,160Z'/%3E%3C/svg%3E\");\n    }\n\n    :host[data-color='success'] {\n      --dsc-alert-icon-url: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z'%3E%3C/path%3E%3C/svg%3E\");\n    }\n\n    :host[data-color='danger'] {\n      --dsc-alert-icon-url: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M165.66,101.66,139.31,128l26.35,26.34a8,8,0,0,1-11.32,11.32L128,139.31l-26.34,26.35a8,8,0,0,1-11.32-11.32L116.69,128,90.34,101.66a8,8,0,0,1,11.32-11.32L128,116.69l26.34-26.35a8,8,0,0,1,11.32,11.32ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z'%3E%3C/path%3E%3C/svg%3E\");\n    }\n  `,\n  hostDirectives: [\n    {\n      directive: HostSize,\n      inputs: ['data-size'],\n    },\n    {\n      directive: HostSeverityColors,\n      inputs: ['data-color'],\n    },\n  ],\n})\nexport class Alert {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAMA;;AAEG;MAsCU,KAAK,CAAA;uGAAL,KAAK,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAL,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAK,yQAnCN,CAAA,eAAA,CAAiB,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,85DAAA,CAAA,EAAA,CAAA;;2FAmChB,KAAK,EAAA,UAAA,EAAA,CAAA;kBArCjB,SAAS;+BACE,WAAW,EAAA,QAAA,EACX,iBAAiB,EAAA,IAAA,EACrB;AACJ,wBAAA,KAAK,EAAE,UAAU;qBAClB,EAAA,cAAA,EAqBe;AACd,wBAAA;AACE,4BAAA,SAAS,EAAE,QAAQ;4BACnB,MAAM,EAAE,CAAC,WAAW,CAAC;AACtB,yBAAA;AACD,wBAAA;AACE,4BAAA,SAAS,EAAE,kBAAkB;4BAC7B,MAAM,EAAE,CAAC,YAAY,CAAC;AACvB,yBAAA;AACF,qBAAA,EAAA,MAAA,EAAA,CAAA,85DAAA,CAAA,EAAA;;;AC5CH;;AAEG;;;;"}

package/fesm2022/ks-digital-designsystem-angular-button.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { input, booleanAttribute, Component } from '@angular/core';
 import * as i1 from '@ks-digital/designsystem-angular/__internals';
-import { CommonInputs } from '@ks-digital/designsystem-angular/__internals';
+import { HostSize, HostColor } from '@ks-digital/designsystem-angular/__internals';
 import { Spinner } from '@ks-digital/designsystem-angular/spinner';
 
 /* eslint-disable @angular-eslint/no-input-rename */
@@ -10,38 +10,40 @@ class Button {
      * Specify which variant to use
      * @default 'primary'
      */
-    variant = input('primary', ...(ngDevMode ? [{ debugName: "variant", alias: 'data-variant' }] : [{
-            alias: 'data-variant',
-        }]));
+    variant = input('primary', { ...(ngDevMode ? { debugName: "variant" } : {}), alias: 'data-variant' });
     /**
      * Toggle loading state.
      * Pass an element if you want to display a custom loader.
      *
      * @default false
      */
-    loading = input(false, ...(ngDevMode ? [{ debugName: "loading", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : {}), transform: booleanAttribute });
     /**
      * Disables element
      */
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
     /**
      * If this is a button with only an icon
      */
-    icon = input(false, ...(ngDevMode ? [{ debugName: "icon", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Button, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Button, isStandalone: true, selector: "button[ksd-button], a[ksd-button]", inputs: { variant: { classPropertyName: "variant", publicName: "data-variant", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, properties: { "attr.data-variant": "variant()", "attr.data-icon": "icon() || null", "attr.disabled": "disabled() ? true : null", "attr.aria-busy": "loading() ? true : null" }, classAttribute: "ds-button" }, hostDirectives: [{ directive: i1.CommonInputs, inputs: ["data-size", "data-size", "data-color", "data-color"] }], ngImport: i0, template: `
+    icon = input(false, { ...(ngDevMode ? { debugName: "icon" } : {}), transform: booleanAttribute });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Button, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: Button, isStandalone: true, selector: "button[ksd-button], a[ksd-button]", inputs: { variant: { classPropertyName: "variant", publicName: "data-variant", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, properties: { "attr.data-variant": "variant()", "attr.data-icon": "icon() || null", "attr.disabled": "disabled() ? true : null", "attr.aria-busy": "loading() ? true : null" }, classAttribute: "ds-button" }, hostDirectives: [{ directive: i1.HostSize, inputs: ["data-size", "data-size"] }, { directive: i1.HostColor, inputs: ["data-color", "data-color"] }], ngImport: i0, template: `
     @if (loading()) {
       <ksd-spinner aria-hidden="true" />
     }
     <ng-content />
-  `, isInline: true, styles: [":host ::ng-deep>*{display:inline-flex}\n"], dependencies: [{ kind: "component", type: Spinner, selector: "ksd-spinner", inputs: ["aria-label", "data-size", "data-color", "aria-hidden"] }] });
+  `, isInline: true, styles: [":host ::ng-deep>*{display:inline-flex}\n"], dependencies: [{ kind: "component", type: Spinner, selector: "ksd-spinner", inputs: ["aria-label", "aria-hidden", "data-size"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Button, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Button, decorators: [{
             type: Component,
             args: [{ selector: 'button[ksd-button], a[ksd-button]', hostDirectives: [
                         {
-                            directive: CommonInputs,
-                            inputs: ['data-size', 'data-color'],
+                            directive: HostSize,
+                            inputs: ['data-size'],
+                        },
+                        {
+                            directive: HostColor,
+                            inputs: ['data-color'],
                         },
                     ], imports: [Spinner], host: {
                         class: 'ds-button',

package/fesm2022/ks-digital-designsystem-angular-button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ks-digital-designsystem-angular-button.mjs","sources":["../../../../packages/angular/button/src/button.ts","../../../../packages/angular/button/src/ks-digital-designsystem-angular-button.ts"],"sourcesContent":["/* eslint-disable @angular-eslint/no-input-rename */\nimport { booleanAttribute, Component, input } from '@angular/core'\nimport { CommonInputs } from '@ks-digital/designsystem-angular/__internals'\nimport { Spinner } from '@ks-digital/designsystem-angular/spinner'\n\n@Component({\n  selector: 'button[ksd-button], a[ksd-button]',\n  hostDirectives: [\n    {\n      directive: CommonInputs,\n      inputs: ['data-size', 'data-color'],\n    },\n  ],\n  imports: [Spinner],\n  host: {\n    class: 'ds-button',\n    type: 'button',\n    '[attr.data-variant]': 'variant()',\n    '[attr.data-icon]': 'icon() || null',\n    '[attr.disabled]': 'disabled() ? true : null',\n    '[attr.aria-busy]': 'loading() ? true : null',\n  },\n  styles: `\n    /* Ensure transcluded icons are aligned properly */\n    :host ::ng-deep > * {\n      display: inline-flex;\n    }\n  `,\n\n  template: `\n    @if (loading()) {\n      <ksd-spinner aria-hidden=\"true\" />\n    }\n    <ng-content />\n  `,\n})\nexport class Button {\n  /**\n   * Specify which variant to use\n   * @default 'primary'\n   */\n  readonly variant = input<'primary' | 'secondary' | 'tertiary'>('primary', {\n    alias: 'data-variant',\n  })\n\n  /**\n   * Toggle loading state.\n   * Pass an element if you want to display a custom loader.\n   *\n   * @default false\n   */\n  readonly loading = input(false, { transform: booleanAttribute })\n\n  /**\n   * Disables element\n   */\n  readonly disabled = input(false, { transform: booleanAttribute })\n\n  /**\n   * If this is a button with only an icon\n   */\n  readonly icon = input(false, { transform: booleanAttribute })\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ks-digital-designsystem-angular-button.mjs","sources":["../../../../packages/angular/button/src/button.ts","../../../../packages/angular/button/src/ks-digital-designsystem-angular-button.ts"],"sourcesContent":["/* eslint-disable @angular-eslint/no-input-rename */\nimport { booleanAttribute, Component, input } from '@angular/core'\nimport {\n  HostColor,\n  HostSize,\n} from '@ks-digital/designsystem-angular/__internals'\nimport { Spinner } from '@ks-digital/designsystem-angular/spinner'\n\n@Component({\n  selector: 'button[ksd-button], a[ksd-button]',\n  hostDirectives: [\n    {\n      directive: HostSize,\n      inputs: ['data-size'],\n    },\n    {\n      directive: HostColor,\n      inputs: ['data-color'],\n    },\n  ],\n  imports: [Spinner],\n  host: {\n    class: 'ds-button',\n    type: 'button',\n    '[attr.data-variant]': 'variant()',\n    '[attr.data-icon]': 'icon() || null',\n    '[attr.disabled]': 'disabled() ? true : null',\n    '[attr.aria-busy]': 'loading() ? true : null',\n  },\n  styles: `\n    /* Ensure transcluded icons are aligned properly */\n    :host ::ng-deep > * {\n      display: inline-flex;\n    }\n  `,\n\n  template: `\n    @if (loading()) {\n      <ksd-spinner aria-hidden=\"true\" />\n    }\n    <ng-content />\n  `,\n})\nexport class Button {\n  /**\n   * Specify which variant to use\n   * @default 'primary'\n   */\n  readonly variant = input<'primary' | 'secondary' | 'tertiary'>('primary', {\n    alias: 'data-variant',\n  })\n\n  /**\n   * Toggle loading state.\n   * Pass an element if you want to display a custom loader.\n   *\n   * @default false\n   */\n  readonly loading = input(false, { transform: booleanAttribute })\n\n  /**\n   * Disables element\n   */\n  readonly disabled = input(false, { transform: booleanAttribute })\n\n  /**\n   * If this is a button with only an icon\n   */\n  readonly icon = input(false, { transform: booleanAttribute })\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ks-digital-designsystem-angular-card.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { input, inject, ElementRef, Component } from '@angular/core';
 import * as i1 from '@ks-digital/designsystem-angular/__internals';
-import { CommonInputs } from '@ks-digital/designsystem-angular/__internals';
+import { HostSize, HostColor } from '@ks-digital/designsystem-angular/__internals';
 
 class Card {
     /**
@@ -25,18 +25,22 @@ class Card {
             link.click();
         }
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Card, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: Card, isStandalone: true, selector: "[ksd-card]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "handleClick($event)" }, properties: { "attr.data-variant": "variant()" }, classAttribute: "ds-card" }, hostDirectives: [{ directive: i1.CommonInputs, inputs: ["data-size", "data-size", "data-color", "data-color"] }], ngImport: i0, template: ` <ng-content /> `, isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Card, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: Card, isStandalone: true, selector: "[ksd-card]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "handleClick($event)" }, properties: { "attr.data-variant": "variant()" }, classAttribute: "ds-card" }, hostDirectives: [{ directive: i1.HostSize, inputs: ["data-size", "data-size"] }, { directive: i1.HostColor, inputs: ["data-color", "data-color"] }], ngImport: i0, template: ` <ng-content /> `, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Card, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Card, decorators: [{
             type: Component,
             args: [{
                     selector: '[ksd-card]',
                     template: ` <ng-content /> `,
                     hostDirectives: [
                         {
-                            directive: CommonInputs,
-                            inputs: ['data-size', 'data-color'],
+                            directive: HostSize,
+                            inputs: ['data-size'],
+                        },
+                        {
+                            directive: HostColor,
+                            inputs: ['data-color'],
                         },
                     ],
                     host: {
@@ -48,10 +52,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
 
 class CardBlock {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CardBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: CardBlock, isStandalone: true, selector: "[ksd-card-block]", host: { classAttribute: "ds-card__block" }, ngImport: i0, template: `<ng-content />`, isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CardBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: CardBlock, isStandalone: true, selector: "[ksd-card-block]", host: { classAttribute: "ds-card__block" }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CardBlock, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CardBlock, decorators: [{
             type: Component,
             args: [{
                     selector: '[ksd-card-block]',

package/fesm2022/ks-digital-designsystem-angular-card.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ks-digital-designsystem-angular-card.mjs","sources":["../../../../packages/angular/card/src/card.ts","../../../../packages/angular/card/src/card-block.ts","../../../../packages/angular/card/src/ks-digital-designsystem-angular-card.ts"],"sourcesContent":["import { Component, ElementRef, inject, input } from '@angular/core'\nimport { CommonInputs } from '@ks-digital/designsystem-angular/__internals'\n\n@Component({\n  selector: '[ksd-card]',\n  template: ` <ng-content /> `,\n  hostDirectives: [\n    {\n      directive: CommonInputs,\n      inputs: ['data-size', 'data-color'],\n    },\n  ],\n  host: {\n    class: 'ds-card',\n    '[attr.data-variant]': 'variant()',\n    '(click)': 'handleClick($event)',\n  },\n})\nexport class Card {\n  /**\n   * Change the background color of the card\n   * @default 'default'\n   */\n  public variant = input<'tinted' | 'default'>('default')\n  private elementRef = inject(ElementRef)\n\n  private projectedLink() {\n    const el = this.elementRef.nativeElement\n    return el?.querySelector(\n      'h1 a, h2 a, h3 a, h4 a, h5 a, h6 a',\n    ) as HTMLAnchorElement | null\n  }\n\n  protected handleClick = (event: MouseEvent) => {\n    const link = this.projectedLink()\n    if (!link) return\n\n    if (event.metaKey || event.ctrlKey) {\n      window.open(link.href, '_blank', 'noopener,noreferrer')\n    } else {\n      link.click()\n    }\n  }\n}\n","import { Component } from '@angular/core'\n\n@Component({\n  selector: '[ksd-card-block]',\n  host: {\n    class: 'ds-card__block',\n  },\n  template: `<ng-content />`,\n})\nexport class CardBlock {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;MAkBa,IAAI,CAAA;AACf;;;AAGG;AACI,IAAA,OAAO,GAAG,KAAK,CAAuB,SAAS,mDAAC;AAC/C,IAAA,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;IAE/B,aAAa,GAAA;AACnB,QAAA,MAAM,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa;AACxC,QAAA,OAAO,EAAE,EAAE,aAAa,CACtB,oCAAoC,CACT;IAC/B;AAEU,IAAA,WAAW,GAAG,CAAC,KAAiB,KAAI;AAC5C,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,aAAa,EAAE;AACjC,QAAA,IAAI,CAAC,IAAI;YAAE;QAEX,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,EAAE;YAClC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,qBAAqB,CAAC;QACzD;aAAO;YACL,IAAI,CAAC,KAAK,EAAE;QACd;AACF,IAAA,CAAC;uGAxBU,IAAI,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAJ,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,IAAI,wcAbL,CAAA,gBAAA,CAAkB,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA;;2FAajB,IAAI,EAAA,UAAA,EAAA,CAAA;kBAfhB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,YAAY;AACtB,oBAAA,QAAQ,EAAE,CAAA,gBAAA,CAAkB;AAC5B,oBAAA,cAAc,EAAE;AACd,wBAAA;AACE,4BAAA,SAAS,EAAE,YAAY;AACvB,4BAAA,MAAM,EAAE,CAAC,WAAW,EAAE,YAAY,CAAC;AACpC,yBAAA;AACF,qBAAA;AACD,oBAAA,IAAI,EAAE;AACJ,wBAAA,KAAK,EAAE,SAAS;AAChB,wBAAA,qBAAqB,EAAE,WAAW;AAClC,wBAAA,SAAS,EAAE,qBAAqB;AACjC,qBAAA;AACF,iBAAA;;;MCRY,SAAS,CAAA;uGAAT,SAAS,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAT,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,SAAS,wHAFV,CAAA,cAAA,CAAgB,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA;;2FAEf,SAAS,EAAA,UAAA,EAAA,CAAA;kBAPrB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,kBAAkB;AAC5B,oBAAA,IAAI,EAAE;AACJ,wBAAA,KAAK,EAAE,gBAAgB;AACxB,qBAAA;AACD,oBAAA,QAAQ,EAAE,CAAA,cAAA,CAAgB;AAC3B,iBAAA;;;ACRD;;AAEG;;;;"}
+{"version":3,"file":"ks-digital-designsystem-angular-card.mjs","sources":["../../../../packages/angular/card/src/card.ts","../../../../packages/angular/card/src/card-block.ts","../../../../packages/angular/card/src/ks-digital-designsystem-angular-card.ts"],"sourcesContent":["import { Component, ElementRef, inject, input } from '@angular/core'\nimport {\n  HostColor,\n  HostSize,\n} from '@ks-digital/designsystem-angular/__internals'\n\n@Component({\n  selector: '[ksd-card]',\n  template: ` <ng-content /> `,\n  hostDirectives: [\n    {\n      directive: HostSize,\n      inputs: ['data-size'],\n    },\n    {\n      directive: HostColor,\n      inputs: ['data-color'],\n    },\n  ],\n  host: {\n    class: 'ds-card',\n    '[attr.data-variant]': 'variant()',\n    '(click)': 'handleClick($event)',\n  },\n})\nexport class Card {\n  /**\n   * Change the background color of the card\n   * @default 'default'\n   */\n  public variant = input<'tinted' | 'default'>('default')\n  private elementRef = inject(ElementRef)\n\n  private projectedLink() {\n    const el = this.elementRef.nativeElement\n    return el?.querySelector(\n      'h1 a, h2 a, h3 a, h4 a, h5 a, h6 a',\n    ) as HTMLAnchorElement | null\n  }\n\n  protected handleClick = (event: MouseEvent) => {\n    const link = this.projectedLink()\n    if (!link) return\n\n    if (event.metaKey || event.ctrlKey) {\n      window.open(link.href, '_blank', 'noopener,noreferrer')\n    } else {\n      link.click()\n    }\n  }\n}\n","import { Component } from '@angular/core'\n\n@Component({\n  selector: '[ksd-card-block]',\n  host: {\n    class: 'ds-card__block',\n  },\n  template: `<ng-content />`,\n})\nexport class CardBlock {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;MAyBa,IAAI,CAAA;AACf;;;AAGG;AACI,IAAA,OAAO,GAAG,KAAK,CAAuB,SAAS,mDAAC;AAC/C,IAAA,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;IAE/B,aAAa,GAAA;AACnB,QAAA,MAAM,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa;AACxC,QAAA,OAAO,EAAE,EAAE,aAAa,CACtB,oCAAoC,CACT;IAC/B;AAEU,IAAA,WAAW,GAAG,CAAC,KAAiB,KAAI;AAC5C,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,aAAa,EAAE;AACjC,QAAA,IAAI,CAAC,IAAI;YAAE;QAEX,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,EAAE;YAClC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,qBAAqB,CAAC;QACzD;aAAO;YACL,IAAI,CAAC,KAAK,EAAE;QACd;AACF,IAAA,CAAC;uGAxBU,IAAI,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAJ,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,IAAI,2eAjBL,CAAA,gBAAA,CAAkB,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA;;2FAiBjB,IAAI,EAAA,UAAA,EAAA,CAAA;kBAnBhB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,YAAY;AACtB,oBAAA,QAAQ,EAAE,CAAA,gBAAA,CAAkB;AAC5B,oBAAA,cAAc,EAAE;AACd,wBAAA;AACE,4BAAA,SAAS,EAAE,QAAQ;4BACnB,MAAM,EAAE,CAAC,WAAW,CAAC;AACtB,yBAAA;AACD,wBAAA;AACE,4BAAA,SAAS,EAAE,SAAS;4BACpB,MAAM,EAAE,CAAC,YAAY,CAAC;AACvB,yBAAA;AACF,qBAAA;AACD,oBAAA,IAAI,EAAE;AACJ,wBAAA,KAAK,EAAE,SAAS;AAChB,wBAAA,qBAAqB,EAAE,WAAW;AAClC,wBAAA,SAAS,EAAE,qBAAqB;AACjC,qBAAA;AACF,iBAAA;;;MCfY,SAAS,CAAA;uGAAT,SAAS,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAT,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,SAAS,wHAFV,CAAA,cAAA,CAAgB,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA;;2FAEf,SAAS,EAAA,UAAA,EAAA,CAAA;kBAPrB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,kBAAkB;AAC5B,oBAAA,IAAI,EAAE;AACJ,wBAAA,KAAK,EAAE,gBAAgB;AACxB,qBAAA;AACD,oBAAA,QAAQ,EAAE,CAAA,cAAA,CAAgB;AAC3B,iBAAA;;;ACRD;;AAEG;;;;"}

package/fesm2022/ks-digital-designsystem-angular-chip.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { input, Component } from '@angular/core';
 import * as i1 from '@ks-digital/designsystem-angular/__internals';
-import { CommonInputs } from '@ks-digital/designsystem-angular/__internals';
+import { HostSize, HostColor } from '@ks-digital/designsystem-angular/__internals';
 
 class Chip {
     /**
@@ -10,11 +10,11 @@ class Chip {
      * @attribute data-removable
      */
     // eslint-disable-next-line @angular-eslint/no-input-rename
-    dataRemovable = input(false, ...(ngDevMode ? [{ debugName: "dataRemovable", alias: 'data-removable' }] : [{ alias: 'data-removable' }]));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Chip, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: Chip, isStandalone: true, selector: "label[ksd-chip], button[ksd-chip]", inputs: { dataRemovable: { classPropertyName: "dataRemovable", publicName: "data-removable", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ds-chip" }, hostDirectives: [{ directive: i1.CommonInputs, inputs: ["data-size", "data-size", "data-color", "data-color"] }], ngImport: i0, template: `<ng-content />`, isInline: true });
+    dataRemovable = input(false, { ...(ngDevMode ? { debugName: "dataRemovable" } : {}), alias: 'data-removable' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Chip, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: Chip, isStandalone: true, selector: "label[ksd-chip], button[ksd-chip]", inputs: { dataRemovable: { classPropertyName: "dataRemovable", publicName: "data-removable", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ds-chip" }, hostDirectives: [{ directive: i1.HostSize, inputs: ["data-size", "data-size"] }, { directive: i1.HostColor, inputs: ["data-color", "data-color"] }], ngImport: i0, template: `<ng-content />`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Chip, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Chip, decorators: [{
             type: Component,
             args: [{
                     selector: 'label[ksd-chip], button[ksd-chip]',
@@ -24,8 +24,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                     },
                     hostDirectives: [
                         {
-                            directive: CommonInputs,
-                            inputs: ['data-size', 'data-color'],
+                            directive: HostSize,
+                            inputs: ['data-size'],
+                        },
+                        {
+                            directive: HostColor,
+                            inputs: ['data-color'],
                         },
                     ],
                 }]

package/fesm2022/ks-digital-designsystem-angular-chip.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ks-digital-designsystem-angular-chip.mjs","sources":["../../../../packages/angular/chip/src/chip.ts","../../../../packages/angular/chip/src/ks-digital-designsystem-angular-chip.ts"],"sourcesContent":["import { Component, input } from '@angular/core'\nimport { CommonInputs } from '@ks-digital/designsystem-angular/__internals'\n\n@Component({\n  selector: 'label[ksd-chip], button[ksd-chip]',\n  template: `<ng-content />`,\n  host: {\n    class: 'ds-chip',\n  },\n  hostDirectives: [\n    {\n      directive: CommonInputs,\n      inputs: ['data-size', 'data-color'],\n    },\n  ],\n})\nexport class Chip {\n  /**\n   * Whether the chip is removable or not. If true, a remove icon will be displayed.\n   * If using this, you should add an aria-label as well, e.g \"Slett {item}\"\n   * @attribute data-removable\n   */\n  // eslint-disable-next-line @angular-eslint/no-input-rename\n  dataRemovable = input<boolean>(false, { alias: 'data-removable' })\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;MAgBa,IAAI,CAAA;AACf;;;;AAIG;;AAEH,IAAA,aAAa,GAAG,KAAK,CAAU,KAAK,iDAAI,KAAK,EAAE,gBAAgB,EAAA,CAAA,GAAA,CAAzB,EAAE,KAAK,EAAE,gBAAgB,EAAE,GAAC;uGAPvD,IAAI,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAJ,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,IAAI,iZAXL,CAAA,cAAA,CAAgB,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA;;2FAWf,IAAI,EAAA,UAAA,EAAA,CAAA;kBAbhB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,mCAAmC;AAC7C,oBAAA,QAAQ,EAAE,CAAA,cAAA,CAAgB;AAC1B,oBAAA,IAAI,EAAE;AACJ,wBAAA,KAAK,EAAE,SAAS;AACjB,qBAAA;AACD,oBAAA,cAAc,EAAE;AACd,wBAAA;AACE,4BAAA,SAAS,EAAE,YAAY;AACvB,4BAAA,MAAM,EAAE,CAAC,WAAW,EAAE,YAAY,CAAC;AACpC,yBAAA;AACF,qBAAA;AACF,iBAAA;;;ACfD;;AAEG;;;;"}
+{"version":3,"file":"ks-digital-designsystem-angular-chip.mjs","sources":["../../../../packages/angular/chip/src/chip.ts","../../../../packages/angular/chip/src/ks-digital-designsystem-angular-chip.ts"],"sourcesContent":["import { Component, input } from '@angular/core'\nimport {\n  HostColor,\n  HostSize,\n} from '@ks-digital/designsystem-angular/__internals'\n\n@Component({\n  selector: 'label[ksd-chip], button[ksd-chip]',\n  template: `<ng-content />`,\n  host: {\n    class: 'ds-chip',\n  },\n  hostDirectives: [\n    {\n      directive: HostSize,\n      inputs: ['data-size'],\n    },\n    {\n      directive: HostColor,\n      inputs: ['data-color'],\n    },\n  ],\n})\nexport class Chip {\n  /**\n   * Whether the chip is removable or not. If true, a remove icon will be displayed.\n   * If using this, you should add an aria-label as well, e.g \"Slett {item}\"\n   * @attribute data-removable\n   */\n  // eslint-disable-next-line @angular-eslint/no-input-rename\n  dataRemovable = input<boolean>(false, { alias: 'data-removable' })\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;MAuBa,IAAI,CAAA;AACf;;;;AAIG;;IAEH,aAAa,GAAG,KAAK,CAAU,KAAK,0DAAI,KAAK,EAAE,gBAAgB,EAAA,CAAG;uGAPvD,IAAI,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAJ,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,IAAI,obAfL,CAAA,cAAA,CAAgB,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA;;2FAef,IAAI,EAAA,UAAA,EAAA,CAAA;kBAjBhB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,mCAAmC;AAC7C,oBAAA,QAAQ,EAAE,CAAA,cAAA,CAAgB;AAC1B,oBAAA,IAAI,EAAE;AACJ,wBAAA,KAAK,EAAE,SAAS;AACjB,qBAAA;AACD,oBAAA,cAAc,EAAE;AACd,wBAAA;AACE,4BAAA,SAAS,EAAE,QAAQ;4BACnB,MAAM,EAAE,CAAC,WAAW,CAAC;AACtB,yBAAA;AACD,wBAAA;AACE,4BAAA,SAAS,EAAE,SAAS;4BACpB,MAAM,EAAE,CAAC,YAAY,CAAC;AACvB,yBAAA;AACF,qBAAA;AACF,iBAAA;;;ACtBD;;AAEG;;;;"}

package/fesm2022/ks-digital-designsystem-angular-details.mjs

@@ -1,20 +1,10 @@
 import * as i0 from '@angular/core';
 import { input, output, viewChild, CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core';
+import * as i1 from '@ks-digital/designsystem-angular/__internals';
+import { HostSize, HostColor } from '@ks-digital/designsystem-angular/__internals';
 import '@u-elements/u-details';
 
 class Details {
-    dataSize = input(undefined, ...(ngDevMode ? [{ debugName: "dataSize", 
-            // eslint-disable-next-line @angular-eslint/no-input-rename
-            alias: 'data-size' }] : [{
-            // eslint-disable-next-line @angular-eslint/no-input-rename
-            alias: 'data-size',
-        }]));
-    dataColor = input(undefined, ...(ngDevMode ? [{ debugName: "dataColor", 
-            // eslint-disable-next-line @angular-eslint/no-input-rename
-            alias: 'data-color' }] : [{
-            // eslint-disable-next-line @angular-eslint/no-input-rename
-            alias: 'data-color',
-        }]));
     variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
     defaultOpen = input(false, ...(ngDevMode ? [{ debugName: "defaultOpen" }] : []));
     open = input(undefined, ...(ngDevMode ? [{ debugName: "open" }] : []));
@@ -26,15 +16,13 @@ class Details {
             this.toggled.emit(event);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Details, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.9", type: Details, isStandalone: true, selector: "ksd-details", inputs: { dataSize: { classPropertyName: "dataSize", publicName: "data-size", isSignal: true, isRequired: false, transformFunction: null }, dataColor: { classPropertyName: "dataColor", publicName: "data-color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggled: "toggled" }, viewQueries: [{ propertyName: "detailsRef", first: true, predicate: ["detailsRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Details, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.6", type: Details, isStandalone: true, selector: "ksd-details", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggled: "toggled" }, viewQueries: [{ propertyName: "detailsRef", first: true, predicate: ["detailsRef"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.HostSize, inputs: ["data-size", "data-size"] }, { directive: i1.HostColor, inputs: ["data-color", "data-color"] }], ngImport: i0, template: `
     <u-details
       #detailsRef
       class="ds-details"
       [attr.data-variant]="variant()"
       [attr.open]="(open() ?? defaultOpen()) || undefined"
-      [attr.data-color]="dataColor()"
-      [attr.data-size]="dataSize()"
       (toggle)="onToggle($event)"
     >
       <u-summary>
@@ -46,16 +34,23 @@ class Details {
     </u-details>
   `, isInline: true, styles: [".ds-card>:host(:last-of-type)>.ds-details{border-bottom:0}.ds-card>:host(:first-of-type)>.ds-details{border-top:0}:host(:not(:first-of-type))>.ds-details{border-top:0;margin-top:0}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Details, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Details, decorators: [{
             type: Component,
-            args: [{ selector: 'ksd-details', schemas: [CUSTOM_ELEMENTS_SCHEMA], template: `
+            args: [{ selector: 'ksd-details', schemas: [CUSTOM_ELEMENTS_SCHEMA], hostDirectives: [
+                        {
+                            directive: HostSize,
+                            inputs: ['data-size'],
+                        },
+                        {
+                            directive: HostColor,
+                            inputs: ['data-color'],
+                        },
+                    ], template: `
     <u-details
       #detailsRef
       class="ds-details"
       [attr.data-variant]="variant()"
       [attr.open]="(open() ?? defaultOpen()) || undefined"
-      [attr.data-color]="dataColor()"
-      [attr.data-size]="dataSize()"
       (toggle)="onToggle($event)"
     >
       <u-summary>
@@ -66,13 +61,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
       </div>
     </u-details>
   `, styles: [".ds-card>:host(:last-of-type)>.ds-details{border-bottom:0}.ds-card>:host(:first-of-type)>.ds-details{border-top:0}:host(:not(:first-of-type))>.ds-details{border-top:0;margin-top:0}\n"] }]
-        }], propDecorators: { dataSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "data-size", required: false }] }], dataColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "data-color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], toggled: [{ type: i0.Output, args: ["toggled"] }], detailsRef: [{ type: i0.ViewChild, args: ['detailsRef', { isSignal: true }] }] } });
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], toggled: [{ type: i0.Output, args: ["toggled"] }], detailsRef: [{ type: i0.ViewChild, args: ['detailsRef', { isSignal: true }] }] } });
 
 class DetailsContent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: DetailsContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: DetailsContent, isStandalone: true, selector: "ksd-details-content", ngImport: i0, template: `<ng-content />`, isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DetailsContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: DetailsContent, isStandalone: true, selector: "ksd-details-content", ngImport: i0, template: `<ng-content />`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: DetailsContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DetailsContent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ksd-details-content',
@@ -81,10 +76,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
         }] });
 
 class DetailsSummary {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: DetailsSummary, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: DetailsSummary, isStandalone: true, selector: "ksd-details-summary", ngImport: i0, template: `<ng-content />`, isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DetailsSummary, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: DetailsSummary, isStandalone: true, selector: "ksd-details-summary", ngImport: i0, template: `<ng-content />`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: DetailsSummary, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DetailsSummary, decorators: [{
             type: Component,
             args: [{
                     selector: 'ksd-details-summary',