@ng-doc/ui-kit 22.0.0-beta.2 → 22.0.0

package/fesm2022/ng-doc-ui-kit-components-blockquote.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-doc-ui-kit-components-blockquote.mjs","sources":["../../../../libs/ui-kit/components/blockquote/blockquote.component.ts","../../../../libs/ui-kit/components/blockquote/blockquote.component.html","../../../../libs/ui-kit/components/blockquote/ng-doc-ui-kit-components-blockquote.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';\nimport { NgDocIconComponent } from '@ng-doc/ui-kit/components/icon';\nimport { NgDocBlockquoteType } from '@ng-doc/ui-kit/types';\n\n@Component({\n  selector: 'blockquote[ng-doc-blockquote]',\n  templateUrl: './blockquote.component.html',\n  styleUrls: ['./blockquote.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [NgDocIconComponent],\n})\nexport class NgDocBlockquoteComponent {\n  @Input()\n  @HostBinding('attr.data-ng-doc-type')\n  type: NgDocBlockquoteType = 'default';\n\n  @Input()\n  icon?: string;\n}\n","@if (type !== 'default') {\n  <div class=\"ng-doc-blockquote-icon\">\n    @if (icon) {\n      <ng-doc-icon [icon]=\"icon\" size=\"24\"></ng-doc-icon>\n    } @else {\n      @switch (type) {\n        @case ('note') {\n          <ng-doc-icon icon=\"info\" size=\"24\"></ng-doc-icon>\n        }\n        @case ('warning') {\n          <ng-doc-icon icon=\"alert-triangle\" size=\"24\"></ng-doc-icon>\n        }\n        @case ('success') {\n          <ng-doc-icon icon=\"check\" size=\"24\"></ng-doc-icon>\n        }\n        @case ('alert') {\n          <ng-doc-icon icon=\"alert-circle\" size=\"24\"></ng-doc-icon>\n        }\n      }\n    }\n  </div>\n}\n<div class=\"ng-doc-blockquote\">\n  <ng-content></ng-content>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAWa,wBAAwB,CAAA;AAPrC,IAAA,WAAA,GAAA;QAUE,IAAA,CAAA,IAAI,GAAwB,SAAS;AAItC,IAAA;8GAPY,wBAAwB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAxB,wBAAwB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,+BAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECXrC,utBAyBA,EAAA,MAAA,EAAA,CAAA,2/CAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDhBY,kBAAkB,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,YAAA,EAAA,MAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAEjB,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBAPpC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,+BAA+B,mBAGxB,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,kBAAkB,CAAC,EAAA,QAAA,EAAA,utBAAA,EAAA,MAAA,EAAA,CAAA,2/CAAA,CAAA,EAAA;;sBAG5B;;sBACA,WAAW;uBAAC,uBAAuB;;sBAGnC;;;AEhBH;;AAEG;;;;"}
+{"version":3,"file":"ng-doc-ui-kit-components-blockquote.mjs","sources":["../../../../libs/ui-kit/components/blockquote/blockquote.component.ts","../../../../libs/ui-kit/components/blockquote/blockquote.component.html","../../../../libs/ui-kit/components/blockquote/ng-doc-ui-kit-components-blockquote.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input, Signal } from '@angular/core';\nimport { NgDocIconComponent } from '@ng-doc/ui-kit/components/icon';\nimport { NgDocBlockquoteType } from '@ng-doc/ui-kit/types';\n\n/** The icon and the title each built-in callout type shows. */\nconst BLOCKQUOTE_PRESETS: Partial<\n  Record<NgDocBlockquoteType, { readonly icon: string; readonly label: string }>\n> = {\n  note: { icon: 'info', label: 'Note' },\n  warning: { icon: 'alert-triangle', label: 'Warning' },\n  alert: { icon: 'alert-circle', label: 'Alert' },\n  success: { icon: 'check', label: 'Success' },\n};\n\n/**\n * A callout. A Markdown blockquote whose first word is a bold type name, such as Note, renders\n * as this component.\n *\n * The `note`, `warning`, `alert` and `success` types show their icon and their name as a title\n * (\"Note\", \"Warning\", ...). A callout with a custom `icon` shows no type title, only its `label`\n * when it has one. The `default` type has neither an icon nor a title.\n */\n@Component({\n  selector: 'blockquote[ng-doc-blockquote]',\n  templateUrl: './blockquote.component.html',\n  styleUrls: ['./blockquote.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [NgDocIconComponent],\n  host: {\n    '[attr.data-ng-doc-type]': 'type()',\n    '[attr.data-ng-doc-has-icon]': 'iconName() ? \"\" : null',\n  },\n})\nexport class NgDocBlockquoteComponent {\n  /** Callout type; it selects the colour, the icon and the title. */\n  readonly type = input<NgDocBlockquoteType>('default');\n\n  /** Name of an icon that replaces the type's icon; the type title is not shown then. */\n  readonly icon = input<string | undefined>(undefined);\n\n  /** A title that replaces the type title, for example \"Deprecated\". */\n  readonly label = input<string | undefined>(undefined);\n\n  /** The icon that is shown, if any. */\n  protected readonly iconName: Signal<string | undefined> = computed(\n    () => this.icon() || BLOCKQUOTE_PRESETS[this.type()]?.icon,\n  );\n\n  /** The title that is shown, if any. */\n  protected readonly title: Signal<string | undefined> = computed(\n    () => this.label() || (this.icon() ? undefined : BLOCKQUOTE_PRESETS[this.type()]?.label),\n  );\n}\n","@if (iconName(); as iconName) {\n  <div class=\"ng-doc-blockquote-icon\" aria-hidden=\"true\">\n    <ng-doc-icon [icon]=\"iconName\" size=\"24\"></ng-doc-icon>\n  </div>\n}\n<div class=\"ng-doc-blockquote\">\n  @if (title(); as title) {\n    <span class=\"ng-doc-blockquote-title\">{{ title }}</span>\n  }\n  <ng-content></ng-content>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAIA;AACA,MAAM,kBAAkB,GAEpB;IACF,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;IACrC,OAAO,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE,KAAK,EAAE,SAAS,EAAE;IACrD,KAAK,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,OAAO,EAAE;IAC/C,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE;CAC7C;AAED;;;;;;;AAOG;MAYU,wBAAwB,CAAA;AAXrC,IAAA,WAAA,GAAA;;QAaW,IAAA,CAAA,IAAI,GAAG,KAAK,CAAsB,SAAS;iFAAC;;QAG5C,IAAA,CAAA,IAAI,GAAG,KAAK,CAAqB,SAAS;iFAAC;;QAG3C,IAAA,CAAA,KAAK,GAAG,KAAK,CAAqB,SAAS;kFAAC;;AAGlC,QAAA,IAAA,CAAA,QAAQ,GAA+B,QAAQ,CAChE,MAAM,IAAI,CAAC,IAAI,EAAE,IAAI,kBAAkB,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;qFAC3D;;AAGkB,QAAA,IAAA,CAAA,KAAK,GAA+B,QAAQ,CAC7D,MAAM,IAAI,CAAC,KAAK,EAAE,KAAK,IAAI,CAAC,IAAI,EAAE,GAAG,SAAS,GAAG,kBAAkB,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,CAAC;kFACzF;AACF,IAAA;8GAnBY,wBAAwB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAxB,wBAAwB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,+BAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,uBAAA,EAAA,QAAA,EAAA,2BAAA,EAAA,0BAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECjCrC,0VAWA,EAAA,MAAA,EAAA,CAAA,+qEAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDgBY,kBAAkB,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,YAAA,EAAA,MAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAMjB,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBAXpC,SAAS;+BACE,+BAA+B,EAAA,eAAA,EAGxB,uBAAuB,CAAC,MAAM,WACtC,CAAC,kBAAkB,CAAC,EAAA,IAAA,EACvB;AACJ,wBAAA,yBAAyB,EAAE,QAAQ;AACnC,wBAAA,6BAA6B,EAAE,wBAAwB;AACxD,qBAAA,EAAA,QAAA,EAAA,0VAAA,EAAA,MAAA,EAAA,CAAA,+qEAAA,CAAA,EAAA;;;AE/BH;;AAEG;;;;"}

package/fesm2022/ng-doc-ui-kit-components-button-icon.mjs

@@ -1,28 +1,40 @@
 import * as i0 from '@angular/core';
-import { Input, HostBinding, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, booleanAttribute, ChangeDetectionStrategy, Component } from '@angular/core';
 
+/**
+ * A square button that holds a single icon.
+ *
+ * The `large` size is the 36px header button. Set `[rounded]="false"` for the rounded-square
+ * shape of the NgDoc header.
+ * @example
+ * ```html
+ * <button ng-doc-button-icon size="large" [rounded]="false" aria-label="Open menu">
+ *   <ng-doc-icon icon="menu" />
+ * </button>
+ * ```
+ */
 class NgDocButtonIconComponent {
     constructor() {
-        this.size = 'medium';
-        this.rounded = true;
+        /**
+         * Size of the button: `small` (24px), `medium` (32px) or `large` (36px).
+         */
+        this.size = input('medium', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether the button is a circle. When `false`, it is a rounded square.
+         */
+        this.rounded = input(true, { ...(ngDevMode ? { debugName: "rounded" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocButtonIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: NgDocButtonIconComponent, isStandalone: true, selector: "button[ng-doc-button-icon], a[ng-doc-button-icon], button[ng-doc-button-icon-raised], a[ng-doc-button-icon-raised], button[ng-doc-button-icon-transparent], a[ng-doc-button-icon-transparent]", inputs: { size: "size", rounded: "rounded" }, host: { properties: { "attr.data-ng-doc-size": "this.size", "attr.data-ng-doc-rounded": "this.rounded" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{position:relative;display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer;border-radius:50%;border:var(--ng-doc-button-border);width:calc(var(--ng-doc-base-gutter) * 4);height:calc(var(--ng-doc-base-gutter) * 4);background-color:var(--ng-doc-button-background);color:var(--ng-doc-button-color);overflow:hidden;--ng-doc-icon-color: var(--ng-doc-button-color)}:host[data-ng-doc-size=small]{width:calc(var(--ng-doc-base-gutter) * 3);height:calc(var(--ng-doc-base-gutter) * 3)}:host[data-ng-doc-size=large]{width:calc(var(--ng-doc-base-gutter) * 5);height:calc(var(--ng-doc-base-gutter) * 5)}:host:hover{background-color:var(--ng-doc-button-hover-background);color:var(--ng-doc-button-hover-color);border:var(--ng-doc-button-hover-border);--ng-doc-icon-color: var(--ng-doc-button-hover-color)}:host:active{background-color:var(--ng-doc-button-active-background);color:var(--ng-doc-button-active-color);border:var(--ng-doc-button-active-border);--ng-doc-icon-color: var(--ng-doc-button-active-color)}:host[data-ng-doc-rounded=false]{border-radius:var(--ng-doc-base-gutter)}:host[ng-doc-button-icon-transparent]{--ng-doc-button-color: var(--ng-doc-base-6);--ng-doc-button-hover-color: var(--ng-doc-base-8);--ng-doc-button-active-color: var(--ng-doc-base-10);--ng-doc-button-hover-background: transparent;--ng-doc-button-active-background: transparent}:host[ng-doc-button-icon-raised]{--ng-doc-button-background: var(--ng-doc-base-1);--ng-doc-button-border: 1px solid var(--ng-doc-base-3);--ng-doc-button-hover-background: var(--ng-doc-base-2);--ng-doc-button-hover-border: 1px solid var(--ng-doc-base-4);--ng-doc-button-active-background: var(--ng-doc-base-3);--ng-doc-button-active-border: 1px solid var(--ng-doc-base-5)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocButtonIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.1", type: NgDocButtonIconComponent, isStandalone: true, selector: "button[ng-doc-button-icon], a[ng-doc-button-icon], button[ng-doc-button-icon-raised], a[ng-doc-button-icon-raised], button[ng-doc-button-icon-transparent], a[ng-doc-button-icon-transparent]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-ng-doc-size": "size()", "attr.data-ng-doc-rounded": "rounded()" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{position:relative;display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer;border-radius:50%;border:var(--ng-doc-button-border);width:calc(var(--ng-doc-base-gutter) * 4);height:calc(var(--ng-doc-base-gutter) * 4);background-color:var(--ng-doc-button-background);color:var(--ng-doc-button-color);overflow:hidden;--ng-doc-icon-color: var(--ng-doc-button-color)}:host[data-ng-doc-size=small]{width:calc(var(--ng-doc-base-gutter) * 3);height:calc(var(--ng-doc-base-gutter) * 3)}:host[data-ng-doc-size=large]{width:calc(var(--ng-doc-base-gutter) * 4.5);height:calc(var(--ng-doc-base-gutter) * 4.5)}@media(pointer:coarse){:host[data-ng-doc-size=large]{overflow:visible}:host[data-ng-doc-size=large]:before{content:\"\";position:absolute;inset:-4px}}:host:hover{background-color:var(--ng-doc-button-hover-background);color:var(--ng-doc-button-hover-color);border:var(--ng-doc-button-hover-border);--ng-doc-icon-color: var(--ng-doc-button-hover-color)}:host:active{background-color:var(--ng-doc-button-active-background);color:var(--ng-doc-button-active-color);border:var(--ng-doc-button-active-border);--ng-doc-icon-color: var(--ng-doc-button-active-color)}:host:focus-visible{outline:none;box-shadow:var(--ng-doc-focus-ring)}:host[data-ng-doc-rounded=false]{border-radius:var(--ng-doc-base-gutter)}:host[ng-doc-button-icon-transparent]{--ng-doc-button-color: var(--ng-doc-base-6);--ng-doc-button-hover-color: var(--ng-doc-base-8);--ng-doc-button-active-color: var(--ng-doc-base-10);--ng-doc-button-hover-background: transparent;--ng-doc-button-active-background: transparent}:host[ng-doc-button-icon-raised]{--ng-doc-button-background: var(--ng-doc-base-1);--ng-doc-button-border: 1px solid var(--ng-doc-base-3);--ng-doc-button-hover-background: var(--ng-doc-base-2);--ng-doc-button-hover-border: 1px solid var(--ng-doc-base-4);--ng-doc-button-active-background: var(--ng-doc-base-3);--ng-doc-button-active-border: 1px solid var(--ng-doc-base-5)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocButtonIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocButtonIconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'button[ng-doc-button-icon], a[ng-doc-button-icon], button[ng-doc-button-icon-raised], a[ng-doc-button-icon-raised], button[ng-doc-button-icon-transparent], a[ng-doc-button-icon-transparent]', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<ng-content></ng-content>\n", styles: [":host{position:relative;display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer;border-radius:50%;border:var(--ng-doc-button-border);width:calc(var(--ng-doc-base-gutter) * 4);height:calc(var(--ng-doc-base-gutter) * 4);background-color:var(--ng-doc-button-background);color:var(--ng-doc-button-color);overflow:hidden;--ng-doc-icon-color: var(--ng-doc-button-color)}:host[data-ng-doc-size=small]{width:calc(var(--ng-doc-base-gutter) * 3);height:calc(var(--ng-doc-base-gutter) * 3)}:host[data-ng-doc-size=large]{width:calc(var(--ng-doc-base-gutter) * 5);height:calc(var(--ng-doc-base-gutter) * 5)}:host:hover{background-color:var(--ng-doc-button-hover-background);color:var(--ng-doc-button-hover-color);border:var(--ng-doc-button-hover-border);--ng-doc-icon-color: var(--ng-doc-button-hover-color)}:host:active{background-color:var(--ng-doc-button-active-background);color:var(--ng-doc-button-active-color);border:var(--ng-doc-button-active-border);--ng-doc-icon-color: var(--ng-doc-button-active-color)}:host[data-ng-doc-rounded=false]{border-radius:var(--ng-doc-base-gutter)}:host[ng-doc-button-icon-transparent]{--ng-doc-button-color: var(--ng-doc-base-6);--ng-doc-button-hover-color: var(--ng-doc-base-8);--ng-doc-button-active-color: var(--ng-doc-base-10);--ng-doc-button-hover-background: transparent;--ng-doc-button-active-background: transparent}:host[ng-doc-button-icon-raised]{--ng-doc-button-background: var(--ng-doc-base-1);--ng-doc-button-border: 1px solid var(--ng-doc-base-3);--ng-doc-button-hover-background: var(--ng-doc-base-2);--ng-doc-button-hover-border: 1px solid var(--ng-doc-base-4);--ng-doc-button-active-background: var(--ng-doc-base-3);--ng-doc-button-active-border: 1px solid var(--ng-doc-base-5)}\n"] }]
-        }], propDecorators: { size: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.data-ng-doc-size']
-            }], rounded: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.data-ng-doc-rounded']
-            }] } });
+            args: [{ selector: 'button[ng-doc-button-icon], a[ng-doc-button-icon], button[ng-doc-button-icon-raised], a[ng-doc-button-icon-raised], button[ng-doc-button-icon-transparent], a[ng-doc-button-icon-transparent]', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[attr.data-ng-doc-size]': 'size()',
+                        '[attr.data-ng-doc-rounded]': 'rounded()',
+                    }, template: "<ng-content></ng-content>\n", styles: [":host{position:relative;display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer;border-radius:50%;border:var(--ng-doc-button-border);width:calc(var(--ng-doc-base-gutter) * 4);height:calc(var(--ng-doc-base-gutter) * 4);background-color:var(--ng-doc-button-background);color:var(--ng-doc-button-color);overflow:hidden;--ng-doc-icon-color: var(--ng-doc-button-color)}:host[data-ng-doc-size=small]{width:calc(var(--ng-doc-base-gutter) * 3);height:calc(var(--ng-doc-base-gutter) * 3)}:host[data-ng-doc-size=large]{width:calc(var(--ng-doc-base-gutter) * 4.5);height:calc(var(--ng-doc-base-gutter) * 4.5)}@media(pointer:coarse){:host[data-ng-doc-size=large]{overflow:visible}:host[data-ng-doc-size=large]:before{content:\"\";position:absolute;inset:-4px}}:host:hover{background-color:var(--ng-doc-button-hover-background);color:var(--ng-doc-button-hover-color);border:var(--ng-doc-button-hover-border);--ng-doc-icon-color: var(--ng-doc-button-hover-color)}:host:active{background-color:var(--ng-doc-button-active-background);color:var(--ng-doc-button-active-color);border:var(--ng-doc-button-active-border);--ng-doc-icon-color: var(--ng-doc-button-active-color)}:host:focus-visible{outline:none;box-shadow:var(--ng-doc-focus-ring)}:host[data-ng-doc-rounded=false]{border-radius:var(--ng-doc-base-gutter)}:host[ng-doc-button-icon-transparent]{--ng-doc-button-color: var(--ng-doc-base-6);--ng-doc-button-hover-color: var(--ng-doc-base-8);--ng-doc-button-active-color: var(--ng-doc-base-10);--ng-doc-button-hover-background: transparent;--ng-doc-button-active-background: transparent}:host[ng-doc-button-icon-raised]{--ng-doc-button-background: var(--ng-doc-base-1);--ng-doc-button-border: 1px solid var(--ng-doc-base-3);--ng-doc-button-hover-background: var(--ng-doc-base-2);--ng-doc-button-hover-border: 1px solid var(--ng-doc-base-4);--ng-doc-button-active-background: var(--ng-doc-base-3);--ng-doc-button-active-border: 1px solid var(--ng-doc-base-5)}\n"] }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/ng-doc-ui-kit-components-button-icon.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-doc-ui-kit-components-button-icon.mjs","sources":["../../../../libs/ui-kit/components/button-icon/button-icon.component.ts","../../../../libs/ui-kit/components/button-icon/button-icon.component.html","../../../../libs/ui-kit/components/button-icon/ng-doc-ui-kit-components-button-icon.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';\nimport { NgDocSize } from '@ng-doc/ui-kit/types';\n\n@Component({\n  selector:\n    'button[ng-doc-button-icon], a[ng-doc-button-icon], button[ng-doc-button-icon-raised], a[ng-doc-button-icon-raised], button[ng-doc-button-icon-transparent], a[ng-doc-button-icon-transparent]',\n  templateUrl: './button-icon.component.html',\n  styleUrls: ['./button-icon.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true,\n})\nexport class NgDocButtonIconComponent {\n  @Input()\n  @HostBinding('attr.data-ng-doc-size')\n  size: NgDocSize = 'medium';\n\n  @Input()\n  @HostBinding('attr.data-ng-doc-rounded')\n  rounded: boolean = true;\n}\n","<ng-content></ng-content>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAWa,wBAAwB,CAAA;AARrC,IAAA,WAAA,GAAA;QAWE,IAAA,CAAA,IAAI,GAAc,QAAQ;QAI1B,IAAA,CAAA,OAAO,GAAY,IAAI;AACxB,IAAA;8GARY,wBAAwB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAxB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,wBAAwB,mZCXrC,6BACA,EAAA,MAAA,EAAA,CAAA,4tDAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FDUa,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBARpC,SAAS;AAEN,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,+LAA+L,EAAA,eAAA,EAGhL,uBAAuB,CAAC,MAAM,cACnC,IAAI,EAAA,QAAA,EAAA,6BAAA,EAAA,MAAA,EAAA,CAAA,4tDAAA,CAAA,EAAA;;sBAGf;;sBACA,WAAW;uBAAC,uBAAuB;;sBAGnC;;sBACA,WAAW;uBAAC,0BAA0B;;;AEjBzC;;AAEG;;;;"}
+{"version":3,"file":"ng-doc-ui-kit-components-button-icon.mjs","sources":["../../../../libs/ui-kit/components/button-icon/button-icon.component.ts","../../../../libs/ui-kit/components/button-icon/button-icon.component.html","../../../../libs/ui-kit/components/button-icon/ng-doc-ui-kit-components-button-icon.ts"],"sourcesContent":["import { booleanAttribute, ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { NgDocSize } from '@ng-doc/ui-kit/types';\n\n/**\n * A square button that holds a single icon.\n *\n * The `large` size is the 36px header button. Set `[rounded]=\"false\"` for the rounded-square\n * shape of the NgDoc header.\n * @example\n * ```html\n * <button ng-doc-button-icon size=\"large\" [rounded]=\"false\" aria-label=\"Open menu\">\n *   <ng-doc-icon icon=\"menu\" />\n * </button>\n * ```\n */\n@Component({\n  selector:\n    'button[ng-doc-button-icon], a[ng-doc-button-icon], button[ng-doc-button-icon-raised], a[ng-doc-button-icon-raised], button[ng-doc-button-icon-transparent], a[ng-doc-button-icon-transparent]',\n  templateUrl: './button-icon.component.html',\n  styleUrls: ['./button-icon.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[attr.data-ng-doc-size]': 'size()',\n    '[attr.data-ng-doc-rounded]': 'rounded()',\n  },\n})\nexport class NgDocButtonIconComponent {\n  /**\n   * Size of the button: `small` (24px), `medium` (32px) or `large` (36px).\n   */\n  readonly size = input<NgDocSize>('medium');\n\n  /**\n   * Whether the button is a circle. When `false`, it is a rounded square.\n   */\n  readonly rounded = input<boolean, unknown>(true, { transform: booleanAttribute });\n}\n","<ng-content></ng-content>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAGA;;;;;;;;;;;AAWG;MAYU,wBAAwB,CAAA;AAXrC,IAAA,WAAA,GAAA;AAYE;;AAEG;QACM,IAAA,CAAA,IAAI,GAAG,KAAK,CAAY,QAAQ;iFAAC;AAE1C;;AAEG;QACM,IAAA,CAAA,OAAO,GAAG,KAAK,CAAmB,IAAI,+EAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAClF,IAAA;8GAVY,wBAAwB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAxB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,wBAAwB,8lBC1BrC,6BACA,EAAA,MAAA,EAAA,CAAA,27DAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FDyBa,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBAXpC,SAAS;AAEN,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,+LAA+L,EAAA,eAAA,EAGhL,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC;AACJ,wBAAA,yBAAyB,EAAE,QAAQ;AACnC,wBAAA,4BAA4B,EAAE,WAAW;AAC1C,qBAAA,EAAA,QAAA,EAAA,6BAAA,EAAA,MAAA,EAAA,CAAA,27DAAA,CAAA,EAAA;;;AExBH;;AAEG;;;;"}

package/fesm2022/ng-doc-ui-kit-components-button-toggle.mjs

@@ -1,7 +1,11 @@
 import * as i0 from '@angular/core';
-import { HostListener, ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { DIStateControl, injectHostControl } from 'di-controls';
 
+/**
+ * Button that checks its `value` in the host control (for example `ngDocRadioGroup`) when
+ * clicked, and unchecks it when clicked again.
+ */
 class NgDocButtonToggleComponent extends DIStateControl {
     constructor() {
         super({
@@ -11,16 +15,15 @@ class NgDocButtonToggleComponent extends DIStateControl {
     clickEvent() {
         this.updateModel(this.checked() ? null : this.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocButtonToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: NgDocButtonToggleComponent, isStandalone: true, selector: "[ng-doc-button-toggle]", host: { listeners: { "click": "clickEvent()" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{font-family:var(--ng-doc-font-family);font-variant:no-contextual;color:var(--ng-doc-text);line-height:var(--ng-doc-line-height);font-size:var(--ng-doc-font-size);font-weight:var(--ng-doc-font-weight);position:relative;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border-radius:calc(var(--ng-doc-base-gutter) / 2);border:1px solid var(--ng-doc-button-border-color, transparent);padding:var(--ng-doc-button-padding, calc(var(--ng-doc-base-gutter) / 2) var(--ng-doc-base-gutter));background:var(--ng-doc-button-background)}:host:hover{text-decoration:none;border:1px solid var(--ng-doc-button-hover-border-color, var(--ng-doc-base-3))}:host[aria-checked=true]{border:1px solid var(--ng-doc-button-hover-border-color, var(--ng-doc-base-3));background:var(--ng-doc-button-checked-background, var(--ng-doc-base-1));--ng-doc-text: var(--ng-doc-heading-color)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocButtonToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.2.1", type: NgDocButtonToggleComponent, isStandalone: true, selector: "[ng-doc-button-toggle]", host: { listeners: { "click": "clickEvent()" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{font-family:var(--ng-doc-font-family);font-variant:no-contextual;color:var(--ng-doc-text);line-height:var(--ng-doc-line-height);font-size:var(--ng-doc-font-size);font-weight:var(--ng-doc-font-weight);position:relative;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border-radius:calc(var(--ng-doc-base-gutter) / 2);border:1px solid var(--ng-doc-button-border-color, transparent);padding:var(--ng-doc-button-padding, calc(var(--ng-doc-base-gutter) / 2) var(--ng-doc-base-gutter));background:var(--ng-doc-button-background)}:host:hover{text-decoration:none;border:1px solid var(--ng-doc-button-hover-border-color, var(--ng-doc-base-3))}:host[aria-checked=true]{border:1px solid var(--ng-doc-button-hover-border-color, var(--ng-doc-base-3));background:var(--ng-doc-button-checked-background, var(--ng-doc-base-1));--ng-doc-text: var(--ng-doc-heading-color)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocButtonToggleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocButtonToggleComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[ng-doc-button-toggle]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{font-family:var(--ng-doc-font-family);font-variant:no-contextual;color:var(--ng-doc-text);line-height:var(--ng-doc-line-height);font-size:var(--ng-doc-font-size);font-weight:var(--ng-doc-font-weight);position:relative;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border-radius:calc(var(--ng-doc-base-gutter) / 2);border:1px solid var(--ng-doc-button-border-color, transparent);padding:var(--ng-doc-button-padding, calc(var(--ng-doc-base-gutter) / 2) var(--ng-doc-base-gutter));background:var(--ng-doc-button-background)}:host:hover{text-decoration:none;border:1px solid var(--ng-doc-button-hover-border-color, var(--ng-doc-base-3))}:host[aria-checked=true]{border:1px solid var(--ng-doc-button-hover-border-color, var(--ng-doc-base-3));background:var(--ng-doc-button-checked-background, var(--ng-doc-base-1));--ng-doc-text: var(--ng-doc-heading-color)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { clickEvent: [{
-                type: HostListener,
-                args: ['click']
-            }] } });
+            args: [{ selector: '[ng-doc-button-toggle]', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '(click)': 'clickEvent()',
+                    }, template: "<ng-content></ng-content>\n", styles: [":host{font-family:var(--ng-doc-font-family);font-variant:no-contextual;color:var(--ng-doc-text);line-height:var(--ng-doc-line-height);font-size:var(--ng-doc-font-size);font-weight:var(--ng-doc-font-weight);position:relative;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border-radius:calc(var(--ng-doc-base-gutter) / 2);border:1px solid var(--ng-doc-button-border-color, transparent);padding:var(--ng-doc-button-padding, calc(var(--ng-doc-base-gutter) / 2) var(--ng-doc-base-gutter));background:var(--ng-doc-button-background)}:host:hover{text-decoration:none;border:1px solid var(--ng-doc-button-hover-border-color, var(--ng-doc-base-3))}:host[aria-checked=true]{border:1px solid var(--ng-doc-button-hover-border-color, var(--ng-doc-base-3));background:var(--ng-doc-button-checked-background, var(--ng-doc-base-1));--ng-doc-text: var(--ng-doc-heading-color)}\n"] }]
+        }], ctorParameters: () => [] });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/ng-doc-ui-kit-components-button-toggle.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-doc-ui-kit-components-button-toggle.mjs","sources":["../../../../libs/ui-kit/components/button-toggle/button-toggle.component.ts","../../../../libs/ui-kit/components/button-toggle/button-toggle.component.html","../../../../libs/ui-kit/components/button-toggle/ng-doc-ui-kit-components-button-toggle.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, HostListener } from '@angular/core';\nimport { DIStateControl, injectHostControl } from 'di-controls';\n\n@Component({\n  selector: '[ng-doc-button-toggle]',\n  standalone: true,\n  templateUrl: './button-toggle.component.html',\n  styleUrl: './button-toggle.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NgDocButtonToggleComponent<T> extends DIStateControl<T> {\n  constructor() {\n    super({\n      host: injectHostControl(),\n    });\n  }\n\n  @HostListener('click')\n  clickEvent() {\n    this.updateModel(this.checked() ? null : this.value);\n  }\n}\n","<ng-content></ng-content>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAUM,MAAO,0BAA8B,SAAQ,cAAiB,CAAA;AAClE,IAAA,WAAA,GAAA;AACE,QAAA,KAAK,CAAC;YACJ,IAAI,EAAE,iBAAiB,EAAE;AAC1B,SAAA,CAAC;IACJ;IAGA,UAAU,GAAA;AACR,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC;IACtD;8GAVW,0BAA0B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAA1B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,0BAA0B,2JCVvC,6BACA,EAAA,MAAA,EAAA,CAAA,83BAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FDSa,0BAA0B,EAAA,UAAA,EAAA,CAAA;kBAPtC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,wBAAwB,EAAA,UAAA,EACtB,IAAI,EAAA,eAAA,EAGC,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,6BAAA,EAAA,MAAA,EAAA,CAAA,83BAAA,CAAA,EAAA;;sBAS9C,YAAY;uBAAC,OAAO;;;AEjBvB;;AAEG;;;;"}
+{"version":3,"file":"ng-doc-ui-kit-components-button-toggle.mjs","sources":["../../../../libs/ui-kit/components/button-toggle/button-toggle.component.ts","../../../../libs/ui-kit/components/button-toggle/button-toggle.component.html","../../../../libs/ui-kit/components/button-toggle/ng-doc-ui-kit-components-button-toggle.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { DIStateControl, injectHostControl } from 'di-controls';\n\n/**\n * Button that checks its `value` in the host control (for example `ngDocRadioGroup`) when\n * clicked, and unchecks it when clicked again.\n */\n@Component({\n  selector: '[ng-doc-button-toggle]',\n  templateUrl: './button-toggle.component.html',\n  styleUrl: './button-toggle.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '(click)': 'clickEvent()',\n  },\n})\nexport class NgDocButtonToggleComponent<T> extends DIStateControl<T> {\n  constructor() {\n    super({\n      host: injectHostControl(),\n    });\n  }\n\n  protected clickEvent(): void {\n    this.updateModel(this.checked() ? null : this.value);\n  }\n}\n","<ng-content></ng-content>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAGA;;;AAGG;AAUG,MAAO,0BAA8B,SAAQ,cAAiB,CAAA;AAClE,IAAA,WAAA,GAAA;AACE,QAAA,KAAK,CAAC;YACJ,IAAI,EAAE,iBAAiB,EAAE;AAC1B,SAAA,CAAC;IACJ;IAEU,UAAU,GAAA;AAClB,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC;IACtD;8GATW,0BAA0B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAA1B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,0BAA0B,2JChBvC,6BACA,EAAA,MAAA,EAAA,CAAA,83BAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FDea,0BAA0B,EAAA,UAAA,EAAA,CAAA;kBATtC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,wBAAwB,EAAA,eAAA,EAGjB,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC;AACJ,wBAAA,SAAS,EAAE,cAAc;AAC1B,qBAAA,EAAA,QAAA,EAAA,6BAAA,EAAA,MAAA,EAAA,CAAA,83BAAA,CAAA,EAAA;;;AEdH;;AAEG;;;;"}

package/fesm2022/ng-doc-ui-kit-components-button.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Input, HostBinding, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, booleanAttribute, ChangeDetectionStrategy, Component } from '@angular/core';
 
 /**
  * `NgDocButtonComponent` is a reusable button component with customizable properties.
@@ -15,40 +15,31 @@ class NgDocButtonComponent {
          * Size of the button. Can be 'small', 'medium', or 'large'.
          * Default is 'small'.
          */
-        this.size = 'small';
+        this.size = input('small', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
         /**
          * Color of the button. Can be 'primary', 'secondary', etc.
          * Default is 'primary'.
          */
-        this.color = 'primary';
+        this.color = input('primary', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
         /**
          * Whether the button is rounded or not.
          * Default is false.
          */
-        this.rounded = false;
+        this.rounded = input(false, { ...(ngDevMode ? { debugName: "rounded" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: NgDocButtonComponent, isStandalone: true, selector: "button[ng-doc-button], a[ng-doc-button], button[ng-doc-button-flat], a[ng-doc-button-flat], button[ng-doc-button-text], a[ng-doc-button-text]", inputs: { size: "size", color: "color", rounded: "rounded" }, host: { properties: { "attr.data-ng-doc-size": "this.size", "attr.data-ng-doc-color": "this.color", "attr.data-ng-doc-rounded": "this.rounded" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host{font-family:var(--ng-doc-font-family);font-variant:no-contextual;color:var(--ng-doc-text);line-height:var(--ng-doc-line-height);font-size:var(--ng-doc-font-size);font-weight:var(--ng-doc-font-weight);position:relative;display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer;border-radius:calc(var(--ng-doc-base-gutter) / 2);padding:var(--ng-doc-button-padding, var(--ng-doc-base-gutter) calc(var(--ng-doc-base-gutter) * 2));text-decoration:none;background:color-mix(in srgb,var(--ng-doc-button-background) var(--ng-doc-button-background-opacity, 100%),transparent);--ng-doc-text: var(--ng-doc-button-color);--ng-doc-font-size: calc(var(--ng-doc-base-gutter) * 2);--ng-doc-line-height: calc(var(--ng-doc-base-gutter) * 3);--ng-doc-icon-color: var(--ng-doc-button-color)}:host[data-ng-doc-rounded=true]{border-radius:calc(var(--ng-doc-base-gutter) * 5)}:host[data-ng-doc-size=small]{--ng-doc-font-size: 14px;--ng-doc-line-height: 16px}:host[data-ng-doc-size=small][data-ng-doc-rounded=true]{border-radius:calc(var(--ng-doc-base-gutter) * 3)}:host[data-ng-doc-size=large]{--ng-doc-font-size: 20px;--ng-doc-font-weight: 700;--ng-doc-line-height: 32px}:host[data-ng-doc-size=large][data-ng-doc-rounded=true]{border-radius:calc(var(--ng-doc-base-gutter) * 5)}:host:hover{text-decoration:none;--ng-doc-button-background-opacity: var(--ng-doc-button-hover-background-opacity) !important;--ng-doc-button-color: var(--ng-doc-button-hover-color) !important}:host:active{--ng-doc-button-background-opacity: var(--ng-doc-button-active-background-opacity) !important;--ng-doc-button-color: var(--ng-doc-button-active-color) !important}:host[ng-doc-button]{--ng-doc-button-background-opacity: 10%;--ng-doc-button-hover-background-opacity: 20%;--ng-doc-button-active-background-opacity: 30%}:host[ng-doc-button][data-ng-doc-color=primary]{--ng-doc-button-background: var(--ng-doc-primary);--ng-doc-button-color: var(--ng-doc-primary);--ng-doc-button-hover-color: var(--ng-doc-primary);--ng-doc-button-active-color: var(--ng-doc-primary)}:host[ng-doc-button][data-ng-doc-color=info]{--ng-doc-button-background: var(--ng-doc-info);--ng-doc-button-color: var(--ng-doc-info);--ng-doc-button-hover-color: var(--ng-doc-info);--ng-doc-button-active-color: var(--ng-doc-info)}:host[ng-doc-button][data-ng-doc-color=warning]{--ng-doc-button-background: var(--ng-doc-warning);--ng-doc-button-color: var(--ng-doc-warning);--ng-doc-button-hover-color: var(--ng-doc-warning);--ng-doc-button-active-color: var(--ng-doc-warning)}:host[ng-doc-button][data-ng-doc-color=alert]{--ng-doc-button-background: var(--ng-doc-alert);--ng-doc-button-color: var(--ng-doc-alert);--ng-doc-button-hover-color: var(--ng-doc-alert);--ng-doc-button-active-color: var(--ng-doc-alert)}:host[ng-doc-button][data-ng-doc-color=link]{--ng-doc-button-background: var(--ng-doc-link-color);--ng-doc-button-color: var(--ng-doc-link-color);--ng-doc-button-hover-color: var(--ng-doc-link-color);--ng-doc-button-active-color: var(--ng-doc-link-color)}:host[ng-doc-button][data-ng-doc-color=success]{--ng-doc-button-background: var(--ng-doc-success);--ng-doc-button-color: var(--ng-doc-success);--ng-doc-button-hover-color: var(--ng-doc-success);--ng-doc-button-active-color: var(--ng-doc-success)}:host[ng-doc-button-text]{--ng-doc-button-hover-background-opacity: 10%;--ng-doc-button-active-background-opacity: 20%}:host[ng-doc-button-text][data-ng-doc-color=primary]{--ng-doc-button-background: var(--ng-doc-primary);--ng-doc-button-color: var(--ng-doc-primary);--ng-doc-button-hover-color: var(--ng-doc-primary);--ng-doc-button-active-color: var(--ng-doc-primary)}:host[ng-doc-button-text][data-ng-doc-color=info]{--ng-doc-button-background: var(--ng-doc-info);--ng-doc-button-color: var(--ng-doc-info);--ng-doc-button-hover-color: var(--ng-doc-info);--ng-doc-button-active-color: var(--ng-doc-info)}:host[ng-doc-button-text][data-ng-doc-color=warning]{--ng-doc-button-background: var(--ng-doc-warning);--ng-doc-button-color: var(--ng-doc-warning);--ng-doc-button-hover-color: var(--ng-doc-warning);--ng-doc-button-active-color: var(--ng-doc-warning)}:host[ng-doc-button-text][data-ng-doc-color=alert]{--ng-doc-button-background: var(--ng-doc-alert);--ng-doc-button-color: var(--ng-doc-alert);--ng-doc-button-hover-color: var(--ng-doc-alert);--ng-doc-button-active-color: var(--ng-doc-alert)}:host[ng-doc-button-text][data-ng-doc-color=link]{--ng-doc-button-background: var(--ng-doc-link-color);--ng-doc-button-color: var(--ng-doc-link-color);--ng-doc-button-hover-color: var(--ng-doc-link-color);--ng-doc-button-active-color: var(--ng-doc-link-color)}:host[ng-doc-button-text][data-ng-doc-color=success]{--ng-doc-button-background: var(--ng-doc-success);--ng-doc-button-color: var(--ng-doc-success);--ng-doc-button-hover-color: var(--ng-doc-success);--ng-doc-button-active-color: var(--ng-doc-success)}:host[ng-doc-button-flat]{background:color-mix(in srgb,var(--ng-doc-button-background),black var(--ng-doc-button-background-opacity));--ng-doc-button-background: var(--ng-doc-white);--ng-doc-button-background-opacity: 0%;--ng-doc-button-hover-background-opacity: 10%;--ng-doc-button-active-background-opacity: 20%}:host[ng-doc-button-flat][data-ng-doc-color=primary]{--ng-doc-button-background: var(--ng-doc-primary);--ng-doc-button-color: var(--ng-doc-primary-text);--ng-doc-button-hover-color: var(--ng-doc-primary-text);--ng-doc-button-active-color: var(--ng-doc-primary-text)}:host[ng-doc-button-flat][data-ng-doc-color=info]{--ng-doc-button-background: var(--ng-doc-info);--ng-doc-button-color: var(--ng-doc-info-text);--ng-doc-button-hover-color: var(--ng-doc-info-text);--ng-doc-button-active-color: var(--ng-doc-info-text)}:host[ng-doc-button-flat][data-ng-doc-color=warning]{--ng-doc-button-background: var(--ng-doc-warning);--ng-doc-button-color: var(--ng-doc-warning-text);--ng-doc-button-hover-color: var(--ng-doc-warning-text);--ng-doc-button-active-color: var(--ng-doc-warning-text)}:host[ng-doc-button-flat][data-ng-doc-color=alert]{--ng-doc-button-background: var(--ng-doc-alert);--ng-doc-button-color: var(--ng-doc-alert-text);--ng-doc-button-hover-color: var(--ng-doc-alert-text);--ng-doc-button-active-color: var(--ng-doc-alert-text)}:host[ng-doc-button-flat][data-ng-doc-color=link]{--ng-doc-button-background: var(--ng-doc-link-color);--ng-doc-button-color: var(--ng-doc-primary-text);--ng-doc-button-hover-color: var(--ng-doc-primary-text);--ng-doc-button-active-color: var(--ng-doc-primary-text)}:host[ng-doc-button-flat][data-ng-doc-color=success]{--ng-doc-button-background: var(--ng-doc-success);--ng-doc-button-color: var(--ng-doc-success-text);--ng-doc-button-hover-color: var(--ng-doc-success-text);--ng-doc-button-active-color: var(--ng-doc-success-text)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.1", type: NgDocButtonComponent, isStandalone: true, selector: "button[ng-doc-button], a[ng-doc-button], button[ng-doc-button-flat], a[ng-doc-button-flat], button[ng-doc-button-text], a[ng-doc-button-text]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-ng-doc-size": "size()", "attr.data-ng-doc-color": "color()", "attr.data-ng-doc-rounded": "rounded()" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host{font-family:var(--ng-doc-font-family);font-variant:no-contextual;color:var(--ng-doc-text);line-height:var(--ng-doc-line-height);font-size:var(--ng-doc-font-size);font-weight:var(--ng-doc-font-weight);position:relative;display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer;border-radius:calc(var(--ng-doc-base-gutter) / 2);padding:var(--ng-doc-button-padding, var(--ng-doc-base-gutter) calc(var(--ng-doc-base-gutter) * 2));text-decoration:none;background:color-mix(in srgb,var(--ng-doc-button-background) var(--ng-doc-button-background-opacity, 100%),transparent);--ng-doc-text: var(--ng-doc-button-color);--ng-doc-font-size: calc(var(--ng-doc-base-gutter) * 2);--ng-doc-line-height: calc(var(--ng-doc-base-gutter) * 3);--ng-doc-icon-color: var(--ng-doc-button-color)}:host[data-ng-doc-rounded=true]{border-radius:calc(var(--ng-doc-base-gutter) * 5)}:host[data-ng-doc-size=small]{--ng-doc-font-size: 14px;--ng-doc-line-height: 16px}:host[data-ng-doc-size=small][data-ng-doc-rounded=true]{border-radius:calc(var(--ng-doc-base-gutter) * 3)}:host[data-ng-doc-size=large]{--ng-doc-font-size: 20px;--ng-doc-font-weight: 700;--ng-doc-line-height: 32px}:host[data-ng-doc-size=large][data-ng-doc-rounded=true]{border-radius:calc(var(--ng-doc-base-gutter) * 5)}:host:focus-visible{outline:none;box-shadow:var(--ng-doc-focus-ring)}:host:hover{text-decoration:none;--ng-doc-button-background-opacity: var(--ng-doc-button-hover-background-opacity) !important;--ng-doc-button-color: var(--ng-doc-button-hover-color) !important}:host:active{--ng-doc-button-background-opacity: var(--ng-doc-button-active-background-opacity) !important;--ng-doc-button-color: var(--ng-doc-button-active-color) !important}:host[ng-doc-button]{--ng-doc-button-background-opacity: 10%;--ng-doc-button-hover-background-opacity: 20%;--ng-doc-button-active-background-opacity: 30%}:host[ng-doc-button][data-ng-doc-color=primary]{--ng-doc-button-background: var(--ng-doc-primary);--ng-doc-button-color: var(--ng-doc-primary);--ng-doc-button-hover-color: var(--ng-doc-primary);--ng-doc-button-active-color: var(--ng-doc-primary)}:host[ng-doc-button][data-ng-doc-color=info]{--ng-doc-button-background: var(--ng-doc-info);--ng-doc-button-color: var(--ng-doc-info);--ng-doc-button-hover-color: var(--ng-doc-info);--ng-doc-button-active-color: var(--ng-doc-info)}:host[ng-doc-button][data-ng-doc-color=warning]{--ng-doc-button-background: var(--ng-doc-warning);--ng-doc-button-color: var(--ng-doc-warning);--ng-doc-button-hover-color: var(--ng-doc-warning);--ng-doc-button-active-color: var(--ng-doc-warning)}:host[ng-doc-button][data-ng-doc-color=alert]{--ng-doc-button-background: var(--ng-doc-alert);--ng-doc-button-color: var(--ng-doc-alert);--ng-doc-button-hover-color: var(--ng-doc-alert);--ng-doc-button-active-color: var(--ng-doc-alert)}:host[ng-doc-button][data-ng-doc-color=link]{--ng-doc-button-background: var(--ng-doc-link-color);--ng-doc-button-color: var(--ng-doc-link-color);--ng-doc-button-hover-color: var(--ng-doc-link-color);--ng-doc-button-active-color: var(--ng-doc-link-color)}:host[ng-doc-button][data-ng-doc-color=success]{--ng-doc-button-background: var(--ng-doc-success);--ng-doc-button-color: var(--ng-doc-success);--ng-doc-button-hover-color: var(--ng-doc-success);--ng-doc-button-active-color: var(--ng-doc-success)}:host[ng-doc-button-text]{--ng-doc-button-hover-background-opacity: 10%;--ng-doc-button-active-background-opacity: 20%}:host[ng-doc-button-text][data-ng-doc-color=primary]{--ng-doc-button-background: var(--ng-doc-primary);--ng-doc-button-color: var(--ng-doc-primary);--ng-doc-button-hover-color: var(--ng-doc-primary);--ng-doc-button-active-color: var(--ng-doc-primary)}:host[ng-doc-button-text][data-ng-doc-color=info]{--ng-doc-button-background: var(--ng-doc-info);--ng-doc-button-color: var(--ng-doc-info);--ng-doc-button-hover-color: var(--ng-doc-info);--ng-doc-button-active-color: var(--ng-doc-info)}:host[ng-doc-button-text][data-ng-doc-color=warning]{--ng-doc-button-background: var(--ng-doc-warning);--ng-doc-button-color: var(--ng-doc-warning);--ng-doc-button-hover-color: var(--ng-doc-warning);--ng-doc-button-active-color: var(--ng-doc-warning)}:host[ng-doc-button-text][data-ng-doc-color=alert]{--ng-doc-button-background: var(--ng-doc-alert);--ng-doc-button-color: var(--ng-doc-alert);--ng-doc-button-hover-color: var(--ng-doc-alert);--ng-doc-button-active-color: var(--ng-doc-alert)}:host[ng-doc-button-text][data-ng-doc-color=link]{--ng-doc-button-background: var(--ng-doc-link-color);--ng-doc-button-color: var(--ng-doc-link-color);--ng-doc-button-hover-color: var(--ng-doc-link-color);--ng-doc-button-active-color: var(--ng-doc-link-color)}:host[ng-doc-button-text][data-ng-doc-color=success]{--ng-doc-button-background: var(--ng-doc-success);--ng-doc-button-color: var(--ng-doc-success);--ng-doc-button-hover-color: var(--ng-doc-success);--ng-doc-button-active-color: var(--ng-doc-success)}:host[ng-doc-button-flat]{background:color-mix(in srgb,var(--ng-doc-button-background),black var(--ng-doc-button-background-opacity));--ng-doc-button-background: var(--ng-doc-white);--ng-doc-button-background-opacity: 0%;--ng-doc-button-hover-background-opacity: 10%;--ng-doc-button-active-background-opacity: 20%}:host[ng-doc-button-flat][data-ng-doc-color=primary]{--ng-doc-button-background: var(--ng-doc-primary);--ng-doc-button-color: var(--ng-doc-primary-text);--ng-doc-button-hover-color: var(--ng-doc-primary-text);--ng-doc-button-active-color: var(--ng-doc-primary-text)}:host[ng-doc-button-flat][data-ng-doc-color=info]{--ng-doc-button-background: var(--ng-doc-info);--ng-doc-button-color: var(--ng-doc-info-text);--ng-doc-button-hover-color: var(--ng-doc-info-text);--ng-doc-button-active-color: var(--ng-doc-info-text)}:host[ng-doc-button-flat][data-ng-doc-color=warning]{--ng-doc-button-background: var(--ng-doc-warning);--ng-doc-button-color: var(--ng-doc-warning-text);--ng-doc-button-hover-color: var(--ng-doc-warning-text);--ng-doc-button-active-color: var(--ng-doc-warning-text)}:host[ng-doc-button-flat][data-ng-doc-color=alert]{--ng-doc-button-background: var(--ng-doc-alert);--ng-doc-button-color: var(--ng-doc-alert-text);--ng-doc-button-hover-color: var(--ng-doc-alert-text);--ng-doc-button-active-color: var(--ng-doc-alert-text)}:host[ng-doc-button-flat][data-ng-doc-color=link]{--ng-doc-button-background: var(--ng-doc-link-color);--ng-doc-button-color: var(--ng-doc-primary-text);--ng-doc-button-hover-color: var(--ng-doc-primary-text);--ng-doc-button-active-color: var(--ng-doc-primary-text)}:host[ng-doc-button-flat][data-ng-doc-color=success]{--ng-doc-button-background: var(--ng-doc-success);--ng-doc-button-color: var(--ng-doc-success-text);--ng-doc-button-hover-color: var(--ng-doc-success-text);--ng-doc-button-active-color: var(--ng-doc-success-text)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'button[ng-doc-button], a[ng-doc-button], button[ng-doc-button-flat], a[ng-doc-button-flat], button[ng-doc-button-text], a[ng-doc-button-text]', template: `<ng-content></ng-content>`, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, styles: [":host{font-family:var(--ng-doc-font-family);font-variant:no-contextual;color:var(--ng-doc-text);line-height:var(--ng-doc-line-height);font-size:var(--ng-doc-font-size);font-weight:var(--ng-doc-font-weight);position:relative;display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer;border-radius:calc(var(--ng-doc-base-gutter) / 2);padding:var(--ng-doc-button-padding, var(--ng-doc-base-gutter) calc(var(--ng-doc-base-gutter) * 2));text-decoration:none;background:color-mix(in srgb,var(--ng-doc-button-background) var(--ng-doc-button-background-opacity, 100%),transparent);--ng-doc-text: var(--ng-doc-button-color);--ng-doc-font-size: calc(var(--ng-doc-base-gutter) * 2);--ng-doc-line-height: calc(var(--ng-doc-base-gutter) * 3);--ng-doc-icon-color: var(--ng-doc-button-color)}:host[data-ng-doc-rounded=true]{border-radius:calc(var(--ng-doc-base-gutter) * 5)}:host[data-ng-doc-size=small]{--ng-doc-font-size: 14px;--ng-doc-line-height: 16px}:host[data-ng-doc-size=small][data-ng-doc-rounded=true]{border-radius:calc(var(--ng-doc-base-gutter) * 3)}:host[data-ng-doc-size=large]{--ng-doc-font-size: 20px;--ng-doc-font-weight: 700;--ng-doc-line-height: 32px}:host[data-ng-doc-size=large][data-ng-doc-rounded=true]{border-radius:calc(var(--ng-doc-base-gutter) * 5)}:host:hover{text-decoration:none;--ng-doc-button-background-opacity: var(--ng-doc-button-hover-background-opacity) !important;--ng-doc-button-color: var(--ng-doc-button-hover-color) !important}:host:active{--ng-doc-button-background-opacity: var(--ng-doc-button-active-background-opacity) !important;--ng-doc-button-color: var(--ng-doc-button-active-color) !important}:host[ng-doc-button]{--ng-doc-button-background-opacity: 10%;--ng-doc-button-hover-background-opacity: 20%;--ng-doc-button-active-background-opacity: 30%}:host[ng-doc-button][data-ng-doc-color=primary]{--ng-doc-button-background: var(--ng-doc-primary);--ng-doc-button-color: var(--ng-doc-primary);--ng-doc-button-hover-color: var(--ng-doc-primary);--ng-doc-button-active-color: var(--ng-doc-primary)}:host[ng-doc-button][data-ng-doc-color=info]{--ng-doc-button-background: var(--ng-doc-info);--ng-doc-button-color: var(--ng-doc-info);--ng-doc-button-hover-color: var(--ng-doc-info);--ng-doc-button-active-color: var(--ng-doc-info)}:host[ng-doc-button][data-ng-doc-color=warning]{--ng-doc-button-background: var(--ng-doc-warning);--ng-doc-button-color: var(--ng-doc-warning);--ng-doc-button-hover-color: var(--ng-doc-warning);--ng-doc-button-active-color: var(--ng-doc-warning)}:host[ng-doc-button][data-ng-doc-color=alert]{--ng-doc-button-background: var(--ng-doc-alert);--ng-doc-button-color: var(--ng-doc-alert);--ng-doc-button-hover-color: var(--ng-doc-alert);--ng-doc-button-active-color: var(--ng-doc-alert)}:host[ng-doc-button][data-ng-doc-color=link]{--ng-doc-button-background: var(--ng-doc-link-color);--ng-doc-button-color: var(--ng-doc-link-color);--ng-doc-button-hover-color: var(--ng-doc-link-color);--ng-doc-button-active-color: var(--ng-doc-link-color)}:host[ng-doc-button][data-ng-doc-color=success]{--ng-doc-button-background: var(--ng-doc-success);--ng-doc-button-color: var(--ng-doc-success);--ng-doc-button-hover-color: var(--ng-doc-success);--ng-doc-button-active-color: var(--ng-doc-success)}:host[ng-doc-button-text]{--ng-doc-button-hover-background-opacity: 10%;--ng-doc-button-active-background-opacity: 20%}:host[ng-doc-button-text][data-ng-doc-color=primary]{--ng-doc-button-background: var(--ng-doc-primary);--ng-doc-button-color: var(--ng-doc-primary);--ng-doc-button-hover-color: var(--ng-doc-primary);--ng-doc-button-active-color: var(--ng-doc-primary)}:host[ng-doc-button-text][data-ng-doc-color=info]{--ng-doc-button-background: var(--ng-doc-info);--ng-doc-button-color: var(--ng-doc-info);--ng-doc-button-hover-color: var(--ng-doc-info);--ng-doc-button-active-color: var(--ng-doc-info)}:host[ng-doc-button-text][data-ng-doc-color=warning]{--ng-doc-button-background: var(--ng-doc-warning);--ng-doc-button-color: var(--ng-doc-warning);--ng-doc-button-hover-color: var(--ng-doc-warning);--ng-doc-button-active-color: var(--ng-doc-warning)}:host[ng-doc-button-text][data-ng-doc-color=alert]{--ng-doc-button-background: var(--ng-doc-alert);--ng-doc-button-color: var(--ng-doc-alert);--ng-doc-button-hover-color: var(--ng-doc-alert);--ng-doc-button-active-color: var(--ng-doc-alert)}:host[ng-doc-button-text][data-ng-doc-color=link]{--ng-doc-button-background: var(--ng-doc-link-color);--ng-doc-button-color: var(--ng-doc-link-color);--ng-doc-button-hover-color: var(--ng-doc-link-color);--ng-doc-button-active-color: var(--ng-doc-link-color)}:host[ng-doc-button-text][data-ng-doc-color=success]{--ng-doc-button-background: var(--ng-doc-success);--ng-doc-button-color: var(--ng-doc-success);--ng-doc-button-hover-color: var(--ng-doc-success);--ng-doc-button-active-color: var(--ng-doc-success)}:host[ng-doc-button-flat]{background:color-mix(in srgb,var(--ng-doc-button-background),black var(--ng-doc-button-background-opacity));--ng-doc-button-background: var(--ng-doc-white);--ng-doc-button-background-opacity: 0%;--ng-doc-button-hover-background-opacity: 10%;--ng-doc-button-active-background-opacity: 20%}:host[ng-doc-button-flat][data-ng-doc-color=primary]{--ng-doc-button-background: var(--ng-doc-primary);--ng-doc-button-color: var(--ng-doc-primary-text);--ng-doc-button-hover-color: var(--ng-doc-primary-text);--ng-doc-button-active-color: var(--ng-doc-primary-text)}:host[ng-doc-button-flat][data-ng-doc-color=info]{--ng-doc-button-background: var(--ng-doc-info);--ng-doc-button-color: var(--ng-doc-info-text);--ng-doc-button-hover-color: var(--ng-doc-info-text);--ng-doc-button-active-color: var(--ng-doc-info-text)}:host[ng-doc-button-flat][data-ng-doc-color=warning]{--ng-doc-button-background: var(--ng-doc-warning);--ng-doc-button-color: var(--ng-doc-warning-text);--ng-doc-button-hover-color: var(--ng-doc-warning-text);--ng-doc-button-active-color: var(--ng-doc-warning-text)}:host[ng-doc-button-flat][data-ng-doc-color=alert]{--ng-doc-button-background: var(--ng-doc-alert);--ng-doc-button-color: var(--ng-doc-alert-text);--ng-doc-button-hover-color: var(--ng-doc-alert-text);--ng-doc-button-active-color: var(--ng-doc-alert-text)}:host[ng-doc-button-flat][data-ng-doc-color=link]{--ng-doc-button-background: var(--ng-doc-link-color);--ng-doc-button-color: var(--ng-doc-primary-text);--ng-doc-button-hover-color: var(--ng-doc-primary-text);--ng-doc-button-active-color: var(--ng-doc-primary-text)}:host[ng-doc-button-flat][data-ng-doc-color=success]{--ng-doc-button-background: var(--ng-doc-success);--ng-doc-button-color: var(--ng-doc-success-text);--ng-doc-button-hover-color: var(--ng-doc-success-text);--ng-doc-button-active-color: var(--ng-doc-success-text)}\n"] }]
-        }], propDecorators: { size: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.data-ng-doc-size']
-            }], color: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.data-ng-doc-color']
-            }], rounded: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.data-ng-doc-rounded']
-            }] } });
+            args: [{ selector: 'button[ng-doc-button], a[ng-doc-button], button[ng-doc-button-flat], a[ng-doc-button-flat], button[ng-doc-button-text], a[ng-doc-button-text]', template: `<ng-content></ng-content>`, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[attr.data-ng-doc-size]': 'size()',
+                        '[attr.data-ng-doc-color]': 'color()',
+                        '[attr.data-ng-doc-rounded]': 'rounded()',
+                    }, styles: [":host{font-family:var(--ng-doc-font-family);font-variant:no-contextual;color:var(--ng-doc-text);line-height:var(--ng-doc-line-height);font-size:var(--ng-doc-font-size);font-weight:var(--ng-doc-font-weight);position:relative;display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer;border-radius:calc(var(--ng-doc-base-gutter) / 2);padding:var(--ng-doc-button-padding, var(--ng-doc-base-gutter) calc(var(--ng-doc-base-gutter) * 2));text-decoration:none;background:color-mix(in srgb,var(--ng-doc-button-background) var(--ng-doc-button-background-opacity, 100%),transparent);--ng-doc-text: var(--ng-doc-button-color);--ng-doc-font-size: calc(var(--ng-doc-base-gutter) * 2);--ng-doc-line-height: calc(var(--ng-doc-base-gutter) * 3);--ng-doc-icon-color: var(--ng-doc-button-color)}:host[data-ng-doc-rounded=true]{border-radius:calc(var(--ng-doc-base-gutter) * 5)}:host[data-ng-doc-size=small]{--ng-doc-font-size: 14px;--ng-doc-line-height: 16px}:host[data-ng-doc-size=small][data-ng-doc-rounded=true]{border-radius:calc(var(--ng-doc-base-gutter) * 3)}:host[data-ng-doc-size=large]{--ng-doc-font-size: 20px;--ng-doc-font-weight: 700;--ng-doc-line-height: 32px}:host[data-ng-doc-size=large][data-ng-doc-rounded=true]{border-radius:calc(var(--ng-doc-base-gutter) * 5)}:host:focus-visible{outline:none;box-shadow:var(--ng-doc-focus-ring)}:host:hover{text-decoration:none;--ng-doc-button-background-opacity: var(--ng-doc-button-hover-background-opacity) !important;--ng-doc-button-color: var(--ng-doc-button-hover-color) !important}:host:active{--ng-doc-button-background-opacity: var(--ng-doc-button-active-background-opacity) !important;--ng-doc-button-color: var(--ng-doc-button-active-color) !important}:host[ng-doc-button]{--ng-doc-button-background-opacity: 10%;--ng-doc-button-hover-background-opacity: 20%;--ng-doc-button-active-background-opacity: 30%}:host[ng-doc-button][data-ng-doc-color=primary]{--ng-doc-button-background: var(--ng-doc-primary);--ng-doc-button-color: var(--ng-doc-primary);--ng-doc-button-hover-color: var(--ng-doc-primary);--ng-doc-button-active-color: var(--ng-doc-primary)}:host[ng-doc-button][data-ng-doc-color=info]{--ng-doc-button-background: var(--ng-doc-info);--ng-doc-button-color: var(--ng-doc-info);--ng-doc-button-hover-color: var(--ng-doc-info);--ng-doc-button-active-color: var(--ng-doc-info)}:host[ng-doc-button][data-ng-doc-color=warning]{--ng-doc-button-background: var(--ng-doc-warning);--ng-doc-button-color: var(--ng-doc-warning);--ng-doc-button-hover-color: var(--ng-doc-warning);--ng-doc-button-active-color: var(--ng-doc-warning)}:host[ng-doc-button][data-ng-doc-color=alert]{--ng-doc-button-background: var(--ng-doc-alert);--ng-doc-button-color: var(--ng-doc-alert);--ng-doc-button-hover-color: var(--ng-doc-alert);--ng-doc-button-active-color: var(--ng-doc-alert)}:host[ng-doc-button][data-ng-doc-color=link]{--ng-doc-button-background: var(--ng-doc-link-color);--ng-doc-button-color: var(--ng-doc-link-color);--ng-doc-button-hover-color: var(--ng-doc-link-color);--ng-doc-button-active-color: var(--ng-doc-link-color)}:host[ng-doc-button][data-ng-doc-color=success]{--ng-doc-button-background: var(--ng-doc-success);--ng-doc-button-color: var(--ng-doc-success);--ng-doc-button-hover-color: var(--ng-doc-success);--ng-doc-button-active-color: var(--ng-doc-success)}:host[ng-doc-button-text]{--ng-doc-button-hover-background-opacity: 10%;--ng-doc-button-active-background-opacity: 20%}:host[ng-doc-button-text][data-ng-doc-color=primary]{--ng-doc-button-background: var(--ng-doc-primary);--ng-doc-button-color: var(--ng-doc-primary);--ng-doc-button-hover-color: var(--ng-doc-primary);--ng-doc-button-active-color: var(--ng-doc-primary)}:host[ng-doc-button-text][data-ng-doc-color=info]{--ng-doc-button-background: var(--ng-doc-info);--ng-doc-button-color: var(--ng-doc-info);--ng-doc-button-hover-color: var(--ng-doc-info);--ng-doc-button-active-color: var(--ng-doc-info)}:host[ng-doc-button-text][data-ng-doc-color=warning]{--ng-doc-button-background: var(--ng-doc-warning);--ng-doc-button-color: var(--ng-doc-warning);--ng-doc-button-hover-color: var(--ng-doc-warning);--ng-doc-button-active-color: var(--ng-doc-warning)}:host[ng-doc-button-text][data-ng-doc-color=alert]{--ng-doc-button-background: var(--ng-doc-alert);--ng-doc-button-color: var(--ng-doc-alert);--ng-doc-button-hover-color: var(--ng-doc-alert);--ng-doc-button-active-color: var(--ng-doc-alert)}:host[ng-doc-button-text][data-ng-doc-color=link]{--ng-doc-button-background: var(--ng-doc-link-color);--ng-doc-button-color: var(--ng-doc-link-color);--ng-doc-button-hover-color: var(--ng-doc-link-color);--ng-doc-button-active-color: var(--ng-doc-link-color)}:host[ng-doc-button-text][data-ng-doc-color=success]{--ng-doc-button-background: var(--ng-doc-success);--ng-doc-button-color: var(--ng-doc-success);--ng-doc-button-hover-color: var(--ng-doc-success);--ng-doc-button-active-color: var(--ng-doc-success)}:host[ng-doc-button-flat]{background:color-mix(in srgb,var(--ng-doc-button-background),black var(--ng-doc-button-background-opacity));--ng-doc-button-background: var(--ng-doc-white);--ng-doc-button-background-opacity: 0%;--ng-doc-button-hover-background-opacity: 10%;--ng-doc-button-active-background-opacity: 20%}:host[ng-doc-button-flat][data-ng-doc-color=primary]{--ng-doc-button-background: var(--ng-doc-primary);--ng-doc-button-color: var(--ng-doc-primary-text);--ng-doc-button-hover-color: var(--ng-doc-primary-text);--ng-doc-button-active-color: var(--ng-doc-primary-text)}:host[ng-doc-button-flat][data-ng-doc-color=info]{--ng-doc-button-background: var(--ng-doc-info);--ng-doc-button-color: var(--ng-doc-info-text);--ng-doc-button-hover-color: var(--ng-doc-info-text);--ng-doc-button-active-color: var(--ng-doc-info-text)}:host[ng-doc-button-flat][data-ng-doc-color=warning]{--ng-doc-button-background: var(--ng-doc-warning);--ng-doc-button-color: var(--ng-doc-warning-text);--ng-doc-button-hover-color: var(--ng-doc-warning-text);--ng-doc-button-active-color: var(--ng-doc-warning-text)}:host[ng-doc-button-flat][data-ng-doc-color=alert]{--ng-doc-button-background: var(--ng-doc-alert);--ng-doc-button-color: var(--ng-doc-alert-text);--ng-doc-button-hover-color: var(--ng-doc-alert-text);--ng-doc-button-active-color: var(--ng-doc-alert-text)}:host[ng-doc-button-flat][data-ng-doc-color=link]{--ng-doc-button-background: var(--ng-doc-link-color);--ng-doc-button-color: var(--ng-doc-primary-text);--ng-doc-button-hover-color: var(--ng-doc-primary-text);--ng-doc-button-active-color: var(--ng-doc-primary-text)}:host[ng-doc-button-flat][data-ng-doc-color=success]{--ng-doc-button-background: var(--ng-doc-success);--ng-doc-button-color: var(--ng-doc-success-text);--ng-doc-button-hover-color: var(--ng-doc-success-text);--ng-doc-button-active-color: var(--ng-doc-success-text)}\n"] }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/ng-doc-ui-kit-components-button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-doc-ui-kit-components-button.mjs","sources":["../../../../libs/ui-kit/components/button/button.component.ts","../../../../libs/ui-kit/components/button/ng-doc-ui-kit-components-button.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';\nimport { NgDocColor, NgDocSize } from '@ng-doc/ui-kit/types';\n\n/**\n * `NgDocButtonComponent` is a reusable button component with customizable properties.\n * It can be used as a regular button, a flat button, or a text button.\n * @example\n * ```html\n * <button ng-doc-button [size]=\"'large'\" [color]=\"'secondary'\" [rounded]=\"true\">Click me</button>\n * ```\n */\n@Component({\n  selector:\n    'button[ng-doc-button], a[ng-doc-button], button[ng-doc-button-flat], a[ng-doc-button-flat], button[ng-doc-button-text], a[ng-doc-button-text]',\n  template: `<ng-content></ng-content>`,\n  styleUrls: ['./button.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true,\n})\nexport class NgDocButtonComponent {\n  /**\n   * Size of the button. Can be 'small', 'medium', or 'large'.\n   * Default is 'small'.\n   */\n  @Input()\n  @HostBinding('attr.data-ng-doc-size')\n  size: NgDocSize = 'small';\n\n  /**\n   * Color of the button. Can be 'primary', 'secondary', etc.\n   * Default is 'primary'.\n   */\n  @Input()\n  @HostBinding('attr.data-ng-doc-color')\n  color: NgDocColor = 'primary';\n\n  /**\n   * Whether the button is rounded or not.\n   * Default is false.\n   */\n  @Input()\n  @HostBinding('attr.data-ng-doc-rounded')\n  rounded: boolean = false;\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAGA;;;;;;;AAOG;MASU,oBAAoB,CAAA;AARjC,IAAA,WAAA,GAAA;AASE;;;AAGG;QAGH,IAAA,CAAA,IAAI,GAAc,OAAO;AAEzB;;;AAGG;QAGH,IAAA,CAAA,KAAK,GAAe,SAAS;AAE7B;;;AAGG;QAGH,IAAA,CAAA,OAAO,GAAY,KAAK;AACzB,IAAA;8GAxBY,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAApB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,oBAAoB,2ZALrB,CAAA,yBAAA,CAA2B,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,inNAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAK1B,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBARhC,SAAS;AAEN,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,+IAA+I,YACvI,CAAA,yBAAA,CAA2B,EAAA,eAAA,EAEpB,uBAAuB,CAAC,MAAM,cACnC,IAAI,EAAA,MAAA,EAAA,CAAA,inNAAA,CAAA,EAAA;;sBAOf;;sBACA,WAAW;uBAAC,uBAAuB;;sBAOnC;;sBACA,WAAW;uBAAC,wBAAwB;;sBAOpC;;sBACA,WAAW;uBAAC,0BAA0B;;;ACzCzC;;AAEG;;;;"}
+{"version":3,"file":"ng-doc-ui-kit-components-button.mjs","sources":["../../../../libs/ui-kit/components/button/button.component.ts","../../../../libs/ui-kit/components/button/ng-doc-ui-kit-components-button.ts"],"sourcesContent":["import { booleanAttribute, ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { NgDocColor, NgDocSize } from '@ng-doc/ui-kit/types';\n\n/**\n * `NgDocButtonComponent` is a reusable button component with customizable properties.\n * It can be used as a regular button, a flat button, or a text button.\n * @example\n * ```html\n * <button ng-doc-button [size]=\"'large'\" [color]=\"'secondary'\" [rounded]=\"true\">Click me</button>\n * ```\n */\n@Component({\n  selector:\n    'button[ng-doc-button], a[ng-doc-button], button[ng-doc-button-flat], a[ng-doc-button-flat], button[ng-doc-button-text], a[ng-doc-button-text]',\n  template: `<ng-content></ng-content>`,\n  styleUrls: ['./button.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[attr.data-ng-doc-size]': 'size()',\n    '[attr.data-ng-doc-color]': 'color()',\n    '[attr.data-ng-doc-rounded]': 'rounded()',\n  },\n})\nexport class NgDocButtonComponent {\n  /**\n   * Size of the button. Can be 'small', 'medium', or 'large'.\n   * Default is 'small'.\n   */\n  readonly size = input<NgDocSize>('small');\n\n  /**\n   * Color of the button. Can be 'primary', 'secondary', etc.\n   * Default is 'primary'.\n   */\n  readonly color = input<NgDocColor>('primary');\n\n  /**\n   * Whether the button is rounded or not.\n   * Default is false.\n   */\n  readonly rounded = input<boolean, unknown>(false, { transform: booleanAttribute });\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAGA;;;;;;;AAOG;MAaU,oBAAoB,CAAA;AAZjC,IAAA,WAAA,GAAA;AAaE;;;AAGG;QACM,IAAA,CAAA,IAAI,GAAG,KAAK,CAAY,OAAO;iFAAC;AAEzC;;;AAGG;QACM,IAAA,CAAA,KAAK,GAAG,KAAK,CAAa,SAAS;kFAAC;AAE7C;;;AAGG;QACM,IAAA,CAAA,OAAO,GAAG,KAAK,CAAmB,KAAK,+EAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AACnF,IAAA;8GAlBY,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAApB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,oBAAoB,2sBATrB,CAAA,yBAAA,CAA2B,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,srNAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAS1B,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAZhC,SAAS;AAEN,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,+IAA+I,YACvI,CAAA,yBAAA,CAA2B,EAAA,eAAA,EAEpB,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC;AACJ,wBAAA,yBAAyB,EAAE,QAAQ;AACnC,wBAAA,0BAA0B,EAAE,SAAS;AACrC,wBAAA,4BAA4B,EAAE,WAAW;AAC1C,qBAAA,EAAA,MAAA,EAAA,CAAA,srNAAA,CAAA,EAAA;;;ACrBH;;AAEG;;;;"}

package/fesm2022/ng-doc-ui-kit-components-checkbox.mjs

@@ -1,30 +1,30 @@
 import * as i0 from '@angular/core';
-import { inject, Input, HostBinding, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, input, ChangeDetectionStrategy, Component } from '@angular/core';
 import { NgDocIconComponent } from '@ng-doc/ui-kit/components/icon';
 import { NgDocCheckedChangeDirective } from '@ng-doc/ui-kit/directives/checked-change';
-import { NgDocFocusableDirective } from '@ng-doc/ui-kit/directives/focusable';
 import { DIStateControl, DICompareHost, injectHostControl } from 'di-controls';
 
+/** A checkbox control; project its label. */
 class NgDocCheckboxComponent extends DIStateControl {
     constructor() {
         super({
             host: injectHostControl({ optional: true }),
             compareHost: inject(DICompareHost, { optional: true }),
         });
-        this.color = 'primary';
+        /** Colour of the checked box. */
+        this.color = input('primary', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: NgDocCheckboxComponent, isStandalone: true, selector: "ng-doc-checkbox", inputs: { color: "color" }, host: { properties: { "attr.data-lu-color": "this.color" } }, usesInheritance: true, ngImport: i0, template: "<label class=\"ng-doc-checkbox-wrapper\">\n  <div class=\"ng-doc-checkbox\">\n    <input\n      type=\"checkbox\"\n      [disabled]=\"disabled\"\n      [ngDocChecked]=\"checked()\"\n      (ngDocCheckedChange)=\"toggle(); touch()\"\n      (blur)=\"touch()\"\n      [ngDocFocusable]=\"false\" />\n    @if (isIntermediate) {\n      <ng-doc-icon icon=\"minus\"></ng-doc-icon>\n    }\n    @if (checked()) {\n      <ng-doc-icon icon=\"check\"></ng-doc-icon>\n    }\n  </div>\n  <div class=\"ng-doc-checkbox-content\">\n    <span class=\"ng-doc-checkbox-icons\">\n      <ng-content select=\"ng-doc-icon\"></ng-content>\n    </span>\n    <div class=\"ng-doc-checkbox-text\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</label>\n", styles: [":host{display:inline-flex;align-items:flex-start;flex-direction:column}:host:not(:last-of-type){margin-bottom:var(--ng-doc-list-element-vertical-space);margin-right:var(--ng-doc-list-element-horizontal-space)}:host:hover:not([data-checked=true]) .ng-doc-checkbox{border:var(--ng-doc-checkbox-border-hover)}:host:not([data-disabled=true]) .ng-doc-checkbox-wrapper{cursor:pointer}:host[data-checked=true] .ng-doc-checkbox{background-color:var(--ng-doc-checkbox-color);--ng-doc-checkbox-border: var(--ng-doc-checkbox-color);--ng-doc-checkbox-border-hover: var(--ng-doc-checkbox-color);--ng-doc-icon-color: var(--ng-doc-checkbox-color-text)}:host{font-family:var(--ng-doc-font-family);font-variant:no-contextual;color:var(--ng-doc-text);line-height:var(--ng-doc-line-height);font-size:var(--ng-doc-font-size);font-weight:var(--ng-doc-font-weight)}input{position:absolute;bottom:0;left:50%;border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;width:1px;outline:0}.ng-doc-checkbox-wrapper{display:flex}.ng-doc-checkbox{position:relative;display:flex;align-items:center;justify-content:center;width:calc(var(--ng-doc-base-gutter) * 2 + var(--ng-doc-base-gutter) / 2);height:calc(var(--ng-doc-base-gutter) * 2 + var(--ng-doc-base-gutter) / 2);border:var(--ng-doc-checkbox-border);flex:0 0 calc(var(--ng-doc-base-gutter) * 2 + var(--ng-doc-base-gutter) / 2);background-color:var(--ng-doc-base-0);transition:background-color var(--ng-doc-transition);box-sizing:border-box;border-radius:calc(var(--ng-doc-base-gutter) / 2)}.ng-doc-checkbox-content{display:flex;align-items:flex-start}.ng-doc-checkbox-icons{display:flex;margin-left:var(--ng-doc-base-gutter);margin-top:calc(var(--ng-doc-base-gutter) / 2)}.ng-doc-checkbox-icons:empty{display:none}.ng-doc-checkbox-text{margin-left:var(--ng-doc-base-gutter);line-height:calc(var(--ng-doc-base-gutter) * 2 + var(--ng-doc-base-gutter) / 2)}.ng-doc-checkbox-text:empty{display:none}\n"], dependencies: [{ kind: "directive", type: NgDocCheckedChangeDirective, selector: "input[ngDocChecked], input[ngDocCheckedChange]", inputs: ["ngDocChecked"], outputs: ["ngDocCheckedChange"] }, { kind: "directive", type: NgDocFocusableDirective, selector: "[ngDocFocusable]", inputs: ["ngDocFocusable"], exportAs: ["ngDocFocusable"] }, { kind: "component", type: NgDocIconComponent, selector: "ng-doc-icon", inputs: ["icon", "customIcon", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", type: NgDocCheckboxComponent, isStandalone: true, selector: "ng-doc-checkbox", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-lu-color": "color()", "attr.data-disabled": "disabled" } }, usesInheritance: true, ngImport: i0, template: "<label class=\"ng-doc-checkbox-wrapper\">\n  <div class=\"ng-doc-checkbox\">\n    <input\n      type=\"checkbox\"\n      [disabled]=\"disabled\"\n      [ngDocChecked]=\"checked()\"\n      (ngDocCheckedChange)=\"toggle(); touch()\"\n      (blur)=\"touch()\" />\n    @if (isIntermediate) {\n      <ng-doc-icon icon=\"minus\"></ng-doc-icon>\n    }\n    @if (checked()) {\n      <ng-doc-icon icon=\"check\"></ng-doc-icon>\n    }\n  </div>\n  <div class=\"ng-doc-checkbox-content\">\n    <span class=\"ng-doc-checkbox-icons\">\n      <ng-content select=\"ng-doc-icon\"></ng-content>\n    </span>\n    <div class=\"ng-doc-checkbox-text\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</label>\n", styles: [":host{display:inline-flex;align-items:flex-start;flex-direction:column}:host:not(:last-of-type){margin-bottom:var(--ng-doc-list-element-vertical-space);margin-right:var(--ng-doc-list-element-horizontal-space)}:host:hover:not([aria-checked=true]) .ng-doc-checkbox{border:var(--ng-doc-checkbox-border-hover)}:host:not([data-disabled=true]) .ng-doc-checkbox-wrapper{cursor:pointer}:host[aria-checked=true] .ng-doc-checkbox{background-color:var(--ng-doc-checkbox-color);--ng-doc-checkbox-border: var(--ng-doc-checkbox-color);--ng-doc-checkbox-border-hover: var(--ng-doc-checkbox-color);--ng-doc-icon-color: var(--ng-doc-checkbox-color-text)}:host{font-family:var(--ng-doc-font-family);font-variant:no-contextual;color:var(--ng-doc-text);line-height:var(--ng-doc-line-height);font-size:var(--ng-doc-font-size);font-weight:var(--ng-doc-font-weight)}input{position:absolute;bottom:0;left:50%;border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;width:1px;outline:0}.ng-doc-checkbox-wrapper{display:flex;align-items:center;min-height:24px}.ng-doc-checkbox{position:relative;display:flex;align-items:center;justify-content:center;width:18px;height:18px;border:var(--ng-doc-checkbox-border);flex:0 0 18px;background-color:var(--ng-doc-background);transition:background-color var(--ng-doc-transition);box-sizing:border-box;border-radius:var(--ng-doc-radius-xs)}.ng-doc-checkbox:has(input:focus-visible){box-shadow:var(--ng-doc-focus-ring)}.ng-doc-checkbox-content{display:flex;align-items:center}.ng-doc-checkbox-icons{display:flex;margin-left:var(--ng-doc-space-2)}.ng-doc-checkbox-icons:empty{display:none}.ng-doc-checkbox-text{margin-left:var(--ng-doc-space-2);line-height:24px}.ng-doc-checkbox-text:empty{display:none}\n"], dependencies: [{ kind: "directive", type: NgDocCheckedChangeDirective, selector: "input[ngDocChecked], input[ngDocCheckedChange]", inputs: ["ngDocChecked"], outputs: ["ngDocCheckedChange"] }, { kind: "component", type: NgDocIconComponent, selector: "ng-doc-icon", inputs: ["icon", "customIcon", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocCheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocCheckboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-doc-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgDocCheckedChangeDirective, NgDocFocusableDirective, NgDocIconComponent], template: "<label class=\"ng-doc-checkbox-wrapper\">\n  <div class=\"ng-doc-checkbox\">\n    <input\n      type=\"checkbox\"\n      [disabled]=\"disabled\"\n      [ngDocChecked]=\"checked()\"\n      (ngDocCheckedChange)=\"toggle(); touch()\"\n      (blur)=\"touch()\"\n      [ngDocFocusable]=\"false\" />\n    @if (isIntermediate) {\n      <ng-doc-icon icon=\"minus\"></ng-doc-icon>\n    }\n    @if (checked()) {\n      <ng-doc-icon icon=\"check\"></ng-doc-icon>\n    }\n  </div>\n  <div class=\"ng-doc-checkbox-content\">\n    <span class=\"ng-doc-checkbox-icons\">\n      <ng-content select=\"ng-doc-icon\"></ng-content>\n    </span>\n    <div class=\"ng-doc-checkbox-text\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</label>\n", styles: [":host{display:inline-flex;align-items:flex-start;flex-direction:column}:host:not(:last-of-type){margin-bottom:var(--ng-doc-list-element-vertical-space);margin-right:var(--ng-doc-list-element-horizontal-space)}:host:hover:not([data-checked=true]) .ng-doc-checkbox{border:var(--ng-doc-checkbox-border-hover)}:host:not([data-disabled=true]) .ng-doc-checkbox-wrapper{cursor:pointer}:host[data-checked=true] .ng-doc-checkbox{background-color:var(--ng-doc-checkbox-color);--ng-doc-checkbox-border: var(--ng-doc-checkbox-color);--ng-doc-checkbox-border-hover: var(--ng-doc-checkbox-color);--ng-doc-icon-color: var(--ng-doc-checkbox-color-text)}:host{font-family:var(--ng-doc-font-family);font-variant:no-contextual;color:var(--ng-doc-text);line-height:var(--ng-doc-line-height);font-size:var(--ng-doc-font-size);font-weight:var(--ng-doc-font-weight)}input{position:absolute;bottom:0;left:50%;border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;width:1px;outline:0}.ng-doc-checkbox-wrapper{display:flex}.ng-doc-checkbox{position:relative;display:flex;align-items:center;justify-content:center;width:calc(var(--ng-doc-base-gutter) * 2 + var(--ng-doc-base-gutter) / 2);height:calc(var(--ng-doc-base-gutter) * 2 + var(--ng-doc-base-gutter) / 2);border:var(--ng-doc-checkbox-border);flex:0 0 calc(var(--ng-doc-base-gutter) * 2 + var(--ng-doc-base-gutter) / 2);background-color:var(--ng-doc-base-0);transition:background-color var(--ng-doc-transition);box-sizing:border-box;border-radius:calc(var(--ng-doc-base-gutter) / 2)}.ng-doc-checkbox-content{display:flex;align-items:flex-start}.ng-doc-checkbox-icons{display:flex;margin-left:var(--ng-doc-base-gutter);margin-top:calc(var(--ng-doc-base-gutter) / 2)}.ng-doc-checkbox-icons:empty{display:none}.ng-doc-checkbox-text{margin-left:var(--ng-doc-base-gutter);line-height:calc(var(--ng-doc-base-gutter) * 2 + var(--ng-doc-base-gutter) / 2)}.ng-doc-checkbox-text:empty{display:none}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { color: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.data-lu-color']
-            }] } });
+            args: [{ selector: 'ng-doc-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgDocCheckedChangeDirective, NgDocIconComponent], host: {
+                        '[attr.data-lu-color]': 'color()',
+                        '[attr.data-disabled]': 'disabled',
+                    }, template: "<label class=\"ng-doc-checkbox-wrapper\">\n  <div class=\"ng-doc-checkbox\">\n    <input\n      type=\"checkbox\"\n      [disabled]=\"disabled\"\n      [ngDocChecked]=\"checked()\"\n      (ngDocCheckedChange)=\"toggle(); touch()\"\n      (blur)=\"touch()\" />\n    @if (isIntermediate) {\n      <ng-doc-icon icon=\"minus\"></ng-doc-icon>\n    }\n    @if (checked()) {\n      <ng-doc-icon icon=\"check\"></ng-doc-icon>\n    }\n  </div>\n  <div class=\"ng-doc-checkbox-content\">\n    <span class=\"ng-doc-checkbox-icons\">\n      <ng-content select=\"ng-doc-icon\"></ng-content>\n    </span>\n    <div class=\"ng-doc-checkbox-text\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</label>\n", styles: [":host{display:inline-flex;align-items:flex-start;flex-direction:column}:host:not(:last-of-type){margin-bottom:var(--ng-doc-list-element-vertical-space);margin-right:var(--ng-doc-list-element-horizontal-space)}:host:hover:not([aria-checked=true]) .ng-doc-checkbox{border:var(--ng-doc-checkbox-border-hover)}:host:not([data-disabled=true]) .ng-doc-checkbox-wrapper{cursor:pointer}:host[aria-checked=true] .ng-doc-checkbox{background-color:var(--ng-doc-checkbox-color);--ng-doc-checkbox-border: var(--ng-doc-checkbox-color);--ng-doc-checkbox-border-hover: var(--ng-doc-checkbox-color);--ng-doc-icon-color: var(--ng-doc-checkbox-color-text)}:host{font-family:var(--ng-doc-font-family);font-variant:no-contextual;color:var(--ng-doc-text);line-height:var(--ng-doc-line-height);font-size:var(--ng-doc-font-size);font-weight:var(--ng-doc-font-weight)}input{position:absolute;bottom:0;left:50%;border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;width:1px;outline:0}.ng-doc-checkbox-wrapper{display:flex;align-items:center;min-height:24px}.ng-doc-checkbox{position:relative;display:flex;align-items:center;justify-content:center;width:18px;height:18px;border:var(--ng-doc-checkbox-border);flex:0 0 18px;background-color:var(--ng-doc-background);transition:background-color var(--ng-doc-transition);box-sizing:border-box;border-radius:var(--ng-doc-radius-xs)}.ng-doc-checkbox:has(input:focus-visible){box-shadow:var(--ng-doc-focus-ring)}.ng-doc-checkbox-content{display:flex;align-items:center}.ng-doc-checkbox-icons{display:flex;margin-left:var(--ng-doc-space-2)}.ng-doc-checkbox-icons:empty{display:none}.ng-doc-checkbox-text{margin-left:var(--ng-doc-space-2);line-height:24px}.ng-doc-checkbox-text:empty{display:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/ng-doc-ui-kit-components-checkbox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-doc-ui-kit-components-checkbox.mjs","sources":["../../../../libs/ui-kit/components/checkbox/checkbox.component.ts","../../../../libs/ui-kit/components/checkbox/checkbox.component.html","../../../../libs/ui-kit/components/checkbox/ng-doc-ui-kit-components-checkbox.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, HostBinding, inject, Input } from '@angular/core';\nimport { NgDocIconComponent } from '@ng-doc/ui-kit/components/icon';\nimport { NgDocCheckedChangeDirective } from '@ng-doc/ui-kit/directives/checked-change';\nimport { NgDocFocusableDirective } from '@ng-doc/ui-kit/directives/focusable';\nimport { NgDocColor } from '@ng-doc/ui-kit/types';\nimport { DICompareHost, DIStateControl, injectHostControl } from 'di-controls';\n\n@Component({\n  selector: 'ng-doc-checkbox',\n  templateUrl: './checkbox.component.html',\n  styleUrls: ['./checkbox.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [NgDocCheckedChangeDirective, NgDocFocusableDirective, NgDocIconComponent],\n})\nexport class NgDocCheckboxComponent<T> extends DIStateControl<T> {\n  @Input()\n  @HostBinding('attr.data-lu-color')\n  color: NgDocColor = 'primary';\n\n  constructor() {\n    super({\n      host: injectHostControl({ optional: true }),\n      compareHost: inject(DICompareHost, { optional: true }),\n    });\n  }\n}\n","<label class=\"ng-doc-checkbox-wrapper\">\n  <div class=\"ng-doc-checkbox\">\n    <input\n      type=\"checkbox\"\n      [disabled]=\"disabled\"\n      [ngDocChecked]=\"checked()\"\n      (ngDocCheckedChange)=\"toggle(); touch()\"\n      (blur)=\"touch()\"\n      [ngDocFocusable]=\"false\" />\n    @if (isIntermediate) {\n      <ng-doc-icon icon=\"minus\"></ng-doc-icon>\n    }\n    @if (checked()) {\n      <ng-doc-icon icon=\"check\"></ng-doc-icon>\n    }\n  </div>\n  <div class=\"ng-doc-checkbox-content\">\n    <span class=\"ng-doc-checkbox-icons\">\n      <ng-content select=\"ng-doc-icon\"></ng-content>\n    </span>\n    <div class=\"ng-doc-checkbox-text\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</label>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;AAcM,MAAO,sBAA0B,SAAQ,cAAiB,CAAA;AAK9D,IAAA,WAAA,GAAA;AACE,QAAA,KAAK,CAAC;YACJ,IAAI,EAAE,iBAAiB,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;YAC3C,WAAW,EAAE,MAAM,CAAC,aAAa,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AACvD,SAAA,CAAC;QANJ,IAAA,CAAA,KAAK,GAAe,SAAS;IAO7B;8GAVW,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAtB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,sBAAsB,4LCdnC,+tBAyBA,EAAA,MAAA,EAAA,CAAA,y5DAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDbY,2BAA2B,EAAA,QAAA,EAAA,gDAAA,EAAA,MAAA,EAAA,CAAA,cAAA,CAAA,EAAA,OAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,uBAAuB,uHAAE,kBAAkB,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,YAAA,EAAA,MAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAEvE,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAPlC,SAAS;+BACE,iBAAiB,EAAA,eAAA,EAGV,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,2BAA2B,EAAE,uBAAuB,EAAE,kBAAkB,CAAC,EAAA,QAAA,EAAA,+tBAAA,EAAA,MAAA,EAAA,CAAA,y5DAAA,CAAA,EAAA;;sBAGlF;;sBACA,WAAW;uBAAC,oBAAoB;;;AEhBnC;;AAEG;;;;"}
+{"version":3,"file":"ng-doc-ui-kit-components-checkbox.mjs","sources":["../../../../libs/ui-kit/components/checkbox/checkbox.component.ts","../../../../libs/ui-kit/components/checkbox/checkbox.component.html","../../../../libs/ui-kit/components/checkbox/ng-doc-ui-kit-components-checkbox.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, inject, input } from '@angular/core';\nimport { NgDocIconComponent } from '@ng-doc/ui-kit/components/icon';\nimport { NgDocCheckedChangeDirective } from '@ng-doc/ui-kit/directives/checked-change';\nimport { NgDocColor } from '@ng-doc/ui-kit/types';\nimport { DICompareHost, DIStateControl, injectHostControl } from 'di-controls';\n\n/** A checkbox control; project its label. */\n@Component({\n  selector: 'ng-doc-checkbox',\n  templateUrl: './checkbox.component.html',\n  styleUrls: ['./checkbox.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [NgDocCheckedChangeDirective, NgDocIconComponent],\n  host: {\n    '[attr.data-lu-color]': 'color()',\n    '[attr.data-disabled]': 'disabled',\n  },\n})\nexport class NgDocCheckboxComponent<T> extends DIStateControl<T> {\n  /** Colour of the checked box. */\n  readonly color = input<NgDocColor>('primary');\n\n  constructor() {\n    super({\n      host: injectHostControl({ optional: true }),\n      compareHost: inject(DICompareHost, { optional: true }),\n    });\n  }\n}\n","<label class=\"ng-doc-checkbox-wrapper\">\n  <div class=\"ng-doc-checkbox\">\n    <input\n      type=\"checkbox\"\n      [disabled]=\"disabled\"\n      [ngDocChecked]=\"checked()\"\n      (ngDocCheckedChange)=\"toggle(); touch()\"\n      (blur)=\"touch()\" />\n    @if (isIntermediate) {\n      <ng-doc-icon icon=\"minus\"></ng-doc-icon>\n    }\n    @if (checked()) {\n      <ng-doc-icon icon=\"check\"></ng-doc-icon>\n    }\n  </div>\n  <div class=\"ng-doc-checkbox-content\">\n    <span class=\"ng-doc-checkbox-icons\">\n      <ng-content select=\"ng-doc-icon\"></ng-content>\n    </span>\n    <div class=\"ng-doc-checkbox-text\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</label>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;AAMA;AAYM,MAAO,sBAA0B,SAAQ,cAAiB,CAAA;AAI9D,IAAA,WAAA,GAAA;AACE,QAAA,KAAK,CAAC;YACJ,IAAI,EAAE,iBAAiB,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;YAC3C,WAAW,EAAE,MAAM,CAAC,aAAa,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AACvD,SAAA,CAAC;;QANK,IAAA,CAAA,KAAK,GAAG,KAAK,CAAa,SAAS;kFAAC;IAO7C;8GATW,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAtB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,oBAAA,EAAA,SAAA,EAAA,oBAAA,EAAA,UAAA,EAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EClBnC,6rBAwBA,EAAA,MAAA,EAAA,CAAA,2sDAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDZY,2BAA2B,sJAAE,kBAAkB,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,YAAA,EAAA,MAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAM9C,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAXlC,SAAS;+BACE,iBAAiB,EAAA,eAAA,EAGV,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,2BAA2B,EAAE,kBAAkB,CAAC,EAAA,IAAA,EACpD;AACJ,wBAAA,sBAAsB,EAAE,SAAS;AACjC,wBAAA,sBAAsB,EAAE,UAAU;AACnC,qBAAA,EAAA,QAAA,EAAA,6rBAAA,EAAA,MAAA,EAAA,CAAA,2sDAAA,CAAA,EAAA;;;AEhBH;;AAEG;;;;"}

package/fesm2022/ng-doc-ui-kit-components-clear-control.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, DestroyRef, ChangeDetectionStrategy, Component } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NgDocInputHost } from '@ng-doc/ui-kit/classes/input-host';
 import { NgDocButtonIconComponent } from '@ng-doc/ui-kit/components/button-icon';
@@ -7,6 +7,10 @@ import { NgDocIconComponent } from '@ng-doc/ui-kit/components/icon';
 import { NgDocFocusableDirective } from '@ng-doc/ui-kit/directives/focusable';
 import { DIControl, injectHostControl } from 'di-controls';
 
+/**
+ * Button that clears the value of its host control and of the input of the surrounding input
+ * host. It is shown only while there is a value to clear.
+ */
 class NgDocClearControlComponent extends DIControl {
     constructor() {
         super({
@@ -15,25 +19,26 @@ class NgDocClearControlComponent extends DIControl {
         this.inputHost = inject(NgDocInputHost, {
             optional: true,
         });
+        this.clearControlDestroyRef = inject(DestroyRef);
     }
     ngAfterContentInit() {
-        if (this.inputHost?.inputControl) {
-            this.inputHost.inputControl.changes
-                .pipe(takeUntilDestroyed(this['destroyRef']))
-                .subscribe(() => this.changeDetectorRef.detectChanges());
-        }
+        this.inputHost?.inputControl?.changes
+            .pipe(takeUntilDestroyed(this.clearControlDestroyRef))
+            .subscribe(() => this.changeDetectorRef.markForCheck());
     }
+    /** Whether there is a value to clear. */
     get isVisible() {
         return this.inputHost?.inputControl?.hasValue || this.hasValue;
     }
+    /** Clears the value. */
     clear() {
         this.inputHost?.inputControl?.writeValueFromHost(null);
         this.updateModel(null);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocClearControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: NgDocClearControlComponent, isStandalone: true, selector: "ng-doc-clear-control", usesInheritance: true, ngImport: i0, template: "@if (isVisible) {\n  <button\n    ng-doc-button-icon-transparent\n    size=\"large\"\n    [ngDocFocusable]=\"false\"\n    [disabled]=\"disabled\"\n    [rounded]=\"false\"\n    (click)=\"clear()\"\n    (focusout)=\"touch()\">\n    <ng-doc-icon icon=\"x\"></ng-doc-icon>\n  </button>\n}\n", styles: [":host{display:inline-block}\n"], dependencies: [{ kind: "component", type: NgDocButtonIconComponent, selector: "button[ng-doc-button-icon], a[ng-doc-button-icon], button[ng-doc-button-icon-raised], a[ng-doc-button-icon-raised], button[ng-doc-button-icon-transparent], a[ng-doc-button-icon-transparent]", inputs: ["size", "rounded"] }, { kind: "directive", type: NgDocFocusableDirective, selector: "[ngDocFocusable]", inputs: ["ngDocFocusable"], exportAs: ["ngDocFocusable"] }, { kind: "component", type: NgDocIconComponent, selector: "ng-doc-icon", inputs: ["icon", "customIcon", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocClearControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", type: NgDocClearControlComponent, isStandalone: true, selector: "ng-doc-clear-control", usesInheritance: true, ngImport: i0, template: "@if (isVisible) {\n  <button\n    ng-doc-button-icon-transparent\n    size=\"large\"\n    [ngDocFocusable]=\"false\"\n    [disabled]=\"disabled\"\n    [rounded]=\"false\"\n    (click)=\"clear()\"\n    (focusout)=\"touch()\">\n    <ng-doc-icon icon=\"x\"></ng-doc-icon>\n  </button>\n}\n", styles: [":host{display:inline-block}\n"], dependencies: [{ kind: "component", type: NgDocButtonIconComponent, selector: "button[ng-doc-button-icon], a[ng-doc-button-icon], button[ng-doc-button-icon-raised], a[ng-doc-button-icon-raised], button[ng-doc-button-icon-transparent], a[ng-doc-button-icon-transparent]", inputs: ["size", "rounded"] }, { kind: "directive", type: NgDocFocusableDirective, selector: "[ngDocFocusable]", inputs: ["ngDocFocusable"], exportAs: ["ngDocFocusable"] }, { kind: "component", type: NgDocIconComponent, selector: "ng-doc-icon", inputs: ["icon", "customIcon", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocClearControlComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocClearControlComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-doc-clear-control', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgDocButtonIconComponent, NgDocFocusableDirective, NgDocIconComponent], template: "@if (isVisible) {\n  <button\n    ng-doc-button-icon-transparent\n    size=\"large\"\n    [ngDocFocusable]=\"false\"\n    [disabled]=\"disabled\"\n    [rounded]=\"false\"\n    (click)=\"clear()\"\n    (focusout)=\"touch()\">\n    <ng-doc-icon icon=\"x\"></ng-doc-icon>\n  </button>\n}\n", styles: [":host{display:inline-block}\n"] }]
         }], ctorParameters: () => [] });

package/fesm2022/ng-doc-ui-kit-components-clear-control.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-doc-ui-kit-components-clear-control.mjs","sources":["../../../../libs/ui-kit/components/clear-control/clear-control.component.ts","../../../../libs/ui-kit/components/clear-control/clear-control.component.html","../../../../libs/ui-kit/components/clear-control/ng-doc-ui-kit-components-clear-control.ts"],"sourcesContent":["import { AfterContentInit, ChangeDetectionStrategy, Component, inject } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { NgDocInputHost } from '@ng-doc/ui-kit/classes/input-host';\nimport { NgDocButtonIconComponent } from '@ng-doc/ui-kit/components/button-icon';\nimport { NgDocIconComponent } from '@ng-doc/ui-kit/components/icon';\nimport { NgDocFocusableDirective } from '@ng-doc/ui-kit/directives/focusable';\nimport { DIControl, injectHostControl } from 'di-controls';\n\n@Component({\n  selector: 'ng-doc-clear-control',\n  templateUrl: './clear-control.component.html',\n  styleUrls: ['./clear-control.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [NgDocButtonIconComponent, NgDocFocusableDirective, NgDocIconComponent],\n})\nexport class NgDocClearControlComponent<T> extends DIControl<T> implements AfterContentInit {\n  protected readonly inputHost: NgDocInputHost<T> | null = inject(NgDocInputHost, {\n    optional: true,\n  });\n\n  constructor() {\n    super({\n      host: injectHostControl(),\n    });\n  }\n\n  ngAfterContentInit(): void {\n    if (this.inputHost?.inputControl) {\n      this.inputHost.inputControl.changes\n        .pipe(takeUntilDestroyed(this['destroyRef']))\n        .subscribe(() => this.changeDetectorRef.detectChanges());\n    }\n  }\n\n  get isVisible(): boolean {\n    return this.inputHost?.inputControl?.hasValue || this.hasValue;\n  }\n\n  clear(): void {\n    this.inputHost?.inputControl?.writeValueFromHost(null);\n    this.updateModel(null);\n  }\n}\n","@if (isVisible) {\n  <button\n    ng-doc-button-icon-transparent\n    size=\"large\"\n    [ngDocFocusable]=\"false\"\n    [disabled]=\"disabled\"\n    [rounded]=\"false\"\n    (click)=\"clear()\"\n    (focusout)=\"touch()\">\n    <ng-doc-icon icon=\"x\"></ng-doc-icon>\n  </button>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;AAeM,MAAO,0BAA8B,SAAQ,SAAY,CAAA;AAK7D,IAAA,WAAA,GAAA;AACE,QAAA,KAAK,CAAC;YACJ,IAAI,EAAE,iBAAiB,EAAE;AAC1B,SAAA,CAAC;AAPe,QAAA,IAAA,CAAA,SAAS,GAA6B,MAAM,CAAC,cAAc,EAAE;AAC9E,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA,CAAC;IAMF;IAEA,kBAAkB,GAAA;AAChB,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE,YAAY,EAAE;AAChC,YAAA,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC;iBACzB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;iBAC3C,SAAS,CAAC,MAAM,IAAI,CAAC,iBAAiB,CAAC,aAAa,EAAE,CAAC;QAC5D;IACF;AAEA,IAAA,IAAI,SAAS,GAAA;QACX,OAAO,IAAI,CAAC,SAAS,EAAE,YAAY,EAAE,QAAQ,IAAI,IAAI,CAAC,QAAQ;IAChE;IAEA,KAAK,GAAA;QACH,IAAI,CAAC,SAAS,EAAE,YAAY,EAAE,kBAAkB,CAAC,IAAI,CAAC;AACtD,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;IACxB;8GA1BW,0BAA0B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAA1B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,0BAA0B,uGCfvC,gSAYA,EAAA,MAAA,EAAA,CAAA,+BAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDCY,wBAAwB,EAAA,QAAA,EAAA,+LAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,uBAAuB,uHAAE,kBAAkB,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,YAAA,EAAA,MAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAEpE,0BAA0B,EAAA,UAAA,EAAA,CAAA;kBAPtC,SAAS;+BACE,sBAAsB,EAAA,eAAA,EAGf,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,wBAAwB,EAAE,uBAAuB,EAAE,kBAAkB,CAAC,EAAA,QAAA,EAAA,gSAAA,EAAA,MAAA,EAAA,CAAA,+BAAA,CAAA,EAAA;;;AEblF;;AAEG;;;;"}
+{"version":3,"file":"ng-doc-ui-kit-components-clear-control.mjs","sources":["../../../../libs/ui-kit/components/clear-control/clear-control.component.ts","../../../../libs/ui-kit/components/clear-control/clear-control.component.html","../../../../libs/ui-kit/components/clear-control/ng-doc-ui-kit-components-clear-control.ts"],"sourcesContent":["import {\n  AfterContentInit,\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  inject,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { NgDocInputHost } from '@ng-doc/ui-kit/classes/input-host';\nimport { NgDocButtonIconComponent } from '@ng-doc/ui-kit/components/button-icon';\nimport { NgDocIconComponent } from '@ng-doc/ui-kit/components/icon';\nimport { NgDocFocusableDirective } from '@ng-doc/ui-kit/directives/focusable';\nimport { DIControl, injectHostControl } from 'di-controls';\n\n/**\n * Button that clears the value of its host control and of the input of the surrounding input\n * host. It is shown only while there is a value to clear.\n */\n@Component({\n  selector: 'ng-doc-clear-control',\n  templateUrl: './clear-control.component.html',\n  styleUrls: ['./clear-control.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [NgDocButtonIconComponent, NgDocFocusableDirective, NgDocIconComponent],\n})\nexport class NgDocClearControlComponent<T> extends DIControl<T> implements AfterContentInit {\n  protected readonly inputHost: NgDocInputHost<T> | null = inject(NgDocInputHost, {\n    optional: true,\n  });\n  private readonly clearControlDestroyRef = inject(DestroyRef);\n\n  constructor() {\n    super({\n      host: injectHostControl(),\n    });\n  }\n\n  ngAfterContentInit(): void {\n    this.inputHost?.inputControl?.changes\n      .pipe(takeUntilDestroyed(this.clearControlDestroyRef))\n      .subscribe(() => this.changeDetectorRef.markForCheck());\n  }\n\n  /** Whether there is a value to clear. */\n  get isVisible(): boolean {\n    return this.inputHost?.inputControl?.hasValue || this.hasValue;\n  }\n\n  /** Clears the value. */\n  clear(): void {\n    this.inputHost?.inputControl?.writeValueFromHost(null);\n    this.updateModel(null);\n  }\n}\n","@if (isVisible) {\n  <button\n    ng-doc-button-icon-transparent\n    size=\"large\"\n    [ngDocFocusable]=\"false\"\n    [disabled]=\"disabled\"\n    [rounded]=\"false\"\n    (click)=\"clear()\"\n    (focusout)=\"touch()\">\n    <ng-doc-icon icon=\"x\"></ng-doc-icon>\n  </button>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;AAcA;;;AAGG;AAQG,MAAO,0BAA8B,SAAQ,SAAY,CAAA;AAM7D,IAAA,WAAA,GAAA;AACE,QAAA,KAAK,CAAC;YACJ,IAAI,EAAE,iBAAiB,EAAE;AAC1B,SAAA,CAAC;AARe,QAAA,IAAA,CAAA,SAAS,GAA6B,MAAM,CAAC,cAAc,EAAE;AAC9E,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA,CAAC;AACe,QAAA,IAAA,CAAA,sBAAsB,GAAG,MAAM,CAAC,UAAU,CAAC;IAM5D;IAEA,kBAAkB,GAAA;AAChB,QAAA,IAAI,CAAC,SAAS,EAAE,YAAY,EAAE;AAC3B,aAAA,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,sBAAsB,CAAC;aACpD,SAAS,CAAC,MAAM,IAAI,CAAC,iBAAiB,CAAC,YAAY,EAAE,CAAC;IAC3D;;AAGA,IAAA,IAAI,SAAS,GAAA;QACX,OAAO,IAAI,CAAC,SAAS,EAAE,YAAY,EAAE,QAAQ,IAAI,IAAI,CAAC,QAAQ;IAChE;;IAGA,KAAK,GAAA;QACH,IAAI,CAAC,SAAS,EAAE,YAAY,EAAE,kBAAkB,CAAC,IAAI,CAAC;AACtD,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;IACxB;8GA3BW,0BAA0B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAA1B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,0BAA0B,uGCzBvC,gSAYA,EAAA,MAAA,EAAA,CAAA,+BAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDWY,wBAAwB,EAAA,QAAA,EAAA,+LAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,uBAAuB,uHAAE,kBAAkB,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,YAAA,EAAA,MAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAEpE,0BAA0B,EAAA,UAAA,EAAA,CAAA;kBAPtC,SAAS;+BACE,sBAAsB,EAAA,eAAA,EAGf,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,wBAAwB,EAAE,uBAAuB,EAAE,kBAAkB,CAAC,EAAA,QAAA,EAAA,gSAAA,EAAA,MAAA,EAAA,CAAA,+BAAA,CAAA,EAAA;;;AEvBlF;;AAEG;;;;"}