npm - @kirbydesign/designsystem - Versions diffs - 9.0.0 → 9.1.0 - Mend

@kirbydesign/designsystem 9.0.0 → 9.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (82) hide show

package/fesm2022/kirbydesign-designsystem-card.mjs CHANGED Viewed

@@ -27,12 +27,15 @@ class CardHeaderComponent {
         this.flagged = null;
         this.hasPadding = true;
     }
+    get _cssClass() {
+        return [this.flagged, this.flagged ? 'flagged' : null];
+    }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: CardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: CardHeaderComponent, selector: "kirby-card-header", inputs: { title: "title", subtitle: "subtitle", isTitleBold: "isTitleBold", flagged: "flagged", hasPadding: "hasPadding" }, host: { properties: { "class": "this.flagged", "class.has-padding": "this.hasPadding" } }, ngImport: i0, template: "<header>\n  <h2 *ngIf=\"title\" [class.bold]=\"isTitleBold\">{{ title }}</h2>\n  <h4 *ngIf=\"subtitle\">{{ subtitle }}</h4>\n  <ng-content></ng-content>\n</header>\n", styles: [":host{display:block;border-top-left-radius:16px;border-top-right-radius:16px;text-align:center;padding:0;color:var(--kirby-card-header-color);background-color:var(--kirby-card-header-background-color)}:host.has-padding{padding:var(--kirby-internal-card-header-padding, 16px)}h2{font-size:16px;font-weight:400;margin:0 0 var(--kirby-internal-card-header-margin-bottom, 8px);line-height:var(--kirby-internal-card-header-line-height, 28px)}h2.bold{font-weight:700}h4{font-size:14px;margin:0;font-weight:400}:host(.danger){--kirby-card-header-background-color: var(--kirby-danger);--kirby-card-header-color: var(--kirby-danger-contrast)}:host(.warning){--kirby-card-header-background-color: var(--kirby-warning);--kirby-card-header-color: var(--kirby-warning-contrast)}:host(.success){--kirby-card-header-background-color: var(--kirby-success);--kirby-card-header-color: var(--kirby-success-contrast)}:host(.info){--kirby-card-header-background-color: var(--kirby-semi-light);--kirby-card-header-color: var(--kirby-semi-light-contrast)}:host(.danger,.warning,.success,.info){--kirby-internal-card-header-padding: 2px 8px}:host(.danger,.warning,.success,.info) h2{--kirby-internal-card-header-line-height: 24px;--kirby-internal-card-header-margin-bottom: 0px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: CardHeaderComponent, selector: "kirby-card-header", inputs: { title: "title", subtitle: "subtitle", isTitleBold: "isTitleBold", flagged: "flagged", hasPadding: "hasPadding" }, host: { properties: { "class.has-padding": "this.hasPadding", "class": "this._cssClass" } }, ngImport: i0, template: "<header>\n  <h2 *ngIf=\"title\" [class.bold]=\"isTitleBold\">{{ title }}</h2>\n  <h4 *ngIf=\"subtitle\">{{ subtitle }}</h4>\n  <ng-content></ng-content>\n</header>\n", styles: [":host{display:block;border-top-left-radius:16px;border-top-right-radius:16px;text-align:center;padding:0;color:var(--kirby-card-header-color);background-color:var(--kirby-card-header-background-color)}:host.has-padding{padding:var(--kirby-internal-card-header-padding, 16px)}h2{font-size:16px;font-weight:400;margin:0 0 var(--kirby-internal-card-header-margin-bottom, 8px);line-height:var(--kirby-internal-card-header-line-height, 28px)}h2.bold{font-weight:700}h4{font-size:14px;margin:0;font-weight:400}:host(.success){--kirby-card-header-background-color: var(--kirby-decoration-color-green-30);--kirby-card-header-color: var(--kirby-black)}:host(.warning){--kirby-card-header-background-color: var(--kirby-decoration-color-yellow-30);--kirby-card-header-color: var(--kirby-black)}:host(.danger){--kirby-card-header-background-color: var(--kirby-decoration-color-red-30);--kirby-card-header-color: var(--kirby-black)}:host(.info){--kirby-card-header-background-color: var(--kirby-semi-light);--kirby-card-header-color: var(--kirby-black)}:host(.flagged){--kirby-internal-card-header-padding: 2px 8px}:host(.flagged) h2{--kirby-internal-card-header-line-height: 24px;--kirby-internal-card-header-margin-bottom: 0px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: CardHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kirby-card-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<header>\n  <h2 *ngIf=\"title\" [class.bold]=\"isTitleBold\">{{ title }}</h2>\n  <h4 *ngIf=\"subtitle\">{{ subtitle }}</h4>\n  <ng-content></ng-content>\n</header>\n", styles: [":host{display:block;border-top-left-radius:16px;border-top-right-radius:16px;text-align:center;padding:0;color:var(--kirby-card-header-color);background-color:var(--kirby-card-header-background-color)}:host.has-padding{padding:var(--kirby-internal-card-header-padding, 16px)}h2{font-size:16px;font-weight:400;margin:0 0 var(--kirby-internal-card-header-margin-bottom, 8px);line-height:var(--kirby-internal-card-header-line-height, 28px)}h2.bold{font-weight:700}h4{font-size:14px;margin:0;font-weight:400}:host(.danger){--kirby-card-header-background-color: var(--kirby-danger);--kirby-card-header-color: var(--kirby-danger-contrast)}:host(.warning){--kirby-card-header-background-color: var(--kirby-warning);--kirby-card-header-color: var(--kirby-warning-contrast)}:host(.success){--kirby-card-header-background-color: var(--kirby-success);--kirby-card-header-color: var(--kirby-success-contrast)}:host(.info){--kirby-card-header-background-color: var(--kirby-semi-light);--kirby-card-header-color: var(--kirby-semi-light-contrast)}:host(.danger,.warning,.success,.info){--kirby-internal-card-header-padding: 2px 8px}:host(.danger,.warning,.success,.info) h2{--kirby-internal-card-header-line-height: 24px;--kirby-internal-card-header-margin-bottom: 0px}\n"] }]
+            args: [{ selector: 'kirby-card-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<header>\n  <h2 *ngIf=\"title\" [class.bold]=\"isTitleBold\">{{ title }}</h2>\n  <h4 *ngIf=\"subtitle\">{{ subtitle }}</h4>\n  <ng-content></ng-content>\n</header>\n", styles: [":host{display:block;border-top-left-radius:16px;border-top-right-radius:16px;text-align:center;padding:0;color:var(--kirby-card-header-color);background-color:var(--kirby-card-header-background-color)}:host.has-padding{padding:var(--kirby-internal-card-header-padding, 16px)}h2{font-size:16px;font-weight:400;margin:0 0 var(--kirby-internal-card-header-margin-bottom, 8px);line-height:var(--kirby-internal-card-header-line-height, 28px)}h2.bold{font-weight:700}h4{font-size:14px;margin:0;font-weight:400}:host(.success){--kirby-card-header-background-color: var(--kirby-decoration-color-green-30);--kirby-card-header-color: var(--kirby-black)}:host(.warning){--kirby-card-header-background-color: var(--kirby-decoration-color-yellow-30);--kirby-card-header-color: var(--kirby-black)}:host(.danger){--kirby-card-header-background-color: var(--kirby-decoration-color-red-30);--kirby-card-header-color: var(--kirby-black)}:host(.info){--kirby-card-header-background-color: var(--kirby-semi-light);--kirby-card-header-color: var(--kirby-black)}:host(.flagged){--kirby-internal-card-header-padding: 2px 8px}:host(.flagged) h2{--kirby-internal-card-header-line-height: 24px;--kirby-internal-card-header-margin-bottom: 0px}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
             }], subtitle: [{
@@ -40,15 +43,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
             }], isTitleBold: [{
                 type: Input
             }], flagged: [{
-                type: HostBinding,
-                args: ['class']
-            }, {
                 type: Input
             }], hasPadding: [{
                 type: HostBinding,
                 args: ['class.has-padding']
             }, {
                 type: Input
+            }], _cssClass: [{
+                type: HostBinding,
+                args: ['class']
             }] } });
 class CardComponent {

package/fesm2022/kirbydesign-designsystem-card.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"kirbydesign-designsystem-card.mjs","sources":["../../../../libs/designsystem/card/src/card-footer/card-footer.component.ts","../../../../libs/designsystem/card/src/card-footer/card-footer.component.html","../../../../libs/designsystem/card/src/card-header/card-header.component.ts","../../../../libs/designsystem/card/src/card-header/card-header.component.html","../../../../libs/designsystem/card/src/card.component.ts","../../../../libs/designsystem/card/src/card.component.html","../../../../libs/designsystem/card/src/card-as-button/card-as-button.directive.ts","../../../../libs/designsystem/card/src/card.module.ts","../../../../libs/designsystem/card/src/kirbydesign-designsystem-card.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';\n\n@Component({\n selector: 'kirby-card-footer',\n templateUrl: './card-footer.component.html',\n styleUrls: ['./card-footer.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CardFooterComponent {\n @HostBinding('class.has-padding')\n @Input()\n hasPadding: boolean = true;\n}\n","<footer>\n <ng-content></ng-content>\n</footer>\n","import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';\n\nimport { CardFlagLevel } from '../card-flag-level';\n\n@Component({\n selector: 'kirby-card-header',\n templateUrl: './card-header.component.html',\n styleUrls: ['./card-header.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CardHeaderComponent {\n @Input() title: string;\n @Input() subtitle: string;\n @Input() isTitleBold: boolean;\n @HostBinding('class')\n @Input()\n flagged: CardFlagLevel = null;\n @HostBinding('class.has-padding')\n @Input()\n hasPadding: boolean = true;\n}\n","<header>\n <h2 ngIf=\"title\" [class.bold]=\"isTitleBold\">{{ title }}</h2>\n <h4 ngIf=\"subtitle\">{{ subtitle }}</h4>\n <ng-content></ng-content>\n</header>\n","import {\n Component,\n ElementRef,\n HostBinding,\n Input,\n OnDestroy,\n OnInit,\n Renderer2,\n} from '@angular/core';\nimport { ResizeObserverService } from '@kirbydesign/designsystem/shared';\n\n@Component({\n selector: 'kirby-card',\n templateUrl: './card.component.html',\n styleUrls: ['./card.component.scss'],\n})\nexport class CardComponent implements OnInit, OnDestroy {\n @Input() title: string;\n @Input() subtitle: string;\n\n @HostBinding('style.--kirby-card-background-image')\n _backgroundImage: string;\n\n @Input()\n set backgroundImageUrl(value: string) {\n this._backgroundImage = `url('${value}')`;\n }\n\n @Input()\n hasPadding: boolean;\n\n private sizesSortedByBreakpoint = this.sortSizesByBreakpoint({\n small: 360,\n medium: 720,\n large: 1024,\n });\n\n @Input()\n set sizes(value: { [size: string]: number }) {\n if (typeof value === 'string') {\n console.error(\n 'Sizes property cannot be a string. Please ensure the size property is bound as an expression:\\n[sizes]=\"{...}\"'\n );\n }\n this.sizesSortedByBreakpoint = this.sortSizesByBreakpoint(value);\n }\n\n @HostBinding('class.flat')\n @Input()\n flat: boolean = false;\n\n constructor(\n private elementRef: ElementRef,\n private resizeObserverService: ResizeObserverService,\n private renderer: Renderer2\n ) {}\n\n ngOnInit() {\n this.resizeObserverService.observe(this.elementRef, (entry) => this.handleResize(entry));\n }\n\n ngOnDestroy() {\n this.resizeObserverService.unobserve(this.elementRef);\n }\n\n private sortSizesByBreakpoint(sizes: { [size: string]: number }): [string, number][] {\n return Object.entries(sizes).sort(this.compareSizesByBreakpoint);\n }\n\n private compareSizesByBreakpoint(a: [string, number], b: [string, number]): number {\n return a[1] > b[1] ? 1 : b[1] > a[1] ? -1 : 0;\n }\n\n private handleResize(entry: ResizeObserverEntry) {\n const sizeAttributeName = 'size';\n const smallestBreakpointName = this.sizesSortedByBreakpoint[0][0];\n const smallestBreakpointWidth = this.sizesSortedByBreakpoint[0][1];\n if (entry.contentRect.width < smallestBreakpointWidth) {\n this.renderer.setAttribute(entry.target, sizeAttributeName, `<${smallestBreakpointName}`);\n } else {\n this.sizesSortedByBreakpoint.forEach(([size, width]) => {\n if (entry.contentRect.width >= width) {\n this.renderer.setAttribute(entry.target, sizeAttributeName, size);\n }\n });\n }\n }\n}\n","<div class=\"state-layer\" aria-hidden=\"true\"></div>\n<div class=\"content-layer\">\n <ng-content select=\"kirby-card-header\"></ng-content>\n <div class=\"content-wrapper\" [class.padding]=\"hasPadding\">\n <ng-content></ng-content>\n </div>\n <ng-content select=\"kirby-card-footer\"></ng-content>\n</div>\n","import { Directive, ElementRef, HostBinding, HostListener, OnInit, Optional } from '@angular/core';\n\nimport { CardComponent } from '../card.component';\n\n@Directive({\n // eslint-disable-next-line @angular-eslint/directive-selector\n selector: 'kirby-card[click]',\n})\nexport class CardAsButtonDirective implements OnInit {\n @HostBinding('attr.role') role: string = 'button';\n @HostBinding('attr.tabindex') tabindex: number = 0;\n\n @HostBinding('class.interaction-state-active') _pressed = false;\n constructor(@Optional() private card: CardComponent, private clickableElement: ElementRef) {}\n\n ngOnInit(): void {\n if (this.card) {\n this.card.flat = false;\n }\n }\n\n @HostListener('keydown.space', ['$event'])\n @HostListener('keydown.enter', ['$event'])\n _onKeydownHandler(event: KeyboardEvent) {\n this._pressed = true;\n this.clickableElement.nativeElement.click(event);\n /\n Prevent default event from firing so the UA wont\n * catch this event and e.g. scroll the page on space,\n * which is the default behavior in major browsers\n /\n\n event.preventDefault();\n }\n\n @HostListener('keyup.space')\n @HostListener('keyup.enter')\n @HostListener('blur')\n _onInactiveHandler() {\n this._pressed = false;\n }\n}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { ThemeColorDirective } from '@kirbydesign/designsystem/shared';\nimport { CardComponent } from './card.component';\nimport { CardHeaderComponent } from './card-header/card-header.component';\nimport { CardFooterComponent } from './card-footer/card-footer.component';\nimport { CardAsButtonDirective } from './card-as-button/card-as-button.directive';\n\nconst declarations = [\n CardComponent,\n CardFooterComponent,\n CardHeaderComponent,\n CardAsButtonDirective,\n];\n@NgModule({\n imports: [CommonModule, ThemeColorDirective],\n declarations: [...declarations],\n exports: [...declarations, ThemeColorDirective],\n})\nexport class CardModule {}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":["i1","i1.CardComponent"],"mappings":"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"}
1	+ {"version":3,"file":"kirbydesign-designsystem-card.mjs","sources":["../../../../libs/designsystem/card/src/card-footer/card-footer.component.ts","../../../../libs/designsystem/card/src/card-footer/card-footer.component.html","../../../../libs/designsystem/card/src/card-header/card-header.component.ts","../../../../libs/designsystem/card/src/card-header/card-header.component.html","../../../../libs/designsystem/card/src/card.component.ts","../../../../libs/designsystem/card/src/card.component.html","../../../../libs/designsystem/card/src/card-as-button/card-as-button.directive.ts","../../../../libs/designsystem/card/src/card.module.ts","../../../../libs/designsystem/card/src/kirbydesign-designsystem-card.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';\n\n@Component({\n selector: 'kirby-card-footer',\n templateUrl: './card-footer.component.html',\n styleUrls: ['./card-footer.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CardFooterComponent {\n @HostBinding('class.has-padding')\n @Input()\n hasPadding: boolean = true;\n}\n","<footer>\n <ng-content></ng-content>\n</footer>\n","import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';\n\nimport { CardFlagLevel } from '../card-flag-level';\n\n@Component({\n selector: 'kirby-card-header',\n templateUrl: './card-header.component.html',\n styleUrls: ['./card-header.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CardHeaderComponent {\n @Input() title: string;\n @Input() subtitle: string;\n @Input() isTitleBold: boolean;\n @Input()\n flagged: CardFlagLevel = null;\n @HostBinding('class.has-padding')\n @Input()\n hasPadding: boolean = true;\n\n @HostBinding('class')\n get _cssClass() {\n return [this.flagged, this.flagged ? 'flagged' : null];\n }\n}\n","<header>\n <h2 ngIf=\"title\" [class.bold]=\"isTitleBold\">{{ title }}</h2>\n <h4 ngIf=\"subtitle\">{{ subtitle }}</h4>\n <ng-content></ng-content>\n</header>\n","import {\n Component,\n ElementRef,\n HostBinding,\n Input,\n OnDestroy,\n OnInit,\n Renderer2,\n} from '@angular/core';\nimport { ResizeObserverService } from '@kirbydesign/designsystem/shared';\n\n@Component({\n selector: 'kirby-card',\n templateUrl: './card.component.html',\n styleUrls: ['./card.component.scss'],\n})\nexport class CardComponent implements OnInit, OnDestroy {\n @Input() title: string;\n @Input() subtitle: string;\n\n @HostBinding('style.--kirby-card-background-image')\n _backgroundImage: string;\n\n @Input()\n set backgroundImageUrl(value: string) {\n this._backgroundImage = `url('${value}')`;\n }\n\n @Input()\n hasPadding: boolean;\n\n private sizesSortedByBreakpoint = this.sortSizesByBreakpoint({\n small: 360,\n medium: 720,\n large: 1024,\n });\n\n @Input()\n set sizes(value: { [size: string]: number }) {\n if (typeof value === 'string') {\n console.error(\n 'Sizes property cannot be a string. Please ensure the size property is bound as an expression:\\n[sizes]=\"{...}\"'\n );\n }\n this.sizesSortedByBreakpoint = this.sortSizesByBreakpoint(value);\n }\n\n @HostBinding('class.flat')\n @Input()\n flat: boolean = false;\n\n constructor(\n private elementRef: ElementRef,\n private resizeObserverService: ResizeObserverService,\n private renderer: Renderer2\n ) {}\n\n ngOnInit() {\n this.resizeObserverService.observe(this.elementRef, (entry) => this.handleResize(entry));\n }\n\n ngOnDestroy() {\n this.resizeObserverService.unobserve(this.elementRef);\n }\n\n private sortSizesByBreakpoint(sizes: { [size: string]: number }): [string, number][] {\n return Object.entries(sizes).sort(this.compareSizesByBreakpoint);\n }\n\n private compareSizesByBreakpoint(a: [string, number], b: [string, number]): number {\n return a[1] > b[1] ? 1 : b[1] > a[1] ? -1 : 0;\n }\n\n private handleResize(entry: ResizeObserverEntry) {\n const sizeAttributeName = 'size';\n const smallestBreakpointName = this.sizesSortedByBreakpoint[0][0];\n const smallestBreakpointWidth = this.sizesSortedByBreakpoint[0][1];\n if (entry.contentRect.width < smallestBreakpointWidth) {\n this.renderer.setAttribute(entry.target, sizeAttributeName, `<${smallestBreakpointName}`);\n } else {\n this.sizesSortedByBreakpoint.forEach(([size, width]) => {\n if (entry.contentRect.width >= width) {\n this.renderer.setAttribute(entry.target, sizeAttributeName, size);\n }\n });\n }\n }\n}\n","<div class=\"state-layer\" aria-hidden=\"true\"></div>\n<div class=\"content-layer\">\n <ng-content select=\"kirby-card-header\"></ng-content>\n <div class=\"content-wrapper\" [class.padding]=\"hasPadding\">\n <ng-content></ng-content>\n </div>\n <ng-content select=\"kirby-card-footer\"></ng-content>\n</div>\n","import { Directive, ElementRef, HostBinding, HostListener, OnInit, Optional } from '@angular/core';\n\nimport { CardComponent } from '../card.component';\n\n@Directive({\n // eslint-disable-next-line @angular-eslint/directive-selector\n selector: 'kirby-card[click]',\n})\nexport class CardAsButtonDirective implements OnInit {\n @HostBinding('attr.role') role: string = 'button';\n @HostBinding('attr.tabindex') tabindex: number = 0;\n\n @HostBinding('class.interaction-state-active') _pressed = false;\n constructor(@Optional() private card: CardComponent, private clickableElement: ElementRef) {}\n\n ngOnInit(): void {\n if (this.card) {\n this.card.flat = false;\n }\n }\n\n @HostListener('keydown.space', ['$event'])\n @HostListener('keydown.enter', ['$event'])\n _onKeydownHandler(event: KeyboardEvent) {\n this._pressed = true;\n this.clickableElement.nativeElement.click(event);\n /\n Prevent default event from firing so the UA wont\n * catch this event and e.g. scroll the page on space,\n * which is the default behavior in major browsers\n /\n\n event.preventDefault();\n }\n\n @HostListener('keyup.space')\n @HostListener('keyup.enter')\n @HostListener('blur')\n _onInactiveHandler() {\n this._pressed = false;\n }\n}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { ThemeColorDirective } from '@kirbydesign/designsystem/shared';\nimport { CardComponent } from './card.component';\nimport { CardHeaderComponent } from './card-header/card-header.component';\nimport { CardFooterComponent } from './card-footer/card-footer.component';\nimport { CardAsButtonDirective } from './card-as-button/card-as-button.directive';\n\nconst declarations = [\n CardComponent,\n CardFooterComponent,\n CardHeaderComponent,\n CardAsButtonDirective,\n];\n@NgModule({\n imports: [CommonModule, ThemeColorDirective],\n declarations: [...declarations],\n exports: [...declarations, ThemeColorDirective],\n})\nexport class CardModule {}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":["i1","i1.CardComponent"],"mappings":";;;;;;;MAQa,mBAAmB,CAAA;AANhC,IAAA,WAAA,GAAA;QASE,IAAU,CAAA,UAAA,GAAY,IAAI,CAAC;AAC5B,KAAA;iIAJY,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAnB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,mBAAmB,iKCRhC,oDAGA,EAAA,MAAA,EAAA,CAAA,6OAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;2FDKa,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAN/B,SAAS;+BACE,mBAAmB,EAAA,eAAA,EAGZ,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,oDAAA,EAAA,MAAA,EAAA,CAAA,6OAAA,CAAA,EAAA,CAAA;8BAK/C,UAAU,EAAA,CAAA;sBAFT,WAAW;uBAAC,mBAAmB,CAAA;;sBAC/B,KAAK;;;MEAK,mBAAmB,CAAA;AANhC,IAAA,WAAA,GAAA;QAWE,IAAO,CAAA,OAAA,GAAkB,IAAI,CAAC;QAG9B,IAAU,CAAA,UAAA,GAAY,IAAI,CAAC;AAM5B,KAAA;AAJC,IAAA,IACI,SAAS,GAAA;AACX,QAAA,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,GAAG,SAAS,GAAG,IAAI,CAAC,CAAC;KACxD;iIAbU,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAnB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,mBAAmB,kRCVhC,uKAKA,EAAA,MAAA,EAAA,CAAA,osCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;2FDKa,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAN/B,SAAS;+BACE,mBAAmB,EAAA,eAAA,EAGZ,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,uKAAA,EAAA,MAAA,EAAA,CAAA,osCAAA,CAAA,EAAA,CAAA;8BAGtC,KAAK,EAAA,CAAA;sBAAb,KAAK;gBACG,QAAQ,EAAA,CAAA;sBAAhB,KAAK;gBACG,WAAW,EAAA,CAAA;sBAAnB,KAAK;gBAEN,OAAO,EAAA,CAAA;sBADN,KAAK;gBAIN,UAAU,EAAA,CAAA;sBAFT,WAAW;uBAAC,mBAAmB,CAAA;;sBAC/B,KAAK;gBAIF,SAAS,EAAA,CAAA;sBADZ,WAAW;uBAAC,OAAO,CAAA;;;MEJT,aAAa,CAAA;IAOxB,IACI,kBAAkB,CAAC,KAAa,EAAA;AAClC,QAAA,IAAI,CAAC,gBAAgB,GAAG,CAAQ,KAAA,EAAA,KAAK,IAAI,CAAC;KAC3C;IAWD,IACI,KAAK,CAAC,KAAiC,EAAA;AACzC,QAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;AAC7B,YAAA,OAAO,CAAC,KAAK,CACX,gHAAgH,CACjH,CAAC;AACH,SAAA;QACD,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC;KAClE;AAMD,IAAA,WAAA,CACU,UAAsB,EACtB,qBAA4C,EAC5C,QAAmB,EAAA;QAFnB,IAAU,CAAA,UAAA,GAAV,UAAU,CAAY;QACtB,IAAqB,CAAA,qBAAA,GAArB,qBAAqB,CAAuB;QAC5C,IAAQ,CAAA,QAAA,GAAR,QAAQ,CAAW;AAvBrB,QAAA,IAAA,CAAA,uBAAuB,GAAG,IAAI,CAAC,qBAAqB,CAAC;AAC3D,YAAA,KAAK,EAAE,GAAG;AACV,YAAA,MAAM,EAAE,GAAG;AACX,YAAA,KAAK,EAAE,IAAI;AACZ,SAAA,CAAC,CAAC;QAcH,IAAI,CAAA,IAAA,GAAY,KAAK,CAAC;KAMlB;IAEJ,QAAQ,GAAA;QACN,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC;KAC1F;IAED,WAAW,GAAA;QACT,IAAI,CAAC,qBAAqB,CAAC,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;KACvD;AAEO,IAAA,qBAAqB,CAAC,KAAiC,EAAA;AAC7D,QAAA,OAAO,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,wBAAwB,CAAC,CAAC;KAClE;IAEO,wBAAwB,CAAC,CAAmB,EAAE,CAAmB,EAAA;AACvE,QAAA,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;KAC/C;AAEO,IAAA,YAAY,CAAC,KAA0B,EAAA;QAC7C,MAAM,iBAAiB,GAAG,MAAM,CAAC;QACjC,MAAM,sBAAsB,GAAG,IAAI,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAClE,MAAM,uBAAuB,GAAG,IAAI,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACnE,QAAA,IAAI,KAAK,CAAC,WAAW,CAAC,KAAK,GAAG,uBAAuB,EAAE;AACrD,YAAA,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,KAAK,CAAC,MAAM,EAAE,iBAAiB,EAAE,CAAA,CAAA,EAAI,sBAAsB,CAAA,CAAE,CAAC,CAAC;AAC3F,SAAA;AAAM,aAAA;AACL,YAAA,IAAI,CAAC,uBAAuB,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,KAAI;AACrD,gBAAA,IAAI,KAAK,CAAC,WAAW,CAAC,KAAK,IAAI,KAAK,EAAE;AACpC,oBAAA,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,KAAK,CAAC,MAAM,EAAE,iBAAiB,EAAE,IAAI,CAAC,CAAC;AACnE,iBAAA;AACH,aAAC,CAAC,CAAC;AACJ,SAAA;KACF;iIAtEU,aAAa,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,EAAA,EAAA,KAAA,EAAAA,IAAA,CAAA,qBAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,SAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAb,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,aAAa,2TChB1B,gUAQA,EAAA,MAAA,EAAA,CAAA,+6OAAA,CAAA,EAAA,CAAA,CAAA,EAAA;;2FDQa,aAAa,EAAA,UAAA,EAAA,CAAA;kBALzB,SAAS;+BACE,YAAY,EAAA,QAAA,EAAA,gUAAA,EAAA,MAAA,EAAA,CAAA,+6OAAA,CAAA,EAAA,CAAA;+JAKb,KAAK,EAAA,CAAA;sBAAb,KAAK;gBACG,QAAQ,EAAA,CAAA;sBAAhB,KAAK;gBAGN,gBAAgB,EAAA,CAAA;sBADf,WAAW;uBAAC,qCAAqC,CAAA;gBAI9C,kBAAkB,EAAA,CAAA;sBADrB,KAAK;gBAMN,UAAU,EAAA,CAAA;sBADT,KAAK;gBAUF,KAAK,EAAA,CAAA;sBADR,KAAK;gBAYN,IAAI,EAAA,CAAA;sBAFH,WAAW;uBAAC,YAAY,CAAA;;sBACxB,KAAK;;;MExCK,qBAAqB,CAAA;IAKhC,WAAgC,CAAA,IAAmB,EAAU,gBAA4B,EAAA;QAAzD,IAAI,CAAA,IAAA,GAAJ,IAAI,CAAe;QAAU,IAAgB,CAAA,gBAAA,GAAhB,gBAAgB,CAAY;QAJ/D,IAAI,CAAA,IAAA,GAAW,QAAQ,CAAC;QACpB,IAAQ,CAAA,QAAA,GAAW,CAAC,CAAC;QAEJ,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;KAC6B;IAE7F,QAAQ,GAAA;QACN,IAAI,IAAI,CAAC,IAAI,EAAE;AACb,YAAA,IAAI,CAAC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;AACxB,SAAA;KACF;AAID,IAAA,iBAAiB,CAAC,KAAoB,EAAA;AACpC,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACrB,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;AACjD;;;;AAIG;QAEH,KAAK,CAAC,cAAc,EAAE,CAAC;KACxB;IAKD,kBAAkB,GAAA;AAChB,QAAA,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;KACvB;iIAhCU,qBAAqB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAAC,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;qHAArB,qBAAqB,EAAA,QAAA,EAAA,mBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,eAAA,EAAA,2BAAA,EAAA,eAAA,EAAA,2BAAA,EAAA,aAAA,EAAA,sBAAA,EAAA,aAAA,EAAA,sBAAA,EAAA,MAAA,EAAA,sBAAA,EAAA,EAAA,UAAA,EAAA,EAAA,WAAA,EAAA,WAAA,EAAA,eAAA,EAAA,eAAA,EAAA,gCAAA,EAAA,eAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA,EAAA;;2FAArB,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAJjC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;;AAET,oBAAA,QAAQ,EAAE,mBAAmB;AAC9B,iBAAA,CAAA;;0BAMc,QAAQ;qEAJK,IAAI,EAAA,CAAA;sBAA7B,WAAW;uBAAC,WAAW,CAAA;gBACM,QAAQ,EAAA,CAAA;sBAArC,WAAW;uBAAC,eAAe,CAAA;gBAEmB,QAAQ,EAAA,CAAA;sBAAtD,WAAW;uBAAC,gCAAgC,CAAA;gBAW7C,iBAAiB,EAAA,CAAA;sBAFhB,YAAY;uBAAC,eAAe,EAAE,CAAC,QAAQ,CAAC,CAAA;;sBACxC,YAAY;uBAAC,eAAe,EAAE,CAAC,QAAQ,CAAC,CAAA;gBAgBzC,kBAAkB,EAAA,CAAA;sBAHjB,YAAY;uBAAC,aAAa,CAAA;;sBAC1B,YAAY;uBAAC,aAAa,CAAA;;sBAC1B,YAAY;uBAAC,MAAM,CAAA;;;AC5BtB,MAAM,YAAY,GAAG;IACnB,aAAa;IACb,mBAAmB;IACnB,mBAAmB;IACnB,qBAAqB;CACtB,CAAC;MAMW,UAAU,CAAA;iIAAV,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA,EAAA;AAAV,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAU,iBAVrB,aAAa;YACb,mBAAmB;YACnB,mBAAmB;AACnB,YAAA,qBAAqB,CAGX,EAAA,OAAA,EAAA,CAAA,YAAY,EAAE,mBAAmB,aAN3C,aAAa;YACb,mBAAmB;YACnB,mBAAmB;AACnB,YAAA,qBAAqB,EAKM,mBAAmB,CAAA,EAAA,CAAA,CAAA,EAAA;AAEnC,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAU,YAJX,YAAY,CAAA,EAAA,CAAA,CAAA,EAAA;;2FAIX,UAAU,EAAA,UAAA,EAAA,CAAA;kBALtB,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,OAAO,EAAE,CAAC,YAAY,EAAE,mBAAmB,CAAC;AAC5C,oBAAA,YAAY,EAAE,CAAC,GAAG,YAAY,CAAC;AAC/B,oBAAA,OAAO,EAAE,CAAC,GAAG,YAAY,EAAE,mBAAmB,CAAC;AAChD,iBAAA,CAAA;;;ACnBD;;AAEG;;;;"}

package/fesm2022/kirbydesign-designsystem-checkbox.mjs CHANGED Viewed

@@ -1,9 +1,10 @@
 import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, ElementRef, Component, ChangeDetectionStrategy, ViewChild, Input, HostBinding, Output } from '@angular/core';
+import { EventEmitter, forwardRef, ElementRef, Component, ChangeDetectionStrategy, ViewChild, Input, HostBinding, Output } from '@angular/core';
 import * as i2 from '@ionic/angular';
 import { IonCheckbox, IonicModule } from '@ionic/angular';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i1 from '@kirbydesign/designsystem/helpers';
 import { IonicElementPartHelper } from '@kirbydesign/designsystem/helpers';
@@ -25,6 +26,11 @@ class CheckboxComponent {
         this.hasError = false;
         this.disabled = false;
         this.checkedChange = new EventEmitter();
+        // Initialize default ControlValueAccessor callback functions (noop)
+        // eslint-disable-next-line no-empty-function
+        this._onChange = () => { };
+        // eslint-disable-next-line no-empty-function
+        this._onTouched = () => { };
     }
     ngAfterViewInit() {
         this.ionicElementPartHelper.setPart('label', this.ionCheckboxElement, '.checkbox-wrapper');
@@ -33,14 +39,70 @@ class CheckboxComponent {
     }
     onChecked(checked) {
         this.checked = checked;
+        this._onChange(this.checked);
         this.checkedChange.emit(this.checked);
     }
+    onBlur() {
+        this._onTouched();
+    }
+    /**
+     * Sets the checkbox's value. Part of the ControlValueAccessor interface
+     * required to integrate with Angular's core forms API.
+     *
+     * @param value New value to be written to the model.
+     */
+    writeValue(value) {
+        this.checked = value;
+    }
+    /**
+     * Saves a callback function to be invoked when the checkbox'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 checkbox 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 checkbox. 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.disabled = isDisabled;
+    }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: CheckboxComponent, deps: [{ token: i1.IonicElementPartHelper }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: CheckboxComponent, isStandalone: true, selector: "kirby-checkbox", inputs: { checked: "checked", attentionLevel: "attentionLevel", text: "text", size: "size", hasError: "hasError", disabled: "disabled" }, outputs: { checkedChange: "checkedChange" }, host: { properties: { "class.has-label": "this.text", "class": "this.size", "class.error": "this.hasError", "attr.disabled": "this._isDisabled", "class.attention-level1": "this.isAttentionLevel1", "class.attention-level2": "this.isAttentionLevel2" } }, providers: [IonicElementPartHelper], viewQueries: [{ propertyName: "ionCheckboxElement", first: true, predicate: IonCheckbox, descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<ion-checkbox\n  mode=\"md\"\n  [checked]=\"checked\"\n  [disabled]=\"disabled\"\n  (ionChange)=\"onChecked($event.detail.checked)\"\n  labelPlacement=\"end\"\n>\n  <span *ngIf=\"text\">{{ text }}</span>\n</ion-checkbox>\n", styles: [":host{display:inline-block}:host.attention-level1 ion-checkbox{--checkmark-color: var(--kirby-black);--checkbox-background-checked: var(--kirby-success);--border-color-checked: var(--kirby-success)}@media (hover: hover){:host.attention-level1 ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--checkbox-background-checked: #0ee270;--border-color-checked: #0ee270}}:host.attention-level1 ion-checkbox:active,:host.attention-level1 ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--checkbox-background-checked: #0dcd65;--border-color-checked: #0dcd65}:host.attention-level2 ion-checkbox{--checkmark-color: var(--kirby-white);--checkbox-background-checked: var(--kirby-black);--border-color-checked: var(--kirby-black)}@media (hover: hover){:host.attention-level2 ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--checkbox-background-checked: #5c5c5c;--border-color-checked: #5c5c5c}}:host.attention-level2 ion-checkbox:active,:host.attention-level2 ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--checkmark-color: #ebebeb;--checkbox-background-checked: #6e6e6e;--border-color-checked: #6e6e6e}:host.error ion-checkbox{--border-color: var(--kirby-danger)}:host[disabled]{color:var(--kirby-text-color-semi-dark)}:host[disabled] ion-checkbox{--checkmark-color: var(--kirby-semi-dark);--checkbox-background: var(--kirby-semi-light);--checkbox-background-checked: var(--kirby-semi-light);--border-color: var(--kirby-medium);--border-color-checked: var(--kirby-semi-light)}:host[disabled] ion-checkbox::part(label-text-wrapper){opacity:1}:host[disabled] ion-checkbox::part(native-wrapper){opacity:1}:host ion-checkbox{--transition: 80ms;--size: 24px;--checkmark-width: 4px;--checkbox-background: var(--kirby-white);--border-width: 1px;--border-color: var(--kirby-semi-dark);--border-radius: 6px}@media (hover: hover) and (pointer: fine){:host ion-checkbox:focus-within::part(container){transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover){:host ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--checkbox-background: #ebebeb}}:host ion-checkbox:active,:host ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--checkbox-background: #e0e0e0}:host ion-checkbox::part(container){padding:4px}:host ion-checkbox::part(label){align-items:start;padding-left:16px;padding-right:12px;line-height:24px}:host ion-checkbox::part(label-text-wrapper){margin-inline:12px 0}:host ion-checkbox span{white-space:pre-line}:host.has-label{display:block}:host.has-label.xs ion-checkbox::part(label){padding-top:4px;padding-bottom:4px}:host.has-label.sm ion-checkbox::part(label){padding-top:10px;padding-bottom:10px}:host.has-label.md ion-checkbox::part(label){padding-top:16px;padding-bottom:16px}:host-context(kirby-item){z-index:1}:host-context(kirby-item) ion-checkbox{margin:0}:host-context(kirby-item)[slot=start]{margin-inline-end:12px}\n"], dependencies: [{ kind: "ngmodule", type: IonicModule }, { kind: "component", type: i2.IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "indeterminate", "justify", "labelPlacement", "legacy", "mode", "name", "value"] }, { kind: "directive", type: i2.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: CheckboxComponent, isStandalone: true, selector: "kirby-checkbox", inputs: { checked: "checked", attentionLevel: "attentionLevel", text: "text", size: "size", hasError: "hasError", disabled: "disabled" }, outputs: { checkedChange: "checkedChange" }, host: { properties: { "class.has-label": "this.text", "class": "this.size", "class.error": "this.hasError", "attr.disabled": "this._isDisabled", "class.attention-level1": "this.isAttentionLevel1", "class.attention-level2": "this.isAttentionLevel2" } }, providers: [
+            IonicElementPartHelper,
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef((() => CheckboxComponent)),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "ionCheckboxElement", first: true, predicate: IonCheckbox, descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<ion-checkbox\n  mode=\"md\"\n  [checked]=\"checked\"\n  [disabled]=\"disabled\"\n  (ionChange)=\"onChecked($event.detail.checked)\"\n  labelPlacement=\"end\"\n  (ionBlur)=\"onBlur()\"\n>\n  <span *ngIf=\"text\">{{ text }}</span>\n</ion-checkbox>\n", styles: [":host{display:inline-block}:host.attention-level1 ion-checkbox{--checkmark-color: var(--kirby-black);--checkbox-background-checked: var(--kirby-success);--border-color-checked: var(--kirby-success)}@media (hover: hover){:host.attention-level1 ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--checkbox-background-checked: #2dc172;--border-color-checked: #2dc172}}:host.attention-level1 ion-checkbox:active,:host.attention-level1 ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--checkbox-background-checked: #29ae67;--border-color-checked: #29ae67}:host.attention-level2 ion-checkbox{--checkmark-color: var(--kirby-white);--checkbox-background-checked: var(--kirby-black);--border-color-checked: var(--kirby-black)}@media (hover: hover){:host.attention-level2 ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--checkbox-background-checked: #5c5c5c;--border-color-checked: #5c5c5c}}:host.attention-level2 ion-checkbox:active,:host.attention-level2 ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--checkmark-color: #ebebeb;--checkbox-background-checked: #6e6e6e;--border-color-checked: #6e6e6e}:host.error ion-checkbox{--border-color: var(--kirby-danger)}:host[disabled]{color:var(--kirby-text-color-semi-dark)}:host[disabled] ion-checkbox{--checkmark-color: var(--kirby-semi-dark);--checkbox-background: var(--kirby-semi-light);--checkbox-background-checked: var(--kirby-semi-light);--border-color: var(--kirby-medium);--border-color-checked: var(--kirby-semi-light)}:host[disabled] ion-checkbox::part(label-text-wrapper){opacity:1}:host[disabled] ion-checkbox::part(native-wrapper){opacity:1}:host ion-checkbox{--transition: 80ms;--size: 24px;--checkmark-width: 4px;--checkbox-background: var(--kirby-white);--border-width: 1px;--border-color: var(--kirby-semi-dark);--border-radius: 6px}@media (hover: hover) and (pointer: fine){:host ion-checkbox:focus-within::part(container){transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover){:host ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--checkbox-background: #ebebeb}}:host ion-checkbox:active,:host ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--checkbox-background: #e0e0e0}:host ion-checkbox::part(container){padding:4px}:host ion-checkbox::part(label){align-items:start;padding-left:16px;padding-right:12px;line-height:24px}:host ion-checkbox::part(label-text-wrapper){margin-inline:12px 0}:host ion-checkbox span{white-space:pre-line}:host.has-label{display:block}:host.has-label.xs ion-checkbox::part(label){padding-top:4px;padding-bottom:4px}:host.has-label.sm ion-checkbox::part(label){padding-top:10px;padding-bottom:10px}:host.has-label.md ion-checkbox::part(label){padding-top:16px;padding-bottom:16px}:host-context(kirby-item){z-index:1}:host-context(kirby-item) ion-checkbox{margin:0}:host-context(kirby-item)[slot=start]{margin-inline-end:12px}\n"], dependencies: [{ kind: "ngmodule", type: IonicModule }, { kind: "component", type: i2.IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "indeterminate", "justify", "labelPlacement", "legacy", "mode", "name", "value"] }, { kind: "directive", type: i2.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [IonicModule, CommonModule], providers: [IonicElementPartHelper], selector: 'kirby-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-checkbox\n  mode=\"md\"\n  [checked]=\"checked\"\n  [disabled]=\"disabled\"\n  (ionChange)=\"onChecked($event.detail.checked)\"\n  labelPlacement=\"end\"\n>\n  <span *ngIf=\"text\">{{ text }}</span>\n</ion-checkbox>\n", styles: [":host{display:inline-block}:host.attention-level1 ion-checkbox{--checkmark-color: var(--kirby-black);--checkbox-background-checked: var(--kirby-success);--border-color-checked: var(--kirby-success)}@media (hover: hover){:host.attention-level1 ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--checkbox-background-checked: #0ee270;--border-color-checked: #0ee270}}:host.attention-level1 ion-checkbox:active,:host.attention-level1 ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--checkbox-background-checked: #0dcd65;--border-color-checked: #0dcd65}:host.attention-level2 ion-checkbox{--checkmark-color: var(--kirby-white);--checkbox-background-checked: var(--kirby-black);--border-color-checked: var(--kirby-black)}@media (hover: hover){:host.attention-level2 ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--checkbox-background-checked: #5c5c5c;--border-color-checked: #5c5c5c}}:host.attention-level2 ion-checkbox:active,:host.attention-level2 ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--checkmark-color: #ebebeb;--checkbox-background-checked: #6e6e6e;--border-color-checked: #6e6e6e}:host.error ion-checkbox{--border-color: var(--kirby-danger)}:host[disabled]{color:var(--kirby-text-color-semi-dark)}:host[disabled] ion-checkbox{--checkmark-color: var(--kirby-semi-dark);--checkbox-background: var(--kirby-semi-light);--checkbox-background-checked: var(--kirby-semi-light);--border-color: var(--kirby-medium);--border-color-checked: var(--kirby-semi-light)}:host[disabled] ion-checkbox::part(label-text-wrapper){opacity:1}:host[disabled] ion-checkbox::part(native-wrapper){opacity:1}:host ion-checkbox{--transition: 80ms;--size: 24px;--checkmark-width: 4px;--checkbox-background: var(--kirby-white);--border-width: 1px;--border-color: var(--kirby-semi-dark);--border-radius: 6px}@media (hover: hover) and (pointer: fine){:host ion-checkbox:focus-within::part(container){transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover){:host ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--checkbox-background: #ebebeb}}:host ion-checkbox:active,:host ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--checkbox-background: #e0e0e0}:host ion-checkbox::part(container){padding:4px}:host ion-checkbox::part(label){align-items:start;padding-left:16px;padding-right:12px;line-height:24px}:host ion-checkbox::part(label-text-wrapper){margin-inline:12px 0}:host ion-checkbox span{white-space:pre-line}:host.has-label{display:block}:host.has-label.xs ion-checkbox::part(label){padding-top:4px;padding-bottom:4px}:host.has-label.sm ion-checkbox::part(label){padding-top:10px;padding-bottom:10px}:host.has-label.md ion-checkbox::part(label){padding-top:16px;padding-bottom:16px}:host-context(kirby-item){z-index:1}:host-context(kirby-item) ion-checkbox{margin:0}:host-context(kirby-item)[slot=start]{margin-inline-end:12px}\n"] }]
+            args: [{ standalone: true, imports: [IonicModule, CommonModule], selector: 'kirby-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        IonicElementPartHelper,
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef((() => CheckboxComponent)),
+                            multi: true,
+                        },
+                    ], template: "<ion-checkbox\n  mode=\"md\"\n  [checked]=\"checked\"\n  [disabled]=\"disabled\"\n  (ionChange)=\"onChecked($event.detail.checked)\"\n  labelPlacement=\"end\"\n  (ionBlur)=\"onBlur()\"\n>\n  <span *ngIf=\"text\">{{ text }}</span>\n</ion-checkbox>\n", styles: [":host{display:inline-block}:host.attention-level1 ion-checkbox{--checkmark-color: var(--kirby-black);--checkbox-background-checked: var(--kirby-success);--border-color-checked: var(--kirby-success)}@media (hover: hover){:host.attention-level1 ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--checkbox-background-checked: #2dc172;--border-color-checked: #2dc172}}:host.attention-level1 ion-checkbox:active,:host.attention-level1 ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--checkbox-background-checked: #29ae67;--border-color-checked: #29ae67}:host.attention-level2 ion-checkbox{--checkmark-color: var(--kirby-white);--checkbox-background-checked: var(--kirby-black);--border-color-checked: var(--kirby-black)}@media (hover: hover){:host.attention-level2 ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--checkbox-background-checked: #5c5c5c;--border-color-checked: #5c5c5c}}:host.attention-level2 ion-checkbox:active,:host.attention-level2 ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--checkmark-color: #ebebeb;--checkbox-background-checked: #6e6e6e;--border-color-checked: #6e6e6e}:host.error ion-checkbox{--border-color: var(--kirby-danger)}:host[disabled]{color:var(--kirby-text-color-semi-dark)}:host[disabled] ion-checkbox{--checkmark-color: var(--kirby-semi-dark);--checkbox-background: var(--kirby-semi-light);--checkbox-background-checked: var(--kirby-semi-light);--border-color: var(--kirby-medium);--border-color-checked: var(--kirby-semi-light)}:host[disabled] ion-checkbox::part(label-text-wrapper){opacity:1}:host[disabled] ion-checkbox::part(native-wrapper){opacity:1}:host ion-checkbox{--transition: 80ms;--size: 24px;--checkmark-width: 4px;--checkbox-background: var(--kirby-white);--border-width: 1px;--border-color: var(--kirby-semi-dark);--border-radius: 6px}@media (hover: hover) and (pointer: fine){:host ion-checkbox:focus-within::part(container){transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover){:host ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--checkbox-background: #ebebeb}}:host ion-checkbox:active,:host ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--checkbox-background: #e0e0e0}:host ion-checkbox::part(container){padding:4px}:host ion-checkbox::part(label){align-items:start;padding-left:16px;padding-right:12px;line-height:24px}:host ion-checkbox::part(label-text-wrapper){margin-inline:12px 0}:host ion-checkbox span{white-space:pre-line}:host.has-label{display:block}:host.has-label.xs ion-checkbox::part(label){padding-top:4px;padding-bottom:4px}:host.has-label.sm ion-checkbox::part(label){padding-top:10px;padding-bottom:10px}:host.has-label.md ion-checkbox::part(label){padding-top:16px;padding-bottom:16px}:host-context(kirby-item){z-index:1}:host-context(kirby-item) ion-checkbox{margin:0}:host-context(kirby-item)[slot=start]{margin-inline-end:12px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.IonicElementPartHelper }]; }, propDecorators: { ionCheckboxElement: [{
                 type: ViewChild,
                 args: [IonCheckbox, { read: ElementRef, static: true }]

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

	@@ -1 +1 @@
1	- {"version":3,"file":"kirbydesign-designsystem-checkbox.mjs","sources":["../../../../libs/designsystem/checkbox/src/checkbox.component.ts","../../../../libs/designsystem/checkbox/src/checkbox.component.html","../../../../libs/designsystem/checkbox/src/kirbydesign-designsystem-checkbox.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n EventEmitter,\n HostBinding,\n Input,\n Output,\n ViewChild,\n} from '@angular/core';\nimport { IonCheckbox, IonicModule } from '@ionic/angular';\nimport { IonicElementPartHelper } from '@kirbydesign/designsystem/helpers';\n\n@Component({\n standalone: true,\n imports: [IonicModule, CommonModule],\n ~~providers: [IonicElementPartHelper],\n~~ selector: 'kirby-checkbox',\n templateUrl: './checkbox.component.html',\n styleUrls: ['./checkbox.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CheckboxComponent implements AfterViewInit {\n @ViewChild(IonCheckbox, { read: ElementRef, static: true })\n private ionCheckboxElement?: ElementRef<HTMLIonCheckboxElement>;\n\n @Input() checked: boolean = false;\n @Input() attentionLevel: '1' \| '2' = '2';\n\n @HostBinding('class.has-label')\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 @Output() checkedChange = new EventEmitter<boolean>();\n\n constructor(private ionicElementPartHelper: IonicElementPartHelper) {}\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 onChecked(checked: boolean): void {\n this.checked = checked;\n this.checkedChange.emit(this.checked);\n }\n}\n","<ion-checkbox\n mode=\"md\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n (ionChange)=\"onChecked($event.detail.checked)\"\n labelPlacement=\"end\"\n>\n <span ngIf=\"text\">{{ text }}</span>\n</ion-checkbox>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":"~~;;;;;;;;;MAwBa~~,iBAAiB,CAAA;AAoB5B,IAAA,IACI,WAAW,GAAA;QACb,OAAO,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,IAAI,CAAC;KAC1C;AAED,IAAA,IAA2C,iBAAiB,GAAA;AAC1D,QAAA,OAAO,IAAI,CAAC,cAAc,KAAK,GAAG,CAAC;KACpC;AACD,IAAA,IAA2C,iBAAiB,GAAA;AAC1D,QAAA,OAAO,IAAI,CAAC,cAAc,KAAK,GAAG,CAAC;KACpC;AAID,IAAA,WAAA,CAAoB,sBAA8C,EAAA;QAA9C,IAAsB,CAAA,sBAAA,GAAtB,sBAAsB,CAAwB;QA9BzD,IAAO,CAAA,OAAA,GAAY,KAAK,CAAC;QACzB,IAAc,CAAA,cAAA,GAAc,GAAG,CAAC;QAQzC,IAAI,CAAA,IAAA,GAAuB,IAAI,CAAC;QAIhC,IAAQ,CAAA,QAAA,GAAY,KAAK,CAAC;QAEjB,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;AAahB,QAAA,IAAA,CAAA,aAAa,GAAG,IAAI,YAAY,EAAW,CAAC;~~KAEgB~~;IAEtE,eAAe,GAAA;AACb,QAAA,IAAI,CAAC,sBAAsB,CAAC,OAAO,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAAE,mBAAmB,CAAC,CAAC;AAC3F,QAAA,IAAI,CAAC,sBAAsB,CAAC,OAAO,CACjC,oBAAoB,EACpB,IAAI,CAAC,kBAAkB,EACvB,qBAAqB,CACtB,CAAC;AACF,QAAA,IAAI,CAAC,sBAAsB,CAAC,OAAO,CACjC,gBAAgB,EAChB,IAAI,CAAC,kBAAkB,EACvB,iBAAiB,CAClB,CAAC;KACH;AAED,IAAA,SAAS,CAAC,OAAgB,EAAA;AACxB,QAAA,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;~~QACvB~~,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACvC;~~iIArDU~~,iBAAiB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,sBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAjB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,~~EANjB~~,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,MAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,EAAA,aAAA,EAAA,eAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,OAAA,EAAA,WAAA,EAAA,aAAA,EAAA,eAAA,EAAA,eAAA,EAAA,kBAAA,EAAA,wBAAA,EAAA,wBAAA,EAAA,wBAAA,EAAA,wBAAA,EAAA,EAAA,EAAA,SAAA,EAAA,~~CAAC,~~sBAAsB,~~CAAC~~,~~EAOxB~~,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,oBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,WAAW,~~EAAU~~,~~WAAA~~,EAAA,~~IAAA,EAAA,IAAA,EAAA,UAAU,ECzB5C,~~MAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,~~EAAA~~,~~gOASA~~,~~EDQY~~,MAAA,EAAA,CAAA,itGAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,WAAW,2TAAE,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;~~2FAOxB~~,iBAAiB,EAAA,UAAA,EAAA,CAAA;~~kBAT7B~~,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,UAAA,EAAA,IAAI,EACP,OAAA,EAAA,CAAC,WAAW,EAAE,YAAY,CAAC,EAAA,~~SAAA~~,~~EACzB~~,~~CAAC~~,~~sBAAsB~~,CAAC,~~EACzB~~,~~QAAA~~,EAAA,~~gBAAgB~~,~~EAGT~~,~~eAAA~~,~~EAAA~~,uBAAuB,~~CAAC~~,~~MAAM~~,EAAA,QAAA,EAAA,~~gOAAA~~,EAAA,MAAA,EAAA,CAAA,itGAAA,CAAA,EAAA,CAAA;~~6GAIvC~~,kBAAkB,EAAA,CAAA;sBADzB,SAAS;uBAAC,WAAW,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE,CAAA;gBAGjD,OAAO,EAAA,CAAA;sBAAf,KAAK;gBACG,cAAc,EAAA,CAAA;sBAAtB,KAAK;gBAIN,IAAI,EAAA,CAAA;sBAFH,WAAW;uBAAC,iBAAiB,CAAA;;sBAC7B,KAAK;gBAKN,IAAI,EAAA,CAAA;sBAFH,WAAW;uBAAC,OAAO,CAAA;;sBACnB,KAAK;gBAKN,QAAQ,EAAA,CAAA;sBAFP,WAAW;uBAAC,aAAa,CAAA;;sBACzB,KAAK;gBAGG,QAAQ,EAAA,CAAA;sBAAhB,KAAK;gBAEF,WAAW,EAAA,CAAA;sBADd,WAAW;uBAAC,eAAe,CAAA;gBAKe,iBAAiB,EAAA,CAAA;sBAA3D,WAAW;uBAAC,wBAAwB,CAAA;gBAGM,iBAAiB,EAAA,CAAA;sBAA3D,WAAW;uBAAC,wBAAwB,CAAA;gBAI3B,aAAa,EAAA,CAAA;sBAAtB,MAAM;;;~~AExDT~~;;AAEG;;;;"}
1	+ {"version":3,"file":"kirbydesign-designsystem-checkbox.mjs","sources":["../../../../libs/designsystem/checkbox/src/checkbox.component.ts","../../../../libs/designsystem/checkbox/src/checkbox.component.html","../../../../libs/designsystem/checkbox/src/kirbydesign-designsystem-checkbox.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n EventEmitter,\n forwardRef,\n HostBinding,\n Input,\n Output,\n ViewChild,\n} from '@angular/core';\nimport { IonCheckbox, IonicModule } from '@ionic/angular';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport { IonicElementPartHelper } from '@kirbydesign/designsystem/helpers';\n\n@Component({\n standalone: true,\n imports: [IonicModule, CommonModule],\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 implements AfterViewInit, ControlValueAccessor {\n @ViewChild(IonCheckbox, { read: ElementRef, static: true })\n private ionCheckboxElement?: ElementRef<HTMLIonCheckboxElement>;\n\n @Input() checked: boolean = false;\n @Input() attentionLevel: '1' \| '2' = '2';\n\n @HostBinding('class.has-label')\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 @Output() checkedChange = new EventEmitter<boolean>();\n\n constructor(private ionicElementPartHelper: IonicElementPartHelper) {}\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 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 }\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 }\n}\n","<ion-checkbox\n mode=\"md\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n (ionChange)=\"onChecked($event.detail.checked)\"\n labelPlacement=\"end\"\n (ionBlur)=\"onBlur()\"\n>\n <span ngIf=\"text\">{{ text }}</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-dropdown.mjs CHANGED Viewed

@@ -516,7 +516,7 @@ class DropdownComponent {
                 useExisting: forwardRef((() => DropdownComponent)),
                 multi: true,
             },
-        ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ListItemTemplateDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "slottedItems", predicate: ListItemTemplateDirective, read: ElementRef }, { propertyName: "kirbyItemsSlotted", predicate: ItemComponent, read: ElementRef }], viewQueries: [{ propertyName: "cardElement", first: true, predicate: CardComponent, descendants: true, read: ElementRef }, { propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true }, { propertyName: "buttonElement", first: true, predicate: ButtonComponent, descendants: true, read: ElementRef, static: true }, { propertyName: "kirbyItemsDefault", predicate: ItemComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<button\n  kirby-button\n  [size]=\"size\"\n  [attentionLevel]=\"attentionLevel\"\n  tabindex=\"-1\"\n  (click)=\"onToggle($event)\"\n  (mousedown)=\"onButtonMouseEvent($event)\"\n  [disabled]=\"disabled\"\n  type=\"button\"\n>\n  <span class=\"text\">{{ selectedText || placeholder }}</span>\n  <kirby-icon [name]=\"isOpen ? 'arrow-up' : 'arrow-down'\"></kirby-icon>\n</button>\n\n<ng-container *ngTemplateOutlet=\"usePopover ? popoverTemplate : itemWrapperTemplate\"></ng-container>\n\n<ng-template #popoverTemplate>\n  <kirby-popover\n    [target]=\"buttonElement\"\n    [popout]=\"popout\"\n    (click)=\"_onPopoverClick($event)\"\n    (willHide)=\"_onPopoverWillHide()\"\n  >\n    <ng-container *ngTemplateOutlet=\"itemWrapperTemplate\"></ng-container>\n  </kirby-popover>\n</ng-template>\n\n<ng-template #itemWrapperTemplate>\n  <kirby-card>\n    <ng-container *ngFor=\"let item of items; let i = index\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          itemTemplate || defaultItemTemplate;\n          context: {\n            $implicit: item,\n            selected: i === selectedIndex,\n            focused: i === focusedIndex,\n            index: i\n          }\n        \"\n      ></ng-container>\n    </ng-container>\n  </kirby-card>\n</ng-template>\n\n<ng-template\n  #defaultItemTemplate\n  let-item\n  let-selected=\"selected\"\n  let-index=\"index\"\n  let-focused=\"focused\"\n>\n  <kirby-item\n    [selectable]=\"true\"\n    [selected]=\"selected\"\n    (click)=\"onItemSelect(index)\"\n    [class.focused]=\"focused\"\n    role=\"option\"\n  >\n    <!-- Tabindex fixes issue with popover dropdown not working in safari -->\n    <h3 tabindex=\"0\">{{ getTextFromItem(item) }}</h3>\n    <kirby-icon *ngIf=\"selected\" name=\"checkmark-selected\" slot=\"end\"></kirby-icon>\n  </kirby-item>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative;max-width:calc(100vw - 32px)}@media (hover: hover) and (pointer: fine){:host{outline:none;border-radius:999px}:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host.clicked{box-shadow:none}:host.expand{display:block}:host.expand kirby-card{width:100%;min-width:initial;max-width:initial}:host.error>button,:host.ng-touched.ng-invalid>button{border-color:var(--kirby-danger)}:host>button{position:relative;margin:0;outline:none;width:100%;min-width:0}:host>button.attention-level2{border:1px solid transparent}:host>button .text{overflow:hidden;text-overflow:ellipsis}:host kirby-card{display:none;opacity:0;position:absolute;z-index:800}:host.is-opening kirby-card{display:block}:host.is-open kirby-card{display:block;opacity:1}:host.is-open>button{box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14}:host.popout-left kirby-card{right:0}:host.popout-up kirby-card{top:0;margin-top:-4px;transform:translateY(-100%)}:host.popout-up.is-open>button{z-index:801}kirby-popover{--max-height: 352px}kirby-card{max-height:352px;margin-block:4px;overflow-y:auto;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14;min-width:288px;max-width:calc(100vw - 32px)}@media (min-width: 321px){kirby-card{min-width:343px}}:host-context(kirby-calendar)>button{border-color:transparent;font-weight:700;font-size:initial}@media (hover: hover){:host-context(kirby-calendar)>button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-calendar)>button:active,:host-context(kirby-calendar)>button.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-calendar).is-open>button{box-shadow:none}\n"], dependencies: [{ kind: "component", type: i2.CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "flat"] }, { kind: "component", type: i3.IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }, { kind: "component", type: i4.ItemComponent, selector: "kirby-item", inputs: ["disabled", "selected", "disclosure", "selectable", "reorderable", "size", "rotateIcon"] }, { kind: "component", type: i5.PopoverComponent, selector: "kirby-popover", inputs: ["popout", "target"], outputs: ["willHide"] }, { kind: "component", type: i6.ButtonComponent, selector: "button[kirby-button],Button[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+        ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ListItemTemplateDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "slottedItems", predicate: ListItemTemplateDirective, read: ElementRef }, { propertyName: "kirbyItemsSlotted", predicate: ItemComponent, read: ElementRef }], viewQueries: [{ propertyName: "cardElement", first: true, predicate: CardComponent, descendants: true, read: ElementRef }, { propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true }, { propertyName: "buttonElement", first: true, predicate: ButtonComponent, descendants: true, read: ElementRef, static: true }, { propertyName: "kirbyItemsDefault", predicate: ItemComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<button\n  kirby-button\n  [size]=\"size\"\n  [attentionLevel]=\"attentionLevel\"\n  tabindex=\"-1\"\n  (click)=\"onToggle($event)\"\n  (mousedown)=\"onButtonMouseEvent($event)\"\n  [disabled]=\"disabled\"\n  type=\"button\"\n>\n  <span class=\"text\">{{ selectedText || placeholder }}</span>\n  <kirby-icon [name]=\"isOpen ? 'arrow-up' : 'arrow-down'\"></kirby-icon>\n</button>\n\n<ng-container *ngTemplateOutlet=\"usePopover ? popoverTemplate : itemWrapperTemplate\"></ng-container>\n\n<ng-template #popoverTemplate>\n  <kirby-popover\n    [target]=\"buttonElement\"\n    [popout]=\"popout\"\n    (click)=\"_onPopoverClick($event)\"\n    (willHide)=\"_onPopoverWillHide()\"\n  >\n    <ng-container *ngTemplateOutlet=\"itemWrapperTemplate\"></ng-container>\n  </kirby-popover>\n</ng-template>\n\n<ng-template #itemWrapperTemplate>\n  <kirby-card>\n    <ng-container *ngFor=\"let item of items; let i = index\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          itemTemplate || defaultItemTemplate;\n          context: {\n            $implicit: item,\n            selected: i === selectedIndex,\n            focused: i === focusedIndex,\n            index: i\n          }\n        \"\n      ></ng-container>\n    </ng-container>\n  </kirby-card>\n</ng-template>\n\n<ng-template\n  #defaultItemTemplate\n  let-item\n  let-selected=\"selected\"\n  let-index=\"index\"\n  let-focused=\"focused\"\n>\n  <kirby-item\n    [selectable]=\"true\"\n    [selected]=\"selected\"\n    (click)=\"onItemSelect(index)\"\n    [class.focused]=\"focused\"\n    role=\"option\"\n  >\n    <!-- Tabindex fixes issue with popover dropdown not working in safari -->\n    <h3 tabindex=\"0\">{{ getTextFromItem(item) }}</h3>\n    <kirby-icon *ngIf=\"selected\" name=\"checkmark-selected\" slot=\"end\"></kirby-icon>\n  </kirby-item>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative;max-width:calc(100vw - 32px)}@media (hover: hover) and (pointer: fine){:host{outline:none;border-radius:999px}:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host.clicked{box-shadow:none}:host.expand{display:block}:host.expand kirby-card{width:100%;min-width:initial;max-width:initial}:host.error>button,:host.ng-touched.ng-invalid>button{border-color:var(--kirby-danger)}:host>button{position:relative;margin:0;outline:none;width:100%;min-width:0}:host>button.attention-level2{border:1px solid transparent}:host>button .text{overflow:hidden;text-overflow:ellipsis}:host kirby-card{display:none;opacity:0;position:absolute;z-index:800}:host.is-opening kirby-card{display:block}:host.is-open kirby-card{display:block;opacity:1}:host.is-open>button{box-shadow:0 0 5px #1c1c1c0a,0 10px 24px -10px #1c1c1c26}:host.popout-left kirby-card{right:0}:host.popout-up kirby-card{top:0;margin-top:-4px;transform:translateY(-100%)}:host.popout-up.is-open>button{z-index:801}kirby-popover{--max-height: 352px}kirby-card{max-height:352px;margin-block:4px;overflow-y:auto;box-shadow:0 0 5px #1c1c1c0a,0 10px 24px -10px #1c1c1c26;min-width:288px;max-width:calc(100vw - 32px)}@media (min-width: 321px){kirby-card{min-width:343px}}:host-context(kirby-calendar)>button{border-color:transparent;font-weight:700;font-size:initial}@media (hover: hover){:host-context(kirby-calendar)>button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-calendar)>button:active,:host-context(kirby-calendar)>button.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-calendar).is-open>button{box-shadow:none}\n"], dependencies: [{ kind: "component", type: i2.CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "flat"] }, { kind: "component", type: i3.IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }, { kind: "component", type: i4.ItemComponent, selector: "kirby-item", inputs: ["disabled", "selected", "disclosure", "selectable", "reorderable", "size", "rotateIcon"] }, { kind: "component", type: i5.PopoverComponent, selector: "kirby-popover", inputs: ["popout", "target"], outputs: ["willHide"] }, { kind: "component", type: i6.ButtonComponent, selector: "button[kirby-button],Button[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
@@ -526,7 +526,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
                             useExisting: forwardRef((() => DropdownComponent)),
                             multi: true,
                         },
-                    ], template: "<button\n  kirby-button\n  [size]=\"size\"\n  [attentionLevel]=\"attentionLevel\"\n  tabindex=\"-1\"\n  (click)=\"onToggle($event)\"\n  (mousedown)=\"onButtonMouseEvent($event)\"\n  [disabled]=\"disabled\"\n  type=\"button\"\n>\n  <span class=\"text\">{{ selectedText || placeholder }}</span>\n  <kirby-icon [name]=\"isOpen ? 'arrow-up' : 'arrow-down'\"></kirby-icon>\n</button>\n\n<ng-container *ngTemplateOutlet=\"usePopover ? popoverTemplate : itemWrapperTemplate\"></ng-container>\n\n<ng-template #popoverTemplate>\n  <kirby-popover\n    [target]=\"buttonElement\"\n    [popout]=\"popout\"\n    (click)=\"_onPopoverClick($event)\"\n    (willHide)=\"_onPopoverWillHide()\"\n  >\n    <ng-container *ngTemplateOutlet=\"itemWrapperTemplate\"></ng-container>\n  </kirby-popover>\n</ng-template>\n\n<ng-template #itemWrapperTemplate>\n  <kirby-card>\n    <ng-container *ngFor=\"let item of items; let i = index\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          itemTemplate || defaultItemTemplate;\n          context: {\n            $implicit: item,\n            selected: i === selectedIndex,\n            focused: i === focusedIndex,\n            index: i\n          }\n        \"\n      ></ng-container>\n    </ng-container>\n  </kirby-card>\n</ng-template>\n\n<ng-template\n  #defaultItemTemplate\n  let-item\n  let-selected=\"selected\"\n  let-index=\"index\"\n  let-focused=\"focused\"\n>\n  <kirby-item\n    [selectable]=\"true\"\n    [selected]=\"selected\"\n    (click)=\"onItemSelect(index)\"\n    [class.focused]=\"focused\"\n    role=\"option\"\n  >\n    <!-- Tabindex fixes issue with popover dropdown not working in safari -->\n    <h3 tabindex=\"0\">{{ getTextFromItem(item) }}</h3>\n    <kirby-icon *ngIf=\"selected\" name=\"checkmark-selected\" slot=\"end\"></kirby-icon>\n  </kirby-item>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative;max-width:calc(100vw - 32px)}@media (hover: hover) and (pointer: fine){:host{outline:none;border-radius:999px}:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host.clicked{box-shadow:none}:host.expand{display:block}:host.expand kirby-card{width:100%;min-width:initial;max-width:initial}:host.error>button,:host.ng-touched.ng-invalid>button{border-color:var(--kirby-danger)}:host>button{position:relative;margin:0;outline:none;width:100%;min-width:0}:host>button.attention-level2{border:1px solid transparent}:host>button .text{overflow:hidden;text-overflow:ellipsis}:host kirby-card{display:none;opacity:0;position:absolute;z-index:800}:host.is-opening kirby-card{display:block}:host.is-open kirby-card{display:block;opacity:1}:host.is-open>button{box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14}:host.popout-left kirby-card{right:0}:host.popout-up kirby-card{top:0;margin-top:-4px;transform:translateY(-100%)}:host.popout-up.is-open>button{z-index:801}kirby-popover{--max-height: 352px}kirby-card{max-height:352px;margin-block:4px;overflow-y:auto;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14;min-width:288px;max-width:calc(100vw - 32px)}@media (min-width: 321px){kirby-card{min-width:343px}}:host-context(kirby-calendar)>button{border-color:transparent;font-weight:700;font-size:initial}@media (hover: hover){:host-context(kirby-calendar)>button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-calendar)>button:active,:host-context(kirby-calendar)>button.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-calendar).is-open>button{box-shadow:none}\n"] }]
+                    ], template: "<button\n  kirby-button\n  [size]=\"size\"\n  [attentionLevel]=\"attentionLevel\"\n  tabindex=\"-1\"\n  (click)=\"onToggle($event)\"\n  (mousedown)=\"onButtonMouseEvent($event)\"\n  [disabled]=\"disabled\"\n  type=\"button\"\n>\n  <span class=\"text\">{{ selectedText || placeholder }}</span>\n  <kirby-icon [name]=\"isOpen ? 'arrow-up' : 'arrow-down'\"></kirby-icon>\n</button>\n\n<ng-container *ngTemplateOutlet=\"usePopover ? popoverTemplate : itemWrapperTemplate\"></ng-container>\n\n<ng-template #popoverTemplate>\n  <kirby-popover\n    [target]=\"buttonElement\"\n    [popout]=\"popout\"\n    (click)=\"_onPopoverClick($event)\"\n    (willHide)=\"_onPopoverWillHide()\"\n  >\n    <ng-container *ngTemplateOutlet=\"itemWrapperTemplate\"></ng-container>\n  </kirby-popover>\n</ng-template>\n\n<ng-template #itemWrapperTemplate>\n  <kirby-card>\n    <ng-container *ngFor=\"let item of items; let i = index\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          itemTemplate || defaultItemTemplate;\n          context: {\n            $implicit: item,\n            selected: i === selectedIndex,\n            focused: i === focusedIndex,\n            index: i\n          }\n        \"\n      ></ng-container>\n    </ng-container>\n  </kirby-card>\n</ng-template>\n\n<ng-template\n  #defaultItemTemplate\n  let-item\n  let-selected=\"selected\"\n  let-index=\"index\"\n  let-focused=\"focused\"\n>\n  <kirby-item\n    [selectable]=\"true\"\n    [selected]=\"selected\"\n    (click)=\"onItemSelect(index)\"\n    [class.focused]=\"focused\"\n    role=\"option\"\n  >\n    <!-- Tabindex fixes issue with popover dropdown not working in safari -->\n    <h3 tabindex=\"0\">{{ getTextFromItem(item) }}</h3>\n    <kirby-icon *ngIf=\"selected\" name=\"checkmark-selected\" slot=\"end\"></kirby-icon>\n  </kirby-item>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative;max-width:calc(100vw - 32px)}@media (hover: hover) and (pointer: fine){:host{outline:none;border-radius:999px}:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host.clicked{box-shadow:none}:host.expand{display:block}:host.expand kirby-card{width:100%;min-width:initial;max-width:initial}:host.error>button,:host.ng-touched.ng-invalid>button{border-color:var(--kirby-danger)}:host>button{position:relative;margin:0;outline:none;width:100%;min-width:0}:host>button.attention-level2{border:1px solid transparent}:host>button .text{overflow:hidden;text-overflow:ellipsis}:host kirby-card{display:none;opacity:0;position:absolute;z-index:800}:host.is-opening kirby-card{display:block}:host.is-open kirby-card{display:block;opacity:1}:host.is-open>button{box-shadow:0 0 5px #1c1c1c0a,0 10px 24px -10px #1c1c1c26}:host.popout-left kirby-card{right:0}:host.popout-up kirby-card{top:0;margin-top:-4px;transform:translateY(-100%)}:host.popout-up.is-open>button{z-index:801}kirby-popover{--max-height: 352px}kirby-card{max-height:352px;margin-block:4px;overflow-y:auto;box-shadow:0 0 5px #1c1c1c0a,0 10px 24px -10px #1c1c1c26;min-width:288px;max-width:calc(100vw - 32px)}@media (min-width: 321px){kirby-card{min-width:343px}}:host-context(kirby-calendar)>button{border-color:transparent;font-weight:700;font-size:initial}@media (hover: hover){:host-context(kirby-calendar)>button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-calendar)>button:active,:host-context(kirby-calendar)>button.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-calendar).is-open>button{box-shadow:none}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: KeyboardHandlerService }]; }, propDecorators: { items: [{
                 type: Input
             }], selectedIndex: [{

package/fesm2022/kirbydesign-designsystem-fab-sheet.mjs CHANGED Viewed

@@ -52,11 +52,11 @@ class FabSheetComponent {
         this.changeDetectorRef.detectChanges();
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FabSheetComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: FabSheetComponent, isStandalone: true, selector: "kirby-fab-sheet", inputs: { disabled: "disabled", horizontalAlignment: "horizontalAlignment" }, host: { properties: { "class.is-open": "this.isFabSheetOpen" } }, queries: [{ propertyName: "actionSheet", first: true, predicate: ActionSheetComponent, descendants: true }], viewQueries: [{ propertyName: "ionFabButton", first: true, predicate: IonFabButton, descendants: true, read: ElementRef, static: true }, { propertyName: "ionFab", first: true, predicate: IonFab, descendants: true, static: true }], ngImport: i0, template: "<ion-backdrop\n  [class.backdrop-visible]=\"isFabSheetOpen\"\n  [stopPropagation]=\"false\"\n  (ionBackdropTap)=\"hideActions()\"\n  (click)=\"hideActions()\"\n></ion-backdrop>\n<ion-fab>\n  <ion-fab-button\n    (click)=\"onFabButtonClick()\"\n    [disabled]=\"disabled\"\n    [attr.disabled]=\"disabled ? true : null\"\n    tabindex=\"-1\"\n  >\n    <ng-content select=\"kirby-icon\"></ng-content>\n  </ion-fab-button>\n  <ion-fab-list\n    *ngIf=\"actionSheet\"\n    side=\"top\"\n    class=\"{{ horizontalAlignment }}\"\n    (click)=\"onFabListClick()\"\n  >\n    <ng-content select=\"kirby-action-sheet\"></ng-content>\n  </ion-fab-list>\n</ion-fab>\n", styles: [":host{--kirby-action-sheet-margin-horizontal: 16px}ion-fab-button{--box-shadow: 0 20px 30px -15px rgba(28, 28, 28, .3), 0 0 5px 0 rgba(28, 28, 28, .08);width:64px;height:64px;-webkit-user-select:none;user-select:none}@media (hover: hover){ion-fab-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-fab-button:active,ion-fab-button.ion-activated{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-fab-button::part(native):after{transition:all 80ms linear 0ms}@media (hover: hover) and (pointer: fine){ion-fab-button{outline:none;border-radius:999px}ion-fab-button:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}ion-fab-button:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}ion-fab-button:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}ion-fab-button[disabled]{--background: var(--kirby-semi-light);--box-shadow: none;opacity:1}ion-fab{position:fixed;bottom:16px;right:16px}:host-context(.fixed-content) ion-fab{position:absolute}ion-backdrop{visibility:hidden;opacity:0;transition:opacity .75s;position:fixed;z-index:999}ion-backdrop.backdrop-visible{visibility:visible;opacity:.4}@media (min-width: 768px){ion-backdrop.backdrop-visible{opacity:0}}ion-fab-list{margin-top:76px;margin-bottom:76px;right:0}\n"], dependencies: [{ kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1.IonBackdrop, selector: "ion-backdrop", inputs: ["stopPropagation", "tappable", "visible"] }, { kind: "component", type: i1.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i1.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i1.IonFabList, selector: "ion-fab-list", inputs: ["activated", "side"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: FabSheetComponent, isStandalone: true, selector: "kirby-fab-sheet", inputs: { disabled: "disabled", horizontalAlignment: "horizontalAlignment" }, host: { properties: { "class.is-open": "this.isFabSheetOpen" } }, queries: [{ propertyName: "actionSheet", first: true, predicate: ActionSheetComponent, descendants: true }], viewQueries: [{ propertyName: "ionFabButton", first: true, predicate: IonFabButton, descendants: true, read: ElementRef, static: true }, { propertyName: "ionFab", first: true, predicate: IonFab, descendants: true, static: true }], ngImport: i0, template: "<ion-backdrop\n  [class.backdrop-visible]=\"isFabSheetOpen\"\n  [stopPropagation]=\"false\"\n  (ionBackdropTap)=\"hideActions()\"\n  (click)=\"hideActions()\"\n></ion-backdrop>\n<ion-fab>\n  <ion-fab-button\n    (click)=\"onFabButtonClick()\"\n    [disabled]=\"disabled\"\n    [attr.disabled]=\"disabled ? true : null\"\n    tabindex=\"-1\"\n  >\n    <ng-content select=\"kirby-icon\"></ng-content>\n  </ion-fab-button>\n  <ion-fab-list\n    *ngIf=\"actionSheet\"\n    side=\"top\"\n    class=\"{{ horizontalAlignment }}\"\n    (click)=\"onFabListClick()\"\n  >\n    <ng-content select=\"kirby-action-sheet\"></ng-content>\n  </ion-fab-list>\n</ion-fab>\n", styles: [":host{--kirby-action-sheet-margin-horizontal: 16px}ion-fab-button{--box-shadow: 0 0 5px 0 rgba(28, 28, 28, .04), 0 10px 24px -10px rgba(28, 28, 28, .15);width:64px;height:64px;-webkit-user-select:none;user-select:none}@media (hover: hover){ion-fab-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-fab-button:active,ion-fab-button.ion-activated{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-fab-button::part(native):after{transition:all 80ms linear 0ms}@media (hover: hover) and (pointer: fine){ion-fab-button{outline:none;border-radius:999px}ion-fab-button:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}ion-fab-button:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}ion-fab-button:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}ion-fab-button[disabled]{--background: var(--kirby-semi-light);--box-shadow: none;opacity:1}ion-fab{position:fixed;bottom:16px;right:16px}:host-context(.fixed-content) ion-fab{position:absolute}ion-backdrop{visibility:hidden;opacity:0;transition:opacity .75s;position:fixed;z-index:999}ion-backdrop.backdrop-visible{visibility:visible;opacity:.4}@media (min-width: 768px){ion-backdrop.backdrop-visible{opacity:0}}ion-fab-list{margin-top:76px;margin-bottom:76px;right:0}\n"], dependencies: [{ kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1.IonBackdrop, selector: "ion-backdrop", inputs: ["stopPropagation", "tappable", "visible"] }, { kind: "component", type: i1.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i1.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i1.IonFabList, selector: "ion-fab-list", inputs: ["activated", "side"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FabSheetComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [IonicModule, CommonModule], selector: 'kirby-fab-sheet', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-backdrop\n  [class.backdrop-visible]=\"isFabSheetOpen\"\n  [stopPropagation]=\"false\"\n  (ionBackdropTap)=\"hideActions()\"\n  (click)=\"hideActions()\"\n></ion-backdrop>\n<ion-fab>\n  <ion-fab-button\n    (click)=\"onFabButtonClick()\"\n    [disabled]=\"disabled\"\n    [attr.disabled]=\"disabled ? true : null\"\n    tabindex=\"-1\"\n  >\n    <ng-content select=\"kirby-icon\"></ng-content>\n  </ion-fab-button>\n  <ion-fab-list\n    *ngIf=\"actionSheet\"\n    side=\"top\"\n    class=\"{{ horizontalAlignment }}\"\n    (click)=\"onFabListClick()\"\n  >\n    <ng-content select=\"kirby-action-sheet\"></ng-content>\n  </ion-fab-list>\n</ion-fab>\n", styles: [":host{--kirby-action-sheet-margin-horizontal: 16px}ion-fab-button{--box-shadow: 0 20px 30px -15px rgba(28, 28, 28, .3), 0 0 5px 0 rgba(28, 28, 28, .08);width:64px;height:64px;-webkit-user-select:none;user-select:none}@media (hover: hover){ion-fab-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-fab-button:active,ion-fab-button.ion-activated{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-fab-button::part(native):after{transition:all 80ms linear 0ms}@media (hover: hover) and (pointer: fine){ion-fab-button{outline:none;border-radius:999px}ion-fab-button:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}ion-fab-button:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}ion-fab-button:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}ion-fab-button[disabled]{--background: var(--kirby-semi-light);--box-shadow: none;opacity:1}ion-fab{position:fixed;bottom:16px;right:16px}:host-context(.fixed-content) ion-fab{position:absolute}ion-backdrop{visibility:hidden;opacity:0;transition:opacity .75s;position:fixed;z-index:999}ion-backdrop.backdrop-visible{visibility:visible;opacity:.4}@media (min-width: 768px){ion-backdrop.backdrop-visible{opacity:0}}ion-fab-list{margin-top:76px;margin-bottom:76px;right:0}\n"] }]
+            args: [{ standalone: true, imports: [IonicModule, CommonModule], selector: 'kirby-fab-sheet', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-backdrop\n  [class.backdrop-visible]=\"isFabSheetOpen\"\n  [stopPropagation]=\"false\"\n  (ionBackdropTap)=\"hideActions()\"\n  (click)=\"hideActions()\"\n></ion-backdrop>\n<ion-fab>\n  <ion-fab-button\n    (click)=\"onFabButtonClick()\"\n    [disabled]=\"disabled\"\n    [attr.disabled]=\"disabled ? true : null\"\n    tabindex=\"-1\"\n  >\n    <ng-content select=\"kirby-icon\"></ng-content>\n  </ion-fab-button>\n  <ion-fab-list\n    *ngIf=\"actionSheet\"\n    side=\"top\"\n    class=\"{{ horizontalAlignment }}\"\n    (click)=\"onFabListClick()\"\n  >\n    <ng-content select=\"kirby-action-sheet\"></ng-content>\n  </ion-fab-list>\n</ion-fab>\n", styles: [":host{--kirby-action-sheet-margin-horizontal: 16px}ion-fab-button{--box-shadow: 0 0 5px 0 rgba(28, 28, 28, .04), 0 10px 24px -10px rgba(28, 28, 28, .15);width:64px;height:64px;-webkit-user-select:none;user-select:none}@media (hover: hover){ion-fab-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-fab-button:active,ion-fab-button.ion-activated{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-fab-button::part(native):after{transition:all 80ms linear 0ms}@media (hover: hover) and (pointer: fine){ion-fab-button{outline:none;border-radius:999px}ion-fab-button:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}ion-fab-button:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}ion-fab-button:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}ion-fab-button[disabled]{--background: var(--kirby-semi-light);--box-shadow: none;opacity:1}ion-fab{position:fixed;bottom:16px;right:16px}:host-context(.fixed-content) ion-fab{position:absolute}ion-backdrop{visibility:hidden;opacity:0;transition:opacity .75s;position:fixed;z-index:999}ion-backdrop.backdrop-visible{visibility:visible;opacity:.4}@media (min-width: 768px){ion-backdrop.backdrop-visible{opacity:0}}ion-fab-list{margin-top:76px;margin-bottom:76px;right:0}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]

package/fesm2022/kirbydesign-designsystem-fab-sheet.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"kirbydesign-designsystem-fab-sheet.mjs","sources":["../../../../libs/designsystem/fab-sheet/src/fab-sheet.component.ts","../../../../libs/designsystem/fab-sheet/src/fab-sheet.component.html","../../../../libs/designsystem/fab-sheet/src/kirbydesign-designsystem-fab-sheet.ts"],"sourcesContent":["import { CommonModule, DOCUMENT } from '@angular/common';\nimport {\n AfterContentInit,\n AfterViewInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ContentChild,\n ElementRef,\n HostBinding,\n Inject,\n Input,\n Renderer2,\n ViewChild,\n} from '@angular/core';\nimport { IonFab, IonFabButton, IonicModule } from '@ionic/angular';\nimport { ActionSheetComponent } from '@kirbydesign/designsystem/modal';\n\n@Component({\n standalone: true,\n imports: [IonicModule, CommonModule],\n selector: 'kirby-fab-sheet',\n templateUrl: './fab-sheet.component.html',\n styleUrls: ['./fab-sheet.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class FabSheetComponent implements AfterContentInit, AfterViewInit {\n @Input() disabled: boolean = false;\n @Input() horizontalAlignment: 'left' \| 'center' \| 'right' = 'right';\n\n private _isFabSheetOpen: boolean = false;\n @HostBinding('class.is-open')\n get isFabSheetOpen() {\n return this._isFabSheetOpen;\n }\n\n @ContentChild(ActionSheetComponent, { static: false }) actionSheet: ActionSheetComponent;\n\n @ViewChild(IonFabButton, { static: true, read: ElementRef })\n ionFabButton: ElementRef<HTMLElement>;\n\n @ViewChild(IonFab, { static: true })\n ionFab: IonFab;\n\n constructor(\n private changeDetectorRef: ChangeDetectorRef,\n private renderer: Renderer2,\n @Inject(DOCUMENT) private document: Document\n ) {}\n\n ngAfterContentInit(): void {\n if (this.actionSheet) {\n this.actionSheet.hideCancel = true;\n }\n }\n\n ngAfterViewInit(): void {\n this.renderer.removeClass(this.document.body, 'backdrop-no-scroll');\n }\n\n hideActions() {\n this.ionFab.close().then(() => this.fabSheetStateChanged(false));\n }\n\n onFabButtonClick() {\n setTimeout(() => {\n this.fabSheetStateChanged(this.ionFab.activated);\n });\n }\n\n onFabListClick() {\n this.ionFab.close().then(() => {\n this.fabSheetStateChanged(false);\n });\n }\n\n fabSheetStateChanged(isOpen: boolean) {\n this._isFabSheetOpen = isOpen;\n if (this.isFabSheetOpen) {\n this.renderer.addClass(this.document.body, 'fab-sheet-active');\n this.renderer.addClass(this.document.body, 'backdrop-no-scroll');\n } else {\n this.renderer.removeClass(this.document.body, 'fab-sheet-active');\n this.renderer.removeClass(this.document.body, 'backdrop-no-scroll');\n }\n\n this.changeDetectorRef.detectChanges();\n }\n}\n","<ion-backdrop\n [class.backdrop-visible]=\"isFabSheetOpen\"\n [stopPropagation]=\"false\"\n (ionBackdropTap)=\"hideActions()\"\n (click)=\"hideActions()\"\n></ion-backdrop>\n<ion-fab>\n <ion-fab-button\n (click)=\"onFabButtonClick()\"\n [disabled]=\"disabled\"\n [attr.disabled]=\"disabled ? true : null\"\n tabindex=\"-1\"\n >\n <ng-content select=\"kirby-icon\"></ng-content>\n </ion-fab-button>\n <ion-fab-list\n ngIf=\"actionSheet\"\n side=\"top\"\n class=\"{{ horizontalAlignment }}\"\n (click)=\"onFabListClick()\"\n >\n <ng-content select=\"kirby-action-sheet\"></ng-content>\n </ion-fab-list>\n</ion-fab>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":"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~~knDAAA~~,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,WAAW,inBAAE,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;2FAMxB,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAR7B,SAAS;iCACI,IAAI,EAAA,OAAA,EACP,CAAC,WAAW,EAAE,YAAY,CAAC,EAAA,QAAA,EAC1B,iBAAiB,EAAA,eAAA,EAGV,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,ipBAAA,EAAA,MAAA,EAAA,CAAA,~~knDAAA~~,CAAA,EAAA,CAAA;;0BAuB5C,MAAM;2BAAC,QAAQ,CAAA;4CApBT,QAAQ,EAAA,CAAA;sBAAhB,KAAK;gBACG,mBAAmB,EAAA,CAAA;sBAA3B,KAAK;gBAIF,cAAc,EAAA,CAAA;sBADjB,WAAW;uBAAC,eAAe,CAAA;gBAK2B,WAAW,EAAA,CAAA;sBAAjE,YAAY;AAAC,gBAAA,IAAA,EAAA,CAAA,oBAAoB,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,CAAA;gBAGrD,YAAY,EAAA,CAAA;sBADX,SAAS;uBAAC,YAAY,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,CAAA;gBAI3D,MAAM,EAAA,CAAA;sBADL,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,MAAM,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAA;;;AEzCrC;;AAEG;;;;"}
1	+ {"version":3,"file":"kirbydesign-designsystem-fab-sheet.mjs","sources":["../../../../libs/designsystem/fab-sheet/src/fab-sheet.component.ts","../../../../libs/designsystem/fab-sheet/src/fab-sheet.component.html","../../../../libs/designsystem/fab-sheet/src/kirbydesign-designsystem-fab-sheet.ts"],"sourcesContent":["import { CommonModule, DOCUMENT } from '@angular/common';\nimport {\n AfterContentInit,\n AfterViewInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ContentChild,\n ElementRef,\n HostBinding,\n Inject,\n Input,\n Renderer2,\n ViewChild,\n} from '@angular/core';\nimport { IonFab, IonFabButton, IonicModule } from '@ionic/angular';\nimport { ActionSheetComponent } from '@kirbydesign/designsystem/modal';\n\n@Component({\n standalone: true,\n imports: [IonicModule, CommonModule],\n selector: 'kirby-fab-sheet',\n templateUrl: './fab-sheet.component.html',\n styleUrls: ['./fab-sheet.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class FabSheetComponent implements AfterContentInit, AfterViewInit {\n @Input() disabled: boolean = false;\n @Input() horizontalAlignment: 'left' \| 'center' \| 'right' = 'right';\n\n private _isFabSheetOpen: boolean = false;\n @HostBinding('class.is-open')\n get isFabSheetOpen() {\n return this._isFabSheetOpen;\n }\n\n @ContentChild(ActionSheetComponent, { static: false }) actionSheet: ActionSheetComponent;\n\n @ViewChild(IonFabButton, { static: true, read: ElementRef })\n ionFabButton: ElementRef<HTMLElement>;\n\n @ViewChild(IonFab, { static: true })\n ionFab: IonFab;\n\n constructor(\n private changeDetectorRef: ChangeDetectorRef,\n private renderer: Renderer2,\n @Inject(DOCUMENT) private document: Document\n ) {}\n\n ngAfterContentInit(): void {\n if (this.actionSheet) {\n this.actionSheet.hideCancel = true;\n }\n }\n\n ngAfterViewInit(): void {\n this.renderer.removeClass(this.document.body, 'backdrop-no-scroll');\n }\n\n hideActions() {\n this.ionFab.close().then(() => this.fabSheetStateChanged(false));\n }\n\n onFabButtonClick() {\n setTimeout(() => {\n this.fabSheetStateChanged(this.ionFab.activated);\n });\n }\n\n onFabListClick() {\n this.ionFab.close().then(() => {\n this.fabSheetStateChanged(false);\n });\n }\n\n fabSheetStateChanged(isOpen: boolean) {\n this._isFabSheetOpen = isOpen;\n if (this.isFabSheetOpen) {\n this.renderer.addClass(this.document.body, 'fab-sheet-active');\n this.renderer.addClass(this.document.body, 'backdrop-no-scroll');\n } else {\n this.renderer.removeClass(this.document.body, 'fab-sheet-active');\n this.renderer.removeClass(this.document.body, 'backdrop-no-scroll');\n }\n\n this.changeDetectorRef.detectChanges();\n }\n}\n","<ion-backdrop\n [class.backdrop-visible]=\"isFabSheetOpen\"\n [stopPropagation]=\"false\"\n (ionBackdropTap)=\"hideActions()\"\n (click)=\"hideActions()\"\n></ion-backdrop>\n<ion-fab>\n <ion-fab-button\n (click)=\"onFabButtonClick()\"\n [disabled]=\"disabled\"\n [attr.disabled]=\"disabled ? true : null\"\n tabindex=\"-1\"\n >\n <ng-content select=\"kirby-icon\"></ng-content>\n </ion-fab-button>\n <ion-fab-list\n ngIf=\"actionSheet\"\n side=\"top\"\n class=\"{{ horizontalAlignment }}\"\n (click)=\"onFabListClick()\"\n >\n <ng-content select=\"kirby-action-sheet\"></ng-content>\n </ion-fab-list>\n</ion-fab>\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-flag.mjs CHANGED Viewed

@@ -13,13 +13,13 @@ class FlagComponent {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FlagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: FlagComponent, isStandalone: true, selector: "kirby-flag", inputs: { size: "size", themeColor: "themeColor" }, host: { properties: { "class": "this._cssClass" } }, ngImport: i0, template: `
     <ng-content></ng-content>
-  `, isInline: true, styles: [":host{display:inline-block;background-color:var(--kirby-flag-background-color, transparent);color:var(--kirby-flag-color, var(--kirby-white-contrast));border:1px solid var(--kirby-flag-border-color, var(--kirby-medium));border-radius:4px;font-size:16px;padding:2px 8px;font-weight:500;line-height:1.375}:host.sm{font-size:14px;line-height:1.2857142857}:host.xs{font-size:12px;line-height:1.1666666667;padding-left:4px;padding-right:4px}:host(.success){--kirby-flag-background-color: var(--kirby-success);--kirby-flag-color: var(--kirby-success-contrast);--kirby-flag-border-color: var(--kirby-success)}:host(.warning){--kirby-flag-background-color: var(--kirby-warning);--kirby-flag-color: var(--kirby-warning-contrast);--kirby-flag-border-color: var(--kirby-warning)}:host(.semi-light){--kirby-flag-background-color: var(--kirby-semi-light);--kirby-flag-color: var(--kirby-semi-light-contrast);--kirby-flag-border-color: var(--kirby-semi-light)}:host(.danger){--kirby-flag-background-color: #ff878a;--kirby-flag-color: #1c1c1c;--kirby-flag-border-color: #ff878a}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:inline-block;background-color:var(--kirby-flag-background-color, transparent);color:var(--kirby-flag-color, var(--kirby-white-contrast));border:1px solid var(--kirby-flag-border-color, var(--kirby-medium));border-radius:4px;font-size:16px;padding:2px 8px;font-weight:500;line-height:1.375}:host.sm{font-size:14px;line-height:1.2857142857}:host.xs{font-size:12px;line-height:1.1666666667;padding-left:4px;padding-right:4px}:host(.success){--kirby-flag-background-color: var(--kirby-decoration-color-green-30);--kirby-flag-color: var(--kirby-black);--kirby-flag-border-color: var(--kirby-flag-background-color)}:host(.warning){--kirby-flag-background-color: var(--kirby-decoration-color-yellow-30);--kirby-flag-color: var(--kirby-black);--kirby-flag-border-color: var(--kirby-flag-background-color)}:host(.danger){--kirby-flag-background-color: var(--kirby-decoration-color-red-30);--kirby-flag-color: var(--kirby-black);--kirby-flag-border-color: var(--kirby-flag-background-color)}:host(.semi-light){--kirby-flag-background-color: var(--kirby-semi-light);--kirby-flag-color: var(--kirby-black);--kirby-flag-border-color: var(--kirby-flag-background-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FlagComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [CommonModule], selector: 'kirby-flag', template: `
     <ng-content></ng-content>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-block;background-color:var(--kirby-flag-background-color, transparent);color:var(--kirby-flag-color, var(--kirby-white-contrast));border:1px solid var(--kirby-flag-border-color, var(--kirby-medium));border-radius:4px;font-size:16px;padding:2px 8px;font-weight:500;line-height:1.375}:host.sm{font-size:14px;line-height:1.2857142857}:host.xs{font-size:12px;line-height:1.1666666667;padding-left:4px;padding-right:4px}:host(.success){--kirby-flag-background-color: var(--kirby-success);--kirby-flag-color: var(--kirby-success-contrast);--kirby-flag-border-color: var(--kirby-success)}:host(.warning){--kirby-flag-background-color: var(--kirby-warning);--kirby-flag-color: var(--kirby-warning-contrast);--kirby-flag-border-color: var(--kirby-warning)}:host(.semi-light){--kirby-flag-background-color: var(--kirby-semi-light);--kirby-flag-color: var(--kirby-semi-light-contrast);--kirby-flag-border-color: var(--kirby-semi-light)}:host(.danger){--kirby-flag-background-color: #ff878a;--kirby-flag-color: #1c1c1c;--kirby-flag-border-color: #ff878a}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-block;background-color:var(--kirby-flag-background-color, transparent);color:var(--kirby-flag-color, var(--kirby-white-contrast));border:1px solid var(--kirby-flag-border-color, var(--kirby-medium));border-radius:4px;font-size:16px;padding:2px 8px;font-weight:500;line-height:1.375}:host.sm{font-size:14px;line-height:1.2857142857}:host.xs{font-size:12px;line-height:1.1666666667;padding-left:4px;padding-right:4px}:host(.success){--kirby-flag-background-color: var(--kirby-decoration-color-green-30);--kirby-flag-color: var(--kirby-black);--kirby-flag-border-color: var(--kirby-flag-background-color)}:host(.warning){--kirby-flag-background-color: var(--kirby-decoration-color-yellow-30);--kirby-flag-color: var(--kirby-black);--kirby-flag-border-color: var(--kirby-flag-background-color)}:host(.danger){--kirby-flag-background-color: var(--kirby-decoration-color-red-30);--kirby-flag-color: var(--kirby-black);--kirby-flag-border-color: var(--kirby-flag-background-color)}:host(.semi-light){--kirby-flag-background-color: var(--kirby-semi-light);--kirby-flag-color: var(--kirby-black);--kirby-flag-border-color: var(--kirby-flag-background-color)}\n"] }]
         }], propDecorators: { size: [{
                 type: Input
             }], themeColor: [{

package/fesm2022/kirbydesign-designsystem-flag.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"kirbydesign-designsystem-flag.mjs","sources":["../../../../libs/designsystem/flag/src/flag.component.ts","../../../../libs/designsystem/flag/src/kirbydesign-designsystem-flag.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';\n\n@Component({\n standalone: true,\n imports: [CommonModule],\n selector: 'kirby-flag',\n template: `\n <ng-content></ng-content>\n `,\n styleUrls: ['./flag.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class FlagComponent {\n @Input() size: 'xs' \| 'sm' \| 'md' = 'md';\n @Input() themeColor: 'success' \| 'warning' \| 'danger' \| 'semi-light' \| 'transparent' =\n 'transparent';\n\n @HostBinding('class')\n get _cssClass() {\n return [this.themeColor, this.size];\n }\n}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":";;;;MAaa,aAAa,CAAA;AAV1B,IAAA,WAAA,GAAA;QAWW,IAAI,CAAA,IAAA,GAAuB,IAAI,CAAC;QAChC,IAAU,CAAA,UAAA,GACjB,aAAa,CAAC;AAMjB,KAAA;AAJC,IAAA,IACI,SAAS,GAAA;QACX,OAAO,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;KACrC;iIARU,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAb,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,aAAa,EANd,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,UAAA,EAAA,YAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,gBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA;;AAET,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,~~2iCAAA~~,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAJS,YAAY,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;2FAQX,aAAa,EAAA,UAAA,EAAA,CAAA;kBAVzB,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,UAAA,EAAA,IAAI,WACP,CAAC,YAAY,CAAC,EAAA,QAAA,EACb,YAAY,EACZ,QAAA,EAAA,CAAA;;GAET,EAEgB,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,MAAA,EAAA,CAAA,~~2iCAAA~~,CAAA,EAAA,CAAA;8BAGtC,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBACG,UAAU,EAAA,CAAA;sBAAlB,KAAK;gBAIF,SAAS,EAAA,CAAA;sBADZ,WAAW;uBAAC,OAAO,CAAA;;;AClBtB;;AAEG;;;;"}
1	+ {"version":3,"file":"kirbydesign-designsystem-flag.mjs","sources":["../../../../libs/designsystem/flag/src/flag.component.ts","../../../../libs/designsystem/flag/src/kirbydesign-designsystem-flag.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';\n\n@Component({\n standalone: true,\n imports: [CommonModule],\n selector: 'kirby-flag',\n template: `\n <ng-content></ng-content>\n `,\n styleUrls: ['./flag.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class FlagComponent {\n @Input() size: 'xs' \| 'sm' \| 'md' = 'md';\n @Input() themeColor: 'success' \| 'warning' \| 'danger' \| 'semi-light' \| 'transparent' =\n 'transparent';\n\n @HostBinding('class')\n get _cssClass() {\n return [this.themeColor, this.size];\n }\n}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":";;;;MAaa,aAAa,CAAA;AAV1B,IAAA,WAAA,GAAA;QAWW,IAAI,CAAA,IAAA,GAAuB,IAAI,CAAC;QAChC,IAAU,CAAA,UAAA,GACjB,aAAa,CAAC;AAMjB,KAAA;AAJC,IAAA,IACI,SAAS,GAAA;QACX,OAAO,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;KACrC;iIARU,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAb,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,aAAa,EANd,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,UAAA,EAAA,YAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,gBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA;;AAET,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,spCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAJS,YAAY,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;2FAQX,aAAa,EAAA,UAAA,EAAA,CAAA;kBAVzB,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,UAAA,EAAA,IAAI,WACP,CAAC,YAAY,CAAC,EAAA,QAAA,EACb,YAAY,EACZ,QAAA,EAAA,CAAA;;GAET,EAEgB,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,MAAA,EAAA,CAAA,spCAAA,CAAA,EAAA,CAAA;8BAGtC,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBACG,UAAU,EAAA,CAAA;sBAAlB,KAAK;gBAIF,SAAS,EAAA,CAAA;sBADZ,WAAW;uBAAC,OAAO,CAAA;;;AClBtB;;AAEG;;;;"}

package/fesm2022/kirbydesign-designsystem-form-field.mjs CHANGED Viewed

@@ -116,6 +116,11 @@ class DateInputDirective {
          */
         this.enableInputMask = false;
         this.isDateInput = this.elementRef.nativeElement.type === 'date';
+        if (this.isDateInput) {
+            // Remove type to avoid user-agent specific behaviour for [type="date"]
+            // Has to be done in constructor to avoid browser behavior kicking in
+            this.elementRef.nativeElement.removeAttribute('type');
+        }
     }
     ngAfterViewInit() {
         if (!this.isDateInput)
@@ -124,10 +129,11 @@ class DateInputDirective {
         // This case is identical to date input fields _before_ native date picker
         // option was introduced
         if (this.enableInputMask) {
-            // Remove type to avoid user-agent specific behaviour for [type="date"]
-            this.elementRef.nativeElement.removeAttribute('type');
             this.initMask();
         }
+        if (this.useNativeDatePicker) {
+            this.elementRef.nativeElement.setAttribute('type', 'date');
+        }
     }
     initMask() {
         const inputFormat = this.getInputFormat();
@@ -401,17 +407,23 @@ class FormFieldComponent {
     focus() {
         if (!this.inputElement)
             return;
-        if (this.isTouch) {
-            // Trigger Ionic's input shims to ensure input is scrolled into view.
-            // See: https://github.com/ionic-team/ionic-framework/blob/master/core/src/utils/input-shims/hacks/scroll-assist.ts
-            const touchStart = new TouchEvent('touchstart');
-            const touchEnd = new TouchEvent('touchend');
-            this.inputElement.dispatchEvent(touchStart);
-            this.inputElement.dispatchEvent(touchEnd);
-        }
-        else {
-            this.inputElement.focus();
-        }
+        /*
+         * This timeout ensures that any previous manipulation of inputElement
+         * (e.g. setting disabled state) has been synced to the DOM before trying to focus.
+         */
+        setTimeout(() => {
+            if (this.isTouch) {
+                // Trigger Ionic's input shims to ensure input is scrolled into view.
+                // See: https://github.com/ionic-team/ionic-framework/blob/master/core/src/utils/input-shims/hacks/scroll-assist.ts
+                const touchStart = new TouchEvent('touchstart');
+                const touchEnd = new TouchEvent('touchend');
+                this.inputElement.dispatchEvent(touchStart);
+                this.inputElement.dispatchEvent(touchEnd);
+            }
+            else {
+                this.inputElement.focus();
+            }
+        });
     }
     ngOnInit() {
         this.isTouch = this.platform.isTouch();