@doku-dev/doku-fragment
Version:
A new Angular UI library that moving away from Bootstrap and built from scratch.
1 lines • 757 kB
Source Map (JSON)
{"version":3,"file":"doku-fragment.mjs","sources":["../../../../projects/doku-fragment/src/lib/accordion/accordion-body.component.ts","../../../../projects/doku-fragment/src/lib/accordion/accordion.enum.ts","../../../../projects/doku-fragment/src/lib/accordion/accordion.component.ts","../../../../projects/doku-fragment/src/lib/accordion/accordion-item.component.ts","../../../../projects/doku-fragment/src/lib/accordion/accordion-header.component.ts","../../../../projects/doku-fragment/src/lib/accordion/accordion-header.component.html","../../../../projects/doku-fragment/src/lib/accordion/accordion-title.component.ts","../../../../projects/doku-fragment/src/lib/accordion/accordion.module.ts","../../../../projects/doku-fragment/src/lib/alert/alert.component.ts","../../../../projects/doku-fragment/src/lib/alert/alert.component.html","../../../../projects/doku-fragment/src/lib/alert/alert.module.ts","../../../../projects/doku-fragment/src/lib/anchor-link/anchor-link.directive.ts","../../../../projects/doku-fragment/src/lib/anchor-link/anchor-link.module.ts","../../../../projects/doku-fragment/src/lib/badge/badge.component.ts","../../../../projects/doku-fragment/src/lib/badge/badge.component.html","../../../../projects/doku-fragment/src/lib/badge/badge.module.ts","../../../../projects/doku-fragment/src/lib/breadcrumb/breadcrumb.component.ts","../../../../projects/doku-fragment/src/lib/breadcrumb/breadcrumb.component.html","../../../../projects/doku-fragment/src/lib/breadcrumb/breadcrumb.module.ts","../../../../projects/doku-fragment/src/lib/button/button.component.ts","../../../../projects/doku-fragment/src/lib/button/button.component.html","../../../../projects/doku-fragment/src/lib/button/button.module.ts","../../../../projects/doku-fragment/src/lib/card/card-body.component.ts","../../../../projects/doku-fragment/src/lib/card/card-cover.component.ts","../../../../projects/doku-fragment/src/lib/card/card-footer.component.ts","../../../../projects/doku-fragment/src/lib/card/card-header.component.ts","../../../../projects/doku-fragment/src/lib/card/card-section.component.ts","../../../../projects/doku-fragment/src/lib/card/card-subtitle.component.ts","../../../../projects/doku-fragment/src/lib/card/card-title.component.ts","../../../../projects/doku-fragment/src/lib/card/card.component.ts","../../../../projects/doku-fragment/src/lib/card/card.component.html","../../../../projects/doku-fragment/src/lib/card/card.module.ts","../../../../projects/doku-fragment/src/lib/checkbox/checkbox-sub-label.component.ts","../../../../projects/doku-fragment/src/lib/checkbox/checkbox.component.ts","../../../../projects/doku-fragment/src/lib/checkbox/checkbox.component.html","../../../../projects/doku-fragment/src/lib/checkbox/checkbox.module.ts","../../../../projects/doku-fragment/src/lib/form-field/directives/field-prefix.directive.ts","../../../../projects/doku-fragment/src/lib/form-field/directives/field-suffix.directive.ts","../../../../projects/doku-fragment/src/lib/form-field/field-helpers/field-error.component.ts","../../../../projects/doku-fragment/src/lib/form-field/field-helpers/field-hint.component.ts","../../../../projects/doku-fragment/src/lib/form-field/field-helpers/field-success.component.ts","../../../../projects/doku-fragment/src/lib/form-field/field-label.component.ts","../../../../projects/doku-fragment/src/lib/form-field/field-label.component.html","../../../../projects/doku-fragment/src/lib/form-field/token.ts","../../../../projects/doku-fragment/src/lib/form-field/form-field.component.ts","../../../../projects/doku-fragment/src/lib/form-field/form-field.component.html","../../../../projects/doku-fragment/src/lib/form-field/form-field.module.ts","../../../../projects/doku-fragment/src/lib/input/input.directive.ts","../../../../projects/doku-fragment/src/lib/input/input.module.ts","../../../../projects/doku-fragment/src/lib/color-picker/color-picker.component.ts","../../../../projects/doku-fragment/src/lib/color-picker/color-picker.component.html","../../../../projects/doku-fragment/src/lib/color-picker/color-picker.module.ts","../../../../projects/doku-fragment/src/lib/date-picker/common/date-range-picker-input/end-date.directive.ts","../../../../projects/doku-fragment/src/lib/date-picker/common/date-range-picker-input/start-date.directive.ts","../../../../projects/doku-fragment/src/lib/date-picker/common/date-range-picker-input/date-range-picker-input.component.ts","../../../../projects/doku-fragment/src/utils/get-click-type.ts","../../../../projects/doku-fragment/src/utils/update-floating-position.ts","../../../../projects/doku-fragment/src/lib/breakpoint/breakpoint.ts","../../../../projects/doku-fragment/src/lib/select/directives/select-label-template.directive.ts","../../../../projects/doku-fragment/src/lib/select/directives/select-loading-template.directive.ts","../../../../projects/doku-fragment/src/lib/select/directives/select-no-item-template.directive.ts","../../../../projects/doku-fragment/src/lib/select/directives/select-option-template.directive.ts","../../../../projects/doku-fragment/src/lib/typography/typography.component.ts","../../../../projects/doku-fragment/src/lib/typography/typography.module.ts","../../../../projects/doku-fragment/src/lib/select/select-dropdown-portal.component.ts","../../../../projects/doku-fragment/src/lib/select/select-option.component.ts","../../../../projects/doku-fragment/src/lib/select/utils/view-element.util.ts","../../../../projects/doku-fragment/src/lib/select/utils/item-injection.util.ts","../../../../projects/doku-fragment/src/lib/select/utils/search.util.ts","../../../../projects/doku-fragment/src/lib/select/utils/style.util.ts","../../../../projects/doku-fragment/src/lib/select/utils/value.util.ts","../../../../projects/doku-fragment/src/lib/select/select.component.ts","../../../../projects/doku-fragment/src/lib/select/select.component.html","../../../../projects/doku-fragment/src/lib/select/select.module.ts","../../../../projects/doku-fragment/src/lib/date-picker/base/calendar.util.ts","../../../../projects/doku-fragment/src/lib/date-picker/base/date-picker-base-props.component.ts","../../../../projects/doku-fragment/src/lib/date-picker/base/date-picker.token.ts","../../../../projects/doku-fragment/src/lib/date-picker/base/date-picker-base.component.ts","../../../../projects/doku-fragment/src/lib/date-picker/base/date-picker-base.component.html","../../../../projects/doku-fragment/src/lib/date-picker/common/date-picker-basic-props.component.ts","../../../../projects/doku-fragment/src/lib/date-picker/date-picker-float/date-picker.component.ts","../../../../projects/doku-fragment/src/lib/date-picker/date-picker-float/date-picker.component.html","../../../../projects/doku-fragment/src/lib/date-picker/date-picker-inline/date-picker-inline.component.ts","../../../../projects/doku-fragment/src/lib/date-picker/date-picker-inline/date-picker-inline.component.html","../../../../projects/doku-fragment/src/lib/date-picker/common/date-picker-range-props.component.ts","../../../../projects/doku-fragment/src/lib/date-picker/date-range-picker-float/date-range-picker.component.ts","../../../../projects/doku-fragment/src/lib/date-picker/date-range-picker-float/date-range-picker.component.html","../../../../projects/doku-fragment/src/lib/date-picker/date-range-picker-inline/date-range-picker-inline.component.ts","../../../../projects/doku-fragment/src/lib/date-picker/date-range-picker-inline/date-range-picker-inline.component.html","../../../../projects/doku-fragment/src/lib/date-picker/date-picker.module.ts","../../../../projects/doku-fragment/src/lib/time-picker/input-time.directive.ts","../../../../projects/doku-fragment/src/lib/time-picker/time-picker.component.ts","../../../../projects/doku-fragment/src/lib/time-picker/time-picker.component.html","../../../../projects/doku-fragment/src/lib/time-picker/time-picker.module.ts","../../../../projects/doku-fragment/src/lib/date-time-picker/common/time-picker/time-picker.component.ts","../../../../projects/doku-fragment/src/lib/date-time-picker/common/time-picker/time-picker.component.html","../../../../projects/doku-fragment/src/lib/date-time-picker/date-time-picker-float/date-time-picker-float.component.ts","../../../../projects/doku-fragment/src/lib/date-time-picker/date-time-picker-inline/date-time-picker-inline.component.ts","../../../../projects/doku-fragment/src/lib/date-time-picker/date-time-picker-inline/date-time-picker-inline.component.html","../../../../projects/doku-fragment/src/lib/date-time-picker/date-time-picker.module.ts","../../../../projects/doku-fragment/src/lib/dropdown/dropdown-menu-divider.directive.ts","../../../../projects/doku-fragment/src/lib/dropdown/dropdown.token.ts","../../../../projects/doku-fragment/src/lib/dropdown/dropdown.directive.ts","../../../../projects/doku-fragment/src/lib/dropdown/dropdown-menu.directive.ts","../../../../projects/doku-fragment/src/lib/dropdown/dropdown-menu-item.directive.ts","../../../../projects/doku-fragment/src/lib/dropdown/dropdown-toggle.directive.ts","../../../../projects/doku-fragment/src/lib/dropdown/dropdown.module.ts","../../../../projects/doku-fragment/src/lib/spinner/spinner.component.ts","../../../../projects/doku-fragment/src/lib/spinner/spinner.component.html","../../../../projects/doku-fragment/src/lib/spinner/spinner.module.ts","../../../../projects/doku-fragment/src/lib/input-file-upload/input-file-upload.component.ts","../../../../projects/doku-fragment/src/lib/input-file-upload/input-file-upload.component.html","../../../../projects/doku-fragment/src/lib/input-file-upload/input-file-upload.module.ts","../../../../projects/doku-fragment/src/lib/layout/layout-content/layout-content.component.ts","../../../../projects/doku-fragment/src/lib/layout/layout-content/layout-content.component.html","../../../../projects/doku-fragment/src/lib/layout/layout-content/page-description/page-description.component.ts","../../../../projects/doku-fragment/src/lib/layout/layout-content/page-description/page-description.component.html","../../../../projects/doku-fragment/src/lib/layout/layout-content/page-header/page-header.component.ts","../../../../projects/doku-fragment/src/lib/layout/layout-content/page-header/page-header.component.html","../../../../projects/doku-fragment/src/lib/layout/layout-content/page-title/page-title.component.ts","../../../../projects/doku-fragment/src/lib/layout/layout-content/page-title/page-title.component.html","../../../../projects/doku-fragment/src/lib/layout/layout-content/layout-content.module.ts","../../../../projects/doku-fragment/src/lib/layout/layout.module.ts","../../../../projects/doku-fragment/src/lib/modal/content/modal-body.component.ts","../../../../projects/doku-fragment/src/lib/modal/content/modal-close-icon.component.ts","../../../../projects/doku-fragment/src/lib/modal/content/modal-footer-spacer.component.ts","../../../../projects/doku-fragment/src/lib/modal/content/modal-footer.component.ts","../../../../projects/doku-fragment/src/lib/modal/icons/icon-danger.component.ts","../../../../projects/doku-fragment/src/lib/modal/icons/icon-exclamation.component.ts","../../../../projects/doku-fragment/src/lib/modal/icons/icon-info.component.ts","../../../../projects/doku-fragment/src/lib/modal/icons/icon-success.component.ts","../../../../projects/doku-fragment/src/lib/modal/modal-ref.ts","../../../../projects/doku-fragment/src/lib/modal/content/modal-header.component.ts","../../../../projects/doku-fragment/src/lib/modal/content/modal-header.component.html","../../../../projects/doku-fragment/src/lib/modal/modal.module.ts","../../../../projects/doku-fragment/src/lib/pagination/pagination.component.ts","../../../../projects/doku-fragment/src/lib/pagination/pagination.component.html","../../../../projects/doku-fragment/src/lib/pagination/integrations/pagination-container.component.ts","../../../../projects/doku-fragment/src/lib/pagination/integrations/pagination-container.component.html","../../../../projects/doku-fragment/src/lib/pagination/integrations/pagination-info.component.ts","../../../../projects/doku-fragment/src/lib/pagination/integrations/pagination-info.component.html","../../../../projects/doku-fragment/src/lib/pagination/integrations/pagination-per-page.component.ts","../../../../projects/doku-fragment/src/lib/pagination/integrations/pagination-per-page.component.html","../../../../projects/doku-fragment/src/lib/pagination/pagination.module.ts","../../../../projects/doku-fragment/src/lib/pill/pill-group.component.ts","../../../../projects/doku-fragment/src/lib/pill/pill-group.component.html","../../../../projects/doku-fragment/src/lib/pill/pill-button.component.ts","../../../../projects/doku-fragment/src/lib/pill/pill-button.component.html","../../../../projects/doku-fragment/src/lib/pill/pill.component.ts","../../../../projects/doku-fragment/src/lib/pill/pill.component.html","../../../../projects/doku-fragment/src/lib/pill/pill.module.ts","../../../../projects/doku-fragment/src/lib/progress-bar/progress-bar.component.ts","../../../../projects/doku-fragment/src/lib/progress-bar/progress-bar.component.html","../../../../projects/doku-fragment/src/lib/progress-bar/progress-bar.module.ts","../../../../projects/doku-fragment/src/lib/radio/radio-custom-appearance.directive.ts","../../../../projects/doku-fragment/src/lib/radio/context.ts","../../../../projects/doku-fragment/src/lib/radio/token.ts","../../../../projects/doku-fragment/src/lib/radio/radio-group.component.ts","../../../../projects/doku-fragment/src/lib/radio/radio.component.ts","../../../../projects/doku-fragment/src/lib/radio/radio.component.html","../../../../projects/doku-fragment/src/lib/radio/radio-indicator.component.ts","../../../../projects/doku-fragment/src/lib/radio/built-in-appearances/radio-appearance-card/radio-appearance-card.component.ts","../../../../projects/doku-fragment/src/lib/radio/built-in-appearances/radio-appearance-card/radio-appearance-card.component.html","../../../../projects/doku-fragment/src/lib/radio/radio.module.ts","../../../../projects/doku-fragment/src/lib/shimmer/shimmer.component.ts","../../../../projects/doku-fragment/src/lib/shimmer/shimmer.module.ts","../../../../projects/doku-fragment/src/lib/table/sorter-icon.component.ts","../../../../projects/doku-fragment/src/lib/table/template.util.ts","../../../../projects/doku-fragment/src/lib/table/table.directive.ts","../../../../projects/doku-fragment/src/lib/table/table-sortable.directive.ts","../../../../projects/doku-fragment/src/lib/table/table-sticky-column.directive.ts","../../../../projects/doku-fragment/src/lib/table/table.module.ts","../../../../projects/doku-fragment/src/lib/tabs/tab-content.directive.ts","../../../../projects/doku-fragment/src/lib/tabs/tab-label.directive.ts","../../../../projects/doku-fragment/src/lib/tabs/token.ts","../../../../projects/doku-fragment/src/lib/tabs/view-element.ts","../../../../projects/doku-fragment/src/lib/tabs/tabs.component.ts","../../../../projects/doku-fragment/src/lib/tabs/tab.component.ts","../../../../projects/doku-fragment/src/lib/tabs/tabs.module.ts","../../../../projects/doku-fragment/src/lib/timeline/timeline-date-time.component.ts","../../../../projects/doku-fragment/src/lib/timeline/timeline-date-time.component.html","../../../../projects/doku-fragment/src/lib/timeline/timeline-description.component.ts","../../../../projects/doku-fragment/src/lib/timeline/timeline-description.component.html","../../../../projects/doku-fragment/src/lib/timeline/timeline-item.component.ts","../../../../projects/doku-fragment/src/lib/timeline/timeline-item.component.html","../../../../projects/doku-fragment/src/lib/timeline/timeline-title.component.ts","../../../../projects/doku-fragment/src/lib/timeline/timeline-title.component.html","../../../../projects/doku-fragment/src/lib/timeline/timeline.component.ts","../../../../projects/doku-fragment/src/lib/timeline/timeline.component.html","../../../../projects/doku-fragment/src/lib/timeline/timeline.module.ts","../../../../projects/doku-fragment/src/lib/toggle/toggle-description.component.ts","../../../../projects/doku-fragment/src/lib/toggle/toggle.component.ts","../../../../projects/doku-fragment/src/lib/toggle/toggle.component.html","../../../../projects/doku-fragment/src/lib/toggle/toggle.module.ts","../../../../projects/doku-fragment/src/lib/tooltip/tooltip.directive.ts","../../../../projects/doku-fragment/src/lib/tooltip/tooltip.module.ts","../../../../projects/doku-fragment/src/lib/backdrop/backdrop-ref.ts","../../../../projects/doku-fragment/src/lib/backdrop/backdrop.service.ts","../../../../projects/doku-fragment/src/lib/modal/view-element.ts","../../../../projects/doku-fragment/src/lib/modal/modal.service.ts","../../../../projects/doku-fragment/src/lib/page-loading/page-loading.service.ts","../../../../projects/doku-fragment/src/lib/popover/partial-templates/popover-body/popover-body.component.ts","../../../../projects/doku-fragment/src/lib/popover/partial-templates/popover-body/popover-body.component.html","../../../../projects/doku-fragment/src/lib/popover/partial-templates/popover-footer/popover-footer.component.ts","../../../../projects/doku-fragment/src/lib/popover/partial-templates/popover-footer/popover-footer.component.html","../../../../projects/doku-fragment/src/lib/popover/partial-templates/popover-title/popover-title.component.ts","../../../../projects/doku-fragment/src/lib/popover/partial-templates/popover-title/popover-title.component.html","../../../../projects/doku-fragment/src/lib/popover/popover.directive.ts","../../../../projects/doku-fragment/src/lib/popover/popover.module.ts","../../../../projects/doku-fragment/src/lib/toast/toast.constant.ts","../../../../projects/doku-fragment/src/lib/toast/toast-ref.ts","../../../../projects/doku-fragment/src/lib/toast/toast.component.ts","../../../../projects/doku-fragment/src/lib/toast/toast-element.service.ts","../../../../projects/doku-fragment/src/lib/toast/toast.service.ts","../../../../projects/doku-fragment/src/public-api.ts","../../../../projects/doku-fragment/src/doku-fragment.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, HostBinding, ViewEncapsulation } from '@angular/core';\n\n@Component({\n selector: 'doku-accordion-body',\n exportAs: 'dokuAccordionBody',\n standalone: true,\n imports: [CommonModule],\n template: '<ng-content></ng-content>',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DokuAccordionBody {\n @HostBinding('class')\n protected readonly classes = 'd-accordion-body d-text-body-l';\n}\n","export enum SelectionDispatcher {\n ExpandAll = 'd-accordion-action-expand-all',\n CollapseAll = 'd-accordion-action-collapse-all',\n}\n","import { CommonModule } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n HostBinding,\n Input,\n OnDestroy,\n ViewEncapsulation,\n} from '@angular/core';\nimport { BehaviorSubject, ReplaySubject, takeUntil } from 'rxjs';\nimport { SelectionDispatcher } from './accordion.enum';\n\n@Component({\n selector: 'doku-accordion',\n exportAs: 'dokuAccordion',\n standalone: true,\n imports: [CommonModule],\n template: '<ng-content select=\"doku-accordion-item\"></ng-content>',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DokuAccordion implements OnDestroy {\n /**\n * Whether the accordion should allow multiple expanded items simultaneously.\n * @default false\n */\n @Input() multi = false;\n\n @HostBinding('class')\n protected readonly classes = 'd-accordion';\n\n private destroy$ = new ReplaySubject(1);\n\n /**\n * Use to dispatch active accordion id on the accordion items.\n * Value can be other than active accordion id for specific use cases.\n *\n * Specific values:\n * - \"d-accordion-action-expand-all\"\n * - \"d-accordion-action-collapse-all\"\n */\n protected selectionDispatcher$ = new BehaviorSubject<SelectionDispatcher | string | null>(null);\n\n /**\n * Use to listen active accordion id changes on the accordion items.\n * But the value can be other than active accordion id.\n * See {@link selectionDispatcher$} for the list of specific values.\n */\n protected selectionListener$ = this.selectionDispatcher$.pipe(takeUntil(this.destroy$));\n\n ngOnDestroy(): void {\n this.destroy$.next(1);\n this.destroy$.complete();\n }\n\n /**\n * Expand all accordion items when `multi` is true.\n * If `multi` is false and all items are collapsed, it will open the first one.\n * Otherwise, it will keep the expanded one.\n *\n * Disabled accordion items will not affected.\n */\n expandAll() {\n this.selectionDispatcher$.next(SelectionDispatcher.ExpandAll);\n }\n\n /**\n * Collapse all accordion items except for disabled items.\n */\n collapseAll() {\n this.selectionDispatcher$.next(SelectionDispatcher.CollapseAll);\n }\n}\n","import { CommonModule } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ElementRef,\n Host,\n HostBinding,\n Input,\n ViewEncapsulation,\n} from '@angular/core';\nimport { DokuAccordion } from './accordion.component';\nimport { SelectionDispatcher } from './accordion.enum';\n\nlet uniqueId = 0;\n\n@Component({\n selector: 'doku-accordion-item',\n exportAs: 'dokuAccordionItem',\n standalone: true,\n imports: [CommonModule],\n template: `<ng-content select=\"doku-accordion-header\"></ng-content>\n <ng-content select=\"doku-accordion-body\"></ng-content>`,\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DokuAccordionItem {\n @HostBinding('class')\n readonly classes = 'd-accordion-item';\n\n /**\n * Autogenerate unique id of the accordion item.\n */\n @Input() accordionId = `d-accordion-id-${uniqueId++}`;\n\n /**\n * Whether the accordion item should be expanded.\n *\n * By default, the accordion `multi` is false,\n * it will collapse other expanded items.\n *\n * Disabled accordion item will not expanded.\n *\n * @default false\n */\n @HostBinding('class.d-accordion-expanded')\n @Input()\n get expanded(): boolean {\n return this._expanded;\n }\n set expanded(value: boolean) {\n if (this.disabled) return;\n this._expanded = value;\n this.accordion['selectionDispatcher$'].next(this.accordionId);\n this.cdRef.markForCheck();\n }\n private _expanded = false;\n\n /**\n * Whether the accordion item is disabled.\n * @default false\n */\n @HostBinding('class.d-accordion-disabled')\n @Input()\n disabled = false;\n\n constructor(\n @Host() private accordion: DokuAccordion,\n private cdRef: ChangeDetectorRef,\n private elementRef: ElementRef\n ) {\n this.accordion['selectionListener$'].subscribe((selectionAccordion) => {\n this.handleExpandAtATime(selectionAccordion);\n this.handleExpandAll(selectionAccordion as SelectionDispatcher);\n this.handleCollapseAll(selectionAccordion as SelectionDispatcher);\n });\n }\n\n /**\n * Toggle (expand/collapse) the accordion item.\n * Do nothing if `disabled` is true.\n */\n toggle() {\n this.expanded = !this.expanded;\n }\n\n /**\n * Collapse the accordion item.\n * Do nothing if `disabled` is true.\n */\n collapse() {\n this.expanded = false;\n }\n\n /**\n * Expand the accordion item.\n * Do nothing if `disabled` is true.\n */\n expand() {\n this.expanded = true;\n }\n\n private handleExpandAtATime(activeAccordionId: string | null) {\n if (!activeAccordionId) return;\n if (Object.values(SelectionDispatcher).includes(activeAccordionId as SelectionDispatcher)) {\n return;\n }\n\n if (!this.accordion.multi && activeAccordionId !== this.accordionId) {\n this._expanded = false;\n this.cdRef.markForCheck();\n }\n }\n\n /**\n * See detail on {@link DokuAccordion.expandAll}\n */\n private handleExpandAll(selectionAccordion: SelectionDispatcher) {\n if (selectionAccordion !== SelectionDispatcher.ExpandAll) return;\n if (this.disabled) return;\n\n if (this.accordion.multi) {\n this._expanded = true;\n this.cdRef.markForCheck();\n }\n\n // When multi expanded is not allowed, expand the first item if no one item expanded.\n if (!this.accordion.multi) {\n const accordionItemElement = this.elementRef.nativeElement as HTMLElement;\n\n // Check if has expanded item by siblings class name.\n const hasExpandedItem = !!accordionItemElement.parentElement?.querySelector(\n 'doku-accordion-item.d-accordion-expanded'\n );\n if (hasExpandedItem) return;\n\n // Check if this accordion item is the first item by checking previous element.\n const isFirstChild =\n accordionItemElement.previousSibling?.nodeName?.toLowerCase() !== 'doku-accordion-item';\n\n if (isFirstChild) {\n this._expanded = true;\n this.cdRef.markForCheck();\n }\n }\n }\n\n /**\n * See detail on {@link DokuAccordion.collapseAll}\n */\n private handleCollapseAll(selectionAccordion: SelectionDispatcher) {\n if (selectionAccordion !== SelectionDispatcher.CollapseAll) return;\n if (this.disabled) return;\n\n if (this._expanded) {\n this._expanded = false;\n this.cdRef.markForCheck();\n }\n }\n}\n","import { CommonModule } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n Host,\n HostBinding,\n HostListener,\n ViewEncapsulation,\n} from '@angular/core';\nimport { DokuAccordionItem } from './accordion-item.component';\n\n@Component({\n selector: 'doku-accordion-header',\n exportAs: 'dokuAccordionHeader',\n standalone: true,\n imports: [CommonModule],\n templateUrl: './accordion-header.component.html',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DokuAccordionHeader {\n @HostBinding('class')\n protected readonly classes = 'd-accordion-header';\n\n constructor(@Host() private item: DokuAccordionItem) {}\n\n /**\n * Toggle the accordion item.\n */\n @HostListener('click')\n toggle() {\n this.item.toggle();\n }\n}\n","<ng-content></ng-content>\n\n<span class=\"d-accordion-icon-toggle\">\n <ng-container *ngTemplateOutlet=\"iconToggle\"></ng-container>\n</span>\n\n<ng-template #iconToggle>\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.48184 11.8312L1.54797 5.89727C1.26179 5.61108 1.26179 5.1471 1.54797 4.86095L2.24007 4.16886C2.52576 3.88316 2.9888 3.88261 3.27516 4.16763L8.00002 8.87035L12.7248 4.16763C13.0112 3.88261 13.4742 3.88316 13.7599 4.16886L14.452 4.86095C14.7382 5.14713 14.7382 5.61111 14.452 5.89727L8.51819 11.8312C8.23201 12.1173 7.76803 12.1173 7.48184 11.8312Z\"\n fill=\"currentColor\"\n />\n </svg>\n</ng-template>\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, HostBinding, ViewEncapsulation } from '@angular/core';\n\n@Component({\n selector: 'doku-accordion-title',\n exportAs: 'dokuAccordionTitle',\n standalone: true,\n imports: [CommonModule],\n template: '<ng-content></ng-content>',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DokuAccordionTitle {\n @HostBinding('class')\n readonly classes = 'd-accordion-title';\n}\n","import { NgModule } from '@angular/core';\nimport { DokuAccordionBody } from './accordion-body.component';\nimport { DokuAccordionHeader } from './accordion-header.component';\nimport { DokuAccordionItem } from './accordion-item.component';\nimport { DokuAccordionTitle } from './accordion-title.component';\nimport { DokuAccordion } from './accordion.component';\n\n@NgModule({\n imports: [\n DokuAccordion,\n DokuAccordionItem,\n DokuAccordionHeader,\n DokuAccordionTitle,\n DokuAccordionBody,\n ],\n exports: [\n DokuAccordion,\n DokuAccordionItem,\n DokuAccordionHeader,\n DokuAccordionTitle,\n DokuAccordionBody,\n ],\n})\nexport class DokuAccordionModule {}\n","import { CommonModule, NgClass } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n EventEmitter,\n HostBinding,\n Input,\n Output,\n ViewEncapsulation,\n} from '@angular/core';\n\n@Component({\n selector: 'doku-alert',\n exportAs: 'dokuAlert',\n standalone: true,\n imports: [CommonModule],\n templateUrl: './alert.component.html',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DokuAlert {\n @HostBinding('class')\n protected readonly hostClasses: NgClass['ngClass'] = ['d-alert-host'];\n\n /**\n * @default 'neutral'\n */\n @Input() state: 'neutral' | 'success' | 'warning' | 'error' = 'neutral';\n\n /**\n * Whether alert can be dismissed.\n * @default false\n */\n @Input() dismissible = false;\n\n /**\n * Whether alert should have full width.\n */\n @HostBinding('class.d-alert-full-width')\n @Input()\n fullWidth = false;\n\n @Output() dismissed = new EventEmitter();\n\n constructor(private elementRef: ElementRef) {}\n\n protected get classes(): NgClass['ngClass'] {\n return 'd-alert-state-' + this.state;\n }\n\n dismiss() {\n if (!this.dismissible) return;\n this.dismissed.emit();\n (this.elementRef.nativeElement as HTMLElement).remove();\n }\n}\n","<div class=\"d-alert\" [ngClass]=\"classes\">\n <span class=\"d-alert-icon\">\n <ng-container *ngIf=\"state === 'neutral'\" [ngTemplateOutlet]=\"iconQuestion\"></ng-container>\n <ng-container *ngIf=\"state === 'success'\" [ngTemplateOutlet]=\"iconCheck\"></ng-container>\n <ng-container *ngIf=\"state === 'warning'\" [ngTemplateOutlet]=\"iconExclamation\"></ng-container>\n <ng-container *ngIf=\"state === 'error'\" [ngTemplateOutlet]=\"iconTimes\"></ng-container>\n </span>\n <span>\n <ng-content></ng-content>\n </span>\n <span *ngIf=\"dismissible\" class=\"d-alert-action-dismiss-wrapper\">\n <span class=\"d-alert-action-dismiss\" (click)=\"dismiss()\">\n <ng-container [ngTemplateOutlet]=\"iconClose\"></ng-container>\n </span>\n </span>\n</div>\n\n<ng-template #iconTimes>\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M12 2C6.47581 2 2 6.47581 2 12C2 17.5242 6.47581 22 12 22C17.5242 22 22 17.5242 22 12C22 6.47581 17.5242 2 12 2ZM16.9032 14.625C17.0927 14.8145 17.0927 15.121 16.9032 15.3105L15.3065 16.9032C15.1169 17.0927 14.8105 17.0927 14.621 16.9032L12 14.2581L9.375 16.9032C9.18548 17.0927 8.87903 17.0927 8.68952 16.9032L7.09677 15.3065C6.90726 15.1169 6.90726 14.8105 7.09677 14.621L9.74194 12L7.09677 9.375C6.90726 9.18548 6.90726 8.87903 7.09677 8.68952L8.69355 7.09274C8.88306 6.90323 9.18952 6.90323 9.37903 7.09274L12 9.74194L14.625 7.09677C14.8145 6.90726 15.121 6.90726 15.3105 7.09677L16.9073 8.69355C17.0968 8.88306 17.0968 9.18952 16.9073 9.37903L14.2581 12L16.9032 14.625Z\"\n fill=\"currentColor\"\n />\n </svg>\n</ng-template>\n\n<ng-template #iconCheck>\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M22 12C22 17.5229 17.5229 22 12 22C6.47714 22 2 17.5229 2 12C2 6.47714 6.47714 2 12 2C17.5229 2 22 6.47714 22 12ZM10.8433 17.2949L18.2627 9.87556C18.5146 9.62363 18.5146 9.21512 18.2627 8.96319L17.3503 8.05081C17.0983 7.79883 16.6898 7.79883 16.4379 8.05081L10.3871 14.1015L7.56214 11.2766C7.3102 11.0246 6.90169 11.0246 6.64972 11.2766L5.73734 12.189C5.4854 12.4409 5.4854 12.8494 5.73734 13.1013L9.93089 17.2949C10.1829 17.5469 10.5913 17.5469 10.8433 17.2949Z\"\n fill=\"currentColor\"\n />\n </svg>\n</ng-template>\n\n<ng-template #iconQuestion>\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M22 12C22 17.5241 17.5225 22 12 22C6.47754 22 2 17.5241 2 12C2 6.47915 6.47754 2 12 2C17.5225 2 22 6.47915 22 12ZM12.2683 5.30645C10.0709 5.30645 8.66935 6.23214 7.56879 7.87734C7.42621 8.09048 7.47391 8.37794 7.67827 8.5329L9.07742 9.59379C9.2873 9.75294 9.58633 9.71508 9.74939 9.50823C10.4697 8.5946 10.9636 8.0648 12.06 8.0648C12.8837 8.0648 13.9027 8.59496 13.9027 9.39375C13.9027 9.99762 13.4042 10.3077 12.5908 10.7638C11.6423 11.2955 10.3871 11.9573 10.3871 13.6129V13.7742C10.3871 14.0414 10.6037 14.2581 10.871 14.2581H13.129C13.3962 14.2581 13.6129 14.0414 13.6129 13.7742V13.7204C13.6129 12.5728 16.9672 12.525 16.9672 9.41935C16.9672 7.08056 14.5412 5.30645 12.2683 5.30645ZM12 15.3065C10.9772 15.3065 10.1452 16.1385 10.1452 17.1613C10.1452 18.184 10.9772 19.0161 12 19.0161C13.0228 19.0161 13.8548 18.184 13.8548 17.1613C13.8548 16.1385 13.0228 15.3065 12 15.3065Z\"\n fill=\"currentColor\"\n />\n </svg>\n</ng-template>\n\n<ng-template #iconExclamation>\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M22 12C22 17.5241 17.5225 22 12 22C6.47754 22 2 17.5241 2 12C2 6.47915 6.47754 2 12 2C17.5225 2 22 6.47915 22 12ZM12 14.0161C10.9756 14.0161 10.1452 14.8466 10.1452 15.871C10.1452 16.8954 10.9756 17.7258 12 17.7258C13.0244 17.7258 13.8548 16.8954 13.8548 15.871C13.8548 14.8466 13.0244 14.0161 12 14.0161ZM10.239 7.34895L10.5381 12.8328C10.5521 13.0894 10.7643 13.2903 11.0212 13.2903H12.9788C13.2357 13.2903 13.4479 13.0894 13.4619 12.8328L13.761 7.34895C13.7761 7.07177 13.5554 6.83871 13.2779 6.83871H10.7221C10.4445 6.83871 10.2239 7.07177 10.239 7.34895Z\"\n fill=\"currentColor\"\n />\n </svg>\n</ng-template>\n\n<ng-template #iconClose>\n <svg width=\"13\" height=\"12\" viewBox=\"0 0 13 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.9188 0.2753C11.7488 0.104877 11.5179 0.00910126 11.2772 0.00910126C11.0364 0.00910126 10.8056 0.104877 10.6355 0.2753L6.185 4.71672L1.73449 0.266199C1.56445 0.0957752 1.33359 0 1.09285 0C0.852104 0 0.62125 0.0957752 0.451209 0.266199C0.0962603 0.621148 0.0962603 1.19453 0.451209 1.54948L4.90173 5.99999L0.451209 10.4505C0.0962603 10.8055 0.0962603 11.3788 0.451209 11.7338C0.806159 12.0887 1.37954 12.0887 1.73449 11.7338L6.185 7.28327L10.6355 11.7338C10.9905 12.0887 11.5639 12.0887 11.9188 11.7338C12.2737 11.3788 12.2737 10.8055 11.9188 10.4505L7.46828 5.99999L11.9188 1.54948C12.2646 1.20363 12.2646 0.621148 11.9188 0.2753Z\"\n fill=\"currentColor\"\n />\n </svg>\n</ng-template>\n","import { NgModule } from '@angular/core';\nimport { DokuAlert } from './alert.component';\n\n@NgModule({\n imports: [DokuAlert],\n exports: [DokuAlert],\n})\nexport class DokuAlertModule {}\n","import { NgClass } from '@angular/common';\nimport { Directive, HostBinding } from '@angular/core';\n\n@Directive({\n selector: '[doku-anchor-link]',\n exportAs: 'dokuAnchorLink',\n standalone: true,\n})\nexport class DokuAnchorLink {\n @HostBinding('class') protected readonly classes: NgClass['ngClass'] = ['d-anchor-link'];\n}\n","import { NgModule } from '@angular/core';\nimport { DokuAnchorLink } from './anchor-link.directive';\n\n@NgModule({\n imports: [DokuAnchorLink],\n exports: [DokuAnchorLink],\n})\nexport class DokuAnchorLinkModule {}\n","import { CommonModule, NgClass } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';\nimport { DokuBadgeColor, DokuBadgeVariant } from './badge.types';\n\n@Component({\n selector: 'doku-badge',\n exportAs: 'dokuBadge',\n standalone: true,\n imports: [CommonModule],\n templateUrl: './badge.component.html',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DokuBadge {\n /**\n * The color of the badge. Default value is 'green'.\n */\n @Input() color: DokuBadgeColor = 'green';\n\n /**\n * The variant of the badge. Default value is 'filled'.\n */\n @Input() variant: DokuBadgeVariant = 'filled';\n\n protected get classes(): NgClass['ngClass'] {\n return `d-badge-${this.variant} d-badge-${this.color} `;\n }\n}\n","<div class=\"d-badge\" [ngClass]=\"classes\"><ng-content></ng-content></div>\n","import { NgModule } from '@angular/core';\nimport { DokuBadge } from './badge.component';\n\n@NgModule({\n imports: [DokuBadge],\n exports: [DokuBadge],\n})\nexport class DokuBadgeModule {}\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';\nimport { DokuBreadcrumbItem } from './breadcrumb.interface';\n\n@Component({\n selector: 'doku-breadcrumb',\n exportAs: 'dokuBreadcrumb',\n standalone: true,\n imports: [CommonModule],\n templateUrl: './breadcrumb.component.html',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DokuBreadcrumb {\n @Input() items: DokuBreadcrumbItem[] = [];\n\n get hasBreadcrumb(): boolean {\n return !!this.items?.length;\n }\n\n get totalBreadcrumbs(): number {\n return this.items?.length || 0;\n }\n}\n","<div *ngIf=\"hasBreadcrumb\" class=\"d-breadcrumbs\" doku-typography>\n <div\n *ngFor=\"let breadcrumb of items; index as idx\"\n class=\"d-breadcrumb-item\"\n [class.active]=\"totalBreadcrumbs === idx + 1\"\n >\n <span\n (click)=\"totalBreadcrumbs !== idx + 1 && breadcrumb.clickCallback?.()\"\n class=\"d-breadcrumb-nav\"\n [class.clickable]=\"totalBreadcrumbs !== idx + 1 && !!breadcrumb.clickCallback\"\n >\n {{ breadcrumb.name || \"\" }}\n </span>\n <span *ngIf=\"totalBreadcrumbs !== idx + 1\" class=\"d-breadcrumb-divider\">/</span>\n </div>\n</div>\n","import { NgModule } from '@angular/core';\nimport { DokuBreadcrumb } from './breadcrumb.component';\n\n@NgModule({\n imports: [DokuBreadcrumb],\n exports: [DokuBreadcrumb],\n})\nexport class DokuBreadcrumbModule {}\n","import { CommonModule, NgClass } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n HostBinding,\n HostListener,\n Input,\n ViewEncapsulation,\n} from '@angular/core';\n\n@Component({\n selector: 'button[doku-button], a[doku-button]',\n exportAs: 'dokuButton',\n standalone: true,\n imports: [CommonModule],\n templateUrl: './button.component.html',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DokuButton {\n /**\n * Variant of the button.\n *\n * @default `primary`\n */\n @Input() variant: 'primary' | 'secondary' | 'text' | 'normal' = 'primary';\n\n /**\n * Size of the button.\n *\n * @default `medium`\n */\n @Input() size: 'small' | 'medium' | 'large' = 'medium';\n\n /**\n * Whether button should be disabled.\n *\n * @default false\n */\n @HostBinding('class.d-btn-disabled')\n @Input()\n disabled = false;\n\n /**\n * Whether button should be on loading state.\n *\n * If `true`, the button cannot be clicked.\n *\n * When `disabled` and `loading` are true, the `disabled` will take precedence.\n *\n * @default false\n */\n @HostBinding('class.d-btn-loading')\n @Input()\n loading = false;\n\n constructor(private elementRef: ElementRef) {}\n\n protected get element(): HTMLElement {\n return this.elementRef.nativeElement;\n }\n\n @HostBinding('class')\n protected get classes(): NgClass['ngClass'] {\n return ['d-btn', `d-btn-${this.variant}`, `d-btn-${this.size}`];\n }\n\n /**\n * Provide native `disabled` attribute to prevent button from being clicked.\n */\n @HostBinding('attr.disabled')\n protected get disabledAttribute(): boolean | null {\n return this.disabled || this.loading || null;\n }\n\n @HostBinding('class.d-btn-icon')\n protected get isIconOnly(): boolean {\n return Array.from(this.element.children).some((child) => child.hasAttribute('icon-only'));\n }\n\n @HostListener('click', ['$event'])\n protected onClick(e: Event) {\n if (this.disabled || this.loading) {\n e.preventDefault();\n e.stopImmediatePropagation();\n }\n }\n}\n","<span *ngIf=\"this.loading && !this.disabled\" class=\"d-btn-spinner\"><span></span></span>\n\n<ng-content select=\"[icon-left]\"></ng-content>\n\n<ng-content></ng-content>\n\n<ng-content select=\"[icon-right]\"></ng-content>\n","import { NgModule } from '@angular/core';\nimport { DokuButton } from './button.component';\n\n@NgModule({\n imports: [DokuButton],\n exports: [DokuButton],\n})\nexport class DokuButtonModule {}\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, HostBinding, ViewEncapsulation } from '@angular/core';\n\n@Component({\n selector: 'doku-card-body',\n exportAs: 'dokuCardBody',\n standalone: true,\n imports: [CommonModule],\n template: `<ng-content></ng-content>`,\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DokuCardBody {\n @HostBinding('class')\n protected readonly classes = 'd-card-body';\n}\n","import { CommonModule, NgClass } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, HostBinding, ViewEncapsulation } from '@angular/core';\n\n@Component({\n selector: 'doku-card-cover',\n exportAs: 'dokuCardCover',\n standalone: true,\n imports: [CommonModule],\n template: `<ng-content></ng-content>`,\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DokuCardCover {\n @HostBinding('class')\n protected readonly classes: NgClass['ngClass'] = 'd-card-cover';\n}\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, HostBinding, ViewEncapsulation } from '@angular/core';\n\n@Component({\n selector: 'doku-card-footer',\n exportAs: 'dokuCardFooter',\n standalone: true,\n imports: [CommonModule],\n template: `<ng-content></ng-content>`,\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DokuCardFooter {\n @HostBinding('class')\n protected readonly classes = 'd-card-footer';\n}\n","import { CommonModule, NgClass } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n HostBinding,\n Input,\n ViewEncapsulation,\n} from '@angular/core';\n\n@Component({\n selector: 'doku-card-header',\n exportAs: 'dokuCardHeader',\n standalone: true,\n imports: [CommonModule],\n template: `<ng-content></ng-content>`,\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DokuCardHeader {\n /**\n * The background of the header element.\n * @default 'transparent'\n */\n @Input() background: 'transparent' | 'colored' = 'transparent';\n\n /**\n * Whether the header have a line divider at the bottom.\n *\n * @default false\n */\n @HostBinding('class.with-divider')\n @Input()\n withDivider = false;\n\n /**\n * Whether to remove the padding bottom.\n *\n * Does not works when `background` is colored or `withDivider` is true.\n *\n * @default false\n */\n @Input() dense = false;\n\n @HostBinding('class')\n protected get classes(): NgClass['ngClass'] {\n return ['d-card-header', `d-card-header-${this.background}`];\n }\n\n @HostBinding('class.d-card-header-dense')\n protected get classDense(): boolean {\n if (this.background === 'colored' || this.withDivider) return false;\n return this.dense;\n }\n}\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, HostBinding, ViewEncapsulation } from '@angular/core';\n\n@Component({\n selector: 'doku-card-section',\n exportAs: 'dokuCardSection',\n standalone: true,\n imports: [CommonModule],\n template: '<ng-content></ng-content>',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DokuCardSection {\n @HostBinding('class')\n protected readonly classes = 'd-card-section';\n}\n","import { CommonModule, NgClass } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, HostBinding, ViewEncapsulation } from '@angular/core';\n\n@Component({\n selector: 'doku-card-subtitle',\n exportAs: 'dokuCardSubtitle',\n standalone: true,\n imports: [CommonModule],\n template: `<ng-content></ng-content>`,\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DokuCardSubtitle {\n @HostBinding('class')\n protected readonly classes: NgClass['ngClass'] = 'd-card-subtitle';\n}\n","import { CommonModule, NgClass } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, HostBinding, ViewEncapsulation } from '@angular/core';\n\n@Component({\n selector: 'doku-card-title',\n exportAs: 'dokuCardTitle',\n standalone: true,\n imports: [CommonModule],\n template: `<ng-content></ng-content>`,\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DokuCardTitle {\n @HostBinding('class')\n protected readonly classes: NgClass['ngClass'] = 'd-card-title';\n}\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, HostBinding, ViewEncapsulation } from '@angular/core';\n\n@Component({\n selector: 'doku-card',\n exportAs: 'dokuCard',\n standalone: true,\n imports: [CommonModule],\n templateUrl: './card.component.html',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DokuCard {\n @HostBinding('class')\n protected readonly classes = 'd-card';\n}\n","<ng-content select=\"doku-card-cover\"></ng-content>\n<ng-content select=\"doku-card-header\"></ng-content>\n<ng-content select=\"doku-card-body\"></ng-content>\n<ng-content select=\"doku-card-footer\"></ng-content>\n<ng-content select=\"doku-card-section\"></ng-content>\n<ng-content></ng-content>\n","import { NgModule } from '@angular/core';\nimport { DokuCardBody } from './card-body.component';\nimport { DokuCardCover } from './card-cover.component';\nimport { DokuCardFooter } from './card-footer.component';\nimport { DokuCardHeader } from './card-header.component';\nimport { DokuCardSection } from './card-section.component';\nimport { DokuCardSubtitle } from './card-subtitle.component';\nimport { DokuCardTitle } from './card-title.component';\nimport { DokuCard } from './card.component';\n\n@NgModule({\n imports: [\n DokuCard,\n DokuCardHeader,\n DokuCardFooter,\n DokuCardTitle,\n DokuCardSubtitle,\n DokuCardBody,\n DokuCardCover,\n DokuCardSection,\n ],\n exports: [\n DokuCard,\n DokuCardHeader,\n DokuCardFooter,\n DokuCardTitle,\n DokuCardSubtitle,\n DokuCardBody,\n DokuCardCover,\n DokuCardSection,\n ],\n})\nexport class DokuCardModule {}\n","import { CommonModule, NgClass } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, HostBinding, ViewEncapsulation } from '@angular/core';\n\n@Component({\n selector: 'doku-checkbox-sub-label',\n exportAs: 'dokuCheckboxSubLabel',\n standalone: true,\n imports: [CommonModule],\n template: `<ng-content></ng-content>`,\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DokuCheckboxSubLabel {\n @HostBinding('class')\n protected readonly classes: NgClass['ngClass'] = `d-checkbox-sub-label`;\n}\n","import { CommonModule, NgClass } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n EventEmitter,\n HostBinding,\n Input,\n OnDestroy,\n OnInit,\n Optional,\n Output,\n Self,\n ViewEncapsulation,\n} from '@angular/core';\nimport { ControlValueAccessor, NgControl } from '@angular/forms';\nimport { ReplaySubject, takeUntil } from 'rxjs';\n\nlet uniqueId = 1;\n\n@Component({\n selector: 'doku-checkbox',\n exportAs: 'dokuCheckbox',\n standalone: true,\n imports: [CommonModule],\n templateUrl: './checkbox.component.html',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DokuCheckbox implements ControlValueAccessor, OnDestroy, OnInit {\n /**\n * Unique id of the checkbox. By default, it's auto-generated.\n * @default `d-checkbox-[uniqueId]`\n */\n @Input() id = `d-checkbox-${uniqueId++}`;\n\n /**\n * Whether the checkbox is disabled.\n *\n * If using reactive forms, the value will be replaced.\n * Use form control's method to disable the Checkbox.\n *\n * @default false\n */\n @HostBinding('class.d-checkbox-disabled')\n @Input()\n disabled = false;\n\n /**\n * Whether the checkbox is checked.\n *\n * If using reactive forms or template-drive forms, the value will be replaced.\n *\n * @default false\n */\n @HostBinding('class.d-checkbox-checked')\n @Input()\n checked = false;\n\n /**\n * The size of the checkbox.\n * @default 'medium'\n */\n @Input() size: 'small' | 'medium' = 'medium';\n\n /**\n * An event emitted when checked is changed.\n */\n @Output() checkedChange = new EventEmitter<boolean>();\n\n private destroy$ = new ReplaySubject();\n\n constructor(private cdr: ChangeDetectorRef, @Optional() @Self() private ngControl: NgControl) {\n if (this.ngControl) {\n this.ngControl.valueAccessor = this;\n }\n }\n\n @HostBinding('class')\n protected get classes(): NgClass['ngClass'] {\n return [`d-checkbox`, `d-checkbox-${this.size}`];\n }\n\n ngOnInit(): void {\n this.checkedChange.pipe(takeUntil(this.destroy$)).subscribe(() => {\n this.onChange?.(this.checked);\n this.onTouched?