@kirbydesign/designsystem 12.0.0-dev-286cdc0 → 12.0.0-dev-9f721bb
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.
- package/fesm2022/kirbydesign-designsystem-badge.mjs +2 -2
- package/fesm2022/kirbydesign-designsystem-badge.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-card.mjs +2 -2
- package/fesm2022/kirbydesign-designsystem-card.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-checkbox.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-icon.mjs +2 -2
- package/fesm2022/kirbydesign-designsystem-icon.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-list.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-list.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-range.mjs +2 -2
- package/fesm2022/kirbydesign-designsystem-range.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-segmented-control.mjs +2 -2
- package/fesm2022/kirbydesign-designsystem-segmented-control.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-spinner.mjs +2 -2
- package/fesm2022/kirbydesign-designsystem-spinner.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-tab-navigation.mjs +2 -2
- package/fesm2022/kirbydesign-designsystem-tab-navigation.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-tabs.mjs +2 -2
- package/fesm2022/kirbydesign-designsystem-tabs.mjs.map +1 -1
- package/package.json +2 -2
- package/types/kirbydesign-designsystem-checkbox.d.ts +1 -1
|
@@ -169,7 +169,7 @@ var SegmentedControlComponent = class SegmentedControlComponent {
|
|
|
169
169
|
}],
|
|
170
170
|
ngImport: i0,
|
|
171
171
|
template: "<ion-segment\n [value]=\"value?.id\"\n [scrollable]=\"disableChangeOnSwipe || mode !== 'default'\"\n (ionChange)=\"onSegmentSelect($event.detail.value)\"\n (click)=\"preventOutsideClick($event)\"\n [disabled]=\"isDisabled\"\n>\n @for (item of items; track item.id; let i = $index) {\n <ion-segment-button\n [value]=\"item.id\"\n [attr.aria-label]=\"item.ariaLabel\"\n [attr.tabindex]=\"getTabIndex(item, i)\"\n (click)=\"focusNativeButton($event)\"\n >\n {{ item.text }}\n @if (item.badge) {\n <kirby-badge\n role=\"text\"\n [attr.aria-label]=\"item.badge.description\"\n [themeColor]=\"item.badge.themeColor\"\n >\n @if (item.badge.icon) {\n <kirby-icon [name]=\"item.badge.icon\"></kirby-icon>\n } @else {\n {{ item.badge.content }}\n }\n </kirby-badge>\n }\n </ion-segment-button>\n }\n</ion-segment>\n",
|
|
172
|
-
styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:block;-webkit-user-select:none;user-select:none;--kirby-badge-position: absolute;--kirby-badge-top: -.8em;--kirby-badge-right: -1.6em;--kirby-badge-z-index: var(--kirby-z-index-segment-badge)}:host.sm ion-segment-button{min-height:var(--kirby-spacing-l);font-size:min(var(--kirby-font-size-xs),var(--kirby-spacing-xs) * 1.45);--padding-start: var(--kirby-spacing-s);--padding-end: var(--kirby-spacing-s);--kirby-badge-right: calc(-1 * var(--kirby-spacing-xxs))}:host.sm ion-segment-button:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset);outline:none;border-radius:var(--kirby-border-radius-pill)}:host.default-mode ion-segment{--background: var(--kirby-color-fill-raised);
|
|
172
|
+
styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:block;-webkit-user-select:none;user-select:none;--kirby-badge-position: absolute;--kirby-badge-top: -.8em;--kirby-badge-right: -1.6em;--kirby-badge-z-index: var(--kirby-z-index-segment-badge)}:host.sm ion-segment-button{min-height:var(--kirby-spacing-l);font-size:min(var(--kirby-font-size-xs),var(--kirby-spacing-xs) * 1.45);--padding-start: var(--kirby-spacing-s);--padding-end: var(--kirby-spacing-s);--kirby-badge-right: calc(-1 * var(--kirby-spacing-xxs))}:host.sm ion-segment-button:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset);outline:none;border-radius:var(--kirby-border-radius-pill)}:host.default-mode ion-segment{--background: var(--kirby-color-fill-raised);border:var(--kirby-stroke-xs) solid var(--kirby-color-border-raised-quiet);overflow:visible;contain:none;width:fit-content}:host.default-mode ion-segment-button{min-height:calc(var(--kirby-spacing-xl) - 2 * var(--kirby-stroke-xs))}:host.default-mode.sm ion-segment-button{min-height:calc(var(--kirby-spacing-l) - 2 * var(--kirby-stroke-xs))}:host.chip-mode ion-segment{--background: none;border-radius:0;padding:var(--kirby-spacing-xxxs);gap:var(--kirby-spacing-xxs)}@media(pointer:coarse){:host.chip-mode ion-segment{scrollbar-width:none}:host.chip-mode ion-segment::-webkit-scrollbar{display:none}}:host.chip-mode ion-segment-button{--indicator-transition: none}:host.chip-mode ion-segment-button::part(indicator){padding-inline:0}:host.chip-mode ion-segment-button:not(.segment-button-checked){--background: var(--kirby-color-fill-raised)}:host.chip-mode ion-segment-button:not(.segment-button-checked)::part(native){border-color:var(--kirby-color-border-raised-quiet)}@media(hover:hover){:host.chip-mode ion-segment-button:not(.segment-button-checked):hover{--background: var(--kirby-color-fill-raised-hover)}:host.chip-mode ion-segment-button:not(.segment-button-checked):hover::part(native){border-color:var(--kirby-color-border-raised-quiet-hover)}}:host.chip-mode ion-segment-button:not(.segment-button-checked):active{--background: var(--kirby-color-fill-raised-active)}:host.chip-mode ion-segment-button:not(.segment-button-checked):active::part(native){border-color:var(--kirby-color-border-raised-quiet-active)}:host.compact ion-segment{--background: transparent}:host.compact ion-segment-button{--padding-start: var(--kirby-spacing-xs);--padding-end: var(--kirby-spacing-xs)}:host.compact ion-segment-button:not(.segment-button-checked){--background: var(--kirby-color-fill-base);--color: var(--kirby-color-content-base)}:host.compact ion-segment-button:not(.segment-button-checked)::part(native),:host.compact ion-segment-button:not(.segment-button-checked):hover::part(native),:host.compact ion-segment-button:not(.segment-button-checked):active::part(native){border-color:transparent}@media(hover:hover){:host.compact ion-segment-button:not(.segment-button-checked):hover{--background: var(--kirby-color-fill-base-hover);--color: var(--kirby-color-content-base-hover)}}:host.compact ion-segment-button:not(.segment-button-checked):active{--background: var(--kirby-color-fill-base-active);--color: var(--kirby-color-content-base-active)}ion-segment{border-radius:var(--kirby-border-radius-pill);grid-auto-columns:max-content;box-sizing:border-box}ion-segment-button:focus-within::part(native):focus-visible,ion-segment-button:focus-visible:focus-within::part(native){transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset)}ion-segment-button{position:relative}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%}ion-segment-button{--border-radius: var(--kirby-border-radius-pill);--border-style: none;--background: transparent;--background-hover-opacity: 0;--color: var(--kirby-color-content-raised);--color-hover: var(--color);--indicator-color: var(--kirby-color-fill-brand);--color-checked: var(--kirby-color-content-brand);--indicator-box-shadow: none;--indicator-transform: none;--padding-start: var(--kirby-spacing-m);--padding-end: var(--kirby-spacing-m);--margin-bottom: 0;--margin-end: 0;--margin-start: 0;--margin-top: 0;min-height:var(--kirby-spacing-xl);min-width:fit-content;font-weight:var(--kirby-font-weight-normal);font-size:min(var(--kirby-font-size-s),var(--kirby-spacing-s) * 1.45);text-transform:none;margin:0}@media(hover:hover){ion-segment-button:hover{--background: var(--kirby-color-fill-raised-hover);--color: var(--kirby-color-content-raised-hover);--indicator-color: var(--kirby-color-fill-brand-hover);--color-checked: var(--kirby-color-content-brand-hover)}}ion-segment-button:active{--background: var(--kirby-color-fill-raised-active);--color: var(--kirby-color-content-raised-active);--indicator-color: var(--kirby-color-fill-brand-active);--color-checked: var(--kirby-color-content-brand-active)}ion-segment-button::part(native){transition:all 80ms linear 0ms;box-sizing:border-box;border:var(--kirby-stroke-xs) solid transparent;border-radius:var(--border-radius);contain:none;overflow:visible;opacity:1}ion-segment-button::part(indicator){padding-inline:0}\n"],
|
|
173
173
|
dependencies: [
|
|
174
174
|
{
|
|
175
175
|
kind: "component",
|
|
@@ -237,7 +237,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
237
237
|
multi: true
|
|
238
238
|
}],
|
|
239
239
|
template: "<ion-segment\n [value]=\"value?.id\"\n [scrollable]=\"disableChangeOnSwipe || mode !== 'default'\"\n (ionChange)=\"onSegmentSelect($event.detail.value)\"\n (click)=\"preventOutsideClick($event)\"\n [disabled]=\"isDisabled\"\n>\n @for (item of items; track item.id; let i = $index) {\n <ion-segment-button\n [value]=\"item.id\"\n [attr.aria-label]=\"item.ariaLabel\"\n [attr.tabindex]=\"getTabIndex(item, i)\"\n (click)=\"focusNativeButton($event)\"\n >\n {{ item.text }}\n @if (item.badge) {\n <kirby-badge\n role=\"text\"\n [attr.aria-label]=\"item.badge.description\"\n [themeColor]=\"item.badge.themeColor\"\n >\n @if (item.badge.icon) {\n <kirby-icon [name]=\"item.badge.icon\"></kirby-icon>\n } @else {\n {{ item.badge.content }}\n }\n </kirby-badge>\n }\n </ion-segment-button>\n }\n</ion-segment>\n",
|
|
240
|
-
styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:block;-webkit-user-select:none;user-select:none;--kirby-badge-position: absolute;--kirby-badge-top: -.8em;--kirby-badge-right: -1.6em;--kirby-badge-z-index: var(--kirby-z-index-segment-badge)}:host.sm ion-segment-button{min-height:var(--kirby-spacing-l);font-size:min(var(--kirby-font-size-xs),var(--kirby-spacing-xs) * 1.45);--padding-start: var(--kirby-spacing-s);--padding-end: var(--kirby-spacing-s);--kirby-badge-right: calc(-1 * var(--kirby-spacing-xxs))}:host.sm ion-segment-button:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset);outline:none;border-radius:var(--kirby-border-radius-pill)}:host.default-mode ion-segment{--background: var(--kirby-color-fill-raised);
|
|
240
|
+
styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:block;-webkit-user-select:none;user-select:none;--kirby-badge-position: absolute;--kirby-badge-top: -.8em;--kirby-badge-right: -1.6em;--kirby-badge-z-index: var(--kirby-z-index-segment-badge)}:host.sm ion-segment-button{min-height:var(--kirby-spacing-l);font-size:min(var(--kirby-font-size-xs),var(--kirby-spacing-xs) * 1.45);--padding-start: var(--kirby-spacing-s);--padding-end: var(--kirby-spacing-s);--kirby-badge-right: calc(-1 * var(--kirby-spacing-xxs))}:host.sm ion-segment-button:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset);outline:none;border-radius:var(--kirby-border-radius-pill)}:host.default-mode ion-segment{--background: var(--kirby-color-fill-raised);border:var(--kirby-stroke-xs) solid var(--kirby-color-border-raised-quiet);overflow:visible;contain:none;width:fit-content}:host.default-mode ion-segment-button{min-height:calc(var(--kirby-spacing-xl) - 2 * var(--kirby-stroke-xs))}:host.default-mode.sm ion-segment-button{min-height:calc(var(--kirby-spacing-l) - 2 * var(--kirby-stroke-xs))}:host.chip-mode ion-segment{--background: none;border-radius:0;padding:var(--kirby-spacing-xxxs);gap:var(--kirby-spacing-xxs)}@media(pointer:coarse){:host.chip-mode ion-segment{scrollbar-width:none}:host.chip-mode ion-segment::-webkit-scrollbar{display:none}}:host.chip-mode ion-segment-button{--indicator-transition: none}:host.chip-mode ion-segment-button::part(indicator){padding-inline:0}:host.chip-mode ion-segment-button:not(.segment-button-checked){--background: var(--kirby-color-fill-raised)}:host.chip-mode ion-segment-button:not(.segment-button-checked)::part(native){border-color:var(--kirby-color-border-raised-quiet)}@media(hover:hover){:host.chip-mode ion-segment-button:not(.segment-button-checked):hover{--background: var(--kirby-color-fill-raised-hover)}:host.chip-mode ion-segment-button:not(.segment-button-checked):hover::part(native){border-color:var(--kirby-color-border-raised-quiet-hover)}}:host.chip-mode ion-segment-button:not(.segment-button-checked):active{--background: var(--kirby-color-fill-raised-active)}:host.chip-mode ion-segment-button:not(.segment-button-checked):active::part(native){border-color:var(--kirby-color-border-raised-quiet-active)}:host.compact ion-segment{--background: transparent}:host.compact ion-segment-button{--padding-start: var(--kirby-spacing-xs);--padding-end: var(--kirby-spacing-xs)}:host.compact ion-segment-button:not(.segment-button-checked){--background: var(--kirby-color-fill-base);--color: var(--kirby-color-content-base)}:host.compact ion-segment-button:not(.segment-button-checked)::part(native),:host.compact ion-segment-button:not(.segment-button-checked):hover::part(native),:host.compact ion-segment-button:not(.segment-button-checked):active::part(native){border-color:transparent}@media(hover:hover){:host.compact ion-segment-button:not(.segment-button-checked):hover{--background: var(--kirby-color-fill-base-hover);--color: var(--kirby-color-content-base-hover)}}:host.compact ion-segment-button:not(.segment-button-checked):active{--background: var(--kirby-color-fill-base-active);--color: var(--kirby-color-content-base-active)}ion-segment{border-radius:var(--kirby-border-radius-pill);grid-auto-columns:max-content;box-sizing:border-box}ion-segment-button:focus-within::part(native):focus-visible,ion-segment-button:focus-visible:focus-within::part(native){transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset)}ion-segment-button{position:relative}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%}ion-segment-button{--border-radius: var(--kirby-border-radius-pill);--border-style: none;--background: transparent;--background-hover-opacity: 0;--color: var(--kirby-color-content-raised);--color-hover: var(--color);--indicator-color: var(--kirby-color-fill-brand);--color-checked: var(--kirby-color-content-brand);--indicator-box-shadow: none;--indicator-transform: none;--padding-start: var(--kirby-spacing-m);--padding-end: var(--kirby-spacing-m);--margin-bottom: 0;--margin-end: 0;--margin-start: 0;--margin-top: 0;min-height:var(--kirby-spacing-xl);min-width:fit-content;font-weight:var(--kirby-font-weight-normal);font-size:min(var(--kirby-font-size-s),var(--kirby-spacing-s) * 1.45);text-transform:none;margin:0}@media(hover:hover){ion-segment-button:hover{--background: var(--kirby-color-fill-raised-hover);--color: var(--kirby-color-content-raised-hover);--indicator-color: var(--kirby-color-fill-brand-hover);--color-checked: var(--kirby-color-content-brand-hover)}}ion-segment-button:active{--background: var(--kirby-color-fill-raised-active);--color: var(--kirby-color-content-raised-active);--indicator-color: var(--kirby-color-fill-brand-active);--color-checked: var(--kirby-color-content-brand-active)}ion-segment-button::part(native){transition:all 80ms linear 0ms;box-sizing:border-box;border:var(--kirby-stroke-xs) solid transparent;border-radius:var(--border-radius);contain:none;overflow:visible;opacity:1}ion-segment-button::part(indicator){padding-inline:0}\n"]
|
|
241
241
|
}]
|
|
242
242
|
}],
|
|
243
243
|
ctorParameters: () => [{ type: i0.ChangeDetectorRef }],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"kirbydesign-designsystem-segmented-control.mjs","names":[],"sources":["../../segmented-control/src/segmented-control.component.ts","../../segmented-control/src/segmented-control.component.html"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ElementRef,\n EventEmitter,\n forwardRef,\n HostBinding,\n HostListener,\n Input,\n Output,\n ViewChild,\n} from '@angular/core';\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\nimport { BadgeComponent } from '@kirbydesign/designsystem/badge';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport { IonSegment, IonSegmentButton } from '@ionic/angular';\n\nimport { SegmentItem } from './segment-item';\n\nexport enum SegmentedControlMode {\n chip = 'chip',\n compactChip = 'compactChip',\n default = 'default',\n}\n\n@Component({\n imports: [IconComponent, BadgeComponent, IonSegment, IonSegmentButton],\n selector: 'kirby-segmented-control',\n templateUrl: './segmented-control.component.html',\n styleUrls: ['./segmented-control.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => SegmentedControlComponent),\n multi: true,\n },\n ],\n})\nexport class SegmentedControlComponent<\n TItem extends SegmentItem = SegmentItem,\n> implements ControlValueAccessor {\n @ViewChild(IonSegment, { static: true, read: ElementRef })\n private ionSegmentElement: ElementRef<HTMLIonSegmentElement>;\n\n /**\n * Ensure that the click actually did originate from within the segment-button.\n * We do not want to react to clicks on e.g. segment-btn-wrapper or badge.\n */\n preventOutsideClick(event: TouchEvent) {\n if (event.target instanceof HTMLElement) {\n const targetIsInSegmentBtn = !!event.target.closest('ion-segment-button');\n if (!targetIsInSegmentBtn) {\n event.stopImmediatePropagation();\n }\n }\n }\n\n @Input() mode: SegmentedControlMode | `${SegmentedControlMode}` = SegmentedControlMode.default;\n\n @HostBinding('class')\n get _modeCssClass() {\n return {\n [SegmentedControlMode.chip]: 'chip-mode',\n [SegmentedControlMode.default]: 'default-mode',\n [SegmentedControlMode.compactChip]: 'compact chip-mode',\n }[this.mode];\n }\n\n private _items: TItem[] = [];\n get items(): TItem[] {\n return this._items;\n }\n\n @Input() set items(value: TItem[]) {\n this._items = value || [];\n this._value = this.items[this.selectedIndex];\n this.ensureIonSegmentSelected();\n }\n\n protected isDisabled = false;\n\n /**\n * After upgrading to Ionic standalone components (Ionic v.7.6.6)\n * there is a lifecycle bug between Angular/Ionic/Stencil that prevents\n * the value of the segment component to be reflected in the checked state\n * of it's slotted segment buttons.\n * This has been patched here: https://github.com/ionic-team/ionic-framework/pull/28837\n * However the patch doesn't fix the problem if `items` are updated after first initialization\n * and the ion-segment-button(s) are re-rerendered.\n */\n private ensureIonSegmentSelected() {\n const ionSegment = this.ionSegmentElement.nativeElement;\n const ionSelectEvent = ionSegment['ionSelect'];\n if (this._value && typeof ionSelectEvent?.emit === 'function') {\n // Ensure changes has been reflected to the DOM:\n setTimeout(() => {\n const selectedSegmentButton = ionSegment.querySelector(\n 'ion-segment-button.segment-button-checked'\n );\n if (selectedSegmentButton) return; // Nothing to patch\n\n ionSelectEvent.emit({ value: this._value?.id });\n });\n }\n }\n\n private _selectedIndex: number = -1;\n get selectedIndex(): number {\n return this._selectedIndex;\n }\n\n @Input() set selectedIndex(index: number) {\n if (index !== this._selectedIndex) {\n this._selectedIndex = index;\n this._value = this.items[this.selectedIndex];\n this.selectedIndexChange.emit(this.selectedIndex);\n }\n }\n\n @Output() selectedIndexChange = new EventEmitter<number>();\n\n private _value: NoInfer<TItem>;\n get value(): NoInfer<TItem> {\n return this._value;\n }\n\n @Input() set value(value: NoInfer<TItem>) {\n this.selectedIndex = this.items.indexOf(value);\n }\n\n @HostBinding('class.sm')\n isSmallSize: boolean;\n\n @Input() set size(size: 'sm' | 'md') {\n this.isSmallSize = size === 'sm';\n }\n\n private _disableChangeOnSwipe: boolean = false;\n get disableChangeOnSwipe(): boolean {\n return this._disableChangeOnSwipe;\n }\n\n @Input() set disableChangeOnSwipe(value: boolean) {\n this._disableChangeOnSwipe = value;\n }\n\n @Output() segmentSelect = new EventEmitter<TItem>();\n\n onSegmentSelect(selectedId: string) {\n const selectedItemIndex = this.items.findIndex((item) => selectedId === item.id);\n\n if (selectedItemIndex !== this.selectedIndex) {\n this.selectedIndex = selectedItemIndex;\n this.segmentSelect.emit(this.value);\n this.onChange(this.value);\n this.onTouched();\n }\n }\n\n focusNativeButton(event: UIEvent) {\n (event.target as HTMLIonSegmentButtonElement)?.setFocus();\n }\n\n private _segmentElementHasFocus = false;\n\n getTabIndex(item: TItem, index: number) {\n // When focused prevent tab stop from inner native button to outer ion-segment-button:\n if (this._segmentElementHasFocus) return -1;\n // Allow tab stop on selected item:\n if (item.id === this.value?.id) return null;\n // Allow tab stop on first item if no value is set:\n if (!this.value && index === 0) return null;\n // Prevent tab stop on all other items:\n return -1;\n }\n\n constructor(private cdr: ChangeDetectorRef) {}\n\n @HostListener('focusin')\n @HostListener('focusout')\n _onFocusInOut() {\n // @HostListener(focusin|focusout) triggers Change Detection and updates attr.tabindex on each ion-segment-button\n this._segmentElementHasFocus = this.ionSegmentElement.nativeElement.matches(':focus-within');\n if (!this._segmentElementHasFocus) {\n this.onTouched();\n }\n }\n\n // Initialize default ControlValueAccessor callback functions (noop)\n // eslint-disable-next-line no-empty-function\n private onChange: (value: NoInfer<TItem>) => void = () => {};\n // eslint-disable-next-line no-empty-function\n private onTouched: () => void = () => {};\n /**\n * Sets the segmented control'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: NoInfer<TItem>): void {\n if (value !== this._value) {\n this.value = value;\n this.cdr.markForCheck();\n }\n }\n\n /**\n * Saves a callback function to be invoked when the segmented control'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: (value: NoInfer<TItem>) => void): void {\n this.onChange = fn;\n }\n\n /**\n * Saves a callback function to be invoked when the segmented control is blurred\n * by the user. Part of the ControlValueAccessor interface required\n * to integrate with Angular's core forms API.\n *\n * @param fn Callback to be triggered when the component has been touched.\n */\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n /**\n * Disables the segmented control. 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.isDisabled = isDisabled;\n this.cdr.markForCheck();\n }\n}\n","<ion-segment\n [value]=\"value?.id\"\n [scrollable]=\"disableChangeOnSwipe || mode !== 'default'\"\n (ionChange)=\"onSegmentSelect($event.detail.value)\"\n (click)=\"preventOutsideClick($event)\"\n [disabled]=\"isDisabled\"\n>\n @for (item of items; track item.id; let i = $index) {\n <ion-segment-button\n [value]=\"item.id\"\n [attr.aria-label]=\"item.ariaLabel\"\n [attr.tabindex]=\"getTabIndex(item, i)\"\n (click)=\"focusNativeButton($event)\"\n >\n {{ item.text }}\n @if (item.badge) {\n <kirby-badge\n role=\"text\"\n [attr.aria-label]=\"item.badge.description\"\n [themeColor]=\"item.badge.themeColor\"\n >\n @if (item.badge.icon) {\n <kirby-icon [name]=\"item.badge.icon\"></kirby-icon>\n } @else {\n {{ item.badge.content }}\n }\n </kirby-badge>\n }\n </ion-segment-button>\n }\n</ion-segment>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"kirbydesign-designsystem-segmented-control.mjs","names":[],"sources":["../../segmented-control/src/segmented-control.component.ts","../../segmented-control/src/segmented-control.component.html"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ElementRef,\n EventEmitter,\n forwardRef,\n HostBinding,\n HostListener,\n Input,\n Output,\n ViewChild,\n} from '@angular/core';\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\nimport { BadgeComponent } from '@kirbydesign/designsystem/badge';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport { IonSegment, IonSegmentButton } from '@ionic/angular';\n\nimport { SegmentItem } from './segment-item';\n\nexport enum SegmentedControlMode {\n chip = 'chip',\n compactChip = 'compactChip',\n default = 'default',\n}\n\n@Component({\n imports: [IconComponent, BadgeComponent, IonSegment, IonSegmentButton],\n selector: 'kirby-segmented-control',\n templateUrl: './segmented-control.component.html',\n styleUrls: ['./segmented-control.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => SegmentedControlComponent),\n multi: true,\n },\n ],\n})\nexport class SegmentedControlComponent<\n TItem extends SegmentItem = SegmentItem,\n> implements ControlValueAccessor {\n @ViewChild(IonSegment, { static: true, read: ElementRef })\n private ionSegmentElement: ElementRef<HTMLIonSegmentElement>;\n\n /**\n * Ensure that the click actually did originate from within the segment-button.\n * We do not want to react to clicks on e.g. segment-btn-wrapper or badge.\n */\n preventOutsideClick(event: TouchEvent) {\n if (event.target instanceof HTMLElement) {\n const targetIsInSegmentBtn = !!event.target.closest('ion-segment-button');\n if (!targetIsInSegmentBtn) {\n event.stopImmediatePropagation();\n }\n }\n }\n\n @Input() mode: SegmentedControlMode | `${SegmentedControlMode}` = SegmentedControlMode.default;\n\n @HostBinding('class')\n get _modeCssClass() {\n return {\n [SegmentedControlMode.chip]: 'chip-mode',\n [SegmentedControlMode.default]: 'default-mode',\n [SegmentedControlMode.compactChip]: 'compact chip-mode',\n }[this.mode];\n }\n\n private _items: TItem[] = [];\n get items(): TItem[] {\n return this._items;\n }\n\n @Input() set items(value: TItem[]) {\n this._items = value || [];\n this._value = this.items[this.selectedIndex];\n this.ensureIonSegmentSelected();\n }\n\n protected isDisabled = false;\n\n /**\n * After upgrading to Ionic standalone components (Ionic v.7.6.6)\n * there is a lifecycle bug between Angular/Ionic/Stencil that prevents\n * the value of the segment component to be reflected in the checked state\n * of it's slotted segment buttons.\n * This has been patched here: https://github.com/ionic-team/ionic-framework/pull/28837\n * However the patch doesn't fix the problem if `items` are updated after first initialization\n * and the ion-segment-button(s) are re-rerendered.\n */\n private ensureIonSegmentSelected() {\n const ionSegment = this.ionSegmentElement.nativeElement;\n const ionSelectEvent = ionSegment['ionSelect'];\n if (this._value && typeof ionSelectEvent?.emit === 'function') {\n // Ensure changes has been reflected to the DOM:\n setTimeout(() => {\n const selectedSegmentButton = ionSegment.querySelector(\n 'ion-segment-button.segment-button-checked'\n );\n if (selectedSegmentButton) return; // Nothing to patch\n\n ionSelectEvent.emit({ value: this._value?.id });\n });\n }\n }\n\n private _selectedIndex: number = -1;\n get selectedIndex(): number {\n return this._selectedIndex;\n }\n\n @Input() set selectedIndex(index: number) {\n if (index !== this._selectedIndex) {\n this._selectedIndex = index;\n this._value = this.items[this.selectedIndex];\n this.selectedIndexChange.emit(this.selectedIndex);\n }\n }\n\n @Output() selectedIndexChange = new EventEmitter<number>();\n\n private _value: NoInfer<TItem>;\n get value(): NoInfer<TItem> {\n return this._value;\n }\n\n @Input() set value(value: NoInfer<TItem>) {\n this.selectedIndex = this.items.indexOf(value);\n }\n\n @HostBinding('class.sm')\n isSmallSize: boolean;\n\n @Input() set size(size: 'sm' | 'md') {\n this.isSmallSize = size === 'sm';\n }\n\n private _disableChangeOnSwipe: boolean = false;\n get disableChangeOnSwipe(): boolean {\n return this._disableChangeOnSwipe;\n }\n\n @Input() set disableChangeOnSwipe(value: boolean) {\n this._disableChangeOnSwipe = value;\n }\n\n @Output() segmentSelect = new EventEmitter<TItem>();\n\n onSegmentSelect(selectedId: string) {\n const selectedItemIndex = this.items.findIndex((item) => selectedId === item.id);\n\n if (selectedItemIndex !== this.selectedIndex) {\n this.selectedIndex = selectedItemIndex;\n this.segmentSelect.emit(this.value);\n this.onChange(this.value);\n this.onTouched();\n }\n }\n\n focusNativeButton(event: UIEvent) {\n (event.target as HTMLIonSegmentButtonElement)?.setFocus();\n }\n\n private _segmentElementHasFocus = false;\n\n getTabIndex(item: TItem, index: number) {\n // When focused prevent tab stop from inner native button to outer ion-segment-button:\n if (this._segmentElementHasFocus) return -1;\n // Allow tab stop on selected item:\n if (item.id === this.value?.id) return null;\n // Allow tab stop on first item if no value is set:\n if (!this.value && index === 0) return null;\n // Prevent tab stop on all other items:\n return -1;\n }\n\n constructor(private cdr: ChangeDetectorRef) {}\n\n @HostListener('focusin')\n @HostListener('focusout')\n _onFocusInOut() {\n // @HostListener(focusin|focusout) triggers Change Detection and updates attr.tabindex on each ion-segment-button\n this._segmentElementHasFocus = this.ionSegmentElement.nativeElement.matches(':focus-within');\n if (!this._segmentElementHasFocus) {\n this.onTouched();\n }\n }\n\n // Initialize default ControlValueAccessor callback functions (noop)\n // eslint-disable-next-line no-empty-function\n private onChange: (value: NoInfer<TItem>) => void = () => {};\n // eslint-disable-next-line no-empty-function\n private onTouched: () => void = () => {};\n /**\n * Sets the segmented control'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: NoInfer<TItem>): void {\n if (value !== this._value) {\n this.value = value;\n this.cdr.markForCheck();\n }\n }\n\n /**\n * Saves a callback function to be invoked when the segmented control'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: (value: NoInfer<TItem>) => void): void {\n this.onChange = fn;\n }\n\n /**\n * Saves a callback function to be invoked when the segmented control is blurred\n * by the user. Part of the ControlValueAccessor interface required\n * to integrate with Angular's core forms API.\n *\n * @param fn Callback to be triggered when the component has been touched.\n */\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n /**\n * Disables the segmented control. 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.isDisabled = isDisabled;\n this.cdr.markForCheck();\n }\n}\n","<ion-segment\n [value]=\"value?.id\"\n [scrollable]=\"disableChangeOnSwipe || mode !== 'default'\"\n (ionChange)=\"onSegmentSelect($event.detail.value)\"\n (click)=\"preventOutsideClick($event)\"\n [disabled]=\"isDisabled\"\n>\n @for (item of items; track item.id; let i = $index) {\n <ion-segment-button\n [value]=\"item.id\"\n [attr.aria-label]=\"item.ariaLabel\"\n [attr.tabindex]=\"getTabIndex(item, i)\"\n (click)=\"focusNativeButton($event)\"\n >\n {{ item.text }}\n @if (item.badge) {\n <kirby-badge\n role=\"text\"\n [attr.aria-label]=\"item.badge.description\"\n [themeColor]=\"item.badge.themeColor\"\n >\n @if (item.badge.icon) {\n <kirby-icon [name]=\"item.badge.icon\"></kirby-icon>\n } @else {\n {{ item.badge.content }}\n }\n </kirby-badge>\n }\n </ion-segment-button>\n }\n</ion-segment>\n"],"mappings":"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"}
|
|
@@ -21,7 +21,7 @@ var SpinnerComponent = class SpinnerComponent {
|
|
|
21
21
|
selector: "kirby-spinner",
|
|
22
22
|
ngImport: i0,
|
|
23
23
|
template: "<div class=\"spinner\">\n <div class=\"inner-circle\"></div>\n <div class=\"outer-circle\"></div>\n</div>\n",
|
|
24
|
-
styles: [".spinner{overflow:hidden;width:var(--kirby-spacing-l);height:var(--kirby-spacing-l);position:relative;margin:0 auto}.inner-circle,.outer-circle{width:100%;height:100%;border-radius:var(--kirby-border-radius-circle);background-color:var(--kirby-color-fill-brand-loud);opacity
|
|
24
|
+
styles: [".spinner{overflow:hidden;width:var(--kirby-spacing-l);height:var(--kirby-spacing-l);position:relative;margin:0 auto}.inner-circle,.outer-circle{width:100%;height:100%;border-radius:var(--kirby-border-radius-circle);background-color:var(--kirby-color-fill-brand-loud);opacity:var(--kirby-opacity-60);position:absolute;top:0;left:0;animation:sk-bounce 2s infinite ease-in-out}.outer-circle{animation-delay:-1s}@keyframes sk-bounce{0%,to{transform:scale(0)}50%{transform:scale(1)}}\n"],
|
|
25
25
|
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
26
26
|
});
|
|
27
27
|
}
|
|
@@ -37,7 +37,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
37
37
|
selector: "kirby-spinner",
|
|
38
38
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
39
39
|
template: "<div class=\"spinner\">\n <div class=\"inner-circle\"></div>\n <div class=\"outer-circle\"></div>\n</div>\n",
|
|
40
|
-
styles: [".spinner{overflow:hidden;width:var(--kirby-spacing-l);height:var(--kirby-spacing-l);position:relative;margin:0 auto}.inner-circle,.outer-circle{width:100%;height:100%;border-radius:var(--kirby-border-radius-circle);background-color:var(--kirby-color-fill-brand-loud);opacity
|
|
40
|
+
styles: [".spinner{overflow:hidden;width:var(--kirby-spacing-l);height:var(--kirby-spacing-l);position:relative;margin:0 auto}.inner-circle,.outer-circle{width:100%;height:100%;border-radius:var(--kirby-border-radius-circle);background-color:var(--kirby-color-fill-brand-loud);opacity:var(--kirby-opacity-60);position:absolute;top:0;left:0;animation:sk-bounce 2s infinite ease-in-out}.outer-circle{animation-delay:-1s}@keyframes sk-bounce{0%,to{transform:scale(0)}50%{transform:scale(1)}}\n"]
|
|
41
41
|
}]
|
|
42
42
|
}]
|
|
43
43
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"kirbydesign-designsystem-spinner.mjs","names":[],"sources":["../../spinner/src/spinner.component.ts","../../spinner/src/spinner.component.html","../../spinner/src/spinner.module.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n selector: 'kirby-spinner',\n templateUrl: './spinner.component.html',\n styleUrls: ['./spinner.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SpinnerComponent {}\n","<div class=\"spinner\">\n <div class=\"inner-circle\"></div>\n <div class=\"outer-circle\"></div>\n</div>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { SpinnerComponent } from './spinner.component';\n\n@NgModule({\n imports: [CommonModule, SpinnerComponent],\n exports: [SpinnerComponent],\n providers: [],\n})\nexport class SpinnerModule {}\n"],"mappings":";;;AAQA,IAAa,mBAAb,MAAa,iBAAgB;CAAhB;EAAA,KAAA,OAAA,GAAA,mBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAAgB,MAAA,CAAA;GAAA,QAAA,GAAA,gBAAA;EAAA,CAAA;CAAA;CAAhB;EAAA,KAAA,OAAA,GAAA,qBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,MAAA;GAAgB,cAAA;GAAA,UAAA;GAAA,UAAA;GAAA,UCR7B;GAIA,QAAA,CAAA,
|
|
1
|
+
{"version":3,"file":"kirbydesign-designsystem-spinner.mjs","names":[],"sources":["../../spinner/src/spinner.component.ts","../../spinner/src/spinner.component.html","../../spinner/src/spinner.module.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n selector: 'kirby-spinner',\n templateUrl: './spinner.component.html',\n styleUrls: ['./spinner.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SpinnerComponent {}\n","<div class=\"spinner\">\n <div class=\"inner-circle\"></div>\n <div class=\"outer-circle\"></div>\n</div>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { SpinnerComponent } from './spinner.component';\n\n@NgModule({\n imports: [CommonModule, SpinnerComponent],\n exports: [SpinnerComponent],\n providers: [],\n})\nexport class SpinnerModule {}\n"],"mappings":";;;AAQA,IAAa,mBAAb,MAAa,iBAAgB;CAAhB;EAAA,KAAA,OAAA,GAAA,mBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAAgB,MAAA,CAAA;GAAA,QAAA,GAAA,gBAAA;EAAA,CAAA;CAAA;CAAhB;EAAA,KAAA,OAAA,GAAA,qBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,MAAA;GAAgB,cAAA;GAAA,UAAA;GAAA,UAAA;GAAA,UCR7B;GAIA,QAAA,CAAA,keAAA;GAAA,iBAAA,GAAA,wBAAA;EAAA,CAAA;CAAA;;ADIa,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAgB,YAAA,CAAA;EAN5B,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAe,iBAGR,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,keAAA;EAAA,CAAA;;;AEIjD,IAAa,gBAAb,MAAa,cAAa;CAAb;EAAA,KAAA,OAAA,GAAA,mBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAAa,MAAA,CAAA;GAAA,QAAA,GAAA,gBAAA;EAAA,CAAA;CAAA;CAAb;EAAA,KAAA,OAAA,GAAA,oBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAAa,SAAA,CAJd,cAAc,gBAAgB;GAAA,SAAA,CAC9B,gBAAgB;EAAA,CAAA;CAAA;CAGf;EAAA,KAAA,OAAA,GAAA,oBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAAa,SAAA,CAJd,YAAY;EAAA,CAAA;CAAA;;AAIX,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAa,YAAA,CAAA;EALzB,MAAA;EAAS,MAAA,CAAA;GACR,SAAS,CAAC,cAAc,gBAAgB;GACxC,SAAS,CAAC,gBAAgB;GAC1B,WAAW,CAAA;EACZ,CAAA"}
|
|
@@ -40,7 +40,7 @@ var TabNavigationItemComponent = class TabNavigationItemComponent {
|
|
|
40
40
|
host: { attributes: { "role": "presentation" } },
|
|
41
41
|
ngImport: i0,
|
|
42
42
|
template: "<button role=\"tab\" type=\"button\" #tabButton>\n <span attr.data-text=\"{{ label }}\" [class.truncate]=\"truncate\">{{ label }}</span>\n <ng-content></ng-content>\n</button>\n",
|
|
43
|
-
styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{position:relative;padding-bottom:
|
|
43
|
+
styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{position:relative;padding-bottom:calc(var(--kirby-stroke-xs) * 2)}:host button[role=tab]{background:transparent;color:inherit;font:inherit;cursor:pointer;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;-webkit-user-select:none;user-select:none;text-decoration:none;margin:0;padding:0;width:auto;border:none;outline:none;color:var(--kirby-color-content-base);box-sizing:border-box;padding:var(--kirby-spacing-s);font-size:min(var(--kirby-font-size-n),var(--kirby-spacing-s) * 1.45);line-height:var(--kirby-line-height-m);gap:var(--kirby-spacing-xxxs)}:host button[role=tab]:focus,:host button[role=tab]:hover{font-weight:var(--kirby-font-weight-bold)}:host button[role=tab]:focus-visible{outline:none;border-radius:var(--kirby-spacing-xxxs);transition:box-shadow 80ms linear;box-shadow:var(--kirby-focus-ring-sm-inset)}:host button[role=tab][aria-selected=true]{font-weight:var(--kirby-font-weight-bold)}:host button[role=tab][aria-selected=true]:before{content:\"\";width:100%;background-color:var(--kirby-color-border-base-loud);position:absolute;border-radius:1px;height:calc(var(--kirby-stroke-xs) * 2);bottom:0;z-index:2}span[data-text].truncate{max-width:100px;overflow:hidden;text-overflow:ellipsis}span[data-text]:before{display:block;content:attr(data-text);font-weight:var(--kirby-font-weight-bold);height:0;overflow:hidden;visibility:hidden}\n"],
|
|
44
44
|
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
45
45
|
});
|
|
46
46
|
}
|
|
@@ -57,7 +57,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
57
57
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
58
58
|
host: { role: "presentation" },
|
|
59
59
|
template: "<button role=\"tab\" type=\"button\" #tabButton>\n <span attr.data-text=\"{{ label }}\" [class.truncate]=\"truncate\">{{ label }}</span>\n <ng-content></ng-content>\n</button>\n",
|
|
60
|
-
styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{position:relative;padding-bottom:
|
|
60
|
+
styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{position:relative;padding-bottom:calc(var(--kirby-stroke-xs) * 2)}:host button[role=tab]{background:transparent;color:inherit;font:inherit;cursor:pointer;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;-webkit-user-select:none;user-select:none;text-decoration:none;margin:0;padding:0;width:auto;border:none;outline:none;color:var(--kirby-color-content-base);box-sizing:border-box;padding:var(--kirby-spacing-s);font-size:min(var(--kirby-font-size-n),var(--kirby-spacing-s) * 1.45);line-height:var(--kirby-line-height-m);gap:var(--kirby-spacing-xxxs)}:host button[role=tab]:focus,:host button[role=tab]:hover{font-weight:var(--kirby-font-weight-bold)}:host button[role=tab]:focus-visible{outline:none;border-radius:var(--kirby-spacing-xxxs);transition:box-shadow 80ms linear;box-shadow:var(--kirby-focus-ring-sm-inset)}:host button[role=tab][aria-selected=true]{font-weight:var(--kirby-font-weight-bold)}:host button[role=tab][aria-selected=true]:before{content:\"\";width:100%;background-color:var(--kirby-color-border-base-loud);position:absolute;border-radius:1px;height:calc(var(--kirby-stroke-xs) * 2);bottom:0;z-index:2}span[data-text].truncate{max-width:100px;overflow:hidden;text-overflow:ellipsis}span[data-text]:before{display:block;content:attr(data-text);font-weight:var(--kirby-font-weight-bold);height:0;overflow:hidden;visibility:hidden}\n"]
|
|
61
61
|
}]
|
|
62
62
|
}],
|
|
63
63
|
ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"kirbydesign-designsystem-tab-navigation.mjs","names":[],"sources":["../../tab-navigation/src/tab-navigation-item/tab-navigation-item.component.ts","../../tab-navigation/src/tab-navigation-item/tab-navigation-item.component.html","../../tab-navigation/src/tab-navigation/tab-navigation.component.ts","../../tab-navigation/src/tab-navigation/tab-navigation.component.html","../../tab-navigation/src/tab-navigation.module.ts"],"sourcesContent":["import {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n Input,\n Renderer2,\n} from '@angular/core';\nimport { forwardAttributes } from '@kirbydesign/designsystem/shared';\n\n@Component({\n selector: 'kirby-tab-navigation-item',\n templateUrl: './tab-navigation-item.component.html',\n styleUrls: ['./tab-navigation-item.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: { role: 'presentation' },\n})\nexport class TabNavigationItemComponent implements AfterViewInit {\n private _attributesToForward: string[] = ['aria-controls', 'id'];\n\n @Input()\n label = '';\n\n @Input()\n truncate = true;\n\n constructor(\n private elementRef: ElementRef<HTMLElement>,\n private renderer: Renderer2\n ) {}\n\n ngAfterViewInit(): void {\n const tabElement: HTMLElement = this.elementRef.nativeElement.querySelector('[role=\"tab\"]');\n forwardAttributes(\n this.elementRef.nativeElement,\n this._attributesToForward,\n this.renderer,\n tabElement\n );\n }\n}\n","<button role=\"tab\" type=\"button\" #tabButton>\n <span attr.data-text=\"{{ label }}\" [class.truncate]=\"truncate\">{{ label }}</span>\n <ng-content></ng-content>\n</button>\n","import {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n ContentChildren,\n ElementRef,\n EventEmitter,\n HostListener,\n Input,\n Output,\n QueryList,\n Renderer2,\n ViewChild,\n} from '@angular/core';\nimport { WindowRef } from '@kirbydesign/designsystem/types';\nimport { KeyboardHandlerService } from '@kirbydesign/designsystem/dropdown';\nimport { forwardAttributes } from '@kirbydesign/designsystem/shared';\nimport { TabNavigationItemComponent } from '../tab-navigation-item/tab-navigation-item.component';\n\n@Component({\n selector: 'kirby-tab-navigation',\n templateUrl: './tab-navigation.component.html',\n styleUrls: ['./tab-navigation.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TabNavigationComponent implements AfterViewInit {\n public readonly DEBOUNCE_TIME_MS = 250;\n\n @ViewChild('tabBar')\n private tabBar: ElementRef<HTMLElement>;\n\n @ContentChildren(TabNavigationItemComponent, { read: ElementRef })\n private tabs: QueryList<ElementRef<HTMLElement>>;\n\n private tabBarElement: HTMLElement;\n private tabElements = new Array<HTMLElement>();\n private tabButtonElements = new Array<HTMLElement>();\n\n private _attributesToForward: string[] = ['aria-label', 'aria-labelledby'];\n\n @Input()\n get selectedIndex(): number {\n return this._selectedIndex;\n }\n\n set selectedIndex(index: number) {\n if (index !== this._selectedIndex && index !== -1) {\n this._selectedIndex = index;\n\n if (!this.containsFocus()) {\n this.focusIndex = index;\n }\n\n this.selectTab(this.selectedIndex);\n this.scrollToTab(this.selectedIndex);\n this.selectedIndexChange.emit(this.selectedIndex);\n }\n }\n private _selectedIndex = -1;\n\n get focusIndex(): number {\n return this._focusIndex;\n }\n\n set focusIndex(index: number) {\n if (index !== this._focusIndex) {\n this._focusIndex = index;\n\n this.updateRovingTabindex();\n }\n }\n private _focusIndex = -1;\n\n @Output()\n selectedIndexChange = new EventEmitter<number>();\n\n constructor(\n private window: WindowRef,\n private keyboardHandlerService: KeyboardHandlerService,\n private renderer: Renderer2,\n private elementRef: ElementRef<HTMLElement>\n ) {}\n\n ngAfterViewInit(): void {\n this.tabBarElement = this.tabBar.nativeElement;\n this.setTabElements();\n this.updateTabElementsOnChanges();\n\n forwardAttributes(\n this.elementRef.nativeElement,\n this._attributesToForward,\n this.renderer,\n this.tabBarElement\n );\n }\n\n @HostListener('click', ['$event'])\n onItemSelect(event: MouseEvent) {\n this.selectedIndex = this.indexOfTabNavButton(event.target);\n }\n\n @HostListener('keydown.home', ['$event'])\n @HostListener('keydown.end', ['$event'])\n @HostListener('keydown.arrowright', ['$event'])\n @HostListener('keydown.arrowleft', ['$event'])\n onKeydown(event: KeyboardEvent) {\n event.preventDefault();\n this.focusIndex = this.keyboardHandlerService.handle(\n event,\n this.focusIndex,\n this.tabElements.length - 1,\n true\n );\n this.scrollToTab(this.focusIndex);\n this.focusTab(this.focusIndex);\n }\n\n @HostListener('focusin', ['$event'])\n onFocusIn(event: FocusEvent) {\n const focusedIndex = this.indexOfTabNavButton(event.target);\n if (focusedIndex !== -1) {\n this.focusIndex = focusedIndex;\n }\n }\n\n @HostListener('focusout', ['$event'])\n onFocusOut(event: FocusEvent) {\n const focusLeftTabNavigation = !this.elementRef.nativeElement.contains(\n event.relatedTarget as Node\n );\n if (focusLeftTabNavigation) {\n this.focusIndex = this.selectedIndex;\n }\n }\n\n private selectTab(tabIndex: number): void {\n this.tabButtonElements.forEach((tabButtonElement, index) => {\n tabButtonElement.setAttribute('aria-selected', index === tabIndex ? 'true' : 'false');\n });\n }\n\n private updateRovingTabindex(): void {\n const tabStopIndex = this.isValidTabIndex(this.focusIndex) ? this.focusIndex : 0;\n\n this.tabButtonElements.forEach((tabButtonElement, index) => {\n tabButtonElement.setAttribute('tabindex', index === tabStopIndex ? '0' : '-1');\n });\n }\n\n private focusTab(tabIndex: number): void {\n if (this.isValidTabIndex(tabIndex)) {\n this.tabButtonElements[tabIndex].focus();\n }\n }\n\n private indexOfTabNavButton(target: EventTarget): number {\n return this.tabButtonElements.indexOf((target as Element).closest<HTMLElement>('[role=\"tab\"]'));\n }\n\n private isValidTabIndex(tabIndex: number): boolean {\n return 0 <= tabIndex && tabIndex < this.tabButtonElements.length;\n }\n\n private containsFocus(): boolean {\n return this.elementRef.nativeElement.contains(document.activeElement);\n }\n\n private scrollToTab(tabIndex: number): void {\n if (this.isValidTabIndex(tabIndex)) {\n const selectedTabElement = this.tabElements[tabIndex];\n const selectedTabElementWidth = selectedTabElement.getBoundingClientRect().width;\n const selectedTabElementOffsetLeft = selectedTabElement.offsetLeft;\n const tabBarElementWidth = this.tabBarElement.getBoundingClientRect().width;\n\n this.window.nativeWindow.requestAnimationFrame(() => {\n this.tabBarElement?.scrollTo({\n behavior: 'smooth',\n left: Math.max(\n 0,\n selectedTabElementOffsetLeft - (tabBarElementWidth - selectedTabElementWidth) / 2\n ),\n });\n });\n }\n }\n\n private setTabElements() {\n this.tabs.forEach((tab) => {\n this.tabElements.push(tab.nativeElement);\n });\n\n this.tabElements.forEach((tabElement) =>\n this.tabButtonElements.push(tabElement.querySelector('[role=\"tab\"]'))\n );\n\n this.selectTab(this.selectedIndex);\n this.updateRovingTabindex();\n\n setTimeout(() => {\n this.scrollToTab(this.focusIndex);\n }, this.DEBOUNCE_TIME_MS);\n }\n\n private updateTabElementsOnChanges() {\n this.tabs.changes.subscribe(() => {\n this.tabElements = [];\n this.tabButtonElements = [];\n this.setTabElements();\n });\n }\n}\n","<div role=\"tablist\" #tabBar>\n <ng-content></ng-content>\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { TabNavigationComponent } from './tab-navigation/tab-navigation.component';\nimport { TabNavigationItemComponent } from './tab-navigation-item/tab-navigation-item.component';\n\n@NgModule({\n imports: [CommonModule, TabNavigationComponent, TabNavigationItemComponent],\n exports: [TabNavigationComponent, TabNavigationItemComponent],\n})\nexport class TabNavigationModule {}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"kirbydesign-designsystem-tab-navigation.mjs","names":[],"sources":["../../tab-navigation/src/tab-navigation-item/tab-navigation-item.component.ts","../../tab-navigation/src/tab-navigation-item/tab-navigation-item.component.html","../../tab-navigation/src/tab-navigation/tab-navigation.component.ts","../../tab-navigation/src/tab-navigation/tab-navigation.component.html","../../tab-navigation/src/tab-navigation.module.ts"],"sourcesContent":["import {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n Input,\n Renderer2,\n} from '@angular/core';\nimport { forwardAttributes } from '@kirbydesign/designsystem/shared';\n\n@Component({\n selector: 'kirby-tab-navigation-item',\n templateUrl: './tab-navigation-item.component.html',\n styleUrls: ['./tab-navigation-item.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: { role: 'presentation' },\n})\nexport class TabNavigationItemComponent implements AfterViewInit {\n private _attributesToForward: string[] = ['aria-controls', 'id'];\n\n @Input()\n label = '';\n\n @Input()\n truncate = true;\n\n constructor(\n private elementRef: ElementRef<HTMLElement>,\n private renderer: Renderer2\n ) {}\n\n ngAfterViewInit(): void {\n const tabElement: HTMLElement = this.elementRef.nativeElement.querySelector('[role=\"tab\"]');\n forwardAttributes(\n this.elementRef.nativeElement,\n this._attributesToForward,\n this.renderer,\n tabElement\n );\n }\n}\n","<button role=\"tab\" type=\"button\" #tabButton>\n <span attr.data-text=\"{{ label }}\" [class.truncate]=\"truncate\">{{ label }}</span>\n <ng-content></ng-content>\n</button>\n","import {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n ContentChildren,\n ElementRef,\n EventEmitter,\n HostListener,\n Input,\n Output,\n QueryList,\n Renderer2,\n ViewChild,\n} from '@angular/core';\nimport { WindowRef } from '@kirbydesign/designsystem/types';\nimport { KeyboardHandlerService } from '@kirbydesign/designsystem/dropdown';\nimport { forwardAttributes } from '@kirbydesign/designsystem/shared';\nimport { TabNavigationItemComponent } from '../tab-navigation-item/tab-navigation-item.component';\n\n@Component({\n selector: 'kirby-tab-navigation',\n templateUrl: './tab-navigation.component.html',\n styleUrls: ['./tab-navigation.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TabNavigationComponent implements AfterViewInit {\n public readonly DEBOUNCE_TIME_MS = 250;\n\n @ViewChild('tabBar')\n private tabBar: ElementRef<HTMLElement>;\n\n @ContentChildren(TabNavigationItemComponent, { read: ElementRef })\n private tabs: QueryList<ElementRef<HTMLElement>>;\n\n private tabBarElement: HTMLElement;\n private tabElements = new Array<HTMLElement>();\n private tabButtonElements = new Array<HTMLElement>();\n\n private _attributesToForward: string[] = ['aria-label', 'aria-labelledby'];\n\n @Input()\n get selectedIndex(): number {\n return this._selectedIndex;\n }\n\n set selectedIndex(index: number) {\n if (index !== this._selectedIndex && index !== -1) {\n this._selectedIndex = index;\n\n if (!this.containsFocus()) {\n this.focusIndex = index;\n }\n\n this.selectTab(this.selectedIndex);\n this.scrollToTab(this.selectedIndex);\n this.selectedIndexChange.emit(this.selectedIndex);\n }\n }\n private _selectedIndex = -1;\n\n get focusIndex(): number {\n return this._focusIndex;\n }\n\n set focusIndex(index: number) {\n if (index !== this._focusIndex) {\n this._focusIndex = index;\n\n this.updateRovingTabindex();\n }\n }\n private _focusIndex = -1;\n\n @Output()\n selectedIndexChange = new EventEmitter<number>();\n\n constructor(\n private window: WindowRef,\n private keyboardHandlerService: KeyboardHandlerService,\n private renderer: Renderer2,\n private elementRef: ElementRef<HTMLElement>\n ) {}\n\n ngAfterViewInit(): void {\n this.tabBarElement = this.tabBar.nativeElement;\n this.setTabElements();\n this.updateTabElementsOnChanges();\n\n forwardAttributes(\n this.elementRef.nativeElement,\n this._attributesToForward,\n this.renderer,\n this.tabBarElement\n );\n }\n\n @HostListener('click', ['$event'])\n onItemSelect(event: MouseEvent) {\n this.selectedIndex = this.indexOfTabNavButton(event.target);\n }\n\n @HostListener('keydown.home', ['$event'])\n @HostListener('keydown.end', ['$event'])\n @HostListener('keydown.arrowright', ['$event'])\n @HostListener('keydown.arrowleft', ['$event'])\n onKeydown(event: KeyboardEvent) {\n event.preventDefault();\n this.focusIndex = this.keyboardHandlerService.handle(\n event,\n this.focusIndex,\n this.tabElements.length - 1,\n true\n );\n this.scrollToTab(this.focusIndex);\n this.focusTab(this.focusIndex);\n }\n\n @HostListener('focusin', ['$event'])\n onFocusIn(event: FocusEvent) {\n const focusedIndex = this.indexOfTabNavButton(event.target);\n if (focusedIndex !== -1) {\n this.focusIndex = focusedIndex;\n }\n }\n\n @HostListener('focusout', ['$event'])\n onFocusOut(event: FocusEvent) {\n const focusLeftTabNavigation = !this.elementRef.nativeElement.contains(\n event.relatedTarget as Node\n );\n if (focusLeftTabNavigation) {\n this.focusIndex = this.selectedIndex;\n }\n }\n\n private selectTab(tabIndex: number): void {\n this.tabButtonElements.forEach((tabButtonElement, index) => {\n tabButtonElement.setAttribute('aria-selected', index === tabIndex ? 'true' : 'false');\n });\n }\n\n private updateRovingTabindex(): void {\n const tabStopIndex = this.isValidTabIndex(this.focusIndex) ? this.focusIndex : 0;\n\n this.tabButtonElements.forEach((tabButtonElement, index) => {\n tabButtonElement.setAttribute('tabindex', index === tabStopIndex ? '0' : '-1');\n });\n }\n\n private focusTab(tabIndex: number): void {\n if (this.isValidTabIndex(tabIndex)) {\n this.tabButtonElements[tabIndex].focus();\n }\n }\n\n private indexOfTabNavButton(target: EventTarget): number {\n return this.tabButtonElements.indexOf((target as Element).closest<HTMLElement>('[role=\"tab\"]'));\n }\n\n private isValidTabIndex(tabIndex: number): boolean {\n return 0 <= tabIndex && tabIndex < this.tabButtonElements.length;\n }\n\n private containsFocus(): boolean {\n return this.elementRef.nativeElement.contains(document.activeElement);\n }\n\n private scrollToTab(tabIndex: number): void {\n if (this.isValidTabIndex(tabIndex)) {\n const selectedTabElement = this.tabElements[tabIndex];\n const selectedTabElementWidth = selectedTabElement.getBoundingClientRect().width;\n const selectedTabElementOffsetLeft = selectedTabElement.offsetLeft;\n const tabBarElementWidth = this.tabBarElement.getBoundingClientRect().width;\n\n this.window.nativeWindow.requestAnimationFrame(() => {\n this.tabBarElement?.scrollTo({\n behavior: 'smooth',\n left: Math.max(\n 0,\n selectedTabElementOffsetLeft - (tabBarElementWidth - selectedTabElementWidth) / 2\n ),\n });\n });\n }\n }\n\n private setTabElements() {\n this.tabs.forEach((tab) => {\n this.tabElements.push(tab.nativeElement);\n });\n\n this.tabElements.forEach((tabElement) =>\n this.tabButtonElements.push(tabElement.querySelector('[role=\"tab\"]'))\n );\n\n this.selectTab(this.selectedIndex);\n this.updateRovingTabindex();\n\n setTimeout(() => {\n this.scrollToTab(this.focusIndex);\n }, this.DEBOUNCE_TIME_MS);\n }\n\n private updateTabElementsOnChanges() {\n this.tabs.changes.subscribe(() => {\n this.tabElements = [];\n this.tabButtonElements = [];\n this.setTabElements();\n });\n }\n}\n","<div role=\"tablist\" #tabBar>\n <ng-content></ng-content>\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { TabNavigationComponent } from './tab-navigation/tab-navigation.component';\nimport { TabNavigationItemComponent } from './tab-navigation-item/tab-navigation-item.component';\n\n@NgModule({\n imports: [CommonModule, TabNavigationComponent, TabNavigationItemComponent],\n exports: [TabNavigationComponent, TabNavigationItemComponent],\n})\nexport class TabNavigationModule {}\n"],"mappings":"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"}
|
|
@@ -167,7 +167,7 @@ var TabButtonComponent = class TabButtonComponent {
|
|
|
167
167
|
}],
|
|
168
168
|
ngImport: i0,
|
|
169
169
|
template: "<ion-tab-button\n #ionTabButton\n [tab]=\"tab\"\n (click)=\"onClick($event, ionTabButton.selected)\"\n tabindex=\"0\"\n>\n @if (icons.length === 1 || !ionTabButton.selected) {\n <ng-content select=\"kirby-icon:not([selected-tab])\"></ng-content>\n }\n @if (ionTabButton.selected) {\n <ng-content select=\"kirby-icon[selected-tab]\"></ng-content>\n }\n <ng-content></ng-content>\n <ng-content select=\"kirby-badge\"></ng-content>\n</ion-tab-button>\n",
|
|
170
|
-
styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:contents}ion-tab-button.ion-focused:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset);--background-focused-opacity: 0}@media(hover:hover){ion-tab-button:hover{--background: var(--kirby-color-fill-raised-hover)}}ion-tab-button:active{--background: var(--kirby-color-fill-raised-active)}ion-tab-button{transition:background-color 80ms linear 0ms;height:100%;flex:1 1 0%;max-width:168px;font-weight:var(--kirby-font-weight-medium);font-size:min(var(--kirby-font-size-xs),var(--kirby-spacing-xs) * 1.45);--color: var(--kirby-color-content-raised-quiet);--color-selected: var(--kirby-color-content-raised);--padding-start: 0;--padding-end: 0;--kirby-icon-font-size: var(--kirby-spacing-m);--kirby-badge-position: absolute;--kirby-badge-top: .55em;--kirby-badge-left: calc(50% + .4em) ;--kirby-badge-font-size: 10px}ion-tab-button ::ng-deep>kirby-badge.md{--kirby-badge-top: .3em;--kirby-badge-left: calc(50% + .2em) }@media(min-width:768px){ion-tab-button{flex:none;flex-direction:row;font-size:min(var(--kirby-font-size-s),var(--kirby-spacing-xs) * 1.45);--padding-start: var(--kirby-spacing-m);--padding-end: var(--kirby-spacing-m);--kirby-badge-position: absolute;--kirby-badge-top: calc(50% - 1.35em) ;--kirby-badge-left: 1.6em}ion-tab-button ::ng-deep>kirby-badge.md,ion-tab-button ::ng-deep>kirby-badge[size=md]{--kirby-badge-position: relative;--kirby-badge-top: 0;--kirby-badge-left: 0;margin-left:.4em;margin-bottom:calc(var(--kirby-spacing-xxxxs) / 2)}ion-tab-button ::ng-deep>kirby-icon{--kirby-icon-margin-right: var(--kirby-spacing-xxs)}}@media(min-width:992px){ion-tab-button{font-size:var(--kirby-font-size-s);line-height:var(--kirby-line-height-s);--kirby-badge-font-size: initial;--padding-start: var(--kirby-spacing-xs);--padding-end: var(--kirby-spacing-xs)}}\n"],
|
|
170
|
+
styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:contents}ion-tab-button.ion-focused:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset);--background-focused-opacity: 0}@media(hover:hover){ion-tab-button:hover{--background: var(--kirby-color-fill-raised-hover);--color: var(--kirby-color-content-raised-quiet-hover)}}ion-tab-button:active{--background: var(--kirby-color-fill-raised-active);--color: var(--kirby-color-content-raised-quiet-active)}ion-tab-button{transition:background-color 80ms linear 0ms;height:100%;flex:1 1 0%;max-width:168px;font-weight:var(--kirby-font-weight-medium);font-size:min(var(--kirby-font-size-xs),var(--kirby-spacing-xs) * 1.45);--color: var(--kirby-color-content-raised-quiet);--color-selected: var(--kirby-color-content-raised);--padding-start: 0;--padding-end: 0;--kirby-icon-font-size: var(--kirby-spacing-m);--kirby-badge-position: absolute;--kirby-badge-top: .55em;--kirby-badge-left: calc(50% + .4em) ;--kirby-badge-font-size: 10px}ion-tab-button ::ng-deep>kirby-badge.md{--kirby-badge-top: .3em;--kirby-badge-left: calc(50% + .2em) }@media(min-width:768px){ion-tab-button{flex:none;flex-direction:row;font-size:min(var(--kirby-font-size-s),var(--kirby-spacing-xs) * 1.45);--padding-start: var(--kirby-spacing-m);--padding-end: var(--kirby-spacing-m);--kirby-badge-position: absolute;--kirby-badge-top: calc(50% - 1.35em) ;--kirby-badge-left: 1.6em}ion-tab-button ::ng-deep>kirby-badge.md,ion-tab-button ::ng-deep>kirby-badge[size=md]{--kirby-badge-position: relative;--kirby-badge-top: 0;--kirby-badge-left: 0;margin-left:.4em;margin-bottom:calc(var(--kirby-spacing-xxxxs) / 2)}ion-tab-button ::ng-deep>kirby-icon{--kirby-icon-margin-right: var(--kirby-spacing-xxs)}}@media(min-width:992px){ion-tab-button{font-size:var(--kirby-font-size-s);line-height:var(--kirby-line-height-s);--kirby-badge-font-size: initial;--padding-start: var(--kirby-spacing-xs);--padding-end: var(--kirby-spacing-xs)}}\n"],
|
|
171
171
|
dependencies: [{
|
|
172
172
|
kind: "component",
|
|
173
173
|
type: IonTabButton,
|
|
@@ -200,7 +200,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
200
200
|
imports: [IonTabButton],
|
|
201
201
|
changeDetection: ChangeDetectionStrategy.Eager,
|
|
202
202
|
template: "<ion-tab-button\n #ionTabButton\n [tab]=\"tab\"\n (click)=\"onClick($event, ionTabButton.selected)\"\n tabindex=\"0\"\n>\n @if (icons.length === 1 || !ionTabButton.selected) {\n <ng-content select=\"kirby-icon:not([selected-tab])\"></ng-content>\n }\n @if (ionTabButton.selected) {\n <ng-content select=\"kirby-icon[selected-tab]\"></ng-content>\n }\n <ng-content></ng-content>\n <ng-content select=\"kirby-badge\"></ng-content>\n</ion-tab-button>\n",
|
|
203
|
-
styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:contents}ion-tab-button.ion-focused:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset);--background-focused-opacity: 0}@media(hover:hover){ion-tab-button:hover{--background: var(--kirby-color-fill-raised-hover)}}ion-tab-button:active{--background: var(--kirby-color-fill-raised-active)}ion-tab-button{transition:background-color 80ms linear 0ms;height:100%;flex:1 1 0%;max-width:168px;font-weight:var(--kirby-font-weight-medium);font-size:min(var(--kirby-font-size-xs),var(--kirby-spacing-xs) * 1.45);--color: var(--kirby-color-content-raised-quiet);--color-selected: var(--kirby-color-content-raised);--padding-start: 0;--padding-end: 0;--kirby-icon-font-size: var(--kirby-spacing-m);--kirby-badge-position: absolute;--kirby-badge-top: .55em;--kirby-badge-left: calc(50% + .4em) ;--kirby-badge-font-size: 10px}ion-tab-button ::ng-deep>kirby-badge.md{--kirby-badge-top: .3em;--kirby-badge-left: calc(50% + .2em) }@media(min-width:768px){ion-tab-button{flex:none;flex-direction:row;font-size:min(var(--kirby-font-size-s),var(--kirby-spacing-xs) * 1.45);--padding-start: var(--kirby-spacing-m);--padding-end: var(--kirby-spacing-m);--kirby-badge-position: absolute;--kirby-badge-top: calc(50% - 1.35em) ;--kirby-badge-left: 1.6em}ion-tab-button ::ng-deep>kirby-badge.md,ion-tab-button ::ng-deep>kirby-badge[size=md]{--kirby-badge-position: relative;--kirby-badge-top: 0;--kirby-badge-left: 0;margin-left:.4em;margin-bottom:calc(var(--kirby-spacing-xxxxs) / 2)}ion-tab-button ::ng-deep>kirby-icon{--kirby-icon-margin-right: var(--kirby-spacing-xxs)}}@media(min-width:992px){ion-tab-button{font-size:var(--kirby-font-size-s);line-height:var(--kirby-line-height-s);--kirby-badge-font-size: initial;--padding-start: var(--kirby-spacing-xs);--padding-end: var(--kirby-spacing-xs)}}\n"]
|
|
203
|
+
styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:contents}ion-tab-button.ion-focused:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset);--background-focused-opacity: 0}@media(hover:hover){ion-tab-button:hover{--background: var(--kirby-color-fill-raised-hover);--color: var(--kirby-color-content-raised-quiet-hover)}}ion-tab-button:active{--background: var(--kirby-color-fill-raised-active);--color: var(--kirby-color-content-raised-quiet-active)}ion-tab-button{transition:background-color 80ms linear 0ms;height:100%;flex:1 1 0%;max-width:168px;font-weight:var(--kirby-font-weight-medium);font-size:min(var(--kirby-font-size-xs),var(--kirby-spacing-xs) * 1.45);--color: var(--kirby-color-content-raised-quiet);--color-selected: var(--kirby-color-content-raised);--padding-start: 0;--padding-end: 0;--kirby-icon-font-size: var(--kirby-spacing-m);--kirby-badge-position: absolute;--kirby-badge-top: .55em;--kirby-badge-left: calc(50% + .4em) ;--kirby-badge-font-size: 10px}ion-tab-button ::ng-deep>kirby-badge.md{--kirby-badge-top: .3em;--kirby-badge-left: calc(50% + .2em) }@media(min-width:768px){ion-tab-button{flex:none;flex-direction:row;font-size:min(var(--kirby-font-size-s),var(--kirby-spacing-xs) * 1.45);--padding-start: var(--kirby-spacing-m);--padding-end: var(--kirby-spacing-m);--kirby-badge-position: absolute;--kirby-badge-top: calc(50% - 1.35em) ;--kirby-badge-left: 1.6em}ion-tab-button ::ng-deep>kirby-badge.md,ion-tab-button ::ng-deep>kirby-badge[size=md]{--kirby-badge-position: relative;--kirby-badge-top: 0;--kirby-badge-left: 0;margin-left:.4em;margin-bottom:calc(var(--kirby-spacing-xxxxs) / 2)}ion-tab-button ::ng-deep>kirby-icon{--kirby-icon-margin-right: var(--kirby-spacing-xxs)}}@media(min-width:992px){ion-tab-button{font-size:var(--kirby-font-size-s);line-height:var(--kirby-line-height-s);--kirby-badge-font-size: initial;--padding-start: var(--kirby-spacing-xs);--padding-end: var(--kirby-spacing-xs)}}\n"]
|
|
204
204
|
}]
|
|
205
205
|
}],
|
|
206
206
|
propDecorators: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"kirbydesign-designsystem-tabs.mjs","names":[],"sources":["../../tabs/src/tabs.service.ts","../../tabs/src/tabs.component.ts","../../tabs/src/tabs.component.html","../../tabs/src/tab-button/tab-button.events.ts","../../tabs/src/tab-button/tab-button.component.ts","../../tabs/src/tab-button/tab-button.component.html","../../tabs/src/tabs.module.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { IonRouterOutlet } from '@ionic/angular';\nimport { ReplaySubject } from 'rxjs';\n\n@Injectable({\n providedIn: 'root',\n})\nexport class TabsService {\n private outletSubject$: ReplaySubject<IonRouterOutlet> = new ReplaySubject(1);\n public outlet$ = this.outletSubject$.asObservable();\n\n public setOutlet(outlet: IonRouterOutlet) {\n this.outletSubject$.next(outlet);\n }\n\n public resetOutlet() {\n this.outletSubject$.next(null);\n }\n}\n\nexport { IonRouterOutlet };\n","import {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n HostBinding,\n OnDestroy,\n ViewChild,\n} from '@angular/core';\nimport { IonTabBar, IonTabs } from '@ionic/angular';\n\nimport { TabsService } from './tabs.service';\n\n@Component({\n selector: 'kirby-tab-bar',\n templateUrl: './tabs.component.html',\n styleUrls: ['./tabs.component.scss'],\n imports: [IonTabs, IonTabBar],\n changeDetection: ChangeDetectionStrategy.Eager,\n})\nexport class TabsComponent implements AfterViewInit, OnDestroy {\n @HostBinding('class.tab-bar-bottom-hidden')\n tabBarBottomHidden = false;\n @ViewChild(IonTabs, { static: true }) tabs: IonTabs;\n\n constructor(private tabsService: TabsService) {}\n\n ngAfterViewInit() {\n this.tabsService.setOutlet(this.tabs.outlet);\n }\n\n ngOnDestroy() {\n this.tabsService.resetOutlet();\n }\n}\n","<ion-tabs>\n <ion-tab-bar class=\"kirby-surface-raised\" [class.bottom-hidden]=\"tabBarBottomHidden\">\n <ng-content></ng-content>\n </ion-tab-bar>\n</ion-tabs>\n","export const selectedTabClickEvent = 'kirbySelectedTabClick';\n","import {\n ChangeDetectionStrategy,\n Component,\n ContentChildren,\n EventEmitter,\n Input,\n Output,\n QueryList,\n} from '@angular/core';\n\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\nimport { IonTabButton } from '@ionic/angular';\nimport { selectedTabClickEvent } from './tab-button.events';\n\n@Component({\n selector: 'kirby-tab-button',\n templateUrl: './tab-button.component.html',\n styleUrls: ['./tab-button.component.scss'],\n imports: [IonTabButton],\n changeDetection: ChangeDetectionStrategy.Eager,\n})\nexport class TabButtonComponent {\n @Input() tab: string;\n @Output() click = new EventEmitter<Event>();\n @ContentChildren(IconComponent) icons: QueryList<IconComponent>;\n\n onClick(event: Event, isSelected: boolean) {\n this.click.emit(event);\n\n if (isSelected) {\n const clickEvent = new CustomEvent(selectedTabClickEvent);\n dispatchEvent(clickEvent);\n }\n }\n}\n","<ion-tab-button\n #ionTabButton\n [tab]=\"tab\"\n (click)=\"onClick($event, ionTabButton.selected)\"\n tabindex=\"0\"\n>\n @if (icons.length === 1 || !ionTabButton.selected) {\n <ng-content select=\"kirby-icon:not([selected-tab])\"></ng-content>\n }\n @if (ionTabButton.selected) {\n <ng-content select=\"kirby-icon[selected-tab]\"></ng-content>\n }\n <ng-content></ng-content>\n <ng-content select=\"kirby-badge\"></ng-content>\n</ion-tab-button>\n","import { CommonModule } from '@angular/common';\n\nimport { IconModule } from '@kirbydesign/designsystem/icon';\nimport { NgModule } from '@angular/core';\nimport { IonTabBar, IonTabButton, IonTabs } from '@ionic/angular';\nimport { TabButtonComponent } from './tab-button/tab-button.component';\nimport { TabsService } from './tabs.service';\nimport { TabsComponent } from './tabs.component';\n\n@NgModule({\n imports: [\n IconModule,\n CommonModule,\n IonTabs,\n IonTabBar,\n IonTabButton,\n TabsComponent,\n TabButtonComponent,\n ],\n providers: [TabsService],\n exports: [TabsComponent, TabButtonComponent],\n})\nexport class TabsModule {}\n"],"mappings":"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
|
|
1
|
+
{"version":3,"file":"kirbydesign-designsystem-tabs.mjs","names":[],"sources":["../../tabs/src/tabs.service.ts","../../tabs/src/tabs.component.ts","../../tabs/src/tabs.component.html","../../tabs/src/tab-button/tab-button.events.ts","../../tabs/src/tab-button/tab-button.component.ts","../../tabs/src/tab-button/tab-button.component.html","../../tabs/src/tabs.module.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { IonRouterOutlet } from '@ionic/angular';\nimport { ReplaySubject } from 'rxjs';\n\n@Injectable({\n providedIn: 'root',\n})\nexport class TabsService {\n private outletSubject$: ReplaySubject<IonRouterOutlet> = new ReplaySubject(1);\n public outlet$ = this.outletSubject$.asObservable();\n\n public setOutlet(outlet: IonRouterOutlet) {\n this.outletSubject$.next(outlet);\n }\n\n public resetOutlet() {\n this.outletSubject$.next(null);\n }\n}\n\nexport { IonRouterOutlet };\n","import {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n HostBinding,\n OnDestroy,\n ViewChild,\n} from '@angular/core';\nimport { IonTabBar, IonTabs } from '@ionic/angular';\n\nimport { TabsService } from './tabs.service';\n\n@Component({\n selector: 'kirby-tab-bar',\n templateUrl: './tabs.component.html',\n styleUrls: ['./tabs.component.scss'],\n imports: [IonTabs, IonTabBar],\n changeDetection: ChangeDetectionStrategy.Eager,\n})\nexport class TabsComponent implements AfterViewInit, OnDestroy {\n @HostBinding('class.tab-bar-bottom-hidden')\n tabBarBottomHidden = false;\n @ViewChild(IonTabs, { static: true }) tabs: IonTabs;\n\n constructor(private tabsService: TabsService) {}\n\n ngAfterViewInit() {\n this.tabsService.setOutlet(this.tabs.outlet);\n }\n\n ngOnDestroy() {\n this.tabsService.resetOutlet();\n }\n}\n","<ion-tabs>\n <ion-tab-bar class=\"kirby-surface-raised\" [class.bottom-hidden]=\"tabBarBottomHidden\">\n <ng-content></ng-content>\n </ion-tab-bar>\n</ion-tabs>\n","export const selectedTabClickEvent = 'kirbySelectedTabClick';\n","import {\n ChangeDetectionStrategy,\n Component,\n ContentChildren,\n EventEmitter,\n Input,\n Output,\n QueryList,\n} from '@angular/core';\n\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\nimport { IonTabButton } from '@ionic/angular';\nimport { selectedTabClickEvent } from './tab-button.events';\n\n@Component({\n selector: 'kirby-tab-button',\n templateUrl: './tab-button.component.html',\n styleUrls: ['./tab-button.component.scss'],\n imports: [IonTabButton],\n changeDetection: ChangeDetectionStrategy.Eager,\n})\nexport class TabButtonComponent {\n @Input() tab: string;\n @Output() click = new EventEmitter<Event>();\n @ContentChildren(IconComponent) icons: QueryList<IconComponent>;\n\n onClick(event: Event, isSelected: boolean) {\n this.click.emit(event);\n\n if (isSelected) {\n const clickEvent = new CustomEvent(selectedTabClickEvent);\n dispatchEvent(clickEvent);\n }\n }\n}\n","<ion-tab-button\n #ionTabButton\n [tab]=\"tab\"\n (click)=\"onClick($event, ionTabButton.selected)\"\n tabindex=\"0\"\n>\n @if (icons.length === 1 || !ionTabButton.selected) {\n <ng-content select=\"kirby-icon:not([selected-tab])\"></ng-content>\n }\n @if (ionTabButton.selected) {\n <ng-content select=\"kirby-icon[selected-tab]\"></ng-content>\n }\n <ng-content></ng-content>\n <ng-content select=\"kirby-badge\"></ng-content>\n</ion-tab-button>\n","import { CommonModule } from '@angular/common';\n\nimport { IconModule } from '@kirbydesign/designsystem/icon';\nimport { NgModule } from '@angular/core';\nimport { IonTabBar, IonTabButton, IonTabs } from '@ionic/angular';\nimport { TabButtonComponent } from './tab-button/tab-button.component';\nimport { TabsService } from './tabs.service';\nimport { TabsComponent } from './tabs.component';\n\n@NgModule({\n imports: [\n IconModule,\n CommonModule,\n IonTabs,\n IonTabBar,\n IonTabButton,\n TabsComponent,\n TabButtonComponent,\n ],\n providers: [TabsService],\n exports: [TabsComponent, TabButtonComponent],\n})\nexport class TabsModule {}\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kirbydesign/designsystem",
|
|
3
|
-
"version": "12.0.0-dev-
|
|
3
|
+
"version": "12.0.0-dev-9f721bb",
|
|
4
4
|
"description": "The Kirby Design Angular Components.",
|
|
5
5
|
"author": "kirby@bankdata.dk",
|
|
6
6
|
"repository": {
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"@floating-ui/dom": "^1.1.0",
|
|
29
29
|
"@fontsource/roboto": "^5.2.6",
|
|
30
30
|
"@ionic/angular": "9.0.5",
|
|
31
|
-
"@kirbydesign/core": "0.0.96-dev-
|
|
31
|
+
"@kirbydesign/core": "0.0.96-dev-9f721bb",
|
|
32
32
|
"chart.js": "^3.9.1",
|
|
33
33
|
"chartjs-adapter-date-fns": "^2.0.0",
|
|
34
34
|
"chartjs-plugin-annotation": "^1.0.2",
|
|
@@ -11,7 +11,7 @@ export declare class CheckboxComponent implements AfterViewInit, ControlValueAcc
|
|
|
11
11
|
indeterminate: boolean;
|
|
12
12
|
private _attentionLevel;
|
|
13
13
|
/**
|
|
14
|
-
* @deprecated
|
|
14
|
+
* @deprecated Since v12.0.0, attention levels 1 and 2 now look the same, so this input no longer has any effect.
|
|
15
15
|
* This input will be removed in a future major version.
|
|
16
16
|
*/
|
|
17
17
|
set attentionLevel(value: '1' | '2');
|