@kirbydesign/designsystem 10.3.1 → 10.4.0

package/fesm2022/kirbydesign-designsystem-testing-jasmine.mjs

@@ -91,11 +91,11 @@ const MOCK_PROVIDERS = [
 // eslint-disable-next-line @typescript-eslint/triple-slash-reference
 /// <reference path='../../../../../node_modules/@types/jasmine/index.d.ts' />
 class KirbyTestingModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KirbyTestingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.4", ngImport: i0, type: KirbyTestingModule, imports: [KirbyTestingBaseModule], exports: [KirbyTestingBaseModule] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KirbyTestingModule, providers: [...MOCK_PROVIDERS], imports: [KirbyTestingBaseModule, KirbyTestingBaseModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: KirbyTestingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: KirbyTestingModule, imports: [KirbyTestingBaseModule], exports: [KirbyTestingBaseModule] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: KirbyTestingModule, providers: [...MOCK_PROVIDERS], imports: [KirbyTestingBaseModule, KirbyTestingBaseModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KirbyTestingModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: KirbyTestingModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [KirbyTestingBaseModule],

package/fesm2022/kirbydesign-designsystem-testing-jest.mjs

@@ -97,11 +97,11 @@ const MOCK_PROVIDERS = [
 // eslint-disable-next-line @typescript-eslint/triple-slash-reference
 /// <reference path='../../../../../node_modules/@types/jest/index.d.ts' />
 class KirbyTestingModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KirbyTestingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.4", ngImport: i0, type: KirbyTestingModule, imports: [KirbyTestingBaseModule], exports: [KirbyTestingBaseModule] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KirbyTestingModule, providers: [...MOCK_PROVIDERS], imports: [KirbyTestingBaseModule, KirbyTestingBaseModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: KirbyTestingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: KirbyTestingModule, imports: [KirbyTestingBaseModule], exports: [KirbyTestingBaseModule] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: KirbyTestingModule, providers: [...MOCK_PROVIDERS], imports: [KirbyTestingBaseModule, KirbyTestingBaseModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KirbyTestingModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: KirbyTestingModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [KirbyTestingBaseModule],

package/fesm2022/kirbydesign-designsystem-testing.mjs

@@ -5,11 +5,11 @@ import { provideIonicAngular } from '@ionic/angular/standalone';
 import { componentOnReady } from '@ionic/core';
 
 class IonicTestingModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: IonicTestingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.4", ngImport: i0, type: IonicTestingModule }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: IonicTestingModule, providers: [provideIonicAngular({ mode: 'ios', _testing: true })] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: IonicTestingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: IonicTestingModule }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: IonicTestingModule, providers: [provideIonicAngular({ mode: 'ios', _testing: true })] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: IonicTestingModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: IonicTestingModule, decorators: [{
             type: NgModule,
             args: [{
                     providers: [provideIonicAngular({ mode: 'ios', _testing: true })],

package/fesm2022/kirbydesign-designsystem-toast.mjs

@@ -30,10 +30,10 @@ class ToastHelper {
         }
         return cssClass;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ToastHelper, deps: [{ token: i1.ToastController }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ToastHelper }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ToastHelper, deps: [{ token: i1.ToastController }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ToastHelper }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ToastHelper, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ToastHelper, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1.ToastController }] });
 
@@ -48,10 +48,10 @@ class ToastController {
             }
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ToastController, deps: [{ token: ToastHelper }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ToastController }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ToastController, deps: [{ token: ToastHelper }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ToastController }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ToastController, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ToastController, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: ToastHelper }] });
 

package/fesm2022/kirbydesign-designsystem-toggle-button.mjs

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, HostListener, NgModule } from '@angular/core';
+import { EventEmitter, forwardRef, HostListener, Output, Input, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 
@@ -8,6 +9,10 @@ class ToggleButtonComponent {
         this.elementRef = elementRef;
         this.cdr = cdr;
         this.checkChanged = new EventEmitter();
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-empty-function
+        this.onChange = (_checked) => { };
+        // eslint-disable-next-line no-empty-function, @typescript-eslint/no-empty-function
+        this.onTouched = () => { };
     }
     onClick(event) {
         const targetElement = event.target;
@@ -15,21 +20,81 @@ class ToggleButtonComponent {
         if (!buttonEnabled)
             return;
         this.checked = !this.checked;
+        this.onChange(this.checked);
+        this.onTouched();
         this.checkChanged.emit(this.checked);
         this.focusToggledButton();
     }
+    onFocusOut() {
+        this.onTouched();
+    }
     focusToggledButton() {
         // force re-render to ensure that the new button is in the dom
         this.cdr.detectChanges();
         const buttonToFocus = this.elementRef.nativeElement.querySelector('button[kirby-button]');
         buttonToFocus?.focus();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ToggleButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: ToggleButtonComponent, isStandalone: false, selector: "kirby-toggle-button", inputs: { checked: "checked" }, outputs: { checkChanged: "checkChanged" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0, template: "<ng-content *ngIf=\"!checked\" select=\"button[kirby-button][unchecked]\"></ng-content>\n<ng-content *ngIf=\"checked\" select=\"button[kirby-button][checked]\"></ng-content>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /**
+     * Sets the toggle button's value. Part of the ControlValueAccessor interface
+     * required to integrate with Angular's core forms API.
+     *
+     * @param checked New value to be written to the model.
+     */
+    writeValue(checked) {
+        if (this.checked !== checked) {
+            this.checked = checked;
+            this.cdr.markForCheck();
+        }
+    }
+    /**
+     * Saves a callback function to be invoked when the toggle button's value
+     * changes from user input. Part of the ControlValueAccessor interface
+     * required to integrate with Angular's core forms API.
+     *
+     * @param fn Callback to be triggered when the value changes.
+     */
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    /**
+     * Saves a callback function to be invoked when the toggle button is blurred
+     * by the user. Part of the ControlValueAccessor interface required
+     * to integrate with Angular's core forms API.
+     *
+     * @param fn Callback to be triggered when the component has been touched.
+     */
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    /**
+     * Disables the toggle button. Part of the ControlValueAccessor interface required
+     * to integrate with Angular's core forms API.
+     *
+     * @param isDisabled Sets whether the component is disabled.
+     */
+    setDisabledState(isDisabled) {
+        this.elementRef.nativeElement
+            .querySelector('button[kirby-button]')
+            ?.toggleAttribute('disabled', isDisabled);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ToggleButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: ToggleButtonComponent, isStandalone: false, selector: "kirby-toggle-button", inputs: { checked: "checked" }, outputs: { checkChanged: "checkChanged" }, host: { listeners: { "click": "onClick($event)", "focusout": "onFocusOut()" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef((() => ToggleButtonComponent)),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<ng-content *ngIf=\"!checked\" select=\"button[kirby-button][unchecked]\"></ng-content>\n<ng-content *ngIf=\"checked\" select=\"button[kirby-button][checked]\"></ng-content>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ToggleButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ToggleButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kirby-toggle-button', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-content *ngIf=\"!checked\" select=\"button[kirby-button][unchecked]\"></ng-content>\n<ng-content *ngIf=\"checked\" select=\"button[kirby-button][checked]\"></ng-content>\n" }]
+            args: [{ selector: 'kirby-toggle-button', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef((() => ToggleButtonComponent)),
+                            multi: true,
+                        },
+                    ], template: "<ng-content *ngIf=\"!checked\" select=\"button[kirby-button][unchecked]\"></ng-content>\n<ng-content *ngIf=\"checked\" select=\"button[kirby-button][checked]\"></ng-content>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { checked: [{
                 type: Input
             }], checkChanged: [{
@@ -37,15 +102,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
             }], onClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
+            }], onFocusOut: [{
+                type: HostListener,
+                args: ['focusout']
             }] } });
 
 const DECLARATIONS = [ToggleButtonComponent];
 class ToggleButtonModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ToggleButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.4", ngImport: i0, type: ToggleButtonModule, declarations: [ToggleButtonComponent], imports: [CommonModule], exports: [ToggleButtonComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ToggleButtonModule, imports: [CommonModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ToggleButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: ToggleButtonModule, declarations: [ToggleButtonComponent], imports: [CommonModule], exports: [ToggleButtonComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ToggleButtonModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ToggleButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ToggleButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...DECLARATIONS],

package/fesm2022/kirbydesign-designsystem-toggle-button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-designsystem-toggle-button.mjs","sources":["../../toggle-button/src/toggle-button.component.ts","../../toggle-button/src/toggle-button.component.html","../../toggle-button/src/toggle-button.module.ts","../../toggle-button/src/kirbydesign-designsystem-toggle-button.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ElementRef,\n  EventEmitter,\n  HostListener,\n  Input,\n  Output,\n} from '@angular/core';\n\n@Component({\n  selector: 'kirby-toggle-button',\n  templateUrl: './toggle-button.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: false,\n})\nexport class ToggleButtonComponent {\n  @Input() checked: boolean;\n  @Output() checkChanged = new EventEmitter<boolean>();\n\n  constructor(\n    private elementRef: ElementRef<HTMLElement>,\n    private cdr: ChangeDetectorRef\n  ) {}\n\n  @HostListener('click', ['$event'])\n  onClick(event: PointerEvent) {\n    const targetElement = event.target as HTMLElement;\n    const buttonEnabled = targetElement.closest('button[kirby-button]:not(:disabled)');\n\n    if (!buttonEnabled) return;\n\n    this.checked = !this.checked;\n    this.checkChanged.emit(this.checked);\n    this.focusToggledButton();\n  }\n\n  focusToggledButton() {\n    // force re-render to ensure that the new button is in the dom\n    this.cdr.detectChanges();\n\n    const buttonToFocus = this.elementRef.nativeElement.querySelector(\n      'button[kirby-button]'\n    ) as HTMLButtonElement;\n\n    buttonToFocus?.focus();\n  }\n}\n","<ng-content *ngIf=\"!checked\" select=\"button[kirby-button][unchecked]\"></ng-content>\n<ng-content *ngIf=\"checked\" select=\"button[kirby-button][checked]\"></ng-content>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { ToggleButtonComponent } from './toggle-button.component';\n\nconst DECLARATIONS = [ToggleButtonComponent];\n\n@NgModule({\n  declarations: [...DECLARATIONS],\n  imports: [CommonModule],\n  exports: [...DECLARATIONS],\n})\nexport class ToggleButtonModule {}\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-toggle-button.mjs","sources":["../../toggle-button/src/toggle-button.component.ts","../../toggle-button/src/toggle-button.component.html","../../toggle-button/src/toggle-button.module.ts","../../toggle-button/src/kirbydesign-designsystem-toggle-button.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ElementRef,\n  EventEmitter,\n  forwardRef,\n  HostListener,\n  Input,\n  Output,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Component({\n  selector: 'kirby-toggle-button',\n  templateUrl: './toggle-button.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: false,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => ToggleButtonComponent),\n      multi: true,\n    },\n  ],\n})\nexport class ToggleButtonComponent implements ControlValueAccessor {\n  @Input() checked: boolean;\n  @Output() checkChanged = new EventEmitter<boolean>();\n\n  constructor(\n    private elementRef: ElementRef<HTMLElement>,\n    private cdr: ChangeDetectorRef\n  ) {}\n\n  @HostListener('click', ['$event'])\n  onClick(event: PointerEvent) {\n    const targetElement = event.target as HTMLElement;\n    const buttonEnabled = targetElement.closest('button[kirby-button]:not(:disabled)');\n\n    if (!buttonEnabled) return;\n\n    this.checked = !this.checked;\n    this.onChange(this.checked);\n    this.onTouched();\n    this.checkChanged.emit(this.checked);\n    this.focusToggledButton();\n  }\n\n  @HostListener('focusout')\n  onFocusOut() {\n    this.onTouched();\n  }\n\n  focusToggledButton() {\n    // force re-render to ensure that the new button is in the dom\n    this.cdr.detectChanges();\n\n    const buttonToFocus = this.elementRef.nativeElement.querySelector(\n      'button[kirby-button]'\n    ) as HTMLButtonElement;\n\n    buttonToFocus?.focus();\n  }\n\n  /**\n   * Sets the toggle button's value. Part of the ControlValueAccessor interface\n   * required to integrate with Angular's core forms API.\n   *\n   * @param checked New value to be written to the model.\n   */\n  writeValue(checked: boolean): void {\n    if (this.checked !== checked) {\n      this.checked = checked;\n      this.cdr.markForCheck();\n    }\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-empty-function\n  private onChange = (_checked: boolean) => {};\n  // eslint-disable-next-line no-empty-function, @typescript-eslint/no-empty-function\n  private onTouched = () => {};\n\n  /**\n   * Saves a callback function to be invoked when the toggle button'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: (checked: boolean) => void): void {\n    this.onChange = fn;\n  }\n\n  /**\n   * Saves a callback function to be invoked when the toggle button 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: () => void): void {\n    this.onTouched = fn;\n  }\n\n  /**\n   * Disables the toggle button. 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.elementRef.nativeElement\n      .querySelector('button[kirby-button]')\n      ?.toggleAttribute('disabled', isDisabled);\n  }\n}\n","<ng-content *ngIf=\"!checked\" select=\"button[kirby-button][unchecked]\"></ng-content>\n<ng-content *ngIf=\"checked\" select=\"button[kirby-button][checked]\"></ng-content>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { ToggleButtonComponent } from './toggle-button.component';\n\nconst DECLARATIONS = [ToggleButtonComponent];\n\n@NgModule({\n  declarations: [...DECLARATIONS],\n  imports: [CommonModule],\n  exports: [...DECLARATIONS],\n})\nexport class ToggleButtonModule {}\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-toggle.mjs

@@ -1,16 +1,26 @@
+import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, forwardRef, Component, ChangeDetectionStrategy, Input, HostBinding, Output } from '@angular/core';
+import { EventEmitter, ElementRef, forwardRef, Output, HostBinding, Input, ViewChild, ChangeDetectionStrategy, Component } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { IonToggle } from '@ionic/angular/standalone';
+import { inheritAriaLabelText, setAccessibleLabel } from '@kirbydesign/designsystem/shared';
+import * as i1 from '@kirbydesign/designsystem/helpers';
+import { IonicElementPartHelper } from '@kirbydesign/designsystem/helpers';
 
 class ToggleComponent {
-    constructor(cdr, elementRef) {
+    get _isDisabled() {
+        return this.disabled ? 'disabled' : null;
+    }
+    constructor(cdr, elementRef, ionicElementPartHelper) {
         this.cdr = cdr;
         this.elementRef = elementRef;
+        this.ionicElementPartHelper = ionicElementPartHelper;
         this.checked = false;
         this.disabled = false;
         this.checkedChange = new EventEmitter();
+        this._justify = 'start';
+        this._labelPlacement = 'start';
         this._pressed = false;
         // Initialize default ControlValueAccessor callback functions (noop)
         // eslint-disable-next-line no-empty-function
@@ -19,19 +29,32 @@ class ToggleComponent {
         this._onTouched = () => { };
     }
     ngOnInit() {
-        this.inheritAriaAttributes();
-    }
-    inheritAriaAttributes() {
-        const el = this.elementRef.nativeElement;
-        const attribute = 'aria-label';
-        if (el.hasAttribute(attribute)) {
-            const value = el.getAttribute(attribute);
-            el.removeAttribute(attribute);
-            this._ariaLabel = value;
+        /**
+         * We cannot query ion-toggle for slotted content at this point as the slot has not been rendered.
+         * But we need to know if content is slotted to set justify and labelPlacement BEFORE ion-toggle is rendered.
+         * So it has to be done by querying an additional wrapper around the default content slot like this.
+         */
+        this._hasSlottedContent = this.elementRef.nativeElement
+            .querySelector('.default-content')
+            .hasChildNodes();
+        const slot = this.elementRef.nativeElement.getAttribute('slot');
+        if (slot === 'end' && this._hasSlottedContent) {
+            this._justify = 'space-between';
+        }
+        if (slot === 'start' && this._hasSlottedContent) {
+            this._labelPlacement = 'end';
         }
     }
-    get _isDisabled() {
-        return this.disabled ? 'disabled' : null;
+    ngAfterViewInit() {
+        this.ionicElementPartHelper.setPart('label', this.ionToggleElement, '.toggle-wrapper');
+        this.ionicElementPartHelper.setPart('label-text-wrapper', this.ionToggleElement, '.label-text-wrapper');
+    }
+    ngAfterContentInit() {
+        this._labelText = inheritAriaLabelText(this.elementRef.nativeElement);
+        if (!this._labelText && !this._hasSlottedContent) {
+            // if no label has been set try to find a label in an item and use its text content
+            this._labelText = setAccessibleLabel(this.elementRef.nativeElement);
+        }
     }
     onCheckedChange(checked) {
         this.checked = checked;
@@ -84,31 +107,39 @@ class ToggleComponent {
         this.disabled = isDisabled;
         this.cdr.detectChanges();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ToggleComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: ToggleComponent, isStandalone: true, selector: "kirby-toggle", inputs: { checked: "checked", disabled: "disabled" }, outputs: { checkedChange: "checkedChange" }, host: { properties: { "attr.disabled": "this._isDisabled" } }, providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ToggleComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.IonicElementPartHelper }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: ToggleComponent, isStandalone: true, selector: "kirby-toggle", inputs: { checked: "checked", disabled: "disabled" }, outputs: { checkedChange: "checkedChange" }, host: { properties: { "attr.disabled": "this._isDisabled", "class.has-hidden-label": "this._labelText" } }, providers: [
+            IonicElementPartHelper,
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef((() => ToggleComponent)),
                 multi: true,
             },
-        ], ngImport: i0, template: "<ion-toggle\n  [checked]=\"checked\"\n  [disabled]=\"disabled\"\n  [class.interaction-state-active]=\"_pressed\"\n  (keydown.space)=\"_onActive()\"\n  (keyup.space)=\"_onInactive()\"\n  (blur)=\"_onInactive()\"\n  (ionChange)=\"onCheckedChange($event.detail.checked)\"\n  [attr.aria-label]=\"_ariaLabel\"\n>\n  <ng-content></ng-content>\n</ion-toggle>\n", styles: [":host{display:inline-flex}@media (hover: hover) and (pointer: fine){ion-toggle{overflow:visible;contain:none}ion-toggle:focus-within::part(track){transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover){ion-toggle:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--track-background: rgb(119.28, 119.28, 119.28);--handle-background: rgb(244.8, 244.8, 244.8);--track-background-checked: rgb(45.030660793, 192.689339207, 114.1474889868);--handle-background-checked: rgb(244.8, 244.8, 244.8)}}ion-toggle:active,ion-toggle.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--track-background: rgb(107.92, 107.92, 107.92);--handle-background: rgb(234.6, 234.6, 234.6);--track-background-checked: rgb(40.7420264317, 174.3379735683, 103.2762995595);--handle-background-checked: rgb(234.6, 234.6, 234.6)}ion-toggle{--track-background: var(--kirby-semi-dark);--handle-background: var(--kirby-white);--track-background-checked: var(--kirby-success);--handle-background-checked: var(--kirby-white);--handle-transition: .2s;--handle-box-shadow: 0 1px 24px 0 rgba(28, 28, 28, .04);--handle-height: 28px;--handle-width: 28px;--border-radius: 16px}ion-toggle::part(track){height:32px}ion-toggle.in-item.legacy-toggle{padding:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonToggle, selector: "ion-toggle", inputs: ["checked", "color", "disabled", "enableOnOffLabels", "justify", "labelPlacement", "mode", "name", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "ionToggleElement", first: true, predicate: IonToggle, descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<ion-toggle\n  [checked]=\"checked\"\n  [disabled]=\"disabled\"\n  [class.interaction-state-active]=\"_pressed\"\n  (keydown.space)=\"_onActive()\"\n  (keyup.space)=\"_onInactive()\"\n  (blur)=\"_onInactive()\"\n  (ionChange)=\"onCheckedChange($event.detail.checked)\"\n  [justify]=\"_justify\"\n  [labelPlacement]=\"_labelPlacement\"\n>\n  <span class=\"hidden-label\" *ngIf=\"_labelText\">{{ _labelText }}</span>\n  <span class=\"default-content\">\n    <ng-content></ng-content>\n  </span>\n</ion-toggle>\n", styles: [":host{display:inline-flex}:host:has(ion-toggle.in-item.toggle-justify-space-between){width:100%}:host.has-hidden-label{position:initial}:host.has-hidden-label[slot=end] ion-toggle{margin-inline-start:12px}:host.has-hidden-label ion-toggle{position:initial}:host.has-hidden-label ion-toggle::part(label){position:initial}:host.has-hidden-label ion-toggle.in-item::part(label-text-wrapper){margin-inline:0}:host.has-hidden-label .hidden-label{position:absolute;inset:0;opacity:0}@media (hover: hover) and (pointer: fine){ion-toggle{overflow:visible;contain:none}ion-toggle:focus-within::part(track){transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover){ion-toggle:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--track-background: rgb(119.28, 119.28, 119.28);--handle-background: rgb(244.8, 244.8, 244.8);--track-background-checked: rgb(45.030660793, 192.689339207, 114.1474889868);--handle-background-checked: rgb(244.8, 244.8, 244.8)}}ion-toggle:active,ion-toggle.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--track-background: rgb(107.92, 107.92, 107.92);--handle-background: rgb(234.6, 234.6, 234.6);--track-background-checked: rgb(40.7420264317, 174.3379735683, 103.2762995595);--handle-background-checked: rgb(234.6, 234.6, 234.6)}ion-toggle{--track-background: var(--kirby-semi-dark);--handle-background: var(--kirby-white);--track-background-checked: var(--kirby-success);--handle-background-checked: var(--kirby-white);--handle-transition: .2s;--handle-box-shadow: 0 1px 24px 0 rgba(28, 28, 28, .04);--handle-height: 28px;--handle-width: 28px;--border-radius: 16px}ion-toggle::part(track){height:32px}ion-toggle ::part(label-text-wrapper){line-height:24px;white-space:pre-line}ion-toggle.in-item::part(label){align-items:center;padding-inline:0}ion-toggle.in-item::part(label),ion-toggle.in-item::part(label-text-wrapper){margin-block:0}ion-toggle.in-item.toggle-label-placement-start::part(label-text-wrapper){margin-inline:0 12px}ion-toggle.in-item.toggle-label-placement-end::part(label-text-wrapper){margin-inline:12px 0}ion-toggle.in-item.legacy-toggle{padding:0}:host-context(kirby-item){z-index:1}:host-context(kirby-item) ion-toggle{margin:0}:host-context(kirby-item)[slot=start]{margin-inline-end:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IonToggle, selector: "ion-toggle", inputs: ["checked", "color", "disabled", "enableOnOffLabels", "justify", "labelPlacement", "mode", "name", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ToggleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ToggleComponent, decorators: [{
             type: Component,
             args: [{ imports: [CommonModule, IonToggle], selector: 'kirby-toggle', providers: [
+                        IonicElementPartHelper,
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef((() => ToggleComponent)),
                             multi: true,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-toggle\n  [checked]=\"checked\"\n  [disabled]=\"disabled\"\n  [class.interaction-state-active]=\"_pressed\"\n  (keydown.space)=\"_onActive()\"\n  (keyup.space)=\"_onInactive()\"\n  (blur)=\"_onInactive()\"\n  (ionChange)=\"onCheckedChange($event.detail.checked)\"\n  [attr.aria-label]=\"_ariaLabel\"\n>\n  <ng-content></ng-content>\n</ion-toggle>\n", styles: [":host{display:inline-flex}@media (hover: hover) and (pointer: fine){ion-toggle{overflow:visible;contain:none}ion-toggle:focus-within::part(track){transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover){ion-toggle:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--track-background: rgb(119.28, 119.28, 119.28);--handle-background: rgb(244.8, 244.8, 244.8);--track-background-checked: rgb(45.030660793, 192.689339207, 114.1474889868);--handle-background-checked: rgb(244.8, 244.8, 244.8)}}ion-toggle:active,ion-toggle.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--track-background: rgb(107.92, 107.92, 107.92);--handle-background: rgb(234.6, 234.6, 234.6);--track-background-checked: rgb(40.7420264317, 174.3379735683, 103.2762995595);--handle-background-checked: rgb(234.6, 234.6, 234.6)}ion-toggle{--track-background: var(--kirby-semi-dark);--handle-background: var(--kirby-white);--track-background-checked: var(--kirby-success);--handle-background-checked: var(--kirby-white);--handle-transition: .2s;--handle-box-shadow: 0 1px 24px 0 rgba(28, 28, 28, .04);--handle-height: 28px;--handle-width: 28px;--border-radius: 16px}ion-toggle::part(track){height:32px}ion-toggle.in-item.legacy-toggle{padding:0}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { checked: [{
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-toggle\n  [checked]=\"checked\"\n  [disabled]=\"disabled\"\n  [class.interaction-state-active]=\"_pressed\"\n  (keydown.space)=\"_onActive()\"\n  (keyup.space)=\"_onInactive()\"\n  (blur)=\"_onInactive()\"\n  (ionChange)=\"onCheckedChange($event.detail.checked)\"\n  [justify]=\"_justify\"\n  [labelPlacement]=\"_labelPlacement\"\n>\n  <span class=\"hidden-label\" *ngIf=\"_labelText\">{{ _labelText }}</span>\n  <span class=\"default-content\">\n    <ng-content></ng-content>\n  </span>\n</ion-toggle>\n", styles: [":host{display:inline-flex}:host:has(ion-toggle.in-item.toggle-justify-space-between){width:100%}:host.has-hidden-label{position:initial}:host.has-hidden-label[slot=end] ion-toggle{margin-inline-start:12px}:host.has-hidden-label ion-toggle{position:initial}:host.has-hidden-label ion-toggle::part(label){position:initial}:host.has-hidden-label ion-toggle.in-item::part(label-text-wrapper){margin-inline:0}:host.has-hidden-label .hidden-label{position:absolute;inset:0;opacity:0}@media (hover: hover) and (pointer: fine){ion-toggle{overflow:visible;contain:none}ion-toggle:focus-within::part(track){transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover){ion-toggle:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--track-background: rgb(119.28, 119.28, 119.28);--handle-background: rgb(244.8, 244.8, 244.8);--track-background-checked: rgb(45.030660793, 192.689339207, 114.1474889868);--handle-background-checked: rgb(244.8, 244.8, 244.8)}}ion-toggle:active,ion-toggle.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--track-background: rgb(107.92, 107.92, 107.92);--handle-background: rgb(234.6, 234.6, 234.6);--track-background-checked: rgb(40.7420264317, 174.3379735683, 103.2762995595);--handle-background-checked: rgb(234.6, 234.6, 234.6)}ion-toggle{--track-background: var(--kirby-semi-dark);--handle-background: var(--kirby-white);--track-background-checked: var(--kirby-success);--handle-background-checked: var(--kirby-white);--handle-transition: .2s;--handle-box-shadow: 0 1px 24px 0 rgba(28, 28, 28, .04);--handle-height: 28px;--handle-width: 28px;--border-radius: 16px}ion-toggle::part(track){height:32px}ion-toggle ::part(label-text-wrapper){line-height:24px;white-space:pre-line}ion-toggle.in-item::part(label){align-items:center;padding-inline:0}ion-toggle.in-item::part(label),ion-toggle.in-item::part(label-text-wrapper){margin-block:0}ion-toggle.in-item.toggle-label-placement-start::part(label-text-wrapper){margin-inline:0 12px}ion-toggle.in-item.toggle-label-placement-end::part(label-text-wrapper){margin-inline:12px 0}ion-toggle.in-item.legacy-toggle{padding:0}:host-context(kirby-item){z-index:1}:host-context(kirby-item) ion-toggle{margin:0}:host-context(kirby-item)[slot=start]{margin-inline-end:12px}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.IonicElementPartHelper }], propDecorators: { ionToggleElement: [{
+                type: ViewChild,
+                args: [IonToggle, { read: ElementRef, static: true }]
+            }], checked: [{
                 type: Input
             }], disabled: [{
                 type: Input
             }], _isDisabled: [{
                 type: HostBinding,
                 args: ['attr.disabled']
+            }], _labelText: [{
+                type: HostBinding,
+                args: ['class.has-hidden-label']
             }], checkedChange: [{
                 type: Output
             }] } });

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

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-designsystem-toggle.mjs","sources":["../../toggle/src/toggle.component.ts","../../toggle/src/toggle.component.html","../../toggle/src/kirbydesign-designsystem-toggle.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ElementRef,\n  EventEmitter,\n  forwardRef,\n  HostBinding,\n  Input,\n  OnInit,\n  Output,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { IonToggle } from '@ionic/angular/standalone';\n\n@Component({\n  imports: [CommonModule, IonToggle],\n  selector: 'kirby-toggle',\n  templateUrl: './toggle.component.html',\n  styleUrls: ['./toggle.component.scss'],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => ToggleComponent),\n      multi: true,\n    },\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ToggleComponent implements ControlValueAccessor, OnInit {\n  constructor(\n    private cdr: ChangeDetectorRef,\n    private elementRef: ElementRef<HTMLElement>\n  ) {}\n\n  ngOnInit(): void {\n    this.inheritAriaAttributes();\n  }\n\n  _ariaLabel: string;\n\n  private inheritAriaAttributes() {\n    const el = this.elementRef.nativeElement;\n    const attribute = 'aria-label';\n    if (el.hasAttribute(attribute)) {\n      const value = el.getAttribute(attribute);\n      el.removeAttribute(attribute);\n      this._ariaLabel = value;\n    }\n  }\n\n  @Input() checked: boolean = false;\n  @Input() disabled: boolean = false;\n  @HostBinding('attr.disabled')\n  get _isDisabled() {\n    return this.disabled ? 'disabled' : null;\n  }\n\n  @Output() checkedChange = new EventEmitter<boolean>();\n\n  _pressed = false;\n\n  onCheckedChange(checked: boolean): void {\n    this.checked = checked;\n    this._onChange(this.checked);\n    this.checkedChange.emit(this.checked);\n  }\n\n  _onActive() {\n    this._pressed = true;\n  }\n\n  _onInactive() {\n    this._pressed = false;\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 toggle'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  }\n  /**\n   * Saves a callback function to be invoked when the toggle'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   * Saves a callback function to be invoked when the toggle 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   * Disables the toggle. 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.detectChanges();\n  }\n}\n","<ion-toggle\n  [checked]=\"checked\"\n  [disabled]=\"disabled\"\n  [class.interaction-state-active]=\"_pressed\"\n  (keydown.space)=\"_onActive()\"\n  (keyup.space)=\"_onInactive()\"\n  (blur)=\"_onInactive()\"\n  (ionChange)=\"onCheckedChange($event.detail.checked)\"\n  [attr.aria-label]=\"_ariaLabel\"\n>\n  <ng-content></ng-content>\n</ion-toggle>\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-toggle.mjs","sources":["../../toggle/src/toggle.component.ts","../../toggle/src/toggle.component.html","../../toggle/src/kirbydesign-designsystem-toggle.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\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';\nimport { IonToggle } from '@ionic/angular/standalone';\nimport { inheritAriaLabelText, setAccessibleLabel } from '@kirbydesign/designsystem/shared';\nimport { IonicElementPartHelper } from '@kirbydesign/designsystem/helpers';\n\n@Component({\n  imports: [CommonModule, IonToggle],\n  selector: 'kirby-toggle',\n  templateUrl: './toggle.component.html',\n  styleUrls: ['./toggle.component.scss'],\n  providers: [\n    IonicElementPartHelper,\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => ToggleComponent),\n      multi: true,\n    },\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ToggleComponent\n  implements ControlValueAccessor, OnInit, AfterViewInit, AfterContentInit\n{\n  @ViewChild(IonToggle, { read: ElementRef, static: true })\n  private ionToggleElement?: ElementRef<HTMLIonToggleElement>;\n\n  @Input() checked: boolean = false;\n\n  @Input() disabled: boolean = false;\n  @HostBinding('attr.disabled')\n  get _isDisabled() {\n    return this.disabled ? 'disabled' : null;\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' = 'start';\n  _hasSlottedContent: boolean;\n  _pressed = false;\n\n  constructor(\n    private cdr: ChangeDetectorRef,\n    private elementRef: ElementRef<HTMLElement>,\n    private ionicElementPartHelper: IonicElementPartHelper\n  ) {}\n\n  ngOnInit(): void {\n    /**\n     * We cannot query ion-toggle 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-toggle 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.elementRef.nativeElement\n      .querySelector('.default-content')\n      .hasChildNodes();\n\n    const slot = this.elementRef.nativeElement.getAttribute('slot');\n    if (slot === 'end' && this._hasSlottedContent) {\n      this._justify = 'space-between';\n    }\n\n    if (slot === 'start' && this._hasSlottedContent) {\n      this._labelPlacement = 'end';\n    }\n  }\n\n  ngAfterViewInit(): void {\n    this.ionicElementPartHelper.setPart('label', this.ionToggleElement, '.toggle-wrapper');\n    this.ionicElementPartHelper.setPart(\n      'label-text-wrapper',\n      this.ionToggleElement,\n      '.label-text-wrapper'\n    );\n  }\n\n  ngAfterContentInit(): void {\n    this._labelText = inheritAriaLabelText(this.elementRef.nativeElement);\n\n    if (!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.elementRef.nativeElement);\n    }\n  }\n\n  onCheckedChange(checked: boolean): void {\n    this.checked = checked;\n    this._onChange(this.checked);\n    this.checkedChange.emit(this.checked);\n  }\n\n  _onActive() {\n    this._pressed = true;\n  }\n\n  _onInactive() {\n    this._pressed = false;\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 toggle'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  }\n  /**\n   * Saves a callback function to be invoked when the toggle'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   * Saves a callback function to be invoked when the toggle 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   * Disables the toggle. 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.detectChanges();\n  }\n}\n","<ion-toggle\n  [checked]=\"checked\"\n  [disabled]=\"disabled\"\n  [class.interaction-state-active]=\"_pressed\"\n  (keydown.space)=\"_onActive()\"\n  (keyup.space)=\"_onInactive()\"\n  (blur)=\"_onInactive()\"\n  (ionChange)=\"onCheckedChange($event.detail.checked)\"\n  [justify]=\"_justify\"\n  [labelPlacement]=\"_labelPlacement\"\n>\n  <span class=\"hidden-label\" *ngIf=\"_labelText\">{{ _labelText }}</span>\n  <span class=\"default-content\">\n    <ng-content></ng-content>\n  </span>\n</ion-toggle>\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-types.mjs

@@ -5,10 +5,10 @@ class WindowRef {
     get nativeWindow() {
         return window;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WindowRef, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WindowRef, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WindowRef, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WindowRef, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WindowRef, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WindowRef, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',