@ojiepermana/angular 22.1.11 → 22.1.12

package/fesm2022/ojiepermana-angular-component-checkbox.mjs

@@ -1,7 +1,194 @@
-export * from '@ojiepermana/angular-component/checkbox';
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, output, viewChild, signal, computed, forwardRef, Component } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { injectUniqueId, cn } from '@ojiepermana/angular/component/utils/core';
 
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+/**
+ * Checkbox built on a native `<input type="checkbox">` (shadcn pattern) — no
+ * Material dependency. Projected content renders as the clickable label.
+ */
+class CheckboxComponent {
+    id = input(injectUniqueId('Checkbox'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    name = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    indeterminate = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
+    required = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    ariaDescribedby = input(null, { ...(ngDevMode ? { debugName: "ariaDescribedby" } : /* istanbul ignore next */ {}), alias: 'aria-describedby' });
+    ariaLabelledby = input(null, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
+    ariaInvalid = input(null, { ...(ngDevMode ? { debugName: "ariaInvalid" } : /* istanbul ignore next */ {}), alias: 'aria-invalid' });
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    checkedChange = output();
+    ref = viewChild.required('ref', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ref" }] : /* istanbul ignore next */ []));
+    checked = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    disabledState = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
+    ariaInvalidAttr = computed(() => {
+        const value = this.ariaInvalid();
+        if (value === false || value === 'false' || value == null) {
+            return null;
+        }
+        return value === true || value === '' ? 'true' : `${value}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaInvalidAttr" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this.disabledState(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => cn('Checkbox inline-flex', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    labelClasses = computed(() => cn('inline-flex select-none items-center gap-2 text-sm font-medium leading-none', this.isDisabled() ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelClasses" }] : /* istanbul ignore next */ []));
+    boxClasses = computed(() => cn('inline-flex size-4 shrink-0 items-center justify-center rounded-sm border shadow-sm transition-colors', 'peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background', this.invalid()
+        ? 'border-destructive'
+        : this.checked() || this.indeterminate()
+            ? 'border-primary'
+            : 'border-input', this.checked() || this.indeterminate()
+        ? this.invalid()
+            ? 'bg-destructive text-destructive-foreground'
+            : 'bg-primary text-primary-foreground'
+        : 'bg-background'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "boxClasses" }] : /* istanbul ignore next */ []));
+    invalid = computed(() => this.ariaInvalidAttr() === 'true', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    onChange = () => { };
+    onTouched = () => { };
+    handleChange(event) {
+        const next = event.target.checked;
+        this.checked.set(next);
+        this.onChange(next);
+        this.checkedChange.emit(next);
+    }
+    handleBlur() {
+        this.onTouched();
+    }
+    focus() {
+        this.ref().nativeElement.focus();
+    }
+    writeValue(v) {
+        this.checked.set(!!v);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(d) {
+        this.disabledState.set(d);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: CheckboxComponent, isStandalone: true, selector: "Checkbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", 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 }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaInvalid: { classPropertyName: "ariaInvalid", publicName: "aria-invalid", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedChange: "checkedChange" }, host: { properties: { "class": "hostClasses()" } }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CheckboxComponent), multi: true },
+        ], viewQueries: [{ propertyName: "ref", first: true, predicate: ["ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <label [class]="labelClasses()" [attr.for]="id()">
+      <input
+        #ref
+        type="checkbox"
+        class="peer sr-only"
+        [id]="id()"
+        [attr.name]="name()"
+        [checked]="checked()"
+        [indeterminate]="indeterminate()"
+        [disabled]="isDisabled()"
+        [required]="required()"
+        [attr.aria-label]="ariaLabel()"
+        [attr.aria-describedby]="ariaDescribedby()"
+        [attr.aria-labelledby]="ariaLabelledby()"
+        [attr.aria-invalid]="ariaInvalidAttr()"
+        (change)="handleChange($event)"
+        (blur)="handleBlur()"
+      />
+      <span aria-hidden="true" [class]="boxClasses()">
+        @if (indeterminate()) {
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="3"
+            class="size-3"
+          >
+            <path d="M5 12h14" />
+          </svg>
+        } @else if (checked()) {
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="3"
+            class="size-3"
+          >
+            <path d="M20 6 9 17l-5-5" />
+          </svg>
+        }
+      </span>
+      <ng-content />
+    </label>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CheckboxComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'Checkbox',
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CheckboxComponent), multi: true },
+                    ],
+                    host: { '[class]': 'hostClasses()' },
+                    template: `
+    <label [class]="labelClasses()" [attr.for]="id()">
+      <input
+        #ref
+        type="checkbox"
+        class="peer sr-only"
+        [id]="id()"
+        [attr.name]="name()"
+        [checked]="checked()"
+        [indeterminate]="indeterminate()"
+        [disabled]="isDisabled()"
+        [required]="required()"
+        [attr.aria-label]="ariaLabel()"
+        [attr.aria-describedby]="ariaDescribedby()"
+        [attr.aria-labelledby]="ariaLabelledby()"
+        [attr.aria-invalid]="ariaInvalidAttr()"
+        (change)="handleChange($event)"
+        (blur)="handleBlur()"
+      />
+      <span aria-hidden="true" [class]="boxClasses()">
+        @if (indeterminate()) {
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="3"
+            class="size-3"
+          >
+            <path d="M5 12h14" />
+          </svg>
+        } @else if (checked()) {
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="3"
+            class="size-3"
+          >
+            <path d="M20 6 9 17l-5-5" />
+          </svg>
+        }
+      </span>
+      <ng-content />
+    </label>
+  `,
+                }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], ariaInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-invalid", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], checkedChange: [{ type: i0.Output, args: ["checkedChange"] }], ref: [{ type: i0.ViewChild, args: ['ref', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
- */
+ */
+
+export { CheckboxComponent };

package/fesm2022/ojiepermana-angular-component-collapsible.mjs

@@ -1,7 +1,121 @@
-export * from '@ojiepermana/angular-component/collapsible';
+import * as i0 from '@angular/core';
+import { Directive, model, input, computed, forwardRef, Component, inject } from '@angular/core';
+import { injectUniqueId, cn } from '@ojiepermana/angular/component/utils/core';
 
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+class CollapsibleContextBase {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CollapsibleContextBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: CollapsibleContextBase, isStandalone: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CollapsibleContextBase, decorators: [{
+            type: Directive
+        }] });
+class CollapsibleComponent extends CollapsibleContextBase {
+    open = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    instanceId = injectUniqueId('Collapsible');
+    triggerId = `collapsible-trigger-${this.instanceId}`;
+    contentId = `collapsible-content-${this.instanceId}`;
+    classes = computed(() => cn('block', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    isOpen() {
+        return this.open();
+    }
+    isDisabled() {
+        return this.disabled();
+    }
+    toggle() {
+        if (!this.disabled())
+            this.open.update((value) => !value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CollapsibleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: CollapsibleComponent, isStandalone: true, selector: "Collapsible", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { properties: { "class": "classes()", "attr.data-state": "open() ? \"open\" : \"closed\"", "attr.data-disabled": "disabled() ? \"\" : null" } }, providers: [
+            { provide: CollapsibleContextBase, useExisting: forwardRef(() => CollapsibleComponent) },
+        ], usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CollapsibleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'Collapsible',
+                    providers: [
+                        { provide: CollapsibleContextBase, useExisting: forwardRef(() => CollapsibleComponent) },
+                    ],
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-state]': 'open() ? "open" : "closed"',
+                        '[attr.data-disabled]': 'disabled() ? "" : null',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class CollapsibleTriggerDirective {
+    ctx = inject(CollapsibleContextBase);
+    toggle() {
+        this.ctx.toggle();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CollapsibleTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: CollapsibleTriggerDirective, isStandalone: true, selector: "button[CollapsibleTrigger]", host: { attributes: { "type": "button" }, listeners: { "click": "toggle()" }, properties: { "attr.id": "ctx.triggerId", "attr.aria-controls": "ctx.contentId", "attr.aria-expanded": "ctx.isOpen()", "attr.data-state": "ctx.isOpen() ? \"open\" : \"closed\"", "attr.data-disabled": "ctx.isDisabled() ? \"\" : null", "disabled": "ctx.isDisabled() || null" }, classAttribute: "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CollapsibleTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[CollapsibleTrigger]',
+                    host: {
+                        class: 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+                        type: 'button',
+                        '[attr.id]': 'ctx.triggerId',
+                        '[attr.aria-controls]': 'ctx.contentId',
+                        '[attr.aria-expanded]': 'ctx.isOpen()',
+                        '[attr.data-state]': 'ctx.isOpen() ? "open" : "closed"',
+                        '[attr.data-disabled]': 'ctx.isDisabled() ? "" : null',
+                        '[disabled]': 'ctx.isDisabled() || null',
+                        '(click)': 'toggle()',
+                    },
+                }]
+        }] });
+class CollapsibleContentComponent {
+    ctx = inject(CollapsibleContextBase);
+    forceMount = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "forceMount" }] : /* istanbul ignore next */ []));
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('block overflow-hidden text-sm', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    renderContent = computed(() => this.ctx.isOpen() || this.forceMount(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "renderContent" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CollapsibleContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: CollapsibleContentComponent, isStandalone: true, selector: "CollapsibleContent", inputs: { forceMount: { classPropertyName: "forceMount", publicName: "forceMount", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.id": "ctx.contentId", "attr.role": "\"region\"", "attr.aria-labelledby": "ctx.triggerId", "attr.data-state": "ctx.isOpen() ? \"open\" : \"closed\"", "attr.data-disabled": "ctx.isDisabled() ? \"\" : null", "hidden": "!ctx.isOpen()" } }, ngImport: i0, template: `
+    @if (renderContent()) {
+      <ng-content />
+    }
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CollapsibleContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'CollapsibleContent',
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.id]': 'ctx.contentId',
+                        '[attr.role]': '"region"',
+                        '[attr.aria-labelledby]': 'ctx.triggerId',
+                        '[attr.data-state]': 'ctx.isOpen() ? "open" : "closed"',
+                        '[attr.data-disabled]': 'ctx.isDisabled() ? "" : null',
+                        '[hidden]': '!ctx.isOpen()',
+                    },
+                    template: `
+    @if (renderContent()) {
+      <ng-content />
+    }
+  `,
+                }]
+        }], propDecorators: { forceMount: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceMount", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
- */
+ */
+
+export { CollapsibleComponent, CollapsibleContentComponent, CollapsibleContextBase, CollapsibleTriggerDirective };