@apexara/ng-components 1.0.5 → 1.0.6-test.2

package/README.md

@@ -28,6 +28,7 @@ npm install @apexara/ng-components
 [🔽 Table](#apex-table-component) <br>
 [🔽 Textarea](#apex-textarea-component) <br>
 [🔽 Tooltip](#apex-tooltip-component) <br>
+[🔽 More Options](#apex-more-options-component) <br>
 
 
 -----------------------------------------------------------------
@@ -146,17 +147,29 @@ with a APEX Tooltip.
 >    formControlName: 'checkboxControl',
 >  }
 >
+>  public checkboxWithErrorOptions: ApexCheckboxOptions = {
+>    formGroup: this.formGroup,
+>    formControlName: 'checkboxControl',
+>    errors: {
+>      required: 'You must accept the terms and conditions',
+>    },
+>  }
+>
 >}
 >```
 >**`parent.component.html`**
 >```html
-><apex-checkbox 
+><apex-checkbox
 >  [checked]="true"
 >  [disabled]="false"
 >  [options]="checkboxOptions"
 >  [tooltip]="'example tooltip text'">
 ></apex-checkbox>
 >
+><!-- With error validation -->
+><apex-checkbox [options]="checkboxWithErrorOptions">
+>  I accept the terms and conditions
+></apex-checkbox>
 >```
 ### Inputs
 
@@ -169,13 +182,20 @@ with a APEX Tooltip.
 >#### tooltip
 >a text that if present triggers a tooltip component with it inside.
 
->#### formGroup
->Refference to the FormGroup that the apex-checkbox will handle
+>#### options - ApexCheckboxOptions
 
->#### formControlName
->Refference to the name of the control that we will access in the FormGroup
+>**formGroup?: FormGroup**: Reference to the FormGroup that the apex-checkbox will handle.
+>
+>**formControlName?: string**: Reference to the name of the control that we will access in the FormGroup.
+>
+>**errors?: ApexCheckboxErrors**: A map of validation error keys to error message strings. When the control is touched and invalid, the first matching error message is displayed below the checkbox.
+>```typescript
+>errors: {
+>  required: 'This field is required',
+>}
+>```
 
-### CSS Variables 
+### CSS Variables
 >Here are all the CSS variables (and their default values) you can set when using apex-checkbox:
 >
 >```css
@@ -188,8 +208,9 @@ with a APEX Tooltip.
 >    --apex-checkbox-wrapper-border-color: transparent;
 >    --apex-checkbox-arrow-color: #FFFFFF;
 >    --apex-checkbox-tooltip-icon-stroke: #FFFFFF;
+>    --apex-checkbox-error-color: #F96138;
 >
->    --apex-checkbox-border-color: #E9E9E9; 
+>    --apex-checkbox-border-color: #E9E9E9;
 >    --apex-checkbox-border-hover-color: #F96138;
 >    --apex-checkbox-outline-color: none;
 >
@@ -204,38 +225,83 @@ with a APEX Tooltip.
 -----------------------------------------------------------------
 
 # APEX Chip component
-A simple visual container for displaying a text, state, etc.
+A simple visual container for displaying a text, state, etc. Supports optional left and right icons and an optional close button.
 
 ## Usage
 >**`parent.component.ts`**
 >```typescript
->import { ApexChipComponent } 
+>import { ApexChipComponent, ApexChipOptions }
 >from '@apexara/ng-components/chip';
 >
 >@Component({
 >  imports: [ ApexChipComponent ]
 >})
 >
->export class ChipExampleComponent { }
+>export class ChipExampleComponent {
+>
+>  public chipOptions: ApexChipOptions = {
+>    iconLeft: 'icon.svg',
+>    iconRight: 'arrow.svg',
+>  };
+>
+>  public chipClose(): void {
+>    // handle close
+>  }
+>
+>}
 >
 >```
 >**`parent.component.html`**
 >```html
-><apex-chip 
->  class="with-close-icon"
+><!-- Basic chip -->
+><apex-chip>Default</apex-chip>
+>
+><!-- With close icon -->
+><apex-chip
 >  [closeIcon]="true"
 >  (closeChange)="chipClose()">
->    With Close Icon
+>    Closeable
+></apex-chip>
+>
+><!-- With left icon -->
+><apex-chip [options]="{ iconLeft: 'icon.svg' }">With Left Icon</apex-chip>
+>
+><!-- With right icon -->
+><apex-chip [options]="{ iconRight: 'arrow.svg' }">With Right Icon</apex-chip>
+>
+><!-- With both icons and close -->
+><apex-chip
+>  [options]="chipOptions"
+>  [closeIcon]="true"
+>  (closeChange)="chipClose()">
+>    Full Featured
 ></apex-chip>
 >```
 >
 
+### ApexChipOptions
+>```typescript
+>interface ApexChipOptions {
+>  iconLeft?: string;   // SVG filename relative to assets/img/
+>  iconRight?: string;  // SVG filename relative to assets/img/
+>}
+>```
+
 ### Inputs
+>#### options
+>ApexChipOptions object to configure optional left and right icons. Icon files are resolved from the `assets/img/` directory.
+
 >#### closeIcon
 >boolean that triggers an X icon that has the closeChange event emitter attached.
 
+### Outputs
 >#### closeChange
->event emitter to handle clicks
+>event emitter triggered when the close icon is clicked.
+
+### Layout Order
+>When all features are enabled, the chip renders in this order:
+>
+>`[ left icon ] [ text ] [ right icon ] [ close X ]`
 
 ### CSS Variables
 >Here all the available CSS variables (and their default values) you can set when using apex-chip:
@@ -244,11 +310,17 @@ A simple visual container for displaying a text, state, etc.
 >apex-chip {
 >    /* Sizes: */
 >    --apex-chip-font-size: 12px;
+>    --apex-chip-icon-size: 16px;
+>    --apex-chip-icon-spacing: 6px;
 >
 >    /* Colors, Fills, Strokes: */
 >    --apex-chip-color: #FFFFFF;
 >    --apex-chip-background-color: #0B1222;
 >    --apex-chip-icon-color: #FFFFFF;
+>    --apex-chip-left-icon-fill: #FFFFFF;
+>    --apex-chip-left-icon-stroke: #ffffff00;
+>    --apex-chip-right-icon-fill: #FFFFFF;
+>    --apex-chip-right-icon-stroke: #ffffff00;
 >}
 >```
 
@@ -878,8 +950,8 @@ Simple styled radio-button that can accept a formGroup and a control.
 >  public selectOptions: ApexSelectOptions = {
 >    label: 'Example label',
 >    data: [
->           { label: 'Any string', value: any },
->           { label: '', value: any },
+>           { label: 'Any string', value: any, icon: 'icon.svg' },
+>           { label: '', value: any, icon: 'write.svg' },
 >           { label: '', value: any },
 >    ],
 >    tooltip: 'tooltip text',
@@ -969,6 +1041,14 @@ Simple styled radio-button that can accept a formGroup and a control.
 >    --apex-select-dropdown-border-color: #E9E9E9;
 >    --apex-select-dropdown-background-color: #FFFFFF;
 >
+>    /* Option icons (per-item icons in dropdown): */
+>    --apex-select-option-icon-size: 20px;
+>    --apex-select-option-icon-spacing: 10px;
+>    --apex-select-option-icon-fill: #5D6068;
+>    --apex-select-option-icon-stroke: #ffffff00;
+>    --apex-select-option-icon-selected-fill: #F96138;
+>    --apex-select-option-icon-selected-stroke: #ffffff00;
+>
 >/* Note: When you want to setup the color of your icon
 > you should experiment with both these variables or consider
 > using the one your icon is based on.  */
@@ -1543,18 +1623,35 @@ Two types of tables are available. One with local data and local sorting & filte
 >
 >**class?: string | { [key: string]: string }**: Custom CSS classes for styling the column.
 >
+>**change?: string**: Row property path for a percentage change value. When set, an inline chip appears next to the cell value showing the change (e.g., "+6.2%") — green for positive, red for negative. Works with Text, Number, Currency, and NumberMath column types.
+>
+>**listOptions?: ApexTableListOptions**: Groups list column display options into a single object.
+>- `label?: string` — the property name on each array item to use as the display label (e.g., `'name'`).
+>- `max?: number` — the maximum number of items to show before the overflow badge. Default is `3`.
+>
+>**cellOptions?: ApexTableCellOptions**: Groups cell-level display options (icon, icon position, color) into a single object.
+>
+>```typescript
+>export interface ApexTableCellOptions {
+>  icon?: string | { [key: string]: string };       // static icon or value-to-icon map
+>  iconPosition?: 'left' | 'right';                 // default: 'left'
+>  color?: { [key: string]: string };                // value-to-color map for text color
+>}
+>```
+>
 
 >#### columnType - ApexTableColumnType
->```typescript 
+>```typescript
 >export enum ApexTableColumnType {
->  Text,      // A standard text column
->  Date,      // A column for displaying dates
->  Currency,  // A column for displaying currencies
->  Chip,      // A column for displaying chip components
->  Checkbox,  // A column for displaying checkboxes
->  Number,    // A column for displaying numbers
+>  Text,        // A standard text column
+>  Date,        // A column for displaying dates
+>  Currency,    // A column for displaying currencies
+>  Chip,        // A column for displaying chip components
+>  Checkbox,    // A column for displaying checkboxes
+>  Number,      // A column for displaying numbers
 >  NumberMath,  // A column for displaying combined properties' values numbers with additional addition, subtraction, multiplication, division logic.
->  Actions,   // A column for action buttons
+>  Actions,     // A column for action buttons
+>  List,        // A column for displaying arrays with overflow badge
 >}
 >```
 >
@@ -1571,7 +1668,90 @@ Two types of tables are available. One with local data and local sorting & filte
 >Number Column: Displays numbers with optional prefix and suffix. This column type also supports calculations based on the numeric values.
 >
 >Actions Column: Displays action buttons with dynamic visibility based on context.
->```typescript 
+>
+>List Column: Displays an array of objects as a formatted text string joined by " / " (e.g., "Miami / Orlando / Tampa"). When the array exceeds `listOptions.max` items, an overflow badge (+N) appears. Hovering the badge shows a tooltip with all remaining items.
+
+### List Column Usage
+
+>```typescript
+>// Data
+>public tableData = [
+>  {
+>    id: 1,
+>    locations: [
+>      { name: 'Miami' },
+>      { name: 'Orlando' },
+>      { name: 'Tampa' },
+>      { name: 'Jacksonville' },
+>      { name: 'Tallahassee' }
+>    ]
+>  }
+>];
+>
+>// Column config
+>public tableColumns: ApexTableColumn[] = [
+>  {
+>    label: 'Locations',
+>    value: 'locations',
+>    type: ApexTableColumnType.List,
+>    listOptions: {
+>      label: 'name',     // which property on each item to display
+>      max: 3,            // show first 3, then "+2" badge
+>    },
+>    width: '200px'
+>  }
+>];
+>```
+>
+>This renders: **Miami / Orlando / Tampa** `+2`
+>
+>Hovering `+2` shows a tooltip with:
+>- Jacksonville
+>- Tallahassee
+
+### List Column CSS Variables
+
+>| Variable | Default | Description |
+>|---|---|---|
+>| `--apex-table-list-overflow-background` | `transparent` | Overflow badge background |
+>| `--apex-table-list-overflow-color` | `#FFA753` | Overflow badge text color |
+>| `--apex-table-list-overflow-border-color` | `#FFEFE1` | Overflow badge border color |
+
+### Cell Icons
+
+Cell icons allow you to display an icon next to the text in a cell. The icon can be static or mapped per value, making it useful for status indicators, engagement levels, etc.
+
+>```typescript
+>// Column with value-mapped icons and colors
+>public columns: ApexTableColumn[] = [
+>  {
+>    label: 'Engagement',
+>    value: 'engagement',
+>    width: '120px',
+>    cellOptions: {
+>      icon: {
+>        'High': 'arrow-up.svg',
+>        'Medium': 'arrow-up-right.svg',
+>        'Low': 'arrow-down.svg'
+>      },
+>      color: {
+>        'High': '#26D280',
+>        'Medium': '#FFA753',
+>        'Low': '#FF4242'
+>      }
+>    }
+>  }
+>];
+>```
+>
+>This renders an arrow icon + colored text per value:
+>- **High**: green arrow up + green text
+>- **Medium**: orange diagonal arrow + orange text
+>- **Low**: red arrow down + red text
+>
+>Use `iconPosition: 'right'` inside `cellOptions` to place the icon after the text.
+
+>```typescript
 >export interface Action {
 >  icon: string;    // Icon source. example: ('assets/icons/icon.svg')
 >  label: string;      // Label for icon. Tooltip pops on hover.
@@ -1889,3 +2069,96 @@ place it as a directive to a component:
 [🔼 Back to top](#components)
 
 -----------------------------------------------------------------
+
+# APEX More Options Component
+A three-dot menu button that opens a dropdown with action items. Supports horizontal and vertical dot orientation, icon + label menu items, and custom dropdown content via ng-content.
+
+## Usage
+>**`parent.component.ts`**
+>```typescript
+>import { ApexMoreOptionsComponent, ApexMoreOptionsItem }
+>from '@apexara/ng-components/more-options';
+>
+>@Component({
+>  imports: [ ApexMoreOptionsComponent ]
+>})
+>
+>export class ExampleComponent {
+>
+>  public menuItems: ApexMoreOptionsItem[] = [
+>    { label: 'Edit', icon: 'write.svg', execute: () => console.log('edit') },
+>    { label: 'View', icon: 'eye.svg', execute: () => console.log('view') },
+>    { label: 'Delete', icon: 'delete.svg', disabled: true },
+>  ];
+>
+>}
+>```
+>**`parent.component.html`**
+>```html
+><!-- Default (horizontal dots) with items -->
+><apex-more-options
+>  [items]="menuItems"
+>  (itemClick)="onItemClick($event)">
+></apex-more-options>
+>
+><!-- Vertical dots -->
+><apex-more-options
+>  [items]="menuItems"
+>  [vertical]="true">
+></apex-more-options>
+>
+><!-- Custom dropdown content (no items) -->
+><apex-more-options>
+>  <div style="padding: 16px;">Any custom content here</div>
+></apex-more-options>
+>```
+
+### ApexMoreOptionsItem
+>```typescript
+>interface ApexMoreOptionsItem {
+>  icon?: string;       // SVG filename relative to assets/img/
+>  label: string;
+>  execute?: () => void;
+>  disabled?: boolean;
+>}
+>```
+
+### Inputs
+>#### items
+>Array of `ApexMoreOptionsItem` objects defining the dropdown menu actions. When empty, the component falls back to projecting `<ng-content>` for custom dropdown content.
+
+>#### vertical
+>Boolean that rotates the three-dot icon 90 degrees for vertical orientation. Default is `false` (horizontal).
+
+### Outputs
+>#### itemClick
+>Event emitter that fires the clicked `ApexMoreOptionsItem` when a menu item is selected.
+
+### CSS Variables
+>Here are all the available CSS variables (and their default values) you can set when using apex-more-options:
+>
+>```css
+>apex-more-options {
+>    /* Trigger button: */
+>    --apex-more-options-trigger-size: 32px;
+>    --apex-more-options-trigger-border-radius: 8px;
+>    --apex-more-options-trigger-background: transparent;
+>    --apex-more-options-trigger-hover-background: #F7F8FB;
+>    --apex-more-options-trigger-border-color: #E9E9E9;
+>    --apex-more-options-icon-fill: #000000;
+>
+>    /* Dropdown: */
+>    --apex-more-options-dropdown-background: #FFFFFF;
+>    --apex-more-options-dropdown-border-radius: 8px;
+>    --apex-more-options-dropdown-box-shadow: 0px 4px 8px 0px rgba(214, 214, 214, 0.35);
+>
+>    /* Menu items: */
+>    --apex-more-options-item-height: 44px;
+>    --apex-more-options-item-hover-background: #F3F3F3;
+>    --apex-more-options-item-color: #0B1222;
+>    --apex-more-options-item-icon-fill: #5D6068;
+>    --apex-more-options-item-icon-stroke: #ffffff00;
+>}
+>```
+
+[🔼 Back to top](#components)

package/fesm2022/apexara-ng-components-checkbox.mjs

@@ -1,39 +1,78 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, Input, Component } from '@angular/core';
+import { EventEmitter, signal, HostListener, Output, Input, Component } from '@angular/core';
 import { NgClass, NgTemplateOutlet } from '@angular/common';
 import * as i1 from '@angular/forms';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { TouchedChangeEvent, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { filter } from 'rxjs';
 import { TooltipPosition, ApexTooltipDirective } from '@apexara/ng-components/tooltip';
 
 class ApexCheckboxComponent {
-    constructor(changeDetectorRef) {
-        this.changeDetectorRef = changeDetectorRef;
+    constructor() {
         this.checked = false;
         this.disabled = false;
         this.tooltip = null;
         this.options = null;
         this.clickChange = new EventEmitter();
         this.tooltipPosition = TooltipPosition;
+        this.controlInvalid = signal(false, ...(ngDevMode ? [{ debugName: "controlInvalid" }] : []));
+        this.errorLabel = signal('', ...(ngDevMode ? [{ debugName: "errorLabel" }] : []));
+        this.control = null;
     }
     ngAfterViewInit() {
-        this.checkIfControlDisabled();
+        this.setControl();
     }
     ngOnDestroy() {
         if (this.controlSubscription) {
             this.controlSubscription.unsubscribe();
         }
     }
+    onFocusOut() {
+        this.initChange();
+    }
     onChange() {
         this.clickChange.emit(this.checked);
     }
-    checkIfControlDisabled() {
+    setControl() {
         if (!this.options || !this.options.formGroup || !this.options.formControlName || !this.options.formGroup.get(this.options.formControlName)) {
             return;
         }
-        this.disabled = this.options.formGroup.controls[this.options.formControlName].disabled;
+        this.control = this.options.formGroup.controls[this.options.formControlName];
+        this.disabled = this.control.disabled;
+        this.controlSubscription = this.control.statusChanges.subscribe(() => {
+            this.initChange();
+        });
+        this.controlSubscription.add(this.control.events
+            .pipe(filter(event => event instanceof TouchedChangeEvent))
+            .subscribe(() => {
+            this.initChange();
+        }));
+    }
+    initChange() {
+        if (!this.control) {
+            return;
+        }
+        this.checkIfControlInvalid(this.control);
+        this.getErrorLabel();
+    }
+    checkIfControlInvalid(control) {
+        this.controlInvalid.set(control.touched && control.invalid);
+    }
+    getErrorLabel() {
+        this.errorLabel.set('');
+        const options = this.options;
+        const formGroup = options.formGroup;
+        const formControlName = options.formControlName;
+        if (formGroup && formControlName && options.errors && this.controlInvalid()) {
+            for (const error in options.errors) {
+                if (formGroup.controls[formControlName].hasError(error)) {
+                    this.errorLabel.set(options.errors[error]);
+                    return;
+                }
+            }
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexCheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ApexCheckboxComponent, isStandalone: true, selector: "apex-checkbox", inputs: { checked: "checked", disabled: "disabled", tooltip: "tooltip", options: "options" }, outputs: { clickChange: "clickChange" }, ngImport: i0, template: "@if (options && options.formGroup && options.formControlName) {\n    <label class=\"checkbox\" [ngClass]=\"{ checked: options.formGroup.controls[options.formControlName].value, disabled }\" [formGroup]=\"options.formGroup\">\n        <input #input type=\"checkbox\" name=\"checkbox\" [formControlName]=\"options.formControlName\"/>\n\n        <div class=\"checkbox-svg\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\" viewBox=\"0 0 11 8\" fill=\"none\">\n                <path d=\"M1 4L4 7L10 1\" stroke=\"white\" stroke-width=\"2\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </label>\n} @else {\n    <label class=\"checkbox\" [ngClass]=\"{ checked, disabled }\">\n        <input #input type=\"checkbox\" name=\"checkbox\" [(ngModel)]=\"checked\" [disabled]=\"disabled\" (change)=\"onChange()\"/>\n\n        <div class=\"checkbox-svg\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\" viewBox=\"0 0 11 8\" fill=\"none\">\n                <path d=\"M1 4L4 7L10 1\" stroke=\"white\" stroke-width=\"2\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n        </div>\n\n  \n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </label>\n}\n\n<ng-template #content>\n    <span>\n        <ng-content></ng-content>\n    </span>\n\n    @if (tooltip) {\n        <div class=\"tooltip-svg\">\n            <svg [apexTooltip]=\"tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <g stroke=\"#fff\">\n                    <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n                </g>\n            </svg>\n        </div>\n    }\n</ng-template>\n", styles: [":host{touch-action:manipulation}.checkbox{display:flex;align-items:center;position:relative;cursor:pointer}.checkbox.disabled{opacity:var(--apex-checkbox-disabled-opacity, .5);cursor:not-allowed;pointer-events:none}.checkbox span{color:var(--apex-checkbox-text-color, #0B1222);text-wrap:wrap;word-break:break-all;font-size:var(--apex-checkbox-font-size, 14px)}.checkbox span:not(:empty){margin:0 4px 0 8px}.checkbox input[type=checkbox]{width:20px;min-width:20px;height:20px;display:block}.checkbox input[type=checkbox]{appearance:none;-webkit-appearance:none;-moz-appearance:none;position:relative;cursor:pointer;outline:var(--apex-checkbox-outline-color, none);background-color:var(--apex-checkbox-background-color, #F7F8FB);border:1px solid var(--apex-checkbox-border-color, #E9E9E9);border-radius:4px;transition:box-shadow .3s,border .25s;box-shadow:inset 0 0 0 0 var(--apex-checkbox-border-color);margin:0}.checkbox.checked input[type=checkbox]{box-shadow:inset 0 0 0 10px var(--apex-checkbox-box-shadow-color, #F96138)}.checkbox-svg{width:20px;height:20px;position:absolute}.checkbox .checkbox-svg svg{position:absolute;top:50%;left:50%;transform:translateY(-50%) translate(-50%)}.checkbox .checkbox-svg svg path{fill:none;stroke:none;pointer-events:none;stroke:transparent;stroke-linecap:round;stroke-linejoin:round}.checkbox.checked .checkbox-svg svg path{stroke:var(--apex-checkbox-arrow-color, #FFFFFF)}.tooltip-svg{width:16px;height:16px}.tooltip-svg g{stroke:var(--apex-checkbox-tooltip-icon-stroke, #FFFFFF)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ApexTooltipDirective, selector: "[apexTooltip]", inputs: ["apexTooltip", "tooltipPosition"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ApexCheckboxComponent, isStandalone: true, selector: "apex-checkbox", inputs: { checked: "checked", disabled: "disabled", tooltip: "tooltip", options: "options" }, outputs: { clickChange: "clickChange" }, host: { listeners: { "focusout": "onFocusOut()" } }, ngImport: i0, template: "@if (options && options.formGroup && options.formControlName) {\n    <label class=\"checkbox\" [ngClass]=\"{ checked: options.formGroup.controls[options.formControlName].value, disabled }\" [formGroup]=\"options.formGroup\">\n        <input #input type=\"checkbox\" name=\"checkbox\" [formControlName]=\"options.formControlName\"/>\n\n        <div class=\"checkbox-svg\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\" viewBox=\"0 0 11 8\" fill=\"none\">\n                <path d=\"M1 4L4 7L10 1\" stroke=\"white\" stroke-width=\"2\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </label>\n\n    @if (options && options.errors) {\n        <div class=\"footer\" [ngClass]=\"{ 'error': controlInvalid() }\">\n            {{ errorLabel() }}\n        </div>\n    }\n} @else {\n    <label class=\"checkbox\" [ngClass]=\"{ checked, disabled }\">\n        <input #input type=\"checkbox\" name=\"checkbox\" [(ngModel)]=\"checked\" [disabled]=\"disabled\" (change)=\"onChange()\"/>\n\n        <div class=\"checkbox-svg\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\" viewBox=\"0 0 11 8\" fill=\"none\">\n                <path d=\"M1 4L4 7L10 1\" stroke=\"white\" stroke-width=\"2\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n        </div>\n\n  \n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </label>\n}\n\n<ng-template #content>\n    <span>\n        <ng-content></ng-content>\n    </span>\n\n    @if (tooltip) {\n        <div class=\"tooltip-svg\">\n            <svg [apexTooltip]=\"tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <g stroke=\"#fff\">\n                    <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n                </g>\n            </svg>\n        </div>\n    }\n</ng-template>\n", styles: [":host{touch-action:manipulation}.checkbox{display:flex;align-items:center;position:relative;cursor:pointer}.checkbox.disabled{opacity:var(--apex-checkbox-disabled-opacity, .5);cursor:not-allowed;pointer-events:none}.checkbox span{color:var(--apex-checkbox-text-color, #0B1222);text-wrap:wrap;word-break:break-all;font-size:var(--apex-checkbox-font-size, 14px)}.checkbox span:not(:empty){margin:0 4px 0 8px}.checkbox input[type=checkbox]{width:20px;min-width:20px;height:20px;display:block}.checkbox input[type=checkbox]{appearance:none;-webkit-appearance:none;-moz-appearance:none;position:relative;cursor:pointer;outline:var(--apex-checkbox-outline-color, none);background-color:var(--apex-checkbox-background-color, #F7F8FB);border:1px solid var(--apex-checkbox-border-color, #E9E9E9);border-radius:4px;transition:box-shadow .3s,border .25s;box-shadow:inset 0 0 0 0 var(--apex-checkbox-border-color);margin:0}.checkbox.checked input[type=checkbox]{box-shadow:inset 0 0 0 10px var(--apex-checkbox-box-shadow-color, #F96138)}.checkbox-svg{width:20px;height:20px;position:absolute}.checkbox .checkbox-svg svg{position:absolute;top:50%;left:50%;transform:translateY(-50%) translate(-50%)}.checkbox .checkbox-svg svg path{fill:none;stroke:none;pointer-events:none;stroke:transparent;stroke-linecap:round;stroke-linejoin:round}.checkbox.checked .checkbox-svg svg path{stroke:var(--apex-checkbox-arrow-color, #FFFFFF)}.tooltip-svg{width:16px;height:16px}.tooltip-svg g{stroke:var(--apex-checkbox-tooltip-icon-stroke, #FFFFFF)}.footer{height:14px;font-size:12px;margin-top:2px}.footer.error{color:var(--apex-checkbox-error-color, #F96138)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ApexTooltipDirective, selector: "[apexTooltip]", inputs: ["apexTooltip", "tooltipPosition"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexCheckboxComponent, decorators: [{
             type: Component,
@@ -43,8 +82,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
                         NgTemplateOutlet,
                         ApexTooltipDirective,
                         ReactiveFormsModule,
-                    ], template: "@if (options && options.formGroup && options.formControlName) {\n    <label class=\"checkbox\" [ngClass]=\"{ checked: options.formGroup.controls[options.formControlName].value, disabled }\" [formGroup]=\"options.formGroup\">\n        <input #input type=\"checkbox\" name=\"checkbox\" [formControlName]=\"options.formControlName\"/>\n\n        <div class=\"checkbox-svg\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\" viewBox=\"0 0 11 8\" fill=\"none\">\n                <path d=\"M1 4L4 7L10 1\" stroke=\"white\" stroke-width=\"2\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </label>\n} @else {\n    <label class=\"checkbox\" [ngClass]=\"{ checked, disabled }\">\n        <input #input type=\"checkbox\" name=\"checkbox\" [(ngModel)]=\"checked\" [disabled]=\"disabled\" (change)=\"onChange()\"/>\n\n        <div class=\"checkbox-svg\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\" viewBox=\"0 0 11 8\" fill=\"none\">\n                <path d=\"M1 4L4 7L10 1\" stroke=\"white\" stroke-width=\"2\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n        </div>\n\n  \n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </label>\n}\n\n<ng-template #content>\n    <span>\n        <ng-content></ng-content>\n    </span>\n\n    @if (tooltip) {\n        <div class=\"tooltip-svg\">\n            <svg [apexTooltip]=\"tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <g stroke=\"#fff\">\n                    <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n                </g>\n            </svg>\n        </div>\n    }\n</ng-template>\n", styles: [":host{touch-action:manipulation}.checkbox{display:flex;align-items:center;position:relative;cursor:pointer}.checkbox.disabled{opacity:var(--apex-checkbox-disabled-opacity, .5);cursor:not-allowed;pointer-events:none}.checkbox span{color:var(--apex-checkbox-text-color, #0B1222);text-wrap:wrap;word-break:break-all;font-size:var(--apex-checkbox-font-size, 14px)}.checkbox span:not(:empty){margin:0 4px 0 8px}.checkbox input[type=checkbox]{width:20px;min-width:20px;height:20px;display:block}.checkbox input[type=checkbox]{appearance:none;-webkit-appearance:none;-moz-appearance:none;position:relative;cursor:pointer;outline:var(--apex-checkbox-outline-color, none);background-color:var(--apex-checkbox-background-color, #F7F8FB);border:1px solid var(--apex-checkbox-border-color, #E9E9E9);border-radius:4px;transition:box-shadow .3s,border .25s;box-shadow:inset 0 0 0 0 var(--apex-checkbox-border-color);margin:0}.checkbox.checked input[type=checkbox]{box-shadow:inset 0 0 0 10px var(--apex-checkbox-box-shadow-color, #F96138)}.checkbox-svg{width:20px;height:20px;position:absolute}.checkbox .checkbox-svg svg{position:absolute;top:50%;left:50%;transform:translateY(-50%) translate(-50%)}.checkbox .checkbox-svg svg path{fill:none;stroke:none;pointer-events:none;stroke:transparent;stroke-linecap:round;stroke-linejoin:round}.checkbox.checked .checkbox-svg svg path{stroke:var(--apex-checkbox-arrow-color, #FFFFFF)}.tooltip-svg{width:16px;height:16px}.tooltip-svg g{stroke:var(--apex-checkbox-tooltip-icon-stroke, #FFFFFF)}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { checked: [{
+                    ], template: "@if (options && options.formGroup && options.formControlName) {\n    <label class=\"checkbox\" [ngClass]=\"{ checked: options.formGroup.controls[options.formControlName].value, disabled }\" [formGroup]=\"options.formGroup\">\n        <input #input type=\"checkbox\" name=\"checkbox\" [formControlName]=\"options.formControlName\"/>\n\n        <div class=\"checkbox-svg\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\" viewBox=\"0 0 11 8\" fill=\"none\">\n                <path d=\"M1 4L4 7L10 1\" stroke=\"white\" stroke-width=\"2\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </label>\n\n    @if (options && options.errors) {\n        <div class=\"footer\" [ngClass]=\"{ 'error': controlInvalid() }\">\n            {{ errorLabel() }}\n        </div>\n    }\n} @else {\n    <label class=\"checkbox\" [ngClass]=\"{ checked, disabled }\">\n        <input #input type=\"checkbox\" name=\"checkbox\" [(ngModel)]=\"checked\" [disabled]=\"disabled\" (change)=\"onChange()\"/>\n\n        <div class=\"checkbox-svg\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\" viewBox=\"0 0 11 8\" fill=\"none\">\n                <path d=\"M1 4L4 7L10 1\" stroke=\"white\" stroke-width=\"2\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n        </div>\n\n  \n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </label>\n}\n\n<ng-template #content>\n    <span>\n        <ng-content></ng-content>\n    </span>\n\n    @if (tooltip) {\n        <div class=\"tooltip-svg\">\n            <svg [apexTooltip]=\"tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <g stroke=\"#fff\">\n                    <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n                </g>\n            </svg>\n        </div>\n    }\n</ng-template>\n", styles: [":host{touch-action:manipulation}.checkbox{display:flex;align-items:center;position:relative;cursor:pointer}.checkbox.disabled{opacity:var(--apex-checkbox-disabled-opacity, .5);cursor:not-allowed;pointer-events:none}.checkbox span{color:var(--apex-checkbox-text-color, #0B1222);text-wrap:wrap;word-break:break-all;font-size:var(--apex-checkbox-font-size, 14px)}.checkbox span:not(:empty){margin:0 4px 0 8px}.checkbox input[type=checkbox]{width:20px;min-width:20px;height:20px;display:block}.checkbox input[type=checkbox]{appearance:none;-webkit-appearance:none;-moz-appearance:none;position:relative;cursor:pointer;outline:var(--apex-checkbox-outline-color, none);background-color:var(--apex-checkbox-background-color, #F7F8FB);border:1px solid var(--apex-checkbox-border-color, #E9E9E9);border-radius:4px;transition:box-shadow .3s,border .25s;box-shadow:inset 0 0 0 0 var(--apex-checkbox-border-color);margin:0}.checkbox.checked input[type=checkbox]{box-shadow:inset 0 0 0 10px var(--apex-checkbox-box-shadow-color, #F96138)}.checkbox-svg{width:20px;height:20px;position:absolute}.checkbox .checkbox-svg svg{position:absolute;top:50%;left:50%;transform:translateY(-50%) translate(-50%)}.checkbox .checkbox-svg svg path{fill:none;stroke:none;pointer-events:none;stroke:transparent;stroke-linecap:round;stroke-linejoin:round}.checkbox.checked .checkbox-svg svg path{stroke:var(--apex-checkbox-arrow-color, #FFFFFF)}.tooltip-svg{width:16px;height:16px}.tooltip-svg g{stroke:var(--apex-checkbox-tooltip-icon-stroke, #FFFFFF)}.footer{height:14px;font-size:12px;margin-top:2px}.footer.error{color:var(--apex-checkbox-error-color, #F96138)}\n"] }]
+        }], propDecorators: { checked: [{
                 type: Input
             }], disabled: [{
                 type: Input
@@ -54,6 +93,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
                 type: Input
             }], clickChange: [{
                 type: Output
+            }], onFocusOut: [{
+                type: HostListener,
+                args: ['focusout']
             }] } });
 
 /**

package/fesm2022/apexara-ng-components-checkbox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"apexara-ng-components-checkbox.mjs","sources":["../../../../projects/apexara/ng-components/checkbox/src/checkbox.component.ts","../../../../projects/apexara/ng-components/checkbox/src/checkbox.component.html","../../../../projects/apexara/ng-components/checkbox/apexara-ng-components-checkbox.ts"],"sourcesContent":["import { Component, Input, Output, EventEmitter, ChangeDetectorRef } from '@angular/core';\nimport { NgClass, NgTemplateOutlet } from '@angular/common';\nimport { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';\n\nimport { Subscription } from 'rxjs';\n\nimport { ApexTooltipDirective, TooltipPosition } from '@apexara/ng-components/tooltip';\n\nexport interface ApexCheckboxOptions {\n  formGroup?: FormGroup;\n  formControlName?: string;\n}\n\n@Component({\n  selector: 'apex-checkbox',\n  templateUrl: './checkbox.component.html',\n  styleUrls: ['./checkbox.component.css'],\n  imports: [\n    NgClass,\n    FormsModule,\n    NgTemplateOutlet,\n    ApexTooltipDirective,\n    ReactiveFormsModule,\n  ],\n})\n\nexport class ApexCheckboxComponent {\n\n  constructor(private changeDetectorRef: ChangeDetectorRef) { }\n\n  @Input() checked = false;\n  @Input() disabled = false;\n  @Input() tooltip: string | null = null;\n\n  @Input() options: ApexCheckboxOptions | null = null;\n\n  @Output() clickChange = new EventEmitter<boolean>();\n\n  public tooltipPosition = TooltipPosition;\n\n  private controlSubscription!: Subscription;\n\n  public ngAfterViewInit(): void {\n    this.checkIfControlDisabled();\n  }\n\n  public ngOnDestroy(): void {\n    if (this.controlSubscription) {\n      this.controlSubscription.unsubscribe();\n    }\n  }\n\n  public onChange(): void {\n    this.clickChange.emit(this.checked);\n  }\n\n  private checkIfControlDisabled(): void {\n    if (!this.options || !this.options.formGroup || !this.options.formControlName || !this.options.formGroup.get(this.options.formControlName)) {\n      return;\n    }\n\n    this.disabled = this.options.formGroup.controls[this.options.formControlName].disabled;\n  }\n\n}\n","@if (options && options.formGroup && options.formControlName) {\n    <label class=\"checkbox\" [ngClass]=\"{ checked: options.formGroup.controls[options.formControlName].value, disabled }\" [formGroup]=\"options.formGroup\">\n        <input #input type=\"checkbox\" name=\"checkbox\" [formControlName]=\"options.formControlName\"/>\n\n        <div class=\"checkbox-svg\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\" viewBox=\"0 0 11 8\" fill=\"none\">\n                <path d=\"M1 4L4 7L10 1\" stroke=\"white\" stroke-width=\"2\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </label>\n} @else {\n    <label class=\"checkbox\" [ngClass]=\"{ checked, disabled }\">\n        <input #input type=\"checkbox\" name=\"checkbox\" [(ngModel)]=\"checked\" [disabled]=\"disabled\" (change)=\"onChange()\"/>\n\n        <div class=\"checkbox-svg\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\" viewBox=\"0 0 11 8\" fill=\"none\">\n                <path d=\"M1 4L4 7L10 1\" stroke=\"white\" stroke-width=\"2\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n        </div>\n\n  \n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </label>\n}\n\n<ng-template #content>\n    <span>\n        <ng-content></ng-content>\n    </span>\n\n    @if (tooltip) {\n        <div class=\"tooltip-svg\">\n            <svg [apexTooltip]=\"tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <g stroke=\"#fff\">\n                    <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n                </g>\n            </svg>\n        </div>\n    }\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"apexara-ng-components-checkbox.mjs","sources":["../../../../projects/apexara/ng-components/checkbox/src/checkbox.component.ts","../../../../projects/apexara/ng-components/checkbox/src/checkbox.component.html","../../../../projects/apexara/ng-components/checkbox/apexara-ng-components-checkbox.ts"],"sourcesContent":["import { Component, Input, Output, EventEmitter, HostListener, signal } from '@angular/core';\nimport { NgClass, NgTemplateOutlet } from '@angular/common';\nimport { AbstractControl, FormGroup, FormsModule, ReactiveFormsModule, TouchedChangeEvent } from '@angular/forms';\n\nimport { Subscription, filter } from 'rxjs';\n\nimport { ApexTooltipDirective, TooltipPosition } from '@apexara/ng-components/tooltip';\n\nexport interface ApexCheckboxOptions {\n  formGroup?: FormGroup;\n  formControlName?: string;\n  errors?: ApexCheckboxErrors;\n}\n\nexport interface ApexCheckboxErrors {\n  [x: string]: string;\n}\n\n@Component({\n  selector: 'apex-checkbox',\n  templateUrl: './checkbox.component.html',\n  styleUrls: ['./checkbox.component.css'],\n  imports: [\n    NgClass,\n    FormsModule,\n    NgTemplateOutlet,\n    ApexTooltipDirective,\n    ReactiveFormsModule,\n  ],\n})\n\nexport class ApexCheckboxComponent {\n\n  @Input() checked = false;\n  @Input() disabled = false;\n  @Input() tooltip: string | null = null;\n\n  @Input() options: ApexCheckboxOptions | null = null;\n\n  @Output() clickChange = new EventEmitter<boolean>();\n\n  public tooltipPosition = TooltipPosition;\n  public controlInvalid = signal(false);\n  public errorLabel = signal('');\n\n  private controlSubscription!: Subscription;\n  private control: AbstractControl | null = null;\n\n  public ngAfterViewInit(): void {\n    this.setControl();\n  }\n\n  public ngOnDestroy(): void {\n    if (this.controlSubscription) {\n      this.controlSubscription.unsubscribe();\n    }\n  }\n\n  @HostListener('focusout')\n  onFocusOut(): void {\n    this.initChange();\n  }\n\n  public onChange(): void {\n    this.clickChange.emit(this.checked);\n  }\n\n  private setControl(): void {\n    if (!this.options || !this.options.formGroup || !this.options.formControlName || !this.options.formGroup.get(this.options.formControlName)) {\n      return;\n    }\n\n    this.control = this.options.formGroup.controls[this.options.formControlName];\n\n    this.disabled = this.control.disabled;\n\n    this.controlSubscription = this.control.statusChanges.subscribe(() => {\n      this.initChange();\n    });\n\n    this.controlSubscription.add(\n      this.control.events\n        .pipe(filter(event => event instanceof TouchedChangeEvent))\n        .subscribe(() => {\n          this.initChange();\n        })\n    );\n  }\n\n  private initChange(): void {\n    if (!this.control) {\n      return;\n    }\n\n    this.checkIfControlInvalid(this.control);\n    this.getErrorLabel();\n  }\n\n  private checkIfControlInvalid(control: AbstractControl): void {\n    this.controlInvalid.set(control.touched && control.invalid);\n  }\n\n  private getErrorLabel(): void {\n    this.errorLabel.set('');\n\n    const options = this.options!;\n    const formGroup = options.formGroup;\n    const formControlName = options.formControlName;\n\n    if (formGroup && formControlName && options.errors && this.controlInvalid()) {\n      for (const error in options.errors) {\n        if (formGroup.controls[formControlName].hasError(error)) {\n          this.errorLabel.set(options.errors[error]);\n\n          return;\n        }\n      }\n    }\n  }\n\n}\n","@if (options && options.formGroup && options.formControlName) {\n    <label class=\"checkbox\" [ngClass]=\"{ checked: options.formGroup.controls[options.formControlName].value, disabled }\" [formGroup]=\"options.formGroup\">\n        <input #input type=\"checkbox\" name=\"checkbox\" [formControlName]=\"options.formControlName\"/>\n\n        <div class=\"checkbox-svg\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\" viewBox=\"0 0 11 8\" fill=\"none\">\n                <path d=\"M1 4L4 7L10 1\" stroke=\"white\" stroke-width=\"2\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </label>\n\n    @if (options && options.errors) {\n        <div class=\"footer\" [ngClass]=\"{ 'error': controlInvalid() }\">\n            {{ errorLabel() }}\n        </div>\n    }\n} @else {\n    <label class=\"checkbox\" [ngClass]=\"{ checked, disabled }\">\n        <input #input type=\"checkbox\" name=\"checkbox\" [(ngModel)]=\"checked\" [disabled]=\"disabled\" (change)=\"onChange()\"/>\n\n        <div class=\"checkbox-svg\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\" viewBox=\"0 0 11 8\" fill=\"none\">\n                <path d=\"M1 4L4 7L10 1\" stroke=\"white\" stroke-width=\"2\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n        </div>\n\n  \n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </label>\n}\n\n<ng-template #content>\n    <span>\n        <ng-content></ng-content>\n    </span>\n\n    @if (tooltip) {\n        <div class=\"tooltip-svg\">\n            <svg [apexTooltip]=\"tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <g stroke=\"#fff\">\n                    <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n                </g>\n            </svg>\n        </div>\n    }\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}