@kirbydesign/designsystem 6.1.2-rc.ionic → 6.2.1

package/esm2020/lib/components/segmented-control/segmented-control.component.mjs

@@ -22,9 +22,14 @@ export class SegmentedControlComponent {
         this._disableChangeOnSwipe = false;
         this.segmentSelect = new EventEmitter();
     }
-    preventWrapperClick(event) {
+    /**
+     * Ensure that the click actually did originate from within the segment-button.
+     * We do not want to react to clicks on e.g. segment-btn-wrapper or badge.
+     */
+    preventOutsideClick(event) {
         if (event.target instanceof HTMLElement) {
-            if (event.target.classList.contains('segment-btn-wrapper')) {
+            const targetIsInSegmentBtn = !!event.target.closest('ion-segment-button');
+            if (!targetIsInSegmentBtn) {
                 event.stopImmediatePropagation();
             }
         }
@@ -84,10 +89,10 @@ export class SegmentedControlComponent {
     }
 }
 /** @nocollapse */ SegmentedControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: SegmentedControlComponent, deps: [{ token: i1.IconRegistryService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ SegmentedControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: SegmentedControlComponent, selector: "kirby-segmented-control", inputs: { mode: "mode", items: "items", selectedIndex: "selectedIndex", value: "value", size: "size", disableChangeOnSwipe: "disableChangeOnSwipe" }, outputs: { segmentSelect: "segmentSelect" }, host: { attributes: { "role": "group" }, properties: { "class": "this._modeCssClass", "class.sm": "this.isSmallSize" } }, ngImport: i0, template: "<ion-segment\n  *ngIf=\"mode === 'default'\"\n  [value]=\"value?.id\"\n  [scrollable]=\"disableChangeOnSwipe\"\n  (ionChange)=\"onSegmentSelect($event.detail.value)\"\n  (click)=\"preventWrapperClick($event)\"\n>\n  <div *ngFor=\"let item of items\" class=\"segment-btn-wrapper\">\n    <ion-segment-button [value]=\"item.id\">{{ item.text }}</ion-segment-button>\n    <kirby-badge\n      *ngIf=\"item.badge\"\n      role=\"text\"\n      [attr.aria-label]=\"item.badge.description\"\n      [themeColor]=\"item.badge.themeColor\"\n    >\n      <ng-container *ngIf=\"item.badge.icon; else badgeContent\">\n        <kirby-icon\n          *ngIf=\"item.badge.isCustomIcon; else defaultIconName\"\n          [customName]=\"item.badge.icon\"\n        ></kirby-icon>\n        <ng-template #defaultIconName>\n          <kirby-icon [name]=\"item.badge.icon\"></kirby-icon>\n        </ng-template>\n      </ng-container>\n      <ng-template #badgeContent>\n        {{ item.badge.content }}\n      </ng-template>\n    </kirby-badge>\n  </div>\n</ion-segment>\n\n<ng-container *ngIf=\"mode === 'chip' || mode === 'compactChip'\">\n  <kirby-chip\n    *ngFor=\"let item of items; let index = index\"\n    [text]=\"item.text\"\n    [isSelected]=\"index === selectedIndex\"\n    (click)=\"onSegmentSelect(item.id)\"\n    role=\"button\"\n  ></kirby-chip>\n</ng-container>\n", styles: [":host{display:block;-webkit-user-select:none;user-select:none;--kirby-badge-elevation: 0 5px 10px -10px rgba(28, 28, 28, .3), 0 0 5px 0 rgba(28, 28, 28, .08);--kirby-badge-position: absolute;--kirby-badge-top: -8px;--kirby-badge-right: 8px;--kirby-badge-z-index: 2}:host.sm ion-segment-button{min-height:32px;font-size:12px;--padding-start: 16px;--padding-end: 16px}:host.chip-mode{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}@media (pointer: coarse){:host.chip-mode{scrollbar-width:none}:host.chip-mode::-webkit-scrollbar{display:none}}ion-segment{display:inline-flex;width:auto;overflow:visible;contain:unset;--background: var(--kirby-white);border-radius:999px}ion-segment-button{position:relative;min-height:40px;font-weight:400;font-size:14px;text-transform:none;--border-radius: 999px;--border-style: none;--background: none;--color: var(--kirby-white-contrast);--indicator-color: var(--kirby-black);--color-checked: var(--kirby-black-contrast);--color-hover: var(--kirby-black-tint);--indicator-box-shadow: none;--padding-start: 24px;--padding-end: 24px;--margin-bottom: 0;--margin-end: 0;--margin-start: 0;--margin-top: 0;margin:0}ion-segment-button:after{content:\"\";position:absolute;min-height:44px;min-width:44px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}.segment-btn-wrapper{position:relative}:host-context(.plt-desktop) ion-segment-button:focus-within{outline-color:-webkit-focus-ring-color;outline-style:auto}\n"], components: [{ type: i2.IonSegment, selector: "ion-segment", inputs: ["color", "disabled", "mode", "scrollable", "selectOnFocus", "swipeGesture", "value"] }, { type: i2.IonSegmentButton, selector: "ion-segment-button", inputs: ["disabled", "layout", "mode", "type", "value"] }, { type: i3.KirbyBadge, selector: "kirby-badge", inputs: ["size", "text", "themeColor"] }, { type: i4.IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }, { type: i5.ChipComponent, selector: "kirby-chip", inputs: ["text", "isSelected"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.SelectValueAccessor, selector: "ion-range, ion-select, ion-radio-group, ion-segment, ion-datetime" }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+/** @nocollapse */ SegmentedControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: SegmentedControlComponent, selector: "kirby-segmented-control", inputs: { mode: "mode", items: "items", selectedIndex: "selectedIndex", value: "value", size: "size", disableChangeOnSwipe: "disableChangeOnSwipe" }, outputs: { segmentSelect: "segmentSelect" }, host: { attributes: { "role": "group" }, properties: { "class": "this._modeCssClass", "class.sm": "this.isSmallSize" } }, ngImport: i0, template: "<ion-segment\n  *ngIf=\"mode === 'default'\"\n  [value]=\"value?.id\"\n  [scrollable]=\"disableChangeOnSwipe\"\n  (ionChange)=\"onSegmentSelect($event.detail.value)\"\n  (click)=\"preventOutsideClick($event)\"\n>\n  <div *ngFor=\"let item of items\" class=\"segment-btn-wrapper\">\n    <ion-segment-button [value]=\"item.id\">{{ item.text }}</ion-segment-button>\n    <kirby-badge\n      *ngIf=\"item.badge\"\n      role=\"text\"\n      [attr.aria-label]=\"item.badge.description\"\n      [themeColor]=\"item.badge.themeColor\"\n    >\n      <ng-container *ngIf=\"item.badge.icon; else badgeContent\">\n        <kirby-icon\n          *ngIf=\"item.badge.isCustomIcon; else defaultIconName\"\n          [customName]=\"item.badge.icon\"\n        ></kirby-icon>\n        <ng-template #defaultIconName>\n          <kirby-icon [name]=\"item.badge.icon\"></kirby-icon>\n        </ng-template>\n      </ng-container>\n      <ng-template #badgeContent>\n        {{ item.badge.content }}\n      </ng-template>\n    </kirby-badge>\n  </div>\n</ion-segment>\n\n<ng-container *ngIf=\"mode === 'chip' || mode === 'compactChip'\">\n  <kirby-chip\n    *ngFor=\"let item of items; let index = index\"\n    [text]=\"item.text\"\n    [isSelected]=\"index === selectedIndex\"\n    (click)=\"onSegmentSelect(item.id)\"\n    role=\"button\"\n  ></kirby-chip>\n</ng-container>\n", styles: [":host{display:block;-webkit-user-select:none;user-select:none;--kirby-badge-elevation: 0 5px 10px -10px rgba(28, 28, 28, .3), 0 0 5px 0 rgba(28, 28, 28, .08);--kirby-badge-position: absolute;--kirby-badge-top: -8px;--kirby-badge-right: 8px;--kirby-badge-z-index: 2}:host.sm ion-segment-button{min-height:32px;font-size:12px;--padding-start: 16px;--padding-end: 16px}:host.chip-mode{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}@media (pointer: coarse){:host.chip-mode{scrollbar-width:none}:host.chip-mode::-webkit-scrollbar{display:none}}ion-segment{display:inline-flex;width:auto;overflow:visible;contain:unset;--background: var(--kirby-white);border-radius:999px}ion-segment-button{position:relative;min-height:40px;font-weight:400;font-size:14px;text-transform:none;--border-radius: 999px;--border-style: none;--background: none;--color: var(--kirby-white-contrast);--indicator-color: var(--kirby-black);--color-checked: var(--kirby-black-contrast);--color-hover: var(--kirby-black-tint);--indicator-box-shadow: none;--padding-start: 24px;--padding-end: 24px;--margin-bottom: 0;--margin-end: 0;--margin-start: 0;--margin-top: 0;margin:0}ion-segment-button:after{content:\"\";position:absolute;min-height:44px;min-width:44px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}.segment-btn-wrapper{position:relative}:host-context(.plt-desktop) ion-segment-button:focus-within{outline-color:-webkit-focus-ring-color;outline-style:auto}\n"], components: [{ type: i2.IonSegment, selector: "ion-segment", inputs: ["color", "disabled", "mode", "scrollable", "swipeGesture", "value"] }, { type: i2.IonSegmentButton, selector: "ion-segment-button", inputs: ["disabled", "layout", "mode", "type", "value"] }, { type: i3.KirbyBadge, selector: "kirby-badge", inputs: ["size", "text", "themeColor"] }, { type: i4.IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }, { type: i5.ChipComponent, selector: "kirby-chip", inputs: ["text", "isSelected"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.SelectValueAccessor, selector: "ion-range, ion-select, ion-radio-group, ion-segment, ion-datetime" }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: SegmentedControlComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kirby-segmented-control', host: { role: 'group' }, template: "<ion-segment\n  *ngIf=\"mode === 'default'\"\n  [value]=\"value?.id\"\n  [scrollable]=\"disableChangeOnSwipe\"\n  (ionChange)=\"onSegmentSelect($event.detail.value)\"\n  (click)=\"preventWrapperClick($event)\"\n>\n  <div *ngFor=\"let item of items\" class=\"segment-btn-wrapper\">\n    <ion-segment-button [value]=\"item.id\">{{ item.text }}</ion-segment-button>\n    <kirby-badge\n      *ngIf=\"item.badge\"\n      role=\"text\"\n      [attr.aria-label]=\"item.badge.description\"\n      [themeColor]=\"item.badge.themeColor\"\n    >\n      <ng-container *ngIf=\"item.badge.icon; else badgeContent\">\n        <kirby-icon\n          *ngIf=\"item.badge.isCustomIcon; else defaultIconName\"\n          [customName]=\"item.badge.icon\"\n        ></kirby-icon>\n        <ng-template #defaultIconName>\n          <kirby-icon [name]=\"item.badge.icon\"></kirby-icon>\n        </ng-template>\n      </ng-container>\n      <ng-template #badgeContent>\n        {{ item.badge.content }}\n      </ng-template>\n    </kirby-badge>\n  </div>\n</ion-segment>\n\n<ng-container *ngIf=\"mode === 'chip' || mode === 'compactChip'\">\n  <kirby-chip\n    *ngFor=\"let item of items; let index = index\"\n    [text]=\"item.text\"\n    [isSelected]=\"index === selectedIndex\"\n    (click)=\"onSegmentSelect(item.id)\"\n    role=\"button\"\n  ></kirby-chip>\n</ng-container>\n", styles: [":host{display:block;-webkit-user-select:none;user-select:none;--kirby-badge-elevation: 0 5px 10px -10px rgba(28, 28, 28, .3), 0 0 5px 0 rgba(28, 28, 28, .08);--kirby-badge-position: absolute;--kirby-badge-top: -8px;--kirby-badge-right: 8px;--kirby-badge-z-index: 2}:host.sm ion-segment-button{min-height:32px;font-size:12px;--padding-start: 16px;--padding-end: 16px}:host.chip-mode{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}@media (pointer: coarse){:host.chip-mode{scrollbar-width:none}:host.chip-mode::-webkit-scrollbar{display:none}}ion-segment{display:inline-flex;width:auto;overflow:visible;contain:unset;--background: var(--kirby-white);border-radius:999px}ion-segment-button{position:relative;min-height:40px;font-weight:400;font-size:14px;text-transform:none;--border-radius: 999px;--border-style: none;--background: none;--color: var(--kirby-white-contrast);--indicator-color: var(--kirby-black);--color-checked: var(--kirby-black-contrast);--color-hover: var(--kirby-black-tint);--indicator-box-shadow: none;--padding-start: 24px;--padding-end: 24px;--margin-bottom: 0;--margin-end: 0;--margin-start: 0;--margin-top: 0;margin:0}ion-segment-button:after{content:\"\";position:absolute;min-height:44px;min-width:44px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}.segment-btn-wrapper{position:relative}:host-context(.plt-desktop) ion-segment-button:focus-within{outline-color:-webkit-focus-ring-color;outline-style:auto}\n"] }]
+            args: [{ selector: 'kirby-segmented-control', host: { role: 'group' }, template: "<ion-segment\n  *ngIf=\"mode === 'default'\"\n  [value]=\"value?.id\"\n  [scrollable]=\"disableChangeOnSwipe\"\n  (ionChange)=\"onSegmentSelect($event.detail.value)\"\n  (click)=\"preventOutsideClick($event)\"\n>\n  <div *ngFor=\"let item of items\" class=\"segment-btn-wrapper\">\n    <ion-segment-button [value]=\"item.id\">{{ item.text }}</ion-segment-button>\n    <kirby-badge\n      *ngIf=\"item.badge\"\n      role=\"text\"\n      [attr.aria-label]=\"item.badge.description\"\n      [themeColor]=\"item.badge.themeColor\"\n    >\n      <ng-container *ngIf=\"item.badge.icon; else badgeContent\">\n        <kirby-icon\n          *ngIf=\"item.badge.isCustomIcon; else defaultIconName\"\n          [customName]=\"item.badge.icon\"\n        ></kirby-icon>\n        <ng-template #defaultIconName>\n          <kirby-icon [name]=\"item.badge.icon\"></kirby-icon>\n        </ng-template>\n      </ng-container>\n      <ng-template #badgeContent>\n        {{ item.badge.content }}\n      </ng-template>\n    </kirby-badge>\n  </div>\n</ion-segment>\n\n<ng-container *ngIf=\"mode === 'chip' || mode === 'compactChip'\">\n  <kirby-chip\n    *ngFor=\"let item of items; let index = index\"\n    [text]=\"item.text\"\n    [isSelected]=\"index === selectedIndex\"\n    (click)=\"onSegmentSelect(item.id)\"\n    role=\"button\"\n  ></kirby-chip>\n</ng-container>\n", styles: [":host{display:block;-webkit-user-select:none;user-select:none;--kirby-badge-elevation: 0 5px 10px -10px rgba(28, 28, 28, .3), 0 0 5px 0 rgba(28, 28, 28, .08);--kirby-badge-position: absolute;--kirby-badge-top: -8px;--kirby-badge-right: 8px;--kirby-badge-z-index: 2}:host.sm ion-segment-button{min-height:32px;font-size:12px;--padding-start: 16px;--padding-end: 16px}:host.chip-mode{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}@media (pointer: coarse){:host.chip-mode{scrollbar-width:none}:host.chip-mode::-webkit-scrollbar{display:none}}ion-segment{display:inline-flex;width:auto;overflow:visible;contain:unset;--background: var(--kirby-white);border-radius:999px}ion-segment-button{position:relative;min-height:40px;font-weight:400;font-size:14px;text-transform:none;--border-radius: 999px;--border-style: none;--background: none;--color: var(--kirby-white-contrast);--indicator-color: var(--kirby-black);--color-checked: var(--kirby-black-contrast);--color-hover: var(--kirby-black-tint);--indicator-box-shadow: none;--padding-start: 24px;--padding-end: 24px;--margin-bottom: 0;--margin-end: 0;--margin-start: 0;--margin-top: 0;margin:0}ion-segment-button:after{content:\"\";position:absolute;min-height:44px;min-width:44px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}.segment-btn-wrapper{position:relative}:host-context(.plt-desktop) ion-segment-button:focus-within{outline-color:-webkit-focus-ring-color;outline-style:auto}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.IconRegistryService }]; }, propDecorators: { mode: [{
                 type: Input
             }], _modeCssClass: [{
@@ -109,4 +114,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
             }], segmentSelect: [{
                 type: Output
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VnbWVudGVkLWNvbnRyb2wuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9kZXNpZ25zeXN0ZW0vc3JjL2xpYi9jb21wb25lbnRzL3NlZ21lbnRlZC1jb250cm9sL3NlZ21lbnRlZC1jb250cm9sLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvZGVzaWduc3lzdGVtL3NyYy9saWIvY29tcG9uZW50cy9zZWdtZW50ZWQtY29udHJvbC9zZWdtZW50ZWQtY29udHJvbC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxXQUFXLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUVwRixPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSwrQkFBK0IsQ0FBQzs7Ozs7Ozs7QUFJcEUsTUFBTSxDQUFOLElBQVksb0JBSVg7QUFKRCxXQUFZLG9CQUFvQjtJQUM5QixxQ0FBYSxDQUFBO0lBQ2IsbURBQTJCLENBQUE7SUFDM0IsMkNBQW1CLENBQUE7QUFDckIsQ0FBQyxFQUpXLG9CQUFvQixLQUFwQixvQkFBb0IsUUFJL0I7QUFTRCxNQUFNLE9BQU8seUJBQXlCO0lBQ3BDLFlBQW9CLG1CQUF3QztRQUF4Qyx3QkFBbUIsR0FBbkIsbUJBQW1CLENBQXFCO1FBVW5ELFNBQUksR0FBcUQsb0JBQW9CLENBQUMsT0FBTyxDQUFDO1FBV3ZGLFdBQU0sR0FBMEIsRUFBRSxDQUFDO1FBaUJuQyxtQkFBYyxHQUFXLENBQUMsQ0FBQyxDQUFDO1FBNEI1QiwwQkFBcUIsR0FBWSxLQUFLLENBQUM7UUFTckMsa0JBQWEsR0FBOEIsSUFBSSxZQUFZLEVBQUUsQ0FBQztJQTNFVCxDQUFDO0lBRWhFLG1CQUFtQixDQUFDLEtBQVk7UUFDOUIsSUFBSSxLQUFLLENBQUMsTUFBTSxZQUFZLFdB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QmEseUJBQXlCO2tCQVByQyxTQUFTOytCQUNFLHlCQUF5QixRQUk3QixFQUFFLElBQUksRUFBRSxPQUFPLEVBQUU7MEdBYWQsSUFBSTtzQkFBWixLQUFLO2dCQUdGLGFBQWE7c0JBRGhCLFdBQVc7dUJBQUMsT0FBTztnQkFjUCxLQUFLO3NCQUFqQixLQUFLO2dCQWlCTyxhQUFhO3NCQUF6QixLQUFLO2dCQVlPLEtBQUs7c0JBQWpCLEtBQUs7Z0JBS04sV0FBVztzQkFEVixXQUFXO3VCQUFDLFVBQVU7Z0JBR1YsSUFBSTtzQkFBaEIsS0FBSztnQkFTTyxvQkFBb0I7c0JBQWhDLEtBQUs7Z0JBSUksYUFBYTtzQkFBdEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBIb3N0QmluZGluZywgSW5wdXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5pbXBvcnQgeyBJY29uUmVnaXN0cnlTZXJ2aWNlIH0gZnJvbSAnLi4vaWNvbi9pY29uLXJlZ2lzdHJ5LnNlcnZpY2UnO1xuXG5pbXBvcnQgeyBTZWdtZW50SXRlbSwgU2VnbWVudEl0ZW1JbnRlcm5hbCB9IGZyb20gJy4vc2VnbWVudC1pdGVtJztcblxuZXhwb3J0IGVudW0gU2VnbWVudGVkQ29udHJvbE1vZGUge1xuICBjaGlwID0gJ2NoaXAnLFxuICBjb21wYWN0Q2hpcCA9ICdjb21wYWN0Q2hpcCcsXG4gIGRlZmF1bHQgPSAnZGVmYXVsdCcsXG59XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2tpcmJ5LXNlZ21lbnRlZC1jb250cm9sJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3NlZ21lbnRlZC1jb250cm9sLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vc2VnbWVudGVkLWNvbnRyb2wuY29tcG9uZW50LnNjc3MnXSxcbiAgLy8gdHNsaW50OmRpc2FibGUtbmV4dC1saW5lOiBuby1ob3N0LW1ldGFkYXRhLXByb3BlcnR5XG4gIGhvc3Q6IHsgcm9sZTogJ2dyb3VwJyB9LFxufSlcbmV4cG9ydCBjbGFzcyBTZWdtZW50ZWRDb250cm9sQ29tcG9uZW50IHtcbiAgY29uc3RydWN0b3IocHJpdmF0ZSBpY29uUmVnaXN0cnlTZXJ2aWNlOiBJY29uUmVnaXN0cnlTZXJ2aWNlKSB7fVxuXG4gIHByZXZlbnRXcmFwcGVyQ2xpY2soZXZlbnQ6IEV2ZW50KSB7XG4gICAgaWYgKGV2ZW50LnRhcmdldCBpbnN0YW5jZW9mIEhUTUxFbGVtZW50KSB7XG4gICAgICBpZiAoZXZlbnQudGFyZ2V0LmNsYXNzTGlzdC5jb250YWlucygnc2VnbWVudC1idG4td3JhcHBlcicpKSB7XG4gICAgICAgIGV2ZW50LnN0b3BJbW1lZGlhdGVQcm9wYWdhdGlvbigpO1xuICAgICAgfVxuICAgIH1cbiAgfVxuXG4gIEBJbnB1dCgpIG1vZGU6IFNlZ21lbnRlZENvbnRyb2xNb2RlIHwgYCR7U2VnbWVudGVkQ29udHJvbE1vZGV9YCA9IFNlZ21lbnRlZENvbnRyb2xNb2RlLmRlZmF1bHQ7XG5cbiAgQEhvc3RCaW5kaW5nKCdjbGFzcycpXG4gIGdldCBfbW9kZUNzc0NsYXNzKCkge1xuICAgIHJldHVybiB7XG4gICAgICBbU2VnbWVudGVkQ29udHJvbE1vZGUuY2hpcF06ICdjaGlwLW1vZGUnLFxuICAgICAgW1NlZ21lbnRlZENvbnRyb2xNb2RlLmRlZmF1bHRdOiAnZGVmYXVsdC1tb2RlJyxcbiAgICAgIFtTZWdtZW50ZWRDb250cm9sTW9kZS5jb21wYWN0Q2hpcF06ICdjb21wYWN0IGNoaXAtbW9kZScsXG4gICAgfVt0aGlzLm1vZGVdO1xuICB9XG5cbiAgcHJpdmF0ZSBfaXRlbXM6IFNlZ21lbnRJdGVtSW50ZXJuYWxbXSA9IFtdO1xuICBnZXQgaXRlbXMoKTogU2VnbWVudEl0ZW1bXSB7XG4gICAgcmV0dXJuIHRoaXMuX2l0ZW1zO1xuICB9XG5cbiAgQElucHV0KCkgc2V0IGl0ZW1zKHZhbHVlOiBTZWdtZW50SXRlbVtdKSB7XG4gICAgdGhpcy5faXRlbXMgPSB2YWx1ZSB8fCBbXTtcbiAgICB0aGlzLl9pdGVtcy5mb3JFYWNoKChpdGVtKSA9PiB7XG4gICAgICBpZiAoIWl0ZW0uYmFkZ2UpIHJldHVybjtcbiAgICAgIC8vIFdlIG5lZWQgdG8gdmVyaWZ5IHdoZXRoZXIgYmFkZ2VzIGljb24gaXMgY3VzdG9tIG9yIGRlZmF1bHQsIHNvIHdlIGNhbiBjaGVjayBmb3IgaXQgaW4gdGhlIHRlbXBsYXRlXG4gICAgICBpdGVtLmJhZGdlLmlzQ3VzdG9tSWNvbiA9XG4gICAgICAgIGl0ZW0uYmFkZ2UuaWNvbiAhPT0gdW5kZWZpbmVkICYmXG4gICAgICAgIHRoaXMuaWNvblJlZ2lzdHJ5U2VydmljZS5nZXRJY29uKGl0ZW0uYmFkZ2UuaWNvbikgIT09IHVuZGVmaW5lZDtcbiAgICB9KTtcbiAgICB0aGlzLl92YWx1ZSA9IHRoaXMuaXRlbXNbdGhpcy5zZWxlY3RlZEluZGV4XTtcbiAgfVxuXG4gIHByaXZhdGUgX3NlbGVjdGVkSW5kZXg6IG51bWJlciA9IC0xO1xuICBnZXQgc2VsZWN0ZWRJbmRleCgpOiBudW1iZXIge1xuICAgIHJldHVybiB0aGlzLl9zZWxlY3RlZEluZGV4O1xuICB9XG5cbiAgQElucHV0KCkgc2V0IHNlbGVjdGVkSW5kZXgodmFsdWU6IG51bWJlcikge1xuICAgIGlmICh2YWx1ZSAhPT0gdGhpcy5fc2VsZWN0ZWRJbmRleCkge1xuICAgICAgdGhpcy5fc2VsZWN0ZWRJbmRleCA9IHZhbHVlO1xuICAgICAgdGhpcy5fdmFsdWUgPSB0aGlzLml0ZW1zW3RoaXMuc2VsZWN0ZWRJbmRleF07XG4gICAgfVxuICB9XG5cbiAgcHJpdmF0ZSBfdmFsdWU6IFNlZ21lbnRJdGVtO1xuICBnZXQgdmFsdWUoKTogU2VnbWVudEl0ZW0ge1xuICAgIHJldHVybiB0aGlzLl92YWx1ZTtcbiAgfVxuXG4gIEBJbnB1dCgpIHNldCB2YWx1ZSh2YWx1ZTogU2VnbWVudEl0ZW0pIHtcbiAgICB0aGlzLnNlbGVjdGVkSW5kZXggPSB0aGlzLml0ZW1zLmluZGV4T2YodmFsdWUpO1xuICB9XG5cbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy5zbScpXG4gIGlzU21hbGxTaXplOiBib29sZWFuO1xuXG4gIEBJbnB1dCgpIHNldCBzaXplKHNpemU6ICdzbScgfCAnbWQnKSB7XG4gICAgdGhpcy5pc1NtYWxsU2l6ZSA9IHNpemUgPT09ICdzbSc7XG4gIH1cblxuICBwcml2YXRlIF9kaXNhYmxlQ2hhbmdlT25Td2lwZTogYm9vbGVhbiA9IGZhbHNlO1xuICBnZXQgZGlzYWJsZUNoYW5nZU9uU3dpcGUoKTogYm9vbGVhbiB7XG4gICAgcmV0dXJuIHRoaXMuX2Rpc2FibGVDaGFuZ2VPblN3aXBlO1xuICB9XG5cbiAgQElucHV0KCkgc2V0IGRpc2FibGVDaGFuZ2VPblN3aXBlKHZhbHVlOiBib29sZWFuKSB7XG4gICAgdGhpcy5fZGlzYWJsZUNoYW5nZU9uU3dpcGUgPSB2YWx1ZTtcbiAgfVxuXG4gIEBPdXRwdXQoKSBzZWdtZW50U2VsZWN0OiBFdmVudEVtaXR0ZXI8U2VnbWVudEl0ZW0+ID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuXG4gIG9uU2VnbWVudFNlbGVjdChzZWxlY3RlZElkOiBzdHJpbmcpIHtcbiAgICBjb25zdCBzZWxlY3RlZEl0ZW1JbmRleCA9IHRoaXMuaXRlbXMuZmluZEluZGV4KChpdGVtKSA9PiBzZWxlY3RlZElkID09PSBpdGVtLmlkKTtcbiAgICBpZiAoc2VsZWN0ZWRJdGVtSW5kZXggIT09IHRoaXMuc2VsZWN0ZWRJbmRleCkge1xuICAgICAgdGhpcy5zZWxlY3RlZEluZGV4ID0gc2VsZWN0ZWRJdGVtSW5kZXg7XG4gICAgICB0aGlzLnNlZ21lbnRTZWxlY3QuZW1pdCh0aGlzLnZhbHVlKTtcbiAgICB9XG4gIH1cbn1cbiIsIjxpb24tc2VnbWVudFxuICAqbmdJZj1cIm1vZGUgPT09ICdkZWZhdWx0J1wiXG4gIFt2YWx1ZV09XCJ2YWx1ZT8uaWRcIlxuICBbc2Nyb2xsYWJsZV09XCJkaXNhYmxlQ2hhbmdlT25Td2lwZVwiXG4gIChpb25DaGFuZ2UpPVwib25TZWdtZW50U2VsZWN0KCRldmVudC5kZXRhaWwudmFsdWUpXCJcbiAgKGNsaWNrKT1cInByZXZlbnRXcmFwcGVyQ2xpY2soJGV2ZW50KVwiXG4+XG4gIDxkaXYgKm5nRm9yPVwibGV0IGl0ZW0gb2YgaXRlbXNcIiBjbGFzcz1cInNlZ21lbnQtYnRuLXdyYXBwZXJcIj5cbiAgICA8aW9uLXNlZ21lbnQtYnV0dG9uIFt2YWx1ZV09XCJpdGVtLmlkXCI+e3sgaXRlbS50ZXh0IH19PC9pb24tc2VnbWVudC1idXR0b24+XG4gICAgPGtpcmJ5LWJhZGdlXG4gICAgICAqbmdJZj1cIml0ZW0uYmFkZ2VcIlxuICAgICAgcm9sZT1cInRleHRcIlxuICAgICAgW2F0dHIuYXJpYS1sYWJlbF09XCJpdGVtLmJhZGdlLmRlc2NyaXB0aW9uXCJcbiAgICAgIFt0aGVtZUNvbG9yXT1cIml0ZW0uYmFkZ2UudGhlbWVDb2xvclwiXG4gICAgPlxuICAgICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cIml0ZW0uYmFkZ2UuaWNvbjsgZWxzZSBiYWRnZUNvbnRlbnRcIj5cbiAgICAgICAgPGtpcmJ5LWljb25cbiAgICAgICAgICAqbmdJZj1cIml0ZW0uYmFkZ2UuaXNDdXN0b21JY29uOyBlbHNlIGRlZmF1bHRJY29uTmFtZVwiXG4gICAgICAgICAgW2N1c3RvbU5hbWVdPVwiaXRlbS5iYWRnZS5pY29uXCJcbiAgICAgICAgPjwva2lyYnktaWNvbj5cbiAgICAgICAgPG5nLXRlbXBsYXRlICNkZWZhdWx0SWNvbk5hbWU+XG4gICAgICAgICAgPGtpcmJ5LWljb24gW25hbWVdPVwiaXRlbS5iYWRnZS5pY29uXCI+PC9raXJieS1pY29uPlxuICAgICAgICA8L25nLXRlbXBsYXRlPlxuICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgICA8bmctdGVtcGxhdGUgI2JhZGdlQ29udGVudD5cbiAgICAgICAge3sgaXRlbS5iYWRnZS5jb250ZW50IH19XG4gICAgICA8L25nLXRlbXBsYXRlPlxuICAgIDwva2lyYnktYmFkZ2U+XG4gIDwvZGl2PlxuPC9pb24tc2VnbWVudD5cblxuPG5nLWNvbnRhaW5lciAqbmdJZj1cIm1vZGUgPT09ICdjaGlwJyB8fCBtb2RlID09PSAnY29tcGFjdENoaXAnXCI+XG4gIDxraXJieS1jaGlwXG4gICAgKm5nRm9yPVwibGV0IGl0ZW0gb2YgaXRlbXM7IGxldCBpbmRleCA9IGluZGV4XCJcbiAgICBbdGV4dF09XCJpdGVtLnRleHRcIlxuICAgIFtpc1NlbGVjdGVkXT1cImluZGV4ID09PSBzZWxlY3RlZEluZGV4XCJcbiAgICAoY2xpY2spPVwib25TZWdtZW50U2VsZWN0KGl0ZW0uaWQpXCJcbiAgICByb2xlPVwiYnV0dG9uXCJcbiAgPjwva2lyYnktY2hpcD5cbjwvbmctY29udGFpbmVyPlxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VnbWVudGVkLWNvbnRyb2wuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9kZXNpZ25zeXN0ZW0vc3JjL2xpYi9jb21wb25lbnRzL3NlZ21lbnRlZC1jb250cm9sL3NlZ21lbnRlZC1jb250cm9sLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvZGVzaWduc3lzdGVtL3NyYy9saWIvY29tcG9uZW50cy9zZWdtZW50ZWQtY29udHJvbC9zZWdtZW50ZWQtY29udHJvbC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxXQUFXLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUVwRixPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSwrQkFBK0IsQ0FBQzs7Ozs7Ozs7QUFJcEUsTUFBTSxDQUFOLElBQVksb0JBSVg7QUFKRCxXQUFZLG9CQUFvQjtJQUM5QixxQ0FBYSxDQUFBO0lBQ2IsbURBQTJCLENBQUE7SUFDM0IsMkNBQW1CLENBQUE7QUFDckIsQ0FBQyxFQUpXLG9CQUFvQixLQUFwQixvQkFBb0IsUUFJL0I7QUFTRCxNQUFNLE9BQU8seUJBQXlCO0lBQ3BDLFlBQW9CLG1CQUF3QztRQUF4Qyx3QkFBbUIsR0FBbkIsbUJBQW1CLENBQXFCO1FBZW5ELFNBQUksR0FBcUQsb0JBQW9CLENBQUMsT0FBTyxDQUFDO1FBV3ZGLFdBQU0sR0FBMEIsRUFBRSxDQUFDO1FBaUJuQyxtQkFBYyxHQUFXLENBQUMsQ0FBQyxDQUFDO1FBNEI1QiwwQkFBcUIsR0FBWSxLQUFLLENBQUM7UUFTckMsa0JBQWEsR0FBOEIsSUFBSSxZQUFZLEVBQUUsQ0FBQztJQWhGVCxDQUFDO0lBRWhFOzs7T0FHRztJQUNILG1CQUFtQixDQUFDLEtBQWlCO1FBQ25DLElBQUksS0FBSyxDQUFD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QUFDOzt5SUF6RlUseUJBQXlCOzZIQUF6Qix5QkFBeUIsNFhDbkJ0Qyw2MENBd0NBOzJGRHJCYSx5QkFBeUI7a0JBUHJDLFNBQVM7K0JBQ0UseUJBQXlCLFFBSTdCLEVBQUUsSUFBSSxFQUFFLE9BQU8sRUFBRTswR0FrQmQsSUFBSTtzQkFBWixLQUFLO2dCQUdGLGFBQWE7c0JBRGhCLFdBQVc7dUJBQUMsT0FBTztnQkFjUCxLQUFLO3NCQUFqQixLQUFLO2dCQWlCTyxhQUFhO3NCQUF6QixLQUFLO2dCQVlPLEtBQUs7c0JBQWpCLEtBQUs7Z0JBS04sV0FBVztzQkFEVixXQUFXO3VCQUFDLFVBQVU7Z0JBR1YsSUFBSTtzQkFBaEIsS0FBSztnQkFTTyxvQkFBb0I7c0JBQWhDLEtBQUs7Z0JBSUksYUFBYTtzQkFBdEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBIb3N0QmluZGluZywgSW5wdXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5pbXBvcnQgeyBJY29uUmVnaXN0cnlTZXJ2aWNlIH0gZnJvbSAnLi4vaWNvbi9pY29uLXJlZ2lzdHJ5LnNlcnZpY2UnO1xuXG5pbXBvcnQgeyBTZWdtZW50SXRlbSwgU2VnbWVudEl0ZW1JbnRlcm5hbCB9IGZyb20gJy4vc2VnbWVudC1pdGVtJztcblxuZXhwb3J0IGVudW0gU2VnbWVudGVkQ29udHJvbE1vZGUge1xuICBjaGlwID0gJ2NoaXAnLFxuICBjb21wYWN0Q2hpcCA9ICdjb21wYWN0Q2hpcCcsXG4gIGRlZmF1bHQgPSAnZGVmYXVsdCcsXG59XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2tpcmJ5LXNlZ21lbnRlZC1jb250cm9sJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3NlZ21lbnRlZC1jb250cm9sLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vc2VnbWVudGVkLWNvbnRyb2wuY29tcG9uZW50LnNjc3MnXSxcbiAgLy8gdHNsaW50OmRpc2FibGUtbmV4dC1saW5lOiBuby1ob3N0LW1ldGFkYXRhLXByb3BlcnR5XG4gIGhvc3Q6IHsgcm9sZTogJ2dyb3VwJyB9LFxufSlcbmV4cG9ydCBjbGFzcyBTZWdtZW50ZWRDb250cm9sQ29tcG9uZW50IHtcbiAgY29uc3RydWN0b3IocHJpdmF0ZSBpY29uUmVnaXN0cnlTZXJ2aWNlOiBJY29uUmVnaXN0cnlTZXJ2aWNlKSB7fVxuXG4gIC8qKlxuICAgKiBFbnN1cmUgdGhhdCB0aGUgY2xpY2sgYWN0dWFsbHkgZGlkIG9yaWdpbmF0ZSBmcm9tIHdpdGhpbiB0aGUgc2VnbWVudC1idXR0b24uXG4gICAqIFdlIGRvIG5vdCB3YW50IHRvIHJlYWN0IHRvIGNsaWNrcyBvbiBlLmcuIHNlZ21lbnQtYnRuLXdyYXBwZXIgb3IgYmFkZ2UuXG4gICAqL1xuICBwcmV2ZW50T3V0c2lkZUNsaWNrKGV2ZW50OiBUb3VjaEV2ZW50KSB7XG4gICAgaWYgKGV2ZW50LnRhcmdldCBpbnN0YW5jZW9mIEhUTUxFbGVtZW50KSB7XG4gICAgICBjb25zdCB0YXJnZXRJc0luU2VnbWVudEJ0biA9ICEhZXZlbnQudGFyZ2V0LmNsb3Nlc3QoJ2lvbi1zZWdtZW50LWJ1dHRvbicpO1xuICAgICAgaWYgKCF0YXJnZXRJc0luU2VnbWVudEJ0bikge1xuICAgICAgICBldmVudC5zdG9wSW1tZWRpYXRlUHJvcGFnYXRpb24oKTtcbiAgICAgIH1cbiAgICB9XG4gIH1cblxuICBASW5wdXQoKSBtb2RlOiBTZWdtZW50ZWRDb250cm9sTW9kZSB8IGAke1NlZ21lbnRlZENvbnRyb2xNb2RlfWAgPSBTZWdtZW50ZWRDb250cm9sTW9kZS5kZWZhdWx0O1xuXG4gIEBIb3N0QmluZGluZygnY2xhc3MnKVxuICBnZXQgX21vZGVDc3NDbGFzcygpIHtcbiAgICByZXR1cm4ge1xuICAgICAgW1NlZ21lbnRlZENvbnRyb2xNb2RlLmNoaXBdOiAnY2hpcC1tb2RlJyxcbiAgICAgIFtTZWdtZW50ZWRDb250cm9sTW9kZS5kZWZhdWx0XTogJ2RlZmF1bHQtbW9kZScsXG4gICAgICBbU2VnbWVudGVkQ29udHJvbE1vZGUuY29tcGFjdENoaXBdOiAnY29tcGFjdCBjaGlwLW1vZGUnLFxuICAgIH1bdGhpcy5tb2RlXTtcbiAgfVxuXG4gIHByaXZhdGUgX2l0ZW1zOiBTZWdtZW50SXRlbUludGVybmFsW10gPSBbXTtcbiAgZ2V0IGl0ZW1zKCk6IFNlZ21lbnRJdGVtW10ge1xuICAgIHJldHVybiB0aGlzLl9pdGVtcztcbiAgfVxuXG4gIEBJbnB1dCgpIHNldCBpdGVtcyh2YWx1ZTogU2VnbWVudEl0ZW1bXSkge1xuICAgIHRoaXMuX2l0ZW1zID0gdmFsdWUgfHwgW107XG4gICAgdGhpcy5faXRlbXMuZm9yRWFjaCgoaXRlbSkgPT4ge1xuICAgICAgaWYgKCFpdGVtLmJhZGdlKSByZXR1cm47XG4gICAgICAvLyBXZSBuZWVkIHRvIHZlcmlmeSB3aGV0aGVyIGJhZGdlcyBpY29uIGlzIGN1c3RvbSBvciBkZWZhdWx0LCBzbyB3ZSBjYW4gY2hlY2sgZm9yIGl0IGluIHRoZSB0ZW1wbGF0ZVxuICAgICAgaXRlbS5iYWRnZS5pc0N1c3RvbUljb24gPVxuICAgICAgICBpdGVtLmJhZGdlLmljb24gIT09IHVuZGVmaW5lZCAmJlxuICAgICAgICB0aGlzLmljb25SZWdpc3RyeVNlcnZpY2UuZ2V0SWNvbihpdGVtLmJhZGdlLmljb24pICE9PSB1bmRlZmluZWQ7XG4gICAgfSk7XG4gICAgdGhpcy5fdmFsdWUgPSB0aGlzLml0ZW1zW3RoaXMuc2VsZWN0ZWRJbmRleF07XG4gIH1cblxuICBwcml2YXRlIF9zZWxlY3RlZEluZGV4OiBudW1iZXIgPSAtMTtcbiAgZ2V0IHNlbGVjdGVkSW5kZXgoKTogbnVtYmVyIHtcbiAgICByZXR1cm4gdGhpcy5fc2VsZWN0ZWRJbmRleDtcbiAgfVxuXG4gIEBJbnB1dCgpIHNldCBzZWxlY3RlZEluZGV4KHZhbHVlOiBudW1iZXIpIHtcbiAgICBpZiAodmFsdWUgIT09IHRoaXMuX3NlbGVjdGVkSW5kZXgpIHtcbiAgICAgIHRoaXMuX3NlbGVjdGVkSW5kZXggPSB2YWx1ZTtcbiAgICAgIHRoaXMuX3ZhbHVlID0gdGhpcy5pdGVtc1t0aGlzLnNlbGVjdGVkSW5kZXhdO1xuICAgIH1cbiAgfVxuXG4gIHByaXZhdGUgX3ZhbHVlOiBTZWdtZW50SXRlbTtcbiAgZ2V0IHZhbHVlKCk6IFNlZ21lbnRJdGVtIHtcbiAgICByZXR1cm4gdGhpcy5fdmFsdWU7XG4gIH1cblxuICBASW5wdXQoKSBzZXQgdmFsdWUodmFsdWU6IFNlZ21lbnRJdGVtKSB7XG4gICAgdGhpcy5zZWxlY3RlZEluZGV4ID0gdGhpcy5pdGVtcy5pbmRleE9mKHZhbHVlKTtcbiAgfVxuXG4gIEBIb3N0QmluZGluZygnY2xhc3Muc20nKVxuICBpc1NtYWxsU2l6ZTogYm9vbGVhbjtcblxuICBASW5wdXQoKSBzZXQgc2l6ZShzaXplOiAnc20nIHwgJ21kJykge1xuICAgIHRoaXMuaXNTbWFsbFNpemUgPSBzaXplID09PSAnc20nO1xuICB9XG5cbiAgcHJpdmF0ZSBfZGlzYWJsZUNoYW5nZU9uU3dpcGU6IGJvb2xlYW4gPSBmYWxzZTtcbiAgZ2V0IGRpc2FibGVDaGFuZ2VPblN3aXBlKCk6IGJvb2xlYW4ge1xuICAgIHJldHVybiB0aGlzLl9kaXNhYmxlQ2hhbmdlT25Td2lwZTtcbiAgfVxuXG4gIEBJbnB1dCgpIHNldCBkaXNhYmxlQ2hhbmdlT25Td2lwZSh2YWx1ZTogYm9vbGVhbikge1xuICAgIHRoaXMuX2Rpc2FibGVDaGFuZ2VPblN3aXBlID0gdmFsdWU7XG4gIH1cblxuICBAT3V0cHV0KCkgc2VnbWVudFNlbGVjdDogRXZlbnRFbWl0dGVyPFNlZ21lbnRJdGVtPiA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcblxuICBvblNlZ21lbnRTZWxlY3Qoc2VsZWN0ZWRJZDogc3RyaW5nKSB7XG4gICAgY29uc3Qgc2VsZWN0ZWRJdGVtSW5kZXggPSB0aGlzLml0ZW1zLmZpbmRJbmRleCgoaXRlbSkgPT4gc2VsZWN0ZWRJZCA9PT0gaXRlbS5pZCk7XG4gICAgaWYgKHNlbGVjdGVkSXRlbUluZGV4ICE9PSB0aGlzLnNlbGVjdGVkSW5kZXgpIHtcbiAgICAgIHRoaXMuc2VsZWN0ZWRJbmRleCA9IHNlbGVjdGVkSXRlbUluZGV4O1xuICAgICAgdGhpcy5zZWdtZW50U2VsZWN0LmVtaXQodGhpcy52YWx1ZSk7XG4gICAgfVxuICB9XG59XG4iLCI8aW9uLXNlZ21lbnRcbiAgKm5nSWY9XCJtb2RlID09PSAnZGVmYXVsdCdcIlxuICBbdmFsdWVdPVwidmFsdWU/LmlkXCJcbiAgW3Njcm9sbGFibGVdPVwiZGlzYWJsZUNoYW5nZU9uU3dpcGVcIlxuICAoaW9uQ2hhbmdlKT1cIm9uU2VnbWVudFNlbGVjdCgkZXZlbnQuZGV0YWlsLnZhbHVlKVwiXG4gIChjbGljayk9XCJwcmV2ZW50T3V0c2lkZUNsaWNrKCRldmVudClcIlxuPlxuICA8ZGl2ICpuZ0Zvcj1cImxldCBpdGVtIG9mIGl0ZW1zXCIgY2xhc3M9XCJzZWdtZW50LWJ0bi13cmFwcGVyXCI+XG4gICAgPGlvbi1zZWdtZW50LWJ1dHRvbiBbdmFsdWVdPVwiaXRlbS5pZFwiPnt7IGl0ZW0udGV4dCB9fTwvaW9uLXNlZ21lbnQtYnV0dG9uPlxuICAgIDxraXJieS1iYWRnZVxuICAgICAgKm5nSWY9XCJpdGVtLmJhZGdlXCJcbiAgICAgIHJvbGU9XCJ0ZXh0XCJcbiAgICAgIFthdHRyLmFyaWEtbGFiZWxdPVwiaXRlbS5iYWRnZS5kZXNjcmlwdGlvblwiXG4gICAgICBbdGhlbWVDb2xvcl09XCJpdGVtLmJhZGdlLnRoZW1lQ29sb3JcIlxuICAgID5cbiAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJpdGVtLmJhZGdlLmljb247IGVsc2UgYmFkZ2VDb250ZW50XCI+XG4gICAgICAgIDxraXJieS1pY29uXG4gICAgICAgICAgKm5nSWY9XCJpdGVtLmJhZGdlLmlzQ3VzdG9tSWNvbjsgZWxzZSBkZWZhdWx0SWNvbk5hbWVcIlxuICAgICAgICAgIFtjdXN0b21OYW1lXT1cIml0ZW0uYmFkZ2UuaWNvblwiXG4gICAgICAgID48L2tpcmJ5LWljb24+XG4gICAgICAgIDxuZy10ZW1wbGF0ZSAjZGVmYXVsdEljb25OYW1lPlxuICAgICAgICAgIDxraXJieS1pY29uIFtuYW1lXT1cIml0ZW0uYmFkZ2UuaWNvblwiPjwva2lyYnktaWNvbj5cbiAgICAgICAgPC9uZy10ZW1wbGF0ZT5cbiAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgPG5nLXRlbXBsYXRlICNiYWRnZUNvbnRlbnQ+XG4gICAgICAgIHt7IGl0ZW0uYmFkZ2UuY29udGVudCB9fVxuICAgICAgPC9uZy10ZW1wbGF0ZT5cbiAgICA8L2tpcmJ5LWJhZGdlPlxuICA8L2Rpdj5cbjwvaW9uLXNlZ21lbnQ+XG5cbjxuZy1jb250YWluZXIgKm5nSWY9XCJtb2RlID09PSAnY2hpcCcgfHwgbW9kZSA9PT0gJ2NvbXBhY3RDaGlwJ1wiPlxuICA8a2lyYnktY2hpcFxuICAgICpuZ0Zvcj1cImxldCBpdGVtIG9mIGl0ZW1zOyBsZXQgaW5kZXggPSBpbmRleFwiXG4gICAgW3RleHRdPVwiaXRlbS50ZXh0XCJcbiAgICBbaXNTZWxlY3RlZF09XCJpbmRleCA9PT0gc2VsZWN0ZWRJbmRleFwiXG4gICAgKGNsaWNrKT1cIm9uU2VnbWVudFNlbGVjdChpdGVtLmlkKVwiXG4gICAgcm9sZT1cImJ1dHRvblwiXG4gID48L2tpcmJ5LWNoaXA+XG48L25nLWNvbnRhaW5lcj5cbiJdfQ==

package/esm2020/lib/components/slide-button/slide-button.component.mjs

@@ -57,10 +57,10 @@ export class SlideButtonComponent {
     }
 }
 /** @nocollapse */ SlideButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: SlideButtonComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ SlideButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: SlideButtonComponent, selector: "kirby-slide-button", inputs: { text: "text", expand: "expand" }, outputs: { slideDone: "slideDone", slidingPercentageChanged: "slidingPercentageChanged" }, ngImport: i0, template: "<div class=\"slide-button-container\" [ngClass]=\"{ 'slide-done': isSlideDone }\">\n  <input\n    type=\"range\"\n    (mouseup)=\"onSliderMouseup()\"\n    (touchend)=\"onSliderMouseup()\"\n    (input)=\"onSliderValueChange($event.target.value)\"\n    (mousedown)=\"onSliderMousedown()\"\n    (touchstart)=\"onSliderMousedown()\"\n    class=\"slide-button\"\n    [value]=\"value\"\n    max=\"100\"\n  />\n  <p class=\"slide-button-text slide-{{ pctInTens }}-pct\">{{ text }}</p>\n</div>\n", styles: [":host{position:relative;display:inline-block;width:256px;-webkit-user-select:none;user-select:none}:host[expand=block]{display:block;width:100%}:host .slide-button-container{width:100%;display:flex;justify-content:center;align-items:center;color:var(--kirby-primary-contrast);background-color:var(--kirby-primary);height:56px;border-radius:26px}:host .slide-10-pct{opacity:.9}:host .slide-20-pct{opacity:.8}:host .slide-30-pct{opacity:.7}:host .slide-40-pct{opacity:.6}:host .slide-50-pct{opacity:.5}:host .slide-60-pct{opacity:.4}:host .slide-70-pct{opacity:.3}:host .slide-80-pct{opacity:.2}:host .slide-90-pct{opacity:.1}:host .slide-100-pct{opacity:0}:host .slide-button-text{position:absolute;font-size:16px;margin:0;line-height:1;z-index:1;width:100%;text-align:center;padding:0 26px 0 56px}:host .slide-button{width:100%;height:100%;-webkit-appearance:none;appearance:none;background:transparent;z-index:2}:host .slide-button::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;border-radius:50%;background-color:var(--kirby-white);background-image:url(/assets/kirby/icons/svg/arrow-more.svg);background-repeat:no-repeat;background-position:center;background-size:24px;width:52px;height:52px;border:none;cursor:pointer}:host .slide-button::-moz-range-thumb{appearance:none;border-radius:50%;background-color:var(--kirby-white);background-image:url(/assets/kirby/icons/svg/arrow-more.svg);background-repeat:no-repeat;background-position:center;background-size:24px;width:52px;height:52px;border:none;cursor:pointer}:host .slide-done{transition:all .3s ease-in-out;opacity:0;height:0;transform:scale(0);pointer-events:none}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ SlideButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: SlideButtonComponent, selector: "kirby-slide-button", inputs: { text: "text", expand: "expand" }, outputs: { slideDone: "slideDone", slidingPercentageChanged: "slidingPercentageChanged" }, ngImport: i0, template: "<div class=\"slide-button-container\" [ngClass]=\"{ 'slide-done': isSlideDone }\">\n  <input\n    type=\"range\"\n    (mouseup)=\"onSliderMouseup()\"\n    (touchend)=\"onSliderMouseup()\"\n    (input)=\"onSliderValueChange($event.target.value)\"\n    (mousedown)=\"onSliderMousedown()\"\n    (touchstart)=\"onSliderMousedown()\"\n    class=\"slide-button\"\n    [value]=\"value\"\n    max=\"100\"\n  />\n  <p class=\"slide-button-text slide-{{ pctInTens }}-pct\">{{ text }}</p>\n</div>\n", styles: [":host{position:relative;display:inline-block;width:256px;-webkit-user-select:none;user-select:none}:host[expand=block]{display:block;width:100%}:host .slide-button-container{width:100%;display:flex;justify-content:center;align-items:center;color:var(--kirby-primary-contrast);background-color:var(--kirby-primary);height:56px;border-radius:26px}:host .slide-10-pct{opacity:.9}:host .slide-20-pct{opacity:.8}:host .slide-30-pct{opacity:.7}:host .slide-40-pct{opacity:.6}:host .slide-50-pct{opacity:.5}:host .slide-60-pct{opacity:.4}:host .slide-70-pct{opacity:.3}:host .slide-80-pct{opacity:.2}:host .slide-90-pct{opacity:.1}:host .slide-100-pct{opacity:0}:host .slide-button-text{position:absolute;font-size:16px;margin:0;line-height:1;z-index:1;width:100%;text-align:center;padding:0 26px 0 56px}:host .slide-button{width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;z-index:2}:host .slide-button::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;border-radius:50%;background-color:var(--kirby-white);background-image:url(/assets/kirby/icons/svg/arrow-more.svg);background-repeat:no-repeat;background-position:center;background-size:24px;width:52px;height:52px;border:none;cursor:pointer}:host .slide-button::-moz-range-thumb{-moz-appearance:none;appearance:none;border-radius:50%;background-color:var(--kirby-white);background-image:url(/assets/kirby/icons/svg/arrow-more.svg);background-repeat:no-repeat;background-position:center;background-size:24px;width:52px;height:52px;border:none;cursor:pointer}:host .slide-done{transition:all .3s ease-in-out;opacity:0;height:0;transform:scale(0);pointer-events:none}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: SlideButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kirby-slide-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"slide-button-container\" [ngClass]=\"{ 'slide-done': isSlideDone }\">\n  <input\n    type=\"range\"\n    (mouseup)=\"onSliderMouseup()\"\n    (touchend)=\"onSliderMouseup()\"\n    (input)=\"onSliderValueChange($event.target.value)\"\n    (mousedown)=\"onSliderMousedown()\"\n    (touchstart)=\"onSliderMousedown()\"\n    class=\"slide-button\"\n    [value]=\"value\"\n    max=\"100\"\n  />\n  <p class=\"slide-button-text slide-{{ pctInTens }}-pct\">{{ text }}</p>\n</div>\n", styles: [":host{position:relative;display:inline-block;width:256px;-webkit-user-select:none;user-select:none}:host[expand=block]{display:block;width:100%}:host .slide-button-container{width:100%;display:flex;justify-content:center;align-items:center;color:var(--kirby-primary-contrast);background-color:var(--kirby-primary);height:56px;border-radius:26px}:host .slide-10-pct{opacity:.9}:host .slide-20-pct{opacity:.8}:host .slide-30-pct{opacity:.7}:host .slide-40-pct{opacity:.6}:host .slide-50-pct{opacity:.5}:host .slide-60-pct{opacity:.4}:host .slide-70-pct{opacity:.3}:host .slide-80-pct{opacity:.2}:host .slide-90-pct{opacity:.1}:host .slide-100-pct{opacity:0}:host .slide-button-text{position:absolute;font-size:16px;margin:0;line-height:1;z-index:1;width:100%;text-align:center;padding:0 26px 0 56px}:host .slide-button{width:100%;height:100%;-webkit-appearance:none;appearance:none;background:transparent;z-index:2}:host .slide-button::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;border-radius:50%;background-color:var(--kirby-white);background-image:url(/assets/kirby/icons/svg/arrow-more.svg);background-repeat:no-repeat;background-position:center;background-size:24px;width:52px;height:52px;border:none;cursor:pointer}:host .slide-button::-moz-range-thumb{appearance:none;border-radius:50%;background-color:var(--kirby-white);background-image:url(/assets/kirby/icons/svg/arrow-more.svg);background-repeat:no-repeat;background-position:center;background-size:24px;width:52px;height:52px;border:none;cursor:pointer}:host .slide-done{transition:all .3s ease-in-out;opacity:0;height:0;transform:scale(0);pointer-events:none}\n"] }]
+            args: [{ selector: 'kirby-slide-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"slide-button-container\" [ngClass]=\"{ 'slide-done': isSlideDone }\">\n  <input\n    type=\"range\"\n    (mouseup)=\"onSliderMouseup()\"\n    (touchend)=\"onSliderMouseup()\"\n    (input)=\"onSliderValueChange($event.target.value)\"\n    (mousedown)=\"onSliderMousedown()\"\n    (touchstart)=\"onSliderMousedown()\"\n    class=\"slide-button\"\n    [value]=\"value\"\n    max=\"100\"\n  />\n  <p class=\"slide-button-text slide-{{ pctInTens }}-pct\">{{ text }}</p>\n</div>\n", styles: [":host{position:relative;display:inline-block;width:256px;-webkit-user-select:none;user-select:none}:host[expand=block]{display:block;width:100%}:host .slide-button-container{width:100%;display:flex;justify-content:center;align-items:center;color:var(--kirby-primary-contrast);background-color:var(--kirby-primary);height:56px;border-radius:26px}:host .slide-10-pct{opacity:.9}:host .slide-20-pct{opacity:.8}:host .slide-30-pct{opacity:.7}:host .slide-40-pct{opacity:.6}:host .slide-50-pct{opacity:.5}:host .slide-60-pct{opacity:.4}:host .slide-70-pct{opacity:.3}:host .slide-80-pct{opacity:.2}:host .slide-90-pct{opacity:.1}:host .slide-100-pct{opacity:0}:host .slide-button-text{position:absolute;font-size:16px;margin:0;line-height:1;z-index:1;width:100%;text-align:center;padding:0 26px 0 56px}:host .slide-button{width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;z-index:2}:host .slide-button::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;border-radius:50%;background-color:var(--kirby-white);background-image:url(/assets/kirby/icons/svg/arrow-more.svg);background-repeat:no-repeat;background-position:center;background-size:24px;width:52px;height:52px;border:none;cursor:pointer}:host .slide-button::-moz-range-thumb{-moz-appearance:none;appearance:none;border-radius:50%;background-color:var(--kirby-white);background-image:url(/assets/kirby/icons/svg/arrow-more.svg);background-repeat:no-repeat;background-position:center;background-size:24px;width:52px;height:52px;border:none;cursor:pointer}:host .slide-done{transition:all .3s ease-in-out;opacity:0;height:0;transform:scale(0);pointer-events:none}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { text: [{
                 type: Input
             }], expand: [{

package/esm2020/lib/components/toggle/toggle.component.mjs

@@ -13,7 +13,7 @@ export class ToggleComponent {
     }
 }
 /** @nocollapse */ ToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ ToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ToggleComponent, selector: "kirby-toggle", inputs: { checked: "checked", disabled: "disabled" }, outputs: { checkedChange: "checkedChange" }, ngImport: i0, template: "<ion-toggle\n  [checked]=\"checked\"\n  [disabled]=\"disabled\"\n  (ionChange)=\"onCheckedChange($event.detail.checked)\"\n></ion-toggle>\n", styles: [".toggle-checked{--background-checked: var(--kirby-success)}\n"], components: [{ type: i1.IonToggle, selector: "ion-toggle", inputs: ["checked", "color", "disabled", "enableOnOffLabels", "mode", "name", "value"] }], directives: [{ type: i1.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ ToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ToggleComponent, selector: "kirby-toggle", inputs: { checked: "checked", disabled: "disabled" }, outputs: { checkedChange: "checkedChange" }, ngImport: i0, template: "<ion-toggle\n  [checked]=\"checked\"\n  [disabled]=\"disabled\"\n  (ionChange)=\"onCheckedChange($event.detail.checked)\"\n></ion-toggle>\n", styles: [".toggle-checked{--background-checked: var(--kirby-success)}\n"], components: [{ type: i1.IonToggle, selector: "ion-toggle", inputs: ["checked", "color", "disabled", "mode", "name", "value"] }], directives: [{ type: i1.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ToggleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-toggle', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-toggle\n  [checked]=\"checked\"\n  [disabled]=\"disabled\"\n  (ionChange)=\"onCheckedChange($event.detail.checked)\"\n></ion-toggle>\n", styles: [".toggle-checked{--background-checked: var(--kirby-success)}\n"] }]