@odx/angular 6.0.0 → 6.0.1

package/fesm2022/odx-angular-components-button-group.mjs

@@ -4,12 +4,27 @@ import { booleanAttribute, Component, ViewEncapsulation, ChangeDetectionStrategy
 import { CSSModifier, CSSComponent } from '@odx/angular/internal';
 import { injectElement } from '@odx/angular/utils';
 
+/**
+ * Represents a button group component.
+ */
 let ButtonGroupComponent = class ButtonGroupComponent {
     constructor() {
         this.element = injectElement();
+        /**
+         * Specifies whether the buttons in the button group should be aligned to the right.
+         */
         this.alignRight = false;
+        /**
+         * Specifies whether the button group should be displayed as a block element.
+         */
         this.block = false;
+        /**
+         * Specifies whether the buttons should be displayed vertically.
+         */
         this.vertical = false;
+        /**
+         * Indicates whether the button group should be displayed in reverse order.
+         */
         this.reverse = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }

package/fesm2022/odx-angular-components-button-group.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"odx-angular-components-button-group.mjs","sources":["../../../../libs/angular/components/button-group/src/lib/button-group.component.ts","../../../../libs/angular/components/button-group/src/lib/button-group.component.html","../../../../libs/angular/components/button-group/src/odx-angular-components-button-group.ts"],"sourcesContent":["import { booleanAttribute, ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';\nimport { CSSComponent, CSSModifier } from '@odx/angular/internal';\nimport { injectElement } from '@odx/angular/utils';\n\n@CSSComponent('button-group')\n@Component({\n  standalone: true,\n  selector: 'odx-button-group',\n  templateUrl: './button-group.component.html',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ButtonGroupComponent {\n  public readonly element = injectElement();\n\n  @CSSModifier()\n  @Input({ transform: booleanAttribute })\n  public alignRight = false;\n\n  @CSSModifier()\n  @Input({ transform: booleanAttribute })\n  public block = false;\n\n  @CSSModifier()\n  @Input({ transform: booleanAttribute })\n  public vertical = false;\n\n  @CSSModifier()\n  @Input({ transform: booleanAttribute })\n  public reverse = false;\n}\n","<ng-content select=\"button[odxButton], a[odxButton]\"></ng-content>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;AAYa,IAAA,oBAAoB,GAA1B,MAAM,oBAAoB,CAAA;AAA1B,IAAA,WAAA,GAAA;QACW,IAAO,CAAA,OAAA,GAAG,aAAa,EAAE,CAAC;QAInC,IAAU,CAAA,UAAA,GAAG,KAAK,CAAC;QAInB,IAAK,CAAA,KAAA,GAAG,KAAK,CAAC;QAId,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;QAIjB,IAAO,CAAA,OAAA,GAAG,KAAK,CAAC;AACxB,KAAA;+GAlBY,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;mGAApB,oBAAoB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,EAAA,UAAA,EAAA,CAAA,YAAA,EAAA,YAAA,EAIX,gBAAgB,CAIhB,EAAA,KAAA,EAAA,CAAA,OAAA,EAAA,OAAA,EAAA,gBAAgB,sCAIhB,gBAAgB,CAAA,EAAA,OAAA,EAAA,CAAA,SAAA,EAAA,SAAA,EAIhB,gBAAgB,CAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC5BtC,wEACA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA,EAAA;;ADgBS,UAAA,CAAA;AAFN,IAAA,WAAW,EAAE;;AAEY,CAAA,EAAA,oBAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAInB,UAAA,CAAA;AAFN,IAAA,WAAW,EAAE;;AAEO,CAAA,EAAA,oBAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAId,UAAA,CAAA;AAFN,IAAA,WAAW,EAAE;;AAEU,CAAA,EAAA,oBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIjB,UAAA,CAAA;AAFN,IAAA,WAAW,EAAE;;AAES,CAAA,EAAA,oBAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAjBZ,oBAAoB,GAAA,UAAA,CAAA;IARhC,YAAY,CAAC,cAAc,CAAC;AAQhB,CAAA,EAAA,oBAAoB,CAkBhC,CAAA;4FAlBY,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAPhC,SAAS;iCACI,IAAI,EAAA,QAAA,EACN,kBAAkB,EAEb,aAAA,EAAA,iBAAiB,CAAC,IAAI,EAAA,eAAA,EACpB,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,wEAAA,EAAA,CAAA;8BAOxC,UAAU,EAAA,CAAA;sBADhB,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAA;gBAK/B,KAAK,EAAA,CAAA;sBADX,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAA;gBAK/B,QAAQ,EAAA,CAAA;sBADd,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAA;gBAK/B,OAAO,EAAA,CAAA;sBADb,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAA;;;AE5BxC;;AAEG;;;;"}
+{"version":3,"file":"odx-angular-components-button-group.mjs","sources":["../../../../libs/angular/components/button-group/src/lib/button-group.component.ts","../../../../libs/angular/components/button-group/src/lib/button-group.component.html","../../../../libs/angular/components/button-group/src/odx-angular-components-button-group.ts"],"sourcesContent":["import { booleanAttribute, ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';\nimport { CSSComponent, CSSModifier } from '@odx/angular/internal';\nimport { injectElement } from '@odx/angular/utils';\n\n/**\n * Represents a button group component.\n */\n@CSSComponent('button-group')\n@Component({\n  standalone: true,\n  selector: 'odx-button-group',\n  templateUrl: './button-group.component.html',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ButtonGroupComponent {\n  public readonly element = injectElement();\n\n  /**\n   * Specifies whether the buttons in the button group should be aligned to the right.\n   */\n  @CSSModifier()\n  @Input({ transform: booleanAttribute })\n  public alignRight = false;\n\n  /**\n   * Specifies whether the button group should be displayed as a block element.\n   */\n  @CSSModifier()\n  @Input({ transform: booleanAttribute })\n  public block = false;\n\n  /**\n   * Specifies whether the buttons should be displayed vertically.\n   */\n  @CSSModifier()\n  @Input({ transform: booleanAttribute })\n  public vertical = false;\n\n  /**\n   * Indicates whether the button group should be displayed in reverse order.\n   */\n  @CSSModifier()\n  @Input({ transform: booleanAttribute })\n  public reverse = false;\n}\n","<ng-content select=\"button[odxButton], a[odxButton]\"></ng-content>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;AAIA;;AAEG;AASU,IAAA,oBAAoB,GAA1B,MAAM,oBAAoB,CAAA;AAA1B,IAAA,WAAA,GAAA;QACW,IAAO,CAAA,OAAA,GAAG,aAAa,EAAE,CAAC;AAE1C;;AAEG;QAGI,IAAU,CAAA,UAAA,GAAG,KAAK,CAAC;AAE1B;;AAEG;QAGI,IAAK,CAAA,KAAA,GAAG,KAAK,CAAC;AAErB;;AAEG;QAGI,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;AAExB;;AAEG;QAGI,IAAO,CAAA,OAAA,GAAG,KAAK,CAAC;AACxB,KAAA;+GA9BY,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;mGAApB,oBAAoB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,EAAA,UAAA,EAAA,CAAA,YAAA,EAAA,YAAA,EAOX,gBAAgB,CAOhB,EAAA,KAAA,EAAA,CAAA,OAAA,EAAA,OAAA,EAAA,gBAAgB,sCAOhB,gBAAgB,CAAA,EAAA,OAAA,EAAA,CAAA,SAAA,EAAA,SAAA,EAOhB,gBAAgB,CAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC3CtC,wEACA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA,EAAA;;ADsBS,UAAA,CAAA;AAFN,IAAA,WAAW,EAAE;;AAEY,CAAA,EAAA,oBAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAOnB,UAAA,CAAA;AAFN,IAAA,WAAW,EAAE;;AAEO,CAAA,EAAA,oBAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAOd,UAAA,CAAA;AAFN,IAAA,WAAW,EAAE;;AAEU,CAAA,EAAA,oBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAOjB,UAAA,CAAA;AAFN,IAAA,WAAW,EAAE;;AAES,CAAA,EAAA,oBAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AA7BZ,oBAAoB,GAAA,UAAA,CAAA;IARhC,YAAY,CAAC,cAAc,CAAC;AAQhB,CAAA,EAAA,oBAAoB,CA8BhC,CAAA;4FA9BY,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAPhC,SAAS;iCACI,IAAI,EAAA,QAAA,EACN,kBAAkB,EAEb,aAAA,EAAA,iBAAiB,CAAC,IAAI,EAAA,eAAA,EACpB,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,wEAAA,EAAA,CAAA;8BAUxC,UAAU,EAAA,CAAA;sBADhB,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAA;gBAQ/B,KAAK,EAAA,CAAA;sBADX,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAA;gBAQ/B,QAAQ,EAAA,CAAA;sBADd,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAA;gBAQ/B,OAAO,EAAA,CAAA;sBADb,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAA;;;AE3CxC;;AAEG;;;;"}

package/fesm2022/odx-angular-components-button.mjs

@@ -23,10 +23,20 @@ const ButtonVariant = {
     WARNING: 'warning',
 };
 
+/**
+ * ButtonComponent is a customizable button element that supports various sizes and styles.
+ * It uses the `WithDisabledState` host directive to provide disabled state management.
+ *
+ * @see {WithDisabledState}
+ */
 let ButtonComponent = class ButtonComponent {
     constructor() {
         this.element = injectElement();
         this.type = this.element.nativeElement.getAttribute('type');
+        /**
+         * The variant of the button.
+         * @see {ButtonVariant}
+         */
         this.variant = ButtonVariant.SECONDARY;
         this.size = ButtonSize.MEDIUM;
     }

package/fesm2022/odx-angular-components-button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"odx-angular-components-button.mjs","sources":["../../../../libs/angular/components/button/src/lib/models/button-size.ts","../../../../libs/angular/components/button/src/lib/models/button-variant.ts","../../../../libs/angular/components/button/src/lib/button.component.ts","../../../../libs/angular/components/button/src/lib/button.component.html","../../../../libs/angular/components/button/src/lib/directives/responsive-button.directive.ts","../../../../libs/angular/components/button/src/odx-angular-components-button.ts"],"sourcesContent":["export type ButtonSize = (typeof ButtonSize)[keyof typeof ButtonSize];\n\nexport const ButtonSize = {\n  SMALL: 'small',\n  MEDIUM: 'medium',\n  LARGE: 'large',\n} as const;\n","export type ButtonVariant = (typeof ButtonVariant)[keyof typeof ButtonVariant];\n\nexport const ButtonVariant = {\n  PRIMARY: 'primary',\n  SECONDARY: 'secondary',\n  GHOST: 'ghost',\n  HIGHLIGHT: 'highlight',\n  SUCCESS: 'success',\n  CONFIRMATION: 'confirmation',\n  DANGER: 'danger',\n  WARNING: 'warning',\n} as const;\n","import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';\nimport { WithDisabledState } from '@odx/angular';\nimport { CSSComponent, CSSModifier } from '@odx/angular/internal';\nimport { injectElement } from '@odx/angular/utils';\nimport { ButtonSize, ButtonVariant } from './models';\n\n@CSSComponent('button')\n@Component({\n  standalone: true,\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'button[odxButton], a[odxButton]',\n  templateUrl: './button.component.html',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  hostDirectives: [WithDisabledState],\n  host: {\n    '[attr.type]': 'type || \"button\"',\n  },\n})\nexport class ButtonComponent {\n  public readonly element = injectElement<HTMLButtonElement | HTMLLinkElement>();\n  public readonly type = this.element.nativeElement.getAttribute('type');\n\n  @CSSModifier()\n  @Input()\n  public variant?: ButtonVariant | null = ButtonVariant.SECONDARY;\n\n  @CSSModifier()\n  @Input()\n  public size?: ButtonSize | null = ButtonSize.MEDIUM;\n}\n","<ng-content select=\"odx-icon:not([alignRight])\"></ng-content>\n<ng-content></ng-content>\n<ng-content select=\"odx-icon[alignRight]\"></ng-content>\n","import { Directive, Input } from '@angular/core';\n\n@Directive({\n  standalone: true,\n  selector: '[odxButton][odxResponsiveButton]',\n  host: {\n    '[attr.data-breakpoint]': 'breakpoint',\n  },\n})\nexport class ResponsiveButtonDirective {\n  // eslint-disable-next-line @angular-eslint/no-input-rename\n  @Input('odxResponsiveButton')\n  public breakpoint: string | null = null;\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"odx-angular-components-button.mjs","sources":["../../../../libs/angular/components/button/src/lib/models/button-size.ts","../../../../libs/angular/components/button/src/lib/models/button-variant.ts","../../../../libs/angular/components/button/src/lib/button.component.ts","../../../../libs/angular/components/button/src/lib/button.component.html","../../../../libs/angular/components/button/src/lib/directives/responsive-button.directive.ts","../../../../libs/angular/components/button/src/odx-angular-components-button.ts"],"sourcesContent":["export type ButtonSize = (typeof ButtonSize)[keyof typeof ButtonSize];\n\nexport const ButtonSize = {\n  SMALL: 'small',\n  MEDIUM: 'medium',\n  LARGE: 'large',\n} as const;\n","export type ButtonVariant = (typeof ButtonVariant)[keyof typeof ButtonVariant];\n\nexport const ButtonVariant = {\n  PRIMARY: 'primary',\n  SECONDARY: 'secondary',\n  GHOST: 'ghost',\n  HIGHLIGHT: 'highlight',\n  SUCCESS: 'success',\n  CONFIRMATION: 'confirmation',\n  DANGER: 'danger',\n  WARNING: 'warning',\n} as const;\n","import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';\nimport { WithDisabledState } from '@odx/angular';\nimport { CSSComponent, CSSModifier } from '@odx/angular/internal';\nimport { injectElement } from '@odx/angular/utils';\nimport { ButtonSize, ButtonVariant } from './models';\n\n/**\n * ButtonComponent is a customizable button element that supports various sizes and styles.\n * It uses the `WithDisabledState` host directive to provide disabled state management.\n *\n * @see {WithDisabledState}\n */\n@CSSComponent('button')\n@Component({\n  standalone: true,\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'button[odxButton], a[odxButton]',\n  templateUrl: './button.component.html',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  hostDirectives: [WithDisabledState],\n  host: {\n    '[attr.type]': 'type || \"button\"',\n  },\n})\nexport class ButtonComponent {\n  public readonly element = injectElement<HTMLButtonElement | HTMLLinkElement>();\n  public readonly type = this.element.nativeElement.getAttribute('type');\n\n  /**\n   * The variant of the button.\n   * @see {ButtonVariant}\n   */\n  @CSSModifier()\n  @Input()\n  public variant?: ButtonVariant | null = ButtonVariant.SECONDARY;\n\n  @CSSModifier()\n  @Input()\n  /**\n   * The size of the button.\n   * @see {ButtonSize}\n   */\n  public size?: ButtonSize | null = ButtonSize.MEDIUM;\n}\n","<ng-content select=\"odx-icon:not([alignRight])\"></ng-content>\n<ng-content></ng-content>\n<ng-content select=\"odx-icon[alignRight]\"></ng-content>\n","import { Directive, Input } from '@angular/core';\n\n@Directive({\n  standalone: true,\n  selector: '[odxButton][odxResponsiveButton]',\n  host: {\n    '[attr.data-breakpoint]': 'breakpoint',\n  },\n})\nexport class ResponsiveButtonDirective {\n  // eslint-disable-next-line @angular-eslint/no-input-rename\n  @Input('odxResponsiveButton')\n  public breakpoint: string | null = null;\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;AAEa,MAAA,UAAU,GAAG;AACxB,IAAA,KAAK,EAAE,OAAO;AACd,IAAA,MAAM,EAAE,QAAQ;AAChB,IAAA,KAAK,EAAE,OAAO;;;ACHH,MAAA,aAAa,GAAG;AAC3B,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,SAAS,EAAE,WAAW;AACtB,IAAA,KAAK,EAAE,OAAO;AACd,IAAA,SAAS,EAAE,WAAW;AACtB,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,YAAY,EAAE,cAAc;AAC5B,IAAA,MAAM,EAAE,QAAQ;AAChB,IAAA,OAAO,EAAE,SAAS;;;ACJpB;;;;;AAKG;AAcU,IAAA,eAAe,GAArB,MAAM,eAAe,CAAA;AAArB,IAAA,WAAA,GAAA;QACW,IAAO,CAAA,OAAA,GAAG,aAAa,EAAuC,CAAC;QAC/D,IAAI,CAAA,IAAA,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;AAEvE;;;AAGG;AAGI,QAAA,IAAA,CAAA,OAAO,GAA0B,aAAa,CAAC,SAAS,CAAC;AAQzD,QAAA,IAAA,CAAA,IAAI,GAAuB,UAAU,CAAC,MAAM,CAAC;AACrD,KAAA;+GAnBY,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAf,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,eAAe,6PCzB5B,yJAGA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA,EAAA;;ADgCS,UAAA,CAAA;AAFN,IAAA,WAAW,EAAE;;AAEkD,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQzD,UAAA,CAAA;AANN,IAAA,WAAW,EAAE;;AAMsC,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAlBzC,eAAe,GAAA,UAAA,CAAA;IAb3B,YAAY,CAAC,QAAQ,CAAC;AAaV,CAAA,EAAA,eAAe,CAmB3B,CAAA;4FAnBY,eAAe,EAAA,UAAA,EAAA,CAAA;kBAZ3B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,UAAA,EAAA,IAAI,EAEN,QAAA,EAAA,iCAAiC,EAE5B,aAAA,EAAA,iBAAiB,CAAC,IAAI,EAAA,eAAA,EACpB,uBAAuB,CAAC,MAAM,EAAA,cAAA,EAC/B,CAAC,iBAAiB,CAAC,EAC7B,IAAA,EAAA;AACJ,wBAAA,aAAa,EAAE,kBAAkB;AAClC,qBAAA,EAAA,QAAA,EAAA,yJAAA,EAAA,CAAA;8BAYM,OAAO,EAAA,CAAA;sBADb,KAAK;gBASC,IAAI,EAAA,CAAA;sBALV,KAAK;;;ME7BK,yBAAyB,CAAA;AAPtC,IAAA,WAAA,GAAA;;QAUS,IAAU,CAAA,UAAA,GAAkB,IAAI,CAAC;AACzC,KAAA;+GAJY,yBAAyB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;mGAAzB,yBAAyB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kCAAA,EAAA,MAAA,EAAA,EAAA,UAAA,EAAA,CAAA,qBAAA,EAAA,YAAA,CAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,sBAAA,EAAA,YAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA,EAAA;;4FAAzB,yBAAyB,EAAA,UAAA,EAAA,CAAA;kBAPrC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,QAAQ,EAAE,kCAAkC;AAC5C,oBAAA,IAAI,EAAE;AACJ,wBAAA,wBAAwB,EAAE,YAAY;AACvC,qBAAA;AACF,iBAAA,CAAA;8BAIQ,UAAU,EAAA,CAAA;sBADhB,KAAK;uBAAC,qBAAqB,CAAA;;;ACX9B;;AAEG;;;;"}

package/fesm2022/odx-angular-components-calendar.mjs

@@ -22,6 +22,23 @@ var CalendarSelectionMode;
     CalendarSelectionMode[CalendarSelectionMode["DateRange"] = 1] = "DateRange";
 })(CalendarSelectionMode || (CalendarSelectionMode = {}));
 
+/**
+ * Tools for customizing configuration for the calendar component
+ *
+ * @example
+ * ```ts
+ * @Component({
+ *  ...
+ *  providers: [provideCalendarConfig({ selectionMode: CalendarSelectionMode.DateRange, locale: new BehaviorSubject<Locale>(deDE)})]
+ * })
+ * export class MyDateRangepickerComponent {}
+ * ````
+ *
+ * @example
+ * ```ts
+ * constructor(@Inject(CalendarConfig) private readonly calendarConfig: CalendarConfig) {}
+ * ```
+ */
 const { CalendarConfig, CalendarDefaultConfig, injectCalendarConfig, provideCalendarConfig } = createConfigTokens('Calendar', '@odx/angular/components/calendar', {
     displayAdjacentDays: true,
     selectionMode: CalendarSelectionMode.Date,
@@ -58,10 +75,12 @@ const dateValidators$4 = {
     [CalendarView.Year]: (currentDate, date) => isSameMonth(currentDate, date),
     [CalendarView.Years]: (currentDate, date) => isSameYear(currentDate, date),
 };
+/** @internal */
 function checkIdenticalDate(currentDate, date, calendarView) {
     return dateValidators$4[calendarView](currentDate, date);
 }
 
+/** @internal */
 function getA11yLabel(calendarView) {
     switch (calendarView) {
         case CalendarView.Year:
@@ -78,6 +97,7 @@ const dateValidators$3 = {
     [CalendarView.Year]: (maxDate, date) => endOfMonth(maxDate) < endOfMonth(date),
     [CalendarView.Years]: (maxDate, date) => endOfYear(maxDate) < endOfYear(date),
 };
+/** @internal */
 function validateMaxDate(maxDate, date, calendarView) {
     return dateValidators$3[calendarView](maxDate, date);
 }
@@ -87,10 +107,12 @@ const dateValidators$2 = {
     [CalendarView.Year]: (minDate, date) => startOfMonth(minDate) > startOfMonth(date),
     [CalendarView.Years]: (minDate, date) => startOfYear(minDate) > startOfYear(date),
 };
+/** @internal */
 function validateMinDate(maxDate, date, calendarView) {
     return dateValidators$2[calendarView](maxDate, date);
 }
 
+/** @internal */
 function isDateDisabled(date, calendarView, minDate, maxDate, filterFn) {
     const minDateValidation = minDate && validateMinDate(minDate, date, calendarView);
     const maxDateValidation = maxDate && validateMaxDate(maxDate, date, calendarView);
@@ -98,6 +120,7 @@ function isDateDisabled(date, calendarView, minDate, maxDate, filterFn) {
     return minDateValidation || maxDateValidation || isDateFiltered;
 }
 
+/** @internal */
 function parseDate(value) {
     try {
         const timestamp = isString(value) ? Date.parse(value) : value;
@@ -111,6 +134,7 @@ function parseDate(value) {
     }
 }
 
+/** @internal */
 function validateDaterange(start, end) {
     return isBefore(start, end) || isEqual(start, end);
 }
@@ -120,6 +144,7 @@ const dateValidators$1 = {
     [CalendarView.Year]: (maxDate, date) => maxDate < startOfYear(addMonths(date, 12)),
     [CalendarView.Years]: () => false,
 };
+/** @internal */
 function validateNextDateSet(maxDate, date, calendarView) {
     return dateValidators$1[calendarView](maxDate, date);
 }
@@ -129,10 +154,16 @@ const dateValidators = {
     [CalendarView.Year]: (minDate, date) => minDate > endOfYear(subMonths(date, 12)),
     [CalendarView.Years]: () => false,
 };
+/** @internal */
 function validatePreviousDateSet(minDate, date, calendarView) {
     return dateValidators[calendarView](minDate, date);
 }
 
+/**
+ * Manages the state and functionality related to a calendar, such as tracking the active date,
+ * hovered date, current calendar view, and handling date selections. It provides observable streams
+ * that components can subscribe to in order to react to changes in the calendar's state.
+ */
 class CalendarService {
     constructor() {
         this.activeDate$$ = new BehaviorSubject(null); // the date that is being focused by click or arrow keys
@@ -142,23 +173,61 @@ class CalendarService {
             date: null,
             options: dateSelectOptionsDefaults,
         });
+        /**
+         * Emits the currently selected date to external subscribers, particularly useful for two-way binding.
+         */
         this.outputDate$ = new EventEmitter();
+        /**
+         * An observable of the current calendar view state, allowing subscribers to adjust UI components
+         * based on the view (e.g., month, year, multi-year).
+         */
         this.calendarView$ = this.calendarView$$.pipe(shareReplay({ bufferSize: 1, refCount: true }));
+        /**
+         * Streams date select events which include the selected date and any associated options.
+         */
         this.dateSelectEvents$ = this.dateSelectEvents$$.asObservable();
+        /**
+         * Streams the last selected date, enabling components to update based on the latest date selection.
+         */
         this.selectedDate$ = this.dateSelectEvents$$.pipe(map((x) => x.date), shareReplay({ bufferSize: 1, refCount: true }));
+        /**
+         * Streams the active date which reflects the date that is being focused, either through UI interactions
+         * like clicking or using arrow keys.
+         */
         this.activeDate$ = this.activeDate$$.pipe(filter(Boolean), distinctUntilChanged((prev, curr) => isEqual(prev, curr)), shareReplay({ bufferSize: 1, refCount: true }));
+        /**
+         * Combines streams of active and hovered dates to provide a merged view of preview dates.
+         */
         this.previewDate$ = merge(this.activeDate$$, this.hoveredDate$$).pipe(filter(Boolean), distinctUntilChanged((prev, curr) => isEqual(prev, curr)), shareReplay({ bufferSize: 1, refCount: true }));
     }
+    /**
+     * Updates the active date state with a new date, parsed from various input types.
+     *
+     * @param {DateType | null} value - The new date or null to clear the active date.
+     */
     setActiveDate(value) {
         if (!isPresent(value))
             return;
         this.activeDate$$.next(parseDate(value));
     }
+    /**
+     * Sets a date as hovered, which can be used to preview date ranges or effects in the UI.
+     *
+     * @param {DateType | null} value - The date being hovered or null to clear the hovered state.
+     */
     setHoveredDate(value) {
         if (!isPresent(value))
             return;
         this.hoveredDate$$.next(parseDate(value));
     }
+    /**
+     * Selects a date and updates relevant states and options. Can emit the selected date externally
+     * if specified in the options.
+     *
+     * @param {DateType | null} value - The date to select.
+     * @param {DateSelectOptions} [options] - Optional settings for the date selection, such as whether
+     *                                        to emit the date change externally.
+     */
     selectDate(value, options) {
         const date = isPresent(value) ? startOfDay(parseDate(value)) : null;
         this.dateSelectEvents$$.next({ date, options: { ...dateSelectOptionsDefaults, ...options } });
@@ -167,6 +236,11 @@ class CalendarService {
         }
         this.setActiveDate(date);
     }
+    /**
+     * Changes the calendar view to the specified view, updating the internal state and notifying subscribers.
+     *
+     * @param {CalendarView} view - The new view to set for the calendar.
+     */
     changeView(view) {
         this.calendarView$$.next(view);
     }
@@ -177,15 +251,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             type: Injectable
         }] });
 
+/**
+ * Represents the header component of the calendar.
+ */
 let CalendarHeaderComponent = class CalendarHeaderComponent {
     constructor() {
         this.isPreviousDisabled = false;
         this.isNextDisabled = false;
         this.element = injectElement();
+        /**
+         * The minimum selectable date in the calendar.
+         */
         this.minDate = null;
+        /**
+         * The maximum selectable date in the calendar.
+         */
         this.maxDate = null;
+        /**
+         * Event emitted when the previous button is clicked.
+         */
         this.previous = new EventEmitter();
+        /**
+         * Event emitted when the next button is clicked.
+         */
         this.next = new EventEmitter();
+        /**
+         * Event emitted when the view is changed.
+         */
         this.changeView = new EventEmitter();
     }
     ngOnChanges(changes) {
@@ -229,6 +321,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }] } });
 
+/**
+ * Transforms a given date into a formatted string based on the provided date format string.
+ * The transformation utilizes the `format` function from date-fns library and considers the locale
+ * from the global calendar configuration to ensure the date is represented in a locale-appropriate format.
+ */
 class DateLabelPipe {
     constructor() {
         this.localizationService = inject(LocalizationService);
@@ -262,6 +359,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
+/** @internal */
 function checkCellInRange(date, dateRangeState, calendarView, targetSelectionState) {
     const { start, end } = dateRangeState.dateRange;
     if (calendarView !== CalendarView.Month || dateRangeState.selectionState !== targetSelectionState || (start && end && !validateDaterange(start, end))) {
@@ -287,6 +385,9 @@ function isWithinInclusiveRange(date, dateRange) {
     return isWithinInterval(date, { start, end });
 }
 
+/**
+ * Represents a directive for a cell in the calendar view.
+ */
 let CalendarCellDirective = class CalendarCellDirective {
     constructor() {
         this.disabledController = DisabledController.inject();
@@ -308,9 +409,31 @@ let CalendarCellDirective = class CalendarCellDirective {
         this.isPreviewRangeStart = false;
         this.isPreviewRangeEnd = false;
         this.element = injectElement();
+        /**
+         * Represents the active date in the calendar view.
+         *
+         * @type {Date | null}
+         */
         this.activeDate = null;
+        /**
+         * Represents the selected date in the calendar view.
+         *
+         * @type {Date | null}
+         */
         this.selectedDate = null;
+        /**
+         * Represents the selected date range in the calendar view.
+         *
+         * @type {DateRangeState | null}
+         */
         this.selectedDateRange = null;
+        /**
+         * Represents the preview date for the calendar view.
+         * This property represents the date that is currently being previewed in the calendar view.
+         * It can be set to a specific date or null if no date is being previewed.
+         *
+         * @type {Date | null}
+         */
         this.previewDate = null;
     }
     get isDisabled() {
@@ -446,6 +569,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['odxCalendarCellPreviewDate']
             }] } });
 
+/**
+ * Represents an abstract directive for a calendar view.
+ */
 class CalendarViewDirective {
     constructor() {
         this.takeUntilDestroyed = untilDestroyed();
@@ -453,11 +579,46 @@ class CalendarViewDirective {
         this.config = injectCalendarConfig();
         this.trackByIndex = trackByIndex;
         this.element = injectElement();
+        /**
+         * The selected date in the calendar view.
+         * @type {Date | null}
+         */
         this.selectedDate = null;
+        /**
+         * The selected date range in the calendar view.
+         * @type {DateRangeState | null}
+         */
         this.selectedDateRange = null;
+        /**
+         * The preview date for the calendar view.
+         * This property represents the date that is currently being previewed in the calendar view.
+         * It can be set to a specific date or null if no date is being previewed.
+         */
         this.previewDate = null;
+        /**
+         * The minimum selectable date in the calendar view.
+         * If set, dates before this minimum date will be disabled for selection.
+         */
         this.minDate = null;
+        /**
+         * The maximum selectable date in the calendar view.
+         * If set, dates after this maximum date will be disabled for selection.
+         */
         this.maxDate = null;
+        /**
+         * The filter function used to determine if a date should be displayed in the calendar view.
+         * If set to `null`, no filtering will be applied.
+         *
+         * @remarks
+         * The filter function should accept a `Date` object as its parameter and return a boolean value.
+         * If the function returns `true`, the date will be displayed; if it returns `false`, the date will be hidden.
+         *
+         * @example
+         * ```ts
+         * // Filter out weekends
+         * const filterFn: DateFilter = (date) => date.getDay() !== 0 && date.getDay() !== 6;
+         * ```
+         */
         this.filterFn = null;
     }
     isDateDisabled(value) {
@@ -495,6 +656,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
+/** @internal */
 class CalendarMonthService {
     constructor() {
         this.calendar = inject(CalendarService);
@@ -528,6 +690,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             type: Injectable
         }] });
 
+/** @internal */
 class CalendarYearService {
     constructor() {
         this.config = injectCalendarConfig();
@@ -555,6 +718,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             type: Injectable
         }] });
 
+/** @internal */
 class CalendarYearsService {
     constructor() {
         this.config = injectCalendarConfig();
@@ -586,6 +750,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             type: Injectable
         }] });
 
+/**
+ * Represents a calendar month component.
+ * This component extends the `CalendarViewDirective` class and provides functionality for managing the calendar month.
+ *
+ * @see {CalendarViewDirective}
+ */
 let CalendarMonthComponent = class CalendarMonthComponent extends CalendarViewDirective {
     constructor() {
         super(...arguments);
@@ -627,6 +797,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             args: [{ selector: 'odx-calendar-month', standalone: true, imports: [CoreModule, CalendarCellDirective, CalendarHeaderComponent, DateLabelPipe], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [CalendarMonthService], template: "<table class=\"odx-calendar__table\" role=\"grid\" aria-describedby=\"odx-calendar\">\n  <thead>\n    <tr>\n      <th colspan=\"7\">\n        <odx-calendar-header\n          [calendarView]=\"currentView\"\n          [activeDate]=\"activeDate\"\n          [minDate]=\"minDate\"\n          [maxDate]=\"maxDate\"\n          (previous)=\"previousMonth($event)\"\n          (next)=\"nextMonth($event)\"\n          (changeView)=\"changeView()\"\n        >\n          {{ activeDate | odxDateLabel: { month: 'long', year: 'numeric' } }}\n        </odx-calendar-header>\n      </th>\n    </tr>\n\n    <tr class=\"odx-calendar__weekdays\">\n      <td *ngFor=\"let day of calendarMonth.weekDays$ | async\">\n        {{ (day | odxDateLabel: { weekday: 'short' }).charAt(0) }}\n      </td>\n    </tr>\n  </thead>\n\n  <tbody\n    class=\"odx-calendar__body\"\n    (keydown.ArrowLeft)=\"previousDay($event)\"\n    (keydown.ArrowRight)=\"nextDay($event)\"\n    (keydown.ArrowUp)=\"previousWeek($event)\"\n    (keydown.ArrowDown)=\"nextWeek($event)\"\n    (keydown.PageUp)=\"previousMonth($event)\"\n    (keydown.PageDown)=\"nextMonth($event)\"\n  >\n    <tr *ngFor=\"let week of calendarMonth.weeks$ | async; trackBy: trackByIndex\">\n      <td role=\"gridcell\" *ngFor=\"let day of week; trackBy: trackByIndex\">\n        <button\n          [disabled]=\"isDateDisabled(day)\"\n          [odxCalendarCell]=\"day\"\n          [odxCalendarCellActiveDate]=\"activeDate\"\n          [odxCalendarCellCalendarView]=\"currentView\"\n          [odxCalendarCellSelectedDate]=\"selectedDate\"\n          [odxCalendarCellSelectedDateRange]=\"selectedDateRange\"\n          [odxCalendarCellPreviewDate]=\"previewDate\"\n          (click)=\"selectDate(day)\"\n        >\n          {{ day | odxDateLabel: { day: 'numeric' } }}\n        </button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n" }]
         }] });
 
+/**
+ * Represents a component for displaying a calendar year view.
+ * Extends the `CalendarViewDirective` class.
+ *
+ * @see {CalendarViewDirective}
+ */
 let CalendarYearComponent = class CalendarYearComponent extends CalendarViewDirective {
     constructor() {
         super(...arguments);
@@ -670,6 +846,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             args: [{ selector: 'odx-calendar-year', standalone: true, imports: [CoreModule, CalendarCellDirective, CalendarHeaderComponent, DateLabelPipe], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [CalendarYearService], template: "<table class=\"odx-calendar__table\" role=\"grid\" aria-describedby=\"odx-calendar\">\n  <thead>\n    <tr>\n      <th colspan=\"3\">\n        <odx-calendar-header\n          (previous)=\"previousYear($event)\"\n          [calendarView]=\"currentView\"\n          [activeDate]=\"activeDate\"\n          [minDate]=\"minDate\"\n          [maxDate]=\"maxDate\"\n          (next)=\"nextYear($event)\"\n          (changeView)=\"changeView()\"\n        >\n          {{ activeDate | odxDateLabel: { year: 'numeric' } }}\n        </odx-calendar-header>\n      </th>\n    </tr>\n  </thead>\n\n  <tbody\n    class=\"odx-calendar__body\"\n    (keydown.ArrowLeft)=\"previousMonth($event)\"\n    (keydown.ArrowRight)=\"nextMonth($event)\"\n    (keydown.ArrowUp)=\"previousSeason($event)\"\n    (keydown.ArrowDown)=\"nextSeason($event)\"\n    (keydown.PageDown)=\"nextYear($event)\"\n    (keydown.PageUp)=\"previousYear($event)\"\n  >\n    <tr class=\"odx-calendar__season\" *ngFor=\"let season of calendarYear.seasons$ | async; trackBy: trackByIndex\">\n      <td role=\"gridcell\" *ngFor=\"let month of season; trackBy: trackByIndex\">\n        <button\n          [disabled]=\"isDateDisabled(month)\"\n          [odxCalendarCell]=\"month\"\n          [odxCalendarCellActiveDate]=\"activeDate\"\n          [odxCalendarCellCalendarView]=\"currentView\"\n          [odxCalendarCellSelectedDate]=\"selectedDate\"\n          [odxCalendarCellSelectedDateRange]=\"selectedDateRange\"\n          (click)=\"selectDate(month)\"\n        >\n          {{ month | odxDateLabel: { month: 'short' } }}\n        </button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n" }]
         }] });
 
+/**
+ * Represents the component for displaying the years view in a calendar.
+ * Extends the `CalendarViewDirective` class and implements the `AfterViewInit` interface.
+ *
+ * @see {CalendarViewDirective}
+ */
 let CalendarYearsComponent = class CalendarYearsComponent extends CalendarViewDirective {
     constructor() {
         super(...arguments);
@@ -719,6 +901,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             args: [{ selector: 'odx-calendar-years', standalone: true, imports: [CoreModule, CalendarCellDirective, CalendarHeaderComponent, DateLabelPipe], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [CalendarYearsService], template: "<table class=\"odx-calendar__table\" role=\"grid\" aria-describedby=\"odx-calendar\" *ngrxLet=\"calendar.activeDate$ as activeDate\">\n  <thead aria-hidden=\"true\">\n    <th></th>\n  </thead>\n\n  <tbody\n    class=\"odx-calendar__body\"\n    (keydown.ArrowLeft)=\"previousYear($event)\"\n    (keydown.ArrowRight)=\"nextYear($event)\"\n    (keydown.ArrowUp)=\"previousRow($event)\"\n    (keydown.ArrowDown)=\"nextRow($event)\"\n  >\n    <tr class=\"odx-calendar__year-row\" *ngFor=\"let yearRow of calendarYears.years$ | async; trackBy: trackByIndex\">\n      <td role=\"gridcell\" *ngFor=\"let year of yearRow; trackBy: trackByIndex\">\n        <button\n          [disabled]=\"isDateDisabled(year)\"\n          [odxCalendarCell]=\"year\"\n          [odxCalendarCellActiveDate]=\"activeDate\"\n          [odxCalendarCellCalendarView]=\"currentView\"\n          [odxCalendarCellSelectedDate]=\"selectedDate\"\n          [odxCalendarCellSelectedDateRange]=\"selectedDateRange\"\n          (click)=\"selectDate(year)\"\n        >\n          {{ year | odxDateLabel: { year: 'numeric' } }}\n        </button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n" }]
         }] });
 
+/**
+ * Service for managing date range selection.
+ */
 class DaterangeService {
     constructor() {
         this.calendar = inject(CalendarService);
@@ -726,7 +911,16 @@ class DaterangeService {
             selectionState: DateRangeSelectionState.NothingSelected,
             dateRange: { start: null, end: null },
         });
+        /**
+         * An event emitter for outputting the selected date range.
+         * @emits {DateRange | null} outputDateRange$ - The selected date range or null if no range is selected.
+         */
         this.outputDateRange$ = new EventEmitter();
+        /**
+         * An observable that emits the current date range state.
+         * The date range state represents the current selection state and the selected date range.
+         * @emits {DateRangeState} dateRangeState$ - The current date range state.
+         */
         this.dateRangeState$ = this.calendar.dateSelectEvents$.pipe(filter((newSelectedDate) => Boolean(newSelectedDate.date)), withLatestFrom(this.dateRangeState$$), map(([newSelectedDate, currentDateRangeState]) => {
             const newDate = newSelectedDate.date;
             const currentStart = currentDateRangeState.dateRange.start;
@@ -755,6 +949,10 @@ class DaterangeService {
             return newDateRangeState;
         }), distinctUntilChanged((prev, curr) => JSON.stringify(prev) === JSON.stringify(curr)), shareReplay({ refCount: true }));
     }
+    /**
+     * Sets the selected date range.
+     * @param {DateTypeRange} value - The selected date range.
+     */
     setDateRange(value) {
         deferFn(() => {
             this.calendar.selectDate(value.start);
@@ -769,6 +967,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             type: Injectable
         }] });
 
+/**
+ * A component for selecting a date or date range. It provides a calendar interface for selecting dates and date ranges,
+ * and supports various configuration options for customizing the appearance and behavior of the calendar.
+ */
 let CalendarComponent = class CalendarComponent {
     constructor() {
         this.config = injectCalendarConfig();
@@ -776,10 +978,40 @@ let CalendarComponent = class CalendarComponent {
         this.daterange = inject(DaterangeService);
         this.CalendarView = CalendarView;
         this.element = injectElement();
+        /**
+         * Represents the selected date in the calendar component.
+         * It can be of type `DateType` or `null` if no date is selected.
+         *
+         * @type {DateType | null}
+         */
         this.selectedDate = null;
+        /**
+         * Represents the selected date range in the calendar component.
+         * It can be of type `DateTypeRange` or `null` if no date range is selected.
+         *
+         * @type {DateTypeRange | null}
+         */
         this.selectedDateRange = null;
         this.minDate = null;
+        /**
+         * The maximum selectable date for the calendar component.
+         * If set to null, there is no maximum date restriction.
+         *
+         * @type {Date | null}
+         */
         this.maxDate = null;
+        /**
+         * The filter function used to determine which dates are selectable in the calendar.
+         * If set to `null`, all dates will be selectable.
+         *
+         * @type {DateFilter | null}
+         *
+         * @example
+         * ```ts
+         * // Filter out weekends
+         * const filterFn: DateFilter = (date) => date.getDay() !== 0 && date.getDay() !== 6;
+         * ```
+         */
         this.filterFn = null;
         this.selectedDateChange = this.calendar.outputDate$;
         this.selectedDateRangeChange = this.daterange.outputDateRange$;