@nanahoshi/mona-ui 0.1.0

package/fesm2022/nanahoshi-mona-ui-check-box.mjs

@@ -0,0 +1,339 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, computed, model, input, output, Component, Directive } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { ThemeService } from '@nanahoshi/mona-ui/theme';
+import { twMerge } from 'tailwind-merge';
+import { cva } from 'class-variance-authority';
+
+const checkboxVariants = cva(`sr-only appearance-none outline-none peer`);
+const checkmarkVariants = cva(`
+        flex items-center justify-center
+        w-4.5 h-4.5 pl-0.25
+        overflow-hidden outline-none
+
+        bg-input-background border border-input-border
+        cursor-pointer
+
+        data-[disabled='true']:pointer-events-none
+        data-[disabled='true']:cursor-not-allowed
+        data-[disabled='true']:opacity-50
+
+        peer-focus-visible:ring-2 peer-focus-visible:ring-primary/40
+        peer-focus-visible:border-primary
+
+        peer-checked:bg-primary
+        peer-checked:text-primary-foreground
+
+        peer-indeterminate:bg-primary
+        peer-indeterminate:text-primary-foreground
+        peer-indeterminate:after:content-['']
+        peer-indeterminate:after:absolute
+        peer-indeterminate:after:inset-[3px_0_3px_0]
+        peer-indeterminate:after:[mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23FFFFFF'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2012h14'%2F%3E%3C%2Fsvg%3E")]
+        peer-indeterminate:after:[mask-repeat:no-repeat]
+        peer-indeterminate:after:[mask-size:contain]
+        peer-indeterminate:after:bg-current
+
+        [&.ng-touched.ng-invalid]:border-error
+
+        data-[invalid='true']:border-error
+        data-[invalid='true']:ring-2 data-[invalid='true']:ring-error/40
+    `, {
+    variants: {
+        rounded: {
+            full: "rounded-full",
+            large: "rounded-lg",
+            medium: "rounded-md",
+            none: "rounded-none",
+            small: "rounded-sm"
+        }
+    }
+});
+const checkboxContainerLabelVariants = cva(`
+        w-full h-full
+        inline-flex items-center gap-2
+        relative
+
+        select-none
+
+        data-[disabled='true']:pointer-events-none
+        data-[disabled='true']:cursor-not-allowed
+        data-[disabled='true']:opacity-50
+    `, {
+    variants: {
+        labelSize: {
+            large: "text-lg",
+            medium: "text-md",
+            small: "text-sm"
+        }
+    }
+});
+const checkboxDirectiveVariants = cva(`
+        appearance-none outline-none
+        w-4.5 h-4.5
+        bg-input-background border border-input-border
+        cursor-pointer
+        relative
+
+        disabled:pointer-events-none
+        disabled:cursor-not-allowed
+        disabled:opacity-50
+
+        checked:text-primary-foreground
+        indeterminate:text-primary-foreground
+        indeterminate:bg-primary
+        checked:bg-primary
+
+        focus-visible:ring-2 focus-visible:ring-primary/40
+        focus-visible:border-primary
+
+        checked:after:content-['']
+        checked:after:absolute
+        checked:after:inset-[1px_0_0_1px]
+        checked:after:[mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23FFFFFF'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M18%206%209%2017l-5-5'/%3E%3C/svg%3E")]
+        checked:after:[mask-repeat:no-repeat]
+        checked:after:[mask-size:contain]
+        checked:after:bg-current
+
+        indeterminate:after:content-['']
+        indeterminate:after:absolute
+        indeterminate:after:inset-[1px_0_1px_1px]
+        indeterminate:after:[mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23FFFFFF'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2012h14'%2F%3E%3C%2Fsvg%3E")]
+        indeterminate:after:[mask-repeat:no-repeat]
+        indeterminate:after:[mask-size:contain]
+        indeterminate:after:bg-current
+
+        [&.ng-touched.ng-invalid]:border-error
+    `, {
+    variants: {
+        rounded: {
+            full: "rounded-full",
+            large: "rounded-lg",
+            medium: "rounded-md",
+            none: "rounded-none",
+            small: "rounded-sm"
+        }
+    }
+});
+
+const checkboxInputThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return checkboxVariants;
+        default:
+            return checkboxVariants;
+    }
+};
+const checkmarkThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return checkmarkVariants;
+        default:
+            return checkmarkVariants;
+    }
+};
+const checkboxContainerLabelThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return checkboxContainerLabelVariants;
+        default:
+            return checkboxContainerLabelVariants;
+    }
+};
+const checkboxDirectiveThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return checkboxDirectiveVariants;
+        default:
+            return checkboxDirectiveVariants;
+    }
+};
+
+class CheckBoxComponent {
+    constructor() {
+        this.#themeService = inject(ThemeService);
+        this.checkBoxClasses = computed(() => {
+            const theme = this.#themeService.theme();
+            return checkboxInputThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "checkBoxClasses" }] : /* istanbul ignore next */ []));
+        this.checkMarkClasses = computed(() => {
+            const theme = this.#themeService.theme();
+            const rounded = this.rounded();
+            return checkmarkThemeVariants(theme)({ rounded });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "checkMarkClasses" }] : /* istanbul ignore next */ []));
+        this.containerLabelClasses = computed(() => {
+            const theme = this.#themeService.theme();
+            const labelSize = this.labelSize();
+            const classes = this.userClass();
+            const variantClasses = checkboxContainerLabelThemeVariants(theme)({ labelSize });
+            return twMerge(variantClasses, classes);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "containerLabelClasses" }] : /* istanbul ignore next */ []));
+        this.invalidState = computed(() => this.invalid() || (this.required() && this.touched() && !this.checked()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Whether the control is checked.
+         * @default false
+         */
+        this.checked = model(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Renders the component with reduced visual emphasis and removes pointer interaction.
+         * @default false
+         */
+        this.disabled = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Activates indeterminate mode, showing a dash instead of a checkmark.
+         * @default false
+         */
+        this.indeterminate = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Emitted when the checkbox input loses focus.
+         */
+        this.inputBlur = output();
+        /**
+         * @description Emitted when the checkbox value changes.
+         */
+        this.inputChange = output();
+        /**
+         * @description Emitted when the checkbox input gains focus.
+         */
+        this.inputFocus = output();
+        /**
+         * @description Marks the checkbox as invalid. When bound to a signal form field via `[field]`,
+         * this is written by the signal forms `Field` directive.
+         * @default false
+         */
+        this.invalid = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Text label displayed alongside the checkbox. When provided, takes precedence over projected content.
+         * @default ""
+         */
+        this.label = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Position of the label relative to the checkbox.
+         * @default "after"
+         */
+        this.labelPosition = input("after", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "labelPosition" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Controls the font size of the label text.
+         * @default "medium"
+         */
+        this.labelSize = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "labelSize" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Marks the control as required for form validation.
+         * @default false
+         */
+        this.required = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Border-radius preset applied to the checkmark box.
+         * @default "medium"
+         */
+        this.rounded = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Tab index of the native checkbox input.
+         * @default 0
+         */
+        this.tabIndex = input(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tabIndex" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Emitted when the checkbox loses focus or its value changes.
+         */
+        this.touch = output();
+        /**
+         * @description Marks the checkbox as touched. When bound to a signal form field via `[field]`,
+         * this is written by the signal forms `Field` directive.
+         * @default false
+         */
+        this.touched = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Additional CSS classes merged onto the label container via `tailwind-merge`.
+         * @default ""
+         */
+        this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class" });
+    }
+    #themeService;
+    onCheckedChange(checked) {
+        this.checked.set(checked);
+    }
+    onInputChange(event) {
+        this.inputChange.emit(event);
+        this.touch.emit();
+    }
+    onInputBlur(event) {
+        this.inputBlur.emit(event);
+        this.touch.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CheckBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: CheckBoxComponent, isStandalone: true, selector: "mona-check-box", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, labelSize: { classPropertyName: "labelSize", publicName: "labelSize", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", inputBlur: "inputBlur", inputChange: "inputChange", inputFocus: "inputFocus", touch: "touch" }, host: { properties: { "class": "'flex'", "attr.data-checked": "checked()", "attr.data-disabled": "disabled()", "attr.data-indeterminate": "indeterminate()" } }, ngImport: i0, template: "<label [class]=\"containerLabelClasses()\" [attr.data-disabled]=\"disabled()\">\r\n    @if (labelPosition() === \"before\") {\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\r\n    }\r\n\r\n    <input\r\n        type=\"checkbox\"\r\n        [disabled]=\"disabled()\"\r\n        [indeterminate]=\"indeterminate()\"\r\n        [required]=\"required()\"\r\n        [ngModel]=\"checked()\"\r\n        [tabindex]=\"disabled() ? -1 : tabIndex()\"\r\n        [class]=\"checkBoxClasses()\"\r\n        [attr.aria-checked]=\"indeterminate() ? 'mixed' : null\"\r\n        [attr.aria-invalid]=\"invalidState() ? 'true' : null\"\r\n        [attr.aria-label]=\"label() || null\"\r\n        (change)=\"onInputChange($event)\"\r\n        (blur)=\"onInputBlur($event)\"\r\n        (focus)=\"inputFocus.emit($event)\"\r\n        (ngModelChange)=\"onCheckedChange($event)\"\r\n        #checkBox />\r\n\r\n    <span [class]=\"checkMarkClasses()\" [attr.data-invalid]=\"invalidState() || null\" aria-hidden=\"true\">\r\n        @if (checked()) {\r\n            <svg\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                width=\"16\"\r\n                height=\"16\"\r\n                viewBox=\"0 0 24 24\"\r\n                fill=\"none\"\r\n                stroke-width=\"2\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n                class=\"lucide lucide-check stroke-primary-foreground\">\r\n                <path d=\"M18 6 9 17l-5-5\" />\r\n            </svg>\r\n        }\r\n    </span>\r\n    @if (labelPosition() === \"after\") {\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\r\n    }\r\n</label>\r\n\r\n<ng-template #labelTemplate>\r\n    @if (label()) {\r\n        <span>{{ label() }}</span>\r\n    } @else {\r\n        <ng-content></ng-content>\r\n    }\r\n</ng-template>\r\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CheckBoxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-check-box", imports: [FormsModule, NgTemplateOutlet], host: {
+                        "[class]": "'flex'",
+                        "[attr.data-checked]": "checked()",
+                        "[attr.data-disabled]": "disabled()",
+                        "[attr.data-indeterminate]": "indeterminate()"
+                    }, template: "<label [class]=\"containerLabelClasses()\" [attr.data-disabled]=\"disabled()\">\r\n    @if (labelPosition() === \"before\") {\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\r\n    }\r\n\r\n    <input\r\n        type=\"checkbox\"\r\n        [disabled]=\"disabled()\"\r\n        [indeterminate]=\"indeterminate()\"\r\n        [required]=\"required()\"\r\n        [ngModel]=\"checked()\"\r\n        [tabindex]=\"disabled() ? -1 : tabIndex()\"\r\n        [class]=\"checkBoxClasses()\"\r\n        [attr.aria-checked]=\"indeterminate() ? 'mixed' : null\"\r\n        [attr.aria-invalid]=\"invalidState() ? 'true' : null\"\r\n        [attr.aria-label]=\"label() || null\"\r\n        (change)=\"onInputChange($event)\"\r\n        (blur)=\"onInputBlur($event)\"\r\n        (focus)=\"inputFocus.emit($event)\"\r\n        (ngModelChange)=\"onCheckedChange($event)\"\r\n        #checkBox />\r\n\r\n    <span [class]=\"checkMarkClasses()\" [attr.data-invalid]=\"invalidState() || null\" aria-hidden=\"true\">\r\n        @if (checked()) {\r\n            <svg\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                width=\"16\"\r\n                height=\"16\"\r\n                viewBox=\"0 0 24 24\"\r\n                fill=\"none\"\r\n                stroke-width=\"2\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n                class=\"lucide lucide-check stroke-primary-foreground\">\r\n                <path d=\"M18 6 9 17l-5-5\" />\r\n            </svg>\r\n        }\r\n    </span>\r\n    @if (labelPosition() === \"after\") {\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\r\n    }\r\n</label>\r\n\r\n<ng-template #labelTemplate>\r\n    @if (label()) {\r\n        <span>{{ label() }}</span>\r\n    } @else {\r\n        <ng-content></ng-content>\r\n    }\r\n</ng-template>\r\n" }]
+        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], inputBlur: [{ type: i0.Output, args: ["inputBlur"] }], inputChange: [{ type: i0.Output, args: ["inputChange"] }], inputFocus: [{ type: i0.Output, args: ["inputFocus"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], labelSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelSize", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class CheckboxDirective {
+    constructor() {
+        this.#themeService = inject(ThemeService);
+        this.classes = computed(() => {
+            const theme = this.#themeService.theme();
+            const rounded = this.rounded();
+            const variantClasses = checkboxDirectiveThemeVariants(theme)({ rounded });
+            const userClass = this.userClass();
+            return twMerge(variantClasses, userClass);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Border-radius preset applied to the checkbox.
+         * @default "medium"
+         */
+        this.rounded = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
+         * @default ""
+         */
+        this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class" });
+    }
+    #themeService;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CheckboxDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: CheckboxDirective, isStandalone: true, selector: "input[type='checkbox'][monaCheckbox]", inputs: { rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CheckboxDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "input[type='checkbox'][monaCheckbox]",
+                    host: {
+                        "[class]": "classes()"
+                    }
+                }]
+        }], propDecorators: { rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/*
+ * Public API Surface of @nanahoshi/mona-ui/check-box
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CheckBoxComponent, CheckboxDirective };
+//# sourceMappingURL=nanahoshi-mona-ui-check-box.mjs.map