@doku-dev/doku-fragment
Version:
A new Angular UI library that moving away from Bootstrap and built from scratch.
9,827 lines • 567 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, Input, Host, HostListener, NgModule, EventEmitter, Output, Directive, Optional, Self, InjectionToken, ContentChild, ContentChildren, ViewChild, Inject, createComponent, Injector, LOCALE_ID, forwardRef, TemplateRef, ElementRef, Injectable, inject } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule, DOCUMENT, DatePipe } from '@angular/common';
import { ReplaySubject, BehaviorSubject, takeUntil, fromEvent, filter, startWith, distinctUntilChanged, map, delay, Subject, skip, iif, of, combineLatest, merge, tap, switchMap, pairwise, shareReplay } from 'rxjs';
import * as i1$1 from '@angular/forms';
import { ReactiveFormsModule, FormsModule, FormControl, NG_VALUE_ACCESSOR } from '@angular/forms';
import { flip, shift, computePosition, autoUpdate, offset, arrow } from '@floating-ui/dom';
import { __rest } from 'tslib';
import * as i2 from '@angular/router';
import { NavigationStart } from '@angular/router';
class DokuAccordionBody {
constructor() {
this.classes = 'd-accordion-body d-text-body-l';
}
}
DokuAccordionBody.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuAccordionBody, deps: [], target: i0.ɵɵFactoryTarget.Component });
DokuAccordionBody.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuAccordionBody, isStandalone: true, selector: "doku-accordion-body", host: { properties: { "class": "this.classes" } }, exportAs: ["dokuAccordionBody"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuAccordionBody, decorators: [{
type: Component,
args: [{
selector: 'doku-accordion-body',
exportAs: 'dokuAccordionBody',
standalone: true,
imports: [CommonModule],
template: '<ng-content></ng-content>',
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}], propDecorators: { classes: [{
type: HostBinding,
args: ['class']
}] } });
var SelectionDispatcher;
(function (SelectionDispatcher) {
SelectionDispatcher["ExpandAll"] = "d-accordion-action-expand-all";
SelectionDispatcher["CollapseAll"] = "d-accordion-action-collapse-all";
})(SelectionDispatcher || (SelectionDispatcher = {}));
class DokuAccordion {
constructor() {
/**
* Whether the accordion should allow multiple expanded items simultaneously.
* @default false
*/
this.multi = false;
this.classes = 'd-accordion';
this.destroy$ = new ReplaySubject(1);
/**
* Use to dispatch active accordion id on the accordion items.
* Value can be other than active accordion id for specific use cases.
*
* Specific values:
* - "d-accordion-action-expand-all"
* - "d-accordion-action-collapse-all"
*/
this.selectionDispatcher$ = new BehaviorSubject(null);
/**
* Use to listen active accordion id changes on the accordion items.
* But the value can be other than active accordion id.
* See {@link selectionDispatcher$} for the list of specific values.
*/
this.selectionListener$ = this.selectionDispatcher$.pipe(takeUntil(this.destroy$));
}
ngOnDestroy() {
this.destroy$.next(1);
this.destroy$.complete();
}
/**
* Expand all accordion items when `multi` is true.
* If `multi` is false and all items are collapsed, it will open the first one.
* Otherwise, it will keep the expanded one.
*
* Disabled accordion items will not affected.
*/
expandAll() {
this.selectionDispatcher$.next(SelectionDispatcher.ExpandAll);
}
/**
* Collapse all accordion items except for disabled items.
*/
collapseAll() {
this.selectionDispatcher$.next(SelectionDispatcher.CollapseAll);
}
}
DokuAccordion.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component });
DokuAccordion.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuAccordion, isStandalone: true, selector: "doku-accordion", inputs: { multi: "multi" }, host: { properties: { "class": "this.classes" } }, exportAs: ["dokuAccordion"], ngImport: i0, template: '<ng-content select="doku-accordion-item"></ng-content>', isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuAccordion, decorators: [{
type: Component,
args: [{
selector: 'doku-accordion',
exportAs: 'dokuAccordion',
standalone: true,
imports: [CommonModule],
template: '<ng-content select="doku-accordion-item"></ng-content>',
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}], propDecorators: { multi: [{
type: Input
}], classes: [{
type: HostBinding,
args: ['class']
}] } });
let uniqueId$1 = 0;
class DokuAccordionItem {
/**
* Whether the accordion item should be expanded.
*
* By default, the accordion `multi` is false,
* it will collapse other expanded items.
*
* Disabled accordion item will not expanded.
*
* @default false
*/
get expanded() {
return this._expanded;
}
set expanded(value) {
if (this.disabled)
return;
this._expanded = value;
this.accordion['selectionDispatcher$'].next(this.accordionId);
this.cdRef.markForCheck();
}
constructor(accordion, cdRef, elementRef) {
this.accordion = accordion;
this.cdRef = cdRef;
this.elementRef = elementRef;
this.classes = 'd-accordion-item';
/**
* Autogenerate unique id of the accordion item.
*/
this.accordionId = `d-accordion-id-${uniqueId$1++}`;
this._expanded = false;
/**
* Whether the accordion item is disabled.
* @default false
*/
this.disabled = false;
this.accordion['selectionListener$'].subscribe((selectionAccordion) => {
this.handleExpandAtATime(selectionAccordion);
this.handleExpandAll(selectionAccordion);
this.handleCollapseAll(selectionAccordion);
});
}
/**
* Toggle (expand/collapse) the accordion item.
* Do nothing if `disabled` is true.
*/
toggle() {
this.expanded = !this.expanded;
}
/**
* Collapse the accordion item.
* Do nothing if `disabled` is true.
*/
collapse() {
this.expanded = false;
}
/**
* Expand the accordion item.
* Do nothing if `disabled` is true.
*/
expand() {
this.expanded = true;
}
handleExpandAtATime(activeAccordionId) {
if (!activeAccordionId)
return;
if (Object.values(SelectionDispatcher).includes(activeAccordionId)) {
return;
}
if (!this.accordion.multi && activeAccordionId !== this.accordionId) {
this._expanded = false;
this.cdRef.markForCheck();
}
}
/**
* See detail on {@link DokuAccordion.expandAll}
*/
handleExpandAll(selectionAccordion) {
var _a, _b, _c;
if (selectionAccordion !== SelectionDispatcher.ExpandAll)
return;
if (this.disabled)
return;
if (this.accordion.multi) {
this._expanded = true;
this.cdRef.markForCheck();
}
// When multi expanded is not allowed, expand the first item if no one item expanded.
if (!this.accordion.multi) {
const accordionItemElement = this.elementRef.nativeElement;
// Check if has expanded item by siblings class name.
const hasExpandedItem = !!((_a = accordionItemElement.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector('doku-accordion-item.d-accordion-expanded'));
if (hasExpandedItem)
return;
// Check if this accordion item is the first item by checking previous element.
const isFirstChild = ((_c = (_b = accordionItemElement.previousSibling) === null || _b === void 0 ? void 0 : _b.nodeName) === null || _c === void 0 ? void 0 : _c.toLowerCase()) !== 'doku-accordion-item';
if (isFirstChild) {
this._expanded = true;
this.cdRef.markForCheck();
}
}
}
/**
* See detail on {@link DokuAccordion.collapseAll}
*/
handleCollapseAll(selectionAccordion) {
if (selectionAccordion !== SelectionDispatcher.CollapseAll)
return;
if (this.disabled)
return;
if (this._expanded) {
this._expanded = false;
this.cdRef.markForCheck();
}
}
}
DokuAccordionItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuAccordionItem, deps: [{ token: DokuAccordion, host: true }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
DokuAccordionItem.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuAccordionItem, isStandalone: true, selector: "doku-accordion-item", inputs: { accordionId: "accordionId", expanded: "expanded", disabled: "disabled" }, host: { properties: { "class": "this.classes", "class.d-accordion-expanded": "this.expanded", "class.d-accordion-disabled": "this.disabled" } }, exportAs: ["dokuAccordionItem"], ngImport: i0, template: `<ng-content select="doku-accordion-header"></ng-content>
<ng-content select="doku-accordion-body"></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuAccordionItem, decorators: [{
type: Component,
args: [{
selector: 'doku-accordion-item',
exportAs: 'dokuAccordionItem',
standalone: true,
imports: [CommonModule],
template: `<ng-content select="doku-accordion-header"></ng-content>
<ng-content select="doku-accordion-body"></ng-content>`,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}], ctorParameters: function () {
return [{ type: DokuAccordion, decorators: [{
type: Host
}] }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }];
}, propDecorators: { classes: [{
type: HostBinding,
args: ['class']
}], accordionId: [{
type: Input
}], expanded: [{
type: HostBinding,
args: ['class.d-accordion-expanded']
}, {
type: Input
}], disabled: [{
type: HostBinding,
args: ['class.d-accordion-disabled']
}, {
type: Input
}] } });
class DokuAccordionHeader {
constructor(item) {
this.item = item;
this.classes = 'd-accordion-header';
}
/**
* Toggle the accordion item.
*/
toggle() {
this.item.toggle();
}
}
DokuAccordionHeader.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuAccordionHeader, deps: [{ token: DokuAccordionItem, host: true }], target: i0.ɵɵFactoryTarget.Component });
DokuAccordionHeader.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuAccordionHeader, isStandalone: true, selector: "doku-accordion-header", host: { listeners: { "click": "toggle()" }, properties: { "class": "this.classes" } }, exportAs: ["dokuAccordionHeader"], ngImport: i0, template: "<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", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuAccordionHeader, decorators: [{
type: Component,
args: [{ selector: 'doku-accordion-header', exportAs: 'dokuAccordionHeader', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<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" }]
}], ctorParameters: function () {
return [{ type: DokuAccordionItem, decorators: [{
type: Host
}] }];
}, propDecorators: { classes: [{
type: HostBinding,
args: ['class']
}], toggle: [{
type: HostListener,
args: ['click']
}] } });
class DokuAccordionTitle {
constructor() {
this.classes = 'd-accordion-title';
}
}
DokuAccordionTitle.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuAccordionTitle, deps: [], target: i0.ɵɵFactoryTarget.Component });
DokuAccordionTitle.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuAccordionTitle, isStandalone: true, selector: "doku-accordion-title", host: { properties: { "class": "this.classes" } }, exportAs: ["dokuAccordionTitle"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuAccordionTitle, decorators: [{
type: Component,
args: [{
selector: 'doku-accordion-title',
exportAs: 'dokuAccordionTitle',
standalone: true,
imports: [CommonModule],
template: '<ng-content></ng-content>',
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}], propDecorators: { classes: [{
type: HostBinding,
args: ['class']
}] } });
class DokuAccordionModule {
}
DokuAccordionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuAccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
DokuAccordionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: DokuAccordionModule, imports: [DokuAccordion,
DokuAccordionItem,
DokuAccordionHeader,
DokuAccordionTitle,
DokuAccordionBody], exports: [DokuAccordion,
DokuAccordionItem,
DokuAccordionHeader,
DokuAccordionTitle,
DokuAccordionBody] });
DokuAccordionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuAccordionModule, imports: [DokuAccordion,
DokuAccordionItem,
DokuAccordionHeader,
DokuAccordionTitle,
DokuAccordionBody] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuAccordionModule, decorators: [{
type: NgModule,
args: [{
imports: [
DokuAccordion,
DokuAccordionItem,
DokuAccordionHeader,
DokuAccordionTitle,
DokuAccordionBody,
],
exports: [
DokuAccordion,
DokuAccordionItem,
DokuAccordionHeader,
DokuAccordionTitle,
DokuAccordionBody,
],
}]
}] });
class DokuAlert {
constructor(elementRef) {
this.elementRef = elementRef;
this.hostClasses = ['d-alert-host'];
/**
* @default 'neutral'
*/
this.state = 'neutral';
/**
* Whether alert can be dismissed.
* @default false
*/
this.dismissible = false;
/**
* Whether alert should have full width.
*/
this.fullWidth = false;
this.dismissed = new EventEmitter();
}
get classes() {
return 'd-alert-state-' + this.state;
}
dismiss() {
if (!this.dismissible)
return;
this.dismissed.emit();
this.elementRef.nativeElement.remove();
}
}
DokuAlert.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuAlert, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
DokuAlert.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuAlert, isStandalone: true, selector: "doku-alert", inputs: { state: "state", dismissible: "dismissible", fullWidth: "fullWidth" }, outputs: { dismissed: "dismissed" }, host: { properties: { "class": "this.hostClasses", "class.d-alert-full-width": "this.fullWidth" } }, exportAs: ["dokuAlert"], ngImport: i0, template: "<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", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuAlert, decorators: [{
type: Component,
args: [{ selector: 'doku-alert', exportAs: 'dokuAlert', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<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" }]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { hostClasses: [{
type: HostBinding,
args: ['class']
}], state: [{
type: Input
}], dismissible: [{
type: Input
}], fullWidth: [{
type: HostBinding,
args: ['class.d-alert-full-width']
}, {
type: Input
}], dismissed: [{
type: Output
}] } });
class DokuAlertModule {
}
DokuAlertModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
DokuAlertModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: DokuAlertModule, imports: [DokuAlert], exports: [DokuAlert] });
DokuAlertModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuAlertModule, imports: [DokuAlert] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuAlertModule, decorators: [{
type: NgModule,
args: [{
imports: [DokuAlert],
exports: [DokuAlert],
}]
}] });
class DokuAnchorLink {
constructor() {
this.classes = ['d-anchor-link'];
}
}
DokuAnchorLink.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuAnchorLink, deps: [], target: i0.ɵɵFactoryTarget.Directive });
DokuAnchorLink.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: DokuAnchorLink, isStandalone: true, selector: "[doku-anchor-link]", host: { properties: { "class": "this.classes" } }, exportAs: ["dokuAnchorLink"], ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuAnchorLink, decorators: [{
type: Directive,
args: [{
selector: '[doku-anchor-link]',
exportAs: 'dokuAnchorLink',
standalone: true,
}]
}], propDecorators: { classes: [{
type: HostBinding,
args: ['class']
}] } });
class DokuAnchorLinkModule {
}
DokuAnchorLinkModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuAnchorLinkModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
DokuAnchorLinkModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: DokuAnchorLinkModule, imports: [DokuAnchorLink], exports: [DokuAnchorLink] });
DokuAnchorLinkModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuAnchorLinkModule });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuAnchorLinkModule, decorators: [{
type: NgModule,
args: [{
imports: [DokuAnchorLink],
exports: [DokuAnchorLink],
}]
}] });
class DokuBadge {
constructor() {
/**
* The color of the badge. Default value is 'green'.
*/
this.color = 'green';
/**
* The variant of the badge. Default value is 'filled'.
*/
this.variant = 'filled';
}
get classes() {
return `d-badge-${this.variant} d-badge-${this.color} `;
}
}
DokuBadge.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
DokuBadge.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuBadge, isStandalone: true, selector: "doku-badge", inputs: { color: "color", variant: "variant" }, exportAs: ["dokuBadge"], ngImport: i0, template: "<div class=\"d-badge\" [ngClass]=\"classes\"><ng-content></ng-content></div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuBadge, decorators: [{
type: Component,
args: [{ selector: 'doku-badge', exportAs: 'dokuBadge', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"d-badge\" [ngClass]=\"classes\"><ng-content></ng-content></div>\n" }]
}], propDecorators: { color: [{
type: Input
}], variant: [{
type: Input
}] } });
class DokuBadgeModule {
}
DokuBadgeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
DokuBadgeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: DokuBadgeModule, imports: [DokuBadge], exports: [DokuBadge] });
DokuBadgeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuBadgeModule, imports: [DokuBadge] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuBadgeModule, decorators: [{
type: NgModule,
args: [{
imports: [DokuBadge],
exports: [DokuBadge],
}]
}] });
class DokuBreadcrumb {
constructor() {
this.items = [];
}
get hasBreadcrumb() {
var _a;
return !!((_a = this.items) === null || _a === void 0 ? void 0 : _a.length);
}
get totalBreadcrumbs() {
var _a;
return ((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) || 0;
}
}
DokuBreadcrumb.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuBreadcrumb, deps: [], target: i0.ɵɵFactoryTarget.Component });
DokuBreadcrumb.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuBreadcrumb, isStandalone: true, selector: "doku-breadcrumb", inputs: { items: "items" }, exportAs: ["dokuBreadcrumb"], ngImport: i0, template: "<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", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuBreadcrumb, decorators: [{
type: Component,
args: [{ selector: 'doku-breadcrumb', exportAs: 'dokuBreadcrumb', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<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" }]
}], propDecorators: { items: [{
type: Input
}] } });
class DokuBreadcrumbModule {
}
DokuBreadcrumbModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuBreadcrumbModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
DokuBreadcrumbModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: DokuBreadcrumbModule, imports: [DokuBreadcrumb], exports: [DokuBreadcrumb] });
DokuBreadcrumbModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuBreadcrumbModule, imports: [DokuBreadcrumb] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuBreadcrumbModule, decorators: [{
type: NgModule,
args: [{
imports: [DokuBreadcrumb],
exports: [DokuBreadcrumb],
}]
}] });
class DokuButton {
constructor(elementRef) {
this.elementRef = elementRef;
/**
* Variant of the button.
*
* @default `primary`
*/
this.variant = 'primary';
/**
* Size of the button.
*
* @default `medium`
*/
this.size = 'medium';
/**
* Whether button should be disabled.
*
* @default false
*/
this.disabled = false;
/**
* Whether button should be on loading state.
*
* If `true`, the button cannot be clicked.
*
* When `disabled` and `loading` are true, the `disabled` will take precedence.
*
* @default false
*/
this.loading = false;
}
get element() {
return this.elementRef.nativeElement;
}
get classes() {
return ['d-btn', `d-btn-${this.variant}`, `d-btn-${this.size}`];
}
/**
* Provide native `disabled` attribute to prevent button from being clicked.
*/
get disabledAttribute() {
return this.disabled || this.loading || null;
}
get isIconOnly() {
return Array.from(this.element.children).some((child) => child.hasAttribute('icon-only'));
}
onClick(e) {
if (this.disabled || this.loading) {
e.preventDefault();
e.stopImmediatePropagation();
}
}
}
DokuButton.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuButton, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
DokuButton.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuButton, isStandalone: true, selector: "button[doku-button], a[doku-button]", inputs: { variant: "variant", size: "size", disabled: "disabled", loading: "loading" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.d-btn-disabled": "this.disabled", "class.d-btn-loading": "this.loading", "class": "this.classes", "attr.disabled": "this.disabledAttribute", "class.d-btn-icon": "this.isIconOnly" } }, exportAs: ["dokuButton"], ngImport: i0, template: "<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", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuButton, decorators: [{
type: Component,
args: [{ selector: 'button[doku-button], a[doku-button]', exportAs: 'dokuButton', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<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" }]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { variant: [{
type: Input
}], size: [{
type: Input
}], disabled: [{
type: HostBinding,
args: ['class.d-btn-disabled']
}, {
type: Input
}], loading: [{
type: HostBinding,
args: ['class.d-btn-loading']
}, {
type: Input
}], classes: [{
type: HostBinding,
args: ['class']
}], disabledAttribute: [{
type: HostBinding,
args: ['attr.disabled']
}], isIconOnly: [{
type: HostBinding,
args: ['class.d-btn-icon']
}], onClick: [{
type: HostListener,
args: ['click', ['$event']]
}] } });
class DokuButtonModule {
}
DokuButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
DokuButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: DokuButtonModule, imports: [DokuButton], exports: [DokuButton] });
DokuButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuButtonModule, imports: [DokuButton] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuButtonModule, decorators: [{
type: NgModule,
args: [{
imports: [DokuButton],
exports: [DokuButton],
}]
}] });
class DokuCardBody {
constructor() {
this.classes = 'd-card-body';
}
}
DokuCardBody.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuCardBody, deps: [], target: i0.ɵɵFactoryTarget.Component });
DokuCardBody.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuCardBody, isStandalone: true, selector: "doku-card-body", host: { properties: { "class": "this.classes" } }, exportAs: ["dokuCardBody"], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuCardBody, decorators: [{
type: Component,
args: [{
selector: 'doku-card-body',
exportAs: 'dokuCardBody',
standalone: true,
imports: [CommonModule],
template: `<ng-content></ng-content>`,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}], propDecorators: { classes: [{
type: HostBinding,
args: ['class']
}] } });
class DokuCardCover {
constructor() {
this.classes = 'd-card-cover';
}
}
DokuCardCover.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuCardCover, deps: [], target: i0.ɵɵFactoryTarget.Component });
DokuCardCover.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuCardCover, isStandalone: true, selector: "doku-card-cover", host: { properties: { "class": "this.classes" } }, exportAs: ["dokuCardCover"], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuCardCover, decorators: [{
type: Component,
args: [{
selector: 'doku-card-cover',
exportAs: 'dokuCardCover',
standalone: true,
imports: [CommonModule],
template: `<ng-content></ng-content>`,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}], propDecorators: { classes: [{
type: HostBinding,
args: ['class']
}] } });
class DokuCardFooter {
constructor() {
this.classes = 'd-card-footer';
}
}
DokuCardFooter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuCardFooter, deps: [], target: i0.ɵɵFactoryTarget.Component });
DokuCardFooter.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuCardFooter, isStandalone: true, selector: "doku-card-footer", host: { properties: { "class": "this.classes" } }, exportAs: ["dokuCardFooter"], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuCardFooter, decorators: [{
type: Component,
args: [{
selector: 'doku-card-footer',
exportAs: 'dokuCardFooter',
standalone: true,
imports: [CommonModule],
template: `<ng-content></ng-content>`,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}], propDecorators: { classes: [{
type: HostBinding,
args: ['class']
}] } });
class DokuCardHeader {
constructor() {
/**
* The background of the header element.
* @default 'transparent'
*/
this.background = 'transparent';
/**
* Whether the header have a line divider at the bottom.
*
* @default false
*/
this.withDivider = false;
/**
* Whether to remove the padding bottom.
*
* Does not works when `background` is colored or `withDivider` is true.
*
* @default false
*/
this.dense = false;
}
get classes() {
return ['d-card-header', `d-card-header-${this.background}`];
}
get classDense() {
if (this.background === 'colored' || this.withDivider)
return false;
return this.dense;
}
}
DokuCardHeader.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuCardHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
DokuCardHeader.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuCardHeader, isStandalone: true, selector: "doku-card-header", inputs: { background: "background", withDivider: "withDivider", dense: "dense" }, host: { properties: { "class.with-divider": "this.withDivider", "class": "this.classes", "class.d-card-header-dense": "this.classDense" } }, exportAs: ["dokuCardHeader"], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuCardHeader, decorators: [{
type: Component,
args: [{
selector: 'doku-card-header',
exportAs: 'dokuCardHeader',
standalone: true,
imports: [CommonModule],
template: `<ng-content></ng-content>`,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}], propDecorators: { background: [{
type: Input
}], withDivider: [{
type: HostBinding,
args: ['class.with-divider']
}, {
type: Input
}], dense: [{
type: Input
}], classes: [{
type: HostBinding,
args: ['class']
}], classDense: [{
type: HostBinding,
args: ['class.d-card-header-dense']
}] } });
class DokuCardSection {
constructor() {
this.classes = 'd-card-section';
}
}
DokuCardSection.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuCardSection, deps: [], target: i0.ɵɵFactoryTarget.Component });
DokuCardSection.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuCardSection, isStandalone: true, selector: "doku-card-section", host: { properties: { "class": "this.classes" } }, exportAs: ["dokuCardSection"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuCardSection, decorators: [{
type: Component,
args: [{
selector: 'doku-card-section',
exportAs: 'dokuCardSection',
standalone: true,
imports: [CommonModule],
template: '<ng-content></ng-content>',
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}], propDecorators: { classes: [{
type: HostBinding,
args: ['class']
}] } });
class DokuCardSubtitle {
constructor() {
this.classes = 'd-card-subtitle';
}
}
DokuCardSubtitle.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuCardSubtitle, deps: [], target: i0.ɵɵFactoryTarget.Component });
DokuCardSubtitle.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuCardSubtitle, isStandalone: true, selector: "doku-card-subtitle", host: { properties: { "class": "this.classes" } }, exportAs: ["dokuCardSubtitle"], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuCardSubtitle, decorators: [{
type: Component,
args: [{
selector: 'doku-card-subtitle',
exportAs: 'dokuCardSubtitle',
standalone: true,
imports: [CommonModule],
template: `<ng-content></ng-content>`,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}], propDecorators: { classes: [{
type: HostBinding,
args: ['class']
}] } });
class DokuCardTitle {
constructor() {
this.classes = 'd-card-title';
}
}
DokuCardTitle.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuCardTitle, deps: [], target: i0.ɵɵFactoryTarget.Component });
DokuCardTitle.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuCardTitle, isStandalone: true, selector: "doku-card-title", host: { properties: { "class": "this.classes" } }, exportAs: ["dokuCardTitle"], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuCardTitle, decorators: [{
type: Component,
args: [{
selector: 'doku-card-title',
exportAs: 'dokuCardTitle',
standalone: true,
imports: [CommonModule],
template: `<ng-content></ng-content>`,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}], propDecorators: { classes: [{
type: HostBinding,
args: ['class']
}] } });
class DokuCard {
constructor() {
this.classes = 'd-card';
}
}
DokuCard.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
DokuCard.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuCard, isStandalone: true, selector: "doku-card", host: { properties: { "class": "this.classes" } }, exportAs: ["dokuCard"], ngImport: i0, template: "<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", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuCard, decorators: [{
type: Component,
args: [{ selector: 'doku-card', exportAs: 'dokuCard', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<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" }]
}], propDecorators: { classes: [{
type: HostBinding,
args: ['class']
}] } });
class DokuCardModule {
}
DokuCardModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
DokuCardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: DokuCardModule, imports: [DokuCard,
DokuCardHeader,
DokuCardFooter,
DokuCardTitle,
DokuCardSubtitle,
DokuCardBody,
DokuCardCover,
DokuCardSection], exports: [DokuCard,
DokuCardHeader,
DokuCardFooter,
DokuCardTitle,
DokuCardSubtitle,
DokuCardBody,
DokuCardCover,
DokuCardSection] });
DokuCardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuCardModule, imports: [DokuCard,
DokuCardHeader,
DokuCardFooter,
DokuCardTitle,
DokuCardSubtitle,
DokuCardBody,
DokuCardCover,
DokuCardSection] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuCardModule, decorators: [{
type: NgModule,
args: [{
imports: [
DokuCard,
DokuCardHeader,
DokuCardFooter,
DokuCardTitle,
DokuCardSubtitle,
DokuCardBody,
DokuCardCover,
DokuCardSection,
],
exports: [
DokuCard,
DokuCardHeader,
DokuCardFooter,
DokuCardTitle,
DokuCardSubtitle,
DokuCardBody,
DokuCardCover,
DokuCardSection,
],
}]
}] });
class DokuCheckboxSubLabel {
constructor() {
this.classes = `d-checkbox-sub-label`;
}
}
DokuCheckboxSubLabel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuCheckboxSubLabel, deps: [], target: i0.ɵɵFactoryTarget.Component });
DokuCheckboxSubLabel.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuCheckboxSubLabel, isStandalone: true, selector: "doku-checkbox-sub-label", host: { properties: { "class": "this.classes" } }, exportAs: ["dokuCheckboxSubLabel"], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuCheckboxSubLabel, decorators: [{
type: Component,
args: [{
selector: 'doku-checkbox-sub-label',
exportAs: 'dokuCheckboxSubLabel',
standalone: true,
imports: [CommonModule],
template: `<ng-content></ng-content>`,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}], propDecorators: { classes: [{
type: HostBinding,
args: ['class']
}] } });
let uniqueId = 1;
class DokuCheckbox {
constructor(cdr, ngControl) {
this.cdr = cdr;
this.ngControl = ngControl;
/**
* Unique id of the checkbox. By default, it's auto-generated.
* @default `d-checkbox-[uniqueId]`
*/
this.id = `d-checkbox-${uniqueId++}`;
/**
* Whether the checkbox is disabled.
*
* If using reactive forms, the value will be replaced.
* Use form control's method to disable the Checkbox.
*
* @default false
*/
this.disabled = false;
/**
* Whether the checkbox is checked.
*
* If using reactive forms or template-drive forms, the value will be replaced.
*
* @default false
*/
this.checked = false;
/**
* The size of the checkbox.
* @default 'medium'
*/
this.size = 'medium';
/**
* An event emitted when checked is changed.
*/
this.checkedChange = new EventEmitter();
this.destroy$ = new ReplaySubject();
if (this.ngControl) {
this.ngControl.valueAccessor = this;
}
}
get classes() {
return [`d-checkbox`, `d-checkbox-${this.size}`];
}
ngOnInit() {
this.checkedChange.pipe(takeUntil(this.destroy$)).subscribe(() => {
var _a, _b;
(_a = this.onChange) === null || _a === void 0 ? void 0 : _a.call(this, this.checked);
(_b = this.onTouched) === null || _b === void 0 ? void 0 : _b.call(this);
});
}
ngOnDestroy() {
this.destroy$.next(true);
this.destroy$.complete();
}
writeValue(value) {
this.checked = value;
this.cdr.detectChanges();
}
registerOnTouched(fn) {
this.onTouched = fn;
}
registerOnChange(fn) {
this.onChange = fn;
}
setDisabledState(isDisabled) {
this.disabled = isDisabled;
this.cdr.detectChanges();
}
onCheckboxChange() {
if (this.disabled)
return;
this.checked = !this.checked;
this.checkedChange.emit(this.checked);
}
}
DokuCheckbox.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuCheckbox, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
DokuCheckbox.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuCheckbox, isStandalone: true, selector: "doku-checkbox", inputs: { id: "id", disabled: "disabled", checked: "checked", size: "size" }, outputs: { checkedChange: "checkedChange" }, host: { properties: { "class.d-checkbox-disabled": "this.disabled", "class.d-checkbox-checked": "this.checked", "class": "this.classes" } }, exportAs: ["dokuCheckbox"], ngImport: i0, template: "<div class=\"d-checkbox-indicator\">\n <input\n #input\n type=\"checkbox\"\n [id]=\"id\"\n [disabled]=\"disabled\"\n [checked]=\"checked\"\n (change)=\"onCheckboxChange()\"\n />\n <span *ngIf=\"checked\" class=\"d-checkbox-indicator-icon\" (click)=\"input.click()\">\n <ng-container *ngIf=\"checked\" [ngTemplateOutlet]=\"iconCheck\"></ng-container>\n </span>\n</div>\n\n<div class=\"d-checkbox-content\">\n <label [for]=\"id\" class=\"d-checkbox-label\"><ng-content></ng-content></label>\n <ng-content select=\"doku-checkbox-sub-label\"></ng-content>\n</div>\n\n<ng-template #iconCheck>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M17.3183 4.55752C17.3765 4.61558 17.4227 4.68455 17.4542 4.76048C17.4857 4.83641 17.5019 4.91781 17.5019 5.00002C17.5019 5.08223 17.4857 5.16363 17.4542 5.23956C17.4227 5.31549 17.3765 5.38446 17.3183 5.44252L8.56829 14.1925C8.51023 14.2507 8.44126 14.2969 8.36533 14.3284C8.2894 14.3599 8.208 14.3761 8.12579 14.3761C8.04358 14.3761 7.96218 14.3599 7.88625 14.3284C7.81032 14.2969 7.74135 14.2507 7.68329 14.1925L3.30829 9.81752C3.19093 9.70016 3.125 9.54099 3.125 9.37502C3.125 9.20905 3.19093 9.04988 3.30829 8.93252C3.42565 8.81516 3.58482 8.74923 3.75079 8.74923C3.91676 8.74923 4.07593 8.81516 4.19329 8.93252L8.12579 12.8663L16.4333 4.55752C16.4913 4.49931 16.5603 4.45314 16.6362 4.42163C16.7122 4.39012 16.7936 4.3739 16.8758 4.3739C16.958 4.3739 17.0394 4.39012 17.1153 4.42163C17.1913 4.45314 17.2602 4.49931 17.3183 4.55752Z\"\n fill=\"currentColor\"\n />\n </svg>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuCheckbox, decorators: [{
type: Component,
args: [{ selector: 'doku-checkbox', exportAs: 'dokuCheckbox', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"d-checkbox-indicator\">\n <input\n #input\n type=\"checkbox\"\n [id]=\"id\"\n [disabled]=\"disabled\"\n [checked]=\"checked\"\n (change)=\"onCheckboxChange()\"\n />\n <span *ngIf=\"checked\" class=\"d-checkbox-indicator-icon\" (click)=\"input.click()\">\n <ng-container *ngIf=\"checked\" [ngTemplateOutlet]=\"iconCheck\"></ng-container>\n </span>\n</div>\n\n<div class=\"d-checkbox-content\">\n <label [for]=\"id\" class=\"d-checkbox-label\"><ng-content></ng-content></label>\n <ng-content select=\"doku-checkbox-sub-label\"></ng-content>\n</div>\n\n<ng-template #iconCheck>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M17.3183 4.55752C17.3765 4.61558 17.4227 4.68455 17.4542 4.76048C17.4857 4.83641 17.5019 4.91781 17.5019 5.00002C17.5019 5.08223 17.4857 5.16363 17.4542 5.23956C17.4227 5.31549 17.3765 5.38446 17.3183 5.44252L8.56829 14.1925C8.51023 14.2507 8.44126 14.2969 8.36533 14.3284C8.2894 14.3599 8.208 14.3761 8.12579 14.3761C8.04358 14.3761 7.96218 14.3599 7.88625 14.3284C7.81032 14.2969 7.74135 14.2507 7.68329 14.1925L3.30829 9.81752C3.19093 9.70016 3.125 9.54099 3.125 9.37502C3.125 9.20905 3.19093 9.04988 3.30829 8.93252C3.42565 8.81516 3.58482 8.74923 3.75079 8.74923C3.91676 8.74923 4.07593 8.81516 4.19329 8.93252L8.12579 12.8663L16.4333 4.55752C16.4913 4.49931 16.5603 4.45314 16.6362 4.42163C16.7122 4.39012 16.7936 4.3739 16.8758 4.3739C16.958 4.3739 17.0394 4.39012 17.1153 4.42163C17.1913 4.45314 17.2602 4.49931 17.3183 4.55752Z\"\n fill=\"currentColor\"\n />\n </svg>\n</ng-template>\n" }]
}], ctorParameters: function () {
return [{ type: i0.ChangeDetectorRef }, { type: i1$1.NgControl, decorators: [{
type: Optional
}, {
type: Self
}] }];
}, propDecorators: { id: [{
type: Input
}], disabled: [{
type: HostBinding,
args: ['class.d-checkbox-disabled']
}, {
type: Input
}], checked: [{
type: HostBinding,
args: ['class.d-checkbox-checked']
}, {
type: Input
}], size: [{
type: Input
}], checkedChange: [{
type: Output
}], classes: [{
type: HostBinding,
args: ['class']
}] } });
class DokuCheckboxModule {
}
DokuCheckboxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
DokuCheckboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: DokuCheckboxModule, imports: [DokuCheckbox, DokuCheckboxSubLabel], exports: [DokuCheckbox, DokuCheckboxSubLabel] });
DokuCheckboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuCheckboxModule, imports: [DokuCheckbox, DokuCheckboxSubLabel] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuCheckboxModule, decorators: [{
type: NgModule,
args: [{
imports: [DokuCheckbox, DokuCheckboxSubLabel],
exports: [DokuCheckbox, DokuCheckboxSubLabel],
}]
}] });
class DokuFieldPrefix {
constructor() {
/**
* The appearance of the prefix content.
* - `inline`, use field padding - ideal for icon.
* - `border-block`, has own padding and border as a separator - ideal for text like "IDR".
* - `block`, the looks will be based on the provided content - ideal for component like Button.
* - `border-block-inside`, looks like border block but no padding
* and inside the wrapper border - ideal for select component.
*/
this.appearance = 'inline';
/**
* Whether to use background color. Support is limited by appearance.
*
* Supported appearances:
* - `border-block`
* - `border-block-inside`
*/
this.useBackgroundColor = false;
this.classPrefix = true;
}
get classAppearance() {
return [`d-field-prefix-${this.appearance}`, this.getBackgroundClass()];
}
getBackgroundClass() {
if (!this.useBackgroundColor)
return null;
if (this.appearance === 'border-block' || this.appearance === 'border-block-inside') {
return 'd-field-prefix-use-background';
}
return null;
}
}
DokuFieldPrefix.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuFieldPrefix, deps: [], target: i0.ɵɵFactoryTarget.Directive });
DokuFieldPrefix.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: DokuFieldPrefix, isStandalone: true, selector: "[doku-field-prefix]", inputs: { appearance: "appearance", useBackgroundColor: "useBackgroundColor" }, host: { properties: { "class.d-field-prefix": "this.classPrefix", "class": "this.classAppearance" } }, exportAs: ["dokuFieldPrefix"], ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuFieldPrefix, decorators: [{
type: Directive,
args: [{
selector: '[doku-field-prefix]',
exportAs: 'dokuFieldPrefix',
standalone: true,
}]
}], propDecorators: { appearance: [{
type: Input
}], useBackgroundColor: [{
type: Input
}], classPrefix: [{
type: HostBinding,
args: ['class.d-field-prefix']
}], classAppearance: [{
type: HostBinding,
args: ['class']
}] } });
class DokuFieldSuffix {
constructor() {
/**
* The appearance of the suffix content.
* - `inline`, use field padding - ideal for icon.
* - `border-block`, has own padding and border as a separator - ideal for text like "IDR".
* - `block`, the looks will be based on the provided content - ideal for component like Button.
* - `border-block-inside`, looks like border block but no padding
* and inside the wrapper border - ideal for select component.
*/
this.appearance = 'inline';
/**
* Whether to use background color. Support is limited by appearance.
*
* Supported appearances:
* - `border-block`
* - `border-block-inside`
*/
this.useBackgroundColor = false;
this.classSuffix = true;
}
get classAppearance() {
return [`d-field-suffix-${this.appearance}`, this.getBackgroundClass()];
}
getBackgroundClass() {
if (!this.useBackgroundColor)
return null;
if (this.appearance === 'border-block' || this.appearance === 'border-block-inside') {
return 'd-field-suffix-use-background';
}
return null;
}
}
DokuFieldSuffix.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuFieldSuffix, deps: [], target: i0.ɵɵFactoryTarget.Directive });
DokuFieldSuffix.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: DokuFieldSuffix, isStandalone: true, selector: "[doku-field-suffix]", inputs: { appearance: "appearance", useBackgroundColor: "useBackgroundColor" }, host: { properties: { "class.d-field-suffix": "this.classSuffix", "class": "this.classAppearance" } }, exportAs: ["dokuFieldSuffix"], ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuFieldSuffix, decorators: [{
type: Directive,
args: [{
selector: '[doku-field-suffix]',
exportAs: 'dokuFieldSuffix',
standalone: true,
}]
}], propDecorators: { appearance: [{
type: Input
}], useBackgroundColor: [{
type: Input
}], classSuffix: [{
type: HostBinding,
args: ['class.d-field-suffix']
}], classAppearance: [{
type: HostBinding,
args: ['class']
}] } });
class DokuFieldError {
}
DokuFieldError.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuFieldError, deps: [], target: i0.ɵɵFactoryTarget.Component });
DokuFieldError.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuFieldError, isStandalone: true, selector: "doku-field-error", exportAs: ["dokuFieldError"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuFieldError, decorators: [{
type: Component,
args: [{
selector: 'doku-field-error',
exportAs: 'dokuFieldError',
standalone: true,
imports: [CommonModule],
template: '<ng-content></ng-content>',
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}] });
class DokuFieldHint {
}
DokuFieldHint.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuFieldHint, deps: [], target: i0.ɵɵFactoryTarget.Component });
DokuFieldHint.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuFieldHint, isStandalone: true, selector: "doku-field-hint", exportAs: ["dokuFieldHint"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuFieldHint, decorators: [{
type: Component,
args: [{
selector: 'doku-field-hint',
exportAs: 'dokuFieldHint',
standalone: true,
imports: [CommonModule],
template: '<ng-content></ng-content>',
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}] });
class DokuFieldSuccess {
}
DokuFieldSuccess.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuFieldSuccess, deps: [], target: i0.ɵɵFactoryTarget.Component });
DokuFieldSuccess.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuFieldSuccess, isStandalone: true, selector: "doku-field-success", exportAs: ["dokuFieldSuccess"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuFieldSuccess, decorators: [{
type: Component,
args: [{
selector: 'doku-field-success',
exportAs: 'dokuFieldSuccess',
standalone: true,
imports: [CommonModule],
template: '<ng-content></ng-content>',
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}] });
class DokuFieldLabel {
constructor() {
this.for = '';
}
}
DokuFieldLabel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuFieldLabel, deps: [], target: i0.ɵɵFactoryTarget.Component });
DokuFieldLabel.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuFieldLabel, isStandalone: true, selector: "doku-field-label", inputs: { for: "for" }, exportAs: ["dokuFieldLabel"], ngImport: i0, template: "<div class=\"d-field-label-wrapper\">\n <label [for]=\"for\" class=\"d-field-label d-text-body-m\"><ng-content></ng-content></label>\n <ng-content select=\"[doku-field-badge]\"></ng-content>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuFieldLabel, decorators: [{
type: Component,
args: [{ selector: 'doku-field-label', exportAs: 'dokuFieldLabel', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"d-field-label-wrapper\">\n <label [for]=\"for\" class=\"d-field-label d-text-body-m\"><ng-content></ng-content></label>\n <ng-content select=\"[doku-field-badge]\"></ng-content>\n</div>\n" }]
}], propDecorators: { for: [{
type: Input
}] } });
const DOKU_FORM_FIELD_ACCESSOR = new InjectionToken('DOKU_FORM_FIELD_ACCESSOR');
class DokuFormField {
get shouldShowFieldHelper() {
if (this.hasFieldSuccess && this.showSuccessBehavior && this.isSuccess)
return this.isSuccess;
if (this.hasFieldError && this.isError)
return this.isError;
if (this.hasFieldHint)
return true;
return false;
}
get isError() {
return this._isError;
}
set isError(value) {
this._isError = value;
this.cdRef.markForCheck();
}
get isSuccess() {
return this._isSuccess;
}
set isSuccess(value) {
this._isSuccess = value;
this.cdRef.markForCheck();
}
set isFocus(value) {
this._isFocus = this.isDisabled || this.isReadonly ? false : value;
}
get isFocus() {
return this._isFocus;
}
constructor(cdRef) {
this.cdRef = cdRef;
/**
* Whether to show the success behavior when the validation is valid.
* @default false
*/
this.showSuccessBehavior = false;
this.classes = 'd-form-field';
this.hasFieldHint = false;
this.hasFieldError = false;
this.hasFieldSuccess = false;
this._isError = false;
this._isSuccess = false;
this._isFocus = false;
this.isDisabled = false;
this.isReadonly = false;
this.isTextarea = false;
this.destroy$ = new ReplaySubject();
}
get inputWrapperElement() {
var _a;
return (_a = this.inputWrapperElementRef) === null || _a === void 0 ? void 0 : _a.nativeElement;
}
ngOnChanges(changes) {
if (changes['isErrorState']) {
this.useCustomErrorStateMatcher(changes['isErrorState'].currentValue);
}
if (changes['isSuccessState']) {
this.useCustomSuccessStateMatcher(changes['isSuccessState'].currentValue);
}
}
ngAfterContentInit() {
var _a, _b, _c;
this.hasFieldHint = !!((_a = this.fieldHint) === null || _a === void 0 ? void 0 : _a.length);
this.hasFieldError = !!((_b = this.fieldError) === null || _b === void 0 ? void 0 : _b.length);
this.hasFieldSuccess = !!((_c = this.fieldSuccess) === null || _c === void 0 ? void 0 : _c.length);
this.handleFormFieldOptions();
this.handleRegisterOnFocus();
this.handleRegisterOnBlur();
this.handleRegisterOnDisable();
this.handleRegisterOnReadonly();
this.handleRegisterOnValidate();
this.handleTextarea();
}
ngAfterViewInit() {
this.handleOnClickWrapperElement();
}
ngOnDestroy() {
this.destroy$.next(1);
this.destroy$.complete();
}
handleFormFieldOptions() {
var _a;
if (!((_a = this.formFieldAccessor) === null || _a === void 0 ? void 0 : _a.fieldOptions))
return;
this.fieldOptions = this.formFieldAccessor.fieldOptions;
}
handleRegisterOnFocus() {
var _a, _b;
if (!this.formFieldAccessor)
return;
const focusHandler = () => {
this.isFocus = true;
this.cdRef.markForCheck();
};
(_b = (_a = this.formFieldAccessor).registerOnFocus) === null || _b === void 0 ? void 0 : _b.call(_a, focusHandler);
}
handleRegisterOnBlur() {
var _a, _b;
if (!this.formFieldAccessor)
return;
const blurHandler = () => {
this.isFocus = false;
this.cdRef.markForCheck();
};
(_b = (_a = this.formFieldAccessor).registerOnBlur) === null || _b === void 0 ? void 0 : _b.call(_a, blurHandler);
}
handleRegisterOnDisable() {
var _a, _b;
if (!this.formFieldAccessor)
return;
const disableHandler = (value) => {
this.isDisabled = value;
this.cdRef.markForCheck();
};
(_b = (_a = this.formFieldAccessor).registerOnDisable) === null || _b === void 0 ? void 0 : _b.call(_a, disableHandler);
}
handleRegisterOnReadonly() {
var _a, _b;
if (!this.formFieldAccessor)
return;
const readonlyHandler = (value) => {
this.isReadonly = value;
this.cdRef.markForCheck();
};
(_b = (_a = this.formFieldAccessor).registerOnReadonly) === null || _b === void 0 ? void 0 : _b.call(_a, readonlyHandler);
}
handleRegisterOnValidate() {
var _a, _b;
if (!this.formFieldAccessor)
return;
const validationHandler = (value, state) => {
if (typeof this.isErrorState === 'boolean')
return;
if (typeof this.isSuccessState === 'boolean')
return;
const isControlReset = (state === null || state === void 0 ? void 0 : state.pristine) && state.untouched;
if (isControlReset) {
this.isError = false;
this.isSuccess = false;
}
else if (value === 'valid') {
this.isError = false;
this.isSuccess = true;
}
else if (value === 'invalid') {
this.isError = true;
this.isSuccess = false;
}
else {
this.isError = false;
this.isSuccess = false;
}
};
(_b = (_a = this.formFieldAccessor).registerOnValidate) === null || _b === void 0 ? void 0 : _b.call(_a, validationHandler);
}
handleOnClickWrapperElement() {
if (!this.formFieldAccessor)
return;
fromEvent(this.inputWrapperElement, 'click')
.pipe(filter((ev) => !this.isElementPrefixOrSuffixClicked(ev.target)), takeUntil(this.destroy$))
.subscribe((e) => {
var _a, _b;
(_b = (_a = this.formFieldAccessor) === null || _a === void 0 ? void 0 : _a.onClickWrapperElement) === null || _b === void 0 ? void 0 : _b.call(_a, e);
});
}
handleTextarea() {
var _a, _b, _c;
if (!this.formFieldAccessor)
return;
const isTextarea = ((_c = (_b = (_a = this.formFieldAccessor.elementRef) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.nodeName) === null || _c === void 0 ? void 0 : _c.toLowerCase()) ===
'textarea';
if (!isTextarea)
return;
this.isTextarea = true;
}
isElementPrefixOrSuffixClicked(srcElement) {
const prefixElement = this.inputWrapperElement.querySelector('[doku-field-prefix]');
const suffixElement = this.inputWrapperElement.querySelector('[doku-field-suffix]');
let clicked = false;
if (prefixElement)
clicked = this.checkElementChildren(srcElement, prefixElement);
if (clicked)
return clicked;
if (suffixElement)
clicked = this.checkElementChildren(srcElement, suffixElement);
return clicked;
}
checkElementChildren(clickedElement, checkElement) {
if (!clickedElement || !checkElement)
return false;
if (clickedElement === checkElement)
return true;
if (!checkElement.hasChildNodes())
return false;
return Array.from(checkElement.children).some((child) => this.checkElementChildren(clickedElement, child));
}
useCustomErrorStateMatcher(value) {
this.isError = value;
}
useCustomSuccessStateMatcher(value) {
this.isSuccess = value;
}
}
DokuFormField.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuFormField, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
DokuFormField.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuFormField, isStandalone: true, selector: "doku-form-field", inputs: { showSuccessBehavior: "showSuccessBehavior", isErrorState: "isErrorState", isSuccessState: "isSuccessState" }, host: { properties: { "class.d-field-show-success": "this.showSuccessBehavior", "class": "this.classes", "class.d-form-field-error": "this.isError", "class.d-form-field-success": "this.isSuccess", "class.d-field-disabled": "this.isDisabled", "class.d-field-readonly": "this.isReadonly", "class.d-field-textarea": "this.isTextarea" } }, queries: [{ propertyName: "formFieldAccessor", first: true, predicate: DOKU_FORM_FIELD_ACCESSOR, descendants: true }, { propertyName: "fieldHint", predicate: DokuFieldHint }, { propertyName: "fieldError", predicate: DokuFieldError }, { propertyName: "fieldSuccess", predicate: DokuFieldSuccess }], viewQueries: [{ propertyName: "inputWrapperElementRef", first: true, predicate: ["inputWrapper"], descendants: true }], exportAs: ["dokuFormField"], usesOnChanges: true, ngImport: i0, template: "<ng-content select=\"doku-field-label\"></ng-content>\n\n<div\n #inputWrapper\n class=\"d-field-input-wrapper\"\n [class.d-field-focus]=\"isFocus\"\n [class.no-style]=\"fieldOptions?.withoutInputStyle\"\n>\n <ng-content select=\"[doku-field-prefix]\"></ng-content>\n <ng-content></ng-content>\n <ng-content select=\"[doku-field-suffix]\"></ng-content>\n</div>\n\n<div *ngIf=\"shouldShowFieldHelper\" class=\"d-field-helper-text d-text-body-s\">\n <ng-container *ngIf=\"hasFieldHint && !isError && (!isSuccess || !showSuccessBehavior)\">\n <ng-content select=\"doku-field-hint\"></ng-content>\n </ng-container>\n <ng-container *ngIf=\"hasFieldError && isError\">\n <ng-content select=\"doku-field-error\"></ng-content>\n </ng-container>\n <ng-container *ngIf=\"hasFieldSuccess && isSuccess && showSuccessBehavior\">\n <ng-content select=\"doku-field-success\"></ng-content>\n </ng-container>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuFormField, decorators: [{
type: Component,
args: [{ selector: 'doku-form-field', exportAs: 'dokuFormField', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"doku-field-label\"></ng-content>\n\n<div\n #inputWrapper\n class=\"d-field-input-wrapper\"\n [class.d-field-focus]=\"isFocus\"\n [class.no-style]=\"fieldOptions?.withoutInputStyle\"\n>\n <ng-content select=\"[doku-field-prefix]\"></ng-content>\n <ng-content></ng-content>\n <ng-content select=\"[doku-field-suffix]\"></ng-content>\n</div>\n\n<div *ngIf=\"shouldShowFieldHelper\" class=\"d-field-helper-text d-text-body-s\">\n <ng-container *ngIf=\"hasFieldHint && !isError && (!isSuccess || !showSuccessBehavior)\">\n <ng-content select=\"doku-field-hint\"></ng-content>\n </ng-container>\n <ng-container *ngIf=\"hasFieldError && isError\">\n <ng-content select=\"doku-field-error\"></ng-content>\n </ng-container>\n <ng-container *ngIf=\"hasFieldSuccess && isSuccess && showSuccessBehavior\">\n <ng-content select=\"doku-field-success\"></ng-content>\n </ng-container>\n</div>\n" }]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { showSuccessBehavior: [{
type: HostBinding,
args: ['class.d-field-show-success']
}, {
type: Input
}], isErrorState: [{
type: Input
}], isSuccessState: [{
type: Input
}], classes: [{
type: HostBinding,
args: ['class']
}], isError: [{
type: HostBinding,
args: ['class.d-form-field-error']
}], isSuccess: [{
type: HostBinding,
args: ['class.d-form-field-success']
}], isDisabled: [{
type: HostBinding,
args: ['class.d-field-disabled']
}], isReadonly: [{
type: HostBinding,
args: ['class.d-field-readonly']
}], isTextarea: [{
type: HostBinding,
args: ['class.d-field-textarea']
}], formFieldAccessor: [{
type: ContentChild,
args: [DOKU_FORM_FIELD_ACCESSOR]
}], fieldHint: [{
type: ContentChildren,
args: [DokuFieldHint, { descendants: false }]
}], fieldError: [{
type: ContentChildren,
args: [DokuFieldError, { descendants: false }]
}], fieldSuccess: [{
type: ContentChildren,
args: [DokuFieldSuccess, { descendants: false }]
}], inputWrapperElementRef: [{
type: ViewChild,
args: ['inputWrapper']
}] } });
class DokuFormFieldModule {
}
DokuFormFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuFormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
DokuFormFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: DokuFormFieldModule, imports: [DokuFormField,
DokuFieldLabel,
DokuFieldHint,
DokuFieldError,
DokuFieldSuccess,
DokuFieldSuffix,
DokuFieldPrefix], exports: [DokuFormField,
DokuFieldLabel,
DokuFieldHint,
DokuFieldError,
DokuFieldSuccess,
DokuFieldSuffix,
DokuFieldPrefix] });
DokuFormFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuFormFieldModule, imports: [DokuFormField,
DokuFieldLabel,
DokuFieldHint,
DokuFieldError,
DokuFieldSuccess] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuFormFieldModule, decorators: [{
type: NgModule,
args: [{
imports: [
DokuFormField,
DokuFieldLabel,
DokuFieldHint,
DokuFieldError,
DokuFieldSuccess,
DokuFieldSuffix,
DokuFieldPrefix,
],
exports: [
DokuFormField,
DokuFieldLabel,
DokuFieldHint,
DokuFieldError,
DokuFieldSuccess,
DokuFieldSuffix,
DokuFieldPrefix,
],
}]
}] });
class DokuInput {
get disabled() {
return this._disabled;
}
set disabled(value) {
this._disabled = value !== false;
this.notifyState$.next('disabled');
}
get readonly() {
return this._readonly;
}
set readonly(value) {
this._readonly = value !== false;
this.notifyState$.next('readonly');
}
constructor(elementRef, ngControl) {
this.elementRef = elementRef;
this.ngControl = ngControl;
this.classes = 'd-field-input';
this._disabled = false;
this._readonly = false;
this.notifyState$ = new ReplaySubject();
this.destroy$ = new ReplaySubject();
}
ngAfterViewInit() {
var _a, _b, _c, _d;
this.elementRef.nativeElement.onfocus = () => {
var _a;
(_a = this.onFocus) === null || _a === void 0 ? void 0 : _a.call(this);
};
this.elementRef.nativeElement.onblur = () => {
var _a;
(_a = this.onBlur) === null || _a === void 0 ? void 0 : _a.call(this);
};
(_b = (_a = this.ngControl) === null || _a === void 0 ? void 0 : _a.statusChanges) === null || _b === void 0 ? void 0 : _b.pipe(startWith(this.ngControl.status), distinctUntilChanged(), takeUntil(this.destroy$)).subscribe(() => {
var _a;
this.disabled = !!((_a = this.ngControl) === null || _a === void 0 ? void 0 : _a.disabled);
});
(_d = (_c = this.ngControl) === null || _c === void 0 ? void 0 : _c.statusChanges) === null || _d === void 0 ? void 0 : _d.pipe(map((status) => {
var _a, _b, _c, _d;
return ({
status: status,
state: {
pristine: (_b = (_a = this.ngControl) === null || _a === void 0 ? void 0 : _a.control) === null || _b === void 0 ? void 0 : _b.pristine,
untouched: (_d = (_c = this.ngControl) === null || _c === void 0 ? void 0 : _c.control) === null || _d === void 0 ? void 0 : _d.untouched,
},
});
}), distinctUntilChanged((prev, curr) => JSON.stringify(prev) === JSON.stringify(curr)), delay(0), takeUntil(this.destroy$)).subscribe(({ status, state }) => {
var _a, _b, _c;
if (status === 'VALID') {
(_a = this.onValidate) === null || _a === void 0 ? void 0 : _a.call(this, 'valid', state);
}
else if (status === 'INVALID') {
(_b = this.onValidate) === null || _b === void 0 ? void 0 : _b.call(this, 'invalid', state);
}
else {
(_c = this.onValidate) === null || _c === void 0 ? void 0 : _c.call(this, undefined, state);
}
});
this.notifyState$
.pipe(startWith({ disabled: this.disabled, readonly: this.readonly }), map(() => ({ disabled: this.disabled, readonly: this.readonly })), distinctUntilChanged((prev, current) => JSON.stringify(prev) === JSON.stringify(current)), delay(0), takeUntil(this.destroy$))
.subscribe(({ disabled, readonly }) => {
var _a, _b;
(_a = this.onDisable) === null || _a === void 0 ? void 0 : _a.call(this, disabled);
(_b = this.onReadonly) === null || _b === void 0 ? void 0 : _b.call(this, readonly);
// Handle element native attributes
const el = this.elementRef.nativeElement;
disabled ? el.setAttribute('disabled', '') : el.removeAttribute('disabled');
readonly ? el.setAttribute('readonly', '') : el.removeAttribute('readonly');
});
}
ngOnDestroy() {
this.destroy$.next(1);
this.destroy$.complete();
}
registerOnFocus(fn) {
this.onFocus = fn;
}
registerOnBlur(fn) {
this.onBlur = fn;
}
registerOnDisable(fn) {
this.onDisable = fn;
}
registerOnReadonly(fn) {
this.onReadonly = fn;
}
registerOnValidate(fn) {
this.onValidate = fn;
}
onClickWrapperElement() {
this.elementRef.nativeElement.focus();
}
}
DokuInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuInput, deps: [{ token: i0.ElementRef }, { token: i1$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
DokuInput.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: DokuInput, isStandalone: true, selector: "input[doku-input], textarea[doku-input]", inputs: { disabled: "disabled", readonly: "readonly" }, host: { properties: { "class": "this.classes" } }, providers: [
{
provide: DOKU_FORM_FIELD_ACCESSOR,
useExisting: DokuInput,
multi: true,
},
], exportAs: ["dokuInput"], ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuInput, decorators: [{
type: Directive,
args: [{
selector: 'input[doku-input], textarea[doku-input]',
exportAs: 'dokuInput',
standalone: true,
providers: [
{
provide: DOKU_FORM_FIELD_ACCESSOR,
useExisting: DokuInput,
multi: true,
},
],
}]
}], ctorParameters: function () {
return [{ type: i0.ElementRef }, { type: i1$1.NgControl, decorators: [{
type: Optional
}, {
type: Self
}] }];
}, propDecorators: { classes: [{
type: HostBinding,
args: ['class']
}], disabled: [{
type: Input
}], readonly: [{
type: Input
}] } });
class DokuInputModule {
}
DokuInputModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
DokuInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: DokuInputModule, imports: [DokuInput], exports: [DokuInput] });
DokuInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuInputModule });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuInputModule, decorators: [{
type: NgModule,
args: [{
imports: [DokuInput],
exports: [DokuInput],
}]
}] });
class DokuColorPicker {
/**
* Value of the color picker in hexadecimal format.
* @default ''
*/
get value() {
return this._value || '';
}
set value(hexColor) {
this._value = hexColor || '';
this.value$.next(this._value);
}
constructor(cdr, ngControl, formField) {
this.cdr = cdr;
this.ngControl = ngControl;
this.formField = formField;
/**
* Whether to disable the color picker.
* @default false
*/
this.disabled = false;
/**
* Whether color picker is readonly.
* @default false
*/
this.readonly = false;
this._value = '';
/**
* An event emitted when value changes.
*/
this.valueChange = new EventEmitter();
this.classes = ['d-color-picker'];
this.value$ = new BehaviorSubject(this.value);
this.destroy$ = new Subject();
this.fieldOptions = { withoutInputStyle: true };
if (ngControl) {
this.ngControl.valueAccessor = this;
}
}
registerOnDisable(fn) {
this.onDisable = fn;
}
registerOnReadonly(fn) {
this.onReadonly = fn;
}
registerOnValidate(fn) {
this.onValidate = fn;
}
writeValue(value) {
this.value = value;
}
registerOnChange(fn) {
this.onChange = fn;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
setDisabledState(isDisabled) {
this.disabled = isDisabled;
}
ngOnInit() {
var _a, _b;
this.value$
.pipe(skip(1), distinctUntilChanged(), takeUntil(this.destroy$))
.subscribe((value) => {
var _a;
this.valueChange.emit(value);
(_a = this.onChange) === null || _a === void 0 ? void 0 : _a.call(this, value);
this.cdr.detectChanges();
});
(_b = (_a = this.ngControl) === null || _a === void 0 ? void 0 : _a.statusChanges) === null || _b === void 0 ? void 0 : _b.pipe(distinctUntilChanged(), delay(0), takeUntil(this.destroy$)).subscribe((status) => {
var _a, _b, _c;
if (status === 'VALID') {
(_a = this.onValidate) === null || _a === void 0 ? void 0 : _a.call(this, 'valid');
}
else if (status === 'INVALID') {
(_b = this.onValidate) === null || _b === void 0 ? void 0 : _b.call(this, 'invalid');
}
else {
(_c = this.onValidate) === null || _c === void 0 ? void 0 : _c.call(this);
}
this.cdr.detectChanges();
});
}
ngOnChanges(changes) {
var _a, _b, _c, _d, _e, _f;
if (((_a = changes['disabled']) === null || _a === void 0 ? void 0 : _a.previousValue) !== ((_b = changes['disabled']) === null || _b === void 0 ? void 0 : _b.currentValue)) {
(_c = this.onDisable) === null || _c === void 0 ? void 0 : _c.call(this, !!this.disabled);
}
if (((_d = changes['readonly']) === null || _d === void 0 ? void 0 : _d.previousValue) !== ((_e = changes['readonly']) === null || _e === void 0 ? void 0 : _e.currentValue)) {
(_f = this.onReadonly) === null || _f === void 0 ? void 0 : _f.call(this, !!this.readonly);
}
}
ngOnDestroy() {
this.destroy$.next(true);
this.destroy$.unsubscribe();
}
onColorChange(event) {
var _a;
this.value = event.target.value;
(_a = this.onTouched) === null || _a === void 0 ? void 0 : _a.call(this);
}
}
DokuColorPicker.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuColorPicker, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.NgControl, optional: true, self: true }, { token: DokuFormField, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component });
DokuColorPicker.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuColorPicker, isStandalone: true, selector: "doku-color-picker", inputs: { disabled: "disabled", readonly: "readonly", value: "value" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class": "this.classes" } }, providers: [{ provide: DOKU_FORM_FIELD_ACCESSOR, useExisting: DokuColorPicker }], exportAs: ["dokuColorPicker"], usesOnChanges: true, ngImport: i0, template: "<doku-form-field\n [isErrorState]=\"formField?.['isError']\"\n [isSuccessState]=\"formField?.['isSuccess']\"\n [showSuccessBehavior]=\"!!formField?.['showSuccessBehavior']\"\n>\n <input\n type=\"text\"\n doku-input\n [(ngModel)]=\"value\"\n (input)=\"onColorChange($event)\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [maxlength]=\"7\"\n />\n <doku-form-field doku-field-prefix appearance=\"border-block-inside\" class=\"d-color-picker-prefix\">\n <input\n type=\"color\"\n class=\"d-color-picker-input-color\"\n [(ngModel)]=\"value\"\n (input)=\"onColorChange($event)\"\n [disabled]=\"disabled || readonly\"\n [readonly]=\"readonly\"\n />\n </doku-form-field>\n</doku-form-field>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DokuFormFieldModule }, { kind: "component", type: DokuFormField, selector: "doku-form-field", inputs: ["showSuccessBehavior", "isErrorState", "isSuccessState"], exportAs: ["dokuFormField"] }, { kind: "directive", type: DokuFieldPrefix, selector: "[doku-field-prefix]", inputs: ["appearance", "useBackgroundColor"], exportAs: ["dokuFieldPrefix"] }, { kind: "directive", type: DokuInput, selector: "input[doku-input], textarea[doku-input]", inputs: ["disabled", "readonly"], exportAs: ["dokuInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuColorPicker, decorators: [{
type: Component,
args: [{ selector: 'doku-color-picker', exportAs: 'dokuColorPicker', standalone: true, imports: [CommonModule, DokuFormFieldModule, DokuInput, ReactiveFormsModule, FormsModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: DOKU_FORM_FIELD_ACCESSOR, useExisting: DokuColorPicker }], template: "<doku-form-field\n [isErrorState]=\"formField?.['isError']\"\n [isSuccessState]=\"formField?.['isSuccess']\"\n [showSuccessBehavior]=\"!!formField?.['showSuccessBehavior']\"\n>\n <input\n type=\"text\"\n doku-input\n [(ngModel)]=\"value\"\n (input)=\"onColorChange($event)\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [maxlength]=\"7\"\n />\n <doku-form-field doku-field-prefix appearance=\"border-block-inside\" class=\"d-color-picker-prefix\">\n <input\n type=\"color\"\n class=\"d-color-picker-input-color\"\n [(ngModel)]=\"value\"\n (input)=\"onColorChange($event)\"\n [disabled]=\"disabled || readonly\"\n [readonly]=\"readonly\"\n />\n </doku-form-field>\n</doku-form-field>\n" }]
}], ctorParameters: function () {
return [{ type: i0.ChangeDetectorRef }, { type: i1$1.NgControl, decorators: [{
type: Optional
}, {
type: Self
}] }, { type: DokuFormField, decorators: [{
type: Optional
}, {
type: Host
}] }];
}, propDecorators: { disabled: [{
type: Input
}], readonly: [{
type: Input
}], value: [{
type: Input
}], valueChange: [{
type: Output
}], classes: [{
type: HostBinding,
args: ['class']
}] } });
class DokuColorPickerModule {
}
DokuColorPickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuColorPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
DokuColorPickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: DokuColorPickerModule, imports: [DokuColorPicker], exports: [DokuColorPicker] });
DokuColorPickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuColorPickerModule, imports: [DokuColorPicker] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuColorPickerModule, decorators: [{
type: NgModule,
args: [{
imports: [DokuColorPicker],
exports: [DokuColorPicker],
}]
}] });
class DokuEndDate {
constructor(elementRef, ngControl) {
this.elementRef = elementRef;
this.ngControl = ngControl;
}
}
DokuEndDate.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuEndDate, deps: [{ token: i0.ElementRef }, { token: i1$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
DokuEndDate.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: DokuEndDate, isStandalone: true, selector: "[doku-end-date]", exportAs: ["dokuEndDate"], ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuEndDate, decorators: [{
type: Directive,
args: [{
selector: '[doku-end-date]',
exportAs: 'dokuEndDate',
standalone: true,
}]
}], ctorParameters: function () {
return [{ type: i0.ElementRef }, { type: i1$1.NgControl, decorators: [{
type: Optional
}, {
type: Self
}] }];
} });
class DokuStartDate {
constructor(elementRef, ngControl) {
this.elementRef = elementRef;
this.ngControl = ngControl;
}
}
DokuStartDate.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuStartDate, deps: [{ token: i0.ElementRef }, { token: i1$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
DokuStartDate.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: DokuStartDate, isStandalone: true, selector: "[doku-start-date]", exportAs: ["dokuStartDate"], ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuStartDate, decorators: [{
type: Directive,
args: [{
selector: '[doku-start-date]',
exportAs: 'dokuStartDate',
standalone: true,
}]
}], ctorParameters: function () {
return [{ type: i0.ElementRef }, { type: i1$1.NgControl, decorators: [{
type: Optional
}, {
type: Self
}] }];
} });
class DokuDateRangePickerInput {
constructor() {
this.class = 'd-date-range-picker-input';
this.destroy$ = new Subject();
this.dateChange$ = new BehaviorSubject({ start: null, end: null });
}
ngOnInit() {
if (this.rangePicker) {
this.rangePicker['dateChangeHandler'] = (value) => this.dateChange$.next(value);
}
}
ngAfterContentInit() {
this.hideInputs();
this.listenToDateChange();
}
ngOnDestroy() {
this.destroy$.next(true);
this.destroy$.complete();
}
hideInputs() {
if (this.startDate) {
this.startDate['elementRef'].nativeElement.style.display = 'none';
}
if (this.endDate) {
this.endDate['elementRef'].nativeElement.style.display = 'none';
}
}
listenToDateChange() {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
const startDateControl = (_b = (_a = this.startDate) === null || _a === void 0 ? void 0 : _a['ngControl']) === null || _b === void 0 ? void 0 : _b.control;
const endDateControl = (_d = (_c = this.endDate) === null || _c === void 0 ? void 0 : _c['ngControl']) === null || _d === void 0 ? void 0 : _d.control;
const startDate$ = iif(() => !!startDateControl, (startDateControl === null || startDateControl === void 0 ? void 0 : startDateControl.valueChanges.pipe(startWith(this.normalizeDate(startDateControl.getRawValue())), map(this.normalizeDate), distinctUntilChanged(this.distinct))) || of(), of((_e = this.startDate) === null || _e === void 0 ? void 0 : _e['elementRef']).pipe(map((ref) => ref === null || ref === void 0 ? void 0 : ref.nativeElement), map((el) => this.normalizeDate(el.value)), startWith(this.normalizeDate(((_j = (_h = (_g = (_f = this.startDate) === null || _f === void 0 ? void 0 : _f['elementRef']) === null || _g === void 0 ? void 0 : _g.nativeElement) === null || _h === void 0 ? void 0 : _h.target) === null || _j === void 0 ? void 0 : _j.value) || null))));
const endDate$ = iif(() => !!endDateControl, (endDateControl === null || endDateControl === void 0 ? void 0 : endDateControl.valueChanges.pipe(startWith(this.normalizeDate(endDateControl.getRawValue())), map(this.normalizeDate), distinctUntilChanged(this.distinct))) || of(), of((_k = this.endDate) === null || _k === void 0 ? void 0 : _k['elementRef']).pipe(map((ref) => ref === null || ref === void 0 ? void 0 : ref.nativeElement), map((el) => this.normalizeDate(el.value)), startWith(this.normalizeDate(((_p = (_o = (_m = (_l = this.endDate) === null || _l === void 0 ? void 0 : _l['elementRef']) === null || _m === void 0 ? void 0 : _m.nativeElement) === null || _o === void 0 ? void 0 : _o.target) === null || _p === void 0 ? void 0 : _p.value) || null))));
const dateRange$ = combineLatest([startDate$, endDate$]).pipe(map(([start, end]) => ({ start, end })), distinctUntilChanged(this.distinct), filter((value) => {
// Skip if start date is null but end date is exists.
if (!value.start && !!value.end)
return false;
// Skip when choosing start date but end date value still there.
if (this.dateChange$.value.start && !this.dateChange$.value.end && value.end)
return false;
// Skip when resetting value but end date value still the same.
if (value.start &&
value.end &&
JSON.stringify(value.start) !== JSON.stringify(this.dateChange$.value.start) &&
JSON.stringify(value.end) === JSON.stringify(this.dateChange$.value.end)) {
return false;
}
return true;
}));
merge(this.dateChange$.pipe(skip(1)), dateRange$)
.pipe(
// Set initial value to the date range picker
distinctUntilChanged(this.distinct), tap((value) => {
if (!this.rangePicker)
return;
this.rangePicker['value'] = value;
this.rangePicker['_cdr'].detectChanges();
}), skip(1), takeUntil(this.destroy$))
.subscribe((value) => {
var _a, _b;
this.emitDateChangeToViewOrControl(value);
if (!this.rangePicker)
return;
this.rangePicker['valueChange'].emit({
start: ((_a = value.start) === null || _a === void 0 ? void 0 : _a.toISOString()) || null,
end: ((_b = value.end) === null || _b === void 0 ? void 0 : _b.toISOString()) || null,
});
});
}
emitDateChangeToViewOrControl(value) {
var _a, _b, _c, _d, _e, _f, _g, _h;
const startDate = ((_a = value === null || value === void 0 ? void 0 : value.start) === null || _a === void 0 ? void 0 : _a.toISOString()) || null;
const endDate = ((_b = value === null || value === void 0 ? void 0 : value.end) === null || _b === void 0 ? void 0 : _b.toISOString()) || null;
const startDateElement = (_c = this.startDate) === null || _c === void 0 ? void 0 : _c['elementRef'].nativeElement;
const endDateElement = (_d = this.endDate) === null || _d === void 0 ? void 0 : _d['elementRef'].nativeElement;
if (startDateElement.value !== startDate) {
startDateElement.value = startDate || '';
startDateElement.dispatchEvent(new Event('change'));
}
if (endDateElement.value !== endDate) {
endDateElement.value = endDate || '';
endDateElement.dispatchEvent(new Event('change'));
}
const startDateControl = (_f = (_e = this.startDate) === null || _e === void 0 ? void 0 : _e['ngControl']) === null || _f === void 0 ? void 0 : _f.control;
const endDateControl = (_h = (_g = this.endDate) === null || _g === void 0 ? void 0 : _g['ngControl']) === null || _h === void 0 ? void 0 : _h.control;
if (startDateControl && startDateControl.value !== startDate) {
startDateControl === null || startDateControl === void 0 ? void 0 : startDateControl.setValue(startDate);
}
if (endDateControl && endDateControl.value !== endDate) {
endDateControl === null || endDateControl === void 0 ? void 0 : endDateControl.setValue(endDate);
}
}
normalizeDate(date) {
if (!date)
return null;
if (!(date instanceof Date || typeof date === 'string'))
return null;
return date instanceof Date ? date : new Date(date);
}
distinct(prev, current) {
return JSON.stringify(prev) === JSON.stringify(current);
}
}
DokuDateRangePickerInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuDateRangePickerInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
DokuDateRangePickerInput.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuDateRangePickerInput, isStandalone: true, selector: "doku-date-range-picker-input", inputs: { rangePicker: "rangePicker" }, host: { properties: { "class": "this.class" } }, queries: [{ propertyName: "startDate", first: true, predicate: DokuStartDate, descendants: true }, { propertyName: "endDate", first: true, predicate: DokuEndDate, descendants: true }], exportAs: ["dokuDateRangePickerInput"], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuDateRangePickerInput, decorators: [{
type: Component,
args: [{
selector: 'doku-date-range-picker-input',
exportAs: 'dokuDateRangePickerInput',
standalone: true,
imports: [CommonModule],
template: `<ng-content></ng-content>`,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}], propDecorators: { class: [{
type: HostBinding,
args: ['class']
}], rangePicker: [{
type: Input
}], startDate: [{
type: ContentChild,
args: [DokuStartDate]
}], endDate: [{
type: ContentChild,
args: [DokuEndDate]
}] } });
/**
* Get the type of the click action from an event.
*
* @param event Click event
* @param triggerElement The element which toggle the appeared element.
* @param appearedElement The element that will be shown when get triggered.
* @returns
*/
function getClickType(event, triggerElements, appearedElements) {
const clickedElement = event.target;
const clickTrigger = triggerElements.some((node) => node && node.contains(clickedElement));
const clickInside = appearedElements.some((node) => node && node.contains(clickedElement));
const clickOutside = !clickInside;
return { clickInside, clickOutside, clickTrigger };
}
function updatePosition(props) {
var _a, _b;
if (!props.triggerElement || !props.floatingElement)
return;
const middleware = [];
if ((_a = props.middleware) === null || _a === void 0 ? void 0 : _a.flip) {
middleware.push(flip());
}
if ((_b = props.middleware) === null || _b === void 0 ? void 0 : _b.shift) {
middleware.push(shift());
}
computePosition(props.triggerElement, props.floatingElement, {
placement: props.placement || 'bottom',
middleware: middleware,
}).then(({ x, y }) => {
Object.assign(props.floatingElement.style, {
top: `${y}px`,
left: `${x}px`,
});
});
}
function updateFloatingPosition(props) {
if (props.autoUpdate) {
return autoUpdate(props.triggerElement, props.floatingElement, () => {
updatePosition(props);
});
}
else {
return updatePosition(props);
}
}
class DokuBreakpoint {
}
DokuBreakpoint.desktop = '(min-width: 1024px)';
DokuBreakpoint.mobile = '(max-width: 1023px)';
DokuBreakpoint.tablet = '(min-width: 768px) and (max-width: 1023px)';
DokuBreakpoint.phone = '(max-width: 767px)';
class DokuSelectLabelTemplate {
constructor(templateRef) {
this.templateRef = templateRef;
}
}
DokuSelectLabelTemplate.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuSelectLabelTemplate, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
DokuSelectLabelTemplate.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: DokuSelectLabelTemplate, isStandalone: true, selector: "ng-template[doku-select-label-template]", exportAs: ["dokuSelectLabelTemplate"], ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuSelectLabelTemplate, decorators: [{
type: Directive,
args: [{
selector: 'ng-template[doku-select-label-template]',
exportAs: 'dokuSelectLabelTemplate',
standalone: true,
}]
}], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
class DokuSelectLoadingTemplate {
constructor(templateRef) {
this.templateRef = templateRef;
}
}
DokuSelectLoadingTemplate.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuSelectLoadingTemplate, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
DokuSelectLoadingTemplate.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: DokuSelectLoadingTemplate, isStandalone: true, selector: "ng-template[doku-select-loading-template]", exportAs: ["dokuSelectLoadingTemplate"], ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuSelectLoadingTemplate, decorators: [{
type: Directive,
args: [{
selector: 'ng-template[doku-select-loading-template]',
exportAs: 'dokuSelectLoadingTemplate',
standalone: true,
}]
}], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
class DokuSelectNoItemTemplate {
constructor(templateRef) {
this.templateRef = templateRef;
}
}
DokuSelectNoItemTemplate.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuSelectNoItemTemplate, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
DokuSelectNoItemTemplate.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: DokuSelectNoItemTemplate, isStandalone: true, selector: "ng-template[doku-select-no-item-template]", exportAs: ["dokuSelectNoItemTemplate"], ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuSelectNoItemTemplate, decorators: [{
type: Directive,
args: [{
selector: 'ng-template[doku-select-no-item-template]',
exportAs: 'dokuSelectNoItemTemplate',
standalone: true,
}]
}], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
class DokuSelectOptionTemplate {
constructor(templateRef) {
this.templateRef = templateRef;
}
}
DokuSelectOptionTemplate.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuSelectOptionTemplate, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
DokuSelectOptionTemplate.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: DokuSelectOptionTemplate, isStandalone: true, selector: "ng-template[doku-select-option-template]", exportAs: ["dokuSelectOptionTemplate"], ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuSelectOptionTemplate, decorators: [{
type: Directive,
args: [{
selector: 'ng-template[doku-select-option-template]',
exportAs: 'dokuSelectOptionTemplate',
standalone: true,
}]
}], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
class DokuTypography {
constructor() {
/**
* @default `body-l`
*/
this.variant = 'body-l';
}
get class() {
return this.getClassNameByVariant();
}
getClassNameByVariant() {
const classes = {
h1: 'd-text-h1',
h2: 'd-text-h2',
h3: 'd-text-h3',
h4: 'd-text-h4',
h5: 'd-text-h5',
'body-l': 'd-text-body-l',
'body-m': 'd-text-body-m',
'body-s': 'd-text-body-s',
component: 'd-text-component',
label: 'd-text-label',
};
return classes[this.variant];
}
}
DokuTypography.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuTypography, deps: [], target: i0.ɵɵFactoryTarget.Component });
DokuTypography.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuTypography, isStandalone: true, selector: "[doku-typography]", inputs: { variant: "variant" }, host: { properties: { "class": "this.class" } }, exportAs: ["dokuTypography"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuTypography, decorators: [{
type: Component,
args: [{
selector: '[doku-typography]',
exportAs: 'dokuTypography',
standalone: true,
imports: [CommonModule],
template: '<ng-content></ng-content>',
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}], propDecorators: { variant: [{
type: Input
}], class: [{
type: HostBinding,
args: ['class']
}] } });
class DokuTypographyModule {
}
DokuTypographyModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuTypographyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
DokuTypographyModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: DokuTypographyModule, imports: [DokuTypography], exports: [DokuTypography] });
DokuTypographyModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuTypographyModule, imports: [DokuTypography] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuTypographyModule, decorators: [{
type: NgModule,
args: [{
imports: [DokuTypography],
exports: [DokuTypography],
}]
}] });
class DokuSelectDropdownPortal {
get classes() {
return ['d-dropdown-menu', 'd-select-dropdown-portal'];
}
onClick(event) {
event.stopPropagation();
}
}
DokuSelectDropdownPortal.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuSelectDropdownPortal, deps: [], target: i0.ɵɵFactoryTarget.Component });
DokuSelectDropdownPortal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuSelectDropdownPortal, isStandalone: true, selector: "doku-select-dropdown-portal", host: { listeners: { "click": "onClick($event)" }, properties: { "class": "this.classes" } }, exportAs: ["dokuSelectDropdownPortal"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuSelectDropdownPortal, decorators: [{
type: Component,
args: [{
selector: 'doku-select-dropdown-portal',
exportAs: 'dokuSelectDropdownPortal',
standalone: true,
imports: [CommonModule],
template: '<ng-content></ng-content>',
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}], propDecorators: { classes: [{
type: HostBinding,
args: ['class']
}], onClick: [{
type: HostListener,
args: ['click', ['$event']]
}] } });
class DokuSelectOption {
constructor(select) {
this.select = select;
this.classes = 'd-select-option';
this.value = '';
this.disabled = false;
this.isSelected = false;
this.destroy$ = new ReplaySubject();
}
ngOnInit() {
this.watchSelectedValue();
}
ngOnDestroy() {
this.destroy$.next(true);
this.destroy$.complete();
}
watchSelectedValue() {
var _a;
(_a = this.select) === null || _a === void 0 ? void 0 : _a._notifyOnChange$.pipe(filter(({ type }) => type === 'value'), startWith(this.select.value), map(() => { var _a; return (_a = this.select) === null || _a === void 0 ? void 0 : _a.value; }), map((value) => {
if (!value)
return false;
if (typeof value === 'string')
return value === this.value;
return value.includes(this.value);
}), distinctUntilChanged(), takeUntil(this.destroy$)).subscribe((selected) => {
this.isSelected = selected;
});
}
}
DokuSelectOption.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuSelectOption, deps: [{ token: DokuSelect, optional: true }], target: i0.ɵɵFactoryTarget.Component });
DokuSelectOption.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuSelectOption, isStandalone: true, selector: "doku-select-option", inputs: { value: "value", disabled: "disabled" }, host: { properties: { "class": "this.classes", "class.d-select-option-disabled": "this.disabled", "class.d-select-option-selected": "this.isSelected" } }, exportAs: ["dokuSelectOption"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuSelectOption, decorators: [{
type: Component,
args: [{
selector: 'doku-select-option',
exportAs: 'dokuSelectOption',
standalone: true,
imports: [CommonModule],
template: '<ng-content></ng-content>',
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}], ctorParameters: function () {
return [{ type: DokuSelect, decorators: [{
type: Optional
}, {
type: Inject,
args: [DokuSelect]
}] }];
}, propDecorators: { classes: [{
type: HostBinding,
args: ['class']
}], value: [{
type: Input
}], disabled: [{
type: HostBinding,
args: ['class.d-select-option-disabled']
}, {
type: Input
}], isSelected: [{
type: HostBinding,
args: ['class.d-select-option-selected']
}] } });
class ViewElementUtil {
static createSelectDropdownPortal(props) {
const component = createComponent(DokuSelectDropdownPortal, {
environmentInjector: props.environmentInjector,
elementInjector: Injector.create({ providers: [], parent: props.parentElementInjector }),
});
props.applicationRef.attachView(component.hostView);
const nativeElement = component.location.nativeElement;
props.renderer.setStyle(nativeElement, 'display', 'block');
if (props.portalClass) {
props.renderer.addClass(nativeElement, props.portalClass);
}
if (props.inputWrapperElement) {
props.renderer.setStyle(nativeElement, 'width', props.inputWrapperElement.clientWidth + 'px');
props.renderer.setStyle(nativeElement, 'box-sizing', 'content-box');
props.renderer.setStyle(props.inputWrapperElement, 'z-index', '1');
}
component.onDestroy(() => {
if (!props.inputWrapperElement)
return;
props.renderer.setStyle(props.inputWrapperElement, 'z-index', '');
});
return component;
}
static createSelectOption(props) {
var _a, _b;
let projectableNodes;
let customOptionRef;
if (props.templateRef) {
const context = { $implicit: props.item };
customOptionRef = props.templateRef.createEmbeddedView(context);
props.applicationRef.attachView(customOptionRef);
projectableNodes = [customOptionRef.rootNodes];
}
else {
projectableNodes = [[props.renderer.createText(props.item[props.bindLabel])]];
}
const component = createComponent(DokuSelectOption, {
environmentInjector: props.environmentInjector,
elementInjector: Injector.create({ providers: [], parent: (_a = props.portalRef) === null || _a === void 0 ? void 0 : _a.injector }),
projectableNodes,
});
props.applicationRef.attachView(component.hostView);
component.setInput('value', props.item[props.bindValue]);
component.setInput('disabled', !!props.item.disabled);
component.onDestroy(() => {
customOptionRef === null || customOptionRef === void 0 ? void 0 : customOptionRef.destroy();
});
(_b = props.portalRef) === null || _b === void 0 ? void 0 : _b.onDestroy(() => {
component.destroy();
});
return component;
}
}
class ItemInjectionUtil {
static injectSelectOptions(items = [], props, template) {
const portalElement = props.portalRef.location.nativeElement;
// Cleanup the portal element's children.
this.refs.forEach((ref) => ref.destroy());
this.refs = [];
if (props.loading) {
const loadingSelectOption = this.createLoadingStateItemSelectOption(props, template === null || template === void 0 ? void 0 : template.loading);
props.renderer.appendChild(portalElement, loadingSelectOption.location.nativeElement);
this.refs.push(loadingSelectOption);
return;
}
if (!items.length) {
const emptyStateSelectOption = this.createEmptyStateItemSelectOption(props, template === null || template === void 0 ? void 0 : template.noItem);
props.renderer.appendChild(portalElement, emptyStateSelectOption.location.nativeElement);
this.refs.push(emptyStateSelectOption);
return;
}
const selectOptions = items.map((item) => this.createItemSelectOption(item, props, template === null || template === void 0 ? void 0 : template.option));
selectOptions.forEach((item) => {
props.renderer.appendChild(portalElement, item.location.nativeElement);
});
this.refs.push(...selectOptions);
}
static createItemSelectOption(item, props, template) {
var _a;
const ref = this.createBaseSelectOption(item, Object.assign(Object.assign({}, props), { templateRef: template === null || template === void 0 ? void 0 : template.templateRef }));
ref.location.nativeElement.onclick = (_a = props.clickFn) === null || _a === void 0 ? void 0 : _a.call(props, item);
return ref;
}
static createEmptyStateItemSelectOption(props, template) {
const defaultItem = {
[props.bindLabel]: 'No items found',
[props.bindValue]: '',
disabled: true,
};
return this.createBaseSelectOption(defaultItem, Object.assign(Object.assign({}, props), { templateRef: template === null || template === void 0 ? void 0 : template.templateRef }));
}
static createLoadingStateItemSelectOption(props, template) {
const defaultItem = {
[props.bindLabel]: 'Loading...',
[props.bindValue]: '',
disabled: true,
};
return this.createBaseSelectOption(defaultItem, Object.assign(Object.assign({}, props), { templateRef: template === null || template === void 0 ? void 0 : template.templateRef }));
}
static createBaseSelectOption(item, props) {
return ViewElementUtil.createSelectOption({
item: item,
bindLabel: props.bindLabel,
bindValue: props.bindValue,
applicationRef: props.appRef,
environmentInjector: props.envInjector,
renderer: props.renderer,
portalRef: props.portalRef,
templateRef: props.templateRef,
});
}
}
ItemInjectionUtil.refs = [];
class SearchUtil {
static useSearchMatcher(items = [], options) {
const searchMatcherFn = (options === null || options === void 0 ? void 0 : options.customSearchMatcherFn)
? options === null || options === void 0 ? void 0 : options.customSearchMatcherFn
: this.defaultSearchMatcherFn.bind(this);
return iif(() => !!(options === null || options === void 0 ? void 0 : options.searchable), options.search$.pipe(map((search) => items.filter((item) => searchMatcherFn(search, item, { bindLabel: options.bindLabel })))), of(items));
}
static defaultSearchMatcherFn(searchTerm, item, options) {
var _a;
if (!searchTerm)
return true;
const itemLabel = (_a = item[options.bindLabel]) === null || _a === void 0 ? void 0 : _a.toLowerCase();
const normalizedSearchTerm = searchTerm.toLowerCase();
return !!(itemLabel === null || itemLabel === void 0 ? void 0 : itemLabel.includes(normalizedSearchTerm));
}
}
class StyleUtil {
/**
* Styles the cursor of the input wrapper element.
*/
static setInputWrapperCursorState(props, options) {
if (!(options === null || options === void 0 ? void 0 : options.inputWrapperElement))
return;
let cursor = props.disabled || props.readonly ? '' : 'pointer';
if ((options === null || options === void 0 ? void 0 : options.searchable) && !props.disabled && !props.readonly)
cursor = 'text';
options.inputWrapperElement.style.cursor = cursor;
}
/**
* Styles the padding of the input wrapper element.
*/
static handleInputWrapperStyle(props) {
if (props.inputWrapperElement && props.multiple) {
props.inputWrapperElement.style.paddingTop = '5px';
props.inputWrapperElement.style.paddingBottom = '5px';
if (props.arrowPlacement === 'right') {
props.inputWrapperElement.style.paddingLeft = '5px';
}
if (props.arrowPlacement === 'left') {
props.inputWrapperElement.style.paddingRight = '5px';
}
}
}
}
class ValueUtil {
/**
* Convert plain value into full details from the items.
*/
static convertValueToFullDetails(value, items, options) {
const prevValueDetails = options.prevValueDetails || [];
if (options === null || options === void 0 ? void 0 : options.multiple) {
const res = value.map((val) => {
const prevValueDetail = prevValueDetails.find((prevDetail) => prevDetail[options.bindValue] === val);
if (prevValueDetail)
return prevValueDetail;
return items.find((item) => item[options.bindValue] === val);
});
return res.filter(Boolean);
}
const prevRes = prevValueDetails.find((item) => item[options.bindValue] === value);
if (prevRes)
return [prevRes];
const res = items.find((item) => item[options.bindValue] === value);
return res ? [res] : [];
}
/**
* Normalize input value to the result.
*/
static normalizeValue(prevValue, value, options) {
const normalizedValues = Array.isArray(value) ? value : [value];
if (!options.multiple) {
return this.convertSingleValueToString(normalizedValues[0]);
}
let prevValues = prevValue;
if (typeof prevValues === 'string')
prevValues = [prevValues];
let nextValues = prevValues.filter(Boolean);
// The values that need to be removed from next values.
const existingValues = nextValues.filter((val) => normalizedValues.includes(val));
const newValues = normalizedValues.filter((val) => !nextValues.includes(val));
// Remove existing values from next values.
nextValues = nextValues.filter((val) => !existingValues.includes(val));
return [...nextValues, ...newValues]
.map((v) => this.convertSingleValueToString(v))
.filter(Boolean);
}
static convertSingleValueToString(value) {
if (typeof value === 'string')
return value;
if (isNaN(value))
return '';
if (value === undefined || value === null)
return '';
try {
return JSON.stringify(value);
}
catch (error) {
return '';
}
}
}
class DokuSelect {
/**
* List of options that will be shown on the dropdown.
*
* Supported values:
* - array of string or number
* - array of object (nested object is not supported)
*
* @default []
*/
get items() {
return this._items;
}
set items(value) {
this._items = this.normalizeInputItems(value);
this._notifyOnChange$.next({ type: 'item' });
}
/**
* Value of the selected options.
*
* @default undefined
*/
get value() {
return this._value;
}
set value(value) {
this._value = ValueUtil.normalizeValue('', value, { multiple: this.multiple });
this._notifyOnChange$.next({ type: 'value' });
}
/**
* Whether the select should allow multiple options selected simultaneously.
*
* @default false
*/
get multiple() {
return this._multiple;
}
set multiple(value) {
this._multiple = value;
this._notifyOnChange$.next({ type: 'multiple' });
}
/**
* Whether to truncate the label when the width is reached.
*
* Does not truncate the label if `multiple` is true.
*
* @default false
*/
get truncateLabel() {
return this._truncateLabel;
}
set truncateLabel(value) {
this._truncateLabel = this.multiple ? false : value;
}
/**
* The placement of the arrow icon.
*
* @default 'right'
*/
get arrowPlacement() {
return this._arrowPlacement;
}
set arrowPlacement(value) {
this._arrowPlacement = value;
this._notifyOnChange$.next({ type: 'arrowPlacement' });
}
/**
* Whether the select input should be disabled.
*
* @default false;
*/
get disabled() {
return this._disabled;
}
set disabled(value) {
this._disabled = value;
this._notifyOnChange$.next({ type: 'disabled' });
}
/**
* Whether the select input is readonly.
*
* @default false
*/
get readonly() {
return this._readonly;
}
set readonly(value) {
this._readonly = value;
this._notifyOnChange$.next({ type: 'readonly' });
}
/**
* Whether to provide async data fetching when searching data.
* It will display a loading state in the select options.
*
* Only works when `searchable` is true.
*
* @default false
*/
get isAsync() {
return this._isAsync;
}
set isAsync(value) {
this._isAsync = value;
}
/**
* Whether options dropdown state is opened.
*/
get isOpen() {
return this._isOpen;
}
set isOpen(value) {
this._isOpen = value;
this.cdr.detectChanges();
}
/**
* Loading state used when `isAsync` is true.
*/
get loading() {
return this._loading;
}
set loading(value) {
this._loading = this.isAsync ? value : false;
this._notifyOnChange$.next({ type: 'loading' });
}
constructor(envInjector, appRef, ngZone, injector, cdr, renderer, document, ngControl, formField) {
this.envInjector = envInjector;
this.appRef = appRef;
this.ngZone = ngZone;
this.injector = injector;
this.cdr = cdr;
this.renderer = renderer;
this.document = document;
this.ngControl = ngControl;
this.formField = formField;
this._items = [];
/**
* Bind property key of the label from the item if `items` value is an array of object.
*
* @default 'label'
*/
this.bindLabel = 'label';
/**
* Bind property key of the value from the item if `items` value is an array of object.
*
* @default 'value'
*/
this.bindValue = 'value';
this._value = '';
/**
* Placeholder of the field.
*
* @default ''
*/
this.placeholder = '';
this._multiple = false;
this._truncateLabel = false;
this._arrowPlacement = 'right';
this._disabled = false;
this._readonly = false;
/**
* Whether the select options are searchable.
*
* @default false
*/
this.searchable = false;
this._isAsync = false;
/**
* Whether the selected item can be cleared by clicking an icon.
*
* For `multiple`, it will remove all selected items.
*
* @default false
*/
this.clearable = false;
/**
* An event emitted when value changes.
*/
this.valueChange = new EventEmitter();
/**
* An event emitted if `searchable` is `true`.
*/
this.search = new EventEmitter();
this._notifyOnChange$ = new Subject();
this._isOpen = false;
this._loading = false;
this.search$ = new BehaviorSubject('');
this.filteredItems = [];
this.valueDetails = [];
this.destroy$ = new ReplaySubject();
if (this.ngControl) {
this.ngControl.valueAccessor = this;
}
this.handleCloseOptionsClickOutside();
}
get classes() {
return ['d-select', `d-select-arrow-${this.arrowPlacement}`];
}
get hasValue() {
var _a;
if (this.multiple)
return !!((_a = this.value) === null || _a === void 0 ? void 0 : _a.length);
return !!this.value;
}
get shouldShowPlaceholder() {
return !this.hasValue && !this.search$.value;
}
get shouldShowValueSingleSelect() {
return !!this.hasValue && !this.multiple && !this.search$.value;
}
get shouldShowValueMultipleSelect() {
return !!this.hasValue && this.multiple;
}
get inputWrapperElement() {
var _a;
return (_a = this.formField) === null || _a === void 0 ? void 0 : _a['inputWrapperElement'];
}
ngOnInit() {
// Handle value details
this._notifyOnChange$
.pipe(filter(({ type }) => type === 'item' || type === 'value'), startWith({ value: this.value, items: this.items }), map(() => ({ value: this.value, items: this.items })), distinctUntilChanged((prev, current) => JSON.stringify(prev) === JSON.stringify(current)), tap(({ value, items }) => {
this.valueDetails = ValueUtil.convertValueToFullDetails(value, items, {
bindValue: this.bindValue,
multiple: this.multiple,
prevValueDetails: this.valueDetails,
});
this.cdr.detectChanges();
}), distinctUntilChanged((prev, current) => JSON.stringify(prev.value) === JSON.stringify(current.value)),
// Do skip first change because we want to avoid triggering onChange on initial value.
skip(1), takeUntil(this.destroy$))
.subscribe(({ value }) => {
var _a;
(_a = this.onChange) === null || _a === void 0 ? void 0 : _a.call(this, value);
this.valueChange.emit(value);
});
// Handle filtered items
this._notifyOnChange$
.pipe(filter(({ type }) => type === 'item' || type === 'loading'), tap(({ type }) => {
if (type === 'item' && this.loading)
this.loading = false;
}), startWith(this.items), switchMap(() => SearchUtil.useSearchMatcher(this.items, {
bindLabel: this.bindLabel,
search$: this.search$,
searchable: this.searchable,
customSearchMatcherFn: this.searchMatcherFn,
})), takeUntil(this.destroy$))
.subscribe((items) => {
this.filteredItems = items;
if (!this.isOpen)
return;
// Handle on demand select options.
this.injectSelectOptions();
});
this.search$
.pipe(skip(1), filter(() => this.searchable), distinctUntilChanged(), takeUntil(this.destroy$))
.subscribe((value) => {
if (!this.loading)
this.loading = true;
this.search.emit(value);
this.cdr.detectChanges();
});
}
ngAfterContentInit() {
this.cdr.detectChanges();
}
ngAfterViewInit() {
var _a, _b;
this._notifyOnChange$
.pipe(filter(({ type }) => type === 'arrowPlacement' || type === 'multiple'), startWith({ arrowPlacement: this.arrowPlacement, multiple: this.multiple }), map(() => ({ arrowPlacement: this.arrowPlacement, multiple: this.multiple })), distinctUntilChanged((prev, current) => JSON.stringify(prev) === JSON.stringify(current)), delay(0), takeUntil(this.destroy$))
.subscribe(({ arrowPlacement, multiple }) => {
StyleUtil.handleInputWrapperStyle({
inputWrapperElement: this.inputWrapperElement,
arrowPlacement: arrowPlacement,
multiple: multiple,
});
});
this._notifyOnChange$
.pipe(filter(({ type }) => type === 'disabled' || type === 'readonly'), startWith({ disabled: this.disabled, readonly: this.readonly }), map(() => ({ disabled: this.disabled, readonly: this.readonly })), distinctUntilChanged((prev, current) => JSON.stringify(prev) === JSON.stringify(current)), delay(0), takeUntil(this.destroy$))
.subscribe(({ disabled, readonly }) => {
var _a, _b;
if (typeof disabled === 'boolean')
(_a = this.onDisable) === null || _a === void 0 ? void 0 : _a.call(this, disabled);
if (typeof readonly === 'boolean')
(_b = this.onReadonly) === null || _b === void 0 ? void 0 : _b.call(this, readonly);
StyleUtil.setInputWrapperCursorState({ readonly, disabled }, { inputWrapperElement: this.inputWrapperElement, searchable: this.searchable });
});
(_b = (_a = this.ngControl) === null || _a === void 0 ? void 0 : _a.statusChanges) === null || _b === void 0 ? void 0 : _b.pipe(map((status) => {
var _a, _b, _c, _d;
return ({
status: status,
state: {
pristine: (_b = (_a = this.ngControl) === null || _a === void 0 ? void 0 : _a.control) === null || _b === void 0 ? void 0 : _b.pristine,
untouched: (_d = (_c = this.ngControl) === null || _c === void 0 ? void 0 : _c.control) === null || _d === void 0 ? void 0 : _d.untouched,
},
});
}), distinctUntilChanged((prev, curr) => JSON.stringify(prev) === JSON.stringify(curr)), delay(0), takeUntil(this.destroy$)).subscribe(({ status, state }) => {
var _a, _b, _c;
if (status === 'VALID') {
(_a = this.onValidate) === null || _a === void 0 ? void 0 : _a.call(this, 'valid', state);
}
else if (status === 'INVALID') {
(_b = this.onValidate) === null || _b === void 0 ? void 0 : _b.call(this, 'invalid', state);
}
else {
(_c = this.onValidate) === null || _c === void 0 ? void 0 : _c.call(this, undefined, state);
}
});
}
ngOnDestroy() {
this.close();
this.destroy$.next(1);
this.destroy$.complete();
}
writeValue(value) {
this.value = value;
}
registerOnChange(fn) {
this.onChange = fn;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
setDisabledState(isDisabled) {
this.disabled = isDisabled;
}
onClickWrapperElement() {
this.searchable ? this.open() : this.toggle();
}
registerOnDisable(fn) {
this.onDisable = fn;
}
registerOnReadonly(fn) {
this.onReadonly = fn;
}
registerOnValidate(fn) {
this.onValidate = fn;
}
/**
* Open select dropdown programmatically.
*/
open() {
var _a;
if (this.disabled || this.readonly || this.isOpen)
return;
this.isOpen = true;
this.openSelectDropdownPortal();
this.injectSelectOptions();
this.scrollToActiveOption();
this.doAutoUpdateDropdownPosition();
this.cdr.detectChanges();
// If searchable, focus to text input
// and select options
if (this.searchable) {
(_a = this.searchInput) === null || _a === void 0 ? void 0 : _a.nativeElement.focus();
}
}
/**
* Close select dropdown programmatically.
*/
close() {
var _a, _b;
if (this.disabled || this.readonly || !this.isOpen)
return;
this.isOpen = false;
this.closeSelectDropdownPortal();
(_a = this.cleanup) === null || _a === void 0 ? void 0 : _a.call(this);
(_b = this.onTouched) === null || _b === void 0 ? void 0 : _b.call(this);
this.cdr.detectChanges();
// Clear search if searchable is allowed
if (this.searchable)
this.search$.next('');
// Reset loading state
this.loading = false;
}
/**
* Toggle select dropdown programmatically.
*/
toggle() {
if (this.disabled || this.readonly)
return;
this.isOpen ? this.close() : this.open();
}
clearValue(event) {
var _a;
if (!this.clearable || this.disabled)
return;
event.preventDefault();
event.stopPropagation();
this.value = '';
if (this.searchable)
this.search$.next('');
this.cdr.markForCheck();
(_a = this.onTouched) === null || _a === void 0 ? void 0 : _a.call(this);
}
removeItem(item) {
if (!this.multiple)
return;
this.patchNextValue(item[this.bindValue]);
}
onSearchValueChange(event) {
var _a;
const value = event.target.value;
this.search$.next(value);
(_a = this.onTouched) === null || _a === void 0 ? void 0 : _a.call(this);
}
/**
* Update value from upcoming.
*
* If `multiple` is true, it will add/push value if not exist
* or will remove value when already exist.
*/
patchNextValue(value) {
this.value = ValueUtil.normalizeValue(this.value, value, { multiple: this.multiple });
}
/**
* Normalize input items to object where the value will be converted to string.
* @param items Input items.
* @returns Normalized items to object key-value pairs.
*/
normalizeInputItems(items) {
return items
.map((item) => {
if (typeof item === 'string') {
return { [this.bindLabel]: item, [this.bindValue]: item };
}
if (typeof item === 'number') {
return { [this.bindLabel]: item.toString(), [this.bindValue]: item.toString() };
}
if (item && typeof item === 'object' && !!Object.keys(item).length) {
let value = item[this.bindValue];
if (!['string', 'number'].includes(typeof value))
return null;
if (typeof value === 'number')
value = value.toString();
return Object.assign(Object.assign({}, item), { [this.bindValue]: value });
}
return null;
})
.filter(Boolean);
}
openSelectDropdownPortal() {
this.portalRef = ViewElementUtil.createSelectDropdownPortal({
applicationRef: this.appRef,
environmentInjector: this.envInjector,
parentElementInjector: this.injector,
renderer: this.renderer,
inputWrapperElement: this.inputWrapperElement,
portalClass: this.portalClass,
});
this.renderer.appendChild(this.document.body, this.portalRef.location.nativeElement);
}
closeSelectDropdownPortal() {
var _a;
(_a = this.portalRef) === null || _a === void 0 ? void 0 : _a.destroy();
this.portalRef = undefined;
}
injectSelectOptions() {
if (!this.portalRef)
return;
ItemInjectionUtil.injectSelectOptions(this.filteredItems, {
appRef: this.appRef,
bindLabel: this.bindLabel,
bindValue: this.bindValue,
envInjector: this.envInjector,
portalRef: this.portalRef,
renderer: this.renderer,
clickFn: this.handleOnClickSelectOption.bind(this),
loading: this.loading,
}, { loading: this.loadingTemplate, noItem: this.noItemTemplate, option: this.optionTemplate });
}
handleOnClickSelectOption(item) {
return () => {
var _a, _b;
if (item.disabled)
return;
this.patchNextValue(item[this.bindValue]);
(_a = this.onTouched) === null || _a === void 0 ? void 0 : _a.call(this);
// Clear searchable value if searchable.
if (this.searchable)
this.search$.next('');
// Don't close the dropdown if selection is multiple.
if (!this.multiple)
this.close();
// Re-focus to search input on multiple selection and searchable.
if (this.multiple && this.searchable) {
(_b = this.searchInput) === null || _b === void 0 ? void 0 : _b.nativeElement.focus();
}
};
}
handleCloseOptionsClickOutside() {
this.ngZone.runOutsideAngular(() => {
fromEvent(this.document, 'click')
.pipe(filter(() => this.isOpen), takeUntil(this.destroy$))
.subscribe((event) => {
var _a;
const { clickOutside, clickTrigger } = getClickType(event, [this.inputWrapperElement], [(_a = this.portalRef) === null || _a === void 0 ? void 0 : _a.location.nativeElement]);
if (clickOutside && !clickTrigger)
this.close();
});
});
}
scrollToActiveOption() {
setTimeout(() => {
var _a;
const selectedElement = (_a = this.portalRef) === null || _a === void 0 ? void 0 : _a.location.nativeElement.querySelector('.d-select-option-selected');
if (selectedElement && this.portalRef) {
this.portalRef.location.nativeElement.scrollTop = selectedElement.offsetTop;
}
}, 0);
}
doAutoUpdateDropdownPosition() {
this.ngZone.runOutsideAngular(() => {
var _a, _b;
if (!this.inputWrapperElement || !((_a = this.portalRef) === null || _a === void 0 ? void 0 : _a.location.nativeElement))
return;
this.cleanup = updateFloatingPosition({
triggerElement: this.inputWrapperElement,
floatingElement: (_b = this.portalRef) === null || _b === void 0 ? void 0 : _b.location.nativeElement,
placement: 'bottom-start',
autoUpdate: true,
middleware: {
flip: true,
shift: true,
},
});
});
}
}
DokuSelect.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuSelect, deps: [{ token: i0.EnvironmentInjector }, { token: i0.ApplicationRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: DOCUMENT }, { token: i1$1.NgControl, optional: true, self: true }, { token: DokuFormField, optional: true }], target: i0.ɵɵFactoryTarget.Component });
DokuSelect.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuSelect, isStandalone: true, selector: "doku-select", inputs: { items: "items", bindLabel: "bindLabel", bindValue: "bindValue", value: "value", placeholder: "placeholder", portalClass: "portalClass", multiple: "multiple", truncateLabel: "truncateLabel", arrowPlacement: "arrowPlacement", disabled: "disabled", readonly: "readonly", searchable: "searchable", isAsync: "isAsync", searchMatcherFn: "searchMatcherFn", clearable: "clearable" }, outputs: { valueChange: "valueChange", search: "search" }, host: { properties: { "class.d-select-multiple": "this.multiple", "class.d-select-truncated-label": "this.truncateLabel", "class": "this.classes" } }, providers: [{ provide: DOKU_FORM_FIELD_ACCESSOR, useExisting: DokuSelect }], queries: [{ propertyName: "labelTemplate", first: true, predicate: DokuSelectLabelTemplate, descendants: true }, { propertyName: "optionTemplate", first: true, predicate: DokuSelectOptionTemplate, descendants: true }, { propertyName: "noItemTemplate", first: true, predicate: DokuSelectNoItemTemplate, descendants: true }, { propertyName: "loadingTemplate", first: true, predicate: DokuSelectLoadingTemplate, descendants: true }], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], exportAs: ["dokuSelect"], ngImport: i0, template: "<div class=\"d-select-value-container\">\n <div *ngIf=\"shouldShowPlaceholder\" class=\"d-select-placeholder\" doku-typography variant=\"body-m\">\n <ng-container>{{ placeholder || \" \" }}</ng-container>\n </div>\n\n <ng-container *ngIf=\"shouldShowValueSingleSelect || shouldShowValueMultipleSelect\">\n <ng-container\n *ngIf=\"labelTemplate && !multiple\"\n [ngTemplateOutlet]=\"labelTemplate.templateRef\"\n [ngTemplateOutletContext]=\"{ $implicit: valueDetails[0] }\"\n ></ng-container>\n\n <ng-container *ngIf=\"labelTemplate && multiple\">\n <ng-container *ngFor=\"let item of valueDetails\">\n <ng-container\n [ngTemplateOutlet]=\"labelTemplate.templateRef\"\n [ngTemplateOutletContext]=\"{ $implicit: item, removeItem: removeItem.bind(this) }\"\n ></ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"!labelTemplate\">\n <div *ngFor=\"let item of valueDetails\" class=\"d-select-value\">\n <ng-container *ngIf=\"!multiple\">{{ item[bindLabel] }}</ng-container>\n <ng-container *ngIf=\"multiple\">\n <div (click)=\"removeItem(item)\">\n <ng-container *ngTemplateOutlet=\"iconClose\"></ng-container>\n </div>\n <span> </span>\n <div doku-typography variant=\"label\">{{ item[bindLabel] }}</div>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n\n <input\n #searchInput\n *ngIf=\"searchable && !disabled && !readonly\"\n type=\"text\"\n class=\"d-select-searchable-input\"\n [class.relative]=\"hasValue\"\n [class.opened]=\"isOpen\"\n [value]=\"search$.value\"\n (input)=\"onSearchValueChange($event)\"\n />\n</div>\n\n<div\n *ngIf=\"clearable && hasValue && !disabled\"\n class=\"d-select-clearable\"\n (click)=\"clearValue($event)\"\n>\n <ng-container *ngTemplateOutlet=\"iconClose\"></ng-container>\n</div>\n\n<div class=\"d-select-arrow\" [ngClass]=\"arrowPlacement\">\n <ng-template *ngTemplateOutlet=\"iconArrow\"></ng-template>\n</div>\n\n<ng-template #iconArrow>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path\n d=\"M7.56745 14.4236L4.80999 10.5154C4.48457 10.0556 4.74905 9.33337 5.24293 9.33337H10.7578C10.8684 9.33326 10.9766 9.37265 11.0695 9.44683C11.1625 9.52101 11.2362 9.62684 11.2819 9.75164C11.3276 9.87644 11.3433 10.0149 11.3271 10.1505C11.311 10.2861 11.2636 10.413 11.1908 10.5161L8.43333 14.4229C8.37936 14.4995 8.31281 14.5609 8.23814 14.6029C8.16346 14.645 8.0824 14.6667 8.00039 14.6667C7.91838 14.6667 7.83731 14.645 7.76264 14.6029C7.68797 14.5609 7.62142 14.4995 7.56745 14.4229V14.4236Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M7.56745 1.57638L4.80999 5.48461C4.48457 5.94444 4.74905 6.66663 5.24293 6.66663H10.7578C10.8684 6.66674 10.9766 6.62735 11.0695 6.55317C11.1625 6.47899 11.2362 6.37316 11.2819 6.24836C11.3276 6.12356 11.3433 5.98508 11.3271 5.84949C11.311 5.71391 11.2636 5.58698 11.1908 5.48389L8.43333 1.5771C8.37936 1.50052 8.31281 1.43915 8.23814 1.3971C8.16346 1.35505 8.0824 1.33329 8.00039 1.33329C7.91838 1.33329 7.83731 1.35505 7.76264 1.3971C7.68797 1.43915 7.62142 1.50052 7.56745 1.5771V1.57638Z\"\n fill=\"currentColor\"\n />\n </svg>\n</ng-template>\n\n<ng-template #iconClose>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12.2544 4.14598C12.301 4.19242 12.3379 4.2476 12.3631 4.30834C12.3883 4.36909 12.4013 4.43421 12.4013 4.49998C12.4013 4.56575 12.3883 4.63087 12.3631 4.69161C12.3379 4.75236 12.301 4.80753 12.2544 4.85398L5.25441 11.854C5.16053 11.9479 5.03319 12.0006 4.90041 12.0006C4.76764 12.0006 4.6403 11.9479 4.54641 11.854C4.45253 11.7601 4.39978 11.6328 4.39978 11.5C4.39978 11.3672 4.45253 11.2399 4.54641 11.146L11.5464 4.14598C11.5929 4.09941 11.648 4.06247 11.7088 4.03727C11.7695 4.01206 11.8346 3.99908 11.9004 3.99908C11.9662 3.99908 12.0313 4.01206 12.092 4.03727C12.1528 4.06247 12.208 4.09941 12.2544 4.14598Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M4.54643 4.14598C4.49987 4.19242 4.46292 4.2476 4.43772 4.30834C4.41251 4.36909 4.39954 4.43421 4.39954 4.49998C4.39954 4.56575 4.41251 4.63087 4.43772 4.69161C4.46292 4.75236 4.49987 4.80753 4.54643 4.85398L11.5464 11.854C11.6403 11.9479 11.7677 12.0006 11.9004 12.0006C12.0332 12.0006 12.1605 11.9479 12.2544 11.854C12.3483 11.7601 12.4011 11.6328 12.4011 11.5C12.4011 11.3672 12.3483 11.2399 12.2544 11.146L5.25443 4.14598C5.20798 4.09941 5.15281 4.06247 5.09206 4.03727C5.03132 4.01206 4.9662 3.99908 4.90043 3.99908C4.83466 3.99908 4.76954 4.01206 4.7088 4.03727C4.64805 4.06247 4.59288 4.09941 4.54643 4.14598Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n />\n </svg>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: DokuTypographyModule }, { kind: "component", type: DokuTypography, selector: "[doku-typography]", inputs: ["variant"], exportAs: ["dokuTypography"] }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuSelect, decorators: [{
type: Component,
args: [{ selector: 'doku-select', exportAs: 'dokuSelect', standalone: true, imports: [CommonModule, DokuTypographyModule, FormsModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: DOKU_FORM_FIELD_ACCESSOR, useExisting: DokuSelect }], template: "<div class=\"d-select-value-container\">\n <div *ngIf=\"shouldShowPlaceholder\" class=\"d-select-placeholder\" doku-typography variant=\"body-m\">\n <ng-container>{{ placeholder || \" \" }}</ng-container>\n </div>\n\n <ng-container *ngIf=\"shouldShowValueSingleSelect || shouldShowValueMultipleSelect\">\n <ng-container\n *ngIf=\"labelTemplate && !multiple\"\n [ngTemplateOutlet]=\"labelTemplate.templateRef\"\n [ngTemplateOutletContext]=\"{ $implicit: valueDetails[0] }\"\n ></ng-container>\n\n <ng-container *ngIf=\"labelTemplate && multiple\">\n <ng-container *ngFor=\"let item of valueDetails\">\n <ng-container\n [ngTemplateOutlet]=\"labelTemplate.templateRef\"\n [ngTemplateOutletContext]=\"{ $implicit: item, removeItem: removeItem.bind(this) }\"\n ></ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"!labelTemplate\">\n <div *ngFor=\"let item of valueDetails\" class=\"d-select-value\">\n <ng-container *ngIf=\"!multiple\">{{ item[bindLabel] }}</ng-container>\n <ng-container *ngIf=\"multiple\">\n <div (click)=\"removeItem(item)\">\n <ng-container *ngTemplateOutlet=\"iconClose\"></ng-container>\n </div>\n <span> </span>\n <div doku-typography variant=\"label\">{{ item[bindLabel] }}</div>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n\n <input\n #searchInput\n *ngIf=\"searchable && !disabled && !readonly\"\n type=\"text\"\n class=\"d-select-searchable-input\"\n [class.relative]=\"hasValue\"\n [class.opened]=\"isOpen\"\n [value]=\"search$.value\"\n (input)=\"onSearchValueChange($event)\"\n />\n</div>\n\n<div\n *ngIf=\"clearable && hasValue && !disabled\"\n class=\"d-select-clearable\"\n (click)=\"clearValue($event)\"\n>\n <ng-container *ngTemplateOutlet=\"iconClose\"></ng-container>\n</div>\n\n<div class=\"d-select-arrow\" [ngClass]=\"arrowPlacement\">\n <ng-template *ngTemplateOutlet=\"iconArrow\"></ng-template>\n</div>\n\n<ng-template #iconArrow>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path\n d=\"M7.56745 14.4236L4.80999 10.5154C4.48457 10.0556 4.74905 9.33337 5.24293 9.33337H10.7578C10.8684 9.33326 10.9766 9.37265 11.0695 9.44683C11.1625 9.52101 11.2362 9.62684 11.2819 9.75164C11.3276 9.87644 11.3433 10.0149 11.3271 10.1505C11.311 10.2861 11.2636 10.413 11.1908 10.5161L8.43333 14.4229C8.37936 14.4995 8.31281 14.5609 8.23814 14.6029C8.16346 14.645 8.0824 14.6667 8.00039 14.6667C7.91838 14.6667 7.83731 14.645 7.76264 14.6029C7.68797 14.5609 7.62142 14.4995 7.56745 14.4229V14.4236Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M7.56745 1.57638L4.80999 5.48461C4.48457 5.94444 4.74905 6.66663 5.24293 6.66663H10.7578C10.8684 6.66674 10.9766 6.62735 11.0695 6.55317C11.1625 6.47899 11.2362 6.37316 11.2819 6.24836C11.3276 6.12356 11.3433 5.98508 11.3271 5.84949C11.311 5.71391 11.2636 5.58698 11.1908 5.48389L8.43333 1.5771C8.37936 1.50052 8.31281 1.43915 8.23814 1.3971C8.16346 1.35505 8.0824 1.33329 8.00039 1.33329C7.91838 1.33329 7.83731 1.35505 7.76264 1.3971C7.68797 1.43915 7.62142 1.50052 7.56745 1.5771V1.57638Z\"\n fill=\"currentColor\"\n />\n </svg>\n</ng-template>\n\n<ng-template #iconClose>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12.2544 4.14598C12.301 4.19242 12.3379 4.2476 12.3631 4.30834C12.3883 4.36909 12.4013 4.43421 12.4013 4.49998C12.4013 4.56575 12.3883 4.63087 12.3631 4.69161C12.3379 4.75236 12.301 4.80753 12.2544 4.85398L5.25441 11.854C5.16053 11.9479 5.03319 12.0006 4.90041 12.0006C4.76764 12.0006 4.6403 11.9479 4.54641 11.854C4.45253 11.7601 4.39978 11.6328 4.39978 11.5C4.39978 11.3672 4.45253 11.2399 4.54641 11.146L11.5464 4.14598C11.5929 4.09941 11.648 4.06247 11.7088 4.03727C11.7695 4.01206 11.8346 3.99908 11.9004 3.99908C11.9662 3.99908 12.0313 4.01206 12.092 4.03727C12.1528 4.06247 12.208 4.09941 12.2544 4.14598Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M4.54643 4.14598C4.49987 4.19242 4.46292 4.2476 4.43772 4.30834C4.41251 4.36909 4.39954 4.43421 4.39954 4.49998C4.39954 4.56575 4.41251 4.63087 4.43772 4.69161C4.46292 4.75236 4.49987 4.80753 4.54643 4.85398L11.5464 11.854C11.6403 11.9479 11.7677 12.0006 11.9004 12.0006C12.0332 12.0006 12.1605 11.9479 12.2544 11.854C12.3483 11.7601 12.4011 11.6328 12.4011 11.5C12.4011 11.3672 12.3483 11.2399 12.2544 11.146L5.25443 4.14598C5.20798 4.09941 5.15281 4.06247 5.09206 4.03727C5.03132 4.01206 4.9662 3.99908 4.90043 3.99908C4.83466 3.99908 4.76954 4.01206 4.7088 4.03727C4.64805 4.06247 4.59288 4.09941 4.54643 4.14598Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n />\n </svg>\n</ng-template>\n" }]
}], ctorParameters: function () {
return [{ type: i0.EnvironmentInjector }, { type: i0.ApplicationRef }, { type: i0.NgZone }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: Document, decorators: [{
type: Inject,
args: [DOCUMENT]
}] }, { type: i1$1.NgControl, decorators: [{
type: Optional
}, {
type: Self
}] }, { type: DokuFormField, decorators: [{
type: Optional
}, {
type: Inject,
args: [DokuFormField]
}] }];
}, propDecorators: { items: [{
type: Input
}], bindLabel: [{
type: Input
}], bindValue: [{
type: Input
}], value: [{
type: Input
}], placeholder: [{
type: Input
}], portalClass: [{
type: Input
}], multiple: [{
type: HostBinding,
args: ['class.d-select-multiple']
}, {
type: Input
}], truncateLabel: [{
type: HostBinding,
args: ['class.d-select-truncated-label']
}, {
type: Input
}], arrowPlacement: [{
type: Input
}], disabled: [{
type: Input
}], readonly: [{
type: Input
}], searchable: [{
type: Input
}], isAsync: [{
type: Input
}], searchMatcherFn: [{
type: Input
}], clearable: [{
type: Input
}], valueChange: [{
type: Output
}], search: [{
type: Output
}], labelTemplate: [{
type: ContentChild,
args: [DokuSelectLabelTemplate]
}], optionTemplate: [{
type: ContentChild,
args: [DokuSelectOptionTemplate]
}], noItemTemplate: [{
type: ContentChild,
args: [DokuSelectNoItemTemplate]
}], loadingTemplate: [{
type: ContentChild,
args: [DokuSelectLoadingTemplate]
}], searchInput: [{
type: ViewChild,
args: ['searchInput']
}], classes: [{
type: HostBinding,
args: ['class']
}] } });
class DokuSelectModule {
}
DokuSelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
DokuSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: DokuSelectModule, imports: [DokuSelect,
DokuSelectLabelTemplate,
DokuSelectOptionTemplate,
DokuSelectNoItemTemplate,
DokuSelectLoadingTemplate], exports: [DokuSelect,
DokuSelectLabelTemplate,
DokuSelectOptionTemplate,
DokuSelectNoItemTemplate,
DokuSelectLoadingTemplate] });
DokuSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuSelectModule, imports: [DokuSelect] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuSelectModule, decorators: [{
type: NgModule,
args: [{
imports: [
DokuSelect,
DokuSelectLabelTemplate,
DokuSelectOptionTemplate,
DokuSelectNoItemTemplate,
DokuSelectLoadingTemplate,
],
exports: [
DokuSelect,
DokuSelectLabelTemplate,
DokuSelectOptionTemplate,
DokuSelectNoItemTemplate,
DokuSelectLoadingTemplate,
],
}]
}] });
class CalendarUtil {
static generateMonthSelectOptions(props) {
const locale = (props === null || props === void 0 ? void 0 : props.locale) || this.DEFAULT_LOCALE;
return Array.from({ length: 12 }).map((_, idx) => {
let disabledByMinDate = false;
if (props.minDate) {
const shouldApply = props.minDate.getFullYear() === props.activeYear;
if (shouldApply)
disabledByMinDate = idx < props.minDate.getMonth();
}
let disabledByMaxDate = false;
if (props.maxDate) {
const shouldApply = props.maxDate.getFullYear() === props.activeYear;
if (shouldApply)
disabledByMaxDate = idx > props.maxDate.getMonth();
}
return {
label: new Date(0, idx).toLocaleString(locale, { month: 'short' }),
value: idx.toString(),
disabled: disabledByMinDate || disabledByMaxDate,
};
});
}
static generateYearSelectOptions(props) {
const numberOfYearsDisplayed = 21;
const startYear = props.activeYear - Math.floor(numberOfYearsDisplayed / 2);
return Array.from({ length: numberOfYearsDisplayed }, (_, i) => {
const year = startYear + i;
const disabledByMinDate = props.minDate ? year < props.minDate.getFullYear() : false;
const disabledByMaxDate = props.maxDate ? year > props.maxDate.getFullYear() : false;
return {
label: year.toString(),
value: year.toString(),
disabled: disabledByMinDate || disabledByMaxDate,
};
});
}
static generateWeekdays(options) {
const locale = (options === null || options === void 0 ? void 0 : options.locale) || this.DEFAULT_LOCALE;
return Array.from({ length: 7 }).map((_, idx) => {
let label = new Date(0, 0, idx + 1).toLocaleString(locale, { weekday: 'short' });
if (locale.startsWith('en'))
label = label.substring(0, 2);
return label;
});
}
static generateDates({ month, year }) {
const totalDates = new Date(year, month + 1, 0).getDate();
return Array.from({ length: totalDates }).map((_, idx) => new Date(year, month, idx + 1));
}
static isValidMinYear(minDate, checkedDate) {
return checkedDate.getFullYear() >= minDate.getFullYear();
}
static isValidMinMonth(minDate, checkedDate) {
if (!this.isValidMinYear(minDate, checkedDate))
return false;
const sameYear = minDate.getFullYear() === checkedDate.getFullYear();
return sameYear ? checkedDate.getMonth() >= minDate.getMonth() : true;
}
static isValidMinDate(minDate, checkedDate, options) {
if (!this.isValidMinMonth(minDate, checkedDate))
return false;
if (options === null || options === void 0 ? void 0 : options.useStrictTime) {
const result = (minDate.getTime() - checkedDate.getTime()) / 1000;
return result < this.oneDayInSecond;
}
else {
return checkedDate >= minDate;
}
}
static isValidMaxYear(maxDate, checkedDate) {
return checkedDate.getFullYear() <= maxDate.getFullYear();
}
static isValidMaxMonth(maxDate, checkedDate) {
if (!this.isValidMaxYear(maxDate, checkedDate))
return false;
const sameYear = maxDate.getFullYear() === checkedDate.getFullYear();
return sameYear ? checkedDate.getMonth() <= maxDate.getMonth() : true;
}
static isValidMaxDate(maxDate, checkedDate, options) {
if (!this.isValidMaxMonth(maxDate, checkedDate))
return false;
if (options === null || options === void 0 ? void 0 : options.useStrictTime) {
const result = (checkedDate.getTime() - maxDate.getTime()) / 1000;
return result <= 0;
}
else {
return checkedDate <= maxDate;
}
}
static isSameDate(date, anotherDate) {
const sameYear = (date === null || date === void 0 ? void 0 : date.getFullYear()) === (anotherDate === null || anotherDate === void 0 ? void 0 : anotherDate.getFullYear());
const sameMonth = (date === null || date === void 0 ? void 0 : date.getMonth()) === (anotherDate === null || anotherDate === void 0 ? void 0 : anotherDate.getMonth());
const sameDate = (date === null || date === void 0 ? void 0 : date.getDate()) === (anotherDate === null || anotherDate === void 0 ? void 0 : anotherDate.getDate());
return sameYear && sameMonth && sameDate;
}
static isInvalidMinOrMaxDate(date, minDate, maxDate, options) {
const invalidMinDate = minDate
? !CalendarUtil.isValidMinDate(minDate, date, { useStrictTime: options === null || options === void 0 ? void 0 : options.useStrictTime })
: false;
const invalidMaxDate = maxDate
? !CalendarUtil.isValidMaxDate(maxDate, date, { useStrictTime: options === null || options === void 0 ? void 0 : options.useStrictTime })
: false;
return invalidMinDate || invalidMaxDate;
}
}
CalendarUtil.DEFAULT_LOCALE = 'en-US';
CalendarUtil.oneDayInSecond = 60 * 60 * 24;
class DokuDatePickerBaseProps {
constructor() {
this._value = { start: null, end: null };
this._minDate = null;
this._maxDate = null;
this._disabled = false;
this._readonly = false;
this.useDateRange = false;
this.valueChange = new EventEmitter();
this.notifyChange$ = new ReplaySubject();
}
get value() {
return this._value;
}
set value(date) {
if (date && typeof date === 'object' && Object.hasOwn(date, 'start')) {
const val = date;
this._value = { start: this.normalizeDate(val.start), end: this.normalizeDate(val.end) };
}
else {
const val = date;
this._value = { start: this.normalizeDate(val), end: null };
}
this.notifyChange$.next('value');
}
get minDate() {
return this._minDate;
}
set minDate(date) {
this._minDate = this.normalizeDate(date);
this.notifyChange$.next('minDate');
}
get maxDate() {
return this._maxDate;
}
set maxDate(date) {
this._maxDate = this.normalizeDate(date);
this.notifyChange$.next('maxDate');
}
get disabled() {
return this._disabled;
}
set disabled(value) {
this._disabled = value;
this.notifyChange$.next('disabled');
}
get readonly() {
return this._readonly;
}
set readonly(value) {
this._readonly = value;
this.notifyChange$.next('readonly');
}
normalizeDate(date) {
if (!date)
return null;
if (!(date instanceof Date || typeof date === 'string'))
return null;
return date instanceof Date ? date : new Date(date);
}
}
DokuDatePickerBaseProps.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuDatePickerBaseProps, deps: [], target: i0.ɵɵFactoryTarget.Component });
DokuDatePickerBaseProps.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuDatePickerBaseProps, isStandalone: true, selector: "doku-date-picker-base-props", inputs: { value: "value", minDate: "minDate", maxDate: "maxDate", disabled: "disabled", readonly: "readonly", useDateRange: "useDateRange" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.d-date-picker-disabled": "this.disabled", "class.d-date-picker-readonly": "this.readonly" } }, exportAs: ["dokuDatePickerBaseProps"], ngImport: i0, template: '', isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuDatePickerBaseProps, decorators: [{
type: Component,
args: [{
selector: 'doku-date-picker-base-props',
exportAs: 'dokuDatePickerBaseProps',
standalone: true,
imports: [CommonModule],
template: '',
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}], propDecorators: { value: [{
type: Input
}], minDate: [{
type: Input
}], maxDate: [{
type: Input
}], disabled: [{
type: HostBinding,
args: ['class.d-date-picker-disabled']
}, {
type: Input
}], readonly: [{
type: HostBinding,
args: ['class.d-date-picker-readonly']
}, {
type: Input
}], useDateRange: [{
type: Input
}], valueChange: [{
type: Output
}] } });
const DOKU_DATE_PICKER_STRICT_TIME = new InjectionToken('DOKU_DATE_PICKER_STRICT_TIME');
class DokuDatePickerBase extends DokuDatePickerBaseProps {
get activeCalendar() {
// Always set the date to 1st so that it doesn't break while navigating to month/year
// because of different total days.
return new Date(this._activeCalendar.getFullYear(), this._activeCalendar.getMonth(), 1);
}
set activeCalendar(date) {
this._activeCalendar = date;
}
get calendarHeaders() {
return this.calendars.map((_, idx) => {
const date = new Date(this.activeCalendar);
date.setMonth(date.getMonth() + idx);
const month = date.toLocaleString(this.localeId, { month: 'long' });
const year = date.getFullYear();
return `${month} ${year}`;
});
}
constructor(localeId, ngZone, useStrictTime) {
super();
this.localeId = localeId;
this.ngZone = ngZone;
this.useStrictTime = useStrictTime;
this.classes = 'd-date-picker-base';
this.calendars = [];
this._activeCalendar = new Date();
this.canNavigateToPreviousMonth = false;
this.canNavigateToNextMonth = false;
this.destroy$ = new Subject();
}
get monthSelectOptions() {
return CalendarUtil.generateMonthSelectOptions({
locale: this.localeId,
minDate: this.minDate,
maxDate: this.maxDate,
activeYear: parseInt(this.activeYear),
});
}
get yearSelectOptions() {
return CalendarUtil.generateYearSelectOptions({
activeYear: parseInt(this.activeYear),
minDate: this.minDate,
maxDate: this.maxDate,
});
}
get weekdays() {
return CalendarUtil.generateWeekdays({ locale: this.localeId });
}
get activeMonth() {
return this.activeCalendar.getMonth().toString();
}
get activeYear() {
return this.activeCalendar.getFullYear().toString();
}
get isMobileScreen() {
return window.matchMedia(DokuBreakpoint.mobile).matches;
}
ngOnInit() {
var _a;
this.activeCalendar = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.start) || new Date();
this.generateCalendar();
this.notifyChange$
.pipe(filter((change) => change === 'value' || change === 'minDate' || change === 'maxDate'), map(() => this.value), distinctUntilChanged((prev, current) => JSON.stringify(prev) === JSON.stringify(current)), skip(1), takeUntil(this.destroy$))
.subscribe((value) => {
this.handleDateState();
this.valueChange.emit(value);
});
this.notifyChange$
.pipe(filter((change) => change === 'minDate' || change === 'maxDate'), map(() => ({ minDate: this.minDate, maxDate: this.maxDate })), distinctUntilChanged((prev, current) => JSON.stringify(prev) === JSON.stringify(current)), takeUntil(this.destroy$))
.subscribe(() => {
this.handleDateState();
});
}
ngOnDestroy() {
this.destroy$.next(true);
this.destroy$.complete();
}
navigateTo(date) {
const comingDate = new Date(date);
if (this.minDate) {
const valid = CalendarUtil.isValidMinMonth(this.minDate, comingDate);
if (!valid)
return;
}
if (this.maxDate) {
const valid = CalendarUtil.isValidMaxMonth(this.maxDate, comingDate);
if (!valid)
return;
}
this.activeCalendar = comingDate;
this.generateCalendar();
}
navigateToPreviousMonth() {
const date = new Date(this.activeCalendar);
date.setMonth(date.getMonth() - 1);
this.navigateTo(date);
}
navigateToNextMonth() {
const date = new Date(this.activeCalendar);
date.setMonth(date.getMonth() + 1);
this.navigateTo(date);
}
onMonthChange(value) {
if (Array.isArray(value))
return;
const date = new Date(this.activeCalendar);
date.setMonth(parseInt(value));
this.navigateTo(date);
}
onYearChange(value) {
if (Array.isArray(value))
return;
const date = new Date(this.activeCalendar);
date.setFullYear(parseInt(value));
this.navigateTo(date);
}
onSelectDate(date) {
if (!date || date.isDisabled || this.disabled)
return;
if (this.useDateRange) {
this.handleSelectDateRange(date);
}
else {
this.value = this.handleStrictTime(date.day, this.value.start);
}
}
onDayMouseEnter(date) {
if (!this.useDateRange)
return;
this.ngZone.runOutsideAngular(() => {
var _a;
if (!((_a = this.value) === null || _a === void 0 ? void 0 : _a.start) || !date)
return;
const dateItems = this.calendars.reduce((prev, current) => [...prev, ...current.dates], []);
if (date.day > this.value.start && !this.value.end) {
const hoveredDay = dateItems.filter((item) => { var _a; return item && ((_a = this.value) === null || _a === void 0 ? void 0 : _a.start) && item.day > this.value.start && item.day <= date.day; });
hoveredDay.forEach((item) => {
if (item && !item.isDisabled)
item.isSelectedRange = true;
});
}
});
}
onDayMouseLeave(date) {
if (!this.useDateRange)
return;
this.ngZone.runOutsideAngular(() => {
var _a;
if (!((_a = this.value) === null || _a === void 0 ? void 0 : _a.start) || !date)
return;
const dateItems = this.calendars.reduce((prev, current) => [...prev, ...current.dates], []);
if (!this.value.end) {
dateItems.forEach((item) => {
if (item)
item.isSelectedRange = false;
});
}
});
}
handleSelectDateRange(date) {
var _a, _b, _c, _d, _e;
let startDate = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.start) || date.day;
let endDate = ((_b = this.value) === null || _b === void 0 ? void 0 : _b.end) || null;
if (((_c = this.value) === null || _c === void 0 ? void 0 : _c.start) && date.day < this.value.start) {
startDate = date.day;
}
if (((_d = this.value) === null || _d === void 0 ? void 0 : _d.start) && date.day >= this.value.start) {
endDate = date.day;
}
if (((_e = this.value) === null || _e === void 0 ? void 0 : _e.start) && this.value.end) {
startDate = date.day;
endDate = null;
}
this.value = { start: startDate, end: endDate };
}
generateDates(props) {
const dates = CalendarUtil.generateDates(props).map((date) => ({ day: date }));
return this.handleOutsideDays(dates);
}
handleOutsideDays(dates) {
const firstDate = dates[0].day.getDay();
const numberOfEmptyDates = firstDate === 0 ? 6 : firstDate - 1;
// Add empty date items as null to act as dates for previous month.
const emptyPreviousDates = Array.from({ length: numberOfEmptyDates }).map(() => null);
return [...emptyPreviousDates, ...dates];
}
generateActiveMonthDates() {
return this.generateDates({
month: this.activeCalendar.getMonth(),
year: this.activeCalendar.getFullYear(),
});
}
generateNextMonthDates() {
return this.generateDates({
month: this.activeCalendar.getMonth() + 1,
year: this.activeCalendar.getFullYear(),
});
}
validateMonthNavigation() {
if (this.minDate) {
const date = new Date(this.activeCalendar);
date.setMonth(date.getMonth() - 1);
this.canNavigateToPreviousMonth = CalendarUtil.isValidMinMonth(this.minDate, date);
}
else {
this.canNavigateToPreviousMonth = true;
}
if (this.maxDate) {
const date = new Date(this.activeCalendar);
date.setMonth(date.getMonth() + 1);
this.canNavigateToNextMonth = CalendarUtil.isValidMaxMonth(this.maxDate, date);
}
else {
this.canNavigateToNextMonth = true;
}
}
handleDateState() {
this.calendars.forEach((calendar) => {
calendar.dates.forEach((dateItem) => {
var _a, _b, _c;
if (!dateItem)
return;
dateItem.isSelectedRange = false;
dateItem.isSelected = CalendarUtil.isSameDate(dateItem.day, (_a = this.value) === null || _a === void 0 ? void 0 : _a.start);
if (this.useDateRange && !dateItem.isSelected && ((_b = this.value) === null || _b === void 0 ? void 0 : _b.end)) {
dateItem.isSelected = CalendarUtil.isSameDate(dateItem.day, this.value.end);
}
if (this.useDateRange && ((_c = this.value) === null || _c === void 0 ? void 0 : _c.start) && this.value.end && !dateItem.isSelected) {
const isOnRange = dateItem.day > this.value.start && dateItem.day < this.value.end;
dateItem.isSelectedRange = isOnRange;
}
dateItem.isDisabled = CalendarUtil.isInvalidMinOrMaxDate(dateItem.day, this.minDate, this.maxDate, { useStrictTime: this.useStrictTime });
});
});
}
generateCalendar() {
this.calendars = [];
this.calendars.push({ dates: this.generateActiveMonthDates() });
if (this.useDateRange && !this.isMobileScreen) {
this.calendars.push({ dates: this.generateNextMonthDates() });
}
this.validateMonthNavigation();
this.handleDateState();
}
handleStrictTime(date, time) {
if (!this.useStrictTime)
return date;
if (!time) {
return this.handleReturnMinOrMaxDate(date);
}
const newDate = new Date(date);
newDate.setHours(time.getHours(), time.getMinutes(), time.getSeconds(), time.getMilliseconds());
return this.handleReturnMinOrMaxDate(newDate);
}
handleReturnMinOrMaxDate(date) {
if (this.minDate && date < this.minDate) {
return this.minDate;
}
if (this.maxDate && date > this.maxDate) {
return this.maxDate;
}
return date;
}
}
DokuDatePickerBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuDatePickerBase, deps: [{ token: LOCALE_ID }, { token: i0.NgZone }, { token: DOKU_DATE_PICKER_STRICT_TIME, optional: true }], target: i0.ɵɵFactoryTarget.Component });
DokuDatePickerBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuDatePickerBase, isStandalone: true, selector: "doku-date-picker-base", host: { properties: { "class": "this.classes" } }, exportAs: ["dokuDatePickerBase"], usesInheritance: true, ngImport: i0, template: "<div class=\"d-date-picker-container\" [class.d-date-range]=\"useDateRange\">\n <div class=\"d-date-picker-header\">\n <span\n class=\"d-date-picker-arrow\"\n [class.disabled]=\"!canNavigateToPreviousMonth\"\n (click)=\"navigateToPreviousMonth()\"\n >\n <ng-container [ngTemplateOutlet]=\"leftArrowIcon\"></ng-container>\n </span>\n <div class=\"d-date-picker-header-content\">\n <ng-container *ngIf=\"!useDateRange\">\n <doku-form-field>\n <doku-select\n [items]=\"monthSelectOptions\"\n [value]=\"activeMonth\"\n (valueChange)=\"onMonthChange($event)\"\n portalClass=\"d-date-picker-month-selector\"\n ></doku-select>\n </doku-form-field>\n <doku-form-field>\n <doku-select\n [items]=\"yearSelectOptions\"\n [value]=\"activeYear\"\n (valueChange)=\"onYearChange($event)\"\n portalClass=\"d-date-picker-year-selector\"\n ></doku-select>\n </doku-form-field>\n </ng-container>\n <ng-container *ngIf=\"useDateRange\">\n <div *ngFor=\"let headerText of calendarHeaders\" doku-typography class=\"header-item\">\n {{ headerText }}\n </div>\n </ng-container>\n </div>\n <span\n class=\"d-date-picker-arrow\"\n [class.disabled]=\"!canNavigateToNextMonth\"\n (click)=\"navigateToNextMonth()\"\n >\n <ng-container [ngTemplateOutlet]=\"rightArrowIcon\"></ng-container>\n </span>\n </div>\n\n <div class=\"d-date-picker-body\">\n <div class=\"d-date-picker-calendar\" *ngFor=\"let calendar of calendars\">\n <div class=\"d-date-picker-calendar-content\">\n <div class=\"d-date-picker-calendar-content-item\">\n <div class=\"d-date-picker-weekdays\">\n <div class=\"d-date-picker-weekdays-item\" *ngFor=\"let label of weekdays\">\n {{ label }}\n </div>\n </div>\n </div>\n </div>\n <div class=\"d-date-picker-calendar-content\">\n <div class=\"d-date-picker-calendar-content-item\">\n <div class=\"d-date-picker-days\">\n <div\n #day\n class=\"d-date-picker-day\"\n *ngFor=\"let date of calendar.dates\"\n [class.d-date-picker-selected]=\"date?.isSelected\"\n [class.d-date-picker-disabled]=\"date?.isDisabled\"\n [class.d-date-picker-selected-range]=\"date?.isSelectedRange\"\n (click)=\"!!date && onSelectDate(date)\"\n (mouseenter)=\"onDayMouseEnter(date)\"\n (mouseleave)=\"onDayMouseLeave(date)\"\n >\n <ng-container *ngIf=\"date\">{{ date.day | date : \"d\" }}</ng-container>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"d-date-picker-footer\">\n <ng-content select=\"[doku-date-picker-footer]\"></ng-content>\n </div>\n</div>\n\n<ng-template #leftArrowIcon>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\n <g clip-path=\"url(#clip0_488_16768)\">\n <path\n d=\"M13.1324 2.9025L11.7974 1.575L4.37988 9L11.8049 16.425L13.1324 15.0975L7.03488 9L13.1324 2.9025Z\"\n fill=\"currentColor\"\n />\n </g>\n <defs>\n <clipPath id=\"clip0_488_16768\">\n <rect width=\"18\" height=\"18\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n</ng-template>\n\n<ng-template #rightArrowIcon>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\n <g clip-path=\"url(#clip0_488_16769)\">\n <path\n d=\"M4.86743 15.0975L6.19493 16.425L13.6199 9L6.19493 1.575L4.86743 2.9025L10.9649 9L4.86743 15.0975Z\"\n fill=\"currentColor\"\n />\n </g>\n <defs>\n <clipPath id=\"clip0_488_16769\">\n <rect width=\"18\" height=\"18\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: DokuSelectModule }, { kind: "component", type: DokuSelect, selector: "doku-select", inputs: ["items", "bindLabel", "bindValue", "value", "placeholder", "portalClass", "multiple", "truncateLabel", "arrowPlacement", "disabled", "readonly", "searchable", "isAsync", "searchMatcherFn", "clearable"], outputs: ["valueChange", "search"], exportAs: ["dokuSelect"] }, { kind: "ngmodule", type: DokuFormFieldModule }, { kind: "component", type: DokuFormField, selector: "doku-form-field", inputs: ["showSuccessBehavior", "isErrorState", "isSuccessState"], exportAs: ["dokuFormField"] }, { kind: "ngmodule", type: DokuTypographyModule }, { kind: "component", type: DokuTypography, selector: "[doku-typography]", inputs: ["variant"], exportAs: ["dokuTypography"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuDatePickerBase, decorators: [{
type: Component,
args: [{ selector: 'doku-date-picker-base', exportAs: 'dokuDatePickerBase', standalone: true, imports: [CommonModule, FormsModule, DokuSelectModule, DokuFormFieldModule, DokuTypographyModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"d-date-picker-container\" [class.d-date-range]=\"useDateRange\">\n <div class=\"d-date-picker-header\">\n <span\n class=\"d-date-picker-arrow\"\n [class.disabled]=\"!canNavigateToPreviousMonth\"\n (click)=\"navigateToPreviousMonth()\"\n >\n <ng-container [ngTemplateOutlet]=\"leftArrowIcon\"></ng-container>\n </span>\n <div class=\"d-date-picker-header-content\">\n <ng-container *ngIf=\"!useDateRange\">\n <doku-form-field>\n <doku-select\n [items]=\"monthSelectOptions\"\n [value]=\"activeMonth\"\n (valueChange)=\"onMonthChange($event)\"\n portalClass=\"d-date-picker-month-selector\"\n ></doku-select>\n </doku-form-field>\n <doku-form-field>\n <doku-select\n [items]=\"yearSelectOptions\"\n [value]=\"activeYear\"\n (valueChange)=\"onYearChange($event)\"\n portalClass=\"d-date-picker-year-selector\"\n ></doku-select>\n </doku-form-field>\n </ng-container>\n <ng-container *ngIf=\"useDateRange\">\n <div *ngFor=\"let headerText of calendarHeaders\" doku-typography class=\"header-item\">\n {{ headerText }}\n </div>\n </ng-container>\n </div>\n <span\n class=\"d-date-picker-arrow\"\n [class.disabled]=\"!canNavigateToNextMonth\"\n (click)=\"navigateToNextMonth()\"\n >\n <ng-container [ngTemplateOutlet]=\"rightArrowIcon\"></ng-container>\n </span>\n </div>\n\n <div class=\"d-date-picker-body\">\n <div class=\"d-date-picker-calendar\" *ngFor=\"let calendar of calendars\">\n <div class=\"d-date-picker-calendar-content\">\n <div class=\"d-date-picker-calendar-content-item\">\n <div class=\"d-date-picker-weekdays\">\n <div class=\"d-date-picker-weekdays-item\" *ngFor=\"let label of weekdays\">\n {{ label }}\n </div>\n </div>\n </div>\n </div>\n <div class=\"d-date-picker-calendar-content\">\n <div class=\"d-date-picker-calendar-content-item\">\n <div class=\"d-date-picker-days\">\n <div\n #day\n class=\"d-date-picker-day\"\n *ngFor=\"let date of calendar.dates\"\n [class.d-date-picker-selected]=\"date?.isSelected\"\n [class.d-date-picker-disabled]=\"date?.isDisabled\"\n [class.d-date-picker-selected-range]=\"date?.isSelectedRange\"\n (click)=\"!!date && onSelectDate(date)\"\n (mouseenter)=\"onDayMouseEnter(date)\"\n (mouseleave)=\"onDayMouseLeave(date)\"\n >\n <ng-container *ngIf=\"date\">{{ date.day | date : \"d\" }}</ng-container>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"d-date-picker-footer\">\n <ng-content select=\"[doku-date-picker-footer]\"></ng-content>\n </div>\n</div>\n\n<ng-template #leftArrowIcon>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\n <g clip-path=\"url(#clip0_488_16768)\">\n <path\n d=\"M13.1324 2.9025L11.7974 1.575L4.37988 9L11.8049 16.425L13.1324 15.0975L7.03488 9L13.1324 2.9025Z\"\n fill=\"currentColor\"\n />\n </g>\n <defs>\n <clipPath id=\"clip0_488_16768\">\n <rect width=\"18\" height=\"18\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n</ng-template>\n\n<ng-template #rightArrowIcon>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\n <g clip-path=\"url(#clip0_488_16769)\">\n <path\n d=\"M4.86743 15.0975L6.19493 16.425L13.6199 9L6.19493 1.575L4.86743 2.9025L10.9649 9L4.86743 15.0975Z\"\n fill=\"currentColor\"\n />\n </g>\n <defs>\n <clipPath id=\"clip0_488_16769\">\n <rect width=\"18\" height=\"18\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n</ng-template>\n" }]
}], ctorParameters: function () {
return [{ type: undefined, decorators: [{
type: Inject,
args: [LOCALE_ID]
}] }, { type: i0.NgZone }, { type: undefined, decorators: [{
type: Optional
}, {
type: Inject,
args: [DOKU_DATE_PICKER_STRICT_TIME]
}] }];
}, propDecorators: { classes: [{
type: HostBinding,
args: ['class']
}] } });
class DokuDatePickerBasicProps {
constructor() {
this._value = null;
this._minDate = null;
this._maxDate = null;
this._disabled = false;
this._readonly = false;
/**
* An event emitted when the value changes.
*/
this.valueChange = new EventEmitter();
this.notifyChange$ = new ReplaySubject();
}
/**
* Value of the date picker.
*
* If it's a string, it must be in ISO String.
*
* @default null
*/
get value() {
return this._value;
}
set value(date) {
this._value = this.normalizeDate(date);
this.notifyChange$.next('value');
}
/**
* Minimum date allowed to be selected.
*
* If it's a string, it must be in ISO String.
*
* @default null
*/
get minDate() {
return this._minDate;
}
set minDate(date) {
this._minDate = this.normalizeDate(date);
this.notifyChange$.next('minDate');
}
/**
* Maximum date allowed to be selected.
*
* If it's a string, it must be in ISO String.
*
* @default null
*/
get maxDate() {
return this._maxDate;
}
set maxDate(date) {
this._maxDate = this.normalizeDate(date);
this.notifyChange$.next('maxDate');
}
/**
* Whether date picker is disabled.
*
* @default false
*/
get disabled() {
return this._disabled;
}
set disabled(value) {
this._disabled = value;
this.notifyChange$.next('disabled');
}
/**
* Whether date picker is readonly.
*
* @default false
*/
get readonly() {
return this._readonly;
}
set readonly(value) {
this._readonly = value;
this.notifyChange$.next('readonly');
}
normalizeDate(date) {
if (!date)
return null;
if (!(date instanceof Date || typeof date === 'string'))
return null;
return date instanceof Date ? date : new Date(date);
}
}
DokuDatePickerBasicProps.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuDatePickerBasicProps, deps: [], target: i0.ɵɵFactoryTarget.Component });
DokuDatePickerBasicProps.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuDatePickerBasicProps, isStandalone: true, selector: "doku-date-picker-basic-props", inputs: { value: "value", minDate: "minDate", maxDate: "maxDate", disabled: "disabled", readonly: "readonly" }, outputs: { valueChange: "valueChange" }, exportAs: ["dokuDatePickerBasicProps"], ngImport: i0, template: '', isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuDatePickerBasicProps, decorators: [{
type: Component,
args: [{
selector: 'doku-date-picker-basic-props',
exportAs: 'dokuDatePickerBasicProps',
standalone: true,
imports: [CommonModule],
template: '',
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}], propDecorators: { value: [{
type: Input
}], minDate: [{
type: Input
}], maxDate: [{
type: Input
}], disabled: [{
type: Input
}], readonly: [{
type: Input
}], valueChange: [{
type: Output
}] } });
class DokuDatePicker extends DokuDatePickerBasicProps {
constructor(renderer, envInjector, injector, appRef, ngZone, datePipe, cdr, document, localeId, ngControl, formField) {
super();
this.renderer = renderer;
this.envInjector = envInjector;
this.injector = injector;
this.appRef = appRef;
this.ngZone = ngZone;
this.datePipe = datePipe;
this.cdr = cdr;
this.document = document;
this.localeId = localeId;
this.ngControl = ngControl;
this.formField = formField;
this.class = 'd-date-picker';
/**
* Whether to close date picker dropdown after selecting the date.
*
* @default true
*/
this.closeOnDateClick = true;
/**
* Date format that will be used for formatting displayed value in the input field. It follows Angular DatePipe's format options.
*
* @default 'dd/MM/yyyy'
*/
this.dateFormat = 'dd/MM/yyyy';
/**
* Placeholder of the date picker input.
*
* @default 'dd/mm/yyyy'
*/
this.placeholder = 'dd/mm/yyyy';
this.isOpen = false;
this.destroy$ = new Subject();
if (this.ngControl) {
this.ngControl.valueAccessor = this;
}
this.onClickHandler();
}
get formattedValue() {
return this.value
? this.datePipe.transform(this.value, this.dateFormat, undefined, this.localeId)
: null;
}
get inputWrapperElement() {
var _a;
return (_a = this.formField) === null || _a === void 0 ? void 0 : _a['inputWrapperElement'];
}
ngOnInit() {
var _a;
this.notifyChange$
.pipe(filter((change) => change === 'value' || change === 'minDate' || change === 'maxDate'), startWith(((_a = this.value) === null || _a === void 0 ? void 0 : _a.toISOString()) || null), map(() => { var _a; return ((_a = this.value) === null || _a === void 0 ? void 0 : _a.toISOString()) || null; }), distinctUntilChanged(), skip(1), takeUntil(this.destroy$))
.subscribe((value) => {
this.valueChange.emit(value);
});
this.valueChange.pipe(distinctUntilChanged(), takeUntil(this.destroy$)).subscribe((value) => {
var _a, _b;
(_a = this.onChange) === null || _a === void 0 ? void 0 : _a.call(this, value);
(_b = this.onTouched) === null || _b === void 0 ? void 0 : _b.call(this);
this.cdr.detectChanges();
});
}
ngAfterViewInit() {
var _a, _b, _c, _d;
(_b = (_a = this.ngControl) === null || _a === void 0 ? void 0 : _a.statusChanges) === null || _b === void 0 ? void 0 : _b.pipe(startWith(this.ngControl.status), distinctUntilChanged(), delay(0), takeUntil(this.destroy$)).subscribe(() => {
var _a;
this.disabled = !!((_a = this.ngControl) === null || _a === void 0 ? void 0 : _a.disabled);
});
(_d = (_c = this.ngControl) === null || _c === void 0 ? void 0 : _c.statusChanges) === null || _d === void 0 ? void 0 : _d.pipe(distinctUntilChanged(), delay(0), takeUntil(this.destroy$)).subscribe((status) => {
var _a, _b, _c;
if (status === 'VALID') {
(_a = this.onValidate) === null || _a === void 0 ? void 0 : _a.call(this, 'valid');
}
else if (status === 'INVALID') {
(_b = this.onValidate) === null || _b === void 0 ? void 0 : _b.call(this, 'invalid');
}
else {
(_c = this.onValidate) === null || _c === void 0 ? void 0 : _c.call(this);
}
});
this.notifyChange$
.pipe(filter((change) => change === 'disabled' || change === 'readonly'), startWith({ disabled: this.disabled, readonly: this.readonly }), map(() => ({ disabled: this.disabled, readonly: this.readonly })), distinctUntilChanged((prev, current) => JSON.stringify(prev) === JSON.stringify(current)), delay(0), takeUntil(this.destroy$))
.subscribe(({ disabled, readonly }) => {
var _a, _b;
(_a = this.onDisable) === null || _a === void 0 ? void 0 : _a.call(this, disabled);
(_b = this.onReadonly) === null || _b === void 0 ? void 0 : _b.call(this, readonly);
this.setInputWrapperCursorState(this.inputWrapperElement, { disabled, readonly });
});
}
ngOnDestroy() {
var _a;
this.close();
this.destroy$.next(true);
this.destroy$.complete();
(_a = this.cleanup) === null || _a === void 0 ? void 0 : _a.call(this);
}
registerOnDisable(fn) {
this.onDisable = fn;
}
registerOnValidate(fn) {
this.onValidate = fn;
}
registerOnReadonly(fn) {
this.onReadonly = fn;
}
writeValue(value) {
this.value = value;
}
registerOnChange(fn) {
this.onChange = fn;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
setDisabledState(isDisabled) {
var _a;
(_a = this.onDisable) === null || _a === void 0 ? void 0 : _a.call(this, isDisabled);
}
/**
* Open the date picker dropdown.
*/
open() {
if (this.isOpen || this.disabled || this.readonly)
return;
this.isOpen = true;
this.portalElement = this.createPortalElement();
this.datePickerBaseRef = this.createDatePickerComponent();
this.renderer.appendChild(this.portalElement, this.datePickerBaseRef.location.nativeElement);
this.renderer.appendChild(this.document.body, this.portalElement);
this.doAutoUpdateDropdownPosition();
}
/**
* Close the date picker dropdown.
*/
close() {
var _a;
if (!this.isOpen)
return;
this.isOpen = false;
if (this.portalElement)
this.renderer.removeChild(this.document.body, this.portalElement);
(_a = this.datePickerBaseRef) === null || _a === void 0 ? void 0 : _a.destroy();
}
/**
* Toggle the date picker dropdown.
*/
toggle() {
this.isOpen ? this.close() : this.open();
}
createPortalElement() {
const el = this.renderer.createElement('div');
this.renderer.addClass(el, 'd-date-picker-portal');
return el;
}
createComponentRef(props) {
const ref = createComponent(DokuDatePickerBase, {
environmentInjector: this.envInjector,
elementInjector: props.elementInjector,
});
ref.setInput('value', this.value);
ref.setInput('minDate', this.minDate);
ref.setInput('maxDate', this.maxDate);
return ref;
}
createDatePickerComponent() {
const elementInjector = Injector.create({ providers: [], parent: this.injector });
const ref = this.createComponentRef({ elementInjector });
this.appRef.attachView(ref.hostView);
const valueChangeListener = ref.instance.valueChange.subscribe((value) => {
this.value = value === null || value === void 0 ? void 0 : value.start;
if (this.closeOnDateClick)
this.close();
});
ref.onDestroy(() => {
valueChangeListener.unsubscribe();
});
ref.changeDetectorRef.detectChanges();
return ref;
}
onClickHandler() {
fromEvent(this.document, 'click')
.pipe(takeUntil(this.destroy$))
.subscribe((event) => {
const { clickOutside, clickTrigger } = getClickType(event, [this.inputWrapperElement], [this.portalElement]);
if (clickTrigger)
return this.toggle();
// Prevent dropdown from being closed when choosing month or year.
const nodeName = event.target.nodeName.toLowerCase();
if (nodeName === 'doku-select-option')
return;
if (clickOutside)
return this.close();
});
}
doAutoUpdateDropdownPosition() {
this.ngZone.runOutsideAngular(() => {
if (!this.inputWrapperElement || !this.portalElement)
return;
this.cleanup = updateFloatingPosition({
triggerElement: this.inputWrapperElement,
floatingElement: this.portalElement,
placement: 'bottom-start',
autoUpdate: true,
middleware: {
flip: true,
shift: true,
},
});
});
}
setInputWrapperCursorState(inputWrapperElement, props) {
if (!inputWrapperElement)
return;
let cursor = 'pointer';
if (props === null || props === void 0 ? void 0 : props.readonly)
cursor = 'text';
if (props === null || props === void 0 ? void 0 : props.disabled)
cursor = 'not-allowed';
inputWrapperElement.style.cursor = cursor;
}
}
DokuDatePicker.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuDatePicker, deps: [{ token: i0.Renderer2 }, { token: i0.EnvironmentInjector }, { token: i0.Injector }, { token: i0.ApplicationRef }, { token: i0.NgZone }, { token: i1.DatePipe }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }, { token: LOCALE_ID }, { token: i1$1.NgControl, optional: true, self: true }, { token: DokuFormField, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component });
DokuDatePicker.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuDatePicker, isStandalone: true, selector: "doku-date-picker", inputs: { closeOnDateClick: "closeOnDateClick", dateFormat: "dateFormat", placeholder: "placeholder" }, host: { properties: { "class": "this.class" } }, providers: [DatePipe, { provide: DOKU_FORM_FIELD_ACCESSOR, useExisting: DokuDatePicker }], exportAs: ["dokuDatePicker"], usesInheritance: true, ngImport: i0, template: "<span *ngIf=\"!formattedValue\" class=\"d-date-picker-placeholder\">\n {{ placeholder }}\n</span>\n\n<span *ngIf=\"formattedValue\" class=\"d-date-picker-value\">\n {{ formattedValue }}\n</span>\n\n<span class=\"icon-calendar\">\n <ng-container *ngTemplateOutlet=\"iconCalendar\"></ng-container>\n</span>\n\n<ng-template #iconCalendar>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path\n d=\"M19 5H5C4.44772 5 4 5.44772 4 6V17C4 17.5523 4.44772 18 5 18H19C19.5523 18 20 17.5523 20 17V6C20 5.44772 19.5523 5 19 5Z\"\n stroke=\"currentColor\"\n />\n <path d=\"M4 7.94336H20\" stroke=\"currentColor\" />\n <ellipse cx=\"7.69213\" cy=\"11.3774\" rx=\"0.984615\" ry=\"0.981132\" fill=\"currentColor\" />\n <ellipse cx=\"7.69213\" cy=\"14.3207\" rx=\"0.984615\" ry=\"0.981132\" fill=\"currentColor\" />\n <ellipse cx=\"10.6462\" cy=\"11.3774\" rx=\"0.984615\" ry=\"0.981132\" fill=\"currentColor\" />\n <ellipse cx=\"10.6462\" cy=\"14.3207\" rx=\"0.984615\" ry=\"0.981132\" fill=\"currentColor\" />\n <ellipse cx=\"13.5998\" cy=\"11.3774\" rx=\"0.984615\" ry=\"0.981132\" fill=\"currentColor\" />\n <ellipse cx=\"13.5998\" cy=\"14.3207\" rx=\"0.984615\" ry=\"0.981132\" fill=\"currentColor\" />\n <ellipse cx=\"16.554\" cy=\"11.3774\" rx=\"0.984615\" ry=\"0.981132\" fill=\"currentColor\" />\n <ellipse cx=\"16.554\" cy=\"14.3207\" rx=\"0.984615\" ry=\"0.981132\" fill=\"currentColor\" />\n </svg>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuDatePicker, decorators: [{
type: Component,
args: [{ selector: 'doku-date-picker', exportAs: 'dokuDatePicker', standalone: true, imports: [CommonModule, DokuDatePickerBase], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [DatePipe, { provide: DOKU_FORM_FIELD_ACCESSOR, useExisting: DokuDatePicker }], template: "<span *ngIf=\"!formattedValue\" class=\"d-date-picker-placeholder\">\n {{ placeholder }}\n</span>\n\n<span *ngIf=\"formattedValue\" class=\"d-date-picker-value\">\n {{ formattedValue }}\n</span>\n\n<span class=\"icon-calendar\">\n <ng-container *ngTemplateOutlet=\"iconCalendar\"></ng-container>\n</span>\n\n<ng-template #iconCalendar>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path\n d=\"M19 5H5C4.44772 5 4 5.44772 4 6V17C4 17.5523 4.44772 18 5 18H19C19.5523 18 20 17.5523 20 17V6C20 5.44772 19.5523 5 19 5Z\"\n stroke=\"currentColor\"\n />\n <path d=\"M4 7.94336H20\" stroke=\"currentColor\" />\n <ellipse cx=\"7.69213\" cy=\"11.3774\" rx=\"0.984615\" ry=\"0.981132\" fill=\"currentColor\" />\n <ellipse cx=\"7.69213\" cy=\"14.3207\" rx=\"0.984615\" ry=\"0.981132\" fill=\"currentColor\" />\n <ellipse cx=\"10.6462\" cy=\"11.3774\" rx=\"0.984615\" ry=\"0.981132\" fill=\"currentColor\" />\n <ellipse cx=\"10.6462\" cy=\"14.3207\" rx=\"0.984615\" ry=\"0.981132\" fill=\"currentColor\" />\n <ellipse cx=\"13.5998\" cy=\"11.3774\" rx=\"0.984615\" ry=\"0.981132\" fill=\"currentColor\" />\n <ellipse cx=\"13.5998\" cy=\"14.3207\" rx=\"0.984615\" ry=\"0.981132\" fill=\"currentColor\" />\n <ellipse cx=\"16.554\" cy=\"11.3774\" rx=\"0.984615\" ry=\"0.981132\" fill=\"currentColor\" />\n <ellipse cx=\"16.554\" cy=\"14.3207\" rx=\"0.984615\" ry=\"0.981132\" fill=\"currentColor\" />\n </svg>\n</ng-template>\n" }]
}], ctorParameters: function () {
return [{ type: i0.Renderer2 }, { type: i0.EnvironmentInjector }, { type: i0.Injector }, { type: i0.ApplicationRef }, { type: i0.NgZone }, { type: i1.DatePipe }, { type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
type: Inject,
args: [DOCUMENT]
}] }, { type: undefined, decorators: [{
type: Inject,
args: [LOCALE_ID]
}] }, { type: i1$1.NgControl, decorators: [{
type: Optional
}, {
type: Self
}] }, { type: DokuFormField, decorators: [{
type: Optional
}, {
type: Host
}] }];
}, propDecorators: { class: [{
type: HostBinding,
args: ['class']
}], closeOnDateClick: [{
type: Input
}], dateFormat: [{
type: Input
}], placeholder: [{
type: Input
}] } });
class DokuDatePickerInline extends DokuDatePickerBasicProps {
constructor(cdr, localeId, ngControl) {
super();
this.cdr = cdr;
this.localeId = localeId;
this.ngControl = ngControl;
this.class = 'd-date-picker-inline';
this.destroy$ = new Subject();
this.fieldOptions = { withoutInputStyle: true };
if (this.ngControl) {
this.ngControl.valueAccessor = this;
}
}
ngOnInit() {
var _a;
this.notifyChange$
.pipe(filter((change) => change === 'value' || change === 'minDate' || change === 'maxDate'), startWith(((_a = this.value) === null || _a === void 0 ? void 0 : _a.toISOString()) || null), map(() => { var _a; return ((_a = this.value) === null || _a === void 0 ? void 0 : _a.toISOString()) || null; }), distinctUntilChanged(), skip(1), takeUntil(this.destroy$))
.subscribe((value) => {
this.valueChange.emit(value);
});
this.valueChange.pipe(distinctUntilChanged(), takeUntil(this.destroy$)).subscribe((value) => {
var _a, _b;
(_a = this.onChange) === null || _a === void 0 ? void 0 : _a.call(this, value);
(_b = this.onTouched) === null || _b === void 0 ? void 0 : _b.call(this);
this.cdr.detectChanges();
});
}
ngAfterViewInit() {
var _a, _b, _c, _d;
(_b = (_a = this.ngControl) === null || _a === void 0 ? void 0 : _a.statusChanges) === null || _b === void 0 ? void 0 : _b.pipe(startWith(this.ngControl.status), distinctUntilChanged(), delay(0), takeUntil(this.destroy$)).subscribe(() => {
var _a;
this.disabled = !!((_a = this.ngControl) === null || _a === void 0 ? void 0 : _a.disabled);
});
(_d = (_c = this.ngControl) === null || _c === void 0 ? void 0 : _c.statusChanges) === null || _d === void 0 ? void 0 : _d.pipe(distinctUntilChanged(), delay(0), takeUntil(this.destroy$)).subscribe((status) => {
var _a, _b, _c;
if (status === 'VALID') {
(_a = this.onValidate) === null || _a === void 0 ? void 0 : _a.call(this, 'valid');
}
else if (status === 'INVALID') {
(_b = this.onValidate) === null || _b === void 0 ? void 0 : _b.call(this, 'invalid');
}
else {
(_c = this.onValidate) === null || _c === void 0 ? void 0 : _c.call(this);
}
});
this.notifyChange$
.pipe(filter((change) => change === 'disabled' || change === 'readonly'), startWith({ disabled: this.disabled, readonly: this.readonly }), map(() => ({ disabled: this.disabled, readonly: this.readonly })), distinctUntilChanged((prev, current) => JSON.stringify(prev) === JSON.stringify(current)), delay(0), takeUntil(this.destroy$))
.subscribe(({ disabled, readonly }) => {
var _a, _b;
(_a = this.onDisable) === null || _a === void 0 ? void 0 : _a.call(this, disabled);
(_b = this.onReadonly) === null || _b === void 0 ? void 0 : _b.call(this, readonly);
this.cdr.detectChanges();
});
}
ngOnDestroy() {
this.destroy$.next(true);
this.destroy$.complete();
}
registerOnDisable(fn) {
this.onDisable = fn;
}
registerOnReadonly(fn) {
this.onReadonly = fn;
}
registerOnValidate(fn) {
this.onValidate = fn;
}
writeValue(value) {
this.value = value;
}
registerOnChange(fn) {
this.onChange = fn;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
setDisabledState(isDisabled) {
var _a;
(_a = this.onDisable) === null || _a === void 0 ? void 0 : _a.call(this, isDisabled);
}
}
DokuDatePickerInline.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuDatePickerInline, deps: [{ token: i0.ChangeDetectorRef }, { token: LOCALE_ID }, { token: i1$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
DokuDatePickerInline.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuDatePickerInline, isStandalone: true, selector: "doku-date-picker-inline", host: { properties: { "class": "this.class" } }, providers: [{ provide: DOKU_FORM_FIELD_ACCESSOR, useExisting: DokuDatePickerInline }], exportAs: ["dokuDatePickerInline"], usesInheritance: true, ngImport: i0, template: "<doku-date-picker-base\n [value]=\"value\"\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n (valueChange)=\"value = $event.start\"\n>\n <ng-content doku-date-picker-footer select=\"[doku-date-picker-footer]\"></ng-content>\n</doku-date-picker-base>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DokuDatePickerBase, selector: "doku-date-picker-base", exportAs: ["dokuDatePickerBase"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuDatePickerInline, decorators: [{
type: Component,
args: [{ selector: 'doku-date-picker-inline', exportAs: 'dokuDatePickerInline', standalone: true, imports: [CommonModule, DokuDatePickerBase], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: DOKU_FORM_FIELD_ACCESSOR, useExisting: DokuDatePickerInline }], template: "<doku-date-picker-base\n [value]=\"value\"\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n (valueChange)=\"value = $event.start\"\n>\n <ng-content doku-date-picker-footer select=\"[doku-date-picker-footer]\"></ng-content>\n</doku-date-picker-base>\n" }]
}], ctorParameters: function () {
return [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
type: Inject,
args: [LOCALE_ID]
}] }, { type: i1$1.NgControl, decorators: [{
type: Optional
}, {
type: Self
}] }];
}, propDecorators: { class: [{
type: HostBinding,
args: ['class']
}] } });
class DokuDatePickerRangeProps {
/**
* Value of the date picker.
*
* If it's a string, it must be in ISO String.
*
* @default null
*/
get value() {
return this._value;
}
set value(date) {
this._value = { start: this.normalizeDate(date === null || date === void 0 ? void 0 : date.start), end: this.normalizeDate(date === null || date === void 0 ? void 0 : date.end) };
this.notifyChange$.next('value');
}
/**
* Minimum date allowed to be selected.
*
* If it's a string, it must be in ISO String.
*
* @default null
*/
get minDate() {
return this._minDate;
}
set minDate(date) {
this._minDate = this.normalizeDate(date);
this.notifyChange$.next('minDate');
}
/**
* Maximum date allowed to be selected.
*
* If it's a string, it must be in ISO String.
*
* @default null
*/
get maxDate() {
return this._maxDate;
}
set maxDate(date) {
this._maxDate = this.normalizeDate(date);
this.notifyChange$.next('maxDate');
}
/**
* Whether date picker is disabled.
*
* @default false
*/
get disabled() {
return this._disabled;
}
set disabled(value) {
this._disabled = value;
this.notifyChange$.next('disabled');
}
/**
* Whether date picker is readonly.
*
* @default false
*/
get readonly() {
return this._readonly;
}
set readonly(value) {
this._readonly = value;
this.notifyChange$.next('readonly');
}
constructor(_cdr) {
this._cdr = _cdr;
this._value = { start: null, end: null };
this._minDate = null;
this._maxDate = null;
this._disabled = false;
this._readonly = false;
/**
* An event emitted when the value changes.
*/
this.valueChange = new EventEmitter();
this.notifyChange$ = new ReplaySubject();
}
normalizeDate(date) {
if (!date)
return null;
if (!(date instanceof Date || typeof date === 'string'))
return null;
return date instanceof Date ? date : new Date(date);
}
}
DokuDatePickerRangeProps.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuDatePickerRangeProps, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
DokuDatePickerRangeProps.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuDatePickerRangeProps, isStandalone: true, selector: "doku-date-picker-range-props", inputs: { minDate: "minDate", maxDate: "maxDate", disabled: "disabled", readonly: "readonly" }, outputs: { valueChange: "valueChange" }, exportAs: ["dokuDatePickerRangeProps"], ngImport: i0, template: '', isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuDatePickerRangeProps, decorators: [{
type: Component,
args: [{
selector: 'doku-date-picker-range-props',
exportAs: 'dokuDatePickerRangeProps',
standalone: true,
imports: [CommonModule],
template: '',
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { minDate: [{
type: Input
}], maxDate: [{
type: Input
}], disabled: [{
type: Input
}], readonly: [{
type: Input
}], valueChange: [{
type: Output
}] } });
class DokuDateRangePicker extends DokuDatePickerRangeProps {
constructor(cdr, appRef, injector, renderer, envInjector, ngZone, datePipe, localeId, document, formField) {
super(cdr);
this.cdr = cdr;
this.appRef = appRef;
this.injector = injector;
this.renderer = renderer;
this.envInjector = envInjector;
this.ngZone = ngZone;
this.datePipe = datePipe;
this.localeId = localeId;
this.document = document;
this.formField = formField;
this.class = ['d-date-picker', 'd-date-range-picker'];
/**
* Whether to close date range picker dropdown after selecting the end date.
*
* @default true;
*/
this.closeOnDateClick = true;
/**
* Date format that will be used for formatting displayed value (start and end date) in the input field. It follows Angular DatePipe's format options.
*
* @default 'dd/MM/yyyy'
*/
this.dateFormat = 'dd/MM/yyyy';
/**
* Placeholder of the date range picker input.
*
* @default 'dd/mm/yyyy - dd/mm/yyyy'
*/
this.placeholder = 'dd/mm/yyyy - dd/mm/yyyy';
this.isOpen = false;
this.destroy$ = new Subject();
this.onClickHandler();
}
get formattedStartDate() {
var _a;
return this.formatDisplayedDate((_a = this.value) === null || _a === void 0 ? void 0 : _a.start);
}
get formattedEndDate() {
var _a;
return this.formatDisplayedDate((_a = this.value) === null || _a === void 0 ? void 0 : _a.end);
}
get inputWrapperElement() {
var _a;
return (_a = this.formField) === null || _a === void 0 ? void 0 : _a['inputWrapperElement'];
}
ngAfterViewInit() {
this.notifyChange$
.pipe(filter((change) => change === 'disabled' || change === 'readonly'), startWith({ disabled: this.disabled, readonly: this.readonly }), map(() => ({ disabled: this.disabled, readonly: this.readonly })), distinctUntilChanged((prev, current) => JSON.stringify(prev) === JSON.stringify(current)), delay(0), takeUntil(this.destroy$))
.subscribe(({ disabled, readonly }) => {
var _a, _b;
(_a = this.onDisable) === null || _a === void 0 ? void 0 : _a.call(this, disabled);
(_b = this.onReadonly) === null || _b === void 0 ? void 0 : _b.call(this, readonly);
this.setInputWrapperCursorState(this.inputWrapperElement, { disabled, readonly });
});
this.notifyChange$
.pipe(filter((change) => change === 'minDate' || change === 'maxDate'), map(() => ({ minDate: this.minDate, maxDate: this.maxDate })), distinctUntilChanged(), takeUntil(this.destroy$))
.subscribe(({ minDate, maxDate }) => {
var _a, _b;
(_a = this.datePickerBaseRef) === null || _a === void 0 ? void 0 : _a.setInput('minDate', minDate);
(_b = this.datePickerBaseRef) === null || _b === void 0 ? void 0 : _b.setInput('maxDate', maxDate);
});
}
ngOnDestroy() {
var _a;
this.close();
this.destroy$.next(true);
this.destroy$.complete();
(_a = this.cleanup) === null || _a === void 0 ? void 0 : _a.call(this);
}
registerOnDisable(fn) {
this.onDisable = fn;
}
registerOnValidate(fn) {
this.onValidate = fn;
}
registerOnReadonly(fn) {
this.onReadonly = fn;
}
/**
* Open the date range picker dropdown.
*/
open() {
if (this.isOpen || this.disabled || this.readonly)
return;
this.isOpen = true;
this.portalElement = this.createPortalElement();
this.datePickerBaseRef = this.createDatePickerComponent();
this.renderer.appendChild(this.portalElement, this.datePickerBaseRef.location.nativeElement);
this.renderer.appendChild(this.document.body, this.portalElement);
this.doAutoUpdateDropdownPosition();
}
/**
* Close the date range picker dropdown.
*/
close() {
var _a;
if (!this.isOpen)
return;
this.isOpen = false;
if (this.portalElement)
this.renderer.removeChild(this.document.body, this.portalElement);
(_a = this.datePickerBaseRef) === null || _a === void 0 ? void 0 : _a.destroy();
}
/**
* Toggle the date range picker dropdown.
*/
toggle() {
this.isOpen ? this.close() : this.open();
}
createPortalElement() {
const el = this.renderer.createElement('div');
this.renderer.addClass(el, 'd-date-picker-portal');
return el;
}
createDatePickerComponent() {
const elementInjector = Injector.create({ providers: [], parent: this.injector });
const ref = createComponent(DokuDatePickerBase, {
environmentInjector: this.envInjector,
elementInjector: elementInjector,
});
this.appRef.attachView(ref.hostView);
ref.setInput('useDateRange', true);
ref.setInput('value', this.value);
ref.setInput('minDate', this.minDate);
ref.setInput('maxDate', this.maxDate);
const valueChangeListener = ref.instance.valueChange.subscribe((value) => {
var _a;
(_a = this.dateChangeHandler) === null || _a === void 0 ? void 0 : _a.call(this, value);
if (this.closeOnDateClick && (value === null || value === void 0 ? void 0 : value.start) && value.end)
this.close();
});
ref.onDestroy(() => {
valueChangeListener.unsubscribe();
});
ref.changeDetectorRef.detectChanges();
return ref;
}
onClickHandler() {
fromEvent(this.document, 'click')
.pipe(takeUntil(this.destroy$))
.subscribe((event) => {
const { clickOutside, clickTrigger } = getClickType(event, [this.inputWrapperElement], [this.portalElement]);
if (clickTrigger)
return this.toggle();
if (clickOutside)
return this.close();
});
}
doAutoUpdateDropdownPosition() {
this.ngZone.runOutsideAngular(() => {
if (!this.inputWrapperElement || !this.portalElement)
return;
this.cleanup = updateFloatingPosition({
triggerElement: this.inputWrapperElement,
floatingElement: this.portalElement,
placement: 'bottom-start',
autoUpdate: true,
middleware: {
flip: true,
shift: true,
},
});
});
}
setInputWrapperCursorState(inputWrapperElement, props) {
if (!inputWrapperElement)
return;
let cursor = 'pointer';
if (props === null || props === void 0 ? void 0 : props.readonly)
cursor = 'text';
if (props === null || props === void 0 ? void 0 : props.disabled)
cursor = 'not-allowed';
inputWrapperElement.style.cursor = cursor;
}
formatDisplayedDate(date) {
if (!date)
return null;
return this.datePipe.transform(date, this.dateFormat, undefined, this.localeId);
}
}
DokuDateRangePicker.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuDateRangePicker, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ApplicationRef }, { token: i0.Injector }, { token: i0.Renderer2 }, { token: i0.EnvironmentInjector }, { token: i0.NgZone }, { token: i1.DatePipe }, { token: LOCALE_ID }, { token: DOCUMENT }, { token: DokuFormField, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component });
DokuDateRangePicker.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuDateRangePicker, isStandalone: true, selector: "doku-date-range-picker", inputs: { closeOnDateClick: "closeOnDateClick", dateFormat: "dateFormat", placeholder: "placeholder" }, host: { properties: { "class": "this.class" } }, providers: [DatePipe, { provide: DOKU_FORM_FIELD_ACCESSOR, useExisting: DokuDateRangePicker }], exportAs: ["dokuDateRangePicker"], usesInheritance: true, ngImport: i0, template: "<span *ngIf=\"!(formattedStartDate || formattedEndDate)\" class=\"d-date-picker-placeholder\">\n {{ placeholder }}\n</span>\n\n<span *ngIf=\"formattedStartDate || formattedEndDate\" class=\"d-date-picker-value\">\n {{ formattedStartDate }} - {{ formattedEndDate }}\n</span>\n\n<span class=\"icon-calendar\">\n <ng-container *ngTemplateOutlet=\"iconCalendar\"></ng-container>\n</span>\n\n<ng-template #iconCalendar>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path\n d=\"M19 5H5C4.44772 5 4 5.44772 4 6V17C4 17.5523 4.44772 18 5 18H19C19.5523 18 20 17.5523 20 17V6C20 5.44772 19.5523 5 19 5Z\"\n stroke=\"currentColor\"\n />\n <path d=\"M4 7.94336H20\" stroke=\"currentColor\" />\n <ellipse cx=\"7.69213\" cy=\"11.3774\" rx=\"0.984615\" ry=\"0.981132\" fill=\"currentColor\" />\n <ellipse cx=\"7.69213\" cy=\"14.3207\" rx=\"0.984615\" ry=\"0.981132\" fill=\"currentColor\" />\n <ellipse cx=\"10.6462\" cy=\"11.3774\" rx=\"0.984615\" ry=\"0.981132\" fill=\"currentColor\" />\n <ellipse cx=\"10.6462\" cy=\"14.3207\" rx=\"0.984615\" ry=\"0.981132\" fill=\"currentColor\" />\n <ellipse cx=\"13.5998\" cy=\"11.3774\" rx=\"0.984615\" ry=\"0.981132\" fill=\"currentColor\" />\n <ellipse cx=\"13.5998\" cy=\"14.3207\" rx=\"0.984615\" ry=\"0.981132\" fill=\"currentColor\" />\n <ellipse cx=\"16.554\" cy=\"11.3774\" rx=\"0.984615\" ry=\"0.981132\" fill=\"currentColor\" />\n <ellipse cx=\"16.554\" cy=\"14.3207\" rx=\"0.984615\" ry=\"0.981132\" fill=\"currentColor\" />\n </svg>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuDateRangePicker, decorators: [{
type: Component,
args: [{ selector: 'doku-date-range-picker', exportAs: 'dokuDateRangePicker', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [DatePipe, { provide: DOKU_FORM_FIELD_ACCESSOR, useExisting: DokuDateRangePicker }], template: "<span *ngIf=\"!(formattedStartDate || formattedEndDate)\" class=\"d-date-picker-placeholder\">\n {{ placeholder }}\n</span>\n\n<span *ngIf=\"formattedStartDate || formattedEndDate\" class=\"d-date-picker-value\">\n {{ formattedStartDate }} - {{ formattedEndDate }}\n</span>\n\n<span class=\"icon-calendar\">\n <ng-container *ngTemplateOutlet=\"iconCalendar\"></ng-container>\n</span>\n\n<ng-template #iconCalendar>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path\n d=\"M19 5H5C4.44772 5 4 5.44772 4 6V17C4 17.5523 4.44772 18 5 18H19C19.5523 18 20 17.5523 20 17V6C20 5.44772 19.5523 5 19 5Z\"\n stroke=\"currentColor\"\n />\n <path d=\"M4 7.94336H20\" stroke=\"currentColor\" />\n <ellipse cx=\"7.69213\" cy=\"11.3774\" rx=\"0.984615\" ry=\"0.981132\" fill=\"currentColor\" />\n <ellipse cx=\"7.69213\" cy=\"14.3207\" rx=\"0.984615\" ry=\"0.981132\" fill=\"currentColor\" />\n <ellipse cx=\"10.6462\" cy=\"11.3774\" rx=\"0.984615\" ry=\"0.981132\" fill=\"currentColor\" />\n <ellipse cx=\"10.6462\" cy=\"14.3207\" rx=\"0.984615\" ry=\"0.981132\" fill=\"currentColor\" />\n <ellipse cx=\"13.5998\" cy=\"11.3774\" rx=\"0.984615\" ry=\"0.981132\" fill=\"currentColor\" />\n <ellipse cx=\"13.5998\" cy=\"14.3207\" rx=\"0.984615\" ry=\"0.981132\" fill=\"currentColor\" />\n <ellipse cx=\"16.554\" cy=\"11.3774\" rx=\"0.984615\" ry=\"0.981132\" fill=\"currentColor\" />\n <ellipse cx=\"16.554\" cy=\"14.3207\" rx=\"0.984615\" ry=\"0.981132\" fill=\"currentColor\" />\n </svg>\n</ng-template>\n" }]
}], ctorParameters: function () {
return [{ type: i0.ChangeDetectorRef }, { type: i0.ApplicationRef }, { type: i0.Injector }, { type: i0.Renderer2 }, { type: i0.EnvironmentInjector }, { type: i0.NgZone }, { type: i1.DatePipe }, { type: undefined, decorators: [{
type: Inject,
args: [LOCALE_ID]
}] }, { type: Document, decorators: [{
type: Inject,
args: [DOCUMENT]
}] }, { type: DokuFormField, decorators: [{
type: Optional
}, {
type: Host
}] }];
}, propDecorators: { class: [{
type: HostBinding,
args: ['class']
}], closeOnDateClick: [{
type: Input
}], dateFormat: [{
type: Input
}], placeholder: [{
type: Input
}] } });
class DokuDateRangePickerInline extends DokuDatePickerRangeProps {
constructor(cdr) {
super(cdr);
this.cdr = cdr;
this.class = 'd-date-range-picker-inline';
this.destroy$ = new Subject();
this.fieldOptions = { withoutInputStyle: true };
}
ngOnDestroy() {
this.destroy$.next(true);
this.destroy$.complete();
}
onDateChange(value) {
var _a;
(_a = this.dateChangeHandler) === null || _a === void 0 ? void 0 : _a.call(this, value);
}
}
DokuDateRangePickerInline.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuDateRangePickerInline, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
DokuDateRangePickerInline.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuDateRangePickerInline, isStandalone: true, selector: "doku-date-range-picker-inline", host: { properties: { "class": "this.class" } }, providers: [{ provide: DOKU_FORM_FIELD_ACCESSOR, useExisting: DokuDateRangePickerInline }], exportAs: ["dokuDateRangePickerInline"], usesInheritance: true, ngImport: i0, template: "<doku-date-picker-base\n [useDateRange]=\"true\"\n [value]=\"value\"\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n (valueChange)=\"onDateChange($event)\"\n></doku-date-picker-base>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DokuDatePickerBase, selector: "doku-date-picker-base", exportAs: ["dokuDatePickerBase"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuDateRangePickerInline, decorators: [{
type: Component,
args: [{ selector: 'doku-date-range-picker-inline', exportAs: 'dokuDateRangePickerInline', standalone: true, imports: [CommonModule, DokuDatePickerBase], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: DOKU_FORM_FIELD_ACCESSOR, useExisting: DokuDateRangePickerInline }], template: "<doku-date-picker-base\n [useDateRange]=\"true\"\n [value]=\"value\"\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n (valueChange)=\"onDateChange($event)\"\n></doku-date-picker-base>\n" }]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { class: [{
type: HostBinding,
args: ['class']
}] } });
class DokuDatePickerModule {
}
DokuDatePickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuDatePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
DokuDatePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: DokuDatePickerModule, imports: [DokuDatePickerInline,
DokuDatePicker,
DokuDateRangePickerInline,
DokuDateRangePicker,
DokuDateRangePickerInput,
DokuStartDate,
DokuEndDate], exports: [DokuDatePickerInline,
DokuDatePicker,
DokuDateRangePickerInline,
DokuDateRangePicker,
DokuDateRangePickerInput,
DokuStartDate,
DokuEndDate] });
DokuDatePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuDatePickerModule, imports: [DokuDatePickerInline,
DokuDatePicker,
DokuDateRangePickerInline,
DokuDateRangePicker,
DokuDateRangePickerInput] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuDatePickerModule, decorators: [{
type: NgModule,
args: [{
imports: [
DokuDatePickerInline,
DokuDatePicker,
DokuDateRangePickerInline,
DokuDateRangePicker,
DokuDateRangePickerInput,
DokuStartDate,
DokuEndDate,
],
exports: [
DokuDatePickerInline,
DokuDatePicker,
DokuDateRangePickerInline,
DokuDateRangePicker,
DokuDateRangePickerInput,
DokuStartDate,
DokuEndDate,
],
}]
}] });
const STANDARD_MAX_TIME = {
hour: 23,
minute: 59,
second: 59,
};
class DokuInputTime {
constructor(elementRef, ngZone) {
this.elementRef = elementRef;
this.ngZone = ngZone;
this.listenOnInput();
this.listenOnBlur();
}
get element() {
return this.elementRef.nativeElement;
}
listenOnInput() {
this.ngZone.runOutsideAngular(() => {
this.element.oninput = () => {
this.normalizeInputToNumbersOnly();
this.setStandardMaxTime();
};
});
}
listenOnBlur() {
this.ngZone.runOutsideAngular(() => {
this.element.onblur = () => {
this.addPadToValue();
};
});
}
normalizeInputToNumbersOnly() {
this.element.value = this.element.value.replaceAll(/\D/g, '');
}
addPadToValue() {
this.element.value = this.element.value ? this.element.value.padStart(2, '0') : '';
}
setStandardMaxTime() {
const type = this.element.name;
const standardMaxTime = STANDARD_MAX_TIME[type];
let normalizedValue = '';
if (this.element.value) {
const value = parseInt(this.element.value);
normalizedValue = value > standardMaxTime ? standardMaxTime : value;
}
this.element.value = normalizedValue === null || normalizedValue === void 0 ? void 0 : normalizedValue.toString();
}
}
DokuInputTime.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuInputTime, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
DokuInputTime.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: DokuInputTime, isStandalone: true, selector: "[doku-input-time]", exportAs: ["dokuInputTime"], ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuInputTime, decorators: [{
type: Directive,
args: [{
selector: '[doku-input-time]',
exportAs: 'dokuInputTime',
standalone: true,
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; } });
class DokuTimePicker {
constructor(cdr, ngControl) {
this.cdr = cdr;
this.ngControl = ngControl;
this.classes = 'd-time-picker';
/**
* Whether to disable the time picker.
* @default false
*/
this.disabled = false;
/**
* Whether to show the seconds input.
* @default false
*/
this.showSeconds = false;
/**
* Value of the time picker in ISO String format.
* @default ''
*/
this.value = '';
/**
* Minimum time that can be selected. Value in ISO String format.
* @default ''
*/
this.min = '';
/**
* Maximum time that can be selected. Value in ISO String format.
* @default ''
*/
this.max = '';
/**
* An event emitted when the time changes on blur and condition met.
*
* Conditions:
* - All fields are filled.
* - All fields were filled previously, but there is an empty field on the current change.
* This case, the value will be an empty string.
* - Previous and current values are different.
*/
this.timeChange = new EventEmitter();
this.hourValue = '';
this.minuteValue = '';
this.secondValue = '';
this.notifyOnBlur$ = new Subject();
this.destroy$ = new ReplaySubject();
this.fieldOptions = { withoutInputStyle: true };
if (this.ngControl) {
this.ngControl.valueAccessor = this;
}
}
registerOnDisable(fn) {
this.onDisable = fn;
}
registerOnValidate(fn) {
this.onValidate = fn;
}
writeValue(value) {
this.setValueFromISOString(value);
this.cdr.detectChanges();
}
registerOnChange(fn) {
this.onChange = fn;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
setDisabledState(isDisabled) {
this.disabled = isDisabled;
this.cdr.detectChanges();
}
ngOnInit() {
this.notifyOnBlur$
.pipe(tap(() => {
var _a;
(_a = this.onTouched) === null || _a === void 0 ? void 0 : _a.call(this);
this.setMinMaxTime(this.constructFinalValue());
}), map(() => this.constructFinalValue()), startWith(this.constructFinalValue()), pairwise(), filter(([prev, current]) => (!prev && !!current) || (!!prev && !current) || (!!prev && !!current)), distinctUntilChanged(([, prev], [, current]) => JSON.stringify(prev) === JSON.stringify(current)), takeUntil(this.destroy$))
.subscribe(([, currentValue]) => {
var _a, _b;
this.timeChange.emit(currentValue);
(_a = this.onChange) === null || _a === void 0 ? void 0 : _a.call(this, currentValue);
(_b = this.onValidate) === null || _b === void 0 ? void 0 : _b.call(this, currentValue ? 'valid' : 'invalid');
});
}
ngAfterViewInit() {
var _a, _b;
(_b = (_a = this.ngControl) === null || _a === void 0 ? void 0 : _a.statusChanges) === null || _b === void 0 ? void 0 : _b.pipe(distinctUntilChanged(), delay(0), takeUntil(this.destroy$)).subscribe((status) => {
var _a, _b, _c;
if (status === 'VALID') {
(_a = this.onValidate) === null || _a === void 0 ? void 0 : _a.call(this, 'valid');
}
else if (status === 'INVALID') {
(_b = this.onValidate) === null || _b === void 0 ? void 0 : _b.call(this, 'invalid');
}
else {
(_c = this.onValidate) === null || _c === void 0 ? void 0 : _c.call(this);
}
});
}
ngOnChanges(changes) {
var _a, _b, _c, _d, _e, _f;
if (((_a = changes['disabled']) === null || _a === void 0 ? void 0 : _a.previousValue) !== ((_b = changes['disabled']) === null || _b === void 0 ? void 0 : _b.currentValue)) {
(_c = this.onDisable) === null || _c === void 0 ? void 0 : _c.call(this, !!this.disabled);
}
if (((_d = changes['value']) === null || _d === void 0 ? void 0 : _d.previousValue) !== ((_e = changes['value']) === null || _e === void 0 ? void 0 : _e.currentValue)) {
this.setValueFromISOString((_f = changes['value']) === null || _f === void 0 ? void 0 : _f.currentValue);
}
}
ngOnDestroy() {
this.destroy$.next(true);
this.destroy$.complete();
}
constructFinalValue() {
if (!this.hourValue || !this.minuteValue)
return '';
if (this.showSeconds && !this.secondValue)
return '';
const time = this.value ? new Date(this.value) : new Date();
time.setHours(parseInt(this.hourValue));
time.setMinutes(parseInt(this.minuteValue));
time.setSeconds(parseInt(this.showSeconds ? this.secondValue : '0'));
time.setMilliseconds(0);
return time.toISOString();
}
setMinMaxTime(currentTime) {
if (this.min && new Date(currentTime) < new Date(this.min)) {
this.setValueFromISOString(this.min);
}
if (this.max && new Date(currentTime) > new Date(this.max)) {
this.setValueFromISOString(this.max);
}
}
getTimeFromISODateString(value) {
const time = new Date(value || '');
const isValid = time instanceof Date && !isNaN(time.getTime());
if (!isValid)
return { hour: '', minute: '', second: '' };
return {
hour: time.getHours().toString(),
minute: time.getMinutes().toString(),
second: time.getSeconds().toString(),
};
}
setValueFromISOString(value) {
const { hour, minute, second } = this.getTimeFromISODateString(value);
this.hourValue = this.addPadToValueItem(hour);
this.minuteValue = this.addPadToValueItem(minute);
this.secondValue = this.addPadToValueItem(second);
}
addPadToValueItem(value) {
return value ? value.padStart(2, '0') : value;
}
}
DokuTimePicker.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuTimePicker, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
DokuTimePicker.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuTimePicker, isStandalone: true, selector: "doku-time-picker", inputs: { disabled: "disabled", showSeconds: "showSeconds", value: "value", min: "min", max: "max" }, outputs: { timeChange: "timeChange" }, host: { properties: { "class": "this.classes" } }, providers: [{ provide: DOKU_FORM_FIELD_ACCESSOR, useExisting: DokuTimePicker }], exportAs: ["dokuTimePicker"], usesOnChanges: true, ngImport: i0, template: "<div class=\"input-wrapper\">\n <input\n #inputHour\n doku-input-time\n name=\"hour\"\n type=\"text\"\n placeholder=\"HH\"\n maxlength=\"2\"\n [disabled]=\"disabled\"\n [(ngModel)]=\"hourValue\"\n (blur)=\"notifyOnBlur$.next(true)\"\n autocomplete=\"off\"\n />\n</div>\n<div class=\"input-wrapper\">\n <input\n #inputMinute\n doku-input-time\n name=\"minute\"\n type=\"text\"\n placeholder=\"MM\"\n maxlength=\"2\"\n [disabled]=\"disabled\"\n [(ngModel)]=\"minuteValue\"\n (blur)=\"notifyOnBlur$.next(true)\"\n autocomplete=\"off\"\n />\n</div>\n<div class=\"input-wrapper\" *ngIf=\"showSeconds\">\n <input\n #inputSecond\n doku-input-time\n name=\"second\"\n type=\"text\"\n placeholder=\"SS\"\n maxlength=\"2\"\n [disabled]=\"disabled\"\n [(ngModel)]=\"secondValue\"\n (blur)=\"notifyOnBlur$.next(true)\"\n autocomplete=\"off\"\n />\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: DokuInputTime, selector: "[doku-input-time]", exportAs: ["dokuInputTime"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuTimePicker, decorators: [{
type: Component,
args: [{ selector: 'doku-time-picker', exportAs: 'dokuTimePicker', standalone: true, imports: [CommonModule, DokuInputTime, FormsModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: DOKU_FORM_FIELD_ACCESSOR, useExisting: DokuTimePicker }], template: "<div class=\"input-wrapper\">\n <input\n #inputHour\n doku-input-time\n name=\"hour\"\n type=\"text\"\n placeholder=\"HH\"\n maxlength=\"2\"\n [disabled]=\"disabled\"\n [(ngModel)]=\"hourValue\"\n (blur)=\"notifyOnBlur$.next(true)\"\n autocomplete=\"off\"\n />\n</div>\n<div class=\"input-wrapper\">\n <input\n #inputMinute\n doku-input-time\n name=\"minute\"\n type=\"text\"\n placeholder=\"MM\"\n maxlength=\"2\"\n [disabled]=\"disabled\"\n [(ngModel)]=\"minuteValue\"\n (blur)=\"notifyOnBlur$.next(true)\"\n autocomplete=\"off\"\n />\n</div>\n<div class=\"input-wrapper\" *ngIf=\"showSeconds\">\n <input\n #inputSecond\n doku-input-time\n name=\"second\"\n type=\"text\"\n placeholder=\"SS\"\n maxlength=\"2\"\n [disabled]=\"disabled\"\n [(ngModel)]=\"secondValue\"\n (blur)=\"notifyOnBlur$.next(true)\"\n autocomplete=\"off\"\n />\n</div>\n" }]
}], ctorParameters: function () {
return [{ type: i0.ChangeDetectorRef }, { type: i1$1.NgControl, decorators: [{
type: Optional
}, {
type: Self
}] }];
}, propDecorators: { classes: [{
type: HostBinding,
args: ['class']
}], disabled: [{
type: Input
}], showSeconds: [{
type: Input
}], value: [{
type: Input
}], min: [{
type: Input
}], max: [{
type: Input
}], timeChange: [{
type: Output
}] } });
class DokuTimePickerModule {
}
DokuTimePickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuTimePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
DokuTimePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: DokuTimePickerModule, imports: [DokuTimePicker], exports: [DokuTimePicker] });
DokuTimePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuTimePickerModule, imports: [DokuTimePicker] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuTimePickerModule, decorators: [{
type: NgModule,
args: [{
imports: [DokuTimePicker],
exports: [DokuTimePicker],
}]
}] });
class DokuTimePickerCommon {
get value() {
return this._value;
}
set value(val) {
this._value = this.normalizeTime(val);
}
get minTime() {
return this._minTime;
}
set minTime(val) {
this._minTime = this.normalizeTime(val);
}
get maxTime() {
return this._maxTime;
}
set maxTime(val) {
this._maxTime = this.normalizeTime(val);
}
constructor(localeId) {
this.localeId = localeId;
this.disabled = false;
this._value = '';
this._minTime = '';
this._maxTime = '';
this.timeChange = new EventEmitter();
}
get textSelectTIme() {
if (this.labelSelectTime)
return this.labelSelectTime;
return this.localeId.toLowerCase().startsWith('en') ? 'Select Time' : 'Pilih Waktu';
}
normalizeTime(time) {
if (time instanceof Date)
return time.toISOString();
if (typeof time === 'string')
return time;
return '';
}
}
DokuTimePickerCommon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuTimePickerCommon, deps: [{ token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Component });
DokuTimePickerCommon.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuTimePickerCommon, isStandalone: true, selector: "doku-time-picker-common", inputs: { disabled: "disabled", value: "value", minTime: "minTime", maxTime: "maxTime", labelSelectTime: "labelSelectTime" }, outputs: { timeChange: "timeChange" }, exportAs: ["dokuTimePickerCommon"], ngImport: i0, template: "<div class=\"d-date-time-picker-footer\">\n <doku-form-field>\n <doku-field-label>{{ textSelectTIme }}</doku-field-label>\n <doku-time-picker\n [disabled]=\"disabled\"\n [value]=\"value\"\n [min]=\"minTime\"\n [max]=\"maxTime\"\n (timeChange)=\"value = $event; timeChange.emit($event)\"\n ></doku-time-picker>\n </doku-form-field>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DokuFormFieldModule }, { kind: "component", type: DokuFormField, selector: "doku-form-field", inputs: ["showSuccessBehavior", "isErrorState", "isSuccessState"], exportAs: ["dokuFormField"] }, { kind: "component", type: DokuFieldLabel, selector: "doku-field-label", inputs: ["for"], exportAs: ["dokuFieldLabel"] }, { kind: "ngmodule", type: DokuTimePickerModule }, { kind: "component", type: DokuTimePicker, selector: "doku-time-picker", inputs: ["disabled", "showSeconds", "value", "min", "max"], outputs: ["timeChange"], exportAs: ["dokuTimePicker"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuTimePickerCommon, decorators: [{
type: Component,
args: [{ selector: 'doku-time-picker-common', exportAs: 'dokuTimePickerCommon', standalone: true, imports: [CommonModule, DokuFormFieldModule, DokuTimePickerModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"d-date-time-picker-footer\">\n <doku-form-field>\n <doku-field-label>{{ textSelectTIme }}</doku-field-label>\n <doku-time-picker\n [disabled]=\"disabled\"\n [value]=\"value\"\n [min]=\"minTime\"\n [max]=\"maxTime\"\n (timeChange)=\"value = $event; timeChange.emit($event)\"\n ></doku-time-picker>\n </doku-form-field>\n</div>\n" }]
}], ctorParameters: function () {
return [{ type: undefined, decorators: [{
type: Inject,
args: [LOCALE_ID]
}] }];
}, propDecorators: { disabled: [{
type: Input
}], value: [{
type: Input
}], minTime: [{
type: Input
}], maxTime: [{
type: Input
}], labelSelectTime: [{
type: Input
}], timeChange: [{
type: Output
}] } });
class DokuDateTimePicker extends DokuDatePicker {
constructor() {
super(...arguments);
/**
* Placeholder of the date picker input.
*
* @default 'dd/mm/yyyy hh:mm'
*/
this.placeholder = 'dd/mm/yyyy hh:mm';
/**
* Date format that will be used for formatting displayed value in the input field.
* It follows Angular DatePipe's format options.
*
* @default 'dd/MM/yyyy HH:mm'
*/
this.dateFormat = 'dd/MM/yyyy HH:mm';
this.closeOnDateClick = false;
}
createComponentRef(props) {
const timeRef = this.createComponentTimeRef(props.elementInjector);
const ref = createComponent(DokuDatePickerBase, {
environmentInjector: this.envInjector,
elementInjector: props.elementInjector,
projectableNodes: [[timeRef.location.nativeElement]],
});
ref.setInput('value', this.value);
ref.setInput('minDate', this.minDate);
ref.setInput('maxDate', this.maxDate);
const timeValueChangeListener = timeRef.instance.timeChange.subscribe((value) => {
ref.setInput('value', value);
});
const valueChangeListener = ref.instance.valueChange.subscribe((value) => {
timeRef.setInput('value', value.start);
timeRef.setInput('minTime', this.minDate);
timeRef.setInput('maxTime', this.maxDate);
});
timeRef.onDestroy(() => {
timeValueChangeListener.unsubscribe();
});
ref.onDestroy(() => {
valueChangeListener.unsubscribe();
timeRef.destroy();
});
return ref;
}
createComponentTimeRef(elementInjector) {
const timeRef = createComponent(DokuTimePickerCommon, {
environmentInjector: this.envInjector,
elementInjector: elementInjector,
});
timeRef.setInput('value', this.value);
timeRef.setInput('minTime', this.minDate);
timeRef.setInput('maxTime', this.maxDate);
timeRef.setInput('disabled', this.disabled);
timeRef.setInput('labelSelectTime', this.labelSelectTime);
this.appRef.attachView(timeRef.hostView);
return timeRef;
}
}
DokuDateTimePicker.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuDateTimePicker, deps: null, target: i0.ɵɵFactoryTarget.Component });
DokuDateTimePicker.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuDateTimePicker, isStandalone: true, selector: "doku-date-time-picker", inputs: { labelSelectTime: "labelSelectTime", placeholder: "placeholder", dateFormat: "dateFormat" }, providers: [
DatePipe,
{ provide: DOKU_FORM_FIELD_ACCESSOR, useExisting: DokuDateTimePicker },
{ provide: DOKU_DATE_PICKER_STRICT_TIME, useValue: true },
], exportAs: ["dokuDateTimePicker"], usesInheritance: true, ngImport: i0, template: "<span *ngIf=\"!formattedValue\" class=\"d-date-picker-placeholder\">\n {{ placeholder }}\n</span>\n\n<span *ngIf=\"formattedValue\" class=\"d-date-picker-value\">\n {{ formattedValue }}\n</span>\n\n<span class=\"icon-calendar\">\n <ng-container *ngTemplateOutlet=\"iconCalendar\"></ng-container>\n</span>\n\n<ng-template #iconCalendar>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path\n d=\"M19 5H5C4.44772 5 4 5.44772 4 6V17C4 17.5523 4.44772 18 5 18H19C19.5523 18 20 17.5523 20 17V6C20 5.44772 19.5523 5 19 5Z\"\n stroke=\"currentColor\"\n />\n <path d=\"M4 7.94336H20\" stroke=\"currentColor\" />\n <ellipse cx=\"7.69213\" cy=\"11.3774\" rx=\"0.984615\" ry=\"0.981132\" fill=\"currentColor\" />\n <ellipse cx=\"7.69213\" cy=\"14.3207\" rx=\"0.984615\" ry=\"0.981132\" fill=\"currentColor\" />\n <ellipse cx=\"10.6462\" cy=\"11.3774\" rx=\"0.984615\" ry=\"0.981132\" fill=\"currentColor\" />\n <ellipse cx=\"10.6462\" cy=\"14.3207\" rx=\"0.984615\" ry=\"0.981132\" fill=\"currentColor\" />\n <ellipse cx=\"13.5998\" cy=\"11.3774\" rx=\"0.984615\" ry=\"0.981132\" fill=\"currentColor\" />\n <ellipse cx=\"13.5998\" cy=\"14.3207\" rx=\"0.984615\" ry=\"0.981132\" fill=\"currentColor\" />\n <ellipse cx=\"16.554\" cy=\"11.3774\" rx=\"0.984615\" ry=\"0.981132\" fill=\"currentColor\" />\n <ellipse cx=\"16.554\" cy=\"14.3207\" rx=\"0.984615\" ry=\"0.981132\" fill=\"currentColor\" />\n </svg>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuDateTimePicker, decorators: [{
type: Component,
args: [{ selector: 'doku-date-time-picker', exportAs: 'dokuDateTimePicker', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
DatePipe,
{ provide: DOKU_FORM_FIELD_ACCESSOR, useExisting: DokuDateTimePicker },
{ provide: DOKU_DATE_PICKER_STRICT_TIME, useValue: true },
], template: "<span *ngIf=\"!formattedValue\" class=\"d-date-picker-placeholder\">\n {{ placeholder }}\n</span>\n\n<span *ngIf=\"formattedValue\" class=\"d-date-picker-value\">\n {{ formattedValue }}\n</span>\n\n<span class=\"icon-calendar\">\n <ng-container *ngTemplateOutlet=\"iconCalendar\"></ng-container>\n</span>\n\n<ng-template #iconCalendar>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path\n d=\"M19 5H5C4.44772 5 4 5.44772 4 6V17C4 17.5523 4.44772 18 5 18H19C19.5523 18 20 17.5523 20 17V6C20 5.44772 19.5523 5 19 5Z\"\n stroke=\"currentColor\"\n />\n <path d=\"M4 7.94336H20\" stroke=\"currentColor\" />\n <ellipse cx=\"7.69213\" cy=\"11.3774\" rx=\"0.984615\" ry=\"0.981132\" fill=\"currentColor\" />\n <ellipse cx=\"7.69213\" cy=\"14.3207\" rx=\"0.984615\" ry=\"0.981132\" fill=\"currentColor\" />\n <ellipse cx=\"10.6462\" cy=\"11.3774\" rx=\"0.984615\" ry=\"0.981132\" fill=\"currentColor\" />\n <ellipse cx=\"10.6462\" cy=\"14.3207\" rx=\"0.984615\" ry=\"0.981132\" fill=\"currentColor\" />\n <ellipse cx=\"13.5998\" cy=\"11.3774\" rx=\"0.984615\" ry=\"0.981132\" fill=\"currentColor\" />\n <ellipse cx=\"13.5998\" cy=\"14.3207\" rx=\"0.984615\" ry=\"0.981132\" fill=\"currentColor\" />\n <ellipse cx=\"16.554\" cy=\"11.3774\" rx=\"0.984615\" ry=\"0.981132\" fill=\"currentColor\" />\n <ellipse cx=\"16.554\" cy=\"14.3207\" rx=\"0.984615\" ry=\"0.981132\" fill=\"currentColor\" />\n </svg>\n</ng-template>\n" }]
}], propDecorators: { labelSelectTime: [{
type: Input
}], placeholder: [{
type: Input
}], dateFormat: [{
type: Input
}] } });
class DokuDateTimePickerInline extends DokuDatePickerInline {
}
DokuDateTimePickerInline.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuDateTimePickerInline, deps: null, target: i0.ɵɵFactoryTarget.Component });
DokuDateTimePickerInline.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuDateTimePickerInline, isStandalone: true, selector: "doku-date-time-picker-inline", inputs: { labelSelectTime: "labelSelectTime" }, providers: [
{ provide: DOKU_FORM_FIELD_ACCESSOR, useExisting: DokuDateTimePickerInline },
{ provide: DOKU_DATE_PICKER_STRICT_TIME, useValue: true },
], exportAs: ["dokuDateTimePickerInline"], usesInheritance: true, ngImport: i0, template: "<doku-date-picker-inline\n [value]=\"value\"\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n (valueChange)=\"value = $event\"\n>\n <doku-time-picker-common\n doku-date-picker-footer\n [disabled]=\"disabled\"\n [value]=\"value\"\n [minTime]=\"minDate\"\n [maxTime]=\"maxDate\"\n [labelSelectTime]=\"labelSelectTime\"\n (timeChange)=\"value = $event\"\n ></doku-time-picker-common>\n</doku-date-picker-inline>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DokuDatePickerInline, selector: "doku-date-picker-inline", exportAs: ["dokuDatePickerInline"] }, { kind: "component", type: DokuTimePickerCommon, selector: "doku-time-picker-common", inputs: ["disabled", "value", "minTime", "maxTime", "labelSelectTime"], outputs: ["timeChange"], exportAs: ["dokuTimePickerCommon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuDateTimePickerInline, decorators: [{
type: Component,
args: [{ selector: 'doku-date-time-picker-inline', exportAs: 'dokuDateTimePickerInline', standalone: true, imports: [CommonModule, DokuDatePickerInline, DokuTimePickerCommon], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
{ provide: DOKU_FORM_FIELD_ACCESSOR, useExisting: DokuDateTimePickerInline },
{ provide: DOKU_DATE_PICKER_STRICT_TIME, useValue: true },
], template: "<doku-date-picker-inline\n [value]=\"value\"\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n (valueChange)=\"value = $event\"\n>\n <doku-time-picker-common\n doku-date-picker-footer\n [disabled]=\"disabled\"\n [value]=\"value\"\n [minTime]=\"minDate\"\n [maxTime]=\"maxDate\"\n [labelSelectTime]=\"labelSelectTime\"\n (timeChange)=\"value = $event\"\n ></doku-time-picker-common>\n</doku-date-picker-inline>\n" }]
}], propDecorators: { labelSelectTime: [{
type: Input
}] } });
class DokuDateTimePickerModule {
}
DokuDateTimePickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuDateTimePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
DokuDateTimePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: DokuDateTimePickerModule, imports: [DokuDateTimePickerInline, DokuDateTimePicker], exports: [DokuDateTimePickerInline, DokuDateTimePicker] });
DokuDateTimePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuDateTimePickerModule, imports: [DokuDateTimePickerInline, DokuDateTimePicker] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuDateTimePickerModule, decorators: [{
type: NgModule,
args: [{
imports: [DokuDateTimePickerInline, DokuDateTimePicker],
exports: [DokuDateTimePickerInline, DokuDateTimePicker],
}]
}] });
class DokuDropdownMenuDivider {
constructor() {
this.classes = ['d-dropdown-menu-divider'];
}
}
DokuDropdownMenuDivider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuDropdownMenuDivider, deps: [], target: i0.ɵɵFactoryTarget.Directive });
DokuDropdownMenuDivider.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: DokuDropdownMenuDivider, isStandalone: true, selector: "[doku-dropdown-menu-divider]", host: { properties: { "class": "this.classes" } }, exportAs: ["dokuDropdownMenuDivider"], ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuDropdownMenuDivider, decorators: [{
type: Directive,
args: [{
selector: '[doku-dropdown-menu-divider]',
exportAs: 'dokuDropdownMenuDivider',
standalone: true,
}]
}], propDecorators: { classes: [{
type: HostBinding,
args: ['class']
}] } });
const DOKU_DROPDOWN = new InjectionToken('DOKU_DROPDOWN');
const DOKU_DROPDOWN_TOGGLE = new InjectionToken('DOKU_DROPDOWN_TOGGLE');
const DOKU_DROPDOWN_MENU = new InjectionToken('DOKU_DROPDOWN_MENU');
class DokuDropdown {
constructor(elementRef, renderer, ngZone, document) {
this.elementRef = elementRef;
this.renderer = renderer;
this.ngZone = ngZone;
this.document = document;
/**
* The position of the dropdown menu while opened based on the toggler/anchor element.
* @default 'bottom-start'
*/
this.placement = 'bottom-start';
this.destroy$ = new ReplaySubject();
}
get dropdownToggleElement() {
var _a, _b;
return (_b = (_a = this.dropdownToggle) === null || _a === void 0 ? void 0 : _a['elementRef']) === null || _b === void 0 ? void 0 : _b.nativeElement;
}
get dropdownMenuElement() {
var _a, _b;
return (_b = (_a = this.dropdownMenu) === null || _a === void 0 ? void 0 : _a['elementRef']) === null || _b === void 0 ? void 0 : _b.nativeElement;
}
ngAfterViewInit() {
this.closeDropdownMenuEventHandler();
}
ngOnDestroy() {
this.destroy$.next(true);
this.destroy$.complete();
}
toggleDropdownMenu() {
var _a;
(_a = this.dropdownMenu) === null || _a === void 0 ? void 0 : _a.toggle();
}
showDropdownMenu() {
var _a;
(_a = this.dropdownMenu) === null || _a === void 0 ? void 0 : _a.show();
}
hideDropdownMenu() {
var _a;
(_a = this.dropdownMenu) === null || _a === void 0 ? void 0 : _a.hide();
}
/**
* It will create a container for dropdown and append it to the body element.
*/
applyContainer() {
this.resetContainer();
const bodyContainer = (this.bodyContainer = this.renderer.createElement('div'));
bodyContainer.id = 'd-dropdown-portal';
this.originalDropdownMenu = this.dropdownMenuElement;
this.renderer.appendChild(bodyContainer, this.originalDropdownMenu);
this.renderer.appendChild(this.document.body, bodyContainer);
}
/**
* Remove body container when dropdown closed and add back the dropdown menu to its original element position.
*/
resetContainer() {
if (this.originalDropdownMenu) {
this.renderer.appendChild(this.elementRef.nativeElement, this.originalDropdownMenu);
}
if (this.bodyContainer) {
this.renderer.removeChild(this.document.body, this.bodyContainer);
this.bodyContainer = undefined;
}
}
closeDropdownMenuEventHandler() {
this.ngZone.runOutsideAngular(() => {
if (!this.dropdownToggleElement || !this.dropdownMenuElement)
return;
fromEvent(window, 'click', { capture: true })
.pipe(takeUntil(this.destroy$))
.subscribe((event) => {
var _a;
const { clickTrigger, clickOutside } = getClickType(event, [this.dropdownToggleElement], [this.dropdownMenuElement]);
if (clickOutside && !clickTrigger)
(_a = this.dropdownMenu) === null || _a === void 0 ? void 0 : _a.hide();
});
});
}
}
DokuDropdown.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuDropdown, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive });
DokuDropdown.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: DokuDropdown, isStandalone: true, selector: "[doku-dropdown]", inputs: { placement: "placement" }, providers: [{ provide: DOKU_DROPDOWN, useExisting: DokuDropdown }], queries: [{ propertyName: "dropdownToggle", first: true, predicate: DOKU_DROPDOWN_TOGGLE, descendants: true }, { propertyName: "dropdownMenu", first: true, predicate: DOKU_DROPDOWN_MENU, descendants: true }], exportAs: ["dokuDropdown"], ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuDropdown, decorators: [{
type: Directive,
args: [{
selector: '[doku-dropdown]',
exportAs: 'dokuDropdown',
standalone: true,
providers: [{ provide: DOKU_DROPDOWN, useExisting: DokuDropdown }],
}]
}], ctorParameters: function () {
return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: Document, decorators: [{
type: Inject,
args: [DOCUMENT]
}] }];
}, propDecorators: { placement: [{
type: Input
}], dropdownToggle: [{
type: ContentChild,
args: [DOKU_DROPDOWN_TOGGLE]
}], dropdownMenu: [{
type: ContentChild,
args: [DOKU_DROPDOWN_MENU]
}] } });
class DokuDropdownMenu {
constructor(elementRef, ngZone, dropdown, menuItem) {
var _a;
this.elementRef = elementRef;
this.ngZone = ngZone;
this.dropdown = dropdown;
this.menuItem = menuItem;
this.classes = ['d-dropdown-menu'];
this.placement = ((_a = this.dropdown) === null || _a === void 0 ? void 0 : _a.placement) || 'bottom-start';
this.nativeElement = this.elementRef.nativeElement;
}
ngOnDestroy() {
this.hide();
}
toggle() {
if (this.nativeElement.style.display === 'block') {
this.hide();
}
else {
this.show();
}
}
show() {
var _a;
this.nativeElement.style.display = 'block';
(_a = this.dropdown) === null || _a === void 0 ? void 0 : _a['applyContainer']();
this.doAutoUpdatePosition();
}
hide() {
var _a, _b;
this.nativeElement.style.display = '';
(_a = this.dropdown) === null || _a === void 0 ? void 0 : _a['resetContainer']();
(_b = this.cleanup) === null || _b === void 0 ? void 0 : _b.call(this);
}
getTogglerElement() {
var _a, _b, _c;
return (((_a = this.menuItem) === null || _a === void 0 ? void 0 : _a['elementRef']) ||
((_c = (_b = this.dropdown) === null || _b === void 0 ? void 0 : _b['dropdownToggle']) === null || _c === void 0 ? void 0 : _c['elementRef']));
}
updatePosition() {
const toggleElement = this.getTogglerElement();
if (!toggleElement || !this.elementRef)
return;
computePosition(toggleElement.nativeElement, this.elementRef.nativeElement, {
placement: this.placement,
middleware: [flip(), shift()],
}).then(({ x, y }) => {
Object.assign(this.elementRef.nativeElement.style, {
top: `${y}px`,
left: `${x}px`,
});
});
}
doAutoUpdatePosition() {
this.ngZone.runOutsideAngular(() => {
const toggleElement = this.getTogglerElement();
if (!toggleElement || !this.elementRef)
return;
this.cleanup = autoUpdate(toggleElement.nativeElement, this.elementRef.nativeElement, () => {
this.updatePosition();
});
});
}
}
DokuDropdownMenu.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuDropdownMenu, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: DOKU_DROPDOWN, optional: true }, { token: DokuDropdownMenuItem, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
DokuDropdownMenu.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: DokuDropdownMenu, isStandalone: true, selector: "[doku-dropdown-menu]", host: { properties: { "class": "this.classes" } }, providers: [{ provide: DOKU_DROPDOWN_MENU, useExisting: DokuDropdownMenu }], exportAs: ["dokuDropdownMenu"], ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuDropdownMenu, decorators: [{
type: Directive,
args: [{
selector: '[doku-dropdown-menu]',
exportAs: 'dokuDropdownMenu',
standalone: true,
providers: [{ provide: DOKU_DROPDOWN_MENU, useExisting: DokuDropdownMenu }],
}]
}], ctorParameters: function () {
return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: DokuDropdown, decorators: [{
type: Optional
}, {
type: Inject,
args: [DOKU_DROPDOWN]
}] }, { type: DokuDropdownMenuItem, decorators: [{
type: Optional
}, {
type: Host
}] }];
}, propDecorators: { classes: [{
type: HostBinding,
args: ['class']
}] } });
class DokuDropdownMenuItem {
get classes() {
return ['d-dropdown-menu-item', 'd-text-body-m', `d-dropdown-menu-item-${this.appearance}`];
}
constructor(elementRef, dropdownMenu) {
this.elementRef = elementRef;
this.dropdownMenu = dropdownMenu;
/**
* Whether to disable the item.
* It prevents from being clicked and has different styles.
* @default false
*/
this.disabled = false;
/**
* Whether to disable the click functionality of the item.
* @default false
*/
this.disableClick = false;
/**
* The appearance of the menu item.
* - `normal` (default), has padding.
* - `plain`, no additional styles.
*/
this.appearance = 'normal';
}
get hasNestedDropdownMenu() {
return !!this.nestedDropdownMenu;
}
onClick(event) {
var _a;
if (this.disabled || this.disableClick) {
event.preventDefault();
event.stopPropagation();
return;
}
(_a = this.dropdownMenu) === null || _a === void 0 ? void 0 : _a.hide();
}
onMouseEnter() {
if (!this.nestedDropdownMenu)
return;
this.nestedDropdownMenu['placement'] = 'right-start';
this.nestedDropdownMenu.show();
}
onMouseLeave() {
if (!this.nestedDropdownMenu)
return;
this.nestedDropdownMenu.hide();
}
}
DokuDropdownMenuItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuDropdownMenuItem, deps: [{ token: i0.ElementRef }, { token: DokuDropdownMenu, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
DokuDropdownMenuItem.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: DokuDropdownMenuItem, isStandalone: true, selector: "[doku-dropdown-menu-item]", inputs: { disabled: "disabled", disableClick: "disableClick", appearance: "appearance" }, host: { listeners: { "click": "onClick($event)", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" }, properties: { "class.d-dropdown-menu-item-disabled": "this.disabled", "class": "this.classes", "class.d-dropdown-menu-nested": "this.hasNestedDropdownMenu" } }, queries: [{ propertyName: "nestedDropdownMenu", first: true, predicate: DokuDropdownMenu, descendants: true }], exportAs: ["dokuDropdownMenuItem"], ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuDropdownMenuItem, decorators: [{
type: Directive,
args: [{
selector: '[doku-dropdown-menu-item]',
exportAs: 'dokuDropdownMenuItem',
standalone: true,
}]
}], ctorParameters: function () {
return [{ type: i0.ElementRef }, { type: DokuDropdownMenu, decorators: [{
type: Optional
}, {
type: Host
}] }];
}, propDecorators: { disabled: [{
type: HostBinding,
args: ['class.d-dropdown-menu-item-disabled']
}, {
type: Input
}], disableClick: [{
type: Input
}], appearance: [{
type: Input
}], classes: [{
type: HostBinding,
args: ['class']
}], nestedDropdownMenu: [{
type: ContentChild,
args: [DokuDropdownMenu]
}], hasNestedDropdownMenu: [{
type: HostBinding,
args: ['class.d-dropdown-menu-nested']
}], onClick: [{
type: HostListener,
args: ['click', ['$event']]
}], onMouseEnter: [{
type: HostListener,
args: ['mouseenter']
}], onMouseLeave: [{
type: HostListener,
args: ['mouseleave']
}] } });
class DokuDropdownToggle {
constructor(elementRef, dropdown) {
this.elementRef = elementRef;
this.dropdown = dropdown;
this.classes = ['d-dropdown-toggle'];
}
onClick() {
if (!this.dropdown)
return;
this.dropdown['toggleDropdownMenu']();
}
}
DokuDropdownToggle.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuDropdownToggle, deps: [{ token: i0.ElementRef }, { token: DOKU_DROPDOWN, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
DokuDropdownToggle.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: DokuDropdownToggle, isStandalone: true, selector: "[doku-dropdown-toggle]", host: { listeners: { "click": "onClick()" }, properties: { "class": "this.classes" } }, providers: [{ provide: DOKU_DROPDOWN_TOGGLE, useExisting: DokuDropdownToggle }], exportAs: ["dokuDropdownToggle"], ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuDropdownToggle, decorators: [{
type: Directive,
args: [{
selector: '[doku-dropdown-toggle]',
exportAs: 'dokuDropdownToggle',
standalone: true,
providers: [{ provide: DOKU_DROPDOWN_TOGGLE, useExisting: DokuDropdownToggle }],
}]
}], ctorParameters: function () {
return [{ type: i0.ElementRef }, { type: DokuDropdown, decorators: [{
type: Optional
}, {
type: Inject,
args: [DOKU_DROPDOWN]
}] }];
}, propDecorators: { classes: [{
type: HostBinding,
args: ['class']
}], onClick: [{
type: HostListener,
args: ['click']
}] } });
class DokuDropdownModule {
}
DokuDropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
DokuDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: DokuDropdownModule, imports: [DokuDropdown,
DokuDropdownMenu,
DokuDropdownToggle,
DokuDropdownMenuItem,
DokuDropdownMenuDivider], exports: [DokuDropdown,
DokuDropdownMenu,
DokuDropdownToggle,
DokuDropdownMenuItem,
DokuDropdownMenuDivider] });
DokuDropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuDropdownModule });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuDropdownModule, decorators: [{
type: NgModule,
args: [{
imports: [
DokuDropdown,
DokuDropdownMenu,
DokuDropdownToggle,
DokuDropdownMenuItem,
DokuDropdownMenuDivider,
],
exports: [
DokuDropdown,
DokuDropdownMenu,
DokuDropdownToggle,
DokuDropdownMenuItem,
DokuDropdownMenuDivider,
],
}]
}] });
class DokuSpinner {
constructor() {
/**
* The size of the spinner.
* @default 'small'
*/
this.size = 'small';
/**
* Stroke width of the spinner.
*
* Value in pixels.
* @default 4
*/
this.strokeWidth = 4;
}
get calculatedSize() {
if (this.diameter)
return this.diameter;
const mappedSize = { small: 55, medium: 111, large: 160 };
return mappedSize[this.size];
}
}
DokuSpinner.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuSpinner, deps: [], target: i0.ɵɵFactoryTarget.Component });
DokuSpinner.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuSpinner, isStandalone: true, selector: "doku-spinner", inputs: { size: "size", diameter: "diameter", strokeWidth: "strokeWidth" }, exportAs: ["dokuSpinner"], ngImport: i0, template: "<span class=\"d-spinner\">\n <span [style.width.px]=\"calculatedSize\" [style.border-width.px]=\"strokeWidth\"></span>\n</span>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuSpinner, decorators: [{
type: Component,
args: [{ selector: 'doku-spinner', exportAs: 'dokuSpinner', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"d-spinner\">\n <span [style.width.px]=\"calculatedSize\" [style.border-width.px]=\"strokeWidth\"></span>\n</span>\n" }]
}], propDecorators: { size: [{
type: Input
}], diameter: [{
type: Input
}], strokeWidth: [{
type: Input
}] } });
class DokuSpinnerModule {
}
DokuSpinnerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuSpinnerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
DokuSpinnerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: DokuSpinnerModule, imports: [DokuSpinner], exports: [DokuSpinner] });
DokuSpinnerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuSpinnerModule, imports: [DokuSpinner] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuSpinnerModule, decorators: [{
type: NgModule,
args: [{
imports: [DokuSpinner],
exports: [DokuSpinner],
}]
}] });
class DokuInputFileUpload {
/**
* Whether input file upload should be on disabled state. The default is `false`.
*/
get disabled() {
return this._disabled;
}
set disabled(val) {
this._disabled = val;
setTimeout(() => {
var _a;
(_a = this.onDisable) === null || _a === void 0 ? void 0 : _a.call(this, this._disabled);
}, 0);
}
/**
* Whether input file upload should be on loading state. The default is `false`.
*/
get loading() {
return this._loading;
}
set loading(val) {
this._loading = val != null && `${val}` !== 'false';
}
constructor(cdr, ngControl) {
this.cdr = cdr;
this.ngControl = ngControl;
this.value = undefined;
this.fieldOptions = { withoutInputStyle: true };
this.loadingChanges$ = new BehaviorSubject(false);
this.destroy$ = new ReplaySubject();
/**
* Text that is shown as an input title.
*/
this.title = 'Upload File';
/**
* Text that is shown as an input subtitle.
*/
this.subtitle = 'Tap here to upload file';
/**
* Text that is shown in loading state.
*/
this.loadingText = 'loading...';
/**
* Comma-separated list of one or more file types, or unique file type specifiers,
* describing which file types to allow. The default is "*".
*/
this.accept = '*';
this._disabled = false;
this._loading = false;
if (this.ngControl) {
this.ngControl.valueAccessor = this;
}
}
ngAfterViewInit() {
this._listenNgControlStatus();
}
onFileSelected(e) {
var _a;
const files = e.target.files;
if (!files)
return;
const file = files[0];
if (this._checkFileIsImage(file)) {
this._showImagePreview(file);
}
this.title = file.name;
this.subtitle = 'Tap here to change file';
this.value = file;
(_a = this.onChange) === null || _a === void 0 ? void 0 : _a.call(this, file);
}
ngOnChanges(changes) {
var _a, _b, _c, _d, _e, _f;
if (((_a = changes['loading']) === null || _a === void 0 ? void 0 : _a.currentValue) !== ((_b = changes['loading']) === null || _b === void 0 ? void 0 : _b.previousValue)) {
this.loadingChanges$.next((_c = changes['loading']) === null || _c === void 0 ? void 0 : _c.currentValue);
}
if (((_d = changes['disabled']) === null || _d === void 0 ? void 0 : _d.previousValue) !== ((_e = changes['disabled']) === null || _e === void 0 ? void 0 : _e.currentValue)) {
(_f = this.onDisable) === null || _f === void 0 ? void 0 : _f.call(this, !!this.disabled);
}
}
setDisabledState(isDisabled) {
this.disabled = isDisabled;
this.cdr.detectChanges();
}
/**
* Listen and assign NgControl status to `doku-form-field`
* to complete behavior and functionality of the field
* (hint, error, success message, and styling).
*/
_listenNgControlStatus() {
var _a;
(_a = combineLatest([
this.loadingChanges$,
of(true).pipe(switchMap(() => { var _a; return ((_a = this.ngControl) === null || _a === void 0 ? void 0 : _a.statusChanges) || of(null); }), map((status) => {
var _a, _b, _c, _d;
return ({
status: status,
state: {
pristine: (_b = (_a = this.ngControl) === null || _a === void 0 ? void 0 : _a.control) === null || _b === void 0 ? void 0 : _b.pristine,
untouched: (_d = (_c = this.ngControl) === null || _c === void 0 ? void 0 : _c.control) === null || _d === void 0 ? void 0 : _d.untouched,
},
});
}), delay(0), distinctUntilChanged((prev, curr) => JSON.stringify(prev) === JSON.stringify(curr))),
])) === null || _a === void 0 ? void 0 : _a.pipe(distinctUntilChanged((prev, curr) => JSON.stringify(prev) === JSON.stringify(curr)), takeUntil(this.destroy$)).subscribe(([loading, statusObj]) => {
var _a, _b, _c;
if (!this.value)
return;
const status = statusObj === null || statusObj === void 0 ? void 0 : statusObj.status;
const state = statusObj === null || statusObj === void 0 ? void 0 : statusObj.state;
if (status === 'VALID' && !loading) {
(_a = this.onValidate) === null || _a === void 0 ? void 0 : _a.call(this, 'valid', state);
}
else if (status === 'INVALID' && !loading) {
(_b = this.onValidate) === null || _b === void 0 ? void 0 : _b.call(this, 'invalid', state);
}
else {
(_c = this.onValidate) === null || _c === void 0 ? void 0 : _c.call(this, undefined, state);
}
});
}
_showImagePreview(file) {
if (file instanceof File) {
this.imagePreviewSrc = URL.createObjectURL(file);
return;
}
this.imagePreviewSrc = file;
}
_checkFileIsImage(file) {
if (file instanceof File) {
return file.type.startsWith('image/');
}
return false;
}
_checkStringIsImage(str) {
return /\.(jpg|jpeg|png|webp|avif|gif|svg)(\??.*)$/.test(str);
}
ngOnDestroy() {
this.destroy$.next(true);
this.destroy$.complete();
}
writeValue(value) {
if ((typeof value === 'string' && this._checkStringIsImage(value)) ||
(value instanceof File && this._checkFileIsImage(value))) {
this._showImagePreview(value);
}
this.value = value;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
registerOnDisable(fn) {
this.onDisable = fn;
}
registerOnChange(fn) {
this.onChange = fn;
}
registerOnValidate(fn) {
this.onValidate = fn;
}
}
DokuInputFileUpload.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuInputFileUpload, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
DokuInputFileUpload.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuInputFileUpload, isStandalone: true, selector: "doku-input-file-upload", inputs: { title: "title", subtitle: "subtitle", loadingText: "loadingText", accept: "accept", disabled: "disabled", loading: "loading" }, providers: [{ provide: DOKU_FORM_FIELD_ACCESSOR, useExisting: DokuInputFileUpload }], exportAs: ["dokuInputFileUpload"], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"d-input-file-container\"\n [class.d-input-file-loading]=\"loading\"\n (click)=\"!loading && inputFileDefault.click()\"\n>\n <div class=\"d-input-file-preview\">\n <img *ngIf=\"imagePreviewSrc\" [src]=\"imagePreviewSrc\" />\n <ng-container *ngIf=\"!imagePreviewSrc && value\" [ngTemplateOutlet]=\"iconDocs\"></ng-container>\n <ng-container *ngIf=\"!imagePreviewSrc && !value\" [ngTemplateOutlet]=\"iconPlus\"></ng-container>\n </div>\n <div class=\"d-input-file-wrapper\">\n <div class=\"d-input-file-desc\">\n <span class=\"d-input-file-name\">{{ title }}</span>\n <span class=\"d-input-file-status\">{{ loading ? loadingText : subtitle }}</span>\n </div>\n <doku-spinner *ngIf=\"loading\" [diameter]=\"16\" [strokeWidth]=\"1\"></doku-spinner>\n </div>\n</div>\n<input\n #inputFileDefault\n type=\"file\"\n class=\"d-input-file-default\"\n (change)=\"onFileSelected($event)\"\n [disabled]=\"disabled\"\n [accept]=\"accept\"\n/>\n\n<ng-template #iconPlus>\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M8.92849 6.57147V7.07147H9.42849H13.7142C13.964 7.07147 14.1666 7.2741 14.1666 7.52385V8.47623C14.1666 8.72598 13.964 8.92861 13.7142 8.92861H9.42849H8.92849V9.42861V13.7143C8.92849 13.9641 8.72586 14.1667 8.47611 14.1667H7.52373C7.27398 14.1667 7.07135 13.9641 7.07135 13.7143V9.42861V8.92861H6.57135H2.28563C2.03588 8.92861 1.83325 8.72598 1.83325 8.47623V7.52385C1.83325 7.2741 2.03588 7.07147 2.28563 7.07147H6.57135H7.07135V6.57147V2.28576C7.07135 2.036 7.27398 1.83337 7.52373 1.83337H8.47611C8.72586 1.83337 8.92849 2.036 8.92849 2.28576V6.57147Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n />\n </svg>\n</ng-template>\n\n<ng-template #iconDocs>\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M8.83333 4.87498V1.33331H3.625C3.27865 1.33331 3 1.61196 3 1.95831V14.0416C3 14.388 3.27865 14.6666 3.625 14.6666H12.375C12.7214 14.6666 13 14.388 13 14.0416V5.49998H9.45833C9.11458 5.49998 8.83333 5.21873 8.83333 4.87498ZM13 4.50779V4.66665H9.66667V1.33331H9.82552C9.99219 1.33331 10.151 1.39842 10.2682 1.5156L12.8177 4.06769C12.9349 4.18488 13 4.34373 13 4.50779Z\"\n fill=\"currentColor\"\n />\n </svg>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: DokuSpinner, selector: "doku-spinner", inputs: ["size", "diameter", "strokeWidth"], exportAs: ["dokuSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuInputFileUpload, decorators: [{
type: Component,
args: [{ selector: 'doku-input-file-upload', exportAs: 'dokuInputFileUpload', standalone: true, imports: [CommonModule, FormsModule, DokuSpinner], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: DOKU_FORM_FIELD_ACCESSOR, useExisting: DokuInputFileUpload }], template: "<div\n class=\"d-input-file-container\"\n [class.d-input-file-loading]=\"loading\"\n (click)=\"!loading && inputFileDefault.click()\"\n>\n <div class=\"d-input-file-preview\">\n <img *ngIf=\"imagePreviewSrc\" [src]=\"imagePreviewSrc\" />\n <ng-container *ngIf=\"!imagePreviewSrc && value\" [ngTemplateOutlet]=\"iconDocs\"></ng-container>\n <ng-container *ngIf=\"!imagePreviewSrc && !value\" [ngTemplateOutlet]=\"iconPlus\"></ng-container>\n </div>\n <div class=\"d-input-file-wrapper\">\n <div class=\"d-input-file-desc\">\n <span class=\"d-input-file-name\">{{ title }}</span>\n <span class=\"d-input-file-status\">{{ loading ? loadingText : subtitle }}</span>\n </div>\n <doku-spinner *ngIf=\"loading\" [diameter]=\"16\" [strokeWidth]=\"1\"></doku-spinner>\n </div>\n</div>\n<input\n #inputFileDefault\n type=\"file\"\n class=\"d-input-file-default\"\n (change)=\"onFileSelected($event)\"\n [disabled]=\"disabled\"\n [accept]=\"accept\"\n/>\n\n<ng-template #iconPlus>\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M8.92849 6.57147V7.07147H9.42849H13.7142C13.964 7.07147 14.1666 7.2741 14.1666 7.52385V8.47623C14.1666 8.72598 13.964 8.92861 13.7142 8.92861H9.42849H8.92849V9.42861V13.7143C8.92849 13.9641 8.72586 14.1667 8.47611 14.1667H7.52373C7.27398 14.1667 7.07135 13.9641 7.07135 13.7143V9.42861V8.92861H6.57135H2.28563C2.03588 8.92861 1.83325 8.72598 1.83325 8.47623V7.52385C1.83325 7.2741 2.03588 7.07147 2.28563 7.07147H6.57135H7.07135V6.57147V2.28576C7.07135 2.036 7.27398 1.83337 7.52373 1.83337H8.47611C8.72586 1.83337 8.92849 2.036 8.92849 2.28576V6.57147Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n />\n </svg>\n</ng-template>\n\n<ng-template #iconDocs>\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M8.83333 4.87498V1.33331H3.625C3.27865 1.33331 3 1.61196 3 1.95831V14.0416C3 14.388 3.27865 14.6666 3.625 14.6666H12.375C12.7214 14.6666 13 14.388 13 14.0416V5.49998H9.45833C9.11458 5.49998 8.83333 5.21873 8.83333 4.87498ZM13 4.50779V4.66665H9.66667V1.33331H9.82552C9.99219 1.33331 10.151 1.39842 10.2682 1.5156L12.8177 4.06769C12.9349 4.18488 13 4.34373 13 4.50779Z\"\n fill=\"currentColor\"\n />\n </svg>\n</ng-template>\n" }]
}], ctorParameters: function () {
return [{ type: i0.ChangeDetectorRef }, { type: i1$1.NgControl, decorators: [{
type: Optional
}, {
type: Self
}] }];
}, propDecorators: { title: [{
type: Input
}], subtitle: [{
type: Input
}], loadingText: [{
type: Input
}], accept: [{
type: Input
}], disabled: [{
type: Input
}], loading: [{
type: Input
}] } });
class DokuInputFileUploadModule {
}
DokuInputFileUploadModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuInputFileUploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
DokuInputFileUploadModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: DokuInputFileUploadModule, imports: [DokuInputFileUpload], exports: [DokuInputFileUpload] });
DokuInputFileUploadModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuInputFileUploadModule, imports: [DokuInputFileUpload] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuInputFileUploadModule, decorators: [{
type: NgModule,
args: [{
imports: [DokuInputFileUpload],
exports: [DokuInputFileUpload],
}]
}] });
class DokuLayoutContent {
constructor() {
/**
* @default false
*/
this.fullHeight = false;
}
}
DokuLayoutContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuLayoutContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
DokuLayoutContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuLayoutContent, isStandalone: true, selector: "doku-layout-content", inputs: { fullHeight: "fullHeight" }, exportAs: ["dokuLayoutContainer"], ngImport: i0, template: "<div class=\"d-layout-content\" [class.d-full-height]=\"fullHeight\">\n <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuLayoutContent, decorators: [{
type: Component,
args: [{ selector: 'doku-layout-content', exportAs: 'dokuLayoutContainer', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"d-layout-content\" [class.d-full-height]=\"fullHeight\">\n <ng-content></ng-content>\n</div>\n" }]
}], propDecorators: { fullHeight: [{
type: Input
}] } });
class DokuPageDescription {
constructor() {
this.classes = ['d-page-description', 'd-text-body-m'];
}
}
DokuPageDescription.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuPageDescription, deps: [], target: i0.ɵɵFactoryTarget.Component });
DokuPageDescription.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuPageDescription, isStandalone: true, selector: "doku-page-description", host: { properties: { "class": "this.classes" } }, exportAs: ["dokuPageDescription"], ngImport: i0, template: "<ng-content></ng-content>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuPageDescription, decorators: [{
type: Component,
args: [{ selector: 'doku-page-description', exportAs: 'dokuPageDescription', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n" }]
}], propDecorators: { classes: [{
type: HostBinding,
args: ['class']
}] } });
class DokuPageHeader {
}
DokuPageHeader.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuPageHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
DokuPageHeader.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuPageHeader, isStandalone: true, selector: "doku-page-header", exportAs: ["dokuPageHeader"], ngImport: i0, template: "<div class=\"d-page-header\">\n <div class=\"d-page-header-left-section\">\n <ng-content select=\"doku-page-title\"></ng-content>\n <ng-content select=\"doku-page-description\"></ng-content>\n </div>\n <ng-content select=\"[right-section]\"></ng-content>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuPageHeader, decorators: [{
type: Component,
args: [{ selector: 'doku-page-header', exportAs: 'dokuPageHeader', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"d-page-header\">\n <div class=\"d-page-header-left-section\">\n <ng-content select=\"doku-page-title\"></ng-content>\n <ng-content select=\"doku-page-description\"></ng-content>\n </div>\n <ng-content select=\"[right-section]\"></ng-content>\n</div>\n" }]
}] });
class DokuPageTitle {
constructor(elementRef) {
this.elementRef = elementRef;
this.classes = ['d-page-title'];
}
get hasIconLeft() {
return !!this.elementRef.nativeElement.querySelector('[icon-left]');
}
}
DokuPageTitle.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuPageTitle, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
DokuPageTitle.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuPageTitle, isStandalone: true, selector: "doku-page-title", host: { properties: { "class": "this.classes", "class.d-page-title-icon-left": "this.hasIconLeft" } }, exportAs: ["dokuPageTitle"], ngImport: i0, template: "<ng-content select=\"[icon-left]\"></ng-content>\n<h4 doku-typography variant=\"h4\"><ng-content></ng-content></h4>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DokuTypographyModule }, { kind: "component", type: DokuTypography, selector: "[doku-typography]", inputs: ["variant"], exportAs: ["dokuTypography"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuPageTitle, decorators: [{
type: Component,
args: [{ selector: 'doku-page-title', exportAs: 'dokuPageTitle', standalone: true, imports: [CommonModule, DokuTypographyModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"[icon-left]\"></ng-content>\n<h4 doku-typography variant=\"h4\"><ng-content></ng-content></h4>\n" }]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { classes: [{
type: HostBinding,
args: ['class']
}], hasIconLeft: [{
type: HostBinding,
args: ['class.d-page-title-icon-left']
}] } });
class DokuLayoutContentModule {
}
DokuLayoutContentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuLayoutContentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
DokuLayoutContentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: DokuLayoutContentModule, imports: [DokuLayoutContent, DokuPageTitle, DokuPageHeader, DokuPageDescription], exports: [DokuLayoutContent, DokuPageTitle, DokuPageHeader, DokuPageDescription] });
DokuLayoutContentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuLayoutContentModule, imports: [DokuLayoutContent, DokuPageTitle, DokuPageHeader, DokuPageDescription] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuLayoutContentModule, decorators: [{
type: NgModule,
args: [{
imports: [DokuLayoutContent, DokuPageTitle, DokuPageHeader, DokuPageDescription],
exports: [DokuLayoutContent, DokuPageTitle, DokuPageHeader, DokuPageDescription],
}]
}] });
class DokuLayoutModule {
}
DokuLayoutModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
DokuLayoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: DokuLayoutModule, imports: [DokuLayoutContentModule], exports: [DokuLayoutContentModule] });
DokuLayoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuLayoutModule, imports: [DokuLayoutContentModule, DokuLayoutContentModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuLayoutModule, decorators: [{
type: NgModule,
args: [{
imports: [DokuLayoutContentModule],
exports: [DokuLayoutContentModule],
}]
}] });
class DokuModalBody {
get classes() {
return ['d-modal-body'];
}
}
DokuModalBody.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuModalBody, deps: [], target: i0.ɵɵFactoryTarget.Component });
DokuModalBody.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuModalBody, isStandalone: true, selector: "doku-modal-body", host: { properties: { "class": "this.classes" } }, exportAs: ["dokuModalBody"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuModalBody, decorators: [{
type: Component,
args: [{
selector: 'doku-modal-body',
exportAs: 'dokuModalBody',
standalone: true,
imports: [CommonModule],
template: '<ng-content></ng-content>',
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}], propDecorators: { classes: [{
type: HostBinding,
args: ['class']
}] } });
class DokuModalCloseIcon {
get classes() {
return ['d-modal-close-icon'];
}
}
DokuModalCloseIcon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuModalCloseIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
DokuModalCloseIcon.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuModalCloseIcon, isStandalone: true, selector: "doku-modal-close-icon", host: { properties: { "class": "this.classes" } }, ngImport: i0, template: `<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M17.781 6.219C17.8508 6.28867 17.9062 6.37143 17.944 6.46255C17.9818 6.55367 18.0013 6.65135 18.0013 6.75C18.0013 6.84865 17.9818 6.94633 17.944 7.03745C17.9062 7.12857 17.8508 7.21133 17.781 7.281L7.28097 17.781C7.14014 17.9218 6.94913 18.0009 6.74997 18.0009C6.55081 18.0009 6.3598 17.9218 6.21897 17.781C6.07814 17.6402 5.99902 17.4492 5.99902 17.25C5.99902 17.0508 6.07814 16.8598 6.21897 16.719L16.719 6.219C16.7886 6.14915 16.8714 6.09374 16.9625 6.05593C17.0536 6.01812 17.1513 5.99866 17.25 5.99866C17.3486 5.99866 17.4463 6.01812 17.5374 6.05593C17.6285 6.09374 17.7113 6.14915 17.781 6.219Z"
fill="currentColor"
stroke="currentColor"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M6.21888 6.219C6.14903 6.28867 6.09362 6.37143 6.05581 6.46255C6.018 6.55367 5.99854 6.65135 5.99854 6.75C5.99854 6.84865 6.018 6.94633 6.05581 7.03745C6.09362 7.12857 6.14903 7.21133 6.21888 7.281L16.7189 17.781C16.8597 17.9218 17.0507 18.0009 17.2499 18.0009C17.449 18.0009 17.64 17.9218 17.7809 17.781C17.9217 17.6402 18.0008 17.4492 18.0008 17.25C18.0008 17.0508 17.9217 16.8598 17.7809 16.719L7.28088 6.219C7.21121 6.14915 7.12844 6.09374 7.03733 6.05593C6.94621 6.01812 6.84853 5.99866 6.74988 5.99866C6.65122 5.99866 6.55354 6.01812 6.46243 6.05593C6.37131 6.09374 6.28854 6.14915 6.21888 6.219Z"
fill="currentColor"
stroke="currentColor"
/>
</svg>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuModalCloseIcon, decorators: [{
type: Component,
args: [{
selector: 'doku-modal-close-icon',
standalone: true,
imports: [CommonModule],
template: `<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M17.781 6.219C17.8508 6.28867 17.9062 6.37143 17.944 6.46255C17.9818 6.55367 18.0013 6.65135 18.0013 6.75C18.0013 6.84865 17.9818 6.94633 17.944 7.03745C17.9062 7.12857 17.8508 7.21133 17.781 7.281L7.28097 17.781C7.14014 17.9218 6.94913 18.0009 6.74997 18.0009C6.55081 18.0009 6.3598 17.9218 6.21897 17.781C6.07814 17.6402 5.99902 17.4492 5.99902 17.25C5.99902 17.0508 6.07814 16.8598 6.21897 16.719L16.719 6.219C16.7886 6.14915 16.8714 6.09374 16.9625 6.05593C17.0536 6.01812 17.1513 5.99866 17.25 5.99866C17.3486 5.99866 17.4463 6.01812 17.5374 6.05593C17.6285 6.09374 17.7113 6.14915 17.781 6.219Z"
fill="currentColor"
stroke="currentColor"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M6.21888 6.219C6.14903 6.28867 6.09362 6.37143 6.05581 6.46255C6.018 6.55367 5.99854 6.65135 5.99854 6.75C5.99854 6.84865 6.018 6.94633 6.05581 7.03745C6.09362 7.12857 6.14903 7.21133 6.21888 7.281L16.7189 17.781C16.8597 17.9218 17.0507 18.0009 17.2499 18.0009C17.449 18.0009 17.64 17.9218 17.7809 17.781C17.9217 17.6402 18.0008 17.4492 18.0008 17.25C18.0008 17.0508 17.9217 16.8598 17.7809 16.719L7.28088 6.219C7.21121 6.14915 7.12844 6.09374 7.03733 6.05593C6.94621 6.01812 6.84853 5.99866 6.74988 5.99866C6.65122 5.99866 6.55354 6.01812 6.46243 6.05593C6.37131 6.09374 6.28854 6.14915 6.21888 6.219Z"
fill="currentColor"
stroke="currentColor"
/>
</svg>`,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}], propDecorators: { classes: [{
type: HostBinding,
args: ['class']
}] } });
class DokuModalFooterSpacer {
get classes() {
return ['d-modal-footer-spacer'];
}
}
DokuModalFooterSpacer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuModalFooterSpacer, deps: [], target: i0.ɵɵFactoryTarget.Component });
DokuModalFooterSpacer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuModalFooterSpacer, isStandalone: true, selector: "doku-modal-footer-spacer", host: { properties: { "class": "this.classes" } }, exportAs: ["dokuModalFooterSpacer"], ngImport: i0, template: ``, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuModalFooterSpacer, decorators: [{
type: Component,
args: [{
selector: 'doku-modal-footer-spacer',
exportAs: 'dokuModalFooterSpacer',
standalone: true,
imports: [CommonModule],
template: ``,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}], propDecorators: { classes: [{
type: HostBinding,
args: ['class']
}] } });
class DokuModalFooter {
get classes() {
return ['d-modal-footer'];
}
}
DokuModalFooter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuModalFooter, deps: [], target: i0.ɵɵFactoryTarget.Component });
DokuModalFooter.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuModalFooter, isStandalone: true, selector: "doku-modal-footer", host: { properties: { "class": "this.classes" } }, exportAs: ["dokuModalFooter"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuModalFooter, decorators: [{
type: Component,
args: [{
selector: 'doku-modal-footer',
exportAs: 'dokuModalFooter',
standalone: true,
imports: [CommonModule],
template: '<ng-content></ng-content>',
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}], propDecorators: { classes: [{
type: HostBinding,
args: ['class']
}] } });
class DokuIconDanger {
}
DokuIconDanger.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuIconDanger, deps: [], target: i0.ɵɵFactoryTarget.Component });
DokuIconDanger.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuIconDanger, isStandalone: true, selector: "doku-icon-danger", ngImport: i0, template: `<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
>
<path
d="M10.0834 12.5833C10.0834 13.732 9.14883 14.6666 8.00008 14.6666C6.85133 14.6666 5.91675 13.732 5.91675 12.5833C5.91675 11.4345 6.85133 10.4999 8.00008 10.4999C9.14883 10.4999 10.0834 11.4345 10.0834 12.5833ZM6.15789 1.98948L6.51206 9.07281C6.5287 9.40544 6.80323 9.66659 7.13628 9.66659H8.86388C9.19693 9.66659 9.47146 9.40544 9.4881 9.07281L9.84227 1.98948C9.86011 1.63247 9.5755 1.33325 9.21805 1.33325H6.78211C6.42466 1.33325 6.14006 1.63247 6.15789 1.98948Z"
fill="currentColor"
/>
</svg>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuIconDanger, decorators: [{
type: Component,
args: [{
selector: 'doku-icon-danger',
standalone: true,
imports: [CommonModule],
template: `<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
>
<path
d="M10.0834 12.5833C10.0834 13.732 9.14883 14.6666 8.00008 14.6666C6.85133 14.6666 5.91675 13.732 5.91675 12.5833C5.91675 11.4345 6.85133 10.4999 8.00008 10.4999C9.14883 10.4999 10.0834 11.4345 10.0834 12.5833ZM6.15789 1.98948L6.51206 9.07281C6.5287 9.40544 6.80323 9.66659 7.13628 9.66659H8.86388C9.19693 9.66659 9.47146 9.40544 9.4881 9.07281L9.84227 1.98948C9.86011 1.63247 9.5755 1.33325 9.21805 1.33325H6.78211C6.42466 1.33325 6.14006 1.63247 6.15789 1.98948Z"
fill="currentColor"
/>
</svg>`,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}] });
class DokuIconExclamation {
}
DokuIconExclamation.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuIconExclamation, deps: [], target: i0.ɵɵFactoryTarget.Component });
DokuIconExclamation.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuIconExclamation, isStandalone: true, selector: "doku-icon-exclamation", ngImport: i0, template: `<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
>
<path
d="M14.5165 12.2595C14.9438 13.0001 14.4075 13.9258 13.5541 13.9258H2.44562C1.5906 13.9258 1.05675 12.9986 1.48319 12.2595L7.03749 2.62918C7.46497 1.88823 8.53564 1.88958 8.96235 2.62918L14.5165 12.2595ZM7.99992 10.2684C7.41184 10.2684 6.93511 10.7452 6.93511 11.3332C6.93511 11.9213 7.41184 12.398 7.99992 12.398C8.588 12.398 9.06474 11.9213 9.06474 11.3332C9.06474 10.7452 8.588 10.2684 7.99992 10.2684ZM6.98897 6.44096L7.16069 9.58911C7.16872 9.73643 7.29052 9.85175 7.43805 9.85175H8.5618C8.70932 9.85175 8.83113 9.73643 8.83916 9.58911L9.01087 6.44096C9.01955 6.28184 8.89286 6.14805 8.73351 6.14805H7.26631C7.10696 6.14805 6.98029 6.28184 6.98897 6.44096Z"
fill="currentColor"
/>
</svg>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuIconExclamation, decorators: [{
type: Component,
args: [{
selector: 'doku-icon-exclamation',
standalone: true,
imports: [CommonModule],
template: `<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
>
<path
d="M14.5165 12.2595C14.9438 13.0001 14.4075 13.9258 13.5541 13.9258H2.44562C1.5906 13.9258 1.05675 12.9986 1.48319 12.2595L7.03749 2.62918C7.46497 1.88823 8.53564 1.88958 8.96235 2.62918L14.5165 12.2595ZM7.99992 10.2684C7.41184 10.2684 6.93511 10.7452 6.93511 11.3332C6.93511 11.9213 7.41184 12.398 7.99992 12.398C8.588 12.398 9.06474 11.9213 9.06474 11.3332C9.06474 10.7452 8.588 10.2684 7.99992 10.2684ZM6.98897 6.44096L7.16069 9.58911C7.16872 9.73643 7.29052 9.85175 7.43805 9.85175H8.5618C8.70932 9.85175 8.83113 9.73643 8.83916 9.58911L9.01087 6.44096C9.01955 6.28184 8.89286 6.14805 8.73351 6.14805H7.26631C7.10696 6.14805 6.98029 6.28184 6.98897 6.44096Z"
fill="currentColor"
/>
</svg>`,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}] });
class DokuIconInfo {
}
DokuIconInfo.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuIconInfo, deps: [], target: i0.ɵɵFactoryTarget.Component });
DokuIconInfo.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuIconInfo, isStandalone: true, selector: "doku-icon-info", ngImport: i0, template: `<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
>
<path
d="M6.02083 12.3809H6.54167V8.61896H6.02083C5.73318 8.61896 5.5 8.38578 5.5 8.09812V6.85409C5.5 6.56643 5.73318 6.33325 6.02083 6.33325H8.9375C9.22516 6.33325 9.45833 6.56643 9.45833 6.85409V12.3809H9.97917C10.2668 12.3809 10.5 12.6141 10.5 12.9017V14.1458C10.5 14.4334 10.2668 14.6666 9.97917 14.6666H6.02083C5.73318 14.6666 5.5 14.4334 5.5 14.1458V12.9017C5.5 12.6141 5.73318 12.3809 6.02083 12.3809ZM8 1.33325C6.96445 1.33325 6.125 2.17271 6.125 3.20825C6.125 4.2438 6.96445 5.08325 8 5.08325C9.03555 5.08325 9.875 4.2438 9.875 3.20825C9.875 2.17271 9.03552 1.33325 8 1.33325Z"
fill="currentColor"
/>
</svg>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuIconInfo, decorators: [{
type: Component,
args: [{
selector: 'doku-icon-info',
standalone: true,
imports: [CommonModule],
template: `<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
>
<path
d="M6.02083 12.3809H6.54167V8.61896H6.02083C5.73318 8.61896 5.5 8.38578 5.5 8.09812V6.85409C5.5 6.56643 5.73318 6.33325 6.02083 6.33325H8.9375C9.22516 6.33325 9.45833 6.56643 9.45833 6.85409V12.3809H9.97917C10.2668 12.3809 10.5 12.6141 10.5 12.9017V14.1458C10.5 14.4334 10.2668 14.6666 9.97917 14.6666H6.02083C5.73318 14.6666 5.5 14.4334 5.5 14.1458V12.9017C5.5 12.6141 5.73318 12.3809 6.02083 12.3809ZM8 1.33325C6.96445 1.33325 6.125 2.17271 6.125 3.20825C6.125 4.2438 6.96445 5.08325 8 5.08325C9.03555 5.08325 9.875 4.2438 9.875 3.20825C9.875 2.17271 9.03552 1.33325 8 1.33325Z"
fill="currentColor"
/>
</svg>`,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}] });
class DokuIconSuccess {
}
DokuIconSuccess.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuIconSuccess, deps: [], target: i0.ɵɵFactoryTarget.Component });
DokuIconSuccess.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuIconSuccess, isStandalone: true, selector: "doku-icon-success", ngImport: i0, template: `<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
>
<path
d="M5.86184 12.7761L1.52851 8.44278C1.26817 8.18244 1.26817 7.76033 1.52851 7.49997L2.47129 6.55715C2.73163 6.29679 3.15377 6.29679 3.41411 6.55715L6.33325 9.47627L12.5857 3.22382C12.8461 2.96348 13.2682 2.96348 13.5285 3.22382L14.4713 4.16663C14.7317 4.42697 14.7317 4.84908 14.4713 5.10945L6.80466 12.7761C6.54429 13.0365 6.12218 13.0365 5.86184 12.7761Z"
fill="currentColor"
/>
</svg>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuIconSuccess, decorators: [{
type: Component,
args: [{
selector: 'doku-icon-success',
standalone: true,
imports: [CommonModule],
template: `<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
>
<path
d="M5.86184 12.7761L1.52851 8.44278C1.26817 8.18244 1.26817 7.76033 1.52851 7.49997L2.47129 6.55715C2.73163 6.29679 3.15377 6.29679 3.41411 6.55715L6.33325 9.47627L12.5857 3.22382C12.8461 2.96348 13.2682 2.96348 13.5285 3.22382L14.4713 4.16663C14.7317 4.42697 14.7317 4.84908 14.4713 5.10945L6.80466 12.7761C6.54429 13.0365 6.12218 13.0365 5.86184 12.7761Z"
fill="currentColor"
/>
</svg>`,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}] });
class DokuActiveModal {
/**
* Gets config value of the modal that have been normalized based on provided config and default value.
*/
get config() {
return this._config;
}
/**
* Close the active modal.
*/
// eslint-disable-next-line @typescript-eslint/no-unused-vars
close(result) {
// Business logic will be filled on service
}
}
class DokuModalRef {
constructor(modalService, _componentInstance, view) {
this.modalService = modalService;
this._componentInstance = _componentInstance;
this.view = view;
/**
* The instance of component opened into the modal.
*/
this.componentInstance = this._componentInstance;
this.afterClosed$ = new ReplaySubject();
}
/**
* Close the current active modal.
* @param result Optional result returned to modal opener.
*/
close(result) {
this.modalService['close'](this);
this.afterClosed$.next(result);
this.afterClosed$.complete();
}
/**
* Gets an observable that is notified when the modal is finished closing.
*
* The observable will automatically completed when modal is closed.
* In other words, you don't need to unsubscribe.
*/
afterClosed() {
return this.afterClosed$.asObservable();
}
}
class DokuModalHeader {
constructor(activeModal) {
this.activeModal = activeModal;
}
get classes() {
return ['d-modal-header'];
}
get isConfirmationVariant() {
return this.activeModal.config.variant === 'confirmation';
}
get shouldShowConfirmationIcon() {
var _a;
return !!((_a = this.activeModal.config.confirmationOptions) === null || _a === void 0 ? void 0 : _a.showIcon);
}
get confirmationIconType() {
var _a;
return (_a = this.activeModal.config.confirmationOptions) === null || _a === void 0 ? void 0 : _a.iconType;
}
}
DokuModalHeader.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuModalHeader, deps: [{ token: DokuActiveModal }], target: i0.ɵɵFactoryTarget.Component });
DokuModalHeader.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuModalHeader, isStandalone: true, selector: "doku-modal-header", host: { properties: { "class": "this.classes" } }, exportAs: ["dokuModalHeader"], ngImport: i0, template: "<div class=\"d-modal-header-content\">\n <div\n *ngIf=\"isConfirmationVariant && shouldShowConfirmationIcon\"\n class=\"d-modal-confirmation-icon-container\"\n [ngClass]=\"confirmationIconType\"\n >\n <div class=\"d-modal-confirmation-icon-circle\">\n <doku-icon-exclamation *ngIf=\"confirmationIconType === 'warning'\"></doku-icon-exclamation>\n <doku-icon-info *ngIf=\"confirmationIconType === 'info'\"></doku-icon-info>\n <doku-icon-danger *ngIf=\"confirmationIconType === 'danger'\"></doku-icon-danger>\n <doku-icon-success *ngIf=\"confirmationIconType === 'success'\"></doku-icon-success>\n </div>\n </div>\n <ng-content></ng-content>\n</div>\n<ng-content select=\"doku-modal-close-icon\"></ng-content>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DokuIconExclamation, selector: "doku-icon-exclamation" }, { kind: "component", type: DokuIconInfo, selector: "doku-icon-info" }, { kind: "component", type: DokuIconDanger, selector: "doku-icon-danger" }, { kind: "component", type: DokuIconSuccess, selector: "doku-icon-success" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuModalHeader, decorators: [{
type: Component,
args: [{ selector: 'doku-modal-header', exportAs: 'dokuModalHeader', standalone: true, imports: [CommonModule, DokuIconExclamation, DokuIconInfo, DokuIconDanger, DokuIconSuccess], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"d-modal-header-content\">\n <div\n *ngIf=\"isConfirmationVariant && shouldShowConfirmationIcon\"\n class=\"d-modal-confirmation-icon-container\"\n [ngClass]=\"confirmationIconType\"\n >\n <div class=\"d-modal-confirmation-icon-circle\">\n <doku-icon-exclamation *ngIf=\"confirmationIconType === 'warning'\"></doku-icon-exclamation>\n <doku-icon-info *ngIf=\"confirmationIconType === 'info'\"></doku-icon-info>\n <doku-icon-danger *ngIf=\"confirmationIconType === 'danger'\"></doku-icon-danger>\n <doku-icon-success *ngIf=\"confirmationIconType === 'success'\"></doku-icon-success>\n </div>\n </div>\n <ng-content></ng-content>\n</div>\n<ng-content select=\"doku-modal-close-icon\"></ng-content>\n" }]
}], ctorParameters: function () { return [{ type: DokuActiveModal }]; }, propDecorators: { classes: [{
type: HostBinding,
args: ['class']
}] } });
class DokuModalModule {
}
DokuModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
DokuModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: DokuModalModule, imports: [DokuModalHeader,
DokuModalBody,
DokuModalFooter,
DokuModalCloseIcon,
DokuModalFooterSpacer], exports: [DokuModalHeader,
DokuModalBody,
DokuModalFooter,
DokuModalCloseIcon,
DokuModalFooterSpacer] });
DokuModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuModalModule, imports: [DokuModalHeader,
DokuModalBody,
DokuModalFooter,
DokuModalCloseIcon,
DokuModalFooterSpacer] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuModalModule, decorators: [{
type: NgModule,
args: [{
imports: [
DokuModalHeader,
DokuModalBody,
DokuModalFooter,
DokuModalCloseIcon,
DokuModalFooterSpacer,
],
exports: [
DokuModalHeader,
DokuModalBody,
DokuModalFooter,
DokuModalCloseIcon,
DokuModalFooterSpacer,
],
}]
}] });
class DokuPagination {
constructor(cdr) {
this.cdr = cdr;
/**
* Total data items.
* @default 0
*/
this.totalData = 0;
/**
* Active page of the pagination.
*
* The value will be normalized to first or last page if out of total pages range.
*
* @default 0
*/
this.activePage = 0;
/**
* Total items displayed per page.
* @default 5
*/
this.itemsPerPage = 5;
/**
* Listen for page change.
*/
this.pageChange = new EventEmitter();
/**
* Use internally to inform other component for changes.
* @internal
*/
this.triggerChange = new EventEmitter();
this.pages = [];
this.firstPage = 0;
this.lastPage = 0;
this.totalPages = 0;
this.totalPagesToShow = 7;
}
ngOnChanges(changes) {
var _a, _b, _c, _d, _e, _f;
const totalDataChange = ((_a = changes['totalData']) === null || _a === void 0 ? void 0 : _a.previousValue) !== ((_b = changes['totalData']) === null || _b === void 0 ? void 0 : _b.currentValue);
const activePageChange = ((_c = changes['activePage']) === null || _c === void 0 ? void 0 : _c.previousValue) !== ((_d = changes['activePage']) === null || _d === void 0 ? void 0 : _d.currentValue);
const itemsPerPageChange = ((_e = changes['itemsPerPage']) === null || _e === void 0 ? void 0 : _e.previousValue) !== ((_f = changes['itemsPerPage']) === null || _f === void 0 ? void 0 : _f.currentValue);
if (totalDataChange || activePageChange || itemsPerPageChange) {
this.calculateAll();
}
}
/**
* Navigate to the specific page.
*
* If page value is out of total pages range, the action will be ignored.
*/
navigateToPage(page) {
if (page < this.firstPage || page > this.lastPage || this.activePage === page)
return;
this.activePage = page;
this.calculateAll();
this.emitPageChange();
}
/**
* Go to previous page.
*
* The action will be ignored if already on the first page.
*/
goToPreviousPage() {
if (this.activePage <= this.firstPage)
return;
this.activePage -= 1;
this.calculateAll();
this.emitPageChange();
}
/**
* Go to next page.
*
* The action will be ignored if already on the last page.
*/
goToNextPage() {
if (this.activePage >= this.lastPage)
return;
this.activePage += 1;
this.calculateAll();
this.emitPageChange();
}
/**
* @internal
*/
changeItemsPerPage(value) {
this.itemsPerPage = value;
this.cdr.markForCheck();
this.calculateAll();
this.emitPageChange();
}
calculateAll() {
this.calculateValues();
this.calculatePages();
this.triggerChange.emit();
}
calculateValues() {
this.totalPages = Math.ceil(this.totalData / this.itemsPerPage);
this.firstPage = this.totalPages >= 1 ? 1 : 0;
this.lastPage = this.totalPages >= 1 ? this.totalPages : 0;
if (this.totalPages && this.activePage < 1)
this.activePage = 1;
if (this.totalPages && this.activePage > this.totalPages)
this.activePage = this.totalPages;
}
calculatePages() {
const totalPagesToShowInMiddle = this.totalPagesToShow - 4;
const offsetPagesToShow = totalPagesToShowInMiddle + 1;
const totalPagesToShowOnSide = offsetPagesToShow + 1;
// Handle pages if `totalPages` is less than or equal to `totalPagesToShow`, then no need ellipsis.
if (this.totalPages <= this.totalPagesToShow) {
this.pages = Array.from(Array(this.totalPages)).map((_, idx) => idx + 1);
return;
}
// Handle pages with ellipsis before the last page.
if (this.activePage <= offsetPagesToShow) {
const numbers = Array.from(Array(totalPagesToShowOnSide)).map((_, idx) => idx + 1);
this.pages = [...numbers, '...', this.lastPage];
return;
}
// Handle pages with ellipsis after the first page.
if (this.totalPages - this.activePage < offsetPagesToShow) {
const numbers = Array.from(Array(totalPagesToShowOnSide))
.map((_, idx) => this.totalPages - idx)
.reverse();
this.pages = [this.firstPage, '...', ...numbers];
return;
}
// Handle pages with ellipsis after the first page and before the last page.
const startNumber = this.activePage - (totalPagesToShowInMiddle - 2);
// const endNumber = this.activePage + (totalPagesToShowInMiddle - 2);
const numbers = Array.from(Array(totalPagesToShowInMiddle)).map((_, idx) => startNumber + idx);
this.pages = [this.firstPage, '...', ...numbers, '...', this.lastPage];
}
emitPageChange() {
this.pageChange.emit({
activePage: this.activePage,
itemsPerPage: this.itemsPerPage,
});
}
}
DokuPagination.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuPagination, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
DokuPagination.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuPagination, isStandalone: true, selector: "doku-pagination", inputs: { totalData: "totalData", activePage: "activePage", itemsPerPage: "itemsPerPage" }, outputs: { pageChange: "pageChange" }, exportAs: ["dokuPagination"], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"totalData\" class=\"d-pagination\">\n <div\n class=\"d-pagination-prev\"\n [class.disabled]=\"activePage <= firstPage\"\n (click)=\"goToPreviousPage()\"\n >\n <ng-template *ngTemplateOutlet=\"iconPrevious\"></ng-template>\n </div>\n\n <div *ngFor=\"let page of pages\">\n <div *ngIf=\"page === '...'; else pageNumber\" class=\"d-pagination-page-ellipsis\">...</div>\n <ng-template #pageNumber>\n <div\n class=\"d-pagination-page-number\"\n [class.active]=\"page === activePage\"\n (click)=\"navigateToPage($any(page))\"\n >\n {{ page }}\n </div>\n </ng-template>\n </div>\n\n <div class=\"d-pagination-next\" [class.disabled]=\"activePage >= lastPage\" (click)=\"goToNextPage()\">\n <ng-template *ngTemplateOutlet=\"iconNext\"></ng-template>\n </div>\n</div>\n\n<ng-template #iconPrevious>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"42\" height=\"46\" viewBox=\"0 0 42 46\" fill=\"none\">\n <path\n d=\"M23.5252 27.6092L18.8851 22.2096L23.5252 16.81C23.9916 16.2673 23.9916 15.3905 23.5252 14.8478C23.3018 14.5872 22.9984 14.4408 22.6821 14.4408C22.3658 14.4408 22.0624 14.5872 21.839 14.8478L16.3498 21.2354C15.8834 21.7782 15.8834 22.6549 16.3498 23.1977L21.839 29.5853C22.3054 30.128 23.0588 30.128 23.5252 29.5853C23.9796 29.0426 23.9916 28.1519 23.5252 27.6092Z\"\n fill=\"currentColor\"\n />\n </svg>\n</ng-template>\n\n<ng-template #iconNext>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"42\" height=\"46\" viewBox=\"0 0 42 46\" fill=\"none\">\n <path\n d=\"M18.4748 27.6092L23.1149 22.2096L18.4748 16.81C18.0084 16.2673 18.0084 15.3905 18.4748 14.8478C18.6982 14.5872 19.0016 14.4408 19.3179 14.4408C19.6342 14.4408 19.9376 14.5872 20.161 14.8478L25.6502 21.2354C26.1166 21.7782 26.1166 22.6549 25.6502 23.1977L20.161 29.5853C19.6946 30.128 18.9412 30.128 18.4748 29.5853C18.0204 29.0426 18.0084 28.1519 18.4748 27.6092Z\"\n fill=\"currentColor\"\n />\n </svg>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuPagination, decorators: [{
type: Component,
args: [{ selector: 'doku-pagination', exportAs: 'dokuPagination', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"totalData\" class=\"d-pagination\">\n <div\n class=\"d-pagination-prev\"\n [class.disabled]=\"activePage <= firstPage\"\n (click)=\"goToPreviousPage()\"\n >\n <ng-template *ngTemplateOutlet=\"iconPrevious\"></ng-template>\n </div>\n\n <div *ngFor=\"let page of pages\">\n <div *ngIf=\"page === '...'; else pageNumber\" class=\"d-pagination-page-ellipsis\">...</div>\n <ng-template #pageNumber>\n <div\n class=\"d-pagination-page-number\"\n [class.active]=\"page === activePage\"\n (click)=\"navigateToPage($any(page))\"\n >\n {{ page }}\n </div>\n </ng-template>\n </div>\n\n <div class=\"d-pagination-next\" [class.disabled]=\"activePage >= lastPage\" (click)=\"goToNextPage()\">\n <ng-template *ngTemplateOutlet=\"iconNext\"></ng-template>\n </div>\n</div>\n\n<ng-template #iconPrevious>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"42\" height=\"46\" viewBox=\"0 0 42 46\" fill=\"none\">\n <path\n d=\"M23.5252 27.6092L18.8851 22.2096L23.5252 16.81C23.9916 16.2673 23.9916 15.3905 23.5252 14.8478C23.3018 14.5872 22.9984 14.4408 22.6821 14.4408C22.3658 14.4408 22.0624 14.5872 21.839 14.8478L16.3498 21.2354C15.8834 21.7782 15.8834 22.6549 16.3498 23.1977L21.839 29.5853C22.3054 30.128 23.0588 30.128 23.5252 29.5853C23.9796 29.0426 23.9916 28.1519 23.5252 27.6092Z\"\n fill=\"currentColor\"\n />\n </svg>\n</ng-template>\n\n<ng-template #iconNext>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"42\" height=\"46\" viewBox=\"0 0 42 46\" fill=\"none\">\n <path\n d=\"M18.4748 27.6092L23.1149 22.2096L18.4748 16.81C18.0084 16.2673 18.0084 15.3905 18.4748 14.8478C18.6982 14.5872 19.0016 14.4408 19.3179 14.4408C19.6342 14.4408 19.9376 14.5872 20.161 14.8478L25.6502 21.2354C26.1166 21.7782 26.1166 22.6549 25.6502 23.1977L20.161 29.5853C19.6946 30.128 18.9412 30.128 18.4748 29.5853C18.0204 29.0426 18.0084 28.1519 18.4748 27.6092Z\"\n fill=\"currentColor\"\n />\n </svg>\n</ng-template>\n" }]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { totalData: [{
type: Input
}], activePage: [{
type: Input
}], itemsPerPage: [{
type: Input
}], pageChange: [{
type: Output
}] } });
class DokuPaginationContainer {
constructor() {
/**
* Whether to use padding to wrap components.
* @default true
*/
this.usePadding = true;
}
get classes() {
return ['d-pagination-container'];
}
}
DokuPaginationContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuPaginationContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
DokuPaginationContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuPaginationContainer, isStandalone: true, selector: "doku-pagination-container", inputs: { usePadding: "usePadding" }, host: { properties: { "class.use-padding": "this.usePadding", "class": "this.classes" } }, queries: [{ propertyName: "pagination", first: true, predicate: DokuPagination, descendants: true }], exportAs: ["dokuPaginationContainer"], ngImport: i0, template: "<div class=\"d-pagination-section-left\">\n <ng-content select=\"doku-pagination-per-page\"></ng-content>\n</div>\n<div class=\"d-pagination-section-right\">\n <ng-content select=\"doku-pagination-info\"></ng-content>\n <ng-content select=\"doku-pagination\"></ng-content>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuPaginationContainer, decorators: [{
type: Component,
args: [{ selector: 'doku-pagination-container', exportAs: 'dokuPaginationContainer', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"d-pagination-section-left\">\n <ng-content select=\"doku-pagination-per-page\"></ng-content>\n</div>\n<div class=\"d-pagination-section-right\">\n <ng-content select=\"doku-pagination-info\"></ng-content>\n <ng-content select=\"doku-pagination\"></ng-content>\n</div>\n" }]
}], propDecorators: { usePadding: [{
type: HostBinding,
args: ['class.use-padding']
}, {
type: Input
}], classes: [{
type: HostBinding,
args: ['class']
}], pagination: [{
type: ContentChild,
args: [DokuPagination]
}] } });
class DokuPaginationInfo {
/**
* Return total data of the items.
*/
get totalData() {
return this._totalData;
}
/**
* Return item start number based on active page.
*/
get from() {
return this._from;
}
/**
* Return item end number based on active page.
*/
get to() {
return this._to;
}
constructor(cdr, container) {
this.cdr = cdr;
this.container = container;
this._totalData = 0;
this._from = 0;
this._to = 0;
}
get isCustomInfo() {
var _a, _b;
return !!((_b = (_a = this.customInfo) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.hasChildNodes());
}
get itemsPerPage() {
var _a, _b;
return ((_b = (_a = this.container) === null || _a === void 0 ? void 0 : _a['pagination']) === null || _b === void 0 ? void 0 : _b.itemsPerPage) || 0;
}
get activePage() {
var _a, _b;
return ((_b = (_a = this.container) === null || _a === void 0 ? void 0 : _a['pagination']) === null || _b === void 0 ? void 0 : _b.activePage) || 0;
}
ngAfterViewInit() {
var _a, _b;
this.pageChangeListener = (_b = (_a = this.container) === null || _a === void 0 ? void 0 : _a['pagination']) === null || _b === void 0 ? void 0 : _b['triggerChange'].pipe(startWith(0), delay(0)).subscribe(() => {
this.setValues();
this.cdr.markForCheck();
});
}
ngOnDestroy() {
var _a;
(_a = this.pageChangeListener) === null || _a === void 0 ? void 0 : _a.unsubscribe();
}
setValues() {
var _a, _b;
this._totalData = ((_b = (_a = this.container) === null || _a === void 0 ? void 0 : _a['pagination']) === null || _b === void 0 ? void 0 : _b.totalData) || 0;
this._from = this.activePage * this.itemsPerPage - (this.itemsPerPage - 1);
if (this._totalData <= 0)
this._from = 0;
this._to = this.activePage * this.itemsPerPage;
if (this._to > this._totalData)
this._to = this._totalData;
}
}
DokuPaginationInfo.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuPaginationInfo, deps: [{ token: i0.ChangeDetectorRef }, { token: DokuPaginationContainer }], target: i0.ɵɵFactoryTarget.Component });
DokuPaginationInfo.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuPaginationInfo, isStandalone: true, selector: "doku-pagination-info", viewQueries: [{ propertyName: "customInfo", first: true, predicate: ["customInfo"], descendants: true }], exportAs: ["dokuPaginationInfo"], ngImport: i0, template: "<div doku-typography variant=\"body-m\" class=\"d-pagination-info\">\n <span [class.hidden]=\"isCustomInfo\">\n Showing {{ from }} - {{ to }} from {{ totalData }} entries\n </span>\n <span #customInfo><ng-content></ng-content></span>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DokuTypographyModule }, { kind: "component", type: DokuTypography, selector: "[doku-typography]", inputs: ["variant"], exportAs: ["dokuTypography"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuPaginationInfo, decorators: [{
type: Component,
args: [{ selector: 'doku-pagination-info', exportAs: 'dokuPaginationInfo', standalone: true, imports: [CommonModule, DokuTypographyModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div doku-typography variant=\"body-m\" class=\"d-pagination-info\">\n <span [class.hidden]=\"isCustomInfo\">\n Showing {{ from }} - {{ to }} from {{ totalData }} entries\n </span>\n <span #customInfo><ng-content></ng-content></span>\n</div>\n" }]
}], ctorParameters: function () {
return [{ type: i0.ChangeDetectorRef }, { type: DokuPaginationContainer, decorators: [{
type: Inject,
args: [DokuPaginationContainer]
}] }];
}, propDecorators: { customInfo: [{
type: ViewChild,
args: ['customInfo']
}] } });
class DokuPaginationPerPage {
constructor(cdr, container) {
this.cdr = cdr;
this.container = container;
this.defaultItemsPerPage = 5;
/**
* Items per page options.
* @default [5,10,15,20,25]
*/
this.options = [5, 10, 15, 20, 25];
/**
* Label of the options.
* @default 'items per page'
*/
this.optionLabel = 'items per page';
// The value can be a number or string because it passed to the select component
// where the value will always be converted to string.
this.itemsPerPage = new FormControl(this.defaultItemsPerPage, {
nonNullable: true,
});
this.destroy$ = new ReplaySubject();
}
get normalizedOptions() {
return this.options.map((option) => ({
label: `${option} ${this.optionLabel}`,
value: option,
}));
}
ngOnInit() {
this.itemsPerPage.valueChanges
.pipe(map(this.convertValueToNumber), distinctUntilChanged(), skip(1), takeUntil(this.destroy$))
.subscribe((value) => {
var _a, _b, _c;
(_c = (_b = (_a = this.container) === null || _a === void 0 ? void 0 : _a['pagination']) === null || _b === void 0 ? void 0 : _b['changeItemsPerPage']) === null || _c === void 0 ? void 0 : _c.call(_b, value);
});
}
ngAfterViewInit() {
var _a, _b;
// Set initial items per page from pagination component
(_b = (_a = this.container) === null || _a === void 0 ? void 0 : _a['pagination']) === null || _b === void 0 ? void 0 : _b['triggerChange'].pipe(startWith(this.container['pagination'].itemsPerPage || this.defaultItemsPerPage), takeUntil(this.destroy$)).subscribe(() => {
var _a, _b;
const itemsPerPage = ((_b = (_a = this.container) === null || _a === void 0 ? void 0 : _a['pagination']) === null || _b === void 0 ? void 0 : _b.itemsPerPage) || this.defaultItemsPerPage;
this.itemsPerPage.setValue(itemsPerPage);
});
this.cdr.detectChanges();
}
ngOnDestroy() {
this.destroy$.next(true);
this.destroy$.complete();
}
convertValueToNumber(value) {
try {
return typeof value === 'string' ? parseInt(value) : value;
}
catch (error) {
return this.defaultItemsPerPage;
}
}
}
DokuPaginationPerPage.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuPaginationPerPage, deps: [{ token: i0.ChangeDetectorRef }, { token: DokuPaginationContainer }], target: i0.ɵɵFactoryTarget.Component });
DokuPaginationPerPage.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuPaginationPerPage, isStandalone: true, selector: "doku-pagination-per-page", inputs: { options: "options", optionLabel: "optionLabel" }, exportAs: ["dokuPaginationPerPage"], ngImport: i0, template: "<div class=\"d-pagination-per-page\">\n <doku-form-field>\n <doku-select [items]=\"normalizedOptions\" [formControl]=\"itemsPerPage\"></doku-select>\n </doku-form-field>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DokuFormFieldModule }, { kind: "component", type: DokuFormField, selector: "doku-form-field", inputs: ["showSuccessBehavior", "isErrorState", "isSuccessState"], exportAs: ["dokuFormField"] }, { kind: "ngmodule", type: DokuSelectModule }, { kind: "component", type: DokuSelect, selector: "doku-select", inputs: ["items", "bindLabel", "bindValue", "value", "placeholder", "portalClass", "multiple", "truncateLabel", "arrowPlacement", "disabled", "readonly", "searchable", "isAsync", "searchMatcherFn", "clearable"], outputs: ["valueChange", "search"], exportAs: ["dokuSelect"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuPaginationPerPage, decorators: [{
type: Component,
args: [{ selector: 'doku-pagination-per-page', exportAs: 'dokuPaginationPerPage', standalone: true, imports: [CommonModule, DokuFormFieldModule, DokuSelectModule, ReactiveFormsModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"d-pagination-per-page\">\n <doku-form-field>\n <doku-select [items]=\"normalizedOptions\" [formControl]=\"itemsPerPage\"></doku-select>\n </doku-form-field>\n</div>\n" }]
}], ctorParameters: function () {
return [{ type: i0.ChangeDetectorRef }, { type: DokuPaginationContainer, decorators: [{
type: Inject,
args: [DokuPaginationContainer]
}] }];
}, propDecorators: { options: [{
type: Input
}], optionLabel: [{
type: Input
}] } });
class DokuPaginationModule {
}
DokuPaginationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuPaginationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
DokuPaginationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: DokuPaginationModule, imports: [DokuPagination, DokuPaginationContainer, DokuPaginationInfo, DokuPaginationPerPage], exports: [DokuPagination, DokuPaginationContainer, DokuPaginationInfo, DokuPaginationPerPage] });
DokuPaginationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuPaginationModule, imports: [DokuPagination, DokuPaginationContainer, DokuPaginationInfo, DokuPaginationPerPage] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuPaginationModule, decorators: [{
type: NgModule,
args: [{
imports: [DokuPagination, DokuPaginationContainer, DokuPaginationInfo, DokuPaginationPerPage],
exports: [DokuPagination, DokuPaginationContainer, DokuPaginationInfo, DokuPaginationPerPage],
}]
}] });
const DOKU_PILL_GROUP = new InjectionToken('DokuPillGroup');
const DOKU_PILL_GROUP_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => DokuPillGroup),
multi: true,
};
class DokuPillGroup {
constructor() {
this._modelValue = new Set();
/**
* Whether applying the default styles of the pill group.
*/
this.isAttached = true;
this._multiple = false;
}
get class() {
return {
'd-pill-group-attached': this.isAttached,
};
}
/**
* Whether multiple button toggles can be selected.
*
* @param value boolean | truthy and falsy string
*/
set multiple(value) {
this._multiple = !!(value !== false);
}
get multiple() {
return this._multiple;
}
/**
* Value of toggle group.
* Returns array in multiple-selection mode or single value in single-selection mode.
*/
get value() {
const valArray = Array.from(this._modelValue);
if (this.multiple)
return valArray;
return valArray.length ? valArray[0] : '';
}
set value(newValue) {
const valueArr = typeof newValue === 'string' ? [newValue] : newValue;
this._modelValue = new Set(valueArr);
}
/**
*
* @param itemValue
* @returns
*/
isChecked(itemValue) {
return this._modelValue.has(itemValue);
}
/**
* Syncs a pill button checked state with the model value.
*/
syncValue(itemValue) {
var _a;
if (!this.multiple) {
this._modelValue.clear();
}
if (this.isChecked(itemValue)) {
this._modelValue.delete(itemValue);
}
else {
this._modelValue.add(itemValue);
}
(_a = this._onChange) === null || _a === void 0 ? void 0 : _a.call(this, this.value);
}
writeValue(value) {
this.value = value;
}
registerOnChange(fn) {
this._onChange = fn;
}
registerOnTouched(fn) {
this._onTouched = fn;
}
}
DokuPillGroup.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuPillGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
DokuPillGroup.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuPillGroup, isStandalone: true, selector: "doku-pill-group", inputs: { isAttached: "isAttached", multiple: "multiple", value: "value" }, host: { properties: { "class": "this.class" } }, providers: [
DOKU_PILL_GROUP_VALUE_ACCESSOR,
{ provide: DOKU_PILL_GROUP, useExisting: DokuPillGroup },
], exportAs: ["dokuPillGroup"], ngImport: i0, template: "<ng-content></ng-content>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuPillGroup, decorators: [{
type: Component,
args: [{ selector: 'doku-pill-group', exportAs: 'dokuPillGroup', standalone: true, imports: [CommonModule, DokuButton], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
DOKU_PILL_GROUP_VALUE_ACCESSOR,
{ provide: DOKU_PILL_GROUP, useExisting: DokuPillGroup },
], template: "<ng-content></ng-content>\n" }]
}], propDecorators: { class: [{
type: HostBinding,
args: ['class']
}], isAttached: [{
type: Input
}], multiple: [{
type: Input
}], value: [{
type: Input
}] } });
class DokuPillButton {
/**
* Whether the button is disabled.
*/
set disabled(value) {
this._disabled = !!(value !== false);
}
get disabled() {
return this._disabled;
}
/**
* Whether the button is checked.
*/
get checked() {
return this.pillGroup && this.value ? this.pillGroup.isChecked(this.value) : this._checked;
}
set checked(val) {
this._checked = val;
}
get class() {
return ['d-btn', 'd-pill-btn', `d-pill-btn-${this.size}`];
}
constructor(pillGroup) {
this.pillGroup = pillGroup;
this._disabled = false;
/**
* Button size. Default to `medium`.
*/
this.size = 'medium';
this._checked = false;
}
/**
* Checks the button toggle and sync the value if it is wrapped with `DokuPillGroup`.
*/
_onClick() {
if (this.disabled)
return;
this._checked = !this._checked;
if (this.pillGroup && this.value) {
this.pillGroup.syncValue(this.value);
}
}
}
DokuPillButton.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuPillButton, deps: [{ token: DOKU_PILL_GROUP, optional: true }], target: i0.ɵɵFactoryTarget.Component });
DokuPillButton.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuPillButton, isStandalone: true, selector: "doku-pill-button", inputs: { value: "value", disabled: "disabled", size: "size", checked: "checked" }, host: { listeners: { "click": "_onClick()" }, properties: { "class.d-pill-btn-disabled": "this.disabled", "class.d-pill-btn-active": "this.checked", "class": "this.class" } }, exportAs: ["dokuPillButton"], ngImport: i0, template: "<ng-content select=\"[icon-left]\"></ng-content>\n\n<ng-content></ng-content>\n\n<ng-content select=\"[icon-right]\"></ng-content>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuPillButton, decorators: [{
type: Component,
args: [{ selector: 'doku-pill-button', exportAs: 'dokuPillButton', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"[icon-left]\"></ng-content>\n\n<ng-content></ng-content>\n\n<ng-content select=\"[icon-right]\"></ng-content>\n" }]
}], ctorParameters: function () {
return [{ type: DokuPillGroup, decorators: [{
type: Optional
}, {
type: Inject,
args: [DOKU_PILL_GROUP]
}] }];
}, propDecorators: { value: [{
type: Input
}], disabled: [{
type: HostBinding,
args: ['class.d-pill-btn-disabled']
}, {
type: Input
}], size: [{
type: Input
}], checked: [{
type: HostBinding,
args: ['class.d-pill-btn-active']
}, {
type: Input
}], class: [{
type: HostBinding,
args: ['class']
}], _onClick: [{
type: HostListener,
args: ['click']
}] } });
class DokuPill {
constructor() {
/**
* Size of the pill.
*
* @default 'medium'
*/
this.size = 'medium';
}
get classes() {
return ['d-pill', `d-pill-${this.size}`];
}
}
DokuPill.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuPill, deps: [], target: i0.ɵɵFactoryTarget.Component });
DokuPill.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuPill, isStandalone: true, selector: "doku-pill", inputs: { size: "size" }, host: { properties: { "class": "this.classes" } }, exportAs: ["dokuPill"], ngImport: i0, template: "<ng-content select=\"[icon-left]\"></ng-content>\n\n<ng-content></ng-content>\n\n<ng-content select=\"[icon-right]\"></ng-content>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuPill, decorators: [{
type: Component,
args: [{ selector: 'doku-pill', exportAs: 'dokuPill', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"[icon-left]\"></ng-content>\n\n<ng-content></ng-content>\n\n<ng-content select=\"[icon-right]\"></ng-content>\n" }]
}], propDecorators: { size: [{
type: Input
}], classes: [{
type: HostBinding,
args: ['class']
}] } });
class DokuPillModule {
}
DokuPillModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuPillModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
DokuPillModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: DokuPillModule, imports: [DokuPill, DokuPillButton, DokuPillGroup], exports: [DokuPill, DokuPillButton, DokuPillGroup] });
DokuPillModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuPillModule, imports: [DokuPill, DokuPillButton, DokuPillGroup] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuPillModule, decorators: [{
type: NgModule,
args: [{
imports: [DokuPill, DokuPillButton, DokuPillGroup],
exports: [DokuPill, DokuPillButton, DokuPillGroup],
}]
}] });
class DokuProgressBar {
constructor() {
/**
* Size of the progress bar.
* @default 'medium'
*/
this.size = 'medium';
/**
* Color of the completed bar.
* @default 'primary'
*/
this.color = 'primary';
/**
* Value of the completed bar.
* @default 0
*/
this.value = 0;
/**
* Whether to show label of the progress bar value.
* @default false
*/
this.showValueLabel = false;
}
get classes() {
return ['d-progress-bar', `d-progress-bar-${this.color}`, `d-progress-bar-${this.size}`];
}
}
DokuProgressBar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuProgressBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
DokuProgressBar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuProgressBar, isStandalone: true, selector: "doku-progress-bar", inputs: { size: "size", color: "color", value: "value", showValueLabel: "showValueLabel", height: "height" }, host: { properties: { "style.height.px": "this.height", "style.border-radius.px": "this.height", "class": "this.classes" } }, exportAs: ["dokuProgressBar"], ngImport: i0, template: "<div class=\"d-progress-bar-complete\" [style.width.%]=\"value\">\n <span *ngIf=\"showValueLabel\" class=\"d-progress-bar-value-label\"> {{ value }}% </span>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuProgressBar, decorators: [{
type: Component,
args: [{ selector: 'doku-progress-bar', exportAs: 'dokuProgressBar', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"d-progress-bar-complete\" [style.width.%]=\"value\">\n <span *ngIf=\"showValueLabel\" class=\"d-progress-bar-value-label\"> {{ value }}% </span>\n</div>\n" }]
}], propDecorators: { size: [{
type: Input
}], color: [{
type: Input
}], value: [{
type: Input
}], showValueLabel: [{
type: Input
}], height: [{
type: Input
}, {
type: HostBinding,
args: ['style.height.px']
}, {
type: HostBinding,
args: ['style.border-radius.px']
}], classes: [{
type: HostBinding,
args: ['class']
}] } });
class DokuProgressBarModule {
}
DokuProgressBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuProgressBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
DokuProgressBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: DokuProgressBarModule, imports: [DokuProgressBar], exports: [DokuProgressBar] });
DokuProgressBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuProgressBarModule, imports: [DokuProgressBar] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuProgressBarModule, decorators: [{
type: NgModule,
args: [{
imports: [DokuProgressBar],
exports: [DokuProgressBar],
}]
}] });
class DokuRadioCustomAppearance {
constructor(templateRef) {
this.templateRef = templateRef;
}
}
DokuRadioCustomAppearance.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuRadioCustomAppearance, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
DokuRadioCustomAppearance.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: DokuRadioCustomAppearance, isStandalone: true, selector: "ng-template[doku-radio-custom-appearance]", exportAs: ["dokuRadioCustomAppearance"], ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuRadioCustomAppearance, decorators: [{
type: Directive,
args: [{
selector: 'ng-template[doku-radio-custom-appearance]',
exportAs: 'dokuRadioCustomAppearance',
standalone: true,
}]
}], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
class DokuRadioCustomAppearanceContext {
constructor() {
this.checked = false;
this.disabled = false;
this.value = '';
}
}
const DOKU_RADIO = new InjectionToken('DOKU_RADIO');
const DOKU_RADIO_BUILT_IN_APPEARANCE = new InjectionToken('DOKU_RADIO_BUILT_IN_APPEARANCE');
let nextId$4 = 1;
class DokuRadioGroup {
constructor() {
/**
* Name of the radio button group.
* All radio buttons inside this group will use this name.
* @default 'd-radio-group-[nextId]'
*/
this.name = `d-radio-group-${nextId$4++}`;
/**
* Whether the radio group is disabled.
* If `true`, all radio buttons inside this group will be disabled.
* @default false
*/
this.disabled = false;
/**
* Value of the checked radio button.
* @default ''
*/
this.value = '';
/**
* Event emitted when the value changes.
*/
this.valueChange = new EventEmitter();
this._notifyChanges$ = new ReplaySubject();
this.destroy$ = new ReplaySubject();
}
ngOnChanges() {
var _a;
(_a = this.radios) === null || _a === void 0 ? void 0 : _a.notifyOnChanges();
}
ngAfterContentInit() {
var _a;
(_a = this.radios) === null || _a === void 0 ? void 0 : _a.changes.pipe(startWith(this.radios), map((radios) => radios.toArray()), takeUntil(this.destroy$)).subscribe((radios) => {
this.injectRadios(radios);
});
}
ngOnDestroy() {
this.destroy$.next(true);
this.destroy$.complete();
}
writeValue(value) {
var _a;
this.value = value;
(_a = this.radios) === null || _a === void 0 ? void 0 : _a.notifyOnChanges();
}
registerOnChange(fn) {
this.onChange = fn;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
setDisabledState(isDisabled) {
var _a;
this.disabled = isDisabled;
(_a = this.radios) === null || _a === void 0 ? void 0 : _a.notifyOnChanges();
}
injectRadios(radios) {
radios.forEach((radio) => {
if (this.name)
radio.name = this.name;
radio.disabled = this.disabled || radio.disabled;
radio['checkedChangeCallback'] = (value, checked) => {
var _a, _b;
this.value = checked ? value : '';
(_a = this.onChange) === null || _a === void 0 ? void 0 : _a.call(this, this.value);
(_b = this.onTouched) === null || _b === void 0 ? void 0 : _b.call(this);
this.valueChange.emit(this.value);
this._notifyChanges$.next(true);
};
radio.checked = radio.value === this.value;
radio['cdr'].detectChanges();
});
this._notifyChanges$.next(true);
}
}
DokuRadioGroup.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuRadioGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
DokuRadioGroup.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuRadioGroup, isStandalone: true, selector: "doku-radio-group", inputs: { name: "name", disabled: "disabled", value: "value" }, outputs: { valueChange: "valueChange" }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: DokuRadioGroup,
multi: true,
},
], queries: [{ propertyName: "radios", predicate: DOKU_RADIO }], exportAs: ["dokuRadioGroup"], usesOnChanges: true, ngImport: i0, template: `<ng-content select="doku-radio"></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuRadioGroup, decorators: [{
type: Component,
args: [{
selector: 'doku-radio-group',
exportAs: 'dokuRadioGroup',
standalone: true,
imports: [CommonModule],
template: `<ng-content select="doku-radio"></ng-content>`,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: DokuRadioGroup,
multi: true,
},
],
}]
}], propDecorators: { name: [{
type: Input
}], disabled: [{
type: Input
}], value: [{
type: Input
}], valueChange: [{
type: Output
}], radios: [{
type: ContentChildren,
args: [DOKU_RADIO]
}] } });
let nextId$3 = 1;
class DokuRadio {
constructor(cdr, appRef, renderer, radioGroup) {
this.cdr = cdr;
this.appRef = appRef;
this.renderer = renderer;
this.radioGroup = radioGroup;
/**
* Analog to HTML 'name' attribute used to group radios for unique selection.
* @default 'd-radio-name-[nextId]''
*/
this.name = `d-radio-name-${nextId$3++}`;
/**
* The value of this radio button.
* @default ''
*/
this.value = '';
/**
* Whether this radio button is checked.
* @default false
*/
this.checked = false;
/**
* Whether the radio button is disabled.
* @default false
*/
this.disabled = false;
/**
* The size of the radio button indicator.
* @default 'medium'
*/
this.size = 'medium';
this.customAppearanceContext = new DokuRadioCustomAppearanceContext();
this.hasIndicator = false;
this.destroy$ = new ReplaySubject();
}
get classes() {
return ['d-radio', `d-radio-${this.size}`];
}
get hasCustomAppearance() {
return !!this.customAppearance || !!this.builtInAppearance;
}
ngAfterViewInit() {
var _a, _b;
this.cdr.detectChanges();
if (this.hasCustomAppearance) {
this.createAndAppendCustomAppearance();
setTimeout(() => { var _a; return this.appendIndicator({ appendChildTo: (_a = this.container) === null || _a === void 0 ? void 0 : _a.nativeElement, hidden: true }); }, 0);
(_b = (_a = this.label) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.remove();
}
else {
this.appendIndicator();
}
this.watchGroupChanges();
}
ngOnChanges() {
this.updateCustomAppearanceContext();
}
ngOnDestroy() {
this.destroy$.next(true);
this.destroy$.complete();
}
onCheckedChange(ev) {
var _a;
this.checked = ev.target.checked;
this.cdr.detectChanges();
if (this.hasCustomAppearance) {
this.updateCustomAppearanceContext();
}
(_a = this.checkedChangeCallback) === null || _a === void 0 ? void 0 : _a.call(this, this.value, this.checked);
}
appendIndicator(props) {
if (!this.indicator || this.hasIndicator)
return;
const viewRef = this.indicator.createEmbeddedView(null);
this.appRef.attachView(viewRef);
viewRef.rootNodes.forEach((node) => {
var _a, _b;
if (props === null || props === void 0 ? void 0 : props.hidden)
this.renderer.setStyle(node, 'display', 'none');
if (props === null || props === void 0 ? void 0 : props.appendChildTo) {
this.renderer.appendChild(props.appendChildTo, node);
}
else {
this.renderer.insertBefore((_a = this.container) === null || _a === void 0 ? void 0 : _a.nativeElement, node, (_b = this.label) === null || _b === void 0 ? void 0 : _b.nativeElement);
}
});
this.hasIndicator = true;
this.destroy$.subscribe(() => viewRef.destroy());
}
createAndAppendCustomAppearance() {
var _a, _b, _c;
const templateRef = ((_a = this.customAppearance) === null || _a === void 0 ? void 0 : _a.templateRef) || ((_c = (_b = this.builtInAppearance) === null || _b === void 0 ? void 0 : _b.template) === null || _c === void 0 ? void 0 : _c.templateRef);
if (!templateRef)
return;
const viewRef = templateRef.createEmbeddedView(this.customAppearanceContext);
this.appRef.attachView(viewRef);
viewRef.rootNodes.forEach((node) => {
var _a;
this.renderer.appendChild((_a = this.container) === null || _a === void 0 ? void 0 : _a.nativeElement, node);
});
this.destroy$.subscribe(() => viewRef.destroy());
}
updateCustomAppearanceContext() {
this.customAppearanceContext.checked = this.checked;
this.customAppearanceContext.disabled = this.disabled;
this.customAppearanceContext.value = this.value;
}
watchGroupChanges() {
var _a;
(_a = this.radioGroup) === null || _a === void 0 ? void 0 : _a['_notifyChanges$'].pipe(takeUntil(this.destroy$)).subscribe(() => {
var _a, _b;
this.checked = this.value === ((_a = this.radioGroup) === null || _a === void 0 ? void 0 : _a.value);
this.disabled = this.disabled || !!((_b = this.radioGroup) === null || _b === void 0 ? void 0 : _b.disabled);
this.updateCustomAppearanceContext();
});
}
}
DokuRadio.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuRadio, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ApplicationRef }, { token: i0.Renderer2 }, { token: DokuRadioGroup, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component });
DokuRadio.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuRadio, isStandalone: true, selector: "doku-radio", inputs: { name: "name", value: "value", checked: "checked", disabled: "disabled", size: "size" }, host: { properties: { "class": "this.classes" } }, providers: [{ provide: DOKU_RADIO, useExisting: DokuRadio }], queries: [{ propertyName: "customAppearance", first: true, predicate: DokuRadioCustomAppearance, descendants: true }, { propertyName: "builtInAppearance", first: true, predicate: DOKU_RADIO_BUILT_IN_APPEARANCE, descendants: true }], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "indicator", first: true, predicate: ["indicator"], descendants: true }, { propertyName: "label", first: true, predicate: ["label"], descendants: true }], exportAs: ["dokuRadio"], usesOnChanges: true, ngImport: i0, template: "<label #container class=\"d-radio-container\">\n <span #label class=\"d-radio-label\"><ng-content></ng-content></span>\n</label>\n\n<ng-template #indicator>\n <input\n type=\"radio\"\n class=\"d-radio-input\"\n [name]=\"name\"\n [value]=\"value\"\n [disabled]=\"disabled\"\n [checked]=\"checked\"\n (change)=\"onCheckedChange($event)\"\n />\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuRadio, decorators: [{
type: Component,
args: [{ selector: 'doku-radio', exportAs: 'dokuRadio', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: DOKU_RADIO, useExisting: DokuRadio }], template: "<label #container class=\"d-radio-container\">\n <span #label class=\"d-radio-label\"><ng-content></ng-content></span>\n</label>\n\n<ng-template #indicator>\n <input\n type=\"radio\"\n class=\"d-radio-input\"\n [name]=\"name\"\n [value]=\"value\"\n [disabled]=\"disabled\"\n [checked]=\"checked\"\n (change)=\"onCheckedChange($event)\"\n />\n</ng-template>\n" }]
}], ctorParameters: function () {
return [{ type: i0.ChangeDetectorRef }, { type: i0.ApplicationRef }, { type: i0.Renderer2 }, { type: DokuRadioGroup, decorators: [{
type: Optional
}, {
type: Host
}] }];
}, propDecorators: { name: [{
type: Input
}], value: [{
type: Input
}], checked: [{
type: Input
}], disabled: [{
type: Input
}], size: [{
type: Input
}], container: [{
type: ViewChild,
args: ['container']
}], indicator: [{
type: ViewChild,
args: ['indicator']
}], label: [{
type: ViewChild,
args: ['label']
}], customAppearance: [{
type: ContentChild,
args: [DokuRadioCustomAppearance]
}], builtInAppearance: [{
type: ContentChild,
args: [DOKU_RADIO_BUILT_IN_APPEARANCE]
}], classes: [{
type: HostBinding,
args: ['class']
}] } });
class DokuRadioIndicator {
constructor(elementRef, radio) {
this.elementRef = elementRef;
this.radio = radio;
}
ngOnInit() {
this.radio['appendIndicator']({ appendChildTo: this.elementRef.nativeElement });
}
}
DokuRadioIndicator.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuRadioIndicator, deps: [{ token: i0.ElementRef }, { token: DokuRadio }], target: i0.ɵɵFactoryTarget.Component });
DokuRadioIndicator.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuRadioIndicator, isStandalone: true, selector: "doku-radio-indicator", exportAs: ["dokuRadioIndicator"], ngImport: i0, template: '', isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuRadioIndicator, decorators: [{
type: Component,
args: [{
selector: 'doku-radio-indicator',
exportAs: 'dokuRadioIndicator',
standalone: true,
imports: [CommonModule],
template: '',
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}], ctorParameters: function () {
return [{ type: i0.ElementRef }, { type: DokuRadio, decorators: [{
type: Inject,
args: [DokuRadio]
}] }];
} });
class DokuRadioAppearanceCard {
}
DokuRadioAppearanceCard.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuRadioAppearanceCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
DokuRadioAppearanceCard.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuRadioAppearanceCard, isStandalone: true, selector: "doku-radio-appearance-card", providers: [
{
provide: DOKU_RADIO_BUILT_IN_APPEARANCE,
useExisting: DokuRadioAppearanceCard,
},
], viewQueries: [{ propertyName: "template", first: true, predicate: DokuRadioCustomAppearance, descendants: true }], exportAs: ["dokuRadioAppearanceCard"], ngImport: i0, template: "<ng-template doku-radio-custom-appearance let-checked=\"checked\" let-disabled=\"disabled\">\n <div class=\"d-radio-appearance-card\" [class.checked]=\"checked\" [class.disabled]=\"disabled\">\n <doku-radio-indicator></doku-radio-indicator>\n <div class=\"content\">\n <div doku-typography variant=\"body-m\" class=\"title\">\n <ng-content select=\"ng-container[title]\"></ng-content>\n </div>\n <div doku-typography variant=\"body-s\" class=\"desc\">\n <ng-content select=\"ng-container[description]\"></ng-content>\n </div>\n </div>\n </div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: DokuRadioCustomAppearance, selector: "ng-template[doku-radio-custom-appearance]", exportAs: ["dokuRadioCustomAppearance"] }, { kind: "component", type: DokuRadioIndicator, selector: "doku-radio-indicator", exportAs: ["dokuRadioIndicator"] }, { kind: "ngmodule", type: DokuTypographyModule }, { kind: "component", type: DokuTypography, selector: "[doku-typography]", inputs: ["variant"], exportAs: ["dokuTypography"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuRadioAppearanceCard, decorators: [{
type: Component,
args: [{ selector: 'doku-radio-appearance-card', exportAs: 'dokuRadioAppearanceCard', standalone: true, imports: [CommonModule, DokuRadioCustomAppearance, DokuRadioIndicator, DokuTypographyModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
{
provide: DOKU_RADIO_BUILT_IN_APPEARANCE,
useExisting: DokuRadioAppearanceCard,
},
], template: "<ng-template doku-radio-custom-appearance let-checked=\"checked\" let-disabled=\"disabled\">\n <div class=\"d-radio-appearance-card\" [class.checked]=\"checked\" [class.disabled]=\"disabled\">\n <doku-radio-indicator></doku-radio-indicator>\n <div class=\"content\">\n <div doku-typography variant=\"body-m\" class=\"title\">\n <ng-content select=\"ng-container[title]\"></ng-content>\n </div>\n <div doku-typography variant=\"body-s\" class=\"desc\">\n <ng-content select=\"ng-container[description]\"></ng-content>\n </div>\n </div>\n </div>\n</ng-template>\n" }]
}], propDecorators: { template: [{
type: ViewChild,
args: [DokuRadioCustomAppearance]
}] } });
class DokuRadioModule {
}
DokuRadioModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuRadioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
DokuRadioModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: DokuRadioModule, imports: [DokuRadio, DokuRadioCustomAppearance, DokuRadioIndicator, DokuRadioGroup], exports: [DokuRadio, DokuRadioCustomAppearance, DokuRadioIndicator, DokuRadioGroup] });
DokuRadioModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuRadioModule, imports: [DokuRadio, DokuRadioIndicator, DokuRadioGroup] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuRadioModule, decorators: [{
type: NgModule,
args: [{
imports: [DokuRadio, DokuRadioCustomAppearance, DokuRadioIndicator, DokuRadioGroup],
exports: [DokuRadio, DokuRadioCustomAppearance, DokuRadioIndicator, DokuRadioGroup],
}]
}] });
class DokuRadioAppearanceModule {
}
DokuRadioAppearanceModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuRadioAppearanceModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
DokuRadioAppearanceModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: DokuRadioAppearanceModule, imports: [DokuRadioAppearanceCard], exports: [DokuRadioAppearanceCard] });
DokuRadioAppearanceModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuRadioAppearanceModule, imports: [DokuRadioAppearanceCard] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuRadioAppearanceModule, decorators: [{
type: NgModule,
args: [{
imports: [DokuRadioAppearanceCard],
exports: [DokuRadioAppearanceCard],
}]
}] });
class DokuShimmer {
get classes() {
return ['d-shimmer', `d-shimmer-variant-${this.variant}`];
}
constructor(elementRef, ngZone) {
this.elementRef = elementRef;
this.ngZone = ngZone;
/**
* Width of the shimmer.
* @default '100%'
*/
this.width = '100%';
/**
* Height of the shimmer.
*
* If `shape` is not rectangle and `width` is not in pixels,
* the height will be calculated based on the element width.
*
* @default '14px'
*/
this.height = '14px';
/**
* Border radius of the shimmer.
*
* If `shape` is circle, the value will be ignored.
*
* @default '4px'
*/
this.borderRadius = '4px';
/**
* The shape of the shimmer.
*
* Some shapes will affect the height or border radius.
*
* @default 'rectangle'
*/
this.shape = 'rectangle';
/**
* Color variant of the shimmer.
* @default 'light'
*/
this.variant = 'light';
}
ngOnChanges(changes) {
var _a, _b;
if ((_a = changes['width']) === null || _a === void 0 ? void 0 : _a.currentValue) {
(_b = this.resizeListener) === null || _b === void 0 ? void 0 : _b.unsubscribe();
this.listenResize();
}
}
ngOnDestroy() {
var _a;
(_a = this.resizeListener) === null || _a === void 0 ? void 0 : _a.unsubscribe();
}
get normalizedHeight() {
switch (this.shape) {
case 'square':
case 'circle':
return this.calculateHeightByWidth(this.width);
case 'rectangle':
default:
return this.height;
}
}
get normalizedBorderRadius() {
return this.shape === 'circle' ? '50%' : this.borderRadius;
}
/**
* Calculate height value when width is not using pixels.
*/
calculateHeightByWidth(width) {
if (width.endsWith('px'))
return width;
if (this.shape === 'rectangle')
return this.height;
const clientWidth = this.elementRef.nativeElement.clientWidth;
if (!clientWidth)
return width;
return `${clientWidth}px`;
}
listenResize() {
this.ngZone.runOutsideAngular(() => {
if (this.width.endsWith('px'))
return;
if (this.shape === 'rectangle')
return;
this.resizeListener = fromEvent(window, 'resize').subscribe(() => {
this.elementRef.nativeElement.style.height = this.calculateHeightByWidth(this.width);
});
});
}
}
DokuShimmer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuShimmer, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
DokuShimmer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuShimmer, isStandalone: true, selector: "doku-shimmer", inputs: { width: "width", height: "height", borderRadius: "borderRadius", shape: "shape", variant: "variant" }, host: { properties: { "style.width": "this.width", "class": "this.classes", "style.height": "this.normalizedHeight", "style.border-radius": "this.normalizedBorderRadius" } }, exportAs: ["dokuShimmer"], usesOnChanges: true, ngImport: i0, template: '', isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuShimmer, decorators: [{
type: Component,
args: [{
selector: 'doku-shimmer',
exportAs: 'dokuShimmer',
standalone: true,
imports: [CommonModule],
template: '',
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { width: [{
type: HostBinding,
args: ['style.width']
}, {
type: Input
}], height: [{
type: Input
}], borderRadius: [{
type: Input
}], shape: [{
type: Input
}], variant: [{
type: Input
}], classes: [{
type: HostBinding,
args: ['class']
}], normalizedHeight: [{
type: HostBinding,
args: ['style.height']
}], normalizedBorderRadius: [{
type: HostBinding,
args: ['style.border-radius']
}] } });
class DokuShimmerModule {
}
DokuShimmerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuShimmerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
DokuShimmerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: DokuShimmerModule, imports: [DokuShimmer], exports: [DokuShimmer] });
DokuShimmerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuShimmerModule, imports: [DokuShimmer] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuShimmerModule, decorators: [{
type: NgModule,
args: [{
imports: [DokuShimmer],
exports: [DokuShimmer],
}]
}] });
class DokuSorterIcon {
constructor() {
this.colorAsc = 'currentColor';
this.colorDesc = 'currentColor';
}
}
DokuSorterIcon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuSorterIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
DokuSorterIcon.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuSorterIcon, isStandalone: true, selector: "doku-sorter-icon", inputs: { colorAsc: "colorAsc", colorDesc: "colorDesc" }, exportAs: ["dokuSorterIcon"], ngImport: i0, template: `<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path d="M7 13L12 18L17 13H7Z" [attr.fill]="colorDesc" />
<path d="M7 11L12 6L17 11H7Z" [attr.fill]="colorAsc" />
</svg>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuSorterIcon, decorators: [{
type: Component,
args: [{
selector: 'doku-sorter-icon',
exportAs: 'dokuSorterIcon',
standalone: true,
imports: [CommonModule],
template: `<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path d="M7 13L12 18L17 13H7Z" [attr.fill]="colorDesc" />
<path d="M7 11L12 6L17 11H7Z" [attr.fill]="colorAsc" />
</svg>`,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}], propDecorators: { colorAsc: [{
type: Input
}], colorDesc: [{
type: Input
}] } });
class TemplateUtil {
static createNoDataElement(props) {
const _a = this.createBaseElement({
renderer: props.renderer,
totalColumn: props.totalColumn,
}), { bodyElement, contentElement } = _a, rest = __rest(_a, ["bodyElement", "contentElement"]);
bodyElement.className = 'd-table-body-no-data';
return Object.assign({ bodyElement, contentElement }, rest);
}
static updateNoDataContent(props) {
let templateViewRef;
if (!props.content || typeof props.content === 'string') {
const el = props.renderer.createElement('div');
el.className = 'd-text-h5';
el.textContent = props.content || 'No Data';
props.renderer.appendChild(props.noDataElement.contentElement, el);
}
if (props.content instanceof TemplateRef) {
templateViewRef = props.content.createEmbeddedView(null, props.injector);
props.appRef.attachView(templateViewRef);
templateViewRef.rootNodes.forEach((node) => {
props.renderer.appendChild(props.noDataElement.contentElement, node);
});
}
const destroy = () => {
templateViewRef === null || templateViewRef === void 0 ? void 0 : templateViewRef.destroy();
};
return { destroy };
}
static createLoadingElement(props) {
const _a = this.createBaseElement({
renderer: props.renderer,
totalColumn: props.totalColumn,
}), { bodyElement, contentElement } = _a, rest = __rest(_a, ["bodyElement", "contentElement"]);
bodyElement.className = 'd-table-body-loading';
return Object.assign({ bodyElement, contentElement }, rest);
}
static updateLoadingContent(props) {
let spinnerViewRef;
let templateViewRef;
if (!props.content || typeof props.content === 'string') {
const loadingWrapperElement = props.renderer.createElement('div');
loadingWrapperElement.className = 'd-table-body-loading-wrapper';
// Spinner component
const spinnerComponent = createComponent(DokuSpinner, {
environmentInjector: props.envInjector,
});
spinnerComponent.location.nativeElement.style.display = 'flex';
spinnerComponent.location.nativeElement.style.marginRight = '16px';
spinnerComponent.setInput('diameter', 32);
spinnerComponent.setInput('strokeWidth', 3);
props.appRef.attachView(spinnerComponent.hostView);
spinnerViewRef = spinnerComponent.hostView;
// Loading text element
const loadingTextElement = props.renderer.createElement('span');
loadingTextElement.className = 'd-text-body-m';
loadingTextElement.textContent = props.content || 'Please wait, we are loading your data...';
// Append spinner and loading text to wrapper element
props.renderer.appendChild(loadingWrapperElement, spinnerComponent.location.nativeElement);
props.renderer.appendChild(loadingWrapperElement, loadingTextElement);
// Append to content element
props.renderer.appendChild(props.loadingElement.contentElement, loadingWrapperElement);
}
if (props.content instanceof TemplateRef) {
templateViewRef = props.content.createEmbeddedView(null, props.injector);
props.appRef.attachView(templateViewRef);
templateViewRef.rootNodes.forEach((node) => {
props.renderer.appendChild(props.loadingElement.contentElement, node);
});
}
const destroy = () => {
spinnerViewRef === null || spinnerViewRef === void 0 ? void 0 : spinnerViewRef.destroy();
templateViewRef === null || templateViewRef === void 0 ? void 0 : templateViewRef.destroy();
};
return { destroy };
}
static createErrorElement(props) {
const _a = this.createBaseElement({
renderer: props.renderer,
totalColumn: props.totalColumn,
}), { bodyElement, contentElement } = _a, rest = __rest(_a, ["bodyElement", "contentElement"]);
bodyElement.className = 'd-table-body-error';
return Object.assign({ bodyElement, contentElement }, rest);
}
static updateErrorContent(props) {
let templateViewRef;
if (!props.content || typeof props.content === 'string') {
const el = props.renderer.createElement('div');
el.className = 'd-text-h5';
el.textContent = props.content || 'Something went wrong!';
props.renderer.appendChild(props.errorElement.contentElement, el);
}
if (props.content instanceof TemplateRef) {
templateViewRef = props.content.createEmbeddedView(null, props.injector);
props.appRef.attachView(templateViewRef);
templateViewRef.rootNodes.forEach((node) => {
props.renderer.appendChild(props.errorElement.contentElement, node);
});
}
const destroy = () => {
templateViewRef === null || templateViewRef === void 0 ? void 0 : templateViewRef.destroy();
};
return { destroy };
}
static createBaseElement(props) {
const contentElement = props.renderer.createElement('div');
contentElement.className = 'd-table-body-custom-content';
const cellElement = props.renderer.createElement('td');
cellElement.colSpan = props.totalColumn;
cellElement.appendChild(contentElement);
const rowElement = props.renderer.createElement('tr');
rowElement.appendChild(cellElement);
const bodyElement = props.renderer.createElement('tbody');
bodyElement.appendChild(rowElement);
return { bodyElement, rowElement, cellElement, contentElement };
}
}
class DokuTable {
constructor(elementRef, renderer, ngZone, envInjector, appRef, injector) {
this.elementRef = elementRef;
this.renderer = renderer;
this.ngZone = ngZone;
this.envInjector = envInjector;
this.appRef = appRef;
this.injector = injector;
/**
* Listen for column sort changes.
*/
this.sortChange = new EventEmitter();
this._sortChange = new EventEmitter();
this.sortChange$ = this._sortChange.asObservable().pipe(shareReplay());
this.destroy$ = new ReplaySubject();
}
get classes() {
return ['d-table'];
}
get totalColumn() {
return this.elementRef.nativeElement.querySelectorAll('thead tr th').length;
}
ngOnInit() {
this._sortChange
.asObservable()
.pipe(distinctUntilChanged((previous, current) => previous.activeSorter === current.activeSorter), takeUntil(this.destroy$))
.subscribe((props) => {
var _a, _b;
const emitEvent = (_b = (_a = props === null || props === void 0 ? void 0 : props.options) === null || _a === void 0 ? void 0 : _a.emitEvent) !== null && _b !== void 0 ? _b : true;
if (emitEvent)
this.sortChange.emit(props === null || props === void 0 ? void 0 : props.activeSorter);
});
}
ngOnDestroy() {
var _a, _b, _c;
this.containerElement = undefined;
this.filledElement = undefined;
this.noDataElement = undefined;
(_a = this.noDataContentRef) === null || _a === void 0 ? void 0 : _a.destroy();
this.loadingElement = undefined;
(_b = this.loadingContentRef) === null || _b === void 0 ? void 0 : _b.destroy();
this.errorElement = undefined;
(_c = this.errorContentRef) === null || _c === void 0 ? void 0 : _c.destroy();
this.destroy$.next(true);
this.destroy$.complete();
}
ngOnChanges(changes) {
const activeSorter = changes['activeSorter'];
if ((activeSorter === null || activeSorter === void 0 ? void 0 : activeSorter.previousValue) !== (activeSorter === null || activeSorter === void 0 ? void 0 : activeSorter.currentValue)) {
setTimeout(() => this._sortChange.emit({ activeSorter: activeSorter === null || activeSorter === void 0 ? void 0 : activeSorter.currentValue }), 0);
}
const status = changes['status'];
if ((status === null || status === void 0 ? void 0 : status.previousValue) !== (status === null || status === void 0 ? void 0 : status.currentValue)) {
this.handleBodyVisibilityByStatus();
}
const customNoData = changes['customNoData'];
if ((customNoData === null || customNoData === void 0 ? void 0 : customNoData.previousValue) !== (customNoData === null || customNoData === void 0 ? void 0 : customNoData.currentValue)) {
this.handleCustomNoData();
}
const customLoading = changes['customLoading'];
if ((customLoading === null || customLoading === void 0 ? void 0 : customLoading.previousValue) !== (customLoading === null || customLoading === void 0 ? void 0 : customLoading.currentValue)) {
this.handleCustomLoading();
}
const customError = changes['customError'];
if ((customError === null || customError === void 0 ? void 0 : customError.previousValue) !== (customError === null || customError === void 0 ? void 0 : customError.currentValue)) {
this.handleCustomError();
}
}
ngAfterViewInit() {
this.containerElement = this.createContainer();
const parentNode = this.elementRef.nativeElement.parentNode;
// Insert container element before the table element.
this.renderer.insertBefore(parentNode, this.containerElement, this.elementRef.nativeElement);
// Remove the table element.
this.renderer.removeChild(parentNode, this.elementRef.nativeElement);
// Append the table element inside the container element.
this.renderer.appendChild(this.containerElement, this.elementRef.nativeElement);
// Assign filled tbody to variable
this.filledElement = this.elementRef.nativeElement.querySelector('tbody');
// Append others tbody (no data, loading)
this.initNoDataElement();
this.initLoadingElement();
this.initErrorElement();
// Handle table body visibility
this.handleBodyVisibilityByStatus();
// Handle resize when window resized
this.onResize();
}
/**
* Change active sorter programmatically.
* @param activeSorter Value of the active sorter. Provide `undefined` to clear sorter.
* @param options.emitEvent Whether to emit an event for `sortChange`. Default is `true`.
*/
changeActiveSorter(activeSorter, options) {
this.activeSorter = activeSorter;
this._sortChange.emit({ activeSorter, options });
}
onResize() {
this.ngZone.runOutsideAngular(() => {
fromEvent(window, 'resize')
.pipe(takeUntil(this.destroy$))
.subscribe(() => {
this.resizeNoDataElementWidth();
this.resizeLoadingElementWidth();
this.resizeErrorElementWidth();
});
});
}
createContainer() {
const element = this.renderer.createElement('div');
this.renderer.addClass(element, 'd-table-container');
return element;
}
initNoDataElement() {
this.noDataElement = TemplateUtil.createNoDataElement({
renderer: this.renderer,
totalColumn: this.totalColumn,
});
this.renderer.insertBefore(this.elementRef.nativeElement, this.noDataElement.bodyElement, this.filledElement);
this.handleCustomNoData();
this.resizeNoDataElementWidth();
}
handleCustomNoData() {
var _a;
if (!this.noDataElement)
return;
(_a = this.noDataContentRef) === null || _a === void 0 ? void 0 : _a.destroy();
TemplateUtil.updateNoDataContent({
appRef: this.appRef,
noDataElement: this.noDataElement,
renderer: this.renderer,
content: this.customNoData,
injector: this.injector,
});
}
resizeNoDataElementWidth() {
var _a;
if (!this.noDataElement)
return;
const containerWidth = ((_a = this.containerElement) === null || _a === void 0 ? void 0 : _a.clientWidth)
? this.containerElement.clientWidth + 'px'
: '100%';
this.noDataElement.contentElement.style.width = containerWidth;
}
initLoadingElement() {
this.loadingElement = TemplateUtil.createLoadingElement({
renderer: this.renderer,
totalColumn: this.totalColumn,
applicationRef: this.appRef,
environmentInjector: this.envInjector,
});
this.renderer.insertBefore(this.elementRef.nativeElement, this.loadingElement.bodyElement, this.filledElement);
this.handleCustomLoading();
this.resizeLoadingElementWidth();
}
resizeLoadingElementWidth() {
var _a;
if (!this.loadingElement)
return;
const containerWidth = ((_a = this.containerElement) === null || _a === void 0 ? void 0 : _a.clientWidth)
? this.containerElement.clientWidth + 'px'
: '100%';
this.loadingElement.contentElement.style.width = containerWidth;
}
handleCustomLoading() {
var _a;
if (!this.loadingElement)
return;
(_a = this.loadingContentRef) === null || _a === void 0 ? void 0 : _a.destroy();
TemplateUtil.updateLoadingContent({
appRef: this.appRef,
envInjector: this.envInjector,
loadingElement: this.loadingElement,
renderer: this.renderer,
content: this.customLoading,
injector: this.injector,
});
}
initErrorElement() {
this.errorElement = TemplateUtil.createErrorElement({
renderer: this.renderer,
totalColumn: this.totalColumn,
});
this.renderer.insertBefore(this.elementRef.nativeElement, this.errorElement.bodyElement, this.filledElement);
this.handleCustomError();
this.resizeErrorElementWidth();
}
handleCustomError() {
var _a;
if (!this.errorElement)
return;
(_a = this.errorContentRef) === null || _a === void 0 ? void 0 : _a.destroy();
TemplateUtil.updateErrorContent({
appRef: this.appRef,
errorElement: this.errorElement,
renderer: this.renderer,
content: this.customError,
injector: this.injector,
});
}
resizeErrorElementWidth() {
var _a;
if (!this.errorElement)
return;
const containerWidth = ((_a = this.containerElement) === null || _a === void 0 ? void 0 : _a.clientWidth)
? this.containerElement.clientWidth + 'px'
: '100%';
this.errorElement.contentElement.style.width = containerWidth;
}
handleBodyVisibilityByStatus() {
if (!this.filledElement || !this.noDataElement || !this.loadingElement || !this.errorElement) {
return;
}
this.filledElement.style.display = 'none';
this.noDataElement.bodyElement.style.display = 'none';
this.loadingElement.bodyElement.style.display = 'none';
this.errorElement.bodyElement.style.display = 'none';
if (this.status === 'loading')
this.loadingElement.bodyElement.style.display = '';
if (this.status === 'empty')
this.noDataElement.bodyElement.style.display = '';
if (this.status === 'error')
this.errorElement.bodyElement.style.display = '';
if (!this.status)
this.filledElement.style.display = '';
}
}
DokuTable.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuTable, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.EnvironmentInjector }, { token: i0.ApplicationRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
DokuTable.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: DokuTable, isStandalone: true, selector: "[doku-table]", inputs: { activeSorter: "activeSorter", status: "status", customNoData: "customNoData", customLoading: "customLoading", customError: "customError" }, outputs: { sortChange: "sortChange" }, host: { properties: { "class": "this.classes" } }, exportAs: ["dokuTable"], usesOnChanges: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuTable, decorators: [{
type: Directive,
args: [{
selector: '[doku-table]',
exportAs: 'dokuTable',
standalone: true,
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.EnvironmentInjector }, { type: i0.ApplicationRef }, { type: i0.Injector }]; }, propDecorators: { activeSorter: [{
type: Input
}], status: [{
type: Input
}], customNoData: [{
type: Input
}], customLoading: [{
type: Input
}], customError: [{
type: Input
}], sortChange: [{
type: Output
}], classes: [{
type: HostBinding,
args: ['class']
}] } });
class DokuTableSortable {
constructor(envInjector, appRef, elementRef, table) {
this.envInjector = envInjector;
this.appRef = appRef;
this.elementRef = elementRef;
this.table = table;
this.direction$ = new BehaviorSubject('');
this.destroy$ = new ReplaySubject();
}
get classes() {
return ['d-table-sortable'];
}
ngOnInit() {
var _a;
(_a = this.table) === null || _a === void 0 ? void 0 : _a['sortChange$'].pipe(filter(() => !!this.sortable), filter(() => !!this.sorterIconComponent), takeUntil(this.destroy$)).subscribe(({ activeSorter }) => {
if (this.direction$.value !== '' && (activeSorter === null || activeSorter === void 0 ? void 0 : activeSorter.column) !== this.sortable) {
// Reset direction because the active sorter is on another column.
this.direction$.next('');
}
if ((activeSorter === null || activeSorter === void 0 ? void 0 : activeSorter.column) === this.sortable &&
this.direction$.value !== (activeSorter === null || activeSorter === void 0 ? void 0 : activeSorter.direction)) {
// Update direction from table active sorter
this.direction$.next((activeSorter === null || activeSorter === void 0 ? void 0 : activeSorter.direction) || '');
}
});
this.direction$
.pipe(filter(() => !!this.sortable), filter(() => !!this.sorterIconComponent), takeUntil(this.destroy$))
.subscribe((direction) => {
var _a, _b, _c, _d, _e, _f;
// Update sorter icon based on active direction.
if (direction === 'ascending') {
(_a = this.sorterIconComponent) === null || _a === void 0 ? void 0 : _a.setInput('colorAsc', 'currentColor');
(_b = this.sorterIconComponent) === null || _b === void 0 ? void 0 : _b.setInput('colorDesc', 'none');
}
else if (direction === 'descending') {
(_c = this.sorterIconComponent) === null || _c === void 0 ? void 0 : _c.setInput('colorAsc', 'none');
(_d = this.sorterIconComponent) === null || _d === void 0 ? void 0 : _d.setInput('colorDesc', 'currentColor');
}
else {
(_e = this.sorterIconComponent) === null || _e === void 0 ? void 0 : _e.setInput('colorAsc', 'currentColor');
(_f = this.sorterIconComponent) === null || _f === void 0 ? void 0 : _f.setInput('colorDesc', 'currentColor');
}
});
}
ngOnChanges(changes) {
if (changes['sortable']) {
const sortable = changes['sortable'].currentValue;
sortable ? this.appendElement() : this.removeElement();
}
}
ngOnDestroy() {
this.removeElement();
this.destroy$.next(true);
this.destroy$.complete();
}
onClick() {
var _a;
if (!this.sortable)
return;
this.direction$.next(this.nextDirection(this.direction$.value));
(_a = this.table) === null || _a === void 0 ? void 0 : _a['_sortChange'].emit({
activeSorter: {
column: this.sortable,
direction: this.direction$.value,
},
});
}
appendElement() {
if (this.sorterIconComponent)
return;
this.sorterIconComponent = this.createSorterIconComponent();
const cell = this.elementRef.nativeElement;
cell.appendChild(this.sorterIconComponent.location.nativeElement);
cell.classList.add('d-table-th-with-sorter');
}
removeElement() {
var _a;
(_a = this.sorterIconComponent) === null || _a === void 0 ? void 0 : _a.destroy();
this.sorterIconComponent = undefined;
const cell = this.elementRef.nativeElement;
cell.classList.remove('d-table-th-with-sorter');
}
createSorterIconComponent() {
const component = createComponent(DokuSorterIcon, { environmentInjector: this.envInjector });
component.location.nativeElement.className = 'd-table-sorter-icon';
this.appRef.attachView(component.hostView);
return component;
}
nextDirection(currentDirection) {
const flows = ['', 'ascending', 'descending'];
const flowIndex = flows.findIndex((flow) => flow === currentDirection);
let nextIndex = flowIndex + 1;
if (flowIndex < 0 || flowIndex >= flows.length - 1)
nextIndex = 0;
return flows[nextIndex];
}
}
DokuTableSortable.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuTableSortable, deps: [{ token: i0.EnvironmentInjector }, { token: i0.ApplicationRef }, { token: i0.ElementRef }, { token: DokuTable }], target: i0.ɵɵFactoryTarget.Directive });
DokuTableSortable.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: DokuTableSortable, isStandalone: true, selector: "th[doku-sortable]", inputs: { sortable: ["doku-sortable", "sortable"] }, host: { listeners: { "click": "onClick()" }, properties: { "class": "this.classes" } }, exportAs: ["dokuSortable"], usesOnChanges: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuTableSortable, decorators: [{
type: Directive,
args: [{
selector: 'th[doku-sortable]',
exportAs: 'dokuSortable',
standalone: true,
}]
}], ctorParameters: function () {
return [{ type: i0.EnvironmentInjector }, { type: i0.ApplicationRef }, { type: i0.ElementRef }, { type: DokuTable, decorators: [{
type: Inject,
args: [DokuTable]
}] }];
}, propDecorators: { sortable: [{
type: Input,
args: ['doku-sortable']
}], classes: [{
type: HostBinding,
args: ['class']
}], onClick: [{
type: HostListener,
args: ['click']
}] } });
var DokuStickyColumnPosition;
(function (DokuStickyColumnPosition) {
DokuStickyColumnPosition["Left"] = "left";
DokuStickyColumnPosition["Right"] = "right";
})(DokuStickyColumnPosition || (DokuStickyColumnPosition = {}));
class DokuTableStickyColumn {
constructor(elementRef, renderer, ngZone, dokuTable) {
this.elementRef = elementRef;
this.renderer = renderer;
this.ngZone = ngZone;
this.dokuTable = dokuTable;
this.destroy$ = new ReplaySubject();
}
get element() {
return this.elementRef.nativeElement;
}
get isStickyLeft() {
return this.position === DokuStickyColumnPosition.Left;
}
get isStickyRight() {
return this.position === DokuStickyColumnPosition.Right;
}
ngOnChanges(changes) {
var _a, _b;
if (((_a = changes['position']) === null || _a === void 0 ? void 0 : _a.previousValue) !== ((_b = changes['position']) === null || _b === void 0 ? void 0 : _b.currentValue)) {
this.ngZone.runOutsideAngular(() => {
var _a;
(_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
setTimeout(() => {
if (this.isStickyRight)
this.handleDynamicStyleRight();
if (this.isStickyLeft)
this.handleDynamicStyleLeft();
}, 0);
});
}
}
ngAfterViewInit() {
// Giving delay to detect table container being initialized.
setTimeout(() => {
this.watchTableContainerScrollEvent();
}, 0);
}
ngOnDestroy() {
var _a;
(_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
this.destroy$.next(true);
this.destroy$.complete();
}
handleDynamicStyleRight() {
// Get next sticky column
const nextStickyColumn = this.element.nextElementSibling;
if (!nextStickyColumn)
return;
if (!nextStickyColumn.classList.contains('d-table-sticky-column-right'))
return;
this.observer = new ResizeObserver(() => {
// If has next sticky column, get the width of the column.
const nextStickyColumnWidth = this.getSiblingElementClientWidth(nextStickyColumn, 'next');
// Set the start `right` point of the current sticky column
// from the next sticky column width.
const rightValue = nextStickyColumnWidth + 'px';
this.renderer.setStyle(this.element, 'right', rightValue);
});
if (this.element.parentElement) {
this.observer.observe(this.element.parentElement);
}
}
handleDynamicStyleLeft() {
// Get previous sticky column
const prevStickyColumn = this.element.previousElementSibling;
if (!prevStickyColumn)
return;
// if (prevStickyColumn.classList.contains('d-table-sticky-column-left')) return;
this.observer = new ResizeObserver(() => {
// If has previous sticky column, get the width of the column.
const prevStickyColumnWidth = this.getSiblingElementClientWidth(prevStickyColumn, 'previous');
// Set the start `left` point of the current sticky column
// from the prev sticky column width.
const leftValue = prevStickyColumnWidth + 'px';
this.renderer.setStyle(this.element, 'left', leftValue);
});
if (this.element.parentElement) {
this.observer.observe(this.element.parentElement);
}
}
getSiblingElementClientWidth(nextElement, siblingPosition) {
const sibling = siblingPosition === 'previous'
? nextElement.previousElementSibling
: nextElement.nextElementSibling;
if (sibling) {
const siblingClientWidth = this.getSiblingElementClientWidth(sibling, siblingPosition);
return nextElement.getBoundingClientRect().width + siblingClientWidth;
}
return nextElement.getBoundingClientRect().width;
}
watchTableContainerScrollEvent() {
this.ngZone.runOutsideAngular(() => {
var _a, _b;
const tableElement = (_a = this.dokuTable) === null || _a === void 0 ? void 0 : _a['elementRef'].nativeElement;
const tableContainerElement = (_b = this.dokuTable) === null || _b === void 0 ? void 0 : _b['containerElement'];
if (!tableContainerElement || !tableElement)
return;
fromEvent(tableContainerElement, 'scroll')
.pipe(startWith(new Event('scroll')), filter(() => !!this.position), takeUntil(this.destroy$))
.subscribe(() => {
this.handleStickyLeftShadow(tableElement, tableContainerElement);
this.handleStickyRightShadow(tableElement, tableContainerElement);
});
});
}
handleStickyLeftShadow(_, tableContainerElement) {
if (!this.isLastStickyColumn())
return;
if (this.position !== DokuStickyColumnPosition.Left)
return;
tableContainerElement.scrollLeft > 0
? this.toggleShadowClass('add')
: this.toggleShadowClass('remove');
}
handleStickyRightShadow(tableElement, tableContainerElement) {
if (!this.isLastStickyColumn())
return;
if (this.position !== DokuStickyColumnPosition.Right)
return;
// Don't need to provide the shadow because the table element has no more columns to scroll.
if (tableElement.clientWidth < tableContainerElement.clientWidth)
return;
const offsetWidth = tableElement.clientWidth - tableContainerElement.clientWidth;
const offsetScroll = offsetWidth - tableContainerElement.scrollLeft;
// Giving check offset to 0.5 because the client width value is rounded to nearest integer.
offsetScroll > 0.5 ? this.toggleShadowClass('add') : this.toggleShadowClass('remove');
}
/**
* Check whether this column is the last sticky column.
*
* For the `left` position, will check if no sticky column after.
* For the `right` position, will check if no sticky column before.
*/
isLastStickyColumn() {
if (this.isStickyLeft) {
const nextElement = this.element.nextElementSibling;
if (nextElement === null || nextElement === void 0 ? void 0 : nextElement.classList.contains('d-table-sticky-column-left'))
return false;
return true;
}
if (this.isStickyRight) {
const prevElement = this.element.previousElementSibling;
if (prevElement === null || prevElement === void 0 ? void 0 : prevElement.classList.contains('d-table-sticky-column-right'))
return false;
return true;
}
return false;
}
toggleShadowClass(type) {
if (type === 'add') {
this.renderer.addClass(this.element, 'd-table-sticky-column-shadow');
}
if (type === 'remove') {
this.renderer.removeClass(this.element, 'd-table-sticky-column-shadow');
}
}
}
DokuTableStickyColumn.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuTableStickyColumn, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: DokuTable, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
DokuTableStickyColumn.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: DokuTableStickyColumn, isStandalone: true, selector: "th[doku-sticky-column], td[doku-sticky-column]", inputs: { position: ["doku-sticky-column", "position"] }, host: { properties: { "class.d-table-sticky-column-left": "this.isStickyLeft", "class.d-table-sticky-column-right": "this.isStickyRight" } }, exportAs: ["dokuStickyColumn"], usesOnChanges: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuTableStickyColumn, decorators: [{
type: Directive,
args: [{
selector: 'th[doku-sticky-column], td[doku-sticky-column]',
exportAs: 'dokuStickyColumn',
standalone: true,
}]
}], ctorParameters: function () {
return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: DokuTable, decorators: [{
type: Optional
}, {
type: Inject,
args: [DokuTable]
}] }];
}, propDecorators: { position: [{
type: Input,
args: ['doku-sticky-column']
}], isStickyLeft: [{
type: HostBinding,
args: ['class.d-table-sticky-column-left']
}], isStickyRight: [{
type: HostBinding,
args: ['class.d-table-sticky-column-right']
}] } });
class DokuTableModule {
}
DokuTableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
DokuTableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: DokuTableModule, imports: [DokuTable, DokuTableSortable, DokuTableStickyColumn], exports: [DokuTable, DokuTableSortable, DokuTableStickyColumn] });
DokuTableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuTableModule });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuTableModule, decorators: [{
type: NgModule,
args: [{
imports: [DokuTable, DokuTableSortable, DokuTableStickyColumn],
exports: [DokuTable, DokuTableSortable, DokuTableStickyColumn],
}]
}] });
class DokuTabContent {
constructor(templateRef) {
this.templateRef = templateRef;
}
}
DokuTabContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuTabContent, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
DokuTabContent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: DokuTabContent, isStandalone: true, selector: "ng-template[doku-tab-content]", exportAs: ["dokuTabContent"], ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuTabContent, decorators: [{
type: Directive,
args: [{
selector: 'ng-template[doku-tab-content]',
exportAs: 'dokuTabContent',
standalone: true,
}]
}], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
class DokuTabLabel {
constructor(templateRef) {
this.templateRef = templateRef;
}
}
DokuTabLabel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuTabLabel, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
DokuTabLabel.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: DokuTabLabel, isStandalone: true, selector: "ng-template[doku-tab-label]", exportAs: ["dokuTabLabel"], ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuTabLabel, decorators: [{
type: Directive,
args: [{
selector: 'ng-template[doku-tab-label]',
exportAs: 'dokuTabLabel',
standalone: true,
}]
}], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
const DOKU_TABS = new InjectionToken('DOKU_TABS');
const DOKU_TAB = new InjectionToken('DOKU_TAB');
let ViewElement$1 = class ViewElement {
static createTabsHeader(props) {
const element = props.renderer.createElement('div');
props.renderer.addClass(element, 'd-tabs-header');
return element;
}
static createTabsBody(props) {
const element = props.renderer.createElement('div');
props.renderer.addClass(element, 'd-tabs-body');
return element;
}
static createTabLabel(props) {
const element = props.renderer.createElement('div');
props.renderer.addClass(element, 'd-tab-label');
return element;
}
static createTabContent(props) {
const element = props.renderer.createElement('div');
props.renderer.addClass(element, 'd-tab-content');
return element;
}
static appendLabelToTabsHeader(props) {
const viewRef = props.labelTemplate.templateRef.createEmbeddedView(null);
props.applicationRef.attachView(viewRef);
viewRef.rootNodes.forEach((node) => props.renderer.appendChild(props.labelElement, node));
props.renderer.appendChild(props.headerElement, props.labelElement);
return viewRef;
}
static appendContentToTabsBody(props) {
props.renderer.appendChild(props.bodyElement, props.contentElement);
if (props.lazyLoad)
return;
const viewRef = this.createContentViewRefAndAppend({
applicationRef: props.applicationRef,
renderer: props.renderer,
contentElement: props.contentElement,
contentTemplate: props.contentTemplate,
});
return viewRef;
}
static createContentViewRefAndAppend(props) {
const viewRef = props.contentTemplate.templateRef.createEmbeddedView(null);
props.applicationRef.attachView(viewRef);
viewRef.rootNodes.forEach((node) => props.renderer.appendChild(props.contentElement, node));
return viewRef;
}
};
class DokuTabs {
constructor(elementRef, renderer, appRef) {
this.elementRef = elementRef;
this.renderer = renderer;
this.appRef = appRef;
/**
* Initial active id of the tab.
* Default to first tab.
*/
this.activeId = '';
/**
* Whether to use content card styles for the tab body.
*
* @default false
*/
this.useContentCard = false;
/**
* Listen to active tab change.
*/
this.activeTabChange = new EventEmitter();
this.classes = 'd-tabs';
this.destroy$ = new ReplaySubject();
/**
* It used in tab component.
*/
this.tabChangeForChild$ = this.activeTabChange
.asObservable()
.pipe(shareReplay(), takeUntil(this.destroy$));
}
ngAfterContentInit() {
var _a, _b;
// Create tabs header and body, then append them.
this.tabsHeaderElement = ViewElement$1.createTabsHeader({ renderer: this.renderer });
this.tabsBodyElement = ViewElement$1.createTabsBody({ renderer: this.renderer });
this.elementRef.nativeElement.append(this.tabsHeaderElement, this.tabsBodyElement);
// Set initial active tab
const activeId = ((_a = this.tabItems) === null || _a === void 0 ? void 0 : _a.first) ? this.tabItems.first.id : null;
if (!this.isValidActiveId(this.activeId) && activeId) {
this.updateActiveId(activeId);
}
(_b = this.tabItems) === null || _b === void 0 ? void 0 : _b.changes.pipe(startWith(this.tabItems), map((items) => items.toArray()), startWith([]), pairwise(), takeUntil(this.destroy$)).subscribe(([prevItems, currentItems]) => {
this.updateTabs(prevItems, currentItems);
this.notifyTabChange(this.activeId);
});
}
ngOnDestroy() {
this.destroy$.next(true);
this.destroy$.complete();
}
/**
* Change the active tab.
* @param id Tab id.
*/
changeActiveTab(id) {
this.updateActiveId(id, { emitTabChange: true });
}
updateActiveId(id, options) {
if (this.activeId === id)
return;
this.activeId = id;
if (options === null || options === void 0 ? void 0 : options.emitTabChange)
this.notifyTabChange(id);
}
notifyTabChange(itemId) {
const tab = this.getTabById(itemId);
if (!tab)
return;
this.activeTabChange.emit(tab);
}
getTabById(id) {
var _a;
return ((_a = this.tabItems) === null || _a === void 0 ? void 0 : _a.find((tab) => tab.id === id)) || null;
}
isValidActiveId(id) {
var _a;
return !!((_a = this.tabItems) === null || _a === void 0 ? void 0 : _a.some((tab) => tab.id === id));
}
/**
* Update tab elements when adding more or removing tab items.
*/
updateTabs(prevItems, currentItems) {
const removedItems = prevItems.filter((prevItem) => !currentItems.some((currentItem) => prevItem.id === currentItem.id));
const newItems = currentItems.filter((currentItem) => !prevItems.some((prevItem) => currentItem.id === prevItem.id));
removedItems.forEach((item) => {
this.removeTabLabel(item);
this.removeTabContent(item);
});
newItems.forEach((item) => {
this.addTabLabel(item);
this.addTabContent(item);
});
}
addTabLabel(item) {
if (!this.tabsHeaderElement || !item['labelTemplate'])
return;
if (item['labelElement'] || item['labelViewRef'])
return;
item['labelElement'] = ViewElement$1.createTabLabel({ renderer: this.renderer });
item['labelViewRef'] = ViewElement$1.appendLabelToTabsHeader({
applicationRef: this.appRef,
renderer: this.renderer,
headerElement: this.tabsHeaderElement,
labelElement: item['labelElement'],
labelTemplate: item['labelTemplate'],
});
}
removeTabLabel(item) {
var _a, _b;
(_a = item['labelElement']) === null || _a === void 0 ? void 0 : _a.remove();
(_b = item['labelViewRef']) === null || _b === void 0 ? void 0 : _b.destroy();
}
addTabContent(item) {
if (!this.tabsBodyElement || !item['contentTemplate'])
return;
if (item['contentElement'] || item['contentViewRef'])
return;
item['contentElement'] = ViewElement$1.createTabContent({ renderer: this.renderer });
item['contentViewRef'] = ViewElement$1.appendContentToTabsBody({
applicationRef: this.appRef,
renderer: this.renderer,
bodyElement: this.tabsBodyElement,
contentElement: item['contentElement'],
contentTemplate: item['contentTemplate'],
lazyLoad: item.lazyLoad,
});
}
removeTabContent(item) {
var _a, _b;
(_a = item['contentElement']) === null || _a === void 0 ? void 0 : _a.remove();
(_b = item['contentViewRef']) === null || _b === void 0 ? void 0 : _b.destroy();
}
}
DokuTabs.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuTabs, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Component });
DokuTabs.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuTabs, isStandalone: true, selector: "doku-tabs", inputs: { activeId: "activeId", useContentCard: "useContentCard" }, outputs: { activeTabChange: "activeTabChange" }, host: { properties: { "class.d-tabs-content-card": "this.useContentCard", "class": "this.classes" } }, providers: [
{
provide: DOKU_TABS,
useExisting: DokuTabs,
},
], queries: [{ propertyName: "tabItems", predicate: DOKU_TAB }], exportAs: ["dokuTabs"], ngImport: i0, template: '', isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuTabs, decorators: [{
type: Component,
args: [{
selector: 'doku-tabs',
exportAs: 'dokuTabs',
standalone: true,
imports: [CommonModule],
template: '',
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [
{
provide: DOKU_TABS,
useExisting: DokuTabs,
},
],
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ApplicationRef }]; }, propDecorators: { activeId: [{
type: Input
}], useContentCard: [{
type: HostBinding,
args: ['class.d-tabs-content-card']
}, {
type: Input
}], activeTabChange: [{
type: Output
}], classes: [{
type: HostBinding,
args: ['class']
}], tabItems: [{
type: ContentChildren,
args: [DOKU_TAB, { descendants: false }]
}] } });
let nextId$2 = 1;
class DokuTab {
constructor(appRef, renderer, tabs) {
this.appRef = appRef;
this.renderer = renderer;
this.tabs = tabs;
/**
* Unique id of the tab.
* Default value is auto-generated.
*
* @default 'd-tab-[nextId]''
*/
this.id = `d-tab-${nextId$2++}`;
/**
* Whether the tab is disabled.
*
* The tab content is not going to be loaded on disabled tab.
*
* @default false
*/
this.disabled = false;
/**
* Whether the tab content is lazy loaded which means
* the content will be loaded when the tab is active and
* destroyed when away from the tab.
*
* @default false
*/
this.lazyLoad = false;
this.destroy$ = new ReplaySubject();
}
ngAfterContentInit() {
var _a;
(_a = this.tabs) === null || _a === void 0 ? void 0 : _a['tabChangeForChild$'].pipe(takeUntil(this.destroy$)).subscribe((activeItem) => {
this.handleActiveState(activeItem);
this.handleDisabledState();
this.handleLazyLoaded(activeItem);
});
of(true)
.pipe(delay(100),
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
switchMap(() => fromEvent(this.labelElement, 'click')), filter(() => !this.disabled), takeUntil(this.destroy$))
.subscribe(() => {
var _a;
(_a = this.tabs) === null || _a === void 0 ? void 0 : _a.changeActiveTab(this.id);
});
}
ngOnDestroy() {
this.destroy$.next(true);
this.destroy$.complete();
}
handleActiveState(activeItem) {
if (!this.labelElement || !this.contentElement)
return;
if ((activeItem === null || activeItem === void 0 ? void 0 : activeItem.id) === this.id) {
this.renderer.addClass(this.labelElement, 'active');
this.renderer.addClass(this.contentElement, 'active');
}
else {
this.renderer.removeClass(this.labelElement, 'active');
this.renderer.removeClass(this.contentElement, 'active');
}
}
handleDisabledState() {
if (!this.labelElement || !this.contentElement)
return;
if (this.disabled) {
this.renderer.addClass(this.labelElement, 'disabled');
this.renderer.addClass(this.contentElement, 'disabled');
}
else {
this.renderer.removeClass(this.labelElement, 'disabled');
this.renderer.removeClass(this.contentElement, 'disabled');
}
}
handleLazyLoaded(activeItem) {
var _a;
if (!this.lazyLoad)
return;
if ((activeItem === null || activeItem === void 0 ? void 0 : activeItem.id) === this.id && this.contentTemplate && this.contentElement) {
this.contentViewRef = ViewElement$1.createContentViewRefAndAppend({
applicationRef: this.appRef,
renderer: this.renderer,
contentElement: this.contentElement,
contentTemplate: this.contentTemplate,
});
}
else {
(_a = this.contentViewRef) === null || _a === void 0 ? void 0 : _a.destroy();
}
}
}
DokuTab.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuTab, deps: [{ token: i0.ApplicationRef }, { token: i0.Renderer2 }, { token: DOKU_TABS }], target: i0.ɵɵFactoryTarget.Component });
DokuTab.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuTab, isStandalone: true, selector: "doku-tab", inputs: { id: "id", disabled: "disabled", lazyLoad: "lazyLoad" }, providers: [
{
provide: DOKU_TAB,
useExisting: DokuTab,
},
], queries: [{ propertyName: "labelTemplate", first: true, predicate: DokuTabLabel }, { propertyName: "contentTemplate", first: true, predicate: DokuTabContent }], exportAs: ["dokuTab"], ngImport: i0, template: '', isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuTab, decorators: [{
type: Component,
args: [{
selector: 'doku-tab',
exportAs: 'dokuTab',
standalone: true,
imports: [CommonModule],
template: '',
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [
{
provide: DOKU_TAB,
useExisting: DokuTab,
},
],
}]
}], ctorParameters: function () {
return [{ type: i0.ApplicationRef }, { type: i0.Renderer2 }, { type: DokuTabs, decorators: [{
type: Inject,
args: [DOKU_TABS]
}] }];
}, propDecorators: { id: [{
type: Input
}], disabled: [{
type: Input
}], lazyLoad: [{
type: Input
}], labelTemplate: [{
type: ContentChild,
args: [DokuTabLabel, { descendants: false }]
}], contentTemplate: [{
type: ContentChild,
args: [DokuTabContent, { descendants: false }]
}] } });
class DokuTabsModule {
}
DokuTabsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
DokuTabsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: DokuTabsModule, imports: [DokuTabs, DokuTab, DokuTabLabel, DokuTabContent], exports: [DokuTabs, DokuTab, DokuTabLabel, DokuTabContent] });
DokuTabsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuTabsModule, imports: [DokuTabs, DokuTab] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuTabsModule, decorators: [{
type: NgModule,
args: [{
imports: [DokuTabs, DokuTab, DokuTabLabel, DokuTabContent],
exports: [DokuTabs, DokuTab, DokuTabLabel, DokuTabContent],
}]
}] });
class DokuTimelineDateTime {
constructor() {
this.classes = 'd-timeline-time';
}
}
DokuTimelineDateTime.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuTimelineDateTime, deps: [], target: i0.ɵɵFactoryTarget.Component });
DokuTimelineDateTime.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuTimelineDateTime, isStandalone: true, selector: "doku-timeline-date-time", host: { properties: { "class": "this.classes" } }, exportAs: ["dokuTimelineDateTime"], ngImport: i0, template: "<ng-content></ng-content>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuTimelineDateTime, decorators: [{
type: Component,
args: [{ selector: 'doku-timeline-date-time', exportAs: 'dokuTimelineDateTime', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n" }]
}], propDecorators: { classes: [{
type: HostBinding,
args: ['class']
}] } });
class DokuTimelineDescription {
constructor() {
this.classes = 'd-timeline-desc';
}
}
DokuTimelineDescription.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuTimelineDescription, deps: [], target: i0.ɵɵFactoryTarget.Component });
DokuTimelineDescription.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuTimelineDescription, isStandalone: true, selector: "doku-timeline-description", host: { properties: { "class": "this.classes" } }, exportAs: ["dokuTimelineDescription"], ngImport: i0, template: "<ng-content></ng-content>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuTimelineDescription, decorators: [{
type: Component,
args: [{ selector: 'doku-timeline-description', exportAs: 'dokuTimelineDescription', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n" }]
}], propDecorators: { classes: [{
type: HostBinding,
args: ['class']
}] } });
class DokuTimelineItem {
constructor() {
this.classes = 'd-timeline-item';
}
}
DokuTimelineItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuTimelineItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
DokuTimelineItem.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuTimelineItem, isStandalone: true, selector: "doku-timeline-item", host: { properties: { "class": "this.classes" } }, exportAs: ["dokuTimelineItem"], ngImport: i0, template: "<div class=\"d-timeline-content\">\n <div class=\"d-timeline-content-helper\">\n <ng-content select=\"doku-timeline-title\"></ng-content>\n <ng-content select=\"doku-timeline-description\"></ng-content>\n </div>\n <ng-content select=\"doku-timeline-date-time\"></ng-content>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuTimelineItem, decorators: [{
type: Component,
args: [{ selector: 'doku-timeline-item', exportAs: 'dokuTimelineItem', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"d-timeline-content\">\n <div class=\"d-timeline-content-helper\">\n <ng-content select=\"doku-timeline-title\"></ng-content>\n <ng-content select=\"doku-timeline-description\"></ng-content>\n </div>\n <ng-content select=\"doku-timeline-date-time\"></ng-content>\n</div>\n" }]
}], propDecorators: { classes: [{
type: HostBinding,
args: ['class']
}] } });
class DokuTimelineTitle {
constructor() {
this.classes = 'd-timeline-title';
}
}
DokuTimelineTitle.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuTimelineTitle, deps: [], target: i0.ɵɵFactoryTarget.Component });
DokuTimelineTitle.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuTimelineTitle, isStandalone: true, selector: "doku-timeline-title", host: { properties: { "class": "this.classes" } }, exportAs: ["dokuTimelineTitle"], ngImport: i0, template: "<ng-content></ng-content>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuTimelineTitle, decorators: [{
type: Component,
args: [{ selector: 'doku-timeline-title', exportAs: 'dokuTimelineTitle', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n" }]
}], propDecorators: { classes: [{
type: HostBinding,
args: ['class']
}] } });
class DokuTimeline {
constructor() {
/**
* The orientation of the timeline.
* @default `horizontal`
*/
this.orientation = 'horizontal';
}
get classes() {
return ['d-timeline', `d-timeline-${this.orientation}`];
}
get hasDateTime() {
return !!this.dateTimeRef;
}
ngAfterViewInit() {
this._toggleActiveItemColor();
}
ngOnChanges({ activeIndex }) {
if ((activeIndex === null || activeIndex === void 0 ? void 0 : activeIndex.currentValue) !== (activeIndex === null || activeIndex === void 0 ? void 0 : activeIndex.previousValue)) {
this._toggleActiveItemColor();
}
}
/**
* Toggle each timeline item color to active from the first to the last active item
* that represented by the active index that represent.
*/
_toggleActiveItemColor() {
if (!this.timelineItems)
return;
this.timelineItems.forEach((itemRef, idx) => {
if (this.activeIndex === undefined || this.activeIndex < -1) {
return;
}
const itemEl = itemRef.nativeElement;
const isActive = idx <= this.activeIndex;
const isLastActive = idx === this.activeIndex;
if (isLastActive && this.orientation === 'horizontal') {
itemEl.classList.remove('is-active');
itemEl.classList.add('is-active-last');
}
else if (isActive) {
itemEl.classList.remove('is-active-last');
itemEl.classList.add('is-active');
}
else {
itemEl.classList.remove('is-active-last');
itemEl.classList.remove('is-active');
}
});
}
}
DokuTimeline.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuTimeline, deps: [], target: i0.ɵɵFactoryTarget.Component });
DokuTimeline.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuTimeline, isStandalone: true, selector: "doku-timeline", inputs: { activeIndex: "activeIndex", orientation: "orientation" }, host: { properties: { "class": "this.classes", "class.has-date-time": "this.hasDateTime" } }, queries: [{ propertyName: "dateTimeRef", first: true, predicate: DokuTimelineDateTime, descendants: true }, { propertyName: "timelineItems", predicate: DokuTimelineItem, read: ElementRef }], exportAs: ["dokuTimeline"], usesOnChanges: true, ngImport: i0, template: "<ol class=\"d-timeline-list\">\n <ng-content></ng-content>\n</ol>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuTimeline, decorators: [{
type: Component,
args: [{ selector: 'doku-timeline', exportAs: 'dokuTimeline', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ol class=\"d-timeline-list\">\n <ng-content></ng-content>\n</ol>\n" }]
}], propDecorators: { dateTimeRef: [{
type: ContentChild,
args: [DokuTimelineDateTime]
}], timelineItems: [{
type: ContentChildren,
args: [DokuTimelineItem, { read: ElementRef }]
}], activeIndex: [{
type: Input
}], orientation: [{
type: Input
}], classes: [{
type: HostBinding,
args: ['class']
}], hasDateTime: [{
type: HostBinding,
args: ['class.has-date-time']
}] } });
class DokuTimelineModule {
}
DokuTimelineModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuTimelineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
DokuTimelineModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: DokuTimelineModule, imports: [DokuTimeline,
DokuTimelineItem,
DokuTimelineTitle,
DokuTimelineDescription,
DokuTimelineDateTime], exports: [DokuTimeline,
DokuTimelineItem,
DokuTimelineTitle,
DokuTimelineDescription,
DokuTimelineDateTime] });
DokuTimelineModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuTimelineModule, imports: [DokuTimeline,
DokuTimelineItem,
DokuTimelineTitle,
DokuTimelineDescription,
DokuTimelineDateTime] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuTimelineModule, decorators: [{
type: NgModule,
args: [{
imports: [
DokuTimeline,
DokuTimelineItem,
DokuTimelineTitle,
DokuTimelineDescription,
DokuTimelineDateTime,
],
exports: [
DokuTimeline,
DokuTimelineItem,
DokuTimelineTitle,
DokuTimelineDescription,
DokuTimelineDateTime,
],
}]
}] });
class DokuToggleDescription {
constructor() {
this.classes = 'd-toggle-description';
}
}
DokuToggleDescription.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuToggleDescription, deps: [], target: i0.ɵɵFactoryTarget.Component });
DokuToggleDescription.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuToggleDescription, isStandalone: true, selector: "doku-toggle-description", host: { properties: { "class": "this.classes" } }, exportAs: ["dokuToggleDescription"], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuToggleDescription, decorators: [{
type: Component,
args: [{
selector: 'doku-toggle-description',
exportAs: 'dokuToggleDescription',
standalone: true,
imports: [CommonModule],
template: `<ng-content></ng-content>`,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}], propDecorators: { classes: [{
type: HostBinding,
args: ['class']
}] } });
let nextId$1 = 1;
class DokuToggle {
constructor(ngControl) {
this.ngControl = ngControl;
/**
* Unique id of the toggle.
* Default value is auto-generated.
*
* @default 'd-toggle-[nextId]'
*/
this.id = `d-toggle-${nextId$1++}`;
/**
* Whether the toggle is checked.
*
* If using reactive forms or template-driven forms, the value will be replaced.
*
* @default false
*/
this.checked = false;
/**
* Whether the toggle is disabled.
*
* If using reactive forms, the value will be replaced.
* Use form control's method to disable the toggle.
*
* @default false;
*/
this.disabled = false;
/**
* Vertical alignment of the toggle.
*
* @default 'center'
*/
this.verticalAlignment = 'center';
this.checkedChange = new EventEmitter();
if (this.ngControl !== null) {
this.ngControl.valueAccessor = this;
}
}
get classes() {
return ['d-toggle-container', `d-toggle-v-alignment-${this.verticalAlignment}`];
}
writeValue(value) {
this.checked = value;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
registerOnChange(fn) {
this.onChange = fn;
}
setDisabledState(isDisabled) {
this.disabled = isDisabled;
}
onToggleChange(ev) {
var _a, _b;
const checked = ev.target.checked;
this.checkedChange.emit(checked);
(_a = this.onChange) === null || _a === void 0 ? void 0 : _a.call(this, checked);
(_b = this.onTouched) === null || _b === void 0 ? void 0 : _b.call(this);
}
}
DokuToggle.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuToggle, deps: [{ token: i1$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
DokuToggle.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuToggle, isStandalone: true, selector: "doku-toggle", inputs: { id: "id", checked: "checked", disabled: "disabled", verticalAlignment: "verticalAlignment" }, outputs: { checkedChange: "checkedChange" }, host: { properties: { "class": "this.classes" } }, exportAs: ["dokuToggle"], ngImport: i0, template: "<input\n [id]=\"id\"\n type=\"checkbox\"\n class=\"d-toggle\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n (change)=\"onToggleChange($event)\"\n/>\n<div class=\"d-toggle-content\">\n <label [for]=\"id\"><ng-content></ng-content></label>\n <ng-content select=\"doku-toggle-description\"></ng-content>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuToggle, decorators: [{
type: Component,
args: [{ selector: 'doku-toggle', exportAs: 'dokuToggle', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<input\n [id]=\"id\"\n type=\"checkbox\"\n class=\"d-toggle\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n (change)=\"onToggleChange($event)\"\n/>\n<div class=\"d-toggle-content\">\n <label [for]=\"id\"><ng-content></ng-content></label>\n <ng-content select=\"doku-toggle-description\"></ng-content>\n</div>\n" }]
}], ctorParameters: function () {
return [{ type: i1$1.NgControl, decorators: [{
type: Optional
}, {
type: Self
}] }];
}, propDecorators: { id: [{
type: Input
}], checked: [{
type: Input
}], disabled: [{
type: Input
}], verticalAlignment: [{
type: Input
}], checkedChange: [{
type: Output
}], classes: [{
type: HostBinding,
args: ['class']
}] } });
class DokuToggleModule {
}
DokuToggleModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuToggleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
DokuToggleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: DokuToggleModule, imports: [DokuToggle, DokuToggleDescription], exports: [DokuToggle, DokuToggleDescription] });
DokuToggleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuToggleModule, imports: [DokuToggle, DokuToggleDescription] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuToggleModule, decorators: [{
type: NgModule,
args: [{
imports: [DokuToggle, DokuToggleDescription],
exports: [DokuToggle, DokuToggleDescription],
}]
}] });
class DokuTooltip {
constructor(renderer, document, ngZone, elementRef, appRef) {
this.renderer = renderer;
this.document = document;
this.ngZone = ngZone;
this.elementRef = elementRef;
this.appRef = appRef;
/**
* Content of the tooltip.
* It can be a string or a template for more customization.
*
* @default ''
*/
this.content = '';
/**
* The color of the tooltip.
* Either `dark` or `light`.
* @default 'dark'
*/
this.color = 'dark';
/**
* The placement of the tooltip.
* @default 'top'
*/
this.placement = 'top';
/**
* Whether tooltip should stay when hovering on its element.
* @default false
*/
this.stayOnHover = false;
/**
* Whether to disable the tooltip.
* Disabled tooltip can't be opened.
* @default false
*/
this.disabled = false;
this.isShown = false;
this.destroy$ = new ReplaySubject();
}
get classes() {
return ['d-tooltip', 'd-text-body-s', `d-tooltip-${this.color}`];
}
ngOnInit() {
this.handleEventsShow();
this.handleEventsHide();
this.tooltipElement = this.createTooltipElement();
}
ngOnDestroy() {
this.destroy$.next(1);
this.destroy$.complete();
this.hide();
this.tooltipElement = undefined;
this.tooltipContentElement = undefined;
this.tooltipArrowElement = undefined;
}
/**
* Show tooltip programmatically.
*/
show() {
if (this.disabled)
return;
if (this.isShown || !this.tooltipElement)
return;
this.isShown = true;
this.setTooltipContent(this.content);
this.document.body.appendChild(this.tooltipElement);
this.doAutoUpdatePosition();
}
/**
* Hide tooltip programmatically.
*/
hide() {
var _a, _b;
if (!this.isShown || !this.tooltipElement)
return;
this.isShown = false;
this.document.body.removeChild(this.tooltipElement);
(_a = this.cleanup) === null || _a === void 0 ? void 0 : _a.call(this);
(_b = this.viewRef) === null || _b === void 0 ? void 0 : _b.destroy();
this.elementRef.nativeElement.blur();
}
/**
* Toggle tooltip programmatically.
*/
toggle() {
this.isShown ? this.hide() : this.show();
}
/**
* Update the content of the tooltip with new one.
*/
updateContent(content) {
this.setTooltipContent(content);
}
createTooltipElement() {
const element = this.renderer.createElement('div');
element.className = this.classes.join(' ');
this.tooltipContentElement = this.createTooltipContentElement();
element.appendChild(this.tooltipContentElement);
this.tooltipArrowElement = this.createArrowElement();
element.appendChild(this.tooltipArrowElement);
return element;
}
createTooltipContentElement() {
return this.renderer.createElement('div');
}
createArrowElement() {
const element = this.renderer.createElement('div');
element.className = 'd-tooltip-arrow';
return element;
}
setTooltipContent(content) {
var _a;
if (!this.tooltipContentElement)
return;
this.tooltipContentElement.replaceChildren();
if (content instanceof TemplateRef) {
(_a = this.viewRef) === null || _a === void 0 ? void 0 : _a.destroy();
this.viewRef = content.createEmbeddedView({});
this.appRef.attachView(this.viewRef);
this.tooltipContentElement.append(...this.viewRef.rootNodes);
this.viewRef.detectChanges();
}
if (typeof content === 'string') {
this.tooltipContentElement.appendChild(this.document.createTextNode(content));
}
}
updatePosition() {
if (!this.elementRef.nativeElement || !this.tooltipElement || !this.tooltipArrowElement)
return;
computePosition(this.elementRef.nativeElement, this.tooltipElement, {
placement: this.placement,
middleware: [
offset(6),
flip(),
shift({ padding: 8 }),
arrow({ element: this.tooltipArrowElement }),
],
}).then(({ x, y, placement, middlewareData }) => {
if (!this.tooltipElement)
return;
Object.assign(this.tooltipElement.style, { top: `${y}px`, left: `${x}px` });
// Positioning the arrow element
if (middlewareData.arrow && this.tooltipArrowElement) {
const { x: arrowX, y: arrowY } = middlewareData.arrow;
const staticSide = {
top: 'bottom',
right: 'left',
bottom: 'top',
left: 'right',
}[placement.split('-')[0]];
Object.assign(this.tooltipArrowElement.style, {
left: arrowX != null || arrowX != undefined ? `${arrowX}px` : '',
top: arrowY != null || arrowY != undefined ? `${arrowY}px` : '',
right: '',
bottom: '',
[staticSide]: '-4px',
});
}
});
}
doAutoUpdatePosition() {
this.ngZone.runOutsideAngular(() => {
if (!this.elementRef.nativeElement || !this.tooltipElement)
return;
this.cleanup = autoUpdate(this.elementRef.nativeElement, this.tooltipElement, () => {
this.updatePosition();
});
});
}
handleEventsShow() {
this.ngZone.runOutsideAngular(() => {
merge(fromEvent(this.elementRef.nativeElement, 'mouseenter'), fromEvent(this.elementRef.nativeElement, 'focus'))
.pipe(takeUntil(this.destroy$))
.subscribe(() => {
this.show();
});
});
}
handleEventsHide() {
this.ngZone.runOutsideAngular(() => {
merge(fromEvent(this.elementRef.nativeElement, 'mouseleave'), fromEvent(this.elementRef.nativeElement, 'blur'))
.pipe(switchMap((event) => this.stayOnHover ? this.handleHoveringTooltipElement(event) : of(event)), takeUntil(this.destroy$))
.subscribe(() => {
this.hide();
});
});
}
handleHoveringTooltipElement(event) {
if (!this.tooltipElement)
return of(event);
return of(event).pipe(delay(50), switchMap(() => iif(() => { var _a; return !!((_a = this.tooltipElement) === null || _a === void 0 ? void 0 : _a.matches(':hover')); },
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
fromEvent(this.tooltipElement, 'mouseleave'), of(event))));
}
}
DokuTooltip.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuTooltip, deps: [{ token: i0.Renderer2 }, { token: DOCUMENT }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Directive });
DokuTooltip.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: DokuTooltip, isStandalone: true, selector: "[doku-tooltip]", inputs: { content: ["doku-tooltip", "content"], color: ["tooltipColor", "color"], placement: ["tooltipPlacement", "placement"], stayOnHover: ["tooltipStayOnHover", "stayOnHover"], disabled: ["tooltipDisabled", "disabled"] }, exportAs: ["dokuTooltip"], ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuTooltip, decorators: [{
type: Directive,
args: [{
selector: '[doku-tooltip]',
exportAs: 'dokuTooltip',
standalone: true,
}]
}], ctorParameters: function () {
return [{ type: i0.Renderer2 }, { type: Document, decorators: [{
type: Inject,
args: [DOCUMENT]
}] }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.ApplicationRef }];
}, propDecorators: { content: [{
type: Input,
args: ['doku-tooltip']
}], color: [{
type: Input,
args: ['tooltipColor']
}], placement: [{
type: Input,
args: ['tooltipPlacement']
}], stayOnHover: [{
type: Input,
args: ['tooltipStayOnHover']
}], disabled: [{
type: Input,
args: ['tooltipDisabled']
}] } });
class DokuTooltipModule {
}
DokuTooltipModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
DokuTooltipModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: DokuTooltipModule, imports: [DokuTooltip], exports: [DokuTooltip] });
DokuTooltipModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuTooltipModule });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuTooltipModule, decorators: [{
type: NgModule,
args: [{
imports: [DokuTooltip],
exports: [DokuTooltip],
}]
}] });
class DokuBackdropRef {
/**
* Close active backdrop.
*/
close() {
// Method will be assigned when backdrop opened.
}
}
class DokuBackdropService {
constructor(rendererFactory, document) {
this.rendererFactory = rendererFactory;
this.document = document;
this.backdrops = [];
this.renderer = this.rendererFactory.createRenderer(null, null);
}
/**
* Open backdrop element.
*/
open() {
const backdropElement = this.createBackdropElement();
this.renderer.appendChild(this.document.body, backdropElement);
const backdropRef = new DokuBackdropRef();
backdropRef.element = backdropElement;
backdropRef.close = () => this.close.bind(this)(backdropRef);
this.backdrops.push(backdropRef);
return backdropRef;
}
/**
* Close backdrop element by ref.
*/
close(backdropRef) {
if (backdropRef.element)
this.document.body.removeChild(backdropRef.element);
this.backdrops = this.backdrops.filter((item) => item !== backdropRef);
}
/**
* Close all backdrops.
*/
closeAll() {
this.backdrops.forEach((ref) => ref.close());
}
createBackdropElement() {
const el = this.renderer.createElement('div');
this.renderer.addClass(el, 'd-backdrop');
return el;
}
}
DokuBackdropService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuBackdropService, deps: [{ token: i0.RendererFactory2 }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
DokuBackdropService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuBackdropService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuBackdropService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}], ctorParameters: function () {
return [{ type: i0.RendererFactory2 }, { type: Document, decorators: [{
type: Inject,
args: [DOCUMENT]
}] }];
} });
class ViewElement {
static createElement(content, props) {
let contentTemplateRef;
let contentComponentRef;
const elementInjector = Injector.create({
providers: [{ provide: DokuActiveModal, useValue: props.activeModal }],
parent: props.injector,
});
if (content instanceof TemplateRef) {
contentTemplateRef = content.createEmbeddedView({ $implicit: props.activeModal }, elementInjector);
props.applicationRef.attachView(contentTemplateRef);
}
else {
contentComponentRef = createComponent(content, {
environmentInjector: props.environmentInjector,
elementInjector,
});
contentComponentRef.location.nativeElement.classList.add('d-modal-content-host');
props.applicationRef.attachView(contentComponentRef.hostView);
}
const modalContentElement = this.createModalContentElement({ document: props.document });
const modalElement = this.createModalElement({ document: props.document });
const portalElement = this.createPortalElement({ document: props.document });
return {
element: { portal: portalElement, modal: modalElement, modalContent: modalContentElement },
content: { componentRef: contentComponentRef, templateRef: contentTemplateRef },
};
}
static createModalElement(props) {
const element = props.document.createElement('div');
element.className = 'd-modal';
return element;
}
static createModalContentElement(props) {
const element = props.document.createElement('div');
element.className = 'd-modal-content';
return element;
}
static createPortalElement(props) {
const element = props.document.createElement('div');
element.className = 'd-modal-portal';
return element;
}
static appendToBody(view, props) {
const backdropRef = props.backdropService.open();
// Append content (from component or template) to modal content
if (view.content.componentRef) {
view.element.modalContent.appendChild(view.content.componentRef.location.nativeElement);
}
if (view.content.templateRef) {
view.element.modalContent.append(...view.content.templateRef.rootNodes);
}
// Append modal content to modal
view.element.modal.appendChild(view.element.modalContent);
// Append modal to portal
view.element.portal.appendChild(view.element.modal);
// Append portal to document body
props.document.body.appendChild(view.element.portal);
return { backdropRef };
}
static removeFromBody(view, props) {
var _a, _b, _c;
(_a = view.content.componentRef) === null || _a === void 0 ? void 0 : _a.destroy();
(_b = view.content.templateRef) === null || _b === void 0 ? void 0 : _b.destroy();
props.document.body.removeChild(view.element.portal);
(_c = props.backdropRef) === null || _c === void 0 ? void 0 : _c.close();
}
}
class DokuModalService {
constructor(envInjector, appRef, document, backdropService, injector, router) {
this.envInjector = envInjector;
this.appRef = appRef;
this.document = document;
this.backdropService = backdropService;
this.injector = injector;
this.router = router;
this.modalRefs = [];
this.destroy$ = new ReplaySubject();
this.router.events
.pipe(filter((ev) => ev instanceof NavigationStart), takeUntil(this.destroy$))
.subscribe(() => this.closeAll());
}
ngOnDestroy() {
this.closeAll();
this.destroy$.next(true);
this.destroy$.complete();
}
open(componentOrTemplateRef, config) {
var _a, _b;
const activeModal = new DokuActiveModal();
const view = ViewElement.createElement(componentOrTemplateRef, {
environmentInjector: this.envInjector,
applicationRef: this.appRef,
document: this.document,
activeModal: activeModal,
injector: this.injector,
});
// Add portal class (if exists) to the portal element
if (config === null || config === void 0 ? void 0 : config.portalClass) {
view.element.portal.classList.add(config.portalClass);
}
const componentInstance = ((_a = view.content.componentRef) === null || _a === void 0 ? void 0 : _a.instance) || ((_b = view.content.templateRef) === null || _b === void 0 ? void 0 : _b.context);
const modalRef = new DokuModalRef(this, componentInstance, view);
const normalizedConfig = this.setViewByConfig(view, config);
activeModal['_config'] = normalizedConfig;
activeModal.close = modalRef.close.bind(modalRef);
setTimeout(() => {
var _a, _b, _c;
const { backdropRef } = ViewElement.appendToBody(view, {
backdropService: this.backdropService,
document: this.document,
});
modalRef['backdropRef'] = backdropRef;
// Add overflow-hidden class to the document body
this.document.body.classList.add('d-body-overflow-hidden');
(_a = view.content.componentRef) === null || _a === void 0 ? void 0 : _a.changeDetectorRef.detectChanges();
(_b = view.content.templateRef) === null || _b === void 0 ? void 0 : _b.detectChanges();
// Remove focus on trigger element
(_c = this.document.activeElement) === null || _c === void 0 ? void 0 : _c.blur();
}, 0);
this.modalRefs.push(modalRef);
return modalRef;
}
closeAll() {
this.modalRefs.forEach((ref) => this.close(ref));
}
close(modalRef) {
if (!modalRef['view'])
return;
ViewElement.removeFromBody(modalRef['view'], {
backdropService: this.backdropService,
document: this.document,
backdropRef: modalRef['backdropRef'],
});
modalRef['view'] = undefined;
this.modalRefs = this.modalRefs.filter((ref) => ref !== modalRef);
// Remove overflow-hidden class from document body if all of the modals have been closed.
if (!this.modalRefs.length) {
this.document.body.classList.remove('d-body-overflow-hidden');
}
}
/**
* @returns Normalized DokuModalConfig
*/
setViewByConfig(view, config) {
var _a, _b;
const normalizedConfig = Object.assign({}, config);
if ((config === null || config === void 0 ? void 0 : config.centered) === undefined || config.centered === null) {
normalizedConfig.centered = true;
}
if (!(config === null || config === void 0 ? void 0 : config.variant))
normalizedConfig.variant = 'info';
if (!(config === null || config === void 0 ? void 0 : config.size))
normalizedConfig.size = 'medium';
if (normalizedConfig.variant) {
view.element.modal.classList.add(`d-modal-variant-${normalizedConfig.variant}`);
if (normalizedConfig.variant === 'form') {
view.element.modal.classList.add('d-modal-scrollable-content');
}
if (normalizedConfig.variant === 'confirmation') {
normalizedConfig.confirmationOptions = Object.assign({}, normalizedConfig.confirmationOptions);
// Set default size if not set explicitly.
if (!(config === null || config === void 0 ? void 0 : config.size))
normalizedConfig.size = 'small';
// Set default icon type if not set explicitly.
if (!((_a = config === null || config === void 0 ? void 0 : config.confirmationOptions) === null || _a === void 0 ? void 0 : _a.iconType)) {
normalizedConfig.confirmationOptions.iconType = 'warning';
}
// Set default show icon if not set explicitly.
if (!((_b = config === null || config === void 0 ? void 0 : config.confirmationOptions) === null || _b === void 0 ? void 0 : _b.showIcon)) {
normalizedConfig.confirmationOptions.showIcon = true;
}
}
}
if (normalizedConfig.centered) {
view.element.modal.classList.add('d-modal-centered');
}
if (normalizedConfig.size) {
view.element.modal.classList.add(`d-modal-${normalizedConfig.size}`);
}
return normalizedConfig;
}
}
DokuModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuModalService, deps: [{ token: i0.EnvironmentInjector }, { token: i0.ApplicationRef }, { token: DOCUMENT }, { token: DokuBackdropService }, { token: i0.Injector }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Injectable });
DokuModalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuModalService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuModalService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}], ctorParameters: function () {
return [{ type: i0.EnvironmentInjector }, { type: i0.ApplicationRef }, { type: Document, decorators: [{
type: Inject,
args: [DOCUMENT]
}] }, { type: DokuBackdropService }, { type: i0.Injector }, { type: i2.Router }];
} });
class DokuPageLoadingService {
constructor(document, backdropService, environmentInjector, appRef, ngZone) {
this.document = document;
this.backdropService = backdropService;
this.environmentInjector = environmentInjector;
this.appRef = appRef;
this.ngZone = ngZone;
this.mobileScreen = window.matchMedia(DokuBreakpoint.mobile);
this.currentSpinnerSize = this.mobileScreen.matches ? 'small' : 'medium';
}
get isOpen() {
return !!this.pageLoadingElement;
}
ngOnDestroy() {
this.hide();
}
show() {
if (this.isOpen)
return;
this.backdropRef = this.backdropService.open();
this.appendPageLoadingElementToBody();
}
hide() {
var _a;
if (!this.isOpen)
return;
(_a = this.backdropRef) === null || _a === void 0 ? void 0 : _a.close();
this.removePageLoadingElement();
}
createPageLoadingElement() {
const el = this.document.createElement('div');
el.classList.add('d-page-loading');
this.spinnerComponentRef = createComponent(DokuSpinner, {
environmentInjector: this.environmentInjector,
});
this.spinnerComponentRef.setInput('size', this.currentSpinnerSize);
this.appRef.attachView(this.spinnerComponentRef.hostView);
// Listener to change spinner size based on the breakpoint.
this.resizeListener = () => {
var _a;
const newSpinnerSize = this.mobileScreen.matches ? 'small' : 'medium';
if (this.currentSpinnerSize === newSpinnerSize)
return;
(_a = this.spinnerComponentRef) === null || _a === void 0 ? void 0 : _a.setInput('size', newSpinnerSize);
this.currentSpinnerSize = newSpinnerSize;
};
this.ngZone.runOutsideAngular(() => {
if (!this.resizeListener)
return;
window.addEventListener('resize', this.resizeListener);
});
el.appendChild(this.spinnerComponentRef.location.nativeElement);
return el;
}
appendPageLoadingElementToBody() {
this.pageLoadingElement = this.createPageLoadingElement();
this.document.body.appendChild(this.pageLoadingElement);
}
removePageLoadingElement() {
var _a;
if (!this.pageLoadingElement)
return;
this.document.body.removeChild(this.pageLoadingElement);
this.pageLoadingElement = undefined;
(_a = this.spinnerComponentRef) === null || _a === void 0 ? void 0 : _a.destroy();
if (this.resizeListener) {
window.removeEventListener('resize', this.resizeListener);
}
}
}
DokuPageLoadingService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuPageLoadingService, deps: [{ token: DOCUMENT }, { token: DokuBackdropService }, { token: i0.EnvironmentInjector }, { token: i0.ApplicationRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
DokuPageLoadingService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuPageLoadingService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuPageLoadingService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}], ctorParameters: function () {
return [{ type: Document, decorators: [{
type: Inject,
args: [DOCUMENT]
}] }, { type: DokuBackdropService }, { type: i0.EnvironmentInjector }, { type: i0.ApplicationRef }, { type: i0.NgZone }];
} });
class DokuPopoverBody {
constructor() {
this.classes = ['d-popover-body'];
}
}
DokuPopoverBody.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuPopoverBody, deps: [], target: i0.ɵɵFactoryTarget.Component });
DokuPopoverBody.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuPopoverBody, isStandalone: true, selector: "doku-popover-body", host: { properties: { "class": "this.classes" } }, exportAs: ["dokuPopoverBody"], ngImport: i0, template: "<ng-content></ng-content>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuPopoverBody, decorators: [{
type: Component,
args: [{ selector: 'doku-popover-body', exportAs: 'dokuPopoverBody', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n" }]
}], propDecorators: { classes: [{
type: HostBinding,
args: ['class']
}] } });
class DokuPopoverFooter {
constructor() {
this.classes = ['d-popover-footer'];
}
}
DokuPopoverFooter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuPopoverFooter, deps: [], target: i0.ɵɵFactoryTarget.Component });
DokuPopoverFooter.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuPopoverFooter, isStandalone: true, selector: "doku-popover-footer", host: { properties: { "class": "this.classes" } }, exportAs: ["dokuPopoverFooter"], ngImport: i0, template: "<ng-content></ng-content>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuPopoverFooter, decorators: [{
type: Component,
args: [{ selector: 'doku-popover-footer', exportAs: 'dokuPopoverFooter', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n" }]
}], propDecorators: { classes: [{
type: HostBinding,
args: ['class']
}] } });
class DokuPopoverTitle {
constructor() {
this.classes = ['d-popover-title'];
}
}
DokuPopoverTitle.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuPopoverTitle, deps: [], target: i0.ɵɵFactoryTarget.Component });
DokuPopoverTitle.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuPopoverTitle, isStandalone: true, selector: "doku-popover-title", host: { properties: { "class": "this.classes" } }, exportAs: ["dokuPopoverTitle"], ngImport: i0, template: "<ng-content></ng-content>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuPopoverTitle, decorators: [{
type: Component,
args: [{ selector: 'doku-popover-title', exportAs: 'dokuPopoverTitle', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n" }]
}], propDecorators: { classes: [{
type: HostBinding,
args: ['class']
}] } });
let nextId = 1;
class DokuPopover {
constructor(document, renderer, ngZone, elementRef, appRef) {
this.document = document;
this.renderer = renderer;
this.ngZone = ngZone;
this.elementRef = elementRef;
this.appRef = appRef;
this.id = `d-popover-uniqueId-${nextId++}`;
/**
* Content of the popover.
* It can be a string or a template for more customization.
*
* @default ''
*/
this.content = '';
/**
* The color of the popover.
* Either `dark` or `light`.
* @default 'dark'
*/
this.color = 'dark';
/**
* The placement of the popover.
* @default 'top'
*/
this.placement = 'top';
/**
* Actions that will close the popover.
*
* - `manual`, only manual action that will close the popover like using `hide` method.
* - `clickOutside`, close the popover when clicking outside its element.
*
* The top list has higher priority.
*/
this.closeBy = ['clickOutside'];
/**
* Whether to disable the popover.
* Disabled popover can't be opened.
* @default false
*/
this.disabled = false;
this.isShown = false;
this.destroy$ = new ReplaySubject();
}
get classes() {
return ['d-popover', 'd-text-body-s', `d-popover-${this.color}`];
}
ngOnInit() {
this.handleOnClick();
this.popoverElement = this.createPopoverElement();
}
ngOnDestroy() {
this.destroy$.next(1);
this.destroy$.complete();
this.hide();
this.popoverElement = undefined;
this.popoverContentElement = undefined;
this.popoverArrowElement = undefined;
}
/**
* Show popover programmatically.
*/
show() {
if (this.disabled)
return;
if (this.isShown || !this.popoverElement)
return;
this.isShown = true;
this.setPopoverContent(this.content);
this.renderer.appendChild(this.document.body, this.popoverElement);
this.doAutoUpdatePosition();
}
/**
* Hide popover programmatically.
*/
hide() {
var _a, _b;
if (!this.isShown || !this.popoverElement)
return;
this.isShown = false;
this.popoverElement.remove();
(_a = this.cleanup) === null || _a === void 0 ? void 0 : _a.call(this);
(_b = this.viewRef) === null || _b === void 0 ? void 0 : _b.destroy();
}
/**
* Toggle popover programmatically.
*/
toggle() {
this.isShown ? this.hide() : this.show();
}
/**
* Update the content of the popover with new one.
*/
updateContent(content) {
this.setPopoverContent(content);
}
createPopoverElement() {
const element = this.renderer.createElement('div');
element.className = this.classes.join(' ');
this.popoverContentElement = this.createPopoverContentElement();
element.appendChild(this.popoverContentElement);
this.popoverArrowElement = this.createArrowElement();
element.appendChild(this.popoverArrowElement);
return element;
}
createPopoverContentElement() {
return this.renderer.createElement('div');
}
createArrowElement() {
const element = this.renderer.createElement('div');
element.className = 'd-popover-arrow';
return element;
}
setPopoverContent(content) {
var _a;
if (!this.popoverContentElement)
return;
this.popoverContentElement.replaceChildren();
if (content instanceof TemplateRef) {
(_a = this.viewRef) === null || _a === void 0 ? void 0 : _a.destroy();
this.viewRef = content.createEmbeddedView({ hide: this.hide.bind(this) });
this.appRef.attachView(this.viewRef);
this.viewRef.rootNodes.forEach((node) => {
this.renderer.appendChild(this.popoverContentElement, node);
});
this.viewRef.detectChanges();
}
if (typeof content === 'string') {
this.renderer.appendChild(this.popoverContentElement, this.renderer.createText(content));
}
}
updatePosition() {
if (!this.elementRef.nativeElement || !this.popoverElement || !this.popoverArrowElement)
return;
computePosition(this.elementRef.nativeElement, this.popoverElement, {
placement: this.placement,
middleware: [
offset(6),
flip(),
shift({ padding: 8 }),
arrow({ element: this.popoverArrowElement }),
],
}).then(({ x, y, placement, middlewareData }) => {
if (!this.popoverElement)
return;
Object.assign(this.popoverElement.style, { top: `${y}px`, left: `${x}px` });
// Positioning the arrow element
if (middlewareData.arrow && this.popoverArrowElement) {
const { x: arrowX, y: arrowY } = middlewareData.arrow;
const staticSide = {
top: 'bottom',
right: 'left',
bottom: 'top',
left: 'right',
}[placement.split('-')[0]];
Object.assign(this.popoverArrowElement.style, {
left: arrowX != null || arrowX != undefined ? `${arrowX}px` : '',
top: arrowY != null || arrowY != undefined ? `${arrowY}px` : '',
right: '',
bottom: '',
[staticSide]: '-4px',
});
}
});
}
doAutoUpdatePosition() {
this.ngZone.runOutsideAngular(() => {
if (!this.elementRef.nativeElement || !this.popoverElement)
return;
this.cleanup = autoUpdate(this.elementRef.nativeElement, this.popoverElement, () => {
this.updatePosition();
});
});
}
handleOnClick() {
this.ngZone.runOutsideAngular(() => {
fromEvent(this.document, 'click')
.pipe(takeUntil(this.destroy$))
.subscribe((event) => {
var _a;
const target = event.target;
const toggler = this.elementRef.nativeElement;
const togglerClick = toggler.contains(target);
const popoverClick = (_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.contains(target);
const outsidePopoverClick = !popoverClick;
if (this.isShown) {
// Don't hide the popover, supposed to use method `hide`.
if (this.closeBy.includes('manual'))
return;
// Close popover on toggler click if it has been opened
if (togglerClick)
return this.hide();
// Close popover on click outside its element.
if (outsidePopoverClick)
return this.hide();
}
if (!this.isShown) {
// Open popover on toggler click
if (togglerClick)
return this.show();
}
});
});
}
}
DokuPopover.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuPopover, deps: [{ token: DOCUMENT }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Directive });
DokuPopover.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: DokuPopover, isStandalone: true, selector: "[doku-popover]", inputs: { content: ["doku-popover", "content"], color: ["popoverColor", "color"], placement: ["popoverPlacement", "placement"], closeBy: ["popoverCloseBy", "closeBy"], disabled: ["popoverDisabled", "disabled"] }, exportAs: ["dokuPopover"], ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuPopover, decorators: [{
type: Directive,
args: [{
selector: '[doku-popover]',
exportAs: 'dokuPopover',
standalone: true,
}]
}], ctorParameters: function () {
return [{ type: Document, decorators: [{
type: Inject,
args: [DOCUMENT]
}] }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.ApplicationRef }];
}, propDecorators: { content: [{
type: Input,
args: ['doku-popover']
}], color: [{
type: Input,
args: ['popoverColor']
}], placement: [{
type: Input,
args: ['popoverPlacement']
}], closeBy: [{
type: Input,
args: ['popoverCloseBy']
}], disabled: [{
type: Input,
args: ['popoverDisabled']
}] } });
class DokuPopoverModule {
}
DokuPopoverModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
DokuPopoverModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: DokuPopoverModule, imports: [DokuPopover, DokuPopoverTitle, DokuPopoverBody, DokuPopoverFooter], exports: [DokuPopover, DokuPopoverTitle, DokuPopoverBody, DokuPopoverFooter] });
DokuPopoverModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuPopoverModule, imports: [DokuPopoverTitle, DokuPopoverBody, DokuPopoverFooter] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuPopoverModule, decorators: [{
type: NgModule,
args: [{
imports: [DokuPopover, DokuPopoverTitle, DokuPopoverBody, DokuPopoverFooter],
exports: [DokuPopover, DokuPopoverTitle, DokuPopoverBody, DokuPopoverFooter],
}]
}] });
/**
* Duration of the toast before automatically dismissed.
*
* Value in milliseconds.
*/
const TOAST_DURATION = 3000;
/**
* Class name of the container element that wrap the toast elements.
*/
const TOAST_CONTAINER_CLASS = 'd-toast-container';
class DokuActiveToast {
/**
* Dismiss active toast.
*/
dismiss() {
// Business logic will be filled on service
}
}
class DokuToastRef {
constructor(componentRef, toastElementService, toastData) {
this.componentRef = componentRef;
this.toastElementService = toastElementService;
this.toastData = toastData;
/**
* Instance of the {@link DokuToast} component.
*/
this.instance = this.componentRef.instance;
/**
* Used to clear setTimeout for auto dismiss when it get dismissed before auto dismiss invoked.
*/
this.timeoutId = undefined;
this.result = new Promise((resolve) => {
this._resolve = resolve;
});
}
/**
* Dismiss current toast.
*/
dismiss() {
this.componentRef.destroy();
this.componentRef.changeDetectorRef.detectChanges();
this.toastElementService.removeContainerElement();
this._resolve(null);
clearTimeout(this.timeoutId);
}
startAutoDismiss() {
var _a;
if (this.toastData.autoDismiss === false)
return;
const duration = (_a = this.toastData.duration) !== null && _a !== void 0 ? _a : TOAST_DURATION;
this.timeoutId = setTimeout(() => this.dismiss(), duration);
}
}
class DokuToast extends DokuAlert {
constructor() {
super(...arguments);
this.activeToast = inject(DokuActiveToast);
}
get classes() {
return [super.classes, 'd-toast'];
}
dismiss() {
this.activeToast.dismiss();
}
}
DokuToast.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuToast, deps: null, target: i0.ɵɵFactoryTarget.Component });
DokuToast.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuToast, isStandalone: true, selector: "doku-toast", exportAs: ["dokuToast"], usesInheritance: true, ngImport: i0, template: "<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", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuToast, decorators: [{
type: Component,
args: [{ selector: 'doku-toast', exportAs: 'dokuToast', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<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" }]
}] });
class DokuToastElementService {
constructor(envInjector, appRef, document) {
this.envInjector = envInjector;
this.appRef = appRef;
this.document = document;
this.toastRefs = [];
}
openToast(data) {
const activeToast = new DokuActiveToast();
const toastComponentRef = this.createToastComponent(activeToast, data);
const toastRef = new DokuToastRef(toastComponentRef, this, data);
activeToast.dismiss = () => {
toastRef.dismiss();
};
this.registerToastRef(toastRef);
toastComponentRef.changeDetectorRef.detach();
toastComponentRef.changeDetectorRef.detectChanges();
toastComponentRef.changeDetectorRef.markForCheck();
this.attachToastContainer();
this.attachToastInContainer(toastComponentRef);
toastRef['startAutoDismiss']();
return toastRef;
}
dismissAll() {
this.toastRefs.forEach((toast) => toast.dismiss());
}
removeContainerElement() {
const container = this.getToastContainerElement();
if (!container)
return;
const hasChild = container.hasChildNodes();
if (hasChild)
return;
container.remove();
}
createToastComponent(activeToast, data) {
const elementInjector = Injector.create({
providers: [{ provide: DokuActiveToast, useValue: activeToast }],
});
let projectableNodes;
if (data.text) {
projectableNodes = [[this.document.createTextNode(data.text)]];
}
if (data.template) {
const context = { $implicit: activeToast };
const viewRef = data.template.createEmbeddedView(context);
this.appRef.attachView(viewRef);
projectableNodes = [viewRef.rootNodes];
}
const component = createComponent(DokuToast, {
environmentInjector: this.envInjector,
elementInjector,
projectableNodes,
});
component.instance.state = data.state || 'neutral';
component.instance.dismissible = !!data.dismissible;
this.appRef.attachView(component.hostView);
return component;
}
attachToastContainer() {
const containerExists = !!this.getToastContainerElement();
if (!containerExists) {
const el = this.createToastContainerElement();
this.document.body.appendChild(el);
}
}
attachToastInContainer(toastComponent) {
const containerEl = this.getToastContainerElement();
if (containerEl) {
containerEl.appendChild(toastComponent.location.nativeElement);
}
}
createToastContainerElement() {
const divEl = this.document.createElement('div');
divEl.classList.add(TOAST_CONTAINER_CLASS);
return divEl;
}
getToastContainerElement() {
return this.document.body.querySelector(`div.${TOAST_CONTAINER_CLASS}`);
}
registerToastRef(ref) {
const unregister = () => {
const index = this.toastRefs.indexOf(ref);
if (index > -1) {
this.toastRefs.splice(index, 1);
}
};
this.toastRefs.push(ref);
ref['result'].then(unregister);
}
}
DokuToastElementService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuToastElementService, deps: [{ token: i0.EnvironmentInjector }, { token: i0.ApplicationRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
DokuToastElementService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuToastElementService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuToastElementService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}], ctorParameters: function () {
return [{ type: i0.EnvironmentInjector }, { type: i0.ApplicationRef }, { type: Document, decorators: [{
type: Inject,
args: [DOCUMENT]
}] }];
} });
class DokuToastService {
constructor(toastElementService) {
this.toastElementService = toastElementService;
}
/**
* Open toast from a text or template ref.
*
* @example
* From text:
* ```ts
* this.dokuToastService.open('Hello World!');
* ```
*
* @example
* From template ref:
* ```html
* <ng-template #customTemplate>Hello World!<ng-template>
* ```
*
* ```ts
* @ViewChild('customTemplate') private template: TemplateRef<unknown>;
*
* showToast() {
* this.dokuToastService.open(this.template);
* }
* ```
*/
open(content, options) {
if (content instanceof TemplateRef) {
const toast = Object.assign({ template: content }, options);
return this.toastElementService.openToast(toast);
}
const toast = Object.assign({ text: content }, options);
return this.toastElementService.openToast(toast);
}
/**
* Dismiss all the toasts immediately.
*/
dismissAll() {
this.toastElementService.dismissAll();
}
}
DokuToastService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuToastService, deps: [{ token: DokuToastElementService }], target: i0.ɵɵFactoryTarget.Injectable });
DokuToastService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuToastService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuToastService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}], ctorParameters: function () { return [{ type: DokuToastElementService }]; } });
const DOKU_FRAGMENT_MODULES = [
DokuAccordionModule,
DokuAlertModule,
DokuAnchorLinkModule,
DokuBadgeModule,
DokuButtonModule,
DokuDropdownModule,
DokuFormFieldModule,
DokuInputModule,
DokuInputFileUploadModule,
DokuLayoutModule,
DokuPaginationModule,
DokuPillModule,
DokuSelectModule,
DokuShimmerModule,
DokuSpinnerModule,
DokuTableModule,
DokuTooltipModule,
DokuTypographyModule,
DokuCardModule,
DokuModalModule,
DokuCheckboxModule,
DokuToggleModule,
DokuTabsModule,
DokuRadioModule,
DokuRadioAppearanceModule,
DokuTimePickerModule,
DokuDatePickerModule,
DokuTimelineModule,
DokuDateTimePickerModule,
DokuProgressBarModule,
DokuColorPickerModule,
DokuBreadcrumbModule,
];
class DokuFragmentModule {
}
DokuFragmentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuFragmentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
DokuFragmentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: DokuFragmentModule, imports: [DokuAccordionModule,
DokuAlertModule,
DokuAnchorLinkModule,
DokuBadgeModule,
DokuButtonModule,
DokuDropdownModule,
DokuFormFieldModule,
DokuInputModule,
DokuInputFileUploadModule,
DokuLayoutModule,
DokuPaginationModule,
DokuPillModule,
DokuSelectModule,
DokuShimmerModule,
DokuSpinnerModule,
DokuTableModule,
DokuTooltipModule,
DokuTypographyModule,
DokuCardModule,
DokuModalModule,
DokuCheckboxModule,
DokuToggleModule,
DokuTabsModule,
DokuRadioModule,
DokuRadioAppearanceModule,
DokuTimePickerModule,
DokuDatePickerModule,
DokuTimelineModule,
DokuDateTimePickerModule,
DokuProgressBarModule,
DokuColorPickerModule,
DokuBreadcrumbModule], exports: [DokuAccordionModule,
DokuAlertModule,
DokuAnchorLinkModule,
DokuBadgeModule,
DokuButtonModule,
DokuDropdownModule,
DokuFormFieldModule,
DokuInputModule,
DokuInputFileUploadModule,
DokuLayoutModule,
DokuPaginationModule,
DokuPillModule,
DokuSelectModule,
DokuShimmerModule,
DokuSpinnerModule,
DokuTableModule,
DokuTooltipModule,
DokuTypographyModule,
DokuCardModule,
DokuModalModule,
DokuCheckboxModule,
DokuToggleModule,
DokuTabsModule,
DokuRadioModule,
DokuRadioAppearanceModule,
DokuTimePickerModule,
DokuDatePickerModule,
DokuTimelineModule,
DokuDateTimePickerModule,
DokuProgressBarModule,
DokuColorPickerModule,
DokuBreadcrumbModule] });
DokuFragmentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuFragmentModule, imports: [DOKU_FRAGMENT_MODULES, DokuAccordionModule,
DokuAlertModule,
DokuAnchorLinkModule,
DokuBadgeModule,
DokuButtonModule,
DokuDropdownModule,
DokuFormFieldModule,
DokuInputModule,
DokuInputFileUploadModule,
DokuLayoutModule,
DokuPaginationModule,
DokuPillModule,
DokuSelectModule,
DokuShimmerModule,
DokuSpinnerModule,
DokuTableModule,
DokuTooltipModule,
DokuTypographyModule,
DokuCardModule,
DokuModalModule,
DokuCheckboxModule,
DokuToggleModule,
DokuTabsModule,
DokuRadioModule,
DokuRadioAppearanceModule,
DokuTimePickerModule,
DokuDatePickerModule,
DokuTimelineModule,
DokuDateTimePickerModule,
DokuProgressBarModule,
DokuColorPickerModule,
DokuBreadcrumbModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuFragmentModule, decorators: [{
type: NgModule,
args: [{
imports: DOKU_FRAGMENT_MODULES,
exports: DOKU_FRAGMENT_MODULES,
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { DOKU_DROPDOWN, DOKU_DROPDOWN_MENU, DOKU_DROPDOWN_TOGGLE, DOKU_FORM_FIELD_ACCESSOR, DOKU_PILL_GROUP, DokuAccordion, DokuAccordionBody, DokuAccordionHeader, DokuAccordionItem, DokuAccordionModule, DokuAccordionTitle, DokuActiveModal, DokuActiveToast, DokuAlert, DokuAlertModule, DokuAnchorLink, DokuAnchorLinkModule, DokuBackdropRef, DokuBackdropService, DokuBadge, DokuBadgeModule, DokuBreadcrumb, DokuBreadcrumbModule, DokuBreakpoint, DokuButton, DokuButtonModule, DokuCard, DokuCardBody, DokuCardCover, DokuCardFooter, DokuCardHeader, DokuCardModule, DokuCardSection, DokuCardSubtitle, DokuCardTitle, DokuCheckbox, DokuCheckboxModule, DokuCheckboxSubLabel, DokuColorPicker, DokuColorPickerModule, DokuDatePicker, DokuDatePickerInline, DokuDatePickerModule, DokuDateRangePicker, DokuDateRangePickerInline, DokuDateRangePickerInput, DokuDateTimePicker, DokuDateTimePickerInline, DokuDateTimePickerModule, DokuDropdown, DokuDropdownMenu, DokuDropdownMenuDivider, DokuDropdownMenuItem, DokuDropdownModule, DokuDropdownToggle, DokuEndDate, DokuFieldError, DokuFieldHint, DokuFieldLabel, DokuFieldPrefix, DokuFieldSuccess, DokuFieldSuffix, DokuFormField, DokuFormFieldModule, DokuFragmentModule, DokuInput, DokuInputFileUpload, DokuInputFileUploadModule, DokuInputModule, DokuLayoutContent, DokuLayoutContentModule, DokuLayoutModule, DokuModalBody, DokuModalCloseIcon, DokuModalFooter, DokuModalFooterSpacer, DokuModalHeader, DokuModalModule, DokuModalRef, DokuModalService, DokuPageDescription, DokuPageHeader, DokuPageLoadingService, DokuPageTitle, DokuPagination, DokuPaginationContainer, DokuPaginationInfo, DokuPaginationModule, DokuPaginationPerPage, DokuPill, DokuPillButton, DokuPillGroup, DokuPillModule, DokuPopover, DokuPopoverBody, DokuPopoverFooter, DokuPopoverModule, DokuPopoverTitle, DokuProgressBar, DokuProgressBarModule, DokuRadio, DokuRadioAppearanceCard, DokuRadioAppearanceModule, DokuRadioCustomAppearance, DokuRadioGroup, DokuRadioIndicator, DokuRadioModule, DokuSelect, DokuSelectLabelTemplate, DokuSelectLoadingTemplate, DokuSelectModule, DokuSelectNoItemTemplate, DokuSelectOptionTemplate, DokuShimmer, DokuShimmerModule, DokuSpinner, DokuSpinnerModule, DokuStartDate, DokuStickyColumnPosition, DokuTab, DokuTabContent, DokuTabLabel, DokuTable, DokuTableModule, DokuTableSortable, DokuTableStickyColumn, DokuTabs, DokuTabsModule, DokuTimePicker, DokuTimePickerModule, DokuTimeline, DokuTimelineDateTime, DokuTimelineDescription, DokuTimelineItem, DokuTimelineModule, DokuTimelineTitle, DokuToastRef, DokuToastService, DokuToggle, DokuToggleDescription, DokuToggleModule, DokuTooltip, DokuTooltipModule, DokuTypography, DokuTypographyModule };
//# sourceMappingURL=doku-fragment.mjs.map