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

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

@@ -1,15 +1,16 @@
 import * as i0 from '@angular/core';
 import { input, booleanAttribute, output, signal, computed, viewChild, effect, Component } from '@angular/core';
 import { autoUpdate, computePosition, offset, flip, shift } from '@floating-ui/dom';
+import * as i1 from '@ks-digital/designsystem-angular/__internals';
+import { HostSize, HostColor } from '@ks-digital/designsystem-angular/__internals';
 
-/* eslint-disable @angular-eslint/no-input-rename */
 class Popover {
     // use popoverId instead of id since id will be put on the angular element and not the popover-div
     popoverId = input.required(...(ngDevMode ? [{ debugName: "popoverId" }] : []));
     placement = input('top', ...(ngDevMode ? [{ debugName: "placement" }] : []));
-    autoPlacement = input(true, ...(ngDevMode ? [{ debugName: "autoPlacement", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    autoPlacement = input(true, { ...(ngDevMode ? { debugName: "autoPlacement" } : {}), transform: booleanAttribute });
     // for controlled component
-    open = input(undefined, ...(ngDevMode ? [{ debugName: "open", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    open = input(undefined, { ...(ngDevMode ? { debugName: "open" } : {}), transform: booleanAttribute });
     /*
     the naming here is different from Designsystemet
     since we need to use outputs for onOpen and onClose
@@ -19,10 +20,6 @@ class Popover {
     internalOpen = signal(false, ...(ngDevMode ? [{ debugName: "internalOpen" }] : []));
     controlledOpen = computed(() => this.open() ?? this.internalOpen(), ...(ngDevMode ? [{ debugName: "controlledOpen" }] : []));
     variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
-    dataSize = input('md', ...(ngDevMode ? [{ debugName: "dataSize", alias: 'data-size' }] : [{ alias: 'data-size' }]));
-    dataColor = input('neutral', ...(ngDevMode ? [{ debugName: "dataColor", alias: 'data-color' }] : [{
-            alias: 'data-color',
-        }]));
     popoverRef = viewChild('myPopover', ...(ngDevMode ? [{ debugName: "popoverRef" }] : []));
     // enable controlled component
     controlledComponent = effect((onCleanup) => {
@@ -55,7 +52,7 @@ class Popover {
             document.removeEventListener('click', handleClick, true);
             document.removeEventListener('keydown', handleKeydown);
         });
-    }, ...(ngDevMode ? [{ debugName: "controlledComponent" }] : [{}]));
+    }, { ...(ngDevMode ? { debugName: "controlledComponent" } : {}) });
     positionPopover = effect(() => {
         const popover = this.popoverRef()?.nativeElement;
         const trigger = document.querySelector(`[popovertarget="${this.popoverId()}"]`);
@@ -81,7 +78,7 @@ class Popover {
                 });
             });
         }
-    }, ...(ngDevMode ? [{ debugName: "positionPopover" }] : [{}]));
+    }, { ...(ngDevMode ? { debugName: "positionPopover" } : {}) });
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     arrowPseudoElement = {
         name: 'ArrowPseudoElement',
@@ -115,16 +112,14 @@ class Popover {
             return data;
         },
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Popover, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Popover, isStandalone: true, selector: "ksd-popover", inputs: { popoverId: { classPropertyName: "popoverId", publicName: "popoverId", isSignal: true, isRequired: true, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, autoPlacement: { classPropertyName: "autoPlacement", publicName: "autoPlacement", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, dataSize: { classPropertyName: "dataSize", publicName: "data-size", isSignal: true, isRequired: false, transformFunction: null }, dataColor: { classPropertyName: "dataColor", publicName: "data-color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { triggeredClose: "triggeredClose", triggeredOpen: "triggeredOpen" }, viewQueries: [{ propertyName: "popoverRef", first: true, predicate: ["myPopover"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Popover, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: Popover, isStandalone: true, selector: "ksd-popover", inputs: { popoverId: { classPropertyName: "popoverId", publicName: "popoverId", isSignal: true, isRequired: true, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, autoPlacement: { classPropertyName: "autoPlacement", publicName: "autoPlacement", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { triggeredClose: "triggeredClose", triggeredOpen: "triggeredOpen" }, viewQueries: [{ propertyName: "popoverRef", first: true, predicate: ["myPopover"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.HostSize, inputs: ["data-size", "data-size"] }, { directive: i1.HostColor, inputs: ["data-color", "data-color"] }], ngImport: i0, template: `
     <div
       #myPopover
       popover="manual"
       class="ds-popover"
       data-testid="popover"
       [id]="popoverId()"
-      [attr.data-size]="dataSize()"
-      [attr.data-color]="dataColor()"
       [attr.data-variant]="variant()"
     >
       @if (controlledOpen()) {
@@ -133,10 +128,20 @@ class Popover {
     </div>
   `, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Popover, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Popover, decorators: [{
             type: Component,
             args: [{
                     selector: 'ksd-popover',
+                    hostDirectives: [
+                        {
+                            directive: HostSize,
+                            inputs: ['data-size'],
+                        },
+                        {
+                            directive: HostColor,
+                            inputs: ['data-color'],
+                        },
+                    ],
                     template: `
     <div
       #myPopover
@@ -144,8 +149,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
       class="ds-popover"
       data-testid="popover"
       [id]="popoverId()"
-      [attr.data-size]="dataSize()"
-      [attr.data-color]="dataColor()"
       [attr.data-variant]="variant()"
     >
       @if (controlledOpen()) {
@@ -153,9 +156,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
       }
     </div>
   `,
-                    imports: [],
                 }]
-        }], propDecorators: { popoverId: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverId", required: true }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], autoPlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoPlacement", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], triggeredClose: [{ type: i0.Output, args: ["triggeredClose"] }], triggeredOpen: [{ type: i0.Output, args: ["triggeredOpen"] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], dataSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "data-size", required: false }] }], dataColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "data-color", required: false }] }], popoverRef: [{ type: i0.ViewChild, args: ['myPopover', { isSignal: true }] }] } });
+        }], propDecorators: { popoverId: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverId", required: true }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], autoPlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoPlacement", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], triggeredClose: [{ type: i0.Output, args: ["triggeredClose"] }], triggeredOpen: [{ type: i0.Output, args: ["triggeredOpen"] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], popoverRef: [{ type: i0.ViewChild, args: ['myPopover', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

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

@@ -1 +1 @@
-{"version":3,"file":"ks-digital-designsystem-angular-popover.mjs","sources":["../../../../packages/angular/popover/src/popover.ts","../../../../packages/angular/popover/src/ks-digital-designsystem-angular-popover.ts"],"sourcesContent":["/* eslint-disable @angular-eslint/no-input-rename */\n\nimport {\n  booleanAttribute,\n  Component,\n  computed,\n  effect,\n  ElementRef,\n  input,\n  output,\n  signal,\n  viewChild,\n} from '@angular/core'\nimport {\n  autoUpdate,\n  computePosition,\n  flip,\n  MiddlewareState,\n  offset,\n  Placement,\n  shift,\n} from '@floating-ui/dom'\nimport {\n  Color,\n  SeverityColors,\n  Size,\n} from '@ks-digital/designsystem-angular/__internals'\n\n@Component({\n  selector: 'ksd-popover',\n\n  template: `\n    <div\n      #myPopover\n      popover=\"manual\"\n      class=\"ds-popover\"\n      data-testid=\"popover\"\n      [id]=\"popoverId()\"\n      [attr.data-size]=\"dataSize()\"\n      [attr.data-color]=\"dataColor()\"\n      [attr.data-variant]=\"variant()\"\n    >\n      @if (controlledOpen()) {\n        <ng-content />\n      }\n    </div>\n  `,\n  imports: [],\n})\nexport class Popover {\n  // use popoverId instead of id since id will be put on the angular element and not the popover-div\n  readonly popoverId = input.required<string>()\n  readonly placement = input<Placement>('top')\n  readonly autoPlacement = input(true, { transform: booleanAttribute })\n\n  // for controlled component\n  readonly open = input(undefined, { transform: booleanAttribute })\n  /*\n  the naming here is different from Designsystemet\n  since we need to use outputs for onOpen and onClose\n  */\n  readonly triggeredClose = output()\n  readonly triggeredOpen = output()\n\n  protected readonly internalOpen = signal(false)\n  protected readonly controlledOpen = computed(\n    () => this.open() ?? this.internalOpen(),\n  )\n\n  readonly variant = input<'tinted' | 'default'>('default')\n  readonly dataSize = input<Size>('md', { alias: 'data-size' })\n  readonly dataColor = input<Color | SeverityColors>('neutral', {\n    alias: 'data-color',\n  })\n\n  private popoverRef = viewChild<ElementRef>('myPopover')\n\n  // enable controlled component\n  controlledComponent = effect((onCleanup) => {\n    const popover = this.popoverRef()?.nativeElement\n    const handleClick = (event: MouseEvent) => {\n      const el = event.target as Element | null\n      const isTrigger = el?.closest?.(`[popovertarget=\"${this.popoverId()}\"]`)\n      const isOutside = !isTrigger && !popover?.contains(el as Node)\n\n      if (isTrigger) {\n        event.preventDefault() // Prevent native Popover API\n        this.internalOpen.update((open) => !open)\n        this.triggeredOpen.emit()\n      }\n      if (isOutside) {\n        this.internalOpen.set(false)\n        this.triggeredClose.emit()\n      }\n    }\n\n    const handleKeydown = (event: KeyboardEvent) => {\n      if (event.key !== 'Escape' || !this.controlledOpen()) return\n      event.preventDefault() // Prevent closing fullscreen in Safari\n      this.internalOpen.set(false)\n      this.triggeredClose.emit()\n    }\n\n    popover?.togglePopover?.(this.controlledOpen())\n    document.addEventListener('click', handleClick, true) // Use capture to execute before React event API\n    document.addEventListener('keydown', handleKeydown)\n\n    onCleanup(() => {\n      document.removeEventListener('click', handleClick, true)\n      document.removeEventListener('keydown', handleKeydown)\n    })\n  }, {})\n\n  positionPopover = effect(() => {\n    const popover = this.popoverRef()?.nativeElement\n\n    const trigger = document.querySelector(\n      `[popovertarget=\"${this.popoverId()}\"]`,\n    )\n    const placement = this.placement()\n\n    if (popover && trigger && this.controlledOpen()) {\n      autoUpdate(trigger, popover, () => {\n        computePosition(trigger, popover, {\n          placement,\n          strategy: 'fixed',\n          middleware: [\n            offset((data) => {\n              // get pseudo element arrow size\n              const styles = getComputedStyle(\n                data.elements.floating,\n                '::before',\n              )\n              return parseFloat(styles.height)\n            }),\n            ...(this.autoPlacement()\n              ? [flip({ fallbackAxisSideDirection: 'start' }), shift()]\n              : []),\n            this.arrowPseudoElement,\n          ],\n        }).then(({ x, y }) => {\n          popover.style.translate = `${x}px ${y}px`\n        })\n      })\n    }\n  }, {})\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  arrowPseudoElement: any = {\n    name: 'ArrowPseudoElement',\n    fn(data: MiddlewareState) {\n      const { elements, rects, placement } = data\n\n      let arrowX = `${Math.round(rects.reference.width / 2 + rects.reference.x - data.x)}px`\n      let arrowY = `${Math.round(rects.reference.height / 2 + rects.reference.y - data.y)}px`\n\n      if (rects.reference.width > rects.floating.width) {\n        arrowX = `${Math.round(rects.floating.width / 2)}px`\n      }\n\n      if (rects.reference.height > rects.floating.height) {\n        arrowY = `${Math.round(rects.floating.height / 2)}px`\n      }\n\n      switch (placement.split('-')[0]) {\n        case 'top':\n          arrowY = '100%'\n          break\n        case 'right':\n          arrowX = '0'\n          break\n        case 'bottom':\n          arrowY = '0'\n          break\n        case 'left':\n          arrowX = '100%'\n          break\n      }\n\n      elements.floating.setAttribute(\n        'data-placement',\n        placement.split('-')[0] as string,\n      ) // We only need top/left/right/bottom\n      elements.floating.style.setProperty('--ds-popover-arrow-x', arrowX)\n      elements.floating.style.setProperty('--ds-popover-arrow-y', arrowY)\n      return data\n    },\n  }\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-popover.mjs","sources":["../../../../packages/angular/popover/src/popover.ts","../../../../packages/angular/popover/src/ks-digital-designsystem-angular-popover.ts"],"sourcesContent":["import {\n  booleanAttribute,\n  Component,\n  computed,\n  effect,\n  ElementRef,\n  input,\n  output,\n  signal,\n  viewChild,\n} from '@angular/core'\nimport {\n  autoUpdate,\n  computePosition,\n  flip,\n  MiddlewareState,\n  offset,\n  Placement,\n  shift,\n} from '@floating-ui/dom'\nimport {\n  HostColor,\n  HostSize,\n} from '@ks-digital/designsystem-angular/__internals'\n\n@Component({\n  selector: 'ksd-popover',\n  hostDirectives: [\n    {\n      directive: HostSize,\n      inputs: ['data-size'],\n    },\n    {\n      directive: HostColor,\n      inputs: ['data-color'],\n    },\n  ],\n  template: `\n    <div\n      #myPopover\n      popover=\"manual\"\n      class=\"ds-popover\"\n      data-testid=\"popover\"\n      [id]=\"popoverId()\"\n      [attr.data-variant]=\"variant()\"\n    >\n      @if (controlledOpen()) {\n        <ng-content />\n      }\n    </div>\n  `,\n})\nexport class Popover {\n  // use popoverId instead of id since id will be put on the angular element and not the popover-div\n  readonly popoverId = input.required<string>()\n  readonly placement = input<Placement>('top')\n  readonly autoPlacement = input(true, { transform: booleanAttribute })\n\n  // for controlled component\n  readonly open = input(undefined, { transform: booleanAttribute })\n  /*\n  the naming here is different from Designsystemet\n  since we need to use outputs for onOpen and onClose\n  */\n  readonly triggeredClose = output()\n  readonly triggeredOpen = output()\n\n  protected readonly internalOpen = signal(false)\n  protected readonly controlledOpen = computed(\n    () => this.open() ?? this.internalOpen(),\n  )\n\n  readonly variant = input<'tinted' | 'default'>('default')\n\n  private popoverRef = viewChild<ElementRef>('myPopover')\n\n  // enable controlled component\n  controlledComponent = effect((onCleanup) => {\n    const popover = this.popoverRef()?.nativeElement\n    const handleClick = (event: MouseEvent) => {\n      const el = event.target as Element | null\n      const isTrigger = el?.closest?.(`[popovertarget=\"${this.popoverId()}\"]`)\n      const isOutside = !isTrigger && !popover?.contains(el as Node)\n\n      if (isTrigger) {\n        event.preventDefault() // Prevent native Popover API\n        this.internalOpen.update((open) => !open)\n        this.triggeredOpen.emit()\n      }\n      if (isOutside) {\n        this.internalOpen.set(false)\n        this.triggeredClose.emit()\n      }\n    }\n\n    const handleKeydown = (event: KeyboardEvent) => {\n      if (event.key !== 'Escape' || !this.controlledOpen()) return\n      event.preventDefault() // Prevent closing fullscreen in Safari\n      this.internalOpen.set(false)\n      this.triggeredClose.emit()\n    }\n\n    popover?.togglePopover?.(this.controlledOpen())\n    document.addEventListener('click', handleClick, true) // Use capture to execute before React event API\n    document.addEventListener('keydown', handleKeydown)\n\n    onCleanup(() => {\n      document.removeEventListener('click', handleClick, true)\n      document.removeEventListener('keydown', handleKeydown)\n    })\n  }, {})\n\n  positionPopover = effect(() => {\n    const popover = this.popoverRef()?.nativeElement\n\n    const trigger = document.querySelector(\n      `[popovertarget=\"${this.popoverId()}\"]`,\n    )\n    const placement = this.placement()\n\n    if (popover && trigger && this.controlledOpen()) {\n      autoUpdate(trigger, popover, () => {\n        computePosition(trigger, popover, {\n          placement,\n          strategy: 'fixed',\n          middleware: [\n            offset((data) => {\n              // get pseudo element arrow size\n              const styles = getComputedStyle(\n                data.elements.floating,\n                '::before',\n              )\n              return parseFloat(styles.height)\n            }),\n            ...(this.autoPlacement()\n              ? [flip({ fallbackAxisSideDirection: 'start' }), shift()]\n              : []),\n            this.arrowPseudoElement,\n          ],\n        }).then(({ x, y }) => {\n          popover.style.translate = `${x}px ${y}px`\n        })\n      })\n    }\n  }, {})\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  arrowPseudoElement: any = {\n    name: 'ArrowPseudoElement',\n    fn(data: MiddlewareState) {\n      const { elements, rects, placement } = data\n\n      let arrowX = `${Math.round(rects.reference.width / 2 + rects.reference.x - data.x)}px`\n      let arrowY = `${Math.round(rects.reference.height / 2 + rects.reference.y - data.y)}px`\n\n      if (rects.reference.width > rects.floating.width) {\n        arrowX = `${Math.round(rects.floating.width / 2)}px`\n      }\n\n      if (rects.reference.height > rects.floating.height) {\n        arrowY = `${Math.round(rects.floating.height / 2)}px`\n      }\n\n      switch (placement.split('-')[0]) {\n        case 'top':\n          arrowY = '100%'\n          break\n        case 'right':\n          arrowX = '0'\n          break\n        case 'bottom':\n          arrowY = '0'\n          break\n        case 'left':\n          arrowX = '100%'\n          break\n      }\n\n      elements.floating.setAttribute(\n        'data-placement',\n        placement.split('-')[0] as string,\n      ) // We only need top/left/right/bottom\n      elements.floating.style.setProperty('--ds-popover-arrow-x', arrowX)\n      elements.floating.style.setProperty('--ds-popover-arrow-y', arrowY)\n      return data\n    },\n  }\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-search.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { Directive, contentChild, afterNextRender, Component, input, output } from '@angular/core';
 import * as i1 from '@ks-digital/designsystem-angular/__internals';
-import { logIfDevMode, CommonInputs } from '@ks-digital/designsystem-angular/__internals';
+import { logIfDevMode, HostSize, HostColor } from '@ks-digital/designsystem-angular/__internals';
 
 /**
  * Search input
@@ -9,10 +9,10 @@ import { logIfDevMode, CommonInputs } from '@ks-digital/designsystem-angular/__i
  * Used within Search to provide a search input.
  */
 class SearchInput {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: SearchInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: SearchInput, isStandalone: true, selector: "input[ksd-search-input]", host: { attributes: { "type": "search", "placeholder": "" }, classAttribute: "ds-input" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SearchInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: SearchInput, isStandalone: true, selector: "input[ksd-search-input]", host: { attributes: { "type": "search", "placeholder": "" }, classAttribute: "ds-input" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: SearchInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SearchInput, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -51,14 +51,14 @@ class Search {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Search, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.9", type: Search, isStandalone: true, selector: "ksd-search", host: { classAttribute: "ds-search" }, queries: [{ propertyName: "input", first: true, predicate: SearchInput, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.CommonInputs, inputs: ["data-size", "data-size", "data-color", "data-color"] }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Search, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.6", type: Search, isStandalone: true, selector: "ksd-search", host: { classAttribute: "ds-search" }, queries: [{ propertyName: "input", first: true, predicate: SearchInput, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.HostSize, inputs: ["data-size", "data-size"] }, { directive: i1.HostColor, inputs: ["data-color", "data-color"] }], ngImport: i0, template: `
     <ng-content select="[ksd-search-input]" />
     <ng-content select="[ksd-search-clear]" />
     <ng-content select="[ksd-search-button]" />
   `, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Search, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Search, decorators: [{
             type: Component,
             args: [{
                     selector: 'ksd-search',
@@ -72,8 +72,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'],
                         },
                     ],
                 }]
@@ -98,11 +102,11 @@ class SearchButton {
     /**
      * Aria label for the button
      */
-    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel", alias: 'aria-label' }] : [{ alias: 'aria-label' }]));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: SearchButton, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: SearchButton, isStandalone: true, selector: "button[ksd-search-button]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "submit" }, properties: { "attr.aria-label": "this.ariaLabel()", "attr.data-variant": "this.variant()" }, classAttribute: "ds-button" }, ngImport: i0 });
+    ariaLabel = input('', { ...(ngDevMode ? { debugName: "ariaLabel" } : {}), alias: 'aria-label' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SearchButton, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: SearchButton, isStandalone: true, selector: "button[ksd-search-button]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "submit" }, properties: { "attr.aria-label": "this.ariaLabel()", "attr.data-variant": "this.variant()" }, classAttribute: "ds-button" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: SearchButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SearchButton, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -133,7 +137,7 @@ class SearchClear {
      * Aria label for the button
      * @default 'Tøm'
      */
-    ariaLabel = input('Tøm', ...(ngDevMode ? [{ debugName: "ariaLabel", alias: 'aria-label' }] : [{ alias: 'aria-label' }]));
+    ariaLabel = input('Tøm', { ...(ngDevMode ? { debugName: "ariaLabel" } : {}), alias: 'aria-label' });
     /**
      * Output to notify controlled forms that input should be cleared
      */
@@ -154,10 +158,10 @@ class SearchClear {
         this.clearInput.emit();
         inputElement.focus();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: SearchClear, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: SearchClear, isStandalone: true, selector: "button[ksd-search-clear]", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clearInput: "clearInput" }, host: { attributes: { "type": "reset" }, listeners: { "click": "handleClear($event)" }, properties: { "attr.data-variant": "'tertiary'", "attr.aria-label": "this.ariaLabel()" }, classAttribute: "ds-button" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SearchClear, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: SearchClear, isStandalone: true, selector: "button[ksd-search-clear]", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clearInput: "clearInput" }, host: { attributes: { "type": "reset" }, listeners: { "click": "handleClear($event)" }, properties: { "attr.data-variant": "'tertiary'", "attr.aria-label": "this.ariaLabel()" }, classAttribute: "ds-button" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: SearchClear, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SearchClear, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector

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

@@ -1 +1 @@
-{"version":3,"file":"ks-digital-designsystem-angular-search.mjs","sources":["../../../../packages/angular/search/src/search-input.ts","../../../../packages/angular/search/src/search.ts","../../../../packages/angular/search/src/search-button.ts","../../../../packages/angular/search/src/search-clear.ts","../../../../packages/angular/search/src/ks-digital-designsystem-angular-search.ts"],"sourcesContent":["import { Directive } from '@angular/core'\n\n/**\n * Search input\n *\n * Used within Search to provide a search input.\n */\n@Directive({\n  // eslint-disable-next-line @angular-eslint/directive-selector\n  selector: 'input[ksd-search-input]',\n  standalone: true,\n  host: {\n    class: 'ds-input',\n    type: 'search',\n    placeholder: '', // Need empty placeholder to enable show/hide for clear button\n  },\n})\nexport class SearchInput {}\n","import { afterNextRender, Component, contentChild } from '@angular/core'\nimport {\n  CommonInputs,\n  logIfDevMode,\n} from '@ks-digital/designsystem-angular/__internals'\nimport { SearchInput } from './search-input'\n\n/**\n * Search Component\n *\n * Use to contain the search input and buttons.\n * Only `SearchInput` is required, while `SearchClear` and `SearchButton` are optional.\n *\n * @example\n * <div ksd-search>\n *   <input ksd-search-input />\n *   <button ksd-search-clear></button>\n *   <button ksd-search-button></button>\n * </div>\n */\n@Component({\n  selector: 'ksd-search',\n  template: `\n    <ng-content select=\"[ksd-search-input]\" />\n    <ng-content select=\"[ksd-search-clear]\" />\n    <ng-content select=\"[ksd-search-button]\" />\n  `,\n  host: {\n    class: 'ds-search',\n  },\n  hostDirectives: [\n    {\n      directive: CommonInputs,\n      inputs: ['data-size', 'data-color'],\n    },\n  ],\n})\nexport class Search {\n  private readonly input = contentChild(SearchInput)\n\n  constructor() {\n    afterNextRender(() => {\n      if (!this.input()) {\n        logIfDevMode({\n          component: 'Search',\n          message:\n            'Missing required elements: ksd-search-input must be provided as child. Check imports and markup.',\n        })\n      }\n    })\n  }\n}\n","import { Directive, input } from '@angular/core'\n\n/**\n * Search button\n *\n * Used within Search to provide a submit button.\n *\n * @param {('primary' | 'secondary')} [variant] - Specify which button variant to use\n * @param {string} [aria-label] - Aria label for the button\n *\n */\n@Directive({\n  // eslint-disable-next-line @angular-eslint/directive-selector\n  selector: 'button[ksd-search-button]',\n  standalone: true,\n  host: {\n    class: 'ds-button',\n    type: 'submit',\n    '[attr.aria-label]': 'this.ariaLabel()',\n    '[attr.data-variant]': 'this.variant()',\n  },\n})\nexport class SearchButton {\n  /**\n   * Specify which button variant to use\n   *\n   * @default 'primary'\n   */\n  readonly variant = input<'primary' | 'secondary'>('primary')\n\n  /**\n   * Aria label for the button\n   */\n  readonly ariaLabel = input('', { alias: 'aria-label' })\n}\n","import { Directive, input, output } from '@angular/core'\n\n/**\n * Search clear button\n *\n * Used within Search to provide a clear button.\n *\n * @param {string} [aria-label] - Aria label for the button.\n *\n * @event clearInput - Emitted when the clear button is clicked.\n * Use this to notify controlled forms that the input should be cleared.\n *\n */\n@Directive({\n  // eslint-disable-next-line @angular-eslint/directive-selector\n  selector: 'button[ksd-search-clear]',\n  standalone: true,\n  host: {\n    class: 'ds-button',\n    type: 'reset',\n    '[attr.data-variant]': \"'tertiary'\",\n    '[attr.aria-label]': 'this.ariaLabel()',\n    '(click)': 'handleClear($event)',\n  },\n})\nexport class SearchClear {\n  /**\n   * Aria label for the button\n   * @default 'Tøm'\n   */\n  readonly ariaLabel = input('Tøm', { alias: 'aria-label' })\n\n  /**\n   * Output to notify controlled forms that input should be cleared\n   */\n  clearInput = output<void>()\n\n  handleClear(e: Event): void {\n    const target = e.target as HTMLButtonElement\n    let inputElement: HTMLElement | null | undefined = null\n\n    if (target instanceof HTMLElement) {\n      inputElement = target.closest('.ds-search')?.querySelector('input')\n    }\n\n    if (!inputElement) throw new Error('Input is missing')\n\n    if (!(inputElement instanceof HTMLInputElement)) {\n      throw new Error('Input is not an input element')\n    }\n\n    e.preventDefault()\n    inputElement.value = ''\n    this.clearInput.emit()\n    inputElement.focus()\n  }\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-search.mjs","sources":["../../../../packages/angular/search/src/search-input.ts","../../../../packages/angular/search/src/search.ts","../../../../packages/angular/search/src/search-button.ts","../../../../packages/angular/search/src/search-clear.ts","../../../../packages/angular/search/src/ks-digital-designsystem-angular-search.ts"],"sourcesContent":["import { Directive } from '@angular/core'\n\n/**\n * Search input\n *\n * Used within Search to provide a search input.\n */\n@Directive({\n  // eslint-disable-next-line @angular-eslint/directive-selector\n  selector: 'input[ksd-search-input]',\n  standalone: true,\n  host: {\n    class: 'ds-input',\n    type: 'search',\n    placeholder: '', // Need empty placeholder to enable show/hide for clear button\n  },\n})\nexport class SearchInput {}\n","import { afterNextRender, Component, contentChild } from '@angular/core'\nimport {\n  HostColor,\n  HostSize,\n  logIfDevMode,\n} from '@ks-digital/designsystem-angular/__internals'\nimport { SearchInput } from './search-input'\n\n/**\n * Search Component\n *\n * Use to contain the search input and buttons.\n * Only `SearchInput` is required, while `SearchClear` and `SearchButton` are optional.\n *\n * @example\n * <div ksd-search>\n *   <input ksd-search-input />\n *   <button ksd-search-clear></button>\n *   <button ksd-search-button></button>\n * </div>\n */\n@Component({\n  selector: 'ksd-search',\n  template: `\n    <ng-content select=\"[ksd-search-input]\" />\n    <ng-content select=\"[ksd-search-clear]\" />\n    <ng-content select=\"[ksd-search-button]\" />\n  `,\n  host: {\n    class: 'ds-search',\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 Search {\n  private readonly input = contentChild(SearchInput)\n\n  constructor() {\n    afterNextRender(() => {\n      if (!this.input()) {\n        logIfDevMode({\n          component: 'Search',\n          message:\n            'Missing required elements: ksd-search-input must be provided as child. Check imports and markup.',\n        })\n      }\n    })\n  }\n}\n","import { Directive, input } from '@angular/core'\n\n/**\n * Search button\n *\n * Used within Search to provide a submit button.\n *\n * @param {('primary' | 'secondary')} [variant] - Specify which button variant to use\n * @param {string} [aria-label] - Aria label for the button\n *\n */\n@Directive({\n  // eslint-disable-next-line @angular-eslint/directive-selector\n  selector: 'button[ksd-search-button]',\n  standalone: true,\n  host: {\n    class: 'ds-button',\n    type: 'submit',\n    '[attr.aria-label]': 'this.ariaLabel()',\n    '[attr.data-variant]': 'this.variant()',\n  },\n})\nexport class SearchButton {\n  /**\n   * Specify which button variant to use\n   *\n   * @default 'primary'\n   */\n  readonly variant = input<'primary' | 'secondary'>('primary')\n\n  /**\n   * Aria label for the button\n   */\n  readonly ariaLabel = input('', { alias: 'aria-label' })\n}\n","import { Directive, input, output } from '@angular/core'\n\n/**\n * Search clear button\n *\n * Used within Search to provide a clear button.\n *\n * @param {string} [aria-label] - Aria label for the button.\n *\n * @event clearInput - Emitted when the clear button is clicked.\n * Use this to notify controlled forms that the input should be cleared.\n *\n */\n@Directive({\n  // eslint-disable-next-line @angular-eslint/directive-selector\n  selector: 'button[ksd-search-clear]',\n  standalone: true,\n  host: {\n    class: 'ds-button',\n    type: 'reset',\n    '[attr.data-variant]': \"'tertiary'\",\n    '[attr.aria-label]': 'this.ariaLabel()',\n    '(click)': 'handleClear($event)',\n  },\n})\nexport class SearchClear {\n  /**\n   * Aria label for the button\n   * @default 'Tøm'\n   */\n  readonly ariaLabel = input('Tøm', { alias: 'aria-label' })\n\n  /**\n   * Output to notify controlled forms that input should be cleared\n   */\n  clearInput = output<void>()\n\n  handleClear(e: Event): void {\n    const target = e.target as HTMLButtonElement\n    let inputElement: HTMLElement | null | undefined = null\n\n    if (target instanceof HTMLElement) {\n      inputElement = target.closest('.ds-search')?.querySelector('input')\n    }\n\n    if (!inputElement) throw new Error('Input is missing')\n\n    if (!(inputElement instanceof HTMLInputElement)) {\n      throw new Error('Input is not an input element')\n    }\n\n    e.preventDefault()\n    inputElement.value = ''\n    this.clearInput.emit()\n    inputElement.focus()\n  }\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-spinner.mjs

@@ -1,36 +1,31 @@
 import * as i0 from '@angular/core';
 import { input, booleanAttribute, Component } from '@angular/core';
+import * as i1 from '@ks-digital/designsystem-angular/__internals';
+import { HostColor } from '@ks-digital/designsystem-angular/__internals';
 
 /* eslint-disable @angular-eslint/no-input-rename */
 class Spinner {
     /**
      * Aria-label for the spinner
      */
-    ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel", alias: 'aria-label' }] : [{ alias: 'aria-label' }]));
+    ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : {}), alias: 'aria-label' });
     /**
-     * Aria-label for the spinner
-     */
-    dataSize = input(undefined, ...(ngDevMode ? [{ debugName: "dataSize", alias: 'data-size' }] : [{ alias: 'data-size' }]));
-    /**
-     * Aria-label for the spinner
+     * Aria-hidden for the spinner
      */
-    dataColor = input(undefined, ...(ngDevMode ? [{ debugName: "dataColor", alias: 'data-color' }] : [{ alias: 'data-color' }]));
+    ariaHidden = input(undefined, { ...(ngDevMode ? { debugName: "ariaHidden" } : {}), transform: booleanAttribute,
+        alias: 'aria-hidden' });
     /**
-     * Aria-hidden for the spinner
+     * Changes size for descendant Designsystemet components. Select from predefined sizes.
+     * @attribute data-size
      */
-    ariaHidden = input(undefined, ...(ngDevMode ? [{ debugName: "ariaHidden", transform: booleanAttribute,
-            alias: 'aria-hidden' }] : [{
-            transform: booleanAttribute,
-            alias: 'aria-hidden',
-        }]));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Spinner, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: Spinner, isStandalone: true, selector: "ksd-spinner", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, dataSize: { classPropertyName: "dataSize", publicName: "data-size", isSignal: true, isRequired: false, transformFunction: null }, dataColor: { classPropertyName: "dataColor", publicName: "data-color", isSignal: true, isRequired: false, transformFunction: null }, ariaHidden: { classPropertyName: "ariaHidden", publicName: "aria-hidden", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    dataSize = input(undefined, { ...(ngDevMode ? { debugName: "dataSize" } : {}), alias: 'data-size' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Spinner, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: Spinner, isStandalone: true, selector: "ksd-spinner", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaHidden: { classPropertyName: "ariaHidden", publicName: "aria-hidden", isSignal: true, isRequired: false, transformFunction: null }, dataSize: { classPropertyName: "dataSize", publicName: "data-size", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1.HostColor, inputs: ["data-color", "data-color"] }], ngImport: i0, template: `
     <svg
       class="ds-spinner"
       role="img"
       viewBox="0 0 50 50"
       [attr.data-size]="dataSize()"
-      [attr.data-color]="dataColor()"
     >
       <circle
         class="ds-spinner__background"
@@ -51,7 +46,7 @@ class Spinner {
     </svg>
   `, isInline: true, styles: [":host{display:contents}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Spinner, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Spinner, decorators: [{
             type: Component,
             args: [{ selector: 'ksd-spinner', template: `
     <svg
@@ -59,7 +54,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
       role="img"
       viewBox="0 0 50 50"
       [attr.data-size]="dataSize()"
-      [attr.data-color]="dataColor()"
     >
       <circle
         class="ds-spinner__background"
@@ -78,8 +72,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
         stroke-width="5"
       />
     </svg>
-  `, styles: [":host{display:contents}\n"] }]
-        }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], dataSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "data-size", required: false }] }], dataColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "data-color", required: false }] }], ariaHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-hidden", required: false }] }] } });
+  `, hostDirectives: [
+                        {
+                            directive: HostColor,
+                            inputs: ['data-color'],
+                        },
+                    ], styles: [":host{display:contents}\n"] }]
+        }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-hidden", required: false }] }], dataSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "data-size", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

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

@@ -1 +1 @@
-{"version":3,"file":"ks-digital-designsystem-angular-spinner.mjs","sources":["../../../../packages/angular/spinner/src/spinner.ts","../../../../packages/angular/spinner/src/ks-digital-designsystem-angular-spinner.ts"],"sourcesContent":["/* eslint-disable @angular-eslint/no-input-rename */\nimport { booleanAttribute, Component, input } from '@angular/core'\nimport { Size } from '@ks-digital/designsystem-angular/__internals'\n\n@Component({\n  selector: 'ksd-spinner',\n  styles: `\n    :host {\n      display: contents;\n    }\n  `,\n  template: `\n    <svg\n      class=\"ds-spinner\"\n      role=\"img\"\n      viewBox=\"0 0 50 50\"\n      [attr.data-size]=\"dataSize()\"\n      [attr.data-color]=\"dataColor()\"\n    >\n      <circle\n        class=\"ds-spinner__background\"\n        cx=\"25\"\n        cy=\"25\"\n        r=\"20\"\n        fill=\"none\"\n        stroke-width=\"5\"\n      />\n      <circle\n        class=\"ds-spinner__circle\"\n        cx=\"25\"\n        cy=\"25\"\n        r=\"20\"\n        fill=\"none\"\n        stroke-width=\"5\"\n      />\n    </svg>\n  `,\n})\nexport class Spinner {\n  /**\n   * Aria-label for the spinner\n   */\n  readonly ariaLabel = input<string>(undefined, { alias: 'aria-label' })\n\n  /**\n   * Aria-label for the spinner\n   */\n  readonly dataSize = input<Size>(undefined, { alias: 'data-size' })\n\n  /**\n   * Aria-label for the spinner\n   */\n  readonly dataColor = input<Size>(undefined, { alias: 'data-color' })\n\n  /**\n   * Aria-hidden for the spinner\n   */\n  readonly ariaHidden = input(undefined, {\n    transform: booleanAttribute,\n    alias: 'aria-hidden',\n  })\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAAA;MAsCa,OAAO,CAAA;AAClB;;AAEG;AACM,IAAA,SAAS,GAAG,KAAK,CAAS,SAAS,6CAAI,KAAK,EAAE,YAAY,EAAA,CAAA,GAAA,CAArB,EAAE,KAAK,EAAE,YAAY,EAAE,GAAC;AAEtE;;AAEG;AACM,IAAA,QAAQ,GAAG,KAAK,CAAO,SAAS,4CAAI,KAAK,EAAE,WAAW,EAAA,CAAA,GAAA,CAApB,EAAE,KAAK,EAAE,WAAW,EAAE,GAAC;AAElE;;AAEG;AACM,IAAA,SAAS,GAAG,KAAK,CAAO,SAAS,6CAAI,KAAK,EAAE,YAAY,EAAA,CAAA,GAAA,CAArB,EAAE,KAAK,EAAE,YAAY,EAAE,GAAC;AAEpE;;AAEG;AACM,IAAA,UAAU,GAAG,KAAK,CAAC,SAAS,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,YAAA,EACnC,SAAS,EAAE,gBAAgB;YAC3B,KAAK,EAAE,aAAa,EAAA,CAAA,GAAA,CAFiB;AACrC,YAAA,SAAS,EAAE,gBAAgB;AAC3B,YAAA,KAAK,EAAE,aAAa;AACrB,SAAA,CAAA,CAAA,CAAC;uGAtBS,OAAO,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAP,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,OAAO,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,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,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,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EA3BR;;;;;;;;;;;;;;;;;;;;;;;;;AAyBT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,2BAAA,CAAA,EAAA,CAAA;;2FAEU,OAAO,EAAA,UAAA,EAAA,CAAA;kBAlCnB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,EAAA,QAAA,EAMb;;;;;;;;;;;;;;;;;;;;;;;;;AAyBT,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,2BAAA,CAAA,EAAA;;;ACpCH;;AAEG;;;;"}
+{"version":3,"file":"ks-digital-designsystem-angular-spinner.mjs","sources":["../../../../packages/angular/spinner/src/spinner.ts","../../../../packages/angular/spinner/src/ks-digital-designsystem-angular-spinner.ts"],"sourcesContent":["/* eslint-disable @angular-eslint/no-input-rename */\nimport { booleanAttribute, Component, input } from '@angular/core'\nimport { HostColor } from '@ks-digital/designsystem-angular/__internals'\nimport { SpinnerSize } from './spinner-sizes'\n\n@Component({\n  selector: 'ksd-spinner',\n  styles: `\n    :host {\n      display: contents;\n    }\n  `,\n  template: `\n    <svg\n      class=\"ds-spinner\"\n      role=\"img\"\n      viewBox=\"0 0 50 50\"\n      [attr.data-size]=\"dataSize()\"\n    >\n      <circle\n        class=\"ds-spinner__background\"\n        cx=\"25\"\n        cy=\"25\"\n        r=\"20\"\n        fill=\"none\"\n        stroke-width=\"5\"\n      />\n      <circle\n        class=\"ds-spinner__circle\"\n        cx=\"25\"\n        cy=\"25\"\n        r=\"20\"\n        fill=\"none\"\n        stroke-width=\"5\"\n      />\n    </svg>\n  `,\n  hostDirectives: [\n    {\n      directive: HostColor,\n      inputs: ['data-color'],\n    },\n  ],\n})\nexport class Spinner {\n  /**\n   * Aria-label for the spinner\n   */\n  readonly ariaLabel = input<string>(undefined, { alias: 'aria-label' })\n\n  /**\n   * Aria-hidden for the spinner\n   */\n  readonly ariaHidden = input(undefined, {\n    transform: booleanAttribute,\n    alias: 'aria-hidden',\n  })\n\n  /**\n   * Changes size for descendant Designsystemet components. Select from predefined sizes.\n   * @attribute data-size\n   */\n  readonly dataSize = input<SpinnerSize>(undefined, {\n    alias: 'data-size',\n  })\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAAA;MA4Ca,OAAO,CAAA;AAClB;;AAEG;IACM,SAAS,GAAG,KAAK,CAAS,SAAS,sDAAI,KAAK,EAAE,YAAY,EAAA,CAAG;AAEtE;;AAEG;AACM,IAAA,UAAU,GAAG,KAAK,CAAC,SAAS,EAAA,EAAA,IAAA,SAAA,GAAA,EAAA,SAAA,EAAA,YAAA,EAAA,GAAA,EAAA,CAAA,EACnC,SAAS,EAAE,gBAAgB;QAC3B,KAAK,EAAE,aAAa,EAAA,CACpB;AAEF;;;AAGG;IACM,QAAQ,GAAG,KAAK,CAAc,SAAS,qDAC9C,KAAK,EAAE,WAAW,EAAA,CAClB;uGApBS,OAAO,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAP,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,OAAO,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,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,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,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,EAAA,cAAA,EAAA,CAAA,EAAA,SAAA,EAAA,EAAA,CAAA,SAAA,EAAA,MAAA,EAAA,CAAA,YAAA,EAAA,YAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAhCR;;;;;;;;;;;;;;;;;;;;;;;;AAwBT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,2BAAA,CAAA,EAAA,CAAA;;2FAQU,OAAO,EAAA,UAAA,EAAA,CAAA;kBAvCnB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,EAAA,QAAA,EAMb;;;;;;;;;;;;;;;;;;;;;;;;GAwBT,EAAA,cAAA,EACe;AACd,wBAAA;AACE,4BAAA,SAAS,EAAE,SAAS;4BACpB,MAAM,EAAE,CAAC,YAAY,CAAC;AACvB,yBAAA;AACF,qBAAA,EAAA,MAAA,EAAA,CAAA,2BAAA,CAAA,EAAA;;;AC1CH;;AAEG;;;;"}

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

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { input, inject, ElementRef, signal, computed, ChangeDetectionStrategy, Component, model, contentChildren, effect } from '@angular/core';
 import * as i1 from '@ks-digital/designsystem-angular/__internals';
-import { randomId, CommonInputs } from '@ks-digital/designsystem-angular/__internals';
+import { randomId, HostSize, HostColor } from '@ks-digital/designsystem-angular/__internals';
 
 class TabsTab {
     /**
@@ -15,10 +15,10 @@ class TabsTab {
     tabs = inject(Tabs);
     isFocused = computed(() => this.tabs.focusedValue() === this.value(), ...(ngDevMode ? [{ debugName: "isFocused" }] : []));
     isSelected = computed(() => this.tabs.value() === this.value(), ...(ngDevMode ? [{ debugName: "isSelected" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: TabsTab, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: TabsTab, isStandalone: true, selector: "button[ksd-tabs-tab]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tab" }, listeners: { "click": "tabs.changeTab(value())", "keydown": "tabs.onKeyDown($event)" }, properties: { "id": "buttonId()", "attr.aria-controls": "ariaControls()", "attr.aria-selected": "isSelected()", "attr.tab-index": "isFocused() ? 0 : -1" }, classAttribute: "ds-button" }, hostDirectives: [{ directive: i1.CommonInputs, inputs: ["data-size", "data-size", "data-color", "data-color"] }], ngImport: i0, template: ` <ng-content /> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TabsTab, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: TabsTab, isStandalone: true, selector: "button[ksd-tabs-tab]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tab" }, listeners: { "click": "tabs.changeTab(value())", "keydown": "tabs.onKeyDown($event)" }, properties: { "id": "buttonId()", "attr.aria-controls": "ariaControls()", "attr.aria-selected": "isSelected()", "attr.tab-index": "isFocused() ? 0 : -1" }, classAttribute: "ds-button" }, hostDirectives: [{ directive: i1.HostSize, inputs: ["data-size", "data-size"] }, { directive: i1.HostColor, inputs: ["data-color", "data-color"] }], ngImport: i0, template: ` <ng-content /> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: TabsTab, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TabsTab, decorators: [{
             type: Component,
             args: [{
                     selector: `button[ksd-tabs-tab]`,
@@ -37,8 +37,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                     imports: [],
                     hostDirectives: [
                         {
-                            directive: CommonInputs,
-                            inputs: ['data-size', 'data-color'],
+                            directive: HostSize,
+                            inputs: ['data-size'],
+                        },
+                        {
+                            directive: HostColor,
+                            inputs: ['data-color'],
                         },
                     ],
                 }]
@@ -48,7 +52,7 @@ class Tabs {
     defaultValue = input(...(ngDevMode ? [undefined, { debugName: "defaultValue" }] : []));
     value = model('', ...(ngDevMode ? [{ debugName: "value" }] : []));
     focusedValue = computed(() => this.tabs()[this.focusedIndex()]?.value(), ...(ngDevMode ? [{ debugName: "focusedValue" }] : []));
-    tabs = contentChildren(TabsTab, ...(ngDevMode ? [{ debugName: "tabs", descendants: true }] : [{ descendants: true }]));
+    tabs = contentChildren(TabsTab, { ...(ngDevMode ? { debugName: "tabs" } : {}), descendants: true });
     focusedIndex = signal(0, ...(ngDevMode ? [{ debugName: "focusedIndex" }] : []));
     constructor() {
         effect(() => {
@@ -101,15 +105,15 @@ class Tabs {
         this.focusedIndex.set(index);
         this.tabs()[index]?.elementRef.nativeElement.focus();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Tabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.9", type: Tabs, isStandalone: true, selector: "ksd-tabs", inputs: { defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, queries: [{ propertyName: "tabs", predicate: TabsTab, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.CommonInputs, inputs: ["data-size", "data-size", "data-color", "data-color"] }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Tabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.6", type: Tabs, isStandalone: true, selector: "ksd-tabs", inputs: { defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, queries: [{ propertyName: "tabs", predicate: TabsTab, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.HostSize, inputs: ["data-size", "data-size"] }, { directive: i1.HostColor, inputs: ["data-color", "data-color"] }], ngImport: i0, template: `
     <div class="ds-tabs">
       <ng-content select="ksd-tabs-list" />
       <ng-content select="ksd-tabs-panel" />
     </div>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Tabs, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Tabs, decorators: [{
             type: Component,
             args: [{
                     selector: `ksd-tabs`,
@@ -122,18 +126,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     hostDirectives: [
                         {
-                            directive: CommonInputs,
-                            inputs: ['data-size', 'data-color'],
+                            directive: HostSize,
+                            inputs: ['data-size'],
+                        },
+                        {
+                            directive: HostColor,
+                            inputs: ['data-color'],
                         },
                     ],
                 }]
         }], ctorParameters: () => [], propDecorators: { defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TabsTab), { ...{ descendants: true }, isSignal: true }] }] } });
 
 class TabsList {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: TabsList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: TabsList, isStandalone: true, selector: "ksd-tabs-list", host: { attributes: { "role": "tablist" } }, ngImport: i0, template: `<ng-content select="button[ksd-tabs-tab]" />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TabsList, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: TabsList, isStandalone: true, selector: "ksd-tabs-list", host: { attributes: { "role": "tablist" } }, ngImport: i0, template: `<ng-content select="button[ksd-tabs-tab]" />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: TabsList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TabsList, decorators: [{
             type: Component,
             args: [{
                     selector: `ksd-tabs-list`,
@@ -172,10 +180,10 @@ class TabsPanel {
     ngAfterContentInit() {
         this.hasTabbableElement.set(this.elementRef.nativeElement.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: TabsPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: TabsPanel, isStandalone: true, selector: "ksd-tabs-panel", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tabpanel" }, properties: { "id": "panelId()", "hidden": "!isSelected()", "attr.aria-labelledby": "labelledBy()", "tabIndex": "tabIndex()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TabsPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: TabsPanel, isStandalone: true, selector: "ksd-tabs-panel", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tabpanel" }, properties: { "id": "panelId()", "hidden": "!isSelected()", "attr.aria-labelledby": "labelledBy()", "tabIndex": "tabIndex()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: TabsPanel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TabsPanel, decorators: [{
             type: Component,
             args: [{
                     selector: `ksd-tabs-panel`,