@ojiepermana/angular 21.2.4 → 21.3.3

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

@@ -0,0 +1,163 @@
+import * as i0 from '@angular/core';
+import { inject, TemplateRef, Directive, InjectionToken, ViewContainerRef, ElementRef, DestroyRef, input, output, signal } from '@angular/core';
+import { Overlay } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { merge } from 'rxjs';
+import { filter } from 'rxjs/operators';
+
+class PopoverContentDirective {
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PopoverContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: PopoverContentDirective, isStandalone: true, selector: "ng-template[uiPopoverContent]", exportAs: ["uiPopoverContent"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PopoverContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[uiPopoverContent]',
+                    exportAs: 'uiPopoverContent',
+                }]
+        }] });
+
+const POPOVER_TRIGGER_DEFAULTS = new InjectionToken('POPOVER_TRIGGER_DEFAULTS');
+const POSITION_ANCHORS = {
+    top: (align) => ({
+        originX: align === 'start' ? 'start' : align === 'end' ? 'end' : 'center',
+        originY: 'top',
+        overlayX: align === 'start' ? 'start' : align === 'end' ? 'end' : 'center',
+        overlayY: 'bottom',
+    }),
+    bottom: (align) => ({
+        originX: align === 'start' ? 'start' : align === 'end' ? 'end' : 'center',
+        originY: 'bottom',
+        overlayX: align === 'start' ? 'start' : align === 'end' ? 'end' : 'center',
+        overlayY: 'top',
+    }),
+    left: (align) => ({
+        originX: 'start',
+        originY: align === 'start' ? 'top' : align === 'end' ? 'bottom' : 'center',
+        overlayX: 'end',
+        overlayY: align === 'start' ? 'top' : align === 'end' ? 'bottom' : 'center',
+    }),
+    right: (align) => ({
+        originX: 'end',
+        originY: align === 'start' ? 'top' : align === 'end' ? 'bottom' : 'center',
+        overlayX: 'start',
+        overlayY: align === 'start' ? 'top' : align === 'end' ? 'bottom' : 'center',
+    }),
+};
+function positionFor(side, align, sideOffset) {
+    const anchor = POSITION_ANCHORS[side](align);
+    if (side === 'top') {
+        return { ...anchor, offsetY: -sideOffset };
+    }
+    if (side === 'bottom') {
+        return { ...anchor, offsetY: sideOffset };
+    }
+    if (side === 'left') {
+        return { ...anchor, offsetX: -sideOffset };
+    }
+    return { ...anchor, offsetX: sideOffset };
+}
+class PopoverTriggerDirective {
+    overlay = inject(Overlay);
+    vcr = inject(ViewContainerRef);
+    el = inject(ElementRef);
+    destroyRef = inject(DestroyRef);
+    defaults = inject(POPOVER_TRIGGER_DEFAULTS, { optional: true });
+    uiPopoverTrigger = input.required(...(ngDevMode ? [{ debugName: "uiPopoverTrigger" }] : /* istanbul ignore next */ []));
+    side = input(undefined, ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+    align = input(undefined, ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    sideOffset = input(undefined, ...(ngDevMode ? [{ debugName: "sideOffset" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    openedChange = output();
+    overlayRef = null;
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    toggle() {
+        if (this.disabled())
+            return;
+        this.isOpen() ? this.close() : this.open();
+    }
+    onKeyboardToggle(event) {
+        if (this.disabled() || this.usesNativeKeyboardActivation()) {
+            return;
+        }
+        event.preventDefault();
+        this.toggle();
+    }
+    open() {
+        if (this.isOpen() || this.disabled())
+            return;
+        const side = this.side() ?? this.defaults?.side?.() ?? 'bottom';
+        const align = this.align() ?? this.defaults?.align?.() ?? 'center';
+        const sideOffset = this.sideOffset() ?? this.defaults?.sideOffset?.() ?? 8;
+        const primary = positionFor(side, align, sideOffset);
+        const fallback = positionFor(this.oppositeSide(side), align, sideOffset);
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(this.el)
+            .withPositions([primary, fallback])
+            .withPush(false)
+            .withFlexibleDimensions(false);
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            hasBackdrop: false,
+            panelClass: 'ui-popover-panel',
+        });
+        const portal = new TemplatePortal(this.uiPopoverTrigger().template, this.vcr);
+        this.overlayRef.attach(portal);
+        merge(this.overlayRef
+            .outsidePointerEvents()
+            .pipe(filter((event) => !this.el.nativeElement.contains(event.target))), this.overlayRef.keydownEvents().pipe(filter((event) => event.key === 'Escape')), this.overlayRef.detachments())
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.close());
+        this.isOpen.set(true);
+        this.openedChange.emit(true);
+    }
+    close() {
+        if (!this.isOpen())
+            return;
+        this.overlayRef?.dispose();
+        this.overlayRef = null;
+        this.isOpen.set(false);
+        this.openedChange.emit(false);
+    }
+    oppositeSide(side) {
+        return side === 'top' ? 'bottom' : side === 'bottom' ? 'top' : side === 'left' ? 'right' : 'left';
+    }
+    usesNativeKeyboardActivation() {
+        const host = this.el.nativeElement;
+        const tagName = host.tagName;
+        return (tagName === 'BUTTON' ||
+            tagName === 'INPUT' ||
+            tagName === 'SELECT' ||
+            tagName === 'TEXTAREA' ||
+            tagName === 'SUMMARY' ||
+            (tagName === 'A' && host.hasAttribute('href')));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PopoverTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: PopoverTriggerDirective, isStandalone: true, selector: "[uiPopoverTrigger]", inputs: { uiPopoverTrigger: { classPropertyName: "uiPopoverTrigger", publicName: "uiPopoverTrigger", isSignal: true, isRequired: true, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedChange: "openedChange" }, host: { listeners: { "click": "toggle()", "keydown.enter": "onKeyboardToggle($event)", "keydown.space": "onKeyboardToggle($event)", "keydown.escape": "close()" }, properties: { "attr.aria-expanded": "isOpen()", "attr.aria-haspopup": "\"dialog\"" } }, exportAs: ["uiPopoverTrigger"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PopoverTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[uiPopoverTrigger]',
+                    exportAs: 'uiPopoverTrigger',
+                    host: {
+                        '[attr.aria-expanded]': 'isOpen()',
+                        '[attr.aria-haspopup]': '"dialog"',
+                        '(click)': 'toggle()',
+                        '(keydown.enter)': 'onKeyboardToggle($event)',
+                        '(keydown.space)': 'onKeyboardToggle($event)',
+                        '(keydown.escape)': 'close()',
+                    },
+                }]
+        }], propDecorators: { uiPopoverTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "uiPopoverTrigger", required: true }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], sideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideOffset", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { POPOVER_TRIGGER_DEFAULTS, PopoverContentDirective, PopoverTriggerDirective };
+//# sourceMappingURL=ojiepermana-angular-component-popover.mjs.map

package/fesm2022/ojiepermana-angular-component-popover.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ojiepermana-angular-component-popover.mjs","sources":["../../../projects/angular/component/popover/src/lib/popover-content.directive.ts","../../../projects/angular/component/popover/src/lib/popover-trigger.directive.ts","../../../projects/angular/component/popover/ojiepermana-angular-component-popover.ts"],"sourcesContent":["import { Directive, TemplateRef, inject } from '@angular/core';\n\n@Directive({\n  selector: 'ng-template[uiPopoverContent]',\n  exportAs: 'uiPopoverContent',\n})\nexport class PopoverContentDirective {\n  readonly template = inject<TemplateRef<unknown>>(TemplateRef);\n}\n","import { Overlay, OverlayRef, ConnectedPosition } from '@angular/cdk/overlay';\nimport { TemplatePortal } from '@angular/cdk/portal';\nimport {\n  DestroyRef,\n  Directive,\n  ElementRef,\n  InjectionToken,\n  ViewContainerRef,\n  inject,\n  input,\n  output,\n  signal,\n  type Signal,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { merge } from 'rxjs';\nimport { filter } from 'rxjs/operators';\nimport type { PopoverContentDirective } from './popover-content.directive';\n\nexport type PopoverSide = 'top' | 'right' | 'bottom' | 'left';\nexport type PopoverAlign = 'start' | 'center' | 'end';\n\nexport interface PopoverTriggerDefaults {\n  readonly side?: Signal<PopoverSide>;\n  readonly align?: Signal<PopoverAlign>;\n  readonly sideOffset?: Signal<number>;\n}\n\nexport const POPOVER_TRIGGER_DEFAULTS = new InjectionToken<PopoverTriggerDefaults>('POPOVER_TRIGGER_DEFAULTS');\n\nconst POSITION_ANCHORS: Record<PopoverSide, (align: PopoverAlign) => ConnectedPosition> = {\n  top: (align) => ({\n    originX: align === 'start' ? 'start' : align === 'end' ? 'end' : 'center',\n    originY: 'top',\n    overlayX: align === 'start' ? 'start' : align === 'end' ? 'end' : 'center',\n    overlayY: 'bottom',\n  }),\n  bottom: (align) => ({\n    originX: align === 'start' ? 'start' : align === 'end' ? 'end' : 'center',\n    originY: 'bottom',\n    overlayX: align === 'start' ? 'start' : align === 'end' ? 'end' : 'center',\n    overlayY: 'top',\n  }),\n  left: (align) => ({\n    originX: 'start',\n    originY: align === 'start' ? 'top' : align === 'end' ? 'bottom' : 'center',\n    overlayX: 'end',\n    overlayY: align === 'start' ? 'top' : align === 'end' ? 'bottom' : 'center',\n  }),\n  right: (align) => ({\n    originX: 'end',\n    originY: align === 'start' ? 'top' : align === 'end' ? 'bottom' : 'center',\n    overlayX: 'start',\n    overlayY: align === 'start' ? 'top' : align === 'end' ? 'bottom' : 'center',\n  }),\n};\n\nfunction positionFor(side: PopoverSide, align: PopoverAlign, sideOffset: number): ConnectedPosition {\n  const anchor = POSITION_ANCHORS[side](align);\n\n  if (side === 'top') {\n    return { ...anchor, offsetY: -sideOffset };\n  }\n\n  if (side === 'bottom') {\n    return { ...anchor, offsetY: sideOffset };\n  }\n\n  if (side === 'left') {\n    return { ...anchor, offsetX: -sideOffset };\n  }\n\n  return { ...anchor, offsetX: sideOffset };\n}\n\n@Directive({\n  selector: '[uiPopoverTrigger]',\n  exportAs: 'uiPopoverTrigger',\n  host: {\n    '[attr.aria-expanded]': 'isOpen()',\n    '[attr.aria-haspopup]': '\"dialog\"',\n    '(click)': 'toggle()',\n    '(keydown.enter)': 'onKeyboardToggle($event)',\n    '(keydown.space)': 'onKeyboardToggle($event)',\n    '(keydown.escape)': 'close()',\n  },\n})\nexport class PopoverTriggerDirective {\n  private readonly overlay = inject(Overlay);\n  private readonly vcr = inject(ViewContainerRef);\n  private readonly el = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly destroyRef = inject(DestroyRef);\n  private readonly defaults = inject(POPOVER_TRIGGER_DEFAULTS, { optional: true });\n\n  readonly uiPopoverTrigger = input.required<PopoverContentDirective>();\n  readonly side = input<PopoverSide | undefined>(undefined);\n  readonly align = input<PopoverAlign | undefined>(undefined);\n  readonly sideOffset = input<number | undefined>(undefined);\n  readonly disabled = input<boolean>(false);\n\n  readonly openedChange = output<boolean>();\n\n  private overlayRef: OverlayRef | null = null;\n  readonly isOpen = signal(false);\n\n  toggle(): void {\n    if (this.disabled()) return;\n    this.isOpen() ? this.close() : this.open();\n  }\n\n  onKeyboardToggle(event: Event): void {\n    if (this.disabled() || this.usesNativeKeyboardActivation()) {\n      return;\n    }\n\n    event.preventDefault();\n    this.toggle();\n  }\n\n  open(): void {\n    if (this.isOpen() || this.disabled()) return;\n\n    const side = this.side() ?? this.defaults?.side?.() ?? 'bottom';\n    const align = this.align() ?? this.defaults?.align?.() ?? 'center';\n    const sideOffset = this.sideOffset() ?? this.defaults?.sideOffset?.() ?? 8;\n\n    const primary = positionFor(side, align, sideOffset);\n    const fallback = positionFor(this.oppositeSide(side), align, sideOffset);\n\n    const positionStrategy = this.overlay\n      .position()\n      .flexibleConnectedTo(this.el)\n      .withPositions([primary, fallback])\n      .withPush(false)\n      .withFlexibleDimensions(false);\n\n    this.overlayRef = this.overlay.create({\n      positionStrategy,\n      scrollStrategy: this.overlay.scrollStrategies.reposition(),\n      hasBackdrop: false,\n      panelClass: 'ui-popover-panel',\n    });\n\n    const portal = new TemplatePortal(this.uiPopoverTrigger().template, this.vcr);\n    this.overlayRef.attach(portal);\n\n    merge(\n      this.overlayRef\n        .outsidePointerEvents()\n        .pipe(filter((event) => !this.el.nativeElement.contains(event.target as Node))),\n      this.overlayRef.keydownEvents().pipe(filter((event) => event.key === 'Escape')),\n      this.overlayRef.detachments(),\n    )\n      .pipe(takeUntilDestroyed(this.destroyRef))\n      .subscribe(() => this.close());\n\n    this.isOpen.set(true);\n    this.openedChange.emit(true);\n  }\n\n  close(): void {\n    if (!this.isOpen()) return;\n    this.overlayRef?.dispose();\n    this.overlayRef = null;\n    this.isOpen.set(false);\n    this.openedChange.emit(false);\n  }\n\n  private oppositeSide(side: PopoverSide): PopoverSide {\n    return side === 'top' ? 'bottom' : side === 'bottom' ? 'top' : side === 'left' ? 'right' : 'left';\n  }\n\n  private usesNativeKeyboardActivation(): boolean {\n    const host = this.el.nativeElement;\n    const tagName = host.tagName;\n\n    return (\n      tagName === 'BUTTON' ||\n      tagName === 'INPUT' ||\n      tagName === 'SELECT' ||\n      tagName === 'TEXTAREA' ||\n      tagName === 'SUMMARY' ||\n      (tagName === 'A' && host.hasAttribute('href'))\n    );\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,53 @@
+import * as i0 from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { cn } from '@ojiepermana/angular/component/utils';
+
+class ProgressComponent {
+    value = input(0, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    indeterminate = input(false, ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    ariaLabelledby = input(null, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    clamped = computed(() => {
+        const v = this.value() ?? 0;
+        return Math.max(0, Math.min(this.max(), v));
+    }, ...(ngDevMode ? [{ debugName: "clamped" }] : /* istanbul ignore next */ []));
+    indicatorTransform = computed(() => {
+        if (this.indeterminate())
+            return 'translateX(-100%)';
+        const pct = (this.clamped() / this.max()) * 100;
+        return `translateX(-${100 - pct}%)`;
+    }, ...(ngDevMode ? [{ debugName: "indicatorTransform" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('relative h-2 w-full overflow-hidden rounded-full bg-secondary', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: ProgressComponent, isStandalone: true, selector: "ui-progress", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.role": "\"progressbar\"", "attr.aria-valuemin": "0", "attr.aria-valuemax": "max()", "attr.aria-valuenow": "indeterminate() ? null : clamped()", "attr.aria-label": "ariaLabel()", "attr.aria-labelledby": "ariaLabelledby()", "attr.data-state": "indeterminate() ? \"indeterminate\" : \"determinate\"" } }, ngImport: i0, template: `
+    <div
+      class="ui-progress-indicator h-full w-full flex-1 bg-primary transition-transform"
+      [style.transform]="indicatorTransform()"></div>
+  `, isInline: true, styles: [":host{display:block}:host[data-state=indeterminate] .ui-progress-indicator{animation:ui-progress-indeterminate 1.5s cubic-bezier(.65,.815,.735,.395) infinite}@keyframes ui-progress-indeterminate{0%{transform:translate(-100%)}to{transform:translate(100%)}}@media(prefers-reduced-motion:reduce){:host[data-state=indeterminate] .ui-progress-indicator{animation:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ProgressComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-progress', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class]': 'classes()',
+                        '[attr.role]': '"progressbar"',
+                        '[attr.aria-valuemin]': '0',
+                        '[attr.aria-valuemax]': 'max()',
+                        '[attr.aria-valuenow]': 'indeterminate() ? null : clamped()',
+                        '[attr.aria-label]': 'ariaLabel()',
+                        '[attr.aria-labelledby]': 'ariaLabelledby()',
+                        '[attr.data-state]': 'indeterminate() ? "indeterminate" : "determinate"',
+                    }, template: `
+    <div
+      class="ui-progress-indicator h-full w-full flex-1 bg-primary transition-transform"
+      [style.transform]="indicatorTransform()"></div>
+  `, styles: [":host{display:block}:host[data-state=indeterminate] .ui-progress-indicator{animation:ui-progress-indeterminate 1.5s cubic-bezier(.65,.815,.735,.395) infinite}@keyframes ui-progress-indeterminate{0%{transform:translate(-100%)}to{transform:translate(100%)}}@media(prefers-reduced-motion:reduce){:host[data-state=indeterminate] .ui-progress-indicator{animation:none}}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ProgressComponent };
+//# sourceMappingURL=ojiepermana-angular-component-progress.mjs.map

package/fesm2022/ojiepermana-angular-component-progress.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ojiepermana-angular-component-progress.mjs","sources":["../../../projects/angular/component/progress/src/lib/progress.component.ts","../../../projects/angular/component/progress/ojiepermana-angular-component-progress.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { cn } from '@ojiepermana/angular/component/utils';\n\n@Component({\n  selector: 'ui-progress',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'classes()',\n    '[attr.role]': '\"progressbar\"',\n    '[attr.aria-valuemin]': '0',\n    '[attr.aria-valuemax]': 'max()',\n    '[attr.aria-valuenow]': 'indeterminate() ? null : clamped()',\n    '[attr.aria-label]': 'ariaLabel()',\n    '[attr.aria-labelledby]': 'ariaLabelledby()',\n    '[attr.data-state]': 'indeterminate() ? \"indeterminate\" : \"determinate\"',\n  },\n  template: `\n    <div\n      class=\"ui-progress-indicator h-full w-full flex-1 bg-primary transition-transform\"\n      [style.transform]=\"indicatorTransform()\"></div>\n  `,\n  styles: [\n    `\n      :host {\n        display: block;\n      }\n      :host[data-state='indeterminate'] .ui-progress-indicator {\n        animation: ui-progress-indeterminate 1.5s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;\n      }\n      @keyframes ui-progress-indeterminate {\n        0% {\n          transform: translateX(-100%);\n        }\n        100% {\n          transform: translateX(100%);\n        }\n      }\n      @media (prefers-reduced-motion: reduce) {\n        :host[data-state='indeterminate'] .ui-progress-indicator {\n          animation: none;\n        }\n      }\n    `,\n  ],\n})\nexport class ProgressComponent {\n  readonly value = input<number | null>(0);\n  readonly max = input<number>(100);\n  readonly indeterminate = input<boolean>(false);\n  readonly ariaLabel = input<string | null>(null, { alias: 'aria-label' });\n  readonly ariaLabelledby = input<string | null>(null, { alias: 'aria-labelledby' });\n  readonly class = input<string>('');\n\n  protected readonly clamped = computed(() => {\n    const v = this.value() ?? 0;\n    return Math.max(0, Math.min(this.max(), v));\n  });\n\n  protected readonly indicatorTransform = computed(() => {\n    if (this.indeterminate()) return 'translateX(-100%)';\n    const pct = (this.clamped() / this.max()) * 100;\n    return `translateX(-${100 - pct}%)`;\n  });\n\n  protected readonly classes = computed(() =>\n    cn('relative h-2 w-full overflow-hidden rounded-full bg-secondary', this.class()),\n  );\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,92 @@
+import * as i0 from '@angular/core';
+import { input, output, viewChild, signal, computed, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { MatRadioGroup, MatRadioButton } from '@angular/material/radio';
+import { cn } from '@ojiepermana/angular/component/utils';
+
+class RadioGroupComponent {
+    name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    valueChange = output();
+    ref = viewChild.required('ref');
+    value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('ui-radio-group grid gap-2', this.orientation() === 'horizontal' ? 'grid-flow-col auto-cols-max' : '', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    onChange = () => { };
+    onTouched = () => { };
+    handleChange(e) {
+        this.value.set(e.value);
+        this.onChange(e.value);
+        this.onTouched();
+        this.valueChange.emit(e.value);
+    }
+    focus() {
+        this.ref()._radios?.first?.focus();
+    }
+    writeValue(v) {
+        this.value.set(v ?? null);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(d) {
+        this.disabled.set(d);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: RadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.14", type: RadioGroupComponent, isStandalone: true, selector: "ui-radio-group", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RadioGroupComponent), multi: true }], viewQueries: [{ propertyName: "ref", first: true, predicate: ["ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <mat-radio-group
+      #ref
+      [class]="classes()"
+      [value]="value()"
+      [disabled]="disabled()"
+      [name]="name()"
+      (change)="handleChange($event)">
+      <ng-content />
+    </mat-radio-group>
+  `, isInline: true, styles: [":host{display:block}:host ::ng-deep .mat-mdc-radio-button{--mdc-radio-state-layer-size: 1rem;--mdc-radio-selected-icon-color: hsl(var(--primary));--mdc-radio-selected-focus-icon-color: hsl(var(--primary));--mdc-radio-selected-hover-icon-color: hsl(var(--primary));--mdc-radio-selected-pressed-icon-color: hsl(var(--primary));--mdc-radio-unselected-icon-color: hsl(var(--input));--mdc-radio-unselected-focus-icon-color: hsl(var(--input));--mdc-radio-unselected-hover-icon-color: hsl(var(--input));--mdc-radio-unselected-pressed-icon-color: hsl(var(--input));--mat-radio-ripple-color: transparent;--mat-radio-checked-ripple-color: transparent}:host ::ng-deep .mat-mdc-radio-button .mdc-radio__background:before,:host ::ng-deep .mat-mdc-radio-button .mat-mdc-radio-ripple,:host ::ng-deep .mat-mdc-radio-button .mat-mdc-focus-indicator,:host ::ng-deep .mat-mdc-radio-button .mat-ripple{display:none}:host ::ng-deep .mat-mdc-radio-button .mat-mdc-radio-touch-target{display:none}:host ::ng-deep .mat-mdc-radio-button .mdc-radio{padding:0;margin:0;flex:0 0 1rem;width:1rem;height:1rem}:host ::ng-deep .mat-mdc-radio-button .mdc-radio__native-control{width:1rem;height:1rem;top:0;left:0}:host ::ng-deep .mat-mdc-radio-button .mdc-radio__background{width:1rem;height:1rem}:host ::ng-deep .mat-mdc-radio-button .mdc-form-field{gap:.5rem;color:hsl(var(--foreground));font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--text-sm--line-height)}:host ::ng-deep .mat-mdc-radio-button .mdc-label{padding:0;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: RadioGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-radio-group', imports: [MatRadioGroup], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RadioGroupComponent), multi: true }], template: `
+    <mat-radio-group
+      #ref
+      [class]="classes()"
+      [value]="value()"
+      [disabled]="disabled()"
+      [name]="name()"
+      (change)="handleChange($event)">
+      <ng-content />
+    </mat-radio-group>
+  `, styles: [":host{display:block}:host ::ng-deep .mat-mdc-radio-button{--mdc-radio-state-layer-size: 1rem;--mdc-radio-selected-icon-color: hsl(var(--primary));--mdc-radio-selected-focus-icon-color: hsl(var(--primary));--mdc-radio-selected-hover-icon-color: hsl(var(--primary));--mdc-radio-selected-pressed-icon-color: hsl(var(--primary));--mdc-radio-unselected-icon-color: hsl(var(--input));--mdc-radio-unselected-focus-icon-color: hsl(var(--input));--mdc-radio-unselected-hover-icon-color: hsl(var(--input));--mdc-radio-unselected-pressed-icon-color: hsl(var(--input));--mat-radio-ripple-color: transparent;--mat-radio-checked-ripple-color: transparent}:host ::ng-deep .mat-mdc-radio-button .mdc-radio__background:before,:host ::ng-deep .mat-mdc-radio-button .mat-mdc-radio-ripple,:host ::ng-deep .mat-mdc-radio-button .mat-mdc-focus-indicator,:host ::ng-deep .mat-mdc-radio-button .mat-ripple{display:none}:host ::ng-deep .mat-mdc-radio-button .mat-mdc-radio-touch-target{display:none}:host ::ng-deep .mat-mdc-radio-button .mdc-radio{padding:0;margin:0;flex:0 0 1rem;width:1rem;height:1rem}:host ::ng-deep .mat-mdc-radio-button .mdc-radio__native-control{width:1rem;height:1rem;top:0;left:0}:host ::ng-deep .mat-mdc-radio-button .mdc-radio__background{width:1rem;height:1rem}:host ::ng-deep .mat-mdc-radio-button .mdc-form-field{gap:.5rem;color:hsl(var(--foreground));font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--text-sm--line-height)}:host ::ng-deep .mat-mdc-radio-button .mdc-label{padding:0;cursor:pointer}\n"] }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], ref: [{ type: i0.ViewChild, args: ['ref', { isSignal: true }] }] } });
+class RadioComponent {
+    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('ui-radio', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: RadioComponent, isStandalone: true, selector: "ui-radio", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <mat-radio-button disableRipple [class]="classes()" [value]="value()" [disabled]="disabled()">
+      <ng-content />
+    </mat-radio-button>
+  `, isInline: true, styles: [":host{display:block}:host ::ng-deep .mat-mdc-radio-button{--mdc-radio-state-layer-size: 1rem;--mdc-radio-selected-icon-color: hsl(var(--primary));--mdc-radio-selected-focus-icon-color: hsl(var(--primary));--mdc-radio-selected-hover-icon-color: hsl(var(--primary));--mdc-radio-selected-pressed-icon-color: hsl(var(--primary));--mdc-radio-unselected-icon-color: hsl(var(--input));--mdc-radio-unselected-focus-icon-color: hsl(var(--input));--mdc-radio-unselected-hover-icon-color: hsl(var(--input));--mdc-radio-unselected-pressed-icon-color: hsl(var(--input));--mat-radio-ripple-color: transparent;--mat-radio-checked-ripple-color: transparent}:host ::ng-deep .mat-mdc-radio-button .mdc-radio__background:before,:host ::ng-deep .mat-mdc-radio-button .mat-mdc-radio-ripple,:host ::ng-deep .mat-mdc-radio-button .mat-mdc-focus-indicator,:host ::ng-deep .mat-mdc-radio-button .mat-ripple{display:none}:host ::ng-deep .mat-mdc-radio-button .mat-mdc-radio-touch-target{display:none}:host ::ng-deep .mat-mdc-radio-button .mdc-radio{padding:0;margin:0;flex:0 0 1rem;width:1rem;height:1rem}:host ::ng-deep .mat-mdc-radio-button .mdc-radio__native-control{width:1rem;height:1rem;top:0;left:0}:host ::ng-deep .mat-mdc-radio-button .mdc-radio__background{width:1rem;height:1rem}:host ::ng-deep .mat-mdc-radio-button .mdc-form-field{gap:.5rem;color:hsl(var(--foreground));font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--text-sm--line-height)}:host ::ng-deep .mat-mdc-radio-button .mdc-label{padding:0;cursor:pointer}\n"], dependencies: [{ kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: RadioComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-radio', imports: [MatRadioButton], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <mat-radio-button disableRipple [class]="classes()" [value]="value()" [disabled]="disabled()">
+      <ng-content />
+    </mat-radio-button>
+  `, styles: [":host{display:block}:host ::ng-deep .mat-mdc-radio-button{--mdc-radio-state-layer-size: 1rem;--mdc-radio-selected-icon-color: hsl(var(--primary));--mdc-radio-selected-focus-icon-color: hsl(var(--primary));--mdc-radio-selected-hover-icon-color: hsl(var(--primary));--mdc-radio-selected-pressed-icon-color: hsl(var(--primary));--mdc-radio-unselected-icon-color: hsl(var(--input));--mdc-radio-unselected-focus-icon-color: hsl(var(--input));--mdc-radio-unselected-hover-icon-color: hsl(var(--input));--mdc-radio-unselected-pressed-icon-color: hsl(var(--input));--mat-radio-ripple-color: transparent;--mat-radio-checked-ripple-color: transparent}:host ::ng-deep .mat-mdc-radio-button .mdc-radio__background:before,:host ::ng-deep .mat-mdc-radio-button .mat-mdc-radio-ripple,:host ::ng-deep .mat-mdc-radio-button .mat-mdc-focus-indicator,:host ::ng-deep .mat-mdc-radio-button .mat-ripple{display:none}:host ::ng-deep .mat-mdc-radio-button .mat-mdc-radio-touch-target{display:none}:host ::ng-deep .mat-mdc-radio-button .mdc-radio{padding:0;margin:0;flex:0 0 1rem;width:1rem;height:1rem}:host ::ng-deep .mat-mdc-radio-button .mdc-radio__native-control{width:1rem;height:1rem;top:0;left:0}:host ::ng-deep .mat-mdc-radio-button .mdc-radio__background{width:1rem;height:1rem}:host ::ng-deep .mat-mdc-radio-button .mdc-form-field{gap:.5rem;color:hsl(var(--foreground));font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--text-sm--line-height)}:host ::ng-deep .mat-mdc-radio-button .mdc-label{padding:0;cursor:pointer}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RadioComponent, RadioGroupComponent };
+//# sourceMappingURL=ojiepermana-angular-component-radio.mjs.map

package/fesm2022/ojiepermana-angular-component-radio.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ojiepermana-angular-component-radio.mjs","sources":["../../../projects/angular/component/radio/src/lib/radio.component.ts","../../../projects/angular/component/radio/ojiepermana-angular-component-radio.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  forwardRef,\n  input,\n  output,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { MatRadioButton, MatRadioChange, MatRadioGroup } from '@angular/material/radio';\nimport { cn } from '@ojiepermana/angular/component/utils';\n\n@Component({\n  selector: 'ui-radio-group',\n  imports: [MatRadioGroup],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RadioGroupComponent), multi: true }],\n  template: `\n    <mat-radio-group\n      #ref\n      [class]=\"classes()\"\n      [value]=\"value()\"\n      [disabled]=\"disabled()\"\n      [name]=\"name()\"\n      (change)=\"handleChange($event)\">\n      <ng-content />\n    </mat-radio-group>\n  `,\n  styleUrl: './radio.component.css',\n})\nexport class RadioGroupComponent implements ControlValueAccessor {\n  readonly name = input<string>('');\n  readonly orientation = input<'horizontal' | 'vertical'>('vertical');\n  readonly class = input<string>('');\n\n  readonly valueChange = output<string>();\n\n  private readonly ref = viewChild.required<MatRadioGroup>('ref');\n\n  protected readonly value = signal<string | null>(null);\n  protected readonly disabled = signal<boolean>(false);\n  protected readonly classes = computed(() =>\n    cn(\n      'ui-radio-group grid gap-2',\n      this.orientation() === 'horizontal' ? 'grid-flow-col auto-cols-max' : '',\n      this.class(),\n    ),\n  );\n\n  private onChange: (v: string | null) => void = () => {};\n  private onTouched: () => void = () => {};\n\n  protected handleChange(e: MatRadioChange): void {\n    this.value.set(e.value);\n    this.onChange(e.value);\n    this.onTouched();\n    this.valueChange.emit(e.value);\n  }\n\n  focus(): void {\n    this.ref()._radios?.first?.focus();\n  }\n\n  writeValue(v: string | null): void {\n    this.value.set(v ?? null);\n  }\n  registerOnChange(fn: (v: string | null) => void): void {\n    this.onChange = fn;\n  }\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n  setDisabledState(d: boolean): void {\n    this.disabled.set(d);\n  }\n}\n\n@Component({\n  selector: 'ui-radio',\n  imports: [MatRadioButton],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    <mat-radio-button disableRipple [class]=\"classes()\" [value]=\"value()\" [disabled]=\"disabled()\">\n      <ng-content />\n    </mat-radio-button>\n  `,\n  styleUrl: './radio.component.css',\n})\nexport class RadioComponent {\n  readonly value = input.required<string>();\n  readonly disabled = input<boolean>(false);\n  readonly class = input<string>('');\n\n  protected readonly classes = computed(() => cn('ui-radio', this.class()));\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ojiepermana-angular-component-scroll-area.mjs

@@ -0,0 +1,48 @@
+import * as i0 from '@angular/core';
+import { input, numberAttribute, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { cn } from '@ojiepermana/angular/component/utils';
+
+/**
+ * Lightweight scroll area using native scrollbars styled via CSS.
+ * Fully accessible — real scrolling, keyboard, wheel, momentum.
+ */
+class ScrollAreaComponent {
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    viewportClass = input('', ...(ngDevMode ? [{ debugName: "viewportClass" }] : /* istanbul ignore next */ []));
+    viewportAriaLabel = input(null, ...(ngDevMode ? [{ debugName: "viewportAriaLabel" }] : /* istanbul ignore next */ []));
+    viewportTabIndex = input(0, { ...(ngDevMode ? { debugName: "viewportTabIndex" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    classes = computed(() => cn('relative overflow-hidden', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    viewportRole = computed(() => (this.viewportAriaLabel() ? 'region' : null), ...(ngDevMode ? [{ debugName: "viewportRole" }] : /* istanbul ignore next */ []));
+    viewportClasses = computed(() => cn('ui-scroll-area-viewport h-full w-full rounded-[inherit]', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring', this.viewportClass()), ...(ngDevMode ? [{ debugName: "viewportClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ScrollAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: ScrollAreaComponent, isStandalone: true, selector: "ui-scroll-area", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, viewportClass: { classPropertyName: "viewportClass", publicName: "viewportClass", isSignal: true, isRequired: false, transformFunction: null }, viewportAriaLabel: { classPropertyName: "viewportAriaLabel", publicName: "viewportAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, viewportTabIndex: { classPropertyName: "viewportTabIndex", publicName: "viewportTabIndex", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `
+    <div
+      [class]="viewportClasses()"
+      [attr.aria-label]="viewportAriaLabel()"
+      [attr.role]="viewportRole()"
+      [attr.tabindex]="viewportTabIndex()">
+      <ng-content />
+    </div>
+  `, isInline: true, styles: [":host{display:block;overflow:hidden;position:relative}.ui-scroll-area-viewport{overflow:auto;scrollbar-width:thin;scrollbar-color:var(--tw-scrollbar-thumb, hsl(var(--border))) var(--tw-scrollbar-track, transparent)}.ui-scroll-area-viewport::-webkit-scrollbar{width:10px;height:10px}.ui-scroll-area-viewport::-webkit-scrollbar-track{background:var(--tw-scrollbar-track, transparent)}.ui-scroll-area-viewport::-webkit-scrollbar-thumb{background:var(--tw-scrollbar-thumb, hsl(var(--border)));border:var(--border-width) solid transparent;background-clip:padding-box;border-radius:var(--radius-lg)}.ui-scroll-area-viewport::-webkit-scrollbar-thumb:hover{background:var(--ui-scrollbar-thumb-hover, var(--tw-scrollbar-thumb, hsl(var(--muted-foreground))));background-clip:padding-box}@media(forced-colors:active){.ui-scroll-area-viewport{scrollbar-width:auto;scrollbar-color:auto}.ui-scroll-area-viewport::-webkit-scrollbar-thumb{background:CanvasText;border-color:transparent}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ScrollAreaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-scroll-area', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class]': 'classes()',
+                    }, template: `
+    <div
+      [class]="viewportClasses()"
+      [attr.aria-label]="viewportAriaLabel()"
+      [attr.role]="viewportRole()"
+      [attr.tabindex]="viewportTabIndex()">
+      <ng-content />
+    </div>
+  `, styles: [":host{display:block;overflow:hidden;position:relative}.ui-scroll-area-viewport{overflow:auto;scrollbar-width:thin;scrollbar-color:var(--tw-scrollbar-thumb, hsl(var(--border))) var(--tw-scrollbar-track, transparent)}.ui-scroll-area-viewport::-webkit-scrollbar{width:10px;height:10px}.ui-scroll-area-viewport::-webkit-scrollbar-track{background:var(--tw-scrollbar-track, transparent)}.ui-scroll-area-viewport::-webkit-scrollbar-thumb{background:var(--tw-scrollbar-thumb, hsl(var(--border)));border:var(--border-width) solid transparent;background-clip:padding-box;border-radius:var(--radius-lg)}.ui-scroll-area-viewport::-webkit-scrollbar-thumb:hover{background:var(--ui-scrollbar-thumb-hover, var(--tw-scrollbar-thumb, hsl(var(--muted-foreground))));background-clip:padding-box}@media(forced-colors:active){.ui-scroll-area-viewport{scrollbar-width:auto;scrollbar-color:auto}.ui-scroll-area-viewport::-webkit-scrollbar-thumb{background:CanvasText;border-color:transparent}}\n"] }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], viewportClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewportClass", required: false }] }], viewportAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewportAriaLabel", required: false }] }], viewportTabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewportTabIndex", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ScrollAreaComponent };
+//# sourceMappingURL=ojiepermana-angular-component-scroll-area.mjs.map

package/fesm2022/ojiepermana-angular-component-scroll-area.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ojiepermana-angular-component-scroll-area.mjs","sources":["../../../projects/angular/component/scroll-area/src/lib/scroll-area.component.ts","../../../projects/angular/component/scroll-area/ojiepermana-angular-component-scroll-area.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input, numberAttribute } from '@angular/core';\nimport { cn } from '@ojiepermana/angular/component/utils';\n\n/**\n * Lightweight scroll area using native scrollbars styled via CSS.\n * Fully accessible — real scrolling, keyboard, wheel, momentum.\n */\n@Component({\n  selector: 'ui-scroll-area',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'classes()',\n  },\n  template: `\n    <div\n      [class]=\"viewportClasses()\"\n      [attr.aria-label]=\"viewportAriaLabel()\"\n      [attr.role]=\"viewportRole()\"\n      [attr.tabindex]=\"viewportTabIndex()\">\n      <ng-content />\n    </div>\n  `,\n  styles: [\n    `\n      :host {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n      .ui-scroll-area-viewport {\n        overflow: auto;\n        scrollbar-width: thin;\n        scrollbar-color: var(--tw-scrollbar-thumb, hsl(var(--border))) var(--tw-scrollbar-track, transparent);\n      }\n      .ui-scroll-area-viewport::-webkit-scrollbar {\n        width: 10px;\n        height: 10px;\n      }\n      .ui-scroll-area-viewport::-webkit-scrollbar-track {\n        background: var(--tw-scrollbar-track, transparent);\n      }\n      .ui-scroll-area-viewport::-webkit-scrollbar-thumb {\n        background: var(--tw-scrollbar-thumb, hsl(var(--border)));\n        border: var(--border-width) solid transparent;\n        background-clip: padding-box;\n        border-radius: var(--radius-lg);\n      }\n      .ui-scroll-area-viewport::-webkit-scrollbar-thumb:hover {\n        background: var(--ui-scrollbar-thumb-hover, var(--tw-scrollbar-thumb, hsl(var(--muted-foreground))));\n        background-clip: padding-box;\n      }\n      @media (forced-colors: active) {\n        .ui-scroll-area-viewport {\n          scrollbar-width: auto;\n          scrollbar-color: auto;\n        }\n        .ui-scroll-area-viewport::-webkit-scrollbar-thumb {\n          background: CanvasText;\n          border-color: transparent;\n        }\n      }\n    `,\n  ],\n})\nexport class ScrollAreaComponent {\n  readonly class = input<string>('');\n  readonly viewportClass = input<string>('');\n  readonly viewportAriaLabel = input<string | null>(null);\n  readonly viewportTabIndex = input(0, { transform: numberAttribute });\n  protected readonly classes = computed(() => cn('relative overflow-hidden', this.class()));\n  protected readonly viewportRole = computed(() => (this.viewportAriaLabel() ? 'region' : null));\n  protected readonly viewportClasses = computed(() =>\n    cn(\n      'ui-scroll-area-viewport h-full w-full rounded-[inherit]',\n      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring',\n      this.viewportClass(),\n    ),\n  );\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;AAGA;;;AAGG;MA0DU,mBAAmB,CAAA;AACrB,IAAA,KAAK,GAAG,KAAK,CAAS,EAAE,4EAAC;AACzB,IAAA,aAAa,GAAG,KAAK,CAAS,EAAE,oFAAC;AACjC,IAAA,iBAAiB,GAAG,KAAK,CAAgB,IAAI,wFAAC;IAC9C,gBAAgB,GAAG,KAAK,CAAC,CAAC,wFAAI,SAAS,EAAE,eAAe,EAAA,CAAG;AACjD,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,0BAA0B,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,8EAAC;IACtE,YAAY,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,iBAAiB,EAAE,GAAG,QAAQ,GAAG,IAAI,CAAC,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,cAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAC;AAC3E,IAAA,eAAe,GAAG,QAAQ,CAAC,MAC5C,EAAE,CACA,yDAAyD,EACzD,kGAAkG,EAClG,IAAI,CAAC,aAAa,EAAE,CACrB,sFACF;wGAbU,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAnB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,mBAAmB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,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,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,UAAA,EAAA,mBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,gBAAA,EAAA,EAAA,iBAAA,EAAA,kBAAA,EAAA,UAAA,EAAA,kBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,WAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAnDpB;;;;;;;;AAQT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,+8BAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FA2CU,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAzD/B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,gBAAgB,EAAA,eAAA,EACT,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC;AACJ,wBAAA,SAAS,EAAE,WAAW;qBACvB,EAAA,QAAA,EACS;;;;;;;;AAQT,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,+8BAAA,CAAA,EAAA;;;ACrBH;;AAEG;;;;"}

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

@@ -0,0 +1,131 @@
+import * as i0 from '@angular/core';
+import { input, output, viewChild, signal, computed, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { MatFormField } from '@angular/material/form-field';
+import { MatSelect } from '@angular/material/select';
+import { cn } from '@ojiepermana/angular/component/utils';
+import { MatOption } from '@angular/material/core';
+
+class SelectComponent {
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    ariaLabelledby = input(null, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    valueChange = output();
+    openedChange = output();
+    ref = viewChild.required('ref');
+    value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('ui-select-field w-full', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    onChange = () => { };
+    onTouched = () => { };
+    handleChange(e) {
+        this.value.set(e.value);
+        this.onChange(e.value);
+        this.onTouched();
+        this.valueChange.emit(e.value);
+    }
+    open() {
+        this.ref().open();
+    }
+    close() {
+        this.ref().close();
+    }
+    focus() {
+        this.ref().focus();
+    }
+    writeValue(v) {
+        this.value.set(v);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(d) {
+        this.disabled.set(d);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.14", type: SelectComponent, isStandalone: true, selector: "ui-select", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", 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 }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", openedChange: "openedChange" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SelectComponent), multi: true }], viewQueries: [{ propertyName: "ref", first: true, predicate: ["ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <mat-form-field [class]="classes()" subscriptSizing="dynamic">
+      <mat-select
+        #ref
+        disableRipple
+        panelClass="ui-select-panel"
+        [value]="value()"
+        [disabled]="disabled()"
+        [multiple]="multiple()"
+        [placeholder]="placeholder()"
+        [required]="required()"
+        [attr.aria-label]="ariaLabel()"
+        [attr.aria-labelledby]="ariaLabelledby()"
+        (selectionChange)="handleChange($event)"
+        (openedChange)="openedChange.emit($event)">
+        <ng-content />
+      </mat-select>
+    </mat-form-field>
+  `, isInline: true, styles: [":host{display:block;width:100%}:host ::ng-deep .mat-mdc-form-field{--mat-form-field-container-height: 2.25rem;--mat-form-field-container-vertical-padding: 0;--mat-form-field-filled-with-label-container-padding-top: 0;--mat-form-field-filled-with-label-container-padding-bottom: 0;--mdc-outlined-text-field-container-shape: calc(var(--radius) - .125rem);--mdc-outlined-text-field-outline-color: hsl(var(--input));--mdc-outlined-text-field-hover-outline-color: hsl(var(--input));--mdc-outlined-text-field-focus-outline-color: hsl(var(--ring));--mdc-outlined-text-field-input-text-color: hsl(var(--foreground));--mdc-outlined-text-field-label-text-color: hsl(var(--muted-foreground));--mdc-outlined-text-field-hover-label-text-color: hsl(var(--muted-foreground));--mdc-outlined-text-field-focus-label-text-color: hsl(var(--muted-foreground));--mdc-outlined-text-field-disabled-outline-color: hsl(var(--input) / .5);--mdc-outlined-text-field-disabled-input-text-color: hsl(var(--muted-foreground));font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--text-sm--line-height);width:100%}:host ::ng-deep .mat-mdc-text-field-wrapper{background:transparent;padding:0 .75rem}:host ::ng-deep .mat-mdc-form-field-infix{min-height:2.25rem;padding:.5rem 0;width:auto}:host ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}:host ::ng-deep .mdc-floating-label,:host ::ng-deep .mat-mdc-floating-label,:host ::ng-deep .mdc-notched-outline__notch .mdc-floating-label{display:none}:host ::ng-deep .mdc-notched-outline__notch{padding:0;border-left:none;border-right:none}:host ::ng-deep .mat-mdc-select-value{color:hsl(var(--foreground))}:host ::ng-deep .mat-mdc-select-placeholder{color:hsl(var(--muted-foreground))}:host ::ng-deep .mat-mdc-select-arrow{color:hsl(var(--muted-foreground))}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-select', imports: [MatFormField, MatSelect], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SelectComponent), multi: true }], template: `
+    <mat-form-field [class]="classes()" subscriptSizing="dynamic">
+      <mat-select
+        #ref
+        disableRipple
+        panelClass="ui-select-panel"
+        [value]="value()"
+        [disabled]="disabled()"
+        [multiple]="multiple()"
+        [placeholder]="placeholder()"
+        [required]="required()"
+        [attr.aria-label]="ariaLabel()"
+        [attr.aria-labelledby]="ariaLabelledby()"
+        (selectionChange)="handleChange($event)"
+        (openedChange)="openedChange.emit($event)">
+        <ng-content />
+      </mat-select>
+    </mat-form-field>
+  `, styles: [":host{display:block;width:100%}:host ::ng-deep .mat-mdc-form-field{--mat-form-field-container-height: 2.25rem;--mat-form-field-container-vertical-padding: 0;--mat-form-field-filled-with-label-container-padding-top: 0;--mat-form-field-filled-with-label-container-padding-bottom: 0;--mdc-outlined-text-field-container-shape: calc(var(--radius) - .125rem);--mdc-outlined-text-field-outline-color: hsl(var(--input));--mdc-outlined-text-field-hover-outline-color: hsl(var(--input));--mdc-outlined-text-field-focus-outline-color: hsl(var(--ring));--mdc-outlined-text-field-input-text-color: hsl(var(--foreground));--mdc-outlined-text-field-label-text-color: hsl(var(--muted-foreground));--mdc-outlined-text-field-hover-label-text-color: hsl(var(--muted-foreground));--mdc-outlined-text-field-focus-label-text-color: hsl(var(--muted-foreground));--mdc-outlined-text-field-disabled-outline-color: hsl(var(--input) / .5);--mdc-outlined-text-field-disabled-input-text-color: hsl(var(--muted-foreground));font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--text-sm--line-height);width:100%}:host ::ng-deep .mat-mdc-text-field-wrapper{background:transparent;padding:0 .75rem}:host ::ng-deep .mat-mdc-form-field-infix{min-height:2.25rem;padding:.5rem 0;width:auto}:host ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}:host ::ng-deep .mdc-floating-label,:host ::ng-deep .mat-mdc-floating-label,:host ::ng-deep .mdc-notched-outline__notch .mdc-floating-label{display:none}:host ::ng-deep .mdc-notched-outline__notch{padding:0;border-left:none;border-right:none}:host ::ng-deep .mat-mdc-select-value{color:hsl(var(--foreground))}:host ::ng-deep .mat-mdc-select-placeholder{color:hsl(var(--muted-foreground))}:host ::ng-deep .mat-mdc-select-arrow{color:hsl(var(--muted-foreground))}\n"] }]
+        }], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", 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 }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }], ref: [{ type: i0.ViewChild, args: ['ref', { isSignal: true }] }] } });
+
+/**
+ * Option for `<ui-select>`. Wraps `mat-option` so the underlying `mat-select`
+ * can still discover it via `@ContentChildren(MatOption, { descendants: true })`.
+ */
+class OptionComponent {
+    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('contents', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: OptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: OptionComponent, isStandalone: true, selector: "ui-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `
+    <mat-option [value]="value()" [disabled]="disabled()">
+      <ng-content />
+    </mat-option>
+  `, isInline: true, dependencies: [{ kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: OptionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-option',
+                    imports: [MatOption],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { '[class]': 'classes()' },
+                    template: `
+    <mat-option [value]="value()" [disabled]="disabled()">
+      <ng-content />
+    </mat-option>
+  `,
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { OptionComponent, SelectComponent };
+//# sourceMappingURL=ojiepermana-angular-component-select.mjs.map