@shival99/z-ui 1.0.1 → 1.0.2

package/fesm2022/shival99-z-ui-components-z-checkbox.mjs

@@ -0,0 +1,240 @@
+import * as i0 from '@angular/core';
+import { input, model, output, signal, computed, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { cva } from 'class-variance-authority';
+import { zTransform, zMergeClasses } from '@shival99/z-ui/utils';
+import { ZIconComponent } from '@shival99/z-ui/components/z-icon';
+
+const zCheckboxVariants = cva([
+    'relative inline-flex items-center justify-center shrink-0 cursor-pointer',
+    'rounded-[4px] border-2 border-input',
+    'transition-[border-color,background-color,box-shadow,color] duration-200',
+    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+    'disabled:cursor-not-allowed disabled:opacity-50',
+    'data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=checked]:text-primary-foreground',
+    'data-[state=indeterminate]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:text-primary-foreground',
+], {
+    variants: {
+        zSize: {
+            sm: 'size-4',
+            default: 'size-5',
+            lg: 'size-6',
+        },
+    },
+    defaultVariants: {
+        zSize: 'default',
+    },
+});
+const zCheckboxLabelVariants = cva('select-none cursor-pointer peer-disabled:cursor-not-allowed peer-disabled:opacity-70', {
+    variants: {
+        zSize: {
+            sm: 'text-xs',
+            default: 'text-sm',
+            lg: 'text-base',
+        },
+    },
+    defaultVariants: {
+        zSize: 'default',
+    },
+});
+
+class ZCheckboxComponent {
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
+    zType = input('default', ...(ngDevMode ? [{ debugName: "zType" }] : []));
+    zSize = input('default', ...(ngDevMode ? [{ debugName: "zSize" }] : []));
+    zLabel = input('', ...(ngDevMode ? [{ debugName: "zLabel" }] : []));
+    zText = input('', ...(ngDevMode ? [{ debugName: "zText" }] : []));
+    zDisabled = input(false, { ...(ngDevMode ? { debugName: "zDisabled" } : {}), transform: zTransform });
+    zIndeterminate = input(false, { ...(ngDevMode ? { debugName: "zIndeterminate" } : {}), transform: zTransform });
+    zValue = input('', ...(ngDevMode ? [{ debugName: "zValue" }] : []));
+    zOptions = input([], ...(ngDevMode ? [{ debugName: "zOptions" }] : []));
+    zOrientation = input('vertical', ...(ngDevMode ? [{ debugName: "zOrientation" }] : []));
+    zCheckAll = input(false, { ...(ngDevMode ? { debugName: "zCheckAll" } : {}), transform: zTransform });
+    zCheckAllText = input('Check All', ...(ngDevMode ? [{ debugName: "zCheckAllText" }] : []));
+    zChecked = model(false, ...(ngDevMode ? [{ debugName: "zChecked" }] : []));
+    zGroupValue = model([], ...(ngDevMode ? [{ debugName: "zGroupValue" }] : []));
+    zChange = output();
+    zGroupChange = output();
+    zControl = output();
+    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+    isDisabled = computed(() => this.zDisabled() || this._disabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    enabledOptions = computed(() => this.zOptions().filter(opt => !opt.disabled), ...(ngDevMode ? [{ debugName: "enabledOptions" }] : []));
+    isAllChecked = computed(() => {
+        const enabledOpts = this.enabledOptions();
+        if (enabledOpts.length === 0) {
+            return false;
+        }
+        return enabledOpts.every(opt => this.zGroupValue().includes(opt.value));
+    }, ...(ngDevMode ? [{ debugName: "isAllChecked" }] : []));
+    isNoneChecked = computed(() => {
+        const enabledOpts = this.enabledOptions();
+        return enabledOpts.every(opt => !this.zGroupValue().includes(opt.value));
+    }, ...(ngDevMode ? [{ debugName: "isNoneChecked" }] : []));
+    isIndeterminateState = computed(() => !this.isAllChecked() && !this.isNoneChecked(), ...(ngDevMode ? [{ debugName: "isIndeterminateState" }] : []));
+    hostClasses = computed(() => {
+        const hasLabel = !!this.zLabel();
+        if (this.zType() === 'group') {
+            return zMergeClasses('flex flex-col gap-2', this.class());
+        }
+        // When has zLabel, need flex-col to stack label above checkbox
+        if (hasLabel) {
+            return zMergeClasses('flex flex-col gap-2', this.class());
+        }
+        return zMergeClasses('inline-flex items-center gap-2', this.class());
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
+    groupClasses = computed(() => {
+        const orientation = this.zOrientation() === 'horizontal' ? 'flex-row flex-wrap' : 'flex-col';
+        return `flex ${orientation} gap-2`;
+    }, ...(ngDevMode ? [{ debugName: "groupClasses" }] : []));
+    checkboxClasses = computed(() => zCheckboxVariants({ zSize: this.zSize() }), ...(ngDevMode ? [{ debugName: "checkboxClasses" }] : []));
+    labelClasses = computed(() => zCheckboxLabelVariants({ zSize: this.zSize() }), ...(ngDevMode ? [{ debugName: "labelClasses" }] : []));
+    checkboxState = computed(() => {
+        if (this.zIndeterminate()) {
+            return 'indeterminate';
+        }
+        if (this.zChecked()) {
+            return 'checked';
+        }
+        return 'unchecked';
+    }, ...(ngDevMode ? [{ debugName: "checkboxState" }] : []));
+    iconSize = computed(() => {
+        const sizeMap = {
+            sm: '12',
+            default: '14',
+            lg: '16',
+        };
+        return sizeMap[this.zSize()];
+    }, ...(ngDevMode ? [{ debugName: "iconSize" }] : []));
+    _onChange = () => { };
+    _onTouched = () => { };
+    ngAfterViewInit() {
+        if (this.zType() === 'group' && this.zCheckAll()) {
+            this.zControl.emit({
+                checkAll: () => this._checkAllOptions(),
+                uncheckAll: () => this._uncheckAllOptions(),
+                toggleAll: () => this._toggleAllOptions(),
+                isAllChecked: this.isAllChecked,
+                isIndeterminate: this.isIndeterminateState,
+            });
+        }
+    }
+    writeValue(value) {
+        if (this.zType() === 'group') {
+            this.zGroupValue.set(Array.isArray(value) ? value : []);
+            return;
+        }
+        this.zChecked.set(!!value);
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._disabled.set(isDisabled);
+    }
+    onCheckboxClick() {
+        if (this.isDisabled()) {
+            return;
+        }
+        const newValue = !this.zChecked();
+        this.zChecked.set(newValue);
+        this.zChange.emit(newValue);
+        this._onChange(newValue);
+        this._onTouched();
+    }
+    onOptionClick(option) {
+        if (this.isDisabled() || option.disabled) {
+            return;
+        }
+        const currentValues = [...this.zGroupValue()];
+        const index = currentValues.indexOf(option.value);
+        if (index === -1) {
+            currentValues.push(option.value);
+        }
+        if (index !== -1) {
+            currentValues.splice(index, 1);
+        }
+        this.zGroupValue.set(currentValues);
+        this.zGroupChange.emit(currentValues);
+        this._onChange(currentValues);
+        this._onTouched();
+    }
+    onCheckAllClick() {
+        if (this.isDisabled()) {
+            return;
+        }
+        if (this.isAllChecked()) {
+            this._uncheckAllOptions();
+            return;
+        }
+        this._checkAllOptions();
+    }
+    isOptionChecked(option) {
+        return this.zGroupValue().includes(option.value);
+    }
+    getOptionState(option) {
+        return this.isOptionChecked(option) ? 'checked' : 'unchecked';
+    }
+    getCheckAllState() {
+        if (this.isAllChecked()) {
+            return 'checked';
+        }
+        if (this.isIndeterminateState()) {
+            return 'indeterminate';
+        }
+        return 'unchecked';
+    }
+    _checkAllOptions() {
+        const enabledValues = this.enabledOptions().map(opt => opt.value);
+        const currentValues = [...this.zGroupValue()];
+        const newValues = [...new Set([...currentValues, ...enabledValues])];
+        this.zGroupValue.set(newValues);
+        this.zGroupChange.emit(newValues);
+        this._onChange(newValues);
+        this._onTouched();
+    }
+    _uncheckAllOptions() {
+        const enabledValues = this.enabledOptions().map(opt => opt.value);
+        const currentValues = this.zGroupValue().filter(v => !enabledValues.includes(v));
+        this.zGroupValue.set(currentValues);
+        this.zGroupChange.emit(currentValues);
+        this._onChange(currentValues);
+        this._onTouched();
+    }
+    _toggleAllOptions() {
+        if (this.isAllChecked()) {
+            this._uncheckAllOptions();
+            return;
+        }
+        this._checkAllOptions();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ZCheckboxComponent, isStandalone: true, selector: "z-checkbox", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zType: { classPropertyName: "zType", publicName: "zType", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zLabel: { classPropertyName: "zLabel", publicName: "zLabel", isSignal: true, isRequired: false, transformFunction: null }, zText: { classPropertyName: "zText", publicName: "zText", isSignal: true, isRequired: false, transformFunction: null }, zDisabled: { classPropertyName: "zDisabled", publicName: "zDisabled", isSignal: true, isRequired: false, transformFunction: null }, zIndeterminate: { classPropertyName: "zIndeterminate", publicName: "zIndeterminate", isSignal: true, isRequired: false, transformFunction: null }, zValue: { classPropertyName: "zValue", publicName: "zValue", isSignal: true, isRequired: false, transformFunction: null }, zOptions: { classPropertyName: "zOptions", publicName: "zOptions", isSignal: true, isRequired: false, transformFunction: null }, zOrientation: { classPropertyName: "zOrientation", publicName: "zOrientation", isSignal: true, isRequired: false, transformFunction: null }, zCheckAll: { classPropertyName: "zCheckAll", publicName: "zCheckAll", isSignal: true, isRequired: false, transformFunction: null }, zCheckAllText: { classPropertyName: "zCheckAllText", publicName: "zCheckAllText", isSignal: true, isRequired: false, transformFunction: null }, zChecked: { classPropertyName: "zChecked", publicName: "zChecked", isSignal: true, isRequired: false, transformFunction: null }, zGroupValue: { classPropertyName: "zGroupValue", publicName: "zGroupValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zChecked: "zCheckedChange", zGroupValue: "zGroupValueChange", zChange: "zChange", zGroupChange: "zGroupChange", zControl: "zControl" }, host: { properties: { "class": "hostClasses()" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => ZCheckboxComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<!-- Group Mode -->\n@if (zType() === 'group') {\n  <!-- Label above group -->\n  @if (zLabel()) {\n    <label class=\"text-xs leading-none font-medium\">{{ zLabel() }}</label>\n  }\n\n  <div [class]=\"groupClasses()\">\n    <!-- Check All option -->\n    @if (zCheckAll()) {\n      <label\n        class=\"inline-flex cursor-pointer items-center gap-2\"\n        [class.opacity-50]=\"isDisabled()\"\n        [class.cursor-not-allowed]=\"isDisabled()\">\n        <button\n          type=\"button\"\n          role=\"checkbox\"\n          [class]=\"checkboxClasses()\"\n          [attr.aria-checked]=\"isAllChecked()\"\n          [attr.data-state]=\"getCheckAllState()\"\n          [disabled]=\"isDisabled()\"\n          (click)=\"onCheckAllClick()\">\n          @if (isIndeterminateState()) {\n            <i z-icon zType=\"lucideMinus\" [zSize]=\"iconSize()\" class=\"text-current\"></i>\n          }\n          @if (isAllChecked()) {\n            <i z-icon zType=\"lucideCheck\" [zSize]=\"iconSize()\" class=\"text-current\"></i>\n          }\n        </button>\n        <span [class]=\"labelClasses()\">{{ zCheckAllText() }}</span>\n      </label>\n    }\n\n    <!-- Options -->\n    @for (option of zOptions(); track option.value) {\n      <label\n        class=\"inline-flex cursor-pointer items-center gap-2\"\n        [class.opacity-40]=\"option.disabled || isDisabled()\"\n        [class.dark:opacity-50]=\"option.disabled || isDisabled()\"\n        [class.cursor-not-allowed]=\"option.disabled || isDisabled()\">\n        <button\n          type=\"button\"\n          role=\"checkbox\"\n          [class]=\"checkboxClasses()\"\n          [attr.aria-checked]=\"isOptionChecked(option)\"\n          [attr.data-state]=\"getOptionState(option)\"\n          [disabled]=\"isDisabled() || option.disabled\"\n          (click)=\"onOptionClick(option)\">\n          @if (isOptionChecked(option)) {\n            <i z-icon zType=\"lucideCheck\" [zSize]=\"iconSize()\" class=\"text-current\"></i>\n          }\n        </button>\n        <span [class]=\"labelClasses()\" [class.text-muted-foreground]=\"option.disabled\">{{ option.label }}</span>\n      </label>\n    }\n  </div>\n}\n\n<!-- Default Mode (single checkbox) -->\n@if (zType() === 'default') {\n  <!-- Label above -->\n  @if (zLabel()) {\n    <label class=\"text-xs leading-none font-medium\">{{ zLabel() }}</label>\n  }\n\n  <div class=\"inline-flex items-center gap-2\">\n    <button\n      type=\"button\"\n      role=\"checkbox\"\n      [class]=\"checkboxClasses()\"\n      [attr.aria-checked]=\"zChecked()\"\n      [attr.data-state]=\"checkboxState()\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"onCheckboxClick()\">\n      @if (zIndeterminate()) {\n        <i z-icon zType=\"lucideMinus\" [zSize]=\"iconSize()\" class=\"text-current\"></i>\n      }\n      @if (!zIndeterminate() && zChecked()) {\n        <i z-icon zType=\"lucideCheck\" [zSize]=\"iconSize()\" class=\"text-current\"></i>\n      }\n    </button>\n    @if (zText()) {\n      <label [class]=\"labelClasses()\" (click)=\"onCheckboxClick()\">{{ zText() }}</label>\n    }\n  </div>\n}\n", dependencies: [{ kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zSize", "zStrokeWidth", "zSvg"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'z-checkbox', imports: [ZIconComponent], standalone: true, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ZCheckboxComponent),
+                            multi: true,
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        '[class]': 'hostClasses()',
+                    }, template: "<!-- Group Mode -->\n@if (zType() === 'group') {\n  <!-- Label above group -->\n  @if (zLabel()) {\n    <label class=\"text-xs leading-none font-medium\">{{ zLabel() }}</label>\n  }\n\n  <div [class]=\"groupClasses()\">\n    <!-- Check All option -->\n    @if (zCheckAll()) {\n      <label\n        class=\"inline-flex cursor-pointer items-center gap-2\"\n        [class.opacity-50]=\"isDisabled()\"\n        [class.cursor-not-allowed]=\"isDisabled()\">\n        <button\n          type=\"button\"\n          role=\"checkbox\"\n          [class]=\"checkboxClasses()\"\n          [attr.aria-checked]=\"isAllChecked()\"\n          [attr.data-state]=\"getCheckAllState()\"\n          [disabled]=\"isDisabled()\"\n          (click)=\"onCheckAllClick()\">\n          @if (isIndeterminateState()) {\n            <i z-icon zType=\"lucideMinus\" [zSize]=\"iconSize()\" class=\"text-current\"></i>\n          }\n          @if (isAllChecked()) {\n            <i z-icon zType=\"lucideCheck\" [zSize]=\"iconSize()\" class=\"text-current\"></i>\n          }\n        </button>\n        <span [class]=\"labelClasses()\">{{ zCheckAllText() }}</span>\n      </label>\n    }\n\n    <!-- Options -->\n    @for (option of zOptions(); track option.value) {\n      <label\n        class=\"inline-flex cursor-pointer items-center gap-2\"\n        [class.opacity-40]=\"option.disabled || isDisabled()\"\n        [class.dark:opacity-50]=\"option.disabled || isDisabled()\"\n        [class.cursor-not-allowed]=\"option.disabled || isDisabled()\">\n        <button\n          type=\"button\"\n          role=\"checkbox\"\n          [class]=\"checkboxClasses()\"\n          [attr.aria-checked]=\"isOptionChecked(option)\"\n          [attr.data-state]=\"getOptionState(option)\"\n          [disabled]=\"isDisabled() || option.disabled\"\n          (click)=\"onOptionClick(option)\">\n          @if (isOptionChecked(option)) {\n            <i z-icon zType=\"lucideCheck\" [zSize]=\"iconSize()\" class=\"text-current\"></i>\n          }\n        </button>\n        <span [class]=\"labelClasses()\" [class.text-muted-foreground]=\"option.disabled\">{{ option.label }}</span>\n      </label>\n    }\n  </div>\n}\n\n<!-- Default Mode (single checkbox) -->\n@if (zType() === 'default') {\n  <!-- Label above -->\n  @if (zLabel()) {\n    <label class=\"text-xs leading-none font-medium\">{{ zLabel() }}</label>\n  }\n\n  <div class=\"inline-flex items-center gap-2\">\n    <button\n      type=\"button\"\n      role=\"checkbox\"\n      [class]=\"checkboxClasses()\"\n      [attr.aria-checked]=\"zChecked()\"\n      [attr.data-state]=\"checkboxState()\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"onCheckboxClick()\">\n      @if (zIndeterminate()) {\n        <i z-icon zType=\"lucideMinus\" [zSize]=\"iconSize()\" class=\"text-current\"></i>\n      }\n      @if (!zIndeterminate() && zChecked()) {\n        <i z-icon zType=\"lucideCheck\" [zSize]=\"iconSize()\" class=\"text-current\"></i>\n      }\n    </button>\n    @if (zText()) {\n      <label [class]=\"labelClasses()\" (click)=\"onCheckboxClick()\">{{ zText() }}</label>\n    }\n  </div>\n}\n" }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zType: [{ type: i0.Input, args: [{ isSignal: true, alias: "zType", required: false }] }], zSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSize", required: false }] }], zLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLabel", required: false }] }], zText: [{ type: i0.Input, args: [{ isSignal: true, alias: "zText", required: false }] }], zDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDisabled", required: false }] }], zIndeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "zIndeterminate", required: false }] }], zValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "zValue", required: false }] }], zOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOptions", required: false }] }], zOrientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOrientation", required: false }] }], zCheckAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "zCheckAll", required: false }] }], zCheckAllText: [{ type: i0.Input, args: [{ isSignal: true, alias: "zCheckAllText", required: false }] }], zChecked: [{ type: i0.Input, args: [{ isSignal: true, alias: "zChecked", required: false }] }, { type: i0.Output, args: ["zCheckedChange"] }], zGroupValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "zGroupValue", required: false }] }, { type: i0.Output, args: ["zGroupValueChange"] }], zChange: [{ type: i0.Output, args: ["zChange"] }], zGroupChange: [{ type: i0.Output, args: ["zGroupChange"] }], zControl: [{ type: i0.Output, args: ["zControl"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ZCheckboxComponent, zCheckboxLabelVariants, zCheckboxVariants };
+//# sourceMappingURL=shival99-z-ui-components-z-checkbox.mjs.map

package/fesm2022/shival99-z-ui-components-z-checkbox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"shival99-z-ui-components-z-checkbox.mjs","sources":["../../../../libs/core-ui/components/z-checkbox/z-checkbox.variants.ts","../../../../libs/core-ui/components/z-checkbox/z-checkbox.component.ts","../../../../libs/core-ui/components/z-checkbox/z-checkbox.component.html","../../../../libs/core-ui/components/z-checkbox/shival99-z-ui-components-z-checkbox.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\r\n\r\nexport const zCheckboxVariants = cva(\r\n  [\r\n    'relative inline-flex items-center justify-center shrink-0 cursor-pointer',\r\n    'rounded-[4px] border-2 border-input',\r\n    'transition-[border-color,background-color,box-shadow,color] duration-200',\r\n    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\r\n    'disabled:cursor-not-allowed disabled:opacity-50',\r\n    'data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=checked]:text-primary-foreground',\r\n    'data-[state=indeterminate]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:text-primary-foreground',\r\n  ],\r\n  {\r\n    variants: {\r\n      zSize: {\r\n        sm: 'size-4',\r\n        default: 'size-5',\r\n        lg: 'size-6',\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      zSize: 'default',\r\n    },\r\n  }\r\n);\r\n\r\nexport const zCheckboxLabelVariants = cva(\r\n  'select-none cursor-pointer peer-disabled:cursor-not-allowed peer-disabled:opacity-70',\r\n  {\r\n    variants: {\r\n      zSize: {\r\n        sm: 'text-xs',\r\n        default: 'text-sm',\r\n        lg: 'text-base',\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      zSize: 'default',\r\n    },\r\n  }\r\n);\r\n\r\nexport type ZCheckboxVariants = VariantProps<typeof zCheckboxVariants>;\r\n","import {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  forwardRef,\n  input,\n  model,\n  output,\n  signal,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport type { ClassValue } from 'clsx';\nimport type {\n  ZCheckboxControl,\n  ZCheckboxOption,\n  ZCheckboxOrientation,\n  ZCheckboxSize,\n  ZCheckboxType,\n} from './z-checkbox.types';\nimport { zCheckboxLabelVariants, zCheckboxVariants } from './z-checkbox.variants';\nimport { zMergeClasses, zTransform } from '@shival99/z-ui/utils';\nimport { ZIconComponent } from '@shival99/z-ui/components/z-icon';\n\n@Component({\n  selector: 'z-checkbox',\n  imports: [ZIconComponent],\n  standalone: true,\n  templateUrl: './z-checkbox.component.html',\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => ZCheckboxComponent),\n      multi: true,\n    },\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'hostClasses()',\n  },\n})\nexport class ZCheckboxComponent implements ControlValueAccessor, AfterViewInit {\n  public readonly class = input<ClassValue>('');\n  public readonly zType = input<ZCheckboxType>('default');\n  public readonly zSize = input<ZCheckboxSize>('default');\n  public readonly zLabel = input<string>('');\n  public readonly zText = input<string>('');\n  public readonly zDisabled = input(false, { transform: zTransform });\n  public readonly zIndeterminate = input(false, { transform: zTransform });\n  public readonly zValue = input<string | number>('');\n  public readonly zOptions = input<ZCheckboxOption[]>([]);\n  public readonly zOrientation = input<ZCheckboxOrientation>('vertical');\n  public readonly zCheckAll = input(false, { transform: zTransform });\n  public readonly zCheckAllText = input<string>('Check All');\n\n  public readonly zChecked = model<boolean>(false);\n  public readonly zGroupValue = model<(string | number)[]>([]);\n\n  public readonly zChange = output<boolean>();\n  public readonly zGroupChange = output<(string | number)[]>();\n  public readonly zControl = output<ZCheckboxControl>();\n\n  private readonly _disabled = signal(false);\n\n  protected readonly isDisabled = computed(() => this.zDisabled() || this._disabled());\n\n  protected readonly enabledOptions = computed(() => this.zOptions().filter(opt => !opt.disabled));\n\n  protected readonly isAllChecked = computed(() => {\n    const enabledOpts = this.enabledOptions();\n    if (enabledOpts.length === 0) {\n      return false;\n    }\n    return enabledOpts.every(opt => this.zGroupValue().includes(opt.value));\n  });\n\n  protected readonly isNoneChecked = computed(() => {\n    const enabledOpts = this.enabledOptions();\n    return enabledOpts.every(opt => !this.zGroupValue().includes(opt.value));\n  });\n\n  protected readonly isIndeterminateState = computed(() => !this.isAllChecked() && !this.isNoneChecked());\n\n  protected readonly hostClasses = computed(() => {\n    const hasLabel = !!this.zLabel();\n    if (this.zType() === 'group') {\n      return zMergeClasses('flex flex-col gap-2', this.class());\n    }\n    // When has zLabel, need flex-col to stack label above checkbox\n    if (hasLabel) {\n      return zMergeClasses('flex flex-col gap-2', this.class());\n    }\n    return zMergeClasses('inline-flex items-center gap-2', this.class());\n  });\n\n  protected readonly groupClasses = computed(() => {\n    const orientation = this.zOrientation() === 'horizontal' ? 'flex-row flex-wrap' : 'flex-col';\n    return `flex ${orientation} gap-2`;\n  });\n\n  protected readonly checkboxClasses = computed(() => zCheckboxVariants({ zSize: this.zSize() }));\n\n  protected readonly labelClasses = computed(() => zCheckboxLabelVariants({ zSize: this.zSize() }));\n\n  protected readonly checkboxState = computed(() => {\n    if (this.zIndeterminate()) {\n      return 'indeterminate';\n    }\n    if (this.zChecked()) {\n      return 'checked';\n    }\n    return 'unchecked';\n  });\n\n  protected readonly iconSize = computed(() => {\n    const sizeMap: Record<ZCheckboxSize, string> = {\n      sm: '12',\n      default: '14',\n      lg: '16',\n    };\n    return sizeMap[this.zSize()] as '12' | '14' | '16';\n  });\n\n  private _onChange: (value: boolean | (string | number)[]) => void = () => {};\n  private _onTouched: () => void = () => {};\n\n  public ngAfterViewInit(): void {\n    if (this.zType() === 'group' && this.zCheckAll()) {\n      this.zControl.emit({\n        checkAll: () => this._checkAllOptions(),\n        uncheckAll: () => this._uncheckAllOptions(),\n        toggleAll: () => this._toggleAllOptions(),\n        isAllChecked: this.isAllChecked,\n        isIndeterminate: this.isIndeterminateState,\n      });\n    }\n  }\n\n  public writeValue(value: boolean | (string | number)[] | null): void {\n    if (this.zType() === 'group') {\n      this.zGroupValue.set(Array.isArray(value) ? value : []);\n      return;\n    }\n    this.zChecked.set(!!value);\n  }\n\n  public registerOnChange(fn: (value: boolean | (string | number)[]) => void): void {\n    this._onChange = fn;\n  }\n\n  public registerOnTouched(fn: () => void): void {\n    this._onTouched = fn;\n  }\n\n  public setDisabledState(isDisabled: boolean): void {\n    this._disabled.set(isDisabled);\n  }\n\n  protected onCheckboxClick(): void {\n    if (this.isDisabled()) {\n      return;\n    }\n\n    const newValue = !this.zChecked();\n    this.zChecked.set(newValue);\n    this.zChange.emit(newValue);\n    this._onChange(newValue);\n    this._onTouched();\n  }\n\n  protected onOptionClick(option: ZCheckboxOption): void {\n    if (this.isDisabled() || option.disabled) {\n      return;\n    }\n\n    const currentValues = [...this.zGroupValue()];\n    const index = currentValues.indexOf(option.value);\n\n    if (index === -1) {\n      currentValues.push(option.value);\n    }\n\n    if (index !== -1) {\n      currentValues.splice(index, 1);\n    }\n\n    this.zGroupValue.set(currentValues);\n    this.zGroupChange.emit(currentValues);\n    this._onChange(currentValues);\n    this._onTouched();\n  }\n\n  protected onCheckAllClick(): void {\n    if (this.isDisabled()) {\n      return;\n    }\n\n    if (this.isAllChecked()) {\n      this._uncheckAllOptions();\n      return;\n    }\n\n    this._checkAllOptions();\n  }\n\n  protected isOptionChecked(option: ZCheckboxOption): boolean {\n    return this.zGroupValue().includes(option.value);\n  }\n\n  protected getOptionState(option: ZCheckboxOption): string {\n    return this.isOptionChecked(option) ? 'checked' : 'unchecked';\n  }\n\n  protected getCheckAllState(): string {\n    if (this.isAllChecked()) {\n      return 'checked';\n    }\n    if (this.isIndeterminateState()) {\n      return 'indeterminate';\n    }\n    return 'unchecked';\n  }\n\n  private _checkAllOptions(): void {\n    const enabledValues = this.enabledOptions().map(opt => opt.value);\n    const currentValues = [...this.zGroupValue()];\n    const newValues = [...new Set([...currentValues, ...enabledValues])];\n    this.zGroupValue.set(newValues);\n    this.zGroupChange.emit(newValues);\n    this._onChange(newValues);\n    this._onTouched();\n  }\n\n  private _uncheckAllOptions(): void {\n    const enabledValues = this.enabledOptions().map(opt => opt.value);\n    const currentValues = this.zGroupValue().filter(v => !enabledValues.includes(v));\n    this.zGroupValue.set(currentValues);\n    this.zGroupChange.emit(currentValues);\n    this._onChange(currentValues);\n    this._onTouched();\n  }\n\n  private _toggleAllOptions(): void {\n    if (this.isAllChecked()) {\n      this._uncheckAllOptions();\n      return;\n    }\n\n    this._checkAllOptions();\n  }\n}\n","<!-- Group Mode -->\n@if (zType() === 'group') {\n  <!-- Label above group -->\n  @if (zLabel()) {\n    <label class=\"text-xs leading-none font-medium\">{{ zLabel() }}</label>\n  }\n\n  <div [class]=\"groupClasses()\">\n    <!-- Check All option -->\n    @if (zCheckAll()) {\n      <label\n        class=\"inline-flex cursor-pointer items-center gap-2\"\n        [class.opacity-50]=\"isDisabled()\"\n        [class.cursor-not-allowed]=\"isDisabled()\">\n        <button\n          type=\"button\"\n          role=\"checkbox\"\n          [class]=\"checkboxClasses()\"\n          [attr.aria-checked]=\"isAllChecked()\"\n          [attr.data-state]=\"getCheckAllState()\"\n          [disabled]=\"isDisabled()\"\n          (click)=\"onCheckAllClick()\">\n          @if (isIndeterminateState()) {\n            <i z-icon zType=\"lucideMinus\" [zSize]=\"iconSize()\" class=\"text-current\"></i>\n          }\n          @if (isAllChecked()) {\n            <i z-icon zType=\"lucideCheck\" [zSize]=\"iconSize()\" class=\"text-current\"></i>\n          }\n        </button>\n        <span [class]=\"labelClasses()\">{{ zCheckAllText() }}</span>\n      </label>\n    }\n\n    <!-- Options -->\n    @for (option of zOptions(); track option.value) {\n      <label\n        class=\"inline-flex cursor-pointer items-center gap-2\"\n        [class.opacity-40]=\"option.disabled || isDisabled()\"\n        [class.dark:opacity-50]=\"option.disabled || isDisabled()\"\n        [class.cursor-not-allowed]=\"option.disabled || isDisabled()\">\n        <button\n          type=\"button\"\n          role=\"checkbox\"\n          [class]=\"checkboxClasses()\"\n          [attr.aria-checked]=\"isOptionChecked(option)\"\n          [attr.data-state]=\"getOptionState(option)\"\n          [disabled]=\"isDisabled() || option.disabled\"\n          (click)=\"onOptionClick(option)\">\n          @if (isOptionChecked(option)) {\n            <i z-icon zType=\"lucideCheck\" [zSize]=\"iconSize()\" class=\"text-current\"></i>\n          }\n        </button>\n        <span [class]=\"labelClasses()\" [class.text-muted-foreground]=\"option.disabled\">{{ option.label }}</span>\n      </label>\n    }\n  </div>\n}\n\n<!-- Default Mode (single checkbox) -->\n@if (zType() === 'default') {\n  <!-- Label above -->\n  @if (zLabel()) {\n    <label class=\"text-xs leading-none font-medium\">{{ zLabel() }}</label>\n  }\n\n  <div class=\"inline-flex items-center gap-2\">\n    <button\n      type=\"button\"\n      role=\"checkbox\"\n      [class]=\"checkboxClasses()\"\n      [attr.aria-checked]=\"zChecked()\"\n      [attr.data-state]=\"checkboxState()\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"onCheckboxClick()\">\n      @if (zIndeterminate()) {\n        <i z-icon zType=\"lucideMinus\" [zSize]=\"iconSize()\" class=\"text-current\"></i>\n      }\n      @if (!zIndeterminate() && zChecked()) {\n        <i z-icon zType=\"lucideCheck\" [zSize]=\"iconSize()\" class=\"text-current\"></i>\n      }\n    </button>\n    @if (zText()) {\n      <label [class]=\"labelClasses()\" (click)=\"onCheckboxClick()\">{{ zText() }}</label>\n    }\n  </div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;AAEO,MAAM,iBAAiB,GAAG,GAAG,CAClC;IACE,0EAA0E;IAC1E,qCAAqC;IACrC,0EAA0E;IAC1E,qGAAqG;IACrG,iDAAiD;IACjD,kHAAkH;IAClH,oIAAoI;CACrI,EACD;AACE,IAAA,QAAQ,EAAE;AACR,QAAA,KAAK,EAAE;AACL,YAAA,EAAE,EAAE,QAAQ;AACZ,YAAA,OAAO,EAAE,QAAQ;AACjB,YAAA,EAAE,EAAE,QAAQ;AACb,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,KAAK,EAAE,SAAS;AACjB,KAAA;AACF,CAAA;AAGI,MAAM,sBAAsB,GAAG,GAAG,CACvC,sFAAsF,EACtF;AACE,IAAA,QAAQ,EAAE;AACR,QAAA,KAAK,EAAE;AACL,YAAA,EAAE,EAAE,SAAS;AACb,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,EAAE,EAAE,WAAW;AAChB,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,KAAK,EAAE,SAAS;AACjB,KAAA;AACF,CAAA;;MCIU,kBAAkB,CAAA;AACb,IAAA,KAAK,GAAG,KAAK,CAAa,EAAE,iDAAC;AAC7B,IAAA,KAAK,GAAG,KAAK,CAAgB,SAAS,iDAAC;AACvC,IAAA,KAAK,GAAG,KAAK,CAAgB,SAAS,iDAAC;AACvC,IAAA,MAAM,GAAG,KAAK,CAAS,EAAE,kDAAC;AAC1B,IAAA,KAAK,GAAG,KAAK,CAAS,EAAE,iDAAC;IACzB,SAAS,GAAG,KAAK,CAAC,KAAK,sDAAI,SAAS,EAAE,UAAU,EAAA,CAAG;IACnD,cAAc,GAAG,KAAK,CAAC,KAAK,2DAAI,SAAS,EAAE,UAAU,EAAA,CAAG;AACxD,IAAA,MAAM,GAAG,KAAK,CAAkB,EAAE,kDAAC;AACnC,IAAA,QAAQ,GAAG,KAAK,CAAoB,EAAE,oDAAC;AACvC,IAAA,YAAY,GAAG,KAAK,CAAuB,UAAU,wDAAC;IACtD,SAAS,GAAG,KAAK,CAAC,KAAK,sDAAI,SAAS,EAAE,UAAU,EAAA,CAAG;AACnD,IAAA,aAAa,GAAG,KAAK,CAAS,WAAW,yDAAC;AAE1C,IAAA,QAAQ,GAAG,KAAK,CAAU,KAAK,oDAAC;AAChC,IAAA,WAAW,GAAG,KAAK,CAAsB,EAAE,uDAAC;IAE5C,OAAO,GAAG,MAAM,EAAW;IAC3B,YAAY,GAAG,MAAM,EAAuB;IAC5C,QAAQ,GAAG,MAAM,EAAoB;AAEpC,IAAA,SAAS,GAAG,MAAM,CAAC,KAAK,qDAAC;AAEvB,IAAA,UAAU,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,SAAS,EAAE,IAAI,IAAI,CAAC,SAAS,EAAE,sDAAC;IAEjE,cAAc,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,QAAQ,EAAE,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,gBAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAC;AAE7E,IAAA,YAAY,GAAG,QAAQ,CAAC,MAAK;AAC9C,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE;AACzC,QAAA,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC,EAAE;AAC5B,YAAA,OAAO,KAAK;QACd;QACA,OAAO,WAAW,CAAC,KAAK,CAAC,GAAG,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;AACzE,IAAA,CAAC,wDAAC;AAEiB,IAAA,aAAa,GAAG,QAAQ,CAAC,MAAK;AAC/C,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE;QACzC,OAAO,WAAW,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;AAC1E,IAAA,CAAC,yDAAC;AAEiB,IAAA,oBAAoB,GAAG,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,gEAAC;AAEpF,IAAA,WAAW,GAAG,QAAQ,CAAC,MAAK;QAC7C,MAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE;AAChC,QAAA,IAAI,IAAI,CAAC,KAAK,EAAE,KAAK,OAAO,EAAE;YAC5B,OAAO,aAAa,CAAC,qBAAqB,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;QAC3D;;QAEA,IAAI,QAAQ,EAAE;YACZ,OAAO,aAAa,CAAC,qBAAqB,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;QAC3D;QACA,OAAO,aAAa,CAAC,gCAAgC,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;AACtE,IAAA,CAAC,uDAAC;AAEiB,IAAA,YAAY,GAAG,QAAQ,CAAC,MAAK;AAC9C,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,YAAY,EAAE,KAAK,YAAY,GAAG,oBAAoB,GAAG,UAAU;QAC5F,OAAO,CAAA,KAAA,EAAQ,WAAW,CAAA,MAAA,CAAQ;AACpC,IAAA,CAAC,wDAAC;AAEiB,IAAA,eAAe,GAAG,QAAQ,CAAC,MAAM,iBAAiB,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC,2DAAC;AAE5E,IAAA,YAAY,GAAG,QAAQ,CAAC,MAAM,sBAAsB,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC,wDAAC;AAE9E,IAAA,aAAa,GAAG,QAAQ,CAAC,MAAK;AAC/C,QAAA,IAAI,IAAI,CAAC,cAAc,EAAE,EAAE;AACzB,YAAA,OAAO,eAAe;QACxB;AACA,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE;AACnB,YAAA,OAAO,SAAS;QAClB;AACA,QAAA,OAAO,WAAW;AACpB,IAAA,CAAC,yDAAC;AAEiB,IAAA,QAAQ,GAAG,QAAQ,CAAC,MAAK;AAC1C,QAAA,MAAM,OAAO,GAAkC;AAC7C,YAAA,EAAE,EAAE,IAAI;AACR,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,EAAE,EAAE,IAAI;SACT;AACD,QAAA,OAAO,OAAO,CAAC,IAAI,CAAC,KAAK,EAAE,CAAuB;AACpD,IAAA,CAAC,oDAAC;AAEM,IAAA,SAAS,GAAmD,MAAK,EAAE,CAAC;AACpE,IAAA,UAAU,GAAe,MAAK,EAAE,CAAC;IAElC,eAAe,GAAA;AACpB,QAAA,IAAI,IAAI,CAAC,KAAK,EAAE,KAAK,OAAO,IAAI,IAAI,CAAC,SAAS,EAAE,EAAE;AAChD,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;AACjB,gBAAA,QAAQ,EAAE,MAAM,IAAI,CAAC,gBAAgB,EAAE;AACvC,gBAAA,UAAU,EAAE,MAAM,IAAI,CAAC,kBAAkB,EAAE;AAC3C,gBAAA,SAAS,EAAE,MAAM,IAAI,CAAC,iBAAiB,EAAE;gBACzC,YAAY,EAAE,IAAI,CAAC,YAAY;gBAC/B,eAAe,EAAE,IAAI,CAAC,oBAAoB;AAC3C,aAAA,CAAC;QACJ;IACF;AAEO,IAAA,UAAU,CAAC,KAA2C,EAAA;AAC3D,QAAA,IAAI,IAAI,CAAC,KAAK,EAAE,KAAK,OAAO,EAAE;YAC5B,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;YACvD;QACF;QACA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC;IAC5B;AAEO,IAAA,gBAAgB,CAAC,EAAkD,EAAA;AACxE,QAAA,IAAI,CAAC,SAAS,GAAG,EAAE;IACrB;AAEO,IAAA,iBAAiB,CAAC,EAAc,EAAA;AACrC,QAAA,IAAI,CAAC,UAAU,GAAG,EAAE;IACtB;AAEO,IAAA,gBAAgB,CAAC,UAAmB,EAAA;AACzC,QAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC;IAChC;IAEU,eAAe,GAAA;AACvB,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE,EAAE;YACrB;QACF;AAEA,QAAA,MAAM,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE;AACjC,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,CAAC;AAC3B,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC;AAC3B,QAAA,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC;QACxB,IAAI,CAAC,UAAU,EAAE;IACnB;AAEU,IAAA,aAAa,CAAC,MAAuB,EAAA;QAC7C,IAAI,IAAI,CAAC,UAAU,EAAE,IAAI,MAAM,CAAC,QAAQ,EAAE;YACxC;QACF;QAEA,MAAM,aAAa,GAAG,CAAC,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAC7C,MAAM,KAAK,GAAG,aAAa,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC;AAEjD,QAAA,IAAI,KAAK,KAAK,CAAC,CAAC,EAAE;AAChB,YAAA,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC;QAClC;AAEA,QAAA,IAAI,KAAK,KAAK,CAAC,CAAC,EAAE;AAChB,YAAA,aAAa,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;QAChC;AAEA,QAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,aAAa,CAAC;AACnC,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,aAAa,CAAC;AACrC,QAAA,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC;QAC7B,IAAI,CAAC,UAAU,EAAE;IACnB;IAEU,eAAe,GAAA;AACvB,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE,EAAE;YACrB;QACF;AAEA,QAAA,IAAI,IAAI,CAAC,YAAY,EAAE,EAAE;YACvB,IAAI,CAAC,kBAAkB,EAAE;YACzB;QACF;QAEA,IAAI,CAAC,gBAAgB,EAAE;IACzB;AAEU,IAAA,eAAe,CAAC,MAAuB,EAAA;QAC/C,OAAO,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC;IAClD;AAEU,IAAA,cAAc,CAAC,MAAuB,EAAA;AAC9C,QAAA,OAAO,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,GAAG,SAAS,GAAG,WAAW;IAC/D;IAEU,gBAAgB,GAAA;AACxB,QAAA,IAAI,IAAI,CAAC,YAAY,EAAE,EAAE;AACvB,YAAA,OAAO,SAAS;QAClB;AACA,QAAA,IAAI,IAAI,CAAC,oBAAoB,EAAE,EAAE;AAC/B,YAAA,OAAO,eAAe;QACxB;AACA,QAAA,OAAO,WAAW;IACpB;IAEQ,gBAAgB,GAAA;AACtB,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC,GAAG,CAAC,GAAG,IAAI,GAAG,CAAC,KAAK,CAAC;QACjE,MAAM,aAAa,GAAG,CAAC,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;AAC7C,QAAA,MAAM,SAAS,GAAG,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC,GAAG,aAAa,EAAE,GAAG,aAAa,CAAC,CAAC,CAAC;AACpE,QAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,SAAS,CAAC;AAC/B,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC;AACjC,QAAA,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC;QACzB,IAAI,CAAC,UAAU,EAAE;IACnB;IAEQ,kBAAkB,GAAA;AACxB,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC,GAAG,CAAC,GAAG,IAAI,GAAG,CAAC,KAAK,CAAC;QACjE,MAAM,aAAa,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;AAChF,QAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,aAAa,CAAC;AACnC,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,aAAa,CAAC;AACrC,QAAA,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC;QAC7B,IAAI,CAAC,UAAU,EAAE;IACnB;IAEQ,iBAAiB,GAAA;AACvB,QAAA,IAAI,IAAI,CAAC,YAAY,EAAE,EAAE;YACvB,IAAI,CAAC,kBAAkB,EAAE;YACzB;QACF;QAEA,IAAI,CAAC,gBAAgB,EAAE;IACzB;uGAhNW,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAlB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,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,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,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,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,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,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,OAAA,EAAA,SAAA,EAAA,YAAA,EAAA,cAAA,EAAA,QAAA,EAAA,UAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,eAAA,EAAA,EAAA,EAAA,SAAA,EAblB;AACT,YAAA;AACE,gBAAA,OAAO,EAAE,iBAAiB;AAC1B,gBAAA,WAAW,EAAE,UAAU,CAAC,MAAM,kBAAkB,CAAC;AACjD,gBAAA,KAAK,EAAE,IAAI;AACZ,aAAA;SACF,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECpCH,ojGAsFA,4CD3DY,cAAc,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,OAAA,EAAA,OAAA,EAAA,cAAA,EAAA,MAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAgBb,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAlB9B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,YAAY,WACb,CAAC,cAAc,CAAC,EAAA,UAAA,EACb,IAAI,EAAA,SAAA,EAEL;AACT,wBAAA;AACE,4BAAA,OAAO,EAAE,iBAAiB;AAC1B,4BAAA,WAAW,EAAE,UAAU,CAAC,wBAAwB,CAAC;AACjD,4BAAA,KAAK,EAAE,IAAI;AACZ,yBAAA;AACF,qBAAA,EAAA,eAAA,EACgB,uBAAuB,CAAC,MAAM,iBAChC,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B;AACJ,wBAAA,SAAS,EAAE,eAAe;AAC3B,qBAAA,EAAA,QAAA,EAAA,ojGAAA,EAAA;;;AEzCH;;AAEG;;;;"}

package/fesm2022/shival99-z-ui-components-z-code.mjs

@@ -0,0 +1,139 @@
+import * as i0 from '@angular/core';
+import { input, viewChild, signal, inject, computed, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { ZThemeService } from '@shival99/z-ui/services';
+import { zMergeClasses } from '@shival99/z-ui/utils';
+import { ZButtonComponent } from '@shival99/z-ui/components/z-button';
+import { ZIconComponent } from '@shival99/z-ui/components/z-icon';
+import { ZToastService } from '@shival99/z-ui/components/z-toast';
+
+const getHighlighter = (() => {
+    let cache = null;
+    return async () => {
+        if (cache) {
+            return cache;
+        }
+        cache = import('shiki').then(async ({ createHighlighter }) => createHighlighter({
+            themes: ['github-dark', 'github-light', 'vitesse-dark', 'one-dark-pro'],
+            langs: [
+                'typescript',
+                'javascript',
+                'html',
+                'css',
+                'scss',
+                'json',
+                'bash',
+                'shell',
+                'markdown',
+                'yaml',
+                'python',
+                'java',
+                'sql',
+                'xml',
+                'angular-ts',
+                'angular-html',
+            ],
+        }));
+        return cache;
+    };
+})();
+function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+}
+
+class ZCodeComponent {
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
+    zTitle = input('', ...(ngDevMode ? [{ debugName: "zTitle" }] : []));
+    zLanguage = input('typescript', ...(ngDevMode ? [{ debugName: "zLanguage" }] : []));
+    zCode = input('', ...(ngDevMode ? [{ debugName: "zCode" }] : []));
+    zTheme = input('', ...(ngDevMode ? [{ debugName: "zTheme" }] : []));
+    zShowLineNumbers = input(true, ...(ngDevMode ? [{ debugName: "zShowLineNumbers" }] : []));
+    codeEl = viewChild('codeEl', ...(ngDevMode ? [{ debugName: "codeEl" }] : []));
+    copied = signal(false, ...(ngDevMode ? [{ debugName: "copied" }] : []));
+    highlightedCode = signal('', ...(ngDevMode ? [{ debugName: "highlightedCode" }] : []));
+    isHighlighting = signal(true, ...(ngDevMode ? [{ debugName: "isHighlighting" }] : []));
+    _toast = inject(ZToastService);
+    _sanitizer = inject(DomSanitizer);
+    _themeService = inject(ZThemeService);
+    _rawCode = '';
+    _effectiveTheme = computed(() => {
+        const inputTheme = this.zTheme();
+        if (inputTheme) {
+            return inputTheme;
+        }
+        return this._themeService.isDark() ? 'github-dark' : 'github-light';
+    }, ...(ngDevMode ? [{ debugName: "_effectiveTheme" }] : []));
+    wrapperClasses = computed(() => zMergeClasses('border-border bg-card overflow-hidden rounded-lg border', this.class()), ...(ngDevMode ? [{ debugName: "wrapperClasses" }] : []));
+    contentClasses = computed(() => zMergeClasses('overflow-x-auto p-4', this.zTitle() ? '' : 'pt-10'), ...(ngDevMode ? [{ debugName: "contentClasses" }] : []));
+    constructor() {
+        effect(() => {
+            const code = this.zCode();
+            const lang = this.zLanguage();
+            const theme = this._effectiveTheme();
+            if (!code) {
+                return;
+            }
+            this._rawCode = code;
+            void this._highlightCode(code, lang, theme);
+        });
+    }
+    ngAfterViewInit() {
+        if (this.zCode()) {
+            return;
+        }
+        const codeEl = this.codeEl()?.nativeElement;
+        if (!codeEl) {
+            return;
+        }
+        const preEl = codeEl.querySelector('pre');
+        const codeContent = preEl?.querySelector('code');
+        const rawText = codeContent?.textContent ?? preEl?.textContent ?? codeEl.textContent ?? '';
+        if (!rawText.trim()) {
+            return;
+        }
+        this._rawCode = rawText.trim();
+        void this._highlightCode(this._rawCode, this.zLanguage(), this._effectiveTheme());
+    }
+    async _highlightCode(code, lang, theme) {
+        this.isHighlighting.set(true);
+        try {
+            const highlighter = await getHighlighter();
+            const html = highlighter.codeToHtml(code, { lang, theme });
+            const safeHtml = this._sanitizer.bypassSecurityTrustHtml(html);
+            this.highlightedCode.set(safeHtml);
+        }
+        catch (error) {
+            console.warn('Shiki highlighting failed, falling back to plain text:', error);
+            const escapedHtml = `<pre class="shiki"><code>${escapeHtml(code)}</code></pre>`;
+            this.highlightedCode.set(this._sanitizer.bypassSecurityTrustHtml(escapedHtml));
+        }
+        finally {
+            this.isHighlighting.set(false);
+        }
+    }
+    copyCode() {
+        const code = this._rawCode.trim();
+        void navigator.clipboard.writeText(code).then(() => {
+            this.copied.set(true);
+            this._toast.success('Code đã được copy!');
+            setTimeout(() => {
+                this.copied.set(false);
+            }, 2000);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZCodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ZCodeComponent, isStandalone: true, selector: "z-code", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zTitle: { classPropertyName: "zTitle", publicName: "zTitle", isSignal: true, isRequired: false, transformFunction: null }, zLanguage: { classPropertyName: "zLanguage", publicName: "zLanguage", isSignal: true, isRequired: false, transformFunction: null }, zCode: { classPropertyName: "zCode", publicName: "zCode", isSignal: true, isRequired: false, transformFunction: null }, zTheme: { classPropertyName: "zTheme", publicName: "zTheme", isSignal: true, isRequired: false, transformFunction: null }, zShowLineNumbers: { classPropertyName: "zShowLineNumbers", publicName: "zShowLineNumbers", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "codeEl", first: true, predicate: ["codeEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [class]=\"wrapperClasses()\">\n  @if (zTitle()) {\n    <div class=\"z-code-header border-border flex items-center justify-between border-b px-4 py-2\">\n      <span class=\"text-muted-foreground text-xs font-medium\">{{ zTitle() }}</span>\n      <button z-button zType=\"outline\" zSize=\"xs\" [zWave]=\"false\" (click)=\"copyCode()\">\n        @if (copied()) {\n          <z-icon zType=\"lucideCheck\" zSize=\"14\" class=\"text-green-500\" />\n          <span class=\"text-green-500\">Copied!</span>\n        } @else {\n          <z-icon zType=\"lucideCopy\" zSize=\"14\" />\n          <span>Copy</span>\n        }\n      </button>\n    </div>\n  }\n  <div class=\"relative\">\n    @if (!zTitle()) {\n      <button\n        z-button\n        zType=\"outline\"\n        zSize=\"xs\"\n        [zWave]=\"false\"\n        class=\"absolute top-2 right-2 z-10 backdrop-blur-sm\"\n        (click)=\"copyCode()\">\n        @if (copied()) {\n          <z-icon zType=\"lucideCheck\" zSize=\"14\" class=\"text-green-500\" />\n          <span class=\"text-green-500\">Copied!</span>\n        } @else {\n          <z-icon zType=\"lucideCopy\" zSize=\"14\" />\n          <span>Copy</span>\n        }\n      </button>\n    }\n    @if (isHighlighting()) {\n      <div class=\"p-4\">\n        <div class=\"bg-muted h-4 w-3/4 animate-pulse rounded\"></div>\n        <div class=\"bg-muted mt-2 h-4 w-1/2 animate-pulse rounded\"></div>\n        <div class=\"bg-muted mt-2 h-4 w-2/3 animate-pulse rounded\"></div>\n      </div>\n    } @else {\n      <div #codeEl [class]=\"contentClasses()\" [innerHTML]=\"highlightedCode()\"></div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block}:host ::ng-deep .shiki{margin:0;padding:0;overflow-x:auto;background:transparent!important;background-color:transparent!important}:host ::ng-deep .shiki code{font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;font-size:.875rem;line-height:1.7;display:block;counter-reset:line}:host ::ng-deep .shiki .line{display:inline-block;width:100%}:host ::ng-deep .shiki .line:before{counter-increment:line;content:counter(line);display:inline-block;width:2rem;margin-right:1rem;text-align:right;color:var(--muted-foreground);opacity:.5;-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZCodeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'z-code', imports: [ZIconComponent, ZButtonComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"wrapperClasses()\">\n  @if (zTitle()) {\n    <div class=\"z-code-header border-border flex items-center justify-between border-b px-4 py-2\">\n      <span class=\"text-muted-foreground text-xs font-medium\">{{ zTitle() }}</span>\n      <button z-button zType=\"outline\" zSize=\"xs\" [zWave]=\"false\" (click)=\"copyCode()\">\n        @if (copied()) {\n          <z-icon zType=\"lucideCheck\" zSize=\"14\" class=\"text-green-500\" />\n          <span class=\"text-green-500\">Copied!</span>\n        } @else {\n          <z-icon zType=\"lucideCopy\" zSize=\"14\" />\n          <span>Copy</span>\n        }\n      </button>\n    </div>\n  }\n  <div class=\"relative\">\n    @if (!zTitle()) {\n      <button\n        z-button\n        zType=\"outline\"\n        zSize=\"xs\"\n        [zWave]=\"false\"\n        class=\"absolute top-2 right-2 z-10 backdrop-blur-sm\"\n        (click)=\"copyCode()\">\n        @if (copied()) {\n          <z-icon zType=\"lucideCheck\" zSize=\"14\" class=\"text-green-500\" />\n          <span class=\"text-green-500\">Copied!</span>\n        } @else {\n          <z-icon zType=\"lucideCopy\" zSize=\"14\" />\n          <span>Copy</span>\n        }\n      </button>\n    }\n    @if (isHighlighting()) {\n      <div class=\"p-4\">\n        <div class=\"bg-muted h-4 w-3/4 animate-pulse rounded\"></div>\n        <div class=\"bg-muted mt-2 h-4 w-1/2 animate-pulse rounded\"></div>\n        <div class=\"bg-muted mt-2 h-4 w-2/3 animate-pulse rounded\"></div>\n      </div>\n    } @else {\n      <div #codeEl [class]=\"contentClasses()\" [innerHTML]=\"highlightedCode()\"></div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block}:host ::ng-deep .shiki{margin:0;padding:0;overflow-x:auto;background:transparent!important;background-color:transparent!important}:host ::ng-deep .shiki code{font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;font-size:.875rem;line-height:1.7;display:block;counter-reset:line}:host ::ng-deep .shiki .line{display:inline-block;width:100%}:host ::ng-deep .shiki .line:before{counter-increment:line;content:counter(line);display:inline-block;width:2rem;margin-right:1rem;text-align:right;color:var(--muted-foreground);opacity:.5;-webkit-user-select:none;user-select:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTitle", required: false }] }], zLanguage: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLanguage", required: false }] }], zCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "zCode", required: false }] }], zTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTheme", required: false }] }], zShowLineNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowLineNumbers", required: false }] }], codeEl: [{ type: i0.ViewChild, args: ['codeEl', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ZCodeComponent };
+//# sourceMappingURL=shival99-z-ui-components-z-code.mjs.map

package/fesm2022/shival99-z-ui-components-z-code.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"shival99-z-ui-components-z-code.mjs","sources":["../../../../libs/core-ui/components/z-code/z-code.utils.ts","../../../../libs/core-ui/components/z-code/z-code.component.ts","../../../../libs/core-ui/components/z-code/z-code.component.html","../../../../libs/core-ui/components/z-code/shival99-z-ui-components-z-code.ts"],"sourcesContent":["import type { BundledLanguage, BundledTheme, HighlighterGeneric } from 'shiki';\n\nexport const getHighlighter = (() => {\n  let cache: Promise<HighlighterGeneric<BundledLanguage, BundledTheme>> | null = null;\n\n  return async (): Promise<HighlighterGeneric<BundledLanguage, BundledTheme>> => {\n    if (cache) {\n      return cache;\n    }\n\n    cache = import('shiki').then(async ({ createHighlighter }) =>\n      createHighlighter({\n        themes: ['github-dark', 'github-light', 'vitesse-dark', 'one-dark-pro'],\n        langs: [\n          'typescript',\n          'javascript',\n          'html',\n          'css',\n          'scss',\n          'json',\n          'bash',\n          'shell',\n          'markdown',\n          'yaml',\n          'python',\n          'java',\n          'sql',\n          'xml',\n          'angular-ts',\n          'angular-html',\n        ],\n      })\n    );\n\n    return cache;\n  };\n})();\n\nexport function escapeHtml(text: string): string {\n  const div = document.createElement('div');\n  div.textContent = text;\n  return div.innerHTML;\n}\n","import {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  effect,\n  ElementRef,\n  inject,\n  input,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\nimport type { ClassValue } from 'clsx';\nimport type { BundledLanguage } from 'shiki';\nimport { type ZCodeTheme } from './z-code.types';\nimport { escapeHtml, getHighlighter } from './z-code.utils';\nimport { ZThemeService } from '@shival99/z-ui/services';\nimport { zMergeClasses } from '@shival99/z-ui/utils';\nimport { ZButtonComponent } from '@shival99/z-ui/components/z-button';\nimport { ZIconComponent } from '@shival99/z-ui/components/z-icon';\nimport { ZToastService } from '@shival99/z-ui/components/z-toast';\n\n@Component({\n  selector: 'z-code',\n  imports: [ZIconComponent, ZButtonComponent],\n  standalone: true,\n  templateUrl: './z-code.component.html',\n  styleUrl: './z-code.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ZCodeComponent implements AfterViewInit {\n  public readonly class = input<ClassValue>('');\n  public readonly zTitle = input<string>('');\n  public readonly zLanguage = input<BundledLanguage>('typescript');\n  public readonly zCode = input<string>('');\n  public readonly zTheme = input<ZCodeTheme | ''>('');\n  public readonly zShowLineNumbers = input<boolean>(true);\n\n  protected readonly codeEl = viewChild<ElementRef<HTMLDivElement>>('codeEl');\n  protected readonly copied = signal(false);\n  protected readonly highlightedCode = signal<SafeHtml>('');\n  protected readonly isHighlighting = signal(true);\n\n  private readonly _toast = inject(ZToastService);\n  private readonly _sanitizer = inject(DomSanitizer);\n  private readonly _themeService = inject(ZThemeService);\n  private _rawCode = '';\n\n  private readonly _effectiveTheme = computed(() => {\n    const inputTheme = this.zTheme();\n    if (inputTheme) {\n      return inputTheme;\n    }\n    return this._themeService.isDark() ? 'github-dark' : 'github-light';\n  });\n\n  protected readonly wrapperClasses = computed(() =>\n    zMergeClasses('border-border bg-card overflow-hidden rounded-lg border', this.class())\n  );\n\n  protected readonly contentClasses = computed(() =>\n    zMergeClasses('overflow-x-auto p-4', this.zTitle() ? '' : 'pt-10')\n  );\n\n  constructor() {\n    effect(() => {\n      const code = this.zCode();\n      const lang = this.zLanguage();\n      const theme = this._effectiveTheme();\n\n      if (!code) {\n        return;\n      }\n\n      this._rawCode = code;\n      void this._highlightCode(code, lang, theme);\n    });\n  }\n\n  ngAfterViewInit(): void {\n    if (this.zCode()) {\n      return;\n    }\n\n    const codeEl = this.codeEl()?.nativeElement;\n    if (!codeEl) {\n      return;\n    }\n\n    const preEl = codeEl.querySelector('pre');\n    const codeContent = preEl?.querySelector('code');\n    const rawText = codeContent?.textContent ?? preEl?.textContent ?? codeEl.textContent ?? '';\n\n    if (!rawText.trim()) {\n      return;\n    }\n\n    this._rawCode = rawText.trim();\n    void this._highlightCode(this._rawCode, this.zLanguage(), this._effectiveTheme());\n  }\n\n  private async _highlightCode(code: string, lang: BundledLanguage, theme: ZCodeTheme): Promise<void> {\n    this.isHighlighting.set(true);\n    try {\n      const highlighter = await getHighlighter();\n      const html = highlighter.codeToHtml(code, { lang, theme });\n      const safeHtml = this._sanitizer.bypassSecurityTrustHtml(html);\n      this.highlightedCode.set(safeHtml);\n    } catch (error) {\n      console.warn('Shiki highlighting failed, falling back to plain text:', error);\n      const escapedHtml = `<pre class=\"shiki\"><code>${escapeHtml(code)}</code></pre>`;\n      this.highlightedCode.set(this._sanitizer.bypassSecurityTrustHtml(escapedHtml));\n    } finally {\n      this.isHighlighting.set(false);\n    }\n  }\n\n  protected copyCode(): void {\n    const code = this._rawCode.trim();\n\n    void navigator.clipboard.writeText(code).then(() => {\n      this.copied.set(true);\n      this._toast.success('Code đã được copy!');\n      setTimeout(() => {\n        this.copied.set(false);\n      }, 2000);\n    });\n  }\n}\n","<div [class]=\"wrapperClasses()\">\n  @if (zTitle()) {\n    <div class=\"z-code-header border-border flex items-center justify-between border-b px-4 py-2\">\n      <span class=\"text-muted-foreground text-xs font-medium\">{{ zTitle() }}</span>\n      <button z-button zType=\"outline\" zSize=\"xs\" [zWave]=\"false\" (click)=\"copyCode()\">\n        @if (copied()) {\n          <z-icon zType=\"lucideCheck\" zSize=\"14\" class=\"text-green-500\" />\n          <span class=\"text-green-500\">Copied!</span>\n        } @else {\n          <z-icon zType=\"lucideCopy\" zSize=\"14\" />\n          <span>Copy</span>\n        }\n      </button>\n    </div>\n  }\n  <div class=\"relative\">\n    @if (!zTitle()) {\n      <button\n        z-button\n        zType=\"outline\"\n        zSize=\"xs\"\n        [zWave]=\"false\"\n        class=\"absolute top-2 right-2 z-10 backdrop-blur-sm\"\n        (click)=\"copyCode()\">\n        @if (copied()) {\n          <z-icon zType=\"lucideCheck\" zSize=\"14\" class=\"text-green-500\" />\n          <span class=\"text-green-500\">Copied!</span>\n        } @else {\n          <z-icon zType=\"lucideCopy\" zSize=\"14\" />\n          <span>Copy</span>\n        }\n      </button>\n    }\n    @if (isHighlighting()) {\n      <div class=\"p-4\">\n        <div class=\"bg-muted h-4 w-3/4 animate-pulse rounded\"></div>\n        <div class=\"bg-muted mt-2 h-4 w-1/2 animate-pulse rounded\"></div>\n        <div class=\"bg-muted mt-2 h-4 w-2/3 animate-pulse rounded\"></div>\n      </div>\n    } @else {\n      <div #codeEl [class]=\"contentClasses()\" [innerHTML]=\"highlightedCode()\"></div>\n    }\n  </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}