@nanahoshi/mona-ui 0.1.0

package/fesm2022/nanahoshi-mona-ui-switch.mjs

@@ -0,0 +1,308 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Directive, inject, DestroyRef, ElementRef, computed, contentChild, TemplateRef, input, model, output, afterNextRender, Component } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { ThemeService } from '@nanahoshi/mona-ui/theme';
+import { fromEvent, filter, tap, merge } from 'rxjs';
+import { twMerge } from 'tailwind-merge';
+import { cva } from 'class-variance-authority';
+
+class SwitchHandleContentTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SwitchHandleContentTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: SwitchHandleContentTemplateDirective, isStandalone: true, selector: "ng-template[monaSwitchHandleContentTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SwitchHandleContentTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaSwitchHandleContentTemplate]"
+                }]
+        }] });
+
+class SwitchOffLabelTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SwitchOffLabelTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: SwitchOffLabelTemplateDirective, isStandalone: true, selector: "ng-template[monaSwitchOffLabelTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SwitchOffLabelTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaSwitchOffLabelTemplate]"
+                }]
+        }] });
+
+class SwitchOnLabelTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SwitchOnLabelTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: SwitchOnLabelTemplateDirective, isStandalone: true, selector: "ng-template[monaSwitchOnLabelTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SwitchOnLabelTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaSwitchOnLabelTemplate]"
+                }]
+        }] });
+
+const switchVariants = cva(`
+        relative flex items-center cursor-pointer select-none
+        transition-[background]
+
+        bg-input-background
+        border border-input-border
+        outline-none
+
+        focus-within:ring-2 focus-within:ring-primary/40
+
+        data-[disabled='true']:pointer-events-none
+        data-[disabled='true']:opacity-50
+
+        data-[active='true']:bg-primary
+        data-[active='true']:text-primary-foreground
+
+        [&.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"
+        },
+        size: {
+            large: "w-14 h-7.5 text-md",
+            medium: "w-12 h-6.5 text-sm",
+            small: "w-10 h-5.5 text-xs"
+        }
+    }
+});
+const switchHandleVariants = cva(`
+        absolute inline-flex
+        items-center justify-center
+        outline-none transition-[left,background] ease-in-out duration-300
+        border border-border bg-secondary
+        data-[active='true']:bg-background
+    `, {
+    variants: {
+        rounded: {
+            full: "rounded-full",
+            large: "rounded-lg",
+            medium: "rounded-md",
+            none: "rounded-none",
+            small: "rounded-sm"
+        },
+        size: {
+            large: `
+                    w-6 h-6
+                    data-[active='true']:left-[calc(100%-26px)]
+                    data-[active='false']:left-0.5
+                `,
+            medium: `
+                    w-5 h-5
+                    data-[active='true']:left-[calc(100%-22px)]
+                    data-[active='false']:left-0.5
+                `,
+            small: `
+                    w-4 h-4
+                    data-[active='true']:left-[calc(100%-18px)]
+                    data-[active='false']:left-0.5
+                `
+        }
+    }
+});
+const switchLabelVariants = cva(`
+        h-full flex flex-1 items-center justify-center text-xs
+    `);
+
+const switchThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return switchVariants;
+        default:
+            return switchVariants; // Default to Mona styles
+    }
+};
+const switchHandleThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return switchHandleVariants;
+        default:
+            return switchHandleVariants; // Default to Mona styles
+    }
+};
+const switchLabelThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return switchLabelVariants;
+        default:
+            return switchLabelVariants; // Default to Mona styles
+    }
+};
+
+class SwitchComponent {
+    #destroyRef;
+    #hostElementRef;
+    #themeService;
+    constructor() {
+        this.#destroyRef = inject(DestroyRef);
+        this.#hostElementRef = inject((ElementRef));
+        this.#themeService = inject(ThemeService);
+        this.classes = computed(() => {
+            const theme = this.#themeService.theme();
+            const rounded = this.rounded();
+            const size = this.size();
+            const classes = switchThemeVariants(theme)({ rounded, size });
+            return twMerge(classes, this.userClass());
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+        this.invalidState = computed(() => this.invalid() || (this.required() && this.touched() && !this.checked()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
+        this.handleClasses = computed(() => {
+            const theme = this.#themeService.theme();
+            const rounded = this.rounded();
+            const size = this.size();
+            const classes = switchHandleThemeVariants(theme)({ rounded, size });
+            return twMerge(classes);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "handleClasses" }] : /* istanbul ignore next */ []));
+        this.handleContentTemplate = contentChild(SwitchHandleContentTemplateDirective, { ...(ngDevMode ? { debugName: "handleContentTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.labelClasses = computed(() => {
+            const theme = this.#themeService.theme();
+            const classes = switchLabelThemeVariants(theme)();
+            return twMerge(classes);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "labelClasses" }] : /* istanbul ignore next */ []));
+        this.offLabelTemplate = contentChild(SwitchOffLabelTemplateDirective, { ...(ngDevMode ? { debugName: "offLabelTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.onLabelTemplate = contentChild(SwitchOnLabelTemplateDirective, { ...(ngDevMode ? { debugName: "onLabelTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        /**
+         * @description Accessible name for the host element. Describe what the component represents.
+         * When empty, assistive technology announces the role without a label.
+         * @default null
+         */
+        this.ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: "aria-label" });
+        /**
+         * @description ID of an external element that provides the accessible name for the host element.
+         * @default null
+         */
+        this.ariaLabelledBy = input(null, { ...(ngDevMode ? { debugName: "ariaLabelledBy" } : /* istanbul ignore next */ {}), alias: "aria-labelledby" });
+        /**
+         * @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 Marks the switch 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 Label displayed inside the switch track when it is in the off state.
+         * @default ""
+         */
+        this.offLabel = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "offLabel" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Label displayed inside the switch track when it is in the on state.
+         * @default ""
+         */
+        this.onLabel = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "onLabel" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Marks the switch 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 component.
+         * @default "full"
+         */
+        this.rounded = input("full", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Size preset controlling the component's dimensions.
+         * @default "medium"
+         */
+        this.size = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Emitted when the switch loses focus or its value changes.
+         */
+        this.touch = output();
+        /**
+         * @description Marks the switch 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 host element via `tailwind-merge`.
+         * @default ""
+         */
+        this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class" });
+        afterNextRender({
+            read: () => this.#setEventListeners()
+        });
+    }
+    onBlur() {
+        this.touch.emit();
+    }
+    #setEventListeners() {
+        const host = this.#hostElementRef.nativeElement;
+        const click$ = fromEvent(host, "click");
+        const keydown$ = fromEvent(host, "keydown").pipe(filter(event => event.key === " " || event.key === "Enter"), tap(event => event.preventDefault()) // Prevent page scroll on Space
+        );
+        merge(click$, keydown$)
+            .pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe(() => this.#toggleState());
+    }
+    #toggleState() {
+        if (this.disabled()) {
+            return;
+        }
+        this.checked.set(!this.checked());
+        this.touch.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SwitchComponent, isStandalone: true, selector: "mona-switch", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, offLabel: { classPropertyName: "offLabel", publicName: "offLabel", isSignal: true, isRequired: false, transformFunction: null }, onLabel: { classPropertyName: "onLabel", publicName: "onLabel", 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 }, size: { classPropertyName: "size", publicName: "size", 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", touch: "touch" }, host: { listeners: { "blur": "onBlur()" }, properties: { "attr.role": "'switch'", "attr.aria-checked": "checked()", "attr.aria-disabled": "disabled() || undefined", "attr.aria-label": "ariaLabel()", "attr.aria-labelledby": "ariaLabelledBy()", "attr.tabindex": "disabled() ? -1 : 0", "attr.data-active": "checked()", "attr.data-disabled": "disabled()", "attr.data-invalid": "invalidState() || null", "attr.aria-invalid": "invalidState() ? 'true' : null", "class": "classes()" } }, queries: [{ propertyName: "handleContentTemplate", first: true, predicate: SwitchHandleContentTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "offLabelTemplate", first: true, predicate: SwitchOffLabelTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "onLabelTemplate", first: true, predicate: SwitchOnLabelTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<span [class]=\"labelClasses()\">\r\n    @if (checked() && !onLabelTemplate()) {\r\n        <span animate.enter=\"mona-switch-label-enter\" animate.leave=\"mona-switch-label-leave\">{{ onLabel() }}</span>\r\n    }\r\n    @if (checked() && onLabelTemplate()) {\r\n        <span animate.enter=\"mona-switch-label-enter\" animate.leave=\"mona-switch-label-leave\">\r\n            <ng-container [ngTemplateOutlet]=\"onLabelTemplate() ?? null\"></ng-container>\r\n        </span>\r\n    }\r\n</span>\r\n<span [class]=\"labelClasses()\">\r\n    @if (!checked() && !offLabelTemplate()) {\r\n        <span animate.enter=\"mona-switch-label-enter\" animate.leave=\"mona-switch-label-leave\">{{ offLabel() }}</span>\r\n    }\r\n    @if (!checked() && offLabelTemplate()) {\r\n        <span animate.enter=\"mona-switch-label-enter\" animate.leave=\"mona-switch-label-leave\">\r\n            <ng-container [ngTemplateOutlet]=\"offLabelTemplate() ?? null\"></ng-container>\r\n        </span>\r\n    }\r\n</span>\r\n<div [class]=\"handleClasses()\" [attr.data-active]=\"checked()\">\r\n    @if (handleContentTemplate()) {\r\n        <ng-container\r\n            [ngTemplateOutlet]=\"handleContentTemplate() ?? null\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: checked() }\"></ng-container>\r\n    }\r\n</div>\r\n", styles: [".mona-switch-label-enter{animation:mona-switch-label-fade-in .3s ease-out}.mona-switch-label-leave{animation:mona-switch-label-fade-out .3s ease-out}@keyframes mona-switch-label-fade-in{0%{opacity:0}to{opacity:1}}@keyframes mona-switch-label-fade-out{0%{opacity:1}to{opacity:0}}@media(prefers-reduced-motion:reduce){.mona-switch-label-enter,.mona-switch-label-leave{animation-duration:1ms}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SwitchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-switch", imports: [NgTemplateOutlet], host: {
+                        "[attr.role]": "'switch'",
+                        "[attr.aria-checked]": "checked()",
+                        "[attr.aria-disabled]": "disabled() || undefined",
+                        "[attr.aria-label]": "ariaLabel()",
+                        "[attr.aria-labelledby]": "ariaLabelledBy()",
+                        "[attr.tabindex]": "disabled() ? -1 : 0",
+                        "[attr.data-active]": "checked()",
+                        "[attr.data-disabled]": "disabled()",
+                        "[attr.data-invalid]": "invalidState() || null",
+                        "[attr.aria-invalid]": "invalidState() ? 'true' : null",
+                        "[class]": "classes()",
+                        "(blur)": "onBlur()"
+                    }, template: "<span [class]=\"labelClasses()\">\r\n    @if (checked() && !onLabelTemplate()) {\r\n        <span animate.enter=\"mona-switch-label-enter\" animate.leave=\"mona-switch-label-leave\">{{ onLabel() }}</span>\r\n    }\r\n    @if (checked() && onLabelTemplate()) {\r\n        <span animate.enter=\"mona-switch-label-enter\" animate.leave=\"mona-switch-label-leave\">\r\n            <ng-container [ngTemplateOutlet]=\"onLabelTemplate() ?? null\"></ng-container>\r\n        </span>\r\n    }\r\n</span>\r\n<span [class]=\"labelClasses()\">\r\n    @if (!checked() && !offLabelTemplate()) {\r\n        <span animate.enter=\"mona-switch-label-enter\" animate.leave=\"mona-switch-label-leave\">{{ offLabel() }}</span>\r\n    }\r\n    @if (!checked() && offLabelTemplate()) {\r\n        <span animate.enter=\"mona-switch-label-enter\" animate.leave=\"mona-switch-label-leave\">\r\n            <ng-container [ngTemplateOutlet]=\"offLabelTemplate() ?? null\"></ng-container>\r\n        </span>\r\n    }\r\n</span>\r\n<div [class]=\"handleClasses()\" [attr.data-active]=\"checked()\">\r\n    @if (handleContentTemplate()) {\r\n        <ng-container\r\n            [ngTemplateOutlet]=\"handleContentTemplate() ?? null\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: checked() }\"></ng-container>\r\n    }\r\n</div>\r\n", styles: [".mona-switch-label-enter{animation:mona-switch-label-fade-in .3s ease-out}.mona-switch-label-leave{animation:mona-switch-label-fade-out .3s ease-out}@keyframes mona-switch-label-fade-in{0%{opacity:0}to{opacity:1}}@keyframes mona-switch-label-fade-out{0%{opacity:1}to{opacity:0}}@media(prefers-reduced-motion:reduce){.mona-switch-label-enter,.mona-switch-label-leave{animation-duration:1ms}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { handleContentTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SwitchHandleContentTemplateDirective), { ...{
+                            read: TemplateRef
+                        }, isSignal: true }] }], offLabelTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SwitchOffLabelTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], onLabelTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SwitchOnLabelTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], 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 }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], offLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "offLabel", required: false }] }], onLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "onLabel", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", 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 }] }] } });
+
+/*
+ * Public API Surface of @nanahoshi/mona-ui/switch
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SwitchComponent, SwitchHandleContentTemplateDirective, SwitchOffLabelTemplateDirective, SwitchOnLabelTemplateDirective };
+//# sourceMappingURL=nanahoshi-mona-ui-switch.mjs.map