@kirbydesign/designsystem 11.11.2-dev-5e0acd6 → 11.11.2-dev-f528d7a

package/fesm2022/kirbydesign-designsystem-checkbox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-designsystem-checkbox.mjs","sources":["../../checkbox/src/checkbox.component.ts","../../checkbox/src/checkbox.component.html","../../checkbox/src/kirbydesign-designsystem-checkbox.ts"],"sourcesContent":["import {\n  AfterContentInit,\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ElementRef,\n  EventEmitter,\n  forwardRef,\n  HostBinding,\n  Input,\n  OnInit,\n  Output,\n  ViewChild,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport { IonicElementPartHelper } from '@kirbydesign/designsystem/helpers';\nimport { IonCheckbox } from '@ionic/angular/standalone';\nimport { inheritAriaLabelText, setAccessibleLabel } from '@kirbydesign/designsystem/shared';\n\n@Component({\n  imports: [IonCheckbox],\n  selector: 'kirby-checkbox',\n  templateUrl: './checkbox.component.html',\n  styleUrls: ['./checkbox.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    IonicElementPartHelper,\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => CheckboxComponent),\n      multi: true,\n    },\n  ],\n})\nexport class CheckboxComponent\n  implements AfterViewInit, ControlValueAccessor, OnInit, AfterContentInit\n{\n  @ViewChild(IonCheckbox, { read: ElementRef, static: true })\n  private ionCheckboxElement?: ElementRef<HTMLIonCheckboxElement>;\n\n  @Input() checked: boolean = false;\n  @Input() indeterminate: boolean = false;\n\n  private _attentionLevel: '1' | '2' = '2';\n  /**\n   * @deprecated Attention levels 1 and 2 now look the same, so this input no longer has any effect.\n   * This input will be removed in a future major version.\n   */\n  @Input() set attentionLevel(value: '1' | '2') {\n    console.warn(\n      `[Kirby Checkbox] The 'attentionLevel' input is deprecated and no longer has any effect.\n        Attention levels 1 and 2 now look the same. This input will be removed in a future major version.`\n    );\n    this._attentionLevel = value;\n  }\n  get attentionLevel(): '1' | '2' {\n    return this._attentionLevel;\n  }\n\n  @Input()\n  text: string;\n\n  @HostBinding('class')\n  @Input()\n  size: 'xs' | 'sm' | 'md' = 'md';\n\n  @HostBinding('class.error')\n  @Input()\n  hasError: boolean = false;\n\n  @Input() disabled = false;\n  @HostBinding('attr.disabled')\n  get _isDisabled() {\n    return this.disabled ? 'disabled' : null;\n  }\n\n  @HostBinding('class.attention-level1') get isAttentionLevel1() {\n    return this.attentionLevel === '1';\n  }\n  @HostBinding('class.attention-level2') get isAttentionLevel2() {\n    return this.attentionLevel === '2';\n  }\n\n  @HostBinding('class.has-hidden-label') _labelText: string;\n\n  @Output() checkedChange = new EventEmitter<boolean>();\n\n  _justify: 'start' | 'end' | 'space-between' = 'start';\n  _labelPlacement: 'end' | 'fixed' | 'stacked' | 'start' = 'end';\n  _hasSlottedContent: boolean;\n\n  constructor(\n    private element: ElementRef<HTMLElement>,\n    private ionicElementPartHelper: IonicElementPartHelper,\n    private cdr: ChangeDetectorRef\n  ) {}\n\n  ngOnInit(): void {\n    /**\n     * We cannot query ion-checkbox for slotted content at this point as the slot has not been rendered.\n     * But we need to know if content is slotted to set justify and labelPlacement BEFORE ion-checkbox is rendered.\n     * So it has to be done by querying an additional wrapper around the default content slot like this.\n     */\n    this._hasSlottedContent = this.element.nativeElement\n      .querySelector('.default-content')\n      .hasChildNodes();\n\n    const slot = this.element.nativeElement.getAttribute('slot');\n    if (slot === 'end' && this._hasSlottedContent) {\n      this._justify = 'space-between';\n      this._labelPlacement = 'start';\n    }\n  }\n\n  ngAfterViewInit(): void {\n    this.ionicElementPartHelper.setPart('label', this.ionCheckboxElement, '.checkbox-wrapper');\n    this.ionicElementPartHelper.setPart(\n      'label-text-wrapper',\n      this.ionCheckboxElement,\n      '.label-text-wrapper'\n    );\n    this.ionicElementPartHelper.setPart(\n      'native-wrapper',\n      this.ionCheckboxElement,\n      '.native-wrapper'\n    );\n  }\n\n  ngAfterContentInit(): void {\n    this._labelText = inheritAriaLabelText(this.element.nativeElement);\n\n    if (!this.text && !this._labelText && !this._hasSlottedContent) {\n      // if no label has been set try to find a label in an item and use its text content\n      this._labelText = setAccessibleLabel(this.element.nativeElement);\n    }\n  }\n\n  onChecked(checked: boolean): void {\n    this.checked = checked;\n    this._onChange(this.checked);\n    this.checkedChange.emit(this.checked);\n  }\n\n  onBlur() {\n    this._onTouched();\n  }\n\n  // Initialize default ControlValueAccessor callback functions (noop)\n  // eslint-disable-next-line no-empty-function\n  private _onChange: (value: boolean) => void = () => {};\n  // eslint-disable-next-line no-empty-function\n  private _onTouched = () => {};\n\n  /**\n   * Sets the checkbox's value. Part of the ControlValueAccessor interface\n   * required to integrate with Angular's core forms API.\n   *\n   * @param value New value to be written to the model.\n   */\n  writeValue(value: boolean): void {\n    this.checked = value;\n    this.cdr.markForCheck();\n  }\n\n  /**\n   * Saves a callback function to be invoked when the checkbox's value\n   * changes from user input. Part of the ControlValueAccessor interface\n   * required to integrate with Angular's core forms API.\n   *\n   * @param fn Callback to be triggered when the value changes.\n   */\n  registerOnChange(fn: any): void {\n    this._onChange = fn;\n  }\n\n  /**\n   * Saves a callback function to be invoked when the checkbox is blurred\n   * by the user. Part of the ControlValueAccessor interface required\n   * to integrate with Angular's core forms API.\n   *\n   * @param fn Callback to be triggered when the component has been touched.\n   */\n  registerOnTouched(fn: any): void {\n    this._onTouched = fn;\n  }\n\n  /**\n   * Disables the checkbox. Part of the ControlValueAccessor interface required\n   * to integrate with Angular's core forms API.\n   *\n   * @param isDisabled Sets whether the component is disabled.\n   */\n  setDisabledState?(isDisabled: boolean): void {\n    this.disabled = isDisabled;\n    this.cdr.markForCheck();\n  }\n}\n","<ion-checkbox\n  mode=\"md\"\n  [checked]=\"checked\"\n  [disabled]=\"disabled\"\n  [indeterminate]=\"indeterminate\"\n  (ionChange)=\"onChecked($event.detail.checked)\"\n  (ionBlur)=\"onBlur()\"\n  [labelPlacement]=\"_labelPlacement\"\n  [justify]=\"_justify\"\n>\n  @if (_labelText) {\n    <span class=\"hidden-label\">{{ _labelText }}</span>\n  }\n  @if (text) {\n    <span [attr.aria-hidden]=\"_labelText ? true : undefined\">{{ text }}</span>\n  }\n  <span class=\"default-content\" [attr.aria-hidden]=\"_labelText ? true : undefined\">\n    <ng-content></ng-content>\n  </span>\n</ion-checkbox>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"kirbydesign-designsystem-checkbox.mjs","sources":["../../checkbox/src/checkbox.component.ts","../../checkbox/src/checkbox.component.html","../../checkbox/src/kirbydesign-designsystem-checkbox.ts"],"sourcesContent":["import {\n  AfterContentInit,\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ElementRef,\n  EventEmitter,\n  forwardRef,\n  HostBinding,\n  Input,\n  OnInit,\n  Output,\n  ViewChild,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport { IonicElementPartHelper } from '@kirbydesign/designsystem/helpers';\nimport { IonCheckbox } from '@ionic/angular';\nimport { inheritAriaLabelText, setAccessibleLabel } from '@kirbydesign/designsystem/shared';\n\n@Component({\n  imports: [IonCheckbox],\n  selector: 'kirby-checkbox',\n  templateUrl: './checkbox.component.html',\n  styleUrls: ['./checkbox.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    IonicElementPartHelper,\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => CheckboxComponent),\n      multi: true,\n    },\n  ],\n})\nexport class CheckboxComponent\n  implements AfterViewInit, ControlValueAccessor, OnInit, AfterContentInit\n{\n  @ViewChild(IonCheckbox, { read: ElementRef, static: true })\n  private ionCheckboxElement?: ElementRef<HTMLIonCheckboxElement>;\n\n  @Input() checked: boolean = false;\n  @Input() indeterminate: boolean = false;\n  @Input() attentionLevel: '1' | '2' = '2';\n\n  @Input()\n  text: string;\n\n  @HostBinding('class')\n  @Input()\n  size: 'xs' | 'sm' | 'md' = 'md';\n\n  @HostBinding('class.error')\n  @Input()\n  hasError: boolean = false;\n\n  @Input() disabled = false;\n  @HostBinding('attr.disabled')\n  get _isDisabled() {\n    return this.disabled ? 'disabled' : null;\n  }\n\n  @HostBinding('class.attention-level1') get isAttentionLevel1() {\n    return this.attentionLevel === '1';\n  }\n  @HostBinding('class.attention-level2') get isAttentionLevel2() {\n    return this.attentionLevel === '2';\n  }\n\n  @HostBinding('class.has-hidden-label') _labelText: string;\n\n  @Output() checkedChange = new EventEmitter<boolean>();\n\n  _justify: 'start' | 'end' | 'space-between' = 'start';\n  _labelPlacement: 'end' | 'fixed' | 'stacked' | 'start' = 'end';\n  _hasSlottedContent: boolean;\n\n  constructor(\n    private element: ElementRef<HTMLElement>,\n    private ionicElementPartHelper: IonicElementPartHelper,\n    private cdr: ChangeDetectorRef\n  ) {}\n\n  ngOnInit(): void {\n    /**\n     * We cannot query ion-checkbox for slotted content at this point as the slot has not been rendered.\n     * But we need to know if content is slotted to set justify and labelPlacement BEFORE ion-checkbox is rendered.\n     * So it has to be done by querying an additional wrapper around the default content slot like this.\n     */\n    this._hasSlottedContent = this.element.nativeElement\n      .querySelector('.default-content')\n      .hasChildNodes();\n\n    const slot = this.element.nativeElement.getAttribute('slot');\n    if (slot === 'end' && this._hasSlottedContent) {\n      this._justify = 'space-between';\n      this._labelPlacement = 'start';\n    }\n  }\n\n  ngAfterViewInit(): void {\n    this.ionicElementPartHelper.setPart('label', this.ionCheckboxElement, '.checkbox-wrapper');\n    this.ionicElementPartHelper.setPart(\n      'label-text-wrapper',\n      this.ionCheckboxElement,\n      '.label-text-wrapper'\n    );\n    this.ionicElementPartHelper.setPart(\n      'native-wrapper',\n      this.ionCheckboxElement,\n      '.native-wrapper'\n    );\n  }\n\n  ngAfterContentInit(): void {\n    this._labelText = inheritAriaLabelText(this.element.nativeElement);\n\n    if (!this.text && !this._labelText && !this._hasSlottedContent) {\n      // if no label has been set try to find a label in an item and use its text content\n      this._labelText = setAccessibleLabel(this.element.nativeElement);\n    }\n  }\n\n  onChecked(checked: boolean): void {\n    this.checked = checked;\n    this._onChange(this.checked);\n    this.checkedChange.emit(this.checked);\n  }\n\n  onBlur() {\n    this._onTouched();\n  }\n\n  // Initialize default ControlValueAccessor callback functions (noop)\n  // eslint-disable-next-line no-empty-function\n  private _onChange: (value: boolean) => void = () => {};\n  // eslint-disable-next-line no-empty-function\n  private _onTouched = () => {};\n\n  /**\n   * Sets the checkbox's value. Part of the ControlValueAccessor interface\n   * required to integrate with Angular's core forms API.\n   *\n   * @param value New value to be written to the model.\n   */\n  writeValue(value: boolean): void {\n    this.checked = value;\n    this.cdr.markForCheck();\n  }\n\n  /**\n   * Saves a callback function to be invoked when the checkbox's value\n   * changes from user input. Part of the ControlValueAccessor interface\n   * required to integrate with Angular's core forms API.\n   *\n   * @param fn Callback to be triggered when the value changes.\n   */\n  registerOnChange(fn: any): void {\n    this._onChange = fn;\n  }\n\n  /**\n   * Saves a callback function to be invoked when the checkbox is blurred\n   * by the user. Part of the ControlValueAccessor interface required\n   * to integrate with Angular's core forms API.\n   *\n   * @param fn Callback to be triggered when the component has been touched.\n   */\n  registerOnTouched(fn: any): void {\n    this._onTouched = fn;\n  }\n\n  /**\n   * Disables the checkbox. Part of the ControlValueAccessor interface required\n   * to integrate with Angular's core forms API.\n   *\n   * @param isDisabled Sets whether the component is disabled.\n   */\n  setDisabledState?(isDisabled: boolean): void {\n    this.disabled = isDisabled;\n    this.cdr.markForCheck();\n  }\n}\n","<ion-checkbox\n  mode=\"md\"\n  [checked]=\"checked\"\n  [disabled]=\"disabled\"\n  [indeterminate]=\"indeterminate\"\n  (ionChange)=\"onChecked($event.detail.checked)\"\n  (ionBlur)=\"onBlur()\"\n  [labelPlacement]=\"_labelPlacement\"\n  [justify]=\"_justify\"\n>\n  @if (_labelText) {\n    <span class=\"hidden-label\">{{ _labelText }}</span>\n  }\n  @if (text) {\n    <span [attr.aria-hidden]=\"_labelText ? true : undefined\">{{ text }}</span>\n  }\n  <span class=\"default-content\" [attr.aria-hidden]=\"_labelText ? true : undefined\">\n    <ng-content></ng-content>\n  </span>\n</ion-checkbox>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2022/kirbydesign-designsystem-config.mjs

@@ -1,5 +1,5 @@
 import { InjectionToken, makeEnvironmentProviders, provideAppInitializer, inject } from '@angular/core';
-import { provideIonicAngular, isPlatform, AnimationController, PopoverController, ModalController as ModalController$1 } from '@ionic/angular/standalone';
+import { provideIonicAngular, isPlatform, AnimationController, PopoverController, ModalController as ModalController$1 } from '@ionic/angular';
 import { ConfigToken, AngularDelegate, provideComponentInputBinding } from '@ionic/angular/common';
 import { GestureController } from '@kirbydesign/designsystem/gesture';
 import { LoadingOverlayService } from '@kirbydesign/designsystem/loading-overlay';

package/fesm2022/kirbydesign-designsystem-config.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-designsystem-config.mjs","sources":["../../config/src/provide-kirby.ts","../../config/src/kirbydesign-designsystem-config.ts"],"sourcesContent":["import {\n  EnvironmentProviders,\n  inject,\n  InjectionToken,\n  makeEnvironmentProviders,\n  provideAppInitializer,\n  Provider,\n} from '@angular/core';\nimport { AnimationController, isPlatform, provideIonicAngular } from '@ionic/angular/standalone';\nimport { provideComponentInputBinding } from '@ionic/angular/common';\nimport {\n  ModalController as IonModalController,\n  PopoverController as IonPopoverController,\n} from '@ionic/angular/standalone';\nimport {\n  AngularDelegate as IonAngularDelegate,\n  ConfigToken as IonConfigToken,\n} from '@ionic/angular/common';\nimport type { IonicConfig } from '@ionic/core';\nimport { GestureController } from '@kirbydesign/designsystem/gesture';\nimport { LoadingOverlayService } from '@kirbydesign/designsystem/loading-overlay';\nimport {\n  ActionSheetHelper,\n  AlertHelper,\n  CanDismissHelper,\n  ModalController,\n  ModalHelper,\n} from '@kirbydesign/designsystem/modal';\nimport {\n  ResizeObserverFactory,\n  ResizeObserverService,\n  TextResizeObserverService,\n} from '@kirbydesign/designsystem/shared';\nimport { ToastController, ToastHelper } from '@kirbydesign/designsystem/toast';\n\n/**\n * Configuration object for global configuration of Kirby.\n */\nexport interface KirbyConfig {\n  moduleRootRoutePath?: string;\n\n  /**\n   * Activate focus management for components rendered in a kirby-router-outlet.\n   * When a kirby-page enters the view, focus will be set to the pages primary heading (h1) inside the pages toolbar.\n   */\n  focusManager?: boolean;\n\n  /**\n   * Set the HTML documents title to match the title of any kirby-page entering the view.\n   */\n  setHtmlDocTitle?: boolean;\n}\n\n/**\n * Injection token for provided Kirby configuration.\n */\nexport const KIRBY_CONFIG = new InjectionToken<KirbyConfig>('KIRBY_CONFIG');\n\n/**\n *\n * @param features - Additional features to be provided to the Kirby environment:\n * @see {@link withGlobalSetup} for setting up global configuration.\n */\nexport function provideKirby(\n  ...features: Provider[] | EnvironmentProviders[]\n): EnvironmentProviders {\n  return makeEnvironmentProviders([\n    ModalController,\n    ActionSheetHelper,\n    ModalHelper,\n    AlertHelper,\n    ToastHelper,\n    ToastController,\n    LoadingOverlayService,\n    ResizeObserverFactory,\n    ResizeObserverService,\n    CanDismissHelper,\n    GestureController,\n    ...patchIonicProviders(),\n    features,\n  ]);\n}\n\n/**\n * Sets up global configuration when used with the provideKirby EnvironmentProvider function.\n * Should be called exactly once per application when bootstrapping, to set up Kirby in the browsers runtime.\n *\n * @param config - (Optional) Additional configuration via the `KirbyConfig` object.\n */\nexport function withGlobalSetup(config?: KirbyConfig): EnvironmentProviders {\n  setGlobalConfig(config);\n\n  const ionicConfig: IonicConfig = {\n    ...getBaseIonicConfig(),\n  };\n\n  if (config?.focusManager) {\n    ionicConfig.focusManagerPriority = ['heading'];\n  }\n\n  return makeEnvironmentProviders([\n    provideIonicAngular(ionicConfig),\n    provideAppInitializer(() => inject(TextResizeObserverService).initialize()),\n  ]);\n}\n\n/**\n * Retrieves the global Kirby configuration object from the window object.\n */\nexport function getGlobalConfig(): KirbyConfig | undefined {\n  return (window as any).__KIRBY_CONFIG__ as KirbyConfig | undefined;\n}\n\n/**\n * Private method to set the global Kirby configuration object on the window object.\n *\n * @param config - `KirbyConfig` object to configure Kirby globally.\n */\nfunction setGlobalConfig(config: KirbyConfig | undefined): void {\n  if (getGlobalConfig()) {\n    console.warn(\n      `Global Kirby configuration is already provided through withGlobalSetup() elsewhere.\nOverwriting the existing configuration is not recommended. Consider removing duplicate calls.`\n    );\n  }\n\n  (window as any).__KIRBY_CONFIG__ = config ?? {};\n}\n\n/**\n * Returns the base Ionic configuration object with common defaults.\n */\nfunction getBaseIonicConfig(): IonicConfig {\n  const shouldHaveNoopAnimation = !isPlatform('hybrid');\n  const navAnimationConfig: IonicConfig = shouldHaveNoopAnimation && {\n    navAnimation: () => new AnimationController().create(),\n  };\n\n  return {\n    mode: 'ios',\n    ...navAnimationConfig,\n  };\n}\n\n/**\n * Return same Ionic Angular providers as provideIonicAngular, but exclude the APP_INITIALIZER token.\n * https://github.com/ionic-team/ionic-framework/blob/v8.6.1/packages/angular/standalone/src/providers/ionic-angular.ts#L15\n * This is to ensure that we only initialize Ionic once in `withGlobalSetup`, where we use provideIonicAngular as intended,\n * but still allow other Angular contexts (e.g. Micro Frontends) to call provideKirby to get needed Kirby and Ionic config and providers in their context.\n */\nfunction patchIonicProviders(): Provider[] {\n  return [\n    {\n      provide: IonConfigToken,\n      useValue: { ...getBaseIonicConfig(), ...(window as any)?.Ionic?.config },\n    },\n    provideComponentInputBinding(),\n    IonAngularDelegate,\n    IonPopoverController,\n    IonModalController,\n  ];\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["IonConfigToken","IonAngularDelegate","IonPopoverController","IonModalController"],"mappings":";;;;;;;;;AAqDA;;AAEG;MACU,YAAY,GAAG,IAAI,cAAc,CAAc,cAAc;AAE1E;;;;AAIG;AACG,SAAU,YAAY,CAC1B,GAAG,QAA6C,EAAA;AAEhD,IAAA,OAAO,wBAAwB,CAAC;QAC9B,eAAe;QACf,iBAAiB;QACjB,WAAW;QACX,WAAW;QACX,WAAW;QACX,eAAe;QACf,qBAAqB;QACrB,qBAAqB;QACrB,qBAAqB;QACrB,gBAAgB;QAChB,iBAAiB;AACjB,QAAA,GAAG,mBAAmB,EAAE;QACxB,QAAQ;AACT,KAAA,CAAC;AACJ;AAEA;;;;;AAKG;AACG,SAAU,eAAe,CAAC,MAAoB,EAAA;IAClD,eAAe,CAAC,MAAM,CAAC;AAEvB,IAAA,MAAM,WAAW,GAAgB;AAC/B,QAAA,GAAG,kBAAkB,EAAE;KACxB;AAED,IAAA,IAAI,MAAM,EAAE,YAAY,EAAE;AACxB,QAAA,WAAW,CAAC,oBAAoB,GAAG,CAAC,SAAS,CAAC;IAChD;AAEA,IAAA,OAAO,wBAAwB,CAAC;QAC9B,mBAAmB,CAAC,WAAW,CAAC;QAChC,qBAAqB,CAAC,MAAM,MAAM,CAAC,yBAAyB,CAAC,CAAC,UAAU,EAAE,CAAC;AAC5E,KAAA,CAAC;AACJ;AAEA;;AAEG;SACa,eAAe,GAAA;IAC7B,OAAQ,MAAc,CAAC,gBAA2C;AACpE;AAEA;;;;AAIG;AACH,SAAS,eAAe,CAAC,MAA+B,EAAA;IACtD,IAAI,eAAe,EAAE,EAAE;QACrB,OAAO,CAAC,IAAI,CACV,CAAA;AACwF,6FAAA,CAAA,CACzF;IACH;AAEC,IAAA,MAAc,CAAC,gBAAgB,GAAG,MAAM,IAAI,EAAE;AACjD;AAEA;;AAEG;AACH,SAAS,kBAAkB,GAAA;AACzB,IAAA,MAAM,uBAAuB,GAAG,CAAC,UAAU,CAAC,QAAQ,CAAC;IACrD,MAAM,kBAAkB,GAAgB,uBAAuB,IAAI;QACjE,YAAY,EAAE,MAAM,IAAI,mBAAmB,EAAE,CAAC,MAAM,EAAE;KACvD;IAED,OAAO;AACL,QAAA,IAAI,EAAE,KAAK;AACX,QAAA,GAAG,kBAAkB;KACtB;AACH;AAEA;;;;;AAKG;AACH,SAAS,mBAAmB,GAAA;IAC1B,OAAO;AACL,QAAA;AACE,YAAA,OAAO,EAAEA,WAAc;AACvB,YAAA,QAAQ,EAAE,EAAE,GAAG,kBAAkB,EAAE,EAAE,GAAI,MAAc,EAAE,KAAK,EAAE,MAAM,EAAE;AACzE,SAAA;AACD,QAAA,4BAA4B,EAAE;QAC9BC,eAAkB;QAClBC,iBAAoB;QACpBC,iBAAkB;KACnB;AACH;;ACjKA;;AAEG;;;;"}
+{"version":3,"file":"kirbydesign-designsystem-config.mjs","sources":["../../config/src/provide-kirby.ts","../../config/src/kirbydesign-designsystem-config.ts"],"sourcesContent":["import {\n  EnvironmentProviders,\n  inject,\n  InjectionToken,\n  makeEnvironmentProviders,\n  provideAppInitializer,\n  Provider,\n} from '@angular/core';\nimport { AnimationController, isPlatform, provideIonicAngular } from '@ionic/angular';\nimport { provideComponentInputBinding } from '@ionic/angular/common';\nimport {\n  ModalController as IonModalController,\n  PopoverController as IonPopoverController,\n} from '@ionic/angular';\nimport {\n  AngularDelegate as IonAngularDelegate,\n  ConfigToken as IonConfigToken,\n} from '@ionic/angular/common';\nimport type { IonicConfig } from '@ionic/core';\nimport { GestureController } from '@kirbydesign/designsystem/gesture';\nimport { LoadingOverlayService } from '@kirbydesign/designsystem/loading-overlay';\nimport {\n  ActionSheetHelper,\n  AlertHelper,\n  CanDismissHelper,\n  ModalController,\n  ModalHelper,\n} from '@kirbydesign/designsystem/modal';\nimport {\n  ResizeObserverFactory,\n  ResizeObserverService,\n  TextResizeObserverService,\n} from '@kirbydesign/designsystem/shared';\nimport { ToastController, ToastHelper } from '@kirbydesign/designsystem/toast';\n\n/**\n * Configuration object for global configuration of Kirby.\n */\nexport interface KirbyConfig {\n  moduleRootRoutePath?: string;\n\n  /**\n   * Activate focus management for components rendered in a kirby-router-outlet.\n   * When a kirby-page enters the view, focus will be set to the pages primary heading (h1) inside the pages toolbar.\n   */\n  focusManager?: boolean;\n\n  /**\n   * Set the HTML documents title to match the title of any kirby-page entering the view.\n   */\n  setHtmlDocTitle?: boolean;\n}\n\n/**\n * Injection token for provided Kirby configuration.\n */\nexport const KIRBY_CONFIG = new InjectionToken<KirbyConfig>('KIRBY_CONFIG');\n\n/**\n *\n * @param features - Additional features to be provided to the Kirby environment:\n * @see {@link withGlobalSetup} for setting up global configuration.\n */\nexport function provideKirby(\n  ...features: Provider[] | EnvironmentProviders[]\n): EnvironmentProviders {\n  return makeEnvironmentProviders([\n    ModalController,\n    ActionSheetHelper,\n    ModalHelper,\n    AlertHelper,\n    ToastHelper,\n    ToastController,\n    LoadingOverlayService,\n    ResizeObserverFactory,\n    ResizeObserverService,\n    CanDismissHelper,\n    GestureController,\n    ...patchIonicProviders(),\n    features,\n  ]);\n}\n\n/**\n * Sets up global configuration when used with the provideKirby EnvironmentProvider function.\n * Should be called exactly once per application when bootstrapping, to set up Kirby in the browsers runtime.\n *\n * @param config - (Optional) Additional configuration via the `KirbyConfig` object.\n */\nexport function withGlobalSetup(config?: KirbyConfig): EnvironmentProviders {\n  setGlobalConfig(config);\n\n  const ionicConfig: IonicConfig = {\n    ...getBaseIonicConfig(),\n  };\n\n  if (config?.focusManager) {\n    ionicConfig.focusManagerPriority = ['heading'];\n  }\n\n  return makeEnvironmentProviders([\n    provideIonicAngular(ionicConfig),\n    provideAppInitializer(() => inject(TextResizeObserverService).initialize()),\n  ]);\n}\n\n/**\n * Retrieves the global Kirby configuration object from the window object.\n */\nexport function getGlobalConfig(): KirbyConfig | undefined {\n  return (window as any).__KIRBY_CONFIG__ as KirbyConfig | undefined;\n}\n\n/**\n * Private method to set the global Kirby configuration object on the window object.\n *\n * @param config - `KirbyConfig` object to configure Kirby globally.\n */\nfunction setGlobalConfig(config: KirbyConfig | undefined): void {\n  if (getGlobalConfig()) {\n    console.warn(\n      `Global Kirby configuration is already provided through withGlobalSetup() elsewhere.\nOverwriting the existing configuration is not recommended. Consider removing duplicate calls.`\n    );\n  }\n\n  (window as any).__KIRBY_CONFIG__ = config ?? {};\n}\n\n/**\n * Returns the base Ionic configuration object with common defaults.\n */\nfunction getBaseIonicConfig(): IonicConfig {\n  const shouldHaveNoopAnimation = !isPlatform('hybrid');\n  const navAnimationConfig: IonicConfig = shouldHaveNoopAnimation && {\n    navAnimation: () => new AnimationController().create(),\n  };\n\n  return {\n    mode: 'ios',\n    ...navAnimationConfig,\n  };\n}\n\n/**\n * Return same Ionic Angular providers as provideIonicAngular, but exclude the APP_INITIALIZER token.\n * https://github.com/ionic-team/ionic-framework/blob/v8.6.1/packages/angular/standalone/src/providers/ionic-angular.ts#L15\n * This is to ensure that we only initialize Ionic once in `withGlobalSetup`, where we use provideIonicAngular as intended,\n * but still allow other Angular contexts (e.g. Micro Frontends) to call provideKirby to get needed Kirby and Ionic config and providers in their context.\n */\nfunction patchIonicProviders(): Provider[] {\n  return [\n    {\n      provide: IonConfigToken,\n      useValue: { ...getBaseIonicConfig(), ...(window as any)?.Ionic?.config },\n    },\n    provideComponentInputBinding(),\n    IonAngularDelegate,\n    IonPopoverController,\n    IonModalController,\n  ];\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["IonConfigToken","IonAngularDelegate","IonPopoverController","IonModalController"],"mappings":";;;;;;;;;AAqDA;;AAEG;MACU,YAAY,GAAG,IAAI,cAAc,CAAc,cAAc;AAE1E;;;;AAIG;AACG,SAAU,YAAY,CAC1B,GAAG,QAA6C,EAAA;AAEhD,IAAA,OAAO,wBAAwB,CAAC;QAC9B,eAAe;QACf,iBAAiB;QACjB,WAAW;QACX,WAAW;QACX,WAAW;QACX,eAAe;QACf,qBAAqB;QACrB,qBAAqB;QACrB,qBAAqB;QACrB,gBAAgB;QAChB,iBAAiB;AACjB,QAAA,GAAG,mBAAmB,EAAE;QACxB,QAAQ;AACT,KAAA,CAAC;AACJ;AAEA;;;;;AAKG;AACG,SAAU,eAAe,CAAC,MAAoB,EAAA;IAClD,eAAe,CAAC,MAAM,CAAC;AAEvB,IAAA,MAAM,WAAW,GAAgB;AAC/B,QAAA,GAAG,kBAAkB,EAAE;KACxB;AAED,IAAA,IAAI,MAAM,EAAE,YAAY,EAAE;AACxB,QAAA,WAAW,CAAC,oBAAoB,GAAG,CAAC,SAAS,CAAC;IAChD;AAEA,IAAA,OAAO,wBAAwB,CAAC;QAC9B,mBAAmB,CAAC,WAAW,CAAC;QAChC,qBAAqB,CAAC,MAAM,MAAM,CAAC,yBAAyB,CAAC,CAAC,UAAU,EAAE,CAAC;AAC5E,KAAA,CAAC;AACJ;AAEA;;AAEG;SACa,eAAe,GAAA;IAC7B,OAAQ,MAAc,CAAC,gBAA2C;AACpE;AAEA;;;;AAIG;AACH,SAAS,eAAe,CAAC,MAA+B,EAAA;IACtD,IAAI,eAAe,EAAE,EAAE;QACrB,OAAO,CAAC,IAAI,CACV,CAAA;AACwF,6FAAA,CAAA,CACzF;IACH;AAEC,IAAA,MAAc,CAAC,gBAAgB,GAAG,MAAM,IAAI,EAAE;AACjD;AAEA;;AAEG;AACH,SAAS,kBAAkB,GAAA;AACzB,IAAA,MAAM,uBAAuB,GAAG,CAAC,UAAU,CAAC,QAAQ,CAAC;IACrD,MAAM,kBAAkB,GAAgB,uBAAuB,IAAI;QACjE,YAAY,EAAE,MAAM,IAAI,mBAAmB,EAAE,CAAC,MAAM,EAAE;KACvD;IAED,OAAO;AACL,QAAA,IAAI,EAAE,KAAK;AACX,QAAA,GAAG,kBAAkB;KACtB;AACH;AAEA;;;;;AAKG;AACH,SAAS,mBAAmB,GAAA;IAC1B,OAAO;AACL,QAAA;AACE,YAAA,OAAO,EAAEA,WAAc;AACvB,YAAA,QAAQ,EAAE,EAAE,GAAG,kBAAkB,EAAE,EAAE,GAAI,MAAc,EAAE,KAAK,EAAE,MAAM,EAAE;AACzE,SAAA;AACD,QAAA,4BAA4B,EAAE;QAC9BC,eAAkB;QAClBC,iBAAoB;QACpBC,iBAAkB;KACnB;AACH;;ACjKA;;AAEG;;;;"}

package/fesm2022/kirbydesign-designsystem-data-grid-composable.mjs

@@ -0,0 +1,162 @@
+import * as i0 from '@angular/core';
+import { input, signal, ChangeDetectionStrategy, Component, inject, Directive } from '@angular/core';
+import * as i1 from '@tanstack/angular-table';
+import { injectTable, tableFeatures, createCoreRowModel, stockFeatures, FlexRender } from '@tanstack/angular-table';
+export { createSortedRowModel, flexRenderComponent, injectFlexRenderContext, stockFeatures, tableFeatures } from '@tanstack/angular-table';
+import { IconComponent } from '@kirbydesign/designsystem/icon';
+export { sortFn_alphanumeric, sortFn_text } from '@tanstack/table-core';
+
+class ComposableDataGridComponent {
+    constructor() {
+        this.data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+        this.columns = input.required(...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+        this.tableOptions = input({}, ...(ngDevMode ? [{ debugName: "tableOptions" }] : /* istanbul ignore next */ []));
+        this.sidePanelOpen = signal(false, ...(ngDevMode ? [{ debugName: "sidePanelOpen" }] : /* istanbul ignore next */ []));
+        this.sidePanelContext = signal(null, ...(ngDevMode ? [{ debugName: "sidePanelContext" }] : /* istanbul ignore next */ []));
+        this.table = injectTable(() => {
+            const tableOptions = this.tableOptions();
+            return {
+                ...tableOptions,
+                features: tableFeatures({
+                    ...stockFeatures,
+                    coreRowModel: createCoreRowModel(),
+                    ...tableOptions.features,
+                }),
+                data: this.data(),
+                columns: this.columns(),
+            };
+        });
+    }
+    openSidePanel(context = null) {
+        this.sidePanelContext.set(context);
+        this.sidePanelOpen.set(true);
+    }
+    closeSidePanel() {
+        this.sidePanelOpen.set(false);
+        this.sidePanelContext.set(null);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ComposableDataGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.23", type: ComposableDataGridComponent, isStandalone: true, selector: "kirby-data-grid-composable", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, tableOptions: { classPropertyName: "tableOptions", publicName: "tableOptions", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "kirby-data-grid-composable" }, exportAs: ["kirbyDataGridComposable"], ngImport: i0, template: `
+    <div
+      class="composable-data-grid-layout"
+      [class.composable-data-grid-layout-panel-open]="sidePanelOpen()"
+    >
+      <div class="composable-data-grid-table-slot">
+        <ng-content select="table[kirbyDataGridTable]"></ng-content>
+      </div>
+      <div
+        class="composable-data-grid-side-panel-slot"
+        [attr.aria-hidden]="sidePanelOpen() ? null : 'true'"
+        [attr.inert]="sidePanelOpen() ? null : ''"
+      >
+        <ng-content select="[kirbyDataGridSidePanel]"></ng-content>
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{display:block}.composable-data-grid-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,0fr);align-items:start;gap:var(--kirby-spacing-md);transition:grid-template-columns .28s ease}.composable-data-grid-layout-panel-open{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}.composable-data-grid-table-slot,.composable-data-grid-side-panel-slot{min-width:0}.composable-data-grid-table-slot{overflow-x:auto}.composable-data-grid-side-panel-slot{display:none;overflow:hidden}.composable-data-grid-layout-panel-open .composable-data-grid-side-panel-slot{display:block;animation:composable-data-grid-panel-in .28s ease both}@keyframes composable-data-grid-panel-in{0%{opacity:0;transform:translate(var(--kirby-spacing-m))}to{opacity:1;transform:translate(0)}}@media(max-width:960px){.composable-data-grid-layout,.composable-data-grid-layout.composable-data-grid-layout-panel-open{grid-template-columns:minmax(0,1fr)}.composable-data-grid-layout-panel-open .composable-data-grid-side-panel-slot{animation-name:composable-data-grid-panel-in-mobile}@keyframes composable-data-grid-panel-in-mobile{0%{opacity:0;transform:translateY(var(--kirby-spacing-m))}to{opacity:1;transform:translateY(0)}}}@media(prefers-reduced-motion:reduce){.composable-data-grid-layout{transition-duration:.01ms}.composable-data-grid-layout-panel-open .composable-data-grid-side-panel-slot{animation-duration:.01ms}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ComposableDataGridComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kirby-data-grid-composable', template: `
+    <div
+      class="composable-data-grid-layout"
+      [class.composable-data-grid-layout-panel-open]="sidePanelOpen()"
+    >
+      <div class="composable-data-grid-table-slot">
+        <ng-content select="table[kirbyDataGridTable]"></ng-content>
+      </div>
+      <div
+        class="composable-data-grid-side-panel-slot"
+        [attr.aria-hidden]="sidePanelOpen() ? null : 'true'"
+        [attr.inert]="sidePanelOpen() ? null : ''"
+      >
+        <ng-content select="[kirbyDataGridSidePanel]"></ng-content>
+      </div>
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'kirbyDataGridComposable', host: { class: 'kirby-data-grid-composable' }, styles: [":host{display:block}.composable-data-grid-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,0fr);align-items:start;gap:var(--kirby-spacing-md);transition:grid-template-columns .28s ease}.composable-data-grid-layout-panel-open{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}.composable-data-grid-table-slot,.composable-data-grid-side-panel-slot{min-width:0}.composable-data-grid-table-slot{overflow-x:auto}.composable-data-grid-side-panel-slot{display:none;overflow:hidden}.composable-data-grid-layout-panel-open .composable-data-grid-side-panel-slot{display:block;animation:composable-data-grid-panel-in .28s ease both}@keyframes composable-data-grid-panel-in{0%{opacity:0;transform:translate(var(--kirby-spacing-m))}to{opacity:1;transform:translate(0)}}@media(max-width:960px){.composable-data-grid-layout,.composable-data-grid-layout.composable-data-grid-layout-panel-open{grid-template-columns:minmax(0,1fr)}.composable-data-grid-layout-panel-open .composable-data-grid-side-panel-slot{animation-name:composable-data-grid-panel-in-mobile}@keyframes composable-data-grid-panel-in-mobile{0%{opacity:0;transform:translateY(var(--kirby-spacing-m))}to{opacity:1;transform:translateY(0)}}}@media(prefers-reduced-motion:reduce){.composable-data-grid-layout{transition-duration:.01ms}.composable-data-grid-layout-panel-open .composable-data-grid-side-panel-slot{animation-duration:.01ms}}\n"] }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], tableOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableOptions", required: false }] }] } });
+class DataGridSidePanelTriggerDirective {
+    constructor() {
+        this.context = input(null, { ...(ngDevMode ? { debugName: "context" } : /* istanbul ignore next */ {}), alias: 'kirbyDataGridSidePanelTrigger' });
+        this.grid = inject(ComposableDataGridComponent);
+    }
+    openSidePanel() {
+        this.grid.openSidePanel(this.context());
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DataGridSidePanelTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.23", type: DataGridSidePanelTriggerDirective, isStandalone: true, selector: "[kirbyDataGridSidePanelTrigger]", inputs: { context: { classPropertyName: "context", publicName: "kirbyDataGridSidePanelTrigger", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "openSidePanel()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DataGridSidePanelTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kirbyDataGridSidePanelTrigger]',
+                    standalone: true,
+                    host: { '(click)': 'openSidePanel()' },
+                }]
+        }], propDecorators: { context: [{ type: i0.Input, args: [{ isSignal: true, alias: "kirbyDataGridSidePanelTrigger", required: false }] }] } });
+
+class DataGridCellComponent {
+    constructor() {
+        this.cellContext = input.required(...(ngDevMode ? [{ debugName: "cellContext" }] : /* istanbul ignore next */ []));
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DataGridCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.23", type: DataGridCellComponent, isStandalone: true, selector: "td[kirby-data-grid-cell]", inputs: { cellContext: { classPropertyName: "cellContext", publicName: "cellContext", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ng-container\n  *flexRender=\"cellContext().cell.column.columnDef.cell; props: cellContext(); let cellValue\"\n>\n  {{ cellValue }}\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1.FlexRenderDirective, selector: "ng-template[flexRender]", inputs: ["flexRender", "flexRenderProps", "flexRenderInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DataGridCellComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'td[kirby-data-grid-cell]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FlexRender], template: "<ng-container\n  *flexRender=\"cellContext().cell.column.columnDef.cell; props: cellContext(); let cellValue\"\n>\n  {{ cellValue }}\n</ng-container>\n" }]
+        }], propDecorators: { cellContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellContext", required: true }] }] } });
+
+class DataGridHeaderCellComponent {
+    constructor() {
+        this.headerContext = input.required(...(ngDevMode ? [{ debugName: "headerContext" }] : /* istanbul ignore next */ []));
+    }
+    get isSortable() {
+        return this.headerContext().header.column.getCanSort();
+    }
+    get isActive() {
+        return !!this.headerContext().header.column.getIsSorted();
+    }
+    get ariaSort() {
+        if (!this.isSortable) {
+            return null;
+        }
+        const sorted = this.headerContext().header.column.getIsSorted();
+        if (sorted === 'asc') {
+            return 'ascending';
+        }
+        if (sorted === 'desc') {
+            return 'descending';
+        }
+        return 'none';
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DataGridHeaderCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: DataGridHeaderCellComponent, isStandalone: true, selector: "th[kirby-data-grid-header-cell]", inputs: { headerContext: { classPropertyName: "headerContext", publicName: "headerContext", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.sortable": "isSortable", "class.active": "isActive", "attr.aria-sort": "ariaSort" } }, ngImport: i0, template: "@if (!headerContext().header.isPlaceholder) {\n  @if (isSortable) {\n    <button\n      class=\"data-grid-composable-sort-button\"\n      type=\"button\"\n      (click)=\"headerContext().header.column.getToggleSortingHandler()?.($event)\"\n    >\n      <ng-container\n        *flexRender=\"\n          headerContext().header.column.columnDef.header;\n          props: headerContext();\n          let headerText\n        \"\n      >\n        {{ headerText }}\n      </ng-container>\n      <kirby-icon\n        class=\"data-grid-composable-sort-icon\"\n        [name]=\"\n          headerContext().header.column.getIsSorted() === 'desc'\n            ? 'arrow-down-fill'\n            : 'arrow-up-fill'\n        \"\n      ></kirby-icon>\n    </button>\n  } @else {\n    <ng-container\n      *flexRender=\"\n        headerContext().header.column.columnDef.header;\n        props: headerContext();\n        let headerText\n      \"\n    >\n      {{ headerText }}\n    </ng-container>\n  }\n}\n", styles: [":host.sortable{cursor:pointer}.data-grid-composable-sort-button{display:flex;align-items:center;width:100%;height:100%;padding:0;border:0;background:transparent;color:inherit;font:inherit;text-align:inherit;cursor:inherit}.data-grid-composable-sort-icon{visibility:hidden}:host(.active) .data-grid-composable-sort-icon{visibility:visible}\n"], dependencies: [{ kind: "directive", type: i1.FlexRenderDirective, selector: "ng-template[flexRender]", inputs: ["flexRender", "flexRenderProps", "flexRenderInjector"] }, { kind: "component", type: IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DataGridHeaderCellComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'th[kirby-data-grid-header-cell]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FlexRender, IconComponent], host: {
+                        '[class.sortable]': 'isSortable',
+                        '[class.active]': 'isActive',
+                        '[attr.aria-sort]': 'ariaSort',
+                    }, template: "@if (!headerContext().header.isPlaceholder) {\n  @if (isSortable) {\n    <button\n      class=\"data-grid-composable-sort-button\"\n      type=\"button\"\n      (click)=\"headerContext().header.column.getToggleSortingHandler()?.($event)\"\n    >\n      <ng-container\n        *flexRender=\"\n          headerContext().header.column.columnDef.header;\n          props: headerContext();\n          let headerText\n        \"\n      >\n        {{ headerText }}\n      </ng-container>\n      <kirby-icon\n        class=\"data-grid-composable-sort-icon\"\n        [name]=\"\n          headerContext().header.column.getIsSorted() === 'desc'\n            ? 'arrow-down-fill'\n            : 'arrow-up-fill'\n        \"\n      ></kirby-icon>\n    </button>\n  } @else {\n    <ng-container\n      *flexRender=\"\n        headerContext().header.column.columnDef.header;\n        props: headerContext();\n        let headerText\n      \"\n    >\n      {{ headerText }}\n    </ng-container>\n  }\n}\n", styles: [":host.sortable{cursor:pointer}.data-grid-composable-sort-button{display:flex;align-items:center;width:100%;height:100%;padding:0;border:0;background:transparent;color:inherit;font:inherit;text-align:inherit;cursor:inherit}.data-grid-composable-sort-icon{visibility:hidden}:host(.active) .data-grid-composable-sort-icon{visibility:visible}\n"] }]
+        }], propDecorators: { headerContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerContext", required: true }] }] } });
+
+class DataGridTableDirective {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DataGridTableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.23", type: DataGridTableDirective, isStandalone: true, selector: "table[kirbyDataGridTable]", host: { classAttribute: "kirby-table" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DataGridTableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'table[kirbyDataGridTable]',
+                    standalone: true,
+                    host: { class: 'kirby-table' },
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ComposableDataGridComponent, DataGridCellComponent, DataGridHeaderCellComponent, DataGridSidePanelTriggerDirective, DataGridTableDirective };
+//# sourceMappingURL=kirbydesign-designsystem-data-grid-composable.mjs.map

package/fesm2022/kirbydesign-designsystem-data-grid-composable.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"kirbydesign-designsystem-data-grid-composable.mjs","sources":["../../data-grid-composable/src/composable-data-grid.component.ts","../../data-grid-composable/src/data-grid-cell.component.ts","../../data-grid-composable/src/data-grid-cell.component.html","../../data-grid-composable/src/data-grid-header-cell.component.ts","../../data-grid-composable/src/data-grid-header-cell.component.html","../../data-grid-composable/src/data-grid-table.directive.ts","../../data-grid-composable/src/kirbydesign-designsystem-data-grid-composable.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  Directive,\n  inject,\n  input,\n  signal,\n} from '@angular/core';\nimport {\n  type ColumnDef,\n  createCoreRowModel,\n  injectTable,\n  type RowData,\n  stockFeatures,\n  type TableFeatures,\n  tableFeatures,\n  type TableOptions,\n} from '@tanstack/angular-table';\n\n@Component({\n  selector: 'kirby-data-grid-composable',\n  template: `\n    <div\n      class=\"composable-data-grid-layout\"\n      [class.composable-data-grid-layout-panel-open]=\"sidePanelOpen()\"\n    >\n      <div class=\"composable-data-grid-table-slot\">\n        <ng-content select=\"table[kirbyDataGridTable]\"></ng-content>\n      </div>\n      <div\n        class=\"composable-data-grid-side-panel-slot\"\n        [attr.aria-hidden]=\"sidePanelOpen() ? null : 'true'\"\n        [attr.inert]=\"sidePanelOpen() ? null : ''\"\n      >\n        <ng-content select=\"[kirbyDataGridSidePanel]\"></ng-content>\n      </div>\n    </div>\n  `,\n  styleUrls: ['./composable-data-grid.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  exportAs: 'kirbyDataGridComposable',\n  host: { class: 'kirby-data-grid-composable' },\n})\nexport class ComposableDataGridComponent {\n  readonly data = input.required<RowData[]>();\n  readonly columns = input.required<ColumnDef<TableFeatures, RowData>[]>();\n  readonly tableOptions = input<Partial<TableOptions<TableFeatures, RowData>>>({});\n  readonly sidePanelOpen = signal(false);\n  readonly sidePanelContext = signal<unknown>(null);\n\n  readonly table = injectTable(() => {\n    const tableOptions = this.tableOptions();\n\n    return {\n      ...tableOptions,\n      features: tableFeatures({\n        ...stockFeatures,\n        coreRowModel: createCoreRowModel(),\n        ...tableOptions.features,\n      }),\n      data: this.data(),\n      columns: this.columns(),\n    };\n  });\n\n  openSidePanel(context: unknown = null) {\n    this.sidePanelContext.set(context);\n    this.sidePanelOpen.set(true);\n  }\n\n  closeSidePanel() {\n    this.sidePanelOpen.set(false);\n    this.sidePanelContext.set(null);\n  }\n}\n\n@Directive({\n  selector: '[kirbyDataGridSidePanelTrigger]',\n  standalone: true,\n  host: { '(click)': 'openSidePanel()' },\n})\nexport class DataGridSidePanelTriggerDirective {\n  readonly context = input<unknown>(null, { alias: 'kirbyDataGridSidePanelTrigger' });\n  private readonly grid = inject(ComposableDataGridComponent);\n\n  openSidePanel() {\n    this.grid.openSidePanel(this.context());\n  }\n}\n","import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport {\n  type CellContext,\n  FlexRender,\n  type RowData,\n  type TableFeatures,\n} from '@tanstack/angular-table';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'td[kirby-data-grid-cell]',\n  templateUrl: './data-grid-cell.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [FlexRender],\n})\nexport class DataGridCellComponent {\n  readonly cellContext = input.required<CellContext<TableFeatures, RowData, unknown>>();\n}\n","<ng-container\n  *flexRender=\"cellContext().cell.column.columnDef.cell; props: cellContext(); let cellValue\"\n>\n  {{ cellValue }}\n</ng-container>\n","import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\nimport {\n  FlexRender,\n  type HeaderContext,\n  type RowData,\n  type TableFeatures,\n} from '@tanstack/angular-table';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'th[kirby-data-grid-header-cell]',\n  templateUrl: './data-grid-header-cell.component.html',\n  styleUrls: ['./data-grid-header-cell.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [FlexRender, IconComponent],\n  host: {\n    '[class.sortable]': 'isSortable',\n    '[class.active]': 'isActive',\n    '[attr.aria-sort]': 'ariaSort',\n  },\n})\nexport class DataGridHeaderCellComponent {\n  readonly headerContext = input.required<HeaderContext<TableFeatures, RowData, unknown>>();\n\n  get isSortable(): boolean {\n    return this.headerContext().header.column.getCanSort();\n  }\n\n  get isActive(): boolean {\n    return !!this.headerContext().header.column.getIsSorted();\n  }\n\n  get ariaSort(): 'ascending' | 'descending' | 'none' | null {\n    if (!this.isSortable) {\n      return null;\n    }\n\n    const sorted = this.headerContext().header.column.getIsSorted();\n    if (sorted === 'asc') {\n      return 'ascending';\n    }\n\n    if (sorted === 'desc') {\n      return 'descending';\n    }\n\n    return 'none';\n  }\n}\n","@if (!headerContext().header.isPlaceholder) {\n  @if (isSortable) {\n    <button\n      class=\"data-grid-composable-sort-button\"\n      type=\"button\"\n      (click)=\"headerContext().header.column.getToggleSortingHandler()?.($event)\"\n    >\n      <ng-container\n        *flexRender=\"\n          headerContext().header.column.columnDef.header;\n          props: headerContext();\n          let headerText\n        \"\n      >\n        {{ headerText }}\n      </ng-container>\n      <kirby-icon\n        class=\"data-grid-composable-sort-icon\"\n        [name]=\"\n          headerContext().header.column.getIsSorted() === 'desc'\n            ? 'arrow-down-fill'\n            : 'arrow-up-fill'\n        \"\n      ></kirby-icon>\n    </button>\n  } @else {\n    <ng-container\n      *flexRender=\"\n        headerContext().header.column.columnDef.header;\n        props: headerContext();\n        let headerText\n      \"\n    >\n      {{ headerText }}\n    </ng-container>\n  }\n}\n","import { Directive } from '@angular/core';\n\n@Directive({\n  selector: 'table[kirbyDataGridTable]',\n  standalone: true,\n  host: { class: 'kirby-table' },\n})\nexport class DataGridTableDirective {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2022/kirbydesign-designsystem-data-grid.mjs

@@ -0,0 +1,42 @@
+import * as i0 from '@angular/core';
+import { input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { CardComponent } from '@kirbydesign/designsystem/card';
+import { IconComponent } from '@kirbydesign/designsystem/icon';
+import * as i1 from '@tanstack/angular-table';
+import { injectTable, tableFeatures, createCoreRowModel, stockFeatures, FlexRender } from '@tanstack/angular-table';
+export * from '@tanstack/angular-table';
+
+// POC: uses the Kirby table look-and-feel while owning grid rendering and TanStack interaction.
+class DataGridComponent {
+    constructor() {
+        this.data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+        this.columns = input.required(...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+        this.tableOptions = input({}, ...(ngDevMode ? [{ debugName: "tableOptions" }] : /* istanbul ignore next */ []));
+        this.table = injectTable(() => {
+            const tableOptions = this.tableOptions();
+            return {
+                ...tableOptions,
+                features: tableFeatures({
+                    ...stockFeatures,
+                    coreRowModel: createCoreRowModel(),
+                    ...tableOptions.features,
+                }),
+                data: this.data(),
+                columns: this.columns(),
+            };
+        });
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DataGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: DataGridComponent, isStandalone: true, selector: "kirby-data-grid", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, tableOptions: { classPropertyName: "tableOptions", publicName: "tableOptions", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<kirby-card>\n  <table class=\"kirby-table\">\n    <thead>\n      @for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {\n        <tr>\n          @for (header of headerGroup.headers; track header.id) {\n            @if (header.column.getCanSort()) {\n              <th\n                class=\"sortable\"\n                [attr.colspan]=\"header.colSpan\"\n                [class.active]=\"!!header.column.getIsSorted()\"\n                [attr.aria-sort]=\"\n                  header.column.getIsSorted() === 'asc'\n                    ? 'ascending'\n                    : header.column.getIsSorted() === 'desc'\n                      ? 'descending'\n                      : 'none'\n                \"\n              >\n                @if (!header.isPlaceholder) {\n                  <button\n                    class=\"data-grid-sort-button\"\n                    type=\"button\"\n                    (click)=\"header.column.getToggleSortingHandler()?.($event)\"\n                  >\n                    <span class=\"data-grid-sort-label\">\n                      <ng-container\n                        *flexRender=\"\n                          header.column.columnDef.header;\n                          props: header.getContext();\n                          let headerText\n                        \"\n                      >\n                        {{ headerText }}\n                      </ng-container>\n                    </span>\n                    <kirby-icon\n                      class=\"data-grid-sort-icon\"\n                      [name]=\"\n                        header.column.getIsSorted() === 'desc' ? 'arrow-down-fill' : 'arrow-up-fill'\n                      \"\n                    ></kirby-icon>\n                  </button>\n                }\n              </th>\n            } @else {\n              <th [attr.colspan]=\"header.colSpan\">\n                @if (!header.isPlaceholder) {\n                  <ng-container\n                    *flexRender=\"\n                      header.column.columnDef.header;\n                      props: header.getContext();\n                      let headerText\n                    \"\n                  >\n                    {{ headerText }}\n                  </ng-container>\n                }\n              </th>\n            }\n          }\n        </tr>\n      }\n    </thead>\n    <tbody>\n      @for (row of table.getRowModel().rows; track row.id) {\n        <tr>\n          @for (cell of row.getVisibleCells(); track cell.id) {\n            <td>\n              <ng-container\n                *flexRender=\"cell.column.columnDef.cell; props: cell.getContext(); let cellValue\"\n              >\n                {{ cellValue }}\n              </ng-container>\n            </td>\n          }\n        </tr>\n      }\n    </tbody>\n  </table>\n</kirby-card>\n", styles: [":host{display:block}.data-grid-sort-button{display:flex;align-items:center;width:100%;height:100%;padding:0;border:0;background:transparent;color:inherit;font:inherit;text-align:inherit;cursor:pointer}.data-grid-sort-icon{visibility:hidden}th.active .data-grid-sort-icon{visibility:visible}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "variant"] }, { kind: "component", type: IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }, { kind: "directive", type: i1.FlexRenderDirective, selector: "ng-template[flexRender]", inputs: ["flexRender", "flexRenderProps", "flexRenderInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DataGridComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kirby-data-grid', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CardComponent, IconComponent, FlexRender], template: "<kirby-card>\n  <table class=\"kirby-table\">\n    <thead>\n      @for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {\n        <tr>\n          @for (header of headerGroup.headers; track header.id) {\n            @if (header.column.getCanSort()) {\n              <th\n                class=\"sortable\"\n                [attr.colspan]=\"header.colSpan\"\n                [class.active]=\"!!header.column.getIsSorted()\"\n                [attr.aria-sort]=\"\n                  header.column.getIsSorted() === 'asc'\n                    ? 'ascending'\n                    : header.column.getIsSorted() === 'desc'\n                      ? 'descending'\n                      : 'none'\n                \"\n              >\n                @if (!header.isPlaceholder) {\n                  <button\n                    class=\"data-grid-sort-button\"\n                    type=\"button\"\n                    (click)=\"header.column.getToggleSortingHandler()?.($event)\"\n                  >\n                    <span class=\"data-grid-sort-label\">\n                      <ng-container\n                        *flexRender=\"\n                          header.column.columnDef.header;\n                          props: header.getContext();\n                          let headerText\n                        \"\n                      >\n                        {{ headerText }}\n                      </ng-container>\n                    </span>\n                    <kirby-icon\n                      class=\"data-grid-sort-icon\"\n                      [name]=\"\n                        header.column.getIsSorted() === 'desc' ? 'arrow-down-fill' : 'arrow-up-fill'\n                      \"\n                    ></kirby-icon>\n                  </button>\n                }\n              </th>\n            } @else {\n              <th [attr.colspan]=\"header.colSpan\">\n                @if (!header.isPlaceholder) {\n                  <ng-container\n                    *flexRender=\"\n                      header.column.columnDef.header;\n                      props: header.getContext();\n                      let headerText\n                    \"\n                  >\n                    {{ headerText }}\n                  </ng-container>\n                }\n              </th>\n            }\n          }\n        </tr>\n      }\n    </thead>\n    <tbody>\n      @for (row of table.getRowModel().rows; track row.id) {\n        <tr>\n          @for (cell of row.getVisibleCells(); track cell.id) {\n            <td>\n              <ng-container\n                *flexRender=\"cell.column.columnDef.cell; props: cell.getContext(); let cellValue\"\n              >\n                {{ cellValue }}\n              </ng-container>\n            </td>\n          }\n        </tr>\n      }\n    </tbody>\n  </table>\n</kirby-card>\n", styles: [":host{display:block}.data-grid-sort-button{display:flex;align-items:center;width:100%;height:100%;padding:0;border:0;background:transparent;color:inherit;font:inherit;text-align:inherit;cursor:pointer}.data-grid-sort-icon{visibility:hidden}th.active .data-grid-sort-icon{visibility:visible}\n"] }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], tableOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableOptions", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DataGridComponent };
+//# sourceMappingURL=kirbydesign-designsystem-data-grid.mjs.map

package/fesm2022/kirbydesign-designsystem-data-grid.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"kirbydesign-designsystem-data-grid.mjs","sources":["../../data-grid/src/data-grid.component.ts","../../data-grid/src/data-grid.component.html","../../data-grid/src/kirbydesign-designsystem-data-grid.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { CardComponent } from '@kirbydesign/designsystem/card';\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\nimport {\n  type ColumnDef,\n  createCoreRowModel,\n  FlexRender,\n  injectTable,\n  type RowData,\n  stockFeatures,\n  type TableFeatures,\n  tableFeatures,\n  type TableOptions,\n} from '@tanstack/angular-table';\n\n// POC: uses the Kirby table look-and-feel while owning grid rendering and TanStack interaction.\n@Component({\n  selector: 'kirby-data-grid',\n  templateUrl: './data-grid.component.html',\n  styleUrls: ['./data-grid.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [CardComponent, IconComponent, FlexRender],\n})\nexport class DataGridComponent {\n  data = input.required<RowData[]>();\n  columns = input.required<ColumnDef<TableFeatures, RowData>[]>();\n  tableOptions = input<Partial<TableOptions<TableFeatures, RowData>>>({});\n\n  table = injectTable(() => {\n    const tableOptions = this.tableOptions();\n\n    return {\n      ...tableOptions,\n      features: tableFeatures({\n        ...stockFeatures,\n        coreRowModel: createCoreRowModel(),\n        ...tableOptions.features,\n      }),\n      data: this.data(),\n      columns: this.columns(),\n    };\n  });\n}\n","<kirby-card>\n  <table class=\"kirby-table\">\n    <thead>\n      @for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {\n        <tr>\n          @for (header of headerGroup.headers; track header.id) {\n            @if (header.column.getCanSort()) {\n              <th\n                class=\"sortable\"\n                [attr.colspan]=\"header.colSpan\"\n                [class.active]=\"!!header.column.getIsSorted()\"\n                [attr.aria-sort]=\"\n                  header.column.getIsSorted() === 'asc'\n                    ? 'ascending'\n                    : header.column.getIsSorted() === 'desc'\n                      ? 'descending'\n                      : 'none'\n                \"\n              >\n                @if (!header.isPlaceholder) {\n                  <button\n                    class=\"data-grid-sort-button\"\n                    type=\"button\"\n                    (click)=\"header.column.getToggleSortingHandler()?.($event)\"\n                  >\n                    <span class=\"data-grid-sort-label\">\n                      <ng-container\n                        *flexRender=\"\n                          header.column.columnDef.header;\n                          props: header.getContext();\n                          let headerText\n                        \"\n                      >\n                        {{ headerText }}\n                      </ng-container>\n                    </span>\n                    <kirby-icon\n                      class=\"data-grid-sort-icon\"\n                      [name]=\"\n                        header.column.getIsSorted() === 'desc' ? 'arrow-down-fill' : 'arrow-up-fill'\n                      \"\n                    ></kirby-icon>\n                  </button>\n                }\n              </th>\n            } @else {\n              <th [attr.colspan]=\"header.colSpan\">\n                @if (!header.isPlaceholder) {\n                  <ng-container\n                    *flexRender=\"\n                      header.column.columnDef.header;\n                      props: header.getContext();\n                      let headerText\n                    \"\n                  >\n                    {{ headerText }}\n                  </ng-container>\n                }\n              </th>\n            }\n          }\n        </tr>\n      }\n    </thead>\n    <tbody>\n      @for (row of table.getRowModel().rows; track row.id) {\n        <tr>\n          @for (cell of row.getVisibleCells(); track cell.id) {\n            <td>\n              <ng-container\n                *flexRender=\"cell.column.columnDef.cell; props: cell.getContext(); let cellValue\"\n              >\n                {{ cellValue }}\n              </ng-container>\n            </td>\n          }\n        </tr>\n      }\n    </tbody>\n  </table>\n</kirby-card>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;;;;AAeA;MAQa,iBAAiB,CAAA;AAP9B,IAAA,WAAA,GAAA;AAQE,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAC,QAAQ,0EAAa;AAClC,QAAA,IAAA,CAAA,OAAO,GAAG,KAAK,CAAC,QAAQ,6EAAuC;AAC/D,QAAA,IAAA,CAAA,YAAY,GAAG,KAAK,CAAgD,EAAE,mFAAC;AAEvE,QAAA,IAAA,CAAA,KAAK,GAAG,WAAW,CAAC,MAAK;AACvB,YAAA,MAAM,YAAY,GAAG,IAAI,CAAC,YAAY,EAAE;YAExC,OAAO;AACL,gBAAA,GAAG,YAAY;gBACf,QAAQ,EAAE,aAAa,CAAC;AACtB,oBAAA,GAAG,aAAa;oBAChB,YAAY,EAAE,kBAAkB,EAAE;oBAClC,GAAG,YAAY,CAAC,QAAQ;iBACzB,CAAC;AACF,gBAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE;AACjB,gBAAA,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE;aACxB;AACH,QAAA,CAAC,CAAC;AACH,IAAA;kIAnBY,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAjB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECvB9B,syFAiFA,EAAA,MAAA,EAAA,CAAA,sSAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,ED5DY,aAAa,8IAAE,aAAa,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,MAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,mBAAA,EAAA,QAAA,EAAA,yBAAA,EAAA,MAAA,EAAA,CAAA,YAAA,EAAA,iBAAA,EAAA,oBAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAE3B,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAP7B,SAAS;+BACE,iBAAiB,EAAA,eAAA,EAGV,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,aAAa,EAAE,aAAa,EAAE,UAAU,CAAC,EAAA,QAAA,EAAA,syFAAA,EAAA,MAAA,EAAA,CAAA,sSAAA,CAAA,EAAA;;;AErBrD;;AAEG;;;;"}

package/fesm2022/kirbydesign-designsystem-data-table.mjs

@@ -29,10 +29,10 @@ class TableSortableComponent {
             this.renderer.setAttribute(this.spanElement.nativeElement, 'data-text', this.spanElement.nativeElement.textContent);
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TableSortableComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: TableSortableComponent, isStandalone: true, selector: "th[sortable]", inputs: { sortable: "sortable", active: "active", sortDirection: "sortDirection", iconAlignment: "iconAlignment", alignment: "alignment" }, host: { properties: { "class.sortable": "this.sortable", "class.active": "this.isActive" } }, viewQueries: [{ propertyName: "spanElement", first: true, predicate: ["span"], descendants: true }], ngImport: i0, template: "@if (!sortable) {\n  <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n} @else {\n  <button [ngClass]=\"_getAlignmentClasses()\">\n    <span #span><ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container></span>\n    <kirby-icon\n      class=\"sortable-icon\"\n      [name]=\"sortDirection === 'asc' ? 'arrow-up-fill' : 'arrow-down-fill'\"\n    ></kirby-icon>\n  </button>\n}\n\n<ng-template #contentTemplate>\n  <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: TableSortableComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: TableSortableComponent, isStandalone: true, selector: "th[sortable]", inputs: { sortable: "sortable", active: "active", sortDirection: "sortDirection", iconAlignment: "iconAlignment", alignment: "alignment" }, host: { properties: { "class.sortable": "this.sortable", "class.active": "this.isActive" } }, viewQueries: [{ propertyName: "spanElement", first: true, predicate: ["span"], descendants: true }], ngImport: i0, template: "@if (!sortable) {\n  <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n} @else {\n  <button [ngClass]=\"_getAlignmentClasses()\">\n    <span #span><ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container></span>\n    <kirby-icon\n      class=\"sortable-icon\"\n      [name]=\"sortDirection === 'asc' ? 'arrow-up-fill' : 'arrow-down-fill'\"\n    ></kirby-icon>\n  </button>\n}\n\n<ng-template #contentTemplate>\n  <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TableSortableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: TableSortableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'th[sortable]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, IconComponent], template: "@if (!sortable) {\n  <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n} @else {\n  <button [ngClass]=\"_getAlignmentClasses()\">\n    <span #span><ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container></span>\n    <kirby-icon\n      class=\"sortable-icon\"\n      [name]=\"sortDirection === 'asc' ? 'arrow-up-fill' : 'arrow-down-fill'\"\n    ></kirby-icon>\n  </button>\n}\n\n<ng-template #contentTemplate>\n  <ng-content></ng-content>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { sortable: [{
@@ -65,11 +65,11 @@ class DataTableModule {
         console.warn(`'DataTableModule' has been deprecated in favor of the standalone 'TableSortableComponent'.
 Please import 'TableSortableComponent' instead. 'DataTableModule' will be removed in Kirby v11.`);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DataTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: DataTableModule, imports: [TableSortableComponent], exports: [TableSortableComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DataTableModule, imports: [TableSortableComponent] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DataTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.23", ngImport: i0, type: DataTableModule, imports: [TableSortableComponent], exports: [TableSortableComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DataTableModule, imports: [TableSortableComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DataTableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DataTableModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [TableSortableComponent],

package/fesm2022/kirbydesign-designsystem-divider.mjs

@@ -2,12 +2,12 @@ import * as i0 from '@angular/core';
 import { Input, ChangeDetectionStrategy, Component } from '@angular/core';
 
 class DividerComponent {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: DividerComponent, isStandalone: true, selector: "kirby-divider", inputs: { hasMargin: "hasMargin" }, ngImport: i0, template: "<hr role=\"presentation\" [class.no-margin]=\"!hasMargin\" />\n", styles: ["hr{margin-top:var(--kirby-spacing-xxs);margin-bottom:var(--kirby-spacing-xxs);border:0;border-top:var(--kirby-stroke-xs) solid var(--kirby-color-border-base-silent)}hr.no-margin{margin-top:0;margin-bottom:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", type: DividerComponent, isStandalone: true, selector: "kirby-divider", inputs: { hasMargin: "hasMargin" }, ngImport: i0, template: "<hr role=\"presentation\" [class.no-margin]=\"!hasMargin\" />\n", styles: ["hr{margin-top:var(--kirby-spacing-xxs);margin-bottom:var(--kirby-spacing-xxs);border:0;border-top:1px solid var(--kirby-divider-color, var(--kirby-medium))}hr.no-margin{margin-top:0;margin-bottom:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DividerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DividerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kirby-divider', changeDetection: ChangeDetectionStrategy.OnPush, template: "<hr role=\"presentation\" [class.no-margin]=\"!hasMargin\" />\n", styles: ["hr{margin-top:var(--kirby-spacing-xxs);margin-bottom:var(--kirby-spacing-xxs);border:0;border-top:var(--kirby-stroke-xs) solid var(--kirby-color-border-base-silent)}hr.no-margin{margin-top:0;margin-bottom:0}\n"] }]
+            args: [{ selector: 'kirby-divider', changeDetection: ChangeDetectionStrategy.OnPush, template: "<hr role=\"presentation\" [class.no-margin]=\"!hasMargin\" />\n", styles: ["hr{margin-top:var(--kirby-spacing-xxs);margin-bottom:var(--kirby-spacing-xxs);border:0;border-top:1px solid var(--kirby-divider-color, var(--kirby-medium))}hr.no-margin{margin-top:0;margin-bottom:0}\n"] }]
         }], propDecorators: { hasMargin: [{
                 type: Input
             }] } });

package/fesm2022/kirbydesign-designsystem-divider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-designsystem-divider.mjs","sources":["../../divider/src/divider.component.ts","../../divider/src/divider.component.html","../../divider/src/kirbydesign-designsystem-divider.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Input } from '@angular/core';\n\n@Component({\n  selector: 'kirby-divider',\n  templateUrl: './divider.component.html',\n  styleUrls: ['./divider.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DividerComponent {\n  @Input()\n  hasMargin: boolean;\n}\n","<hr role=\"presentation\" [class.no-margin]=\"!hasMargin\" />\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;MAQa,gBAAgB,CAAA;kIAAhB,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAhB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,gBAAgB,6GCR7B,iEACA,EAAA,MAAA,EAAA,CAAA,mNAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FDOa,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAN5B,SAAS;+BACE,eAAe,EAAA,eAAA,EAGR,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,iEAAA,EAAA,MAAA,EAAA,CAAA,mNAAA,CAAA,EAAA;;sBAG9C;;;AETH;;AAEG;;;;"}
+{"version":3,"file":"kirbydesign-designsystem-divider.mjs","sources":["../../divider/src/divider.component.ts","../../divider/src/divider.component.html","../../divider/src/kirbydesign-designsystem-divider.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Input } from '@angular/core';\n\n@Component({\n  selector: 'kirby-divider',\n  templateUrl: './divider.component.html',\n  styleUrls: ['./divider.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DividerComponent {\n  @Input()\n  hasMargin: boolean;\n}\n","<hr role=\"presentation\" [class.no-margin]=\"!hasMargin\" />\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;MAQa,gBAAgB,CAAA;kIAAhB,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAhB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,gBAAgB,6GCR7B,iEACA,EAAA,MAAA,EAAA,CAAA,0MAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FDOa,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAN5B,SAAS;+BACE,eAAe,EAAA,eAAA,EAGR,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,iEAAA,EAAA,MAAA,EAAA,CAAA,0MAAA,CAAA,EAAA;;sBAG9C;;;AETH;;AAEG;;;;"}