\n \n \n
\n\n\n
\n\n\n \n
\n\n\n \n
\n","import { InjectionToken } from '@angular/core';\n\nexport const DOKU_FORM_FIELD_ACCESSOR = new InjectionToken('DOKU_FORM_FIELD_ACCESSOR');\n","import { CommonModule } from '@angular/common';\nimport {\n AfterContentInit,\n AfterViewInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ContentChild,\n ContentChildren,\n ElementRef,\n HostBinding,\n Input,\n OnChanges,\n OnDestroy,\n QueryList,\n SimpleChanges,\n ViewChild,\n ViewEncapsulation,\n} from '@angular/core';\nimport { ReplaySubject, filter, fromEvent, takeUntil } from 'rxjs';\nimport { DokuFieldError } from './field-helpers/field-error.component';\nimport { DokuFieldHint } from './field-helpers/field-hint.component';\nimport { DokuFieldSuccess } from './field-helpers/field-success.component';\nimport {\n DokuFormFieldAccessor,\n DokuFormFieldAccessorValidateState,\n DokuFormFieldAccessorValidateValue,\n DokuFormFieldOptions,\n} from './form-field-accessor';\nimport { DOKU_FORM_FIELD_ACCESSOR } from './token';\n\n@Component({\n selector: 'doku-form-field',\n exportAs: 'dokuFormField',\n standalone: true,\n imports: [CommonModule],\n templateUrl: './form-field.component.html',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DokuFormField implements AfterContentInit, AfterViewInit, OnDestroy, OnChanges {\n /**\n * Whether to show the success behavior when the validation is valid.\n * @default false\n */\n @HostBinding('class.d-field-show-success')\n @Input()\n showSuccessBehavior = false;\n\n /**\n * Override built-in error state handler.\n * @default undefined\n */\n @Input() isErrorState?: boolean;\n\n /**\n * Override built-in success state handler.\n */\n @Input() isSuccessState?: boolean;\n\n @HostBinding('class')\n protected readonly classes = 'd-form-field';\n\n protected fieldOptions?: DokuFormFieldOptions;\n\n protected hasFieldHint = false;\n protected hasFieldError = false;\n protected hasFieldSuccess = false;\n protected get shouldShowFieldHelper(): boolean {\n if (this.hasFieldSuccess && this.showSuccessBehavior && this.isSuccess) return this.isSuccess;\n if (this.hasFieldError && this.isError) return this.isError;\n if (this.hasFieldHint) return true;\n return false;\n }\n\n @HostBinding('class.d-form-field-error')\n protected get isError(): boolean {\n return this._isError;\n }\n protected set isError(value: boolean) {\n this._isError = value;\n this.cdRef.markForCheck();\n }\n private _isError = false;\n\n @HostBinding('class.d-form-field-success')\n protected get isSuccess(): boolean {\n return this._isSuccess;\n }\n protected set isSuccess(value: boolean) {\n this._isSuccess = value;\n this.cdRef.markForCheck();\n }\n private _isSuccess = false;\n\n private _isFocus = false;\n protected set isFocus(value: boolean) {\n this._isFocus = this.isDisabled || this.isReadonly ? false : value;\n }\n protected get isFocus(): boolean {\n return this._isFocus;\n }\n\n @HostBinding('class.d-field-disabled')\n protected isDisabled = false;\n\n @HostBinding('class.d-field-readonly')\n protected isReadonly = false;\n\n @HostBinding('class.d-field-textarea')\n protected isTextarea = false;\n\n @ContentChild(DOKU_FORM_FIELD_ACCESSOR) private formFieldAccessor?: DokuFormFieldAccessor;\n\n @ContentChildren(DokuFieldHint, { descendants: false })\n private fieldHint?: QueryList\n \n \n \n \n \n \n
\n","import { NgModule } from '@angular/core';\nimport { DokuFieldPrefix } from './directives/field-prefix.directive';\nimport { DokuFieldSuffix } from './directives/field-suffix.directive';\nimport { DokuFieldError } from './field-helpers/field-error.component';\nimport { DokuFieldHint } from './field-helpers/field-hint.component';\nimport { DokuFieldSuccess } from './field-helpers/field-success.component';\nimport { DokuFieldLabel } from './field-label.component';\nimport { DokuFormField } from './form-field.component';\n\n@NgModule({\n imports: [\n DokuFormField,\n DokuFieldLabel,\n DokuFieldHint,\n DokuFieldError,\n DokuFieldSuccess,\n DokuFieldSuffix,\n DokuFieldPrefix,\n ],\n exports: [\n DokuFormField,\n DokuFieldLabel,\n DokuFieldHint,\n DokuFieldError,\n DokuFieldSuccess,\n DokuFieldSuffix,\n DokuFieldPrefix,\n ],\n})\nexport class DokuFormFieldModule {}\n","import { NgClass } from '@angular/common';\nimport {\n AfterViewInit,\n Directive,\n ElementRef,\n HostBinding,\n Input,\n OnDestroy,\n Optional,\n Self,\n} from '@angular/core';\nimport { NgControl } from '@angular/forms';\nimport { ReplaySubject, delay, distinctUntilChanged, map, startWith, takeUntil } from 'rxjs';\nimport {\n DOKU_FORM_FIELD_ACCESSOR,\n DokuFormFieldAccessor,\n DokuFormFieldAccessorValidateState,\n DokuFormFieldAccessorValidateValue,\n} from '../form-field';\n\n@Directive({\n selector: 'input[doku-input], textarea[doku-input]',\n exportAs: 'dokuInput',\n standalone: true,\n providers: [\n {\n provide: DOKU_FORM_FIELD_ACCESSOR,\n useExisting: DokuInput,\n multi: true,\n },\n ],\n})\nexport class DokuInput implements DokuFormFieldAccessor, AfterViewInit, OnDestroy {\n @HostBinding('class')\n protected readonly classes: NgClass['ngClass'] = 'd-field-input';\n\n @Input()\n get disabled(): boolean {\n return this._disabled;\n }\n set disabled(value: boolean | string) {\n this._disabled = value !== false;\n this.notifyState$.next('disabled');\n }\n private _disabled = false;\n\n @Input()\n get readonly(): boolean {\n return this._readonly;\n }\n set readonly(value: boolean | string) {\n this._readonly = value !== false;\n this.notifyState$.next('readonly');\n }\n private _readonly = false;\n\n private notifyState$ = new ReplaySubject<'disabled' | 'readonly'>();\n private destroy$ = new ReplaySubject();\n\n constructor(private elementRef: ElementRef, @Optional() @Self() private ngControl?: NgControl) {}\n\n ngAfterViewInit(): void {\n this.elementRef.nativeElement.onfocus = () => {\n this.onFocus?.();\n };\n\n this.elementRef.nativeElement.onblur = () => {\n this.onBlur?.();\n };\n\n this.ngControl?.statusChanges\n ?.pipe(startWith(this.ngControl.status), distinctUntilChanged(), takeUntil(this.destroy$))\n .subscribe(() => {\n this.disabled = !!this.ngControl?.disabled;\n });\n\n this.ngControl?.statusChanges\n ?.pipe(\n map((status) => ({\n status: status,\n state: {\n pristine: this.ngControl?.control?.pristine,\n untouched: this.ngControl?.control?.untouched,\n } as DokuFormFieldAccessorValidateState,\n })),\n distinctUntilChanged((prev, curr) => JSON.stringify(prev) === JSON.stringify(curr)),\n delay(0),\n takeUntil(this.destroy$)\n )\n .subscribe(({ status, state }) => {\n if (status === 'VALID') {\n this.onValidate?.('valid', state);\n } else if (status === 'INVALID') {\n this.onValidate?.('invalid', state);\n } else {\n this.onValidate?.(undefined, state);\n }\n });\n\n this.notifyState$\n .pipe(\n startWith({ disabled: this.disabled, readonly: this.readonly }),\n map(() => ({ disabled: this.disabled, readonly: this.readonly })),\n distinctUntilChanged((prev, current) => JSON.stringify(prev) === JSON.stringify(current)),\n delay(0),\n takeUntil(this.destroy$)\n )\n .subscribe(({ disabled, readonly }) => {\n this.onDisable?.(disabled);\n this.onReadonly?.(readonly);\n // Handle element native attributes\n const el = this.elementRef.nativeElement as HTMLInputElement;\n disabled ? el.setAttribute('disabled', '') : el.removeAttribute('disabled');\n readonly ? el.setAttribute('readonly', '') : el.removeAttribute('readonly');\n });\n }\n\n ngOnDestroy(): void {\n this.destroy$.next(1);\n this.destroy$.complete();\n }\n\n onBlur?: (() => void) | undefined;\n onFocus?: (() => void) | undefined;\n onDisable?: ((value: boolean) => void) | undefined;\n onReadonly?: ((value: boolean) => void) | undefined;\n onValidate?:\n | ((\n value?: DokuFormFieldAccessorValidateValue | undefined,\n state?: DokuFormFieldAccessorValidateState\n ) => void)\n | undefined;\n\n registerOnFocus(fn: () => void): void {\n this.onFocus = fn;\n }\n\n registerOnBlur(fn: () => void): void {\n this.onBlur = fn;\n }\n\n registerOnDisable(fn: (value: boolean) => void): void {\n this.onDisable = fn;\n }\n\n registerOnReadonly(fn: (value: boolean) => void): void {\n this.onReadonly = fn;\n }\n\n registerOnValidate(fn: (value?: DokuFormFieldAccessorValidateValue | undefined) => void): void {\n this.onValidate = fn;\n }\n\n onClickWrapperElement(): void {\n this.elementRef.nativeElement.focus();\n }\n}\n","import { NgModule } from '@angular/core';\nimport { DokuInput } from './input.directive';\n\n@NgModule({\n imports: [DokuInput],\n exports: [DokuInput],\n})\nexport class DokuInputModule {}\n","import { CommonModule, NgClass } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n EventEmitter,\n Host,\n HostBinding,\n Input,\n OnChanges,\n OnDestroy,\n OnInit,\n Optional,\n Output,\n Self,\n SimpleChanges,\n ViewEncapsulation,\n} from '@angular/core';\nimport { ControlValueAccessor, FormsModule, NgControl, ReactiveFormsModule } from '@angular/forms';\nimport { BehaviorSubject, Subject, delay, distinctUntilChanged, skip, takeUntil } from 'rxjs';\nimport {\n DOKU_FORM_FIELD_ACCESSOR,\n DokuFormField,\n DokuFormFieldAccessor,\n DokuFormFieldAccessorValidateValue,\n DokuFormFieldModule,\n DokuFormFieldOptions,\n} from '../form-field';\nimport { DokuInput } from '../input';\n\n@Component({\n selector: 'doku-color-picker',\n exportAs: 'dokuColorPicker',\n standalone: true,\n imports: [CommonModule, DokuFormFieldModule, DokuInput, ReactiveFormsModule, FormsModule],\n templateUrl: './color-picker.component.html',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [{ provide: DOKU_FORM_FIELD_ACCESSOR, useExisting: DokuColorPicker }],\n})\nexport class DokuColorPicker\n implements DokuFormFieldAccessor, ControlValueAccessor, OnInit, OnDestroy, OnChanges\n{\n /**\n * Whether to disable the color picker.\n * @default false\n */\n @Input() disabled = false;\n\n /**\n * Whether color picker is readonly.\n * @default false\n */\n @Input() readonly = false;\n\n /**\n * Value of the color picker in hexadecimal format.\n * @default ''\n */\n @Input()\n get value(): string {\n return this._value || '';\n }\n set value(hexColor: string | null | undefined) {\n this._value = hexColor || '';\n this.value$.next(this._value);\n }\n private _value = '';\n\n /**\n * An event emitted when value changes.\n */\n @Output() valueChange = new EventEmitter\n \n \n\n \n \n \n \n \n\n \n \n \n\n
\n\n\n {{ placeholder || \" \" }} \n
\n\n \n {{ item[bindLabel] }} \n \n \n
\n \n
\n \n {{ item[bindLabel] }}
\n \n
\n\n\n
\n\n \n\n\n\n \n \n
\n\n \n \n \n \n \n \n \n \n \n \n \n
\n \n {{ headerText }}\n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n {{ label }}\n
\n \n
\n \n
\n \n \n {{ date.day | date : \"d\" }} \n
\n \n
\n\n
\n\n
\n","import { NgModule } from '@angular/core';\nimport { DokuTimePicker } from './time-picker.component';\n\n@NgModule({\n imports: [DokuTimePicker],\n exports: [DokuTimePicker],\n})\nexport class DokuTimePickerModule {}\n","import { CommonModule } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n Inject,\n Input,\n LOCALE_ID,\n Output,\n ViewEncapsulation,\n} from '@angular/core';\nimport { DokuFormFieldModule } from '../../../form-field';\nimport { DokuTimePickerModule } from '../../../time-picker';\n\n@Component({\n selector: 'doku-time-picker-common',\n exportAs: 'dokuTimePickerCommon',\n standalone: true,\n imports: [CommonModule, DokuFormFieldModule, DokuTimePickerModule],\n templateUrl: './time-picker.component.html',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DokuTimePickerCommon {\n @Input() disabled = false;\n\n @Input()\n get value(): string {\n return this._value;\n }\n set value(val: string | Date | null) {\n this._value = this.normalizeTime(val);\n }\n private _value = '';\n\n @Input()\n get minTime(): string {\n return this._minTime;\n }\n set minTime(val: string | Date | null) {\n this._minTime = this.normalizeTime(val);\n }\n private _minTime = '';\n\n @Input()\n get maxTime(): string {\n return this._maxTime;\n }\n set maxTime(val: string | Date | null) {\n this._maxTime = this.normalizeTime(val);\n }\n private _maxTime = '';\n\n @Input() labelSelectTime?: string;\n\n @Output() timeChange = new EventEmitter\n ![]()
\n
\n \n
\n\n\n {{ title }}\n {{ loading ? loadingText : subtitle }}\n
\n \n
\n","import { CommonModule, NgClass } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, HostBinding, ViewEncapsulation } from '@angular/core';\n\n@Component({\n selector: 'doku-page-description',\n exportAs: 'dokuPageDescription',\n standalone: true,\n imports: [CommonModule],\n templateUrl: './page-description.component.html',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DokuPageDescription {\n @HostBinding('class')\n protected readonly classes: NgClass['ngClass'] = ['d-page-description', 'd-text-body-m'];\n}\n","\n
\n","import { CommonModule, NgClass } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n HostBinding,\n ViewEncapsulation,\n} from '@angular/core';\nimport { DokuTypographyModule } from '../../../typography';\n\n@Component({\n selector: 'doku-page-title',\n exportAs: 'dokuPageTitle',\n standalone: true,\n imports: [CommonModule, DokuTypographyModule],\n templateUrl: './page-title.component.html',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DokuPageTitle {\n @HostBinding('class')\n protected readonly classes: NgClass['ngClass'] = ['d-page-title'];\n\n constructor(private elementRef: ElementRef) {}\n\n @HostBinding('class.d-page-title-icon-left')\n protected get hasIconLeft(): boolean {\n return !!(this.elementRef.nativeElement as HTMLElement).querySelector('[icon-left]');\n }\n}\n","\n
\n \n \n \n
\n \n \n
\n\n \n \n \n {{ page }}\n
\n \n \n\n ...
\n = lastPage\" (click)=\"goToNextPage()\">\n
\n\n\n\n
\n\n
\n","import { CommonModule } from '@angular/common';\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ElementRef,\n Inject,\n OnDestroy,\n ViewChild,\n ViewEncapsulation,\n} from '@angular/core';\nimport { Subscription, delay, startWith } from 'rxjs';\nimport { DokuTypographyModule } from '../../typography';\nimport { DokuPaginationContainer } from './pagination-container.component';\n\n@Component({\n selector: 'doku-pagination-info',\n exportAs: 'dokuPaginationInfo',\n standalone: true,\n imports: [CommonModule, DokuTypographyModule],\n templateUrl: `./pagination-info.component.html`,\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DokuPaginationInfo implements AfterViewInit, OnDestroy {\n /**\n * Return total data of the items.\n */\n get totalData(): number {\n return this._totalData;\n }\n\n /**\n * Return item start number based on active page.\n */\n get from(): number {\n return this._from;\n }\n\n /**\n * Return item end number based on active page.\n */\n get to(): number {\n return this._to;\n }\n\n private _totalData = 0;\n private _from = 0;\n private _to = 0;\n\n @ViewChild('customInfo') private customInfo!: ElementRef;\n\n private pageChangeListener?: Subscription;\n\n constructor(\n private cdr: ChangeDetectorRef,\n @Inject(DokuPaginationContainer) private container?: DokuPaginationContainer\n ) {}\n\n protected get isCustomInfo(): boolean {\n return !!(this.customInfo?.nativeElement as HTMLElement)?.hasChildNodes();\n }\n\n private get itemsPerPage(): number {\n return this.container?.['pagination']?.itemsPerPage || 0;\n }\n\n private get activePage(): number {\n return this.container?.['pagination']?.activePage || 0;\n }\n\n ngAfterViewInit(): void {\n this.pageChangeListener = this.container?.['pagination']?.['triggerChange']\n .pipe(startWith(0), delay(0))\n .subscribe(() => {\n this.setValues();\n this.cdr.markForCheck();\n });\n }\n\n ngOnDestroy(): void {\n this.pageChangeListener?.unsubscribe();\n }\n\n private setValues() {\n this._totalData = this.container?.['pagination']?.totalData || 0;\n\n this._from = this.activePage * this.itemsPerPage - (this.itemsPerPage - 1);\n if (this._totalData <= 0) this._from = 0;\n\n this._to = this.activePage * this.itemsPerPage;\n if (this._to > this._totalData) this._to = this._totalData;\n }\n}\n","\n \n Showing {{ from }} - {{ to }} from {{ totalData }} entries\n \n
\n","import { CommonModule } from '@angular/common';\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n Inject,\n Input,\n OnDestroy,\n OnInit,\n ViewEncapsulation,\n} from '@angular/core';\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\nimport { ReplaySubject, distinctUntilChanged, map, skip, takeUntil, startWith } from 'rxjs';\nimport { DokuFormFieldModule } from '../../form-field';\nimport { DokuSelectModule } from '../../select';\nimport { DokuPaginationContainer } from './pagination-container.component';\n\n@Component({\n selector: 'doku-pagination-per-page',\n exportAs: 'dokuPaginationPerPage',\n standalone: true,\n imports: [CommonModule, DokuFormFieldModule, DokuSelectModule, ReactiveFormsModule],\n templateUrl: './pagination-per-page.component.html',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DokuPaginationPerPage implements OnInit, OnDestroy, AfterViewInit {\n readonly defaultItemsPerPage = 5;\n\n /**\n * Items per page options.\n * @default [5,10,15,20,25]\n */\n @Input() options: number[] = [5, 10, 15, 20, 25];\n\n /**\n * Label of the options.\n * @default 'items per page'\n */\n @Input() optionLabel = 'items per page';\n\n // The value can be a number or string because it passed to the select component\n // where the value will always be converted to string.\n protected itemsPerPage = new FormControl\n \n \n
\n","import { NgModule } from '@angular/core';\nimport { DokuPaginationContainer } from './integrations/pagination-container.component';\nimport { DokuPaginationInfo } from './integrations/pagination-info.component';\nimport { DokuPaginationPerPage } from './integrations/pagination-per-page.component';\nimport { DokuPagination } from './pagination.component';\n\n@NgModule({\n imports: [DokuPagination, DokuPaginationContainer, DokuPaginationInfo, DokuPaginationPerPage],\n exports: [DokuPagination, DokuPaginationContainer, DokuPaginationInfo, DokuPaginationPerPage],\n})\nexport class DokuPaginationModule {}\n","import { CommonModule } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n HostBinding,\n InjectionToken,\n Input,\n ViewEncapsulation,\n forwardRef,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { DokuButton } from '../button';\n\nexport const DOKU_PILL_GROUP = new InjectionToken\n
\n\n
\n \n
\n \n
\n \n
\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, HostBinding, ViewEncapsulation } from '@angular/core';\n\n@Component({\n selector: 'doku-timeline-title',\n exportAs: 'dokuTimelineTitle',\n standalone: true,\n imports: [CommonModule],\n templateUrl: './timeline-title.component.html',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DokuTimelineTitle {\n @HostBinding('class')\n protected readonly classes = 'd-timeline-title';\n}\n","\n
\n - \n
\n \n
\n","import { NgModule } from '@angular/core';\nimport { DokuToggleDescription } from './toggle-description.component';\nimport { DokuToggle } from './toggle.component';\n\n@NgModule({\n imports: [DokuToggle, DokuToggleDescription],\n exports: [DokuToggle, DokuToggleDescription],\n})\nexport class DokuToggleModule {}\n","import { DOCUMENT } from '@angular/common';\nimport {\n ApplicationRef,\n Directive,\n ElementRef,\n EmbeddedViewRef,\n Inject,\n Input,\n NgZone,\n OnDestroy,\n OnInit,\n Renderer2,\n TemplateRef,\n} from '@angular/core';\nimport { arrow, autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';\nimport { ReplaySubject, delay, fromEvent, iif, merge, of, switchMap, takeUntil } from 'rxjs';\nimport { DokuTooltipPlacement } from './tooltip.interface';\n\n@Directive({\n selector: '[doku-tooltip]',\n exportAs: 'dokuTooltip',\n standalone: true,\n})\nexport class DokuTooltip implements OnInit, OnDestroy {\n /**\n * Content of the tooltip.\n * It can be a string or a template for more customization.\n *\n * @default ''\n */\n @Input('doku-tooltip') content: string | TemplateRef