@ojiepermana/angular-component 22.0.27

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

@@ -0,0 +1,297 @@
+import * as i0 from '@angular/core';
+import { inject, effect, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from '@angular/cdk/overlay';
+import { OverlayModule } from '@angular/cdk/overlay';
+import { MAT_OPTION_PARENT_COMPONENT, MatOption, MatPseudoCheckbox, MatRipple } from '@angular/material/core';
+import { MatSelect } from '@angular/material/select';
+import { FormFieldContext } from '@ojiepermana/angular-component/form';
+
+/**
+ * Custom shadcn-styled select.
+ *
+ * IMPORTANT: this MUST extend `MatSelect` (with a copied template) rather than
+ * wrap `<mat-select>` in its own view. `mat-select` projects its options through
+ * an `<ng-content>` that lives inside the deferred `cdk-connected-overlay`
+ * `<ng-template>`. A wrapper that re-projects options into mat-select via its own
+ * `<ng-content>` creates a *double* projection into that deferred slot, and the
+ * projected options are never instantiated — `@ContentChildren(MatOption)` finds
+ * zero, the trigger shows the placeholder instead of the bound value, and
+ * `_canOpen()` refuses to open the panel. By BEING the mat-select, options are
+ * direct (single-projection) content and register normally.
+ *
+ * The full MatSelect public API (`value`, `multiple`, `required`, `disabled`,
+ * `placeholder`, `aria-*`, `open()/close()/focus()`, `selectionChange`,
+ * `openedChange`, `valueChange`, and `ControlValueAccessor` for `ngModel`/reactive
+ * forms) is inherited. Only the selector, template, styles, providers, and the
+ * optional `<FormField>` bridge are declared here.
+ */
+class SelectComponent extends MatSelect {
+    /** Optional bridge to an enclosing edsis `<FormField>` (validation + a11y). */
+    formFieldContext = inject(FormFieldContext, { optional: true });
+    constructor() {
+        super();
+        const ctx = this.formFieldContext;
+        if (ctx) {
+            // Mirror the FormField invalid state onto mat-select's errorState.
+            this.errorStateMatcher = { isErrorState: () => ctx.invalid() };
+            // Link the FormField's description/message ids for screen readers.
+            effect(() => {
+                const describedBy = ctx.describedBy();
+                if (describedBy) {
+                    this.userAriaDescribedBy = describedBy;
+                }
+            });
+        }
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        // Register the bound control so <FormField> can derive invalid/aria state.
+        this.formFieldContext?.control.set(this.ngControl?.control ?? null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: SelectComponent, isStandalone: true, selector: "SelectField", host: { attributes: { "role": "combobox", "aria-haspopup": "listbox" }, classAttribute: "mat-mdc-select" }, providers: [
+            { provide: MatSelect, useExisting: forwardRef(() => SelectComponent) },
+            { provide: MAT_OPTION_PARENT_COMPONENT, useExisting: forwardRef(() => SelectComponent) },
+        ], exportAs: ["matSelect"], usesInheritance: true, ngImport: i0, template: `
+    <div
+      cdk-overlay-origin
+      class="mat-mdc-select-trigger"
+      (click)="open()"
+      #fallbackOverlayOrigin="cdkOverlayOrigin"
+      #trigger>
+      <div class="mat-mdc-select-value" [attr.id]="_valueId">
+        @if (empty) {
+          <span class="mat-mdc-select-placeholder mat-mdc-select-min-line">{{ placeholder }}</span>
+        } @else {
+          <span class="mat-mdc-select-value-text">
+            @if (customTrigger) {
+              <ng-content select="mat-select-trigger"></ng-content>
+            } @else {
+              <span class="mat-mdc-select-min-line">{{ triggerValue }}</span>
+            }
+          </span>
+        }
+      </div>
+
+      <div class="mat-mdc-select-arrow-wrapper">
+        <div class="mat-mdc-select-arrow">
+          <!-- Use an inline SVG, because it works better than a CSS triangle in high contrast mode. -->
+          <svg viewBox="0 0 24 24" width="24px" height="24px" focusable="false" aria-hidden="true">
+            <path d="M7 10l5 5 5-5z" />
+          </svg>
+        </div>
+      </div>
+    </div>
+
+    <ng-template
+      cdk-connected-overlay
+      cdkConnectedOverlayHasBackdrop
+      cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
+      [cdkConnectedOverlayDisableClose]="true"
+      [cdkConnectedOverlayPanelClass]="_overlayPanelClass"
+      [cdkConnectedOverlayScrollStrategy]="_scrollStrategy"
+      [cdkConnectedOverlayOrigin]="_preferredOverlayOrigin || fallbackOverlayOrigin"
+      [cdkConnectedOverlayPositions]="_positions"
+      [cdkConnectedOverlayWidth]="_overlayWidth"
+      [cdkConnectedOverlayFlexibleDimensions]="true"
+      [cdkConnectedOverlayUsePopover]="_popoverLocation"
+      (detach)="close()"
+      (backdropClick)="close()"
+      (overlayKeydown)="_handleOverlayKeydown($event)">
+      <!-- mat-undefined is weird, but we were using it internally -->
+      <div
+        #panel
+        role="listbox"
+        tabindex="-1"
+        class="mat-mdc-select-panel mdc-menu-surface mdc-menu-surface--open select-panel"
+        [class]="panelClass"
+        [class.mat-select-panel-animations-enabled]="!_animationsDisabled"
+        [class.mat-primary]="_parentFormField?.color === 'primary'"
+        [class.mat-accent]="_parentFormField?.color === 'accent'"
+        [class.mat-warn]="_parentFormField?.color === 'warn'"
+        [class.mat-undefined]="!_parentFormField?.color"
+        [attr.id]="id + '-panel'"
+        [attr.aria-multiselectable]="multiple"
+        [attr.aria-label]="ariaLabel || null"
+        [attr.aria-labelledby]="_getPanelAriaLabelledby()"
+        (keydown)="_handleKeydown($event)">
+        <ng-content></ng-content>
+      </div>
+    </ng-template>
+  `, isInline: true, styles: ["@keyframes _mat-select-enter{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:none}}@keyframes _mat-select-exit{0%{opacity:1}to{opacity:0}}.mat-mdc-select{display:inline-block;width:100%;outline:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:var(--mat-select-enabled-trigger-text-color, var(--mat-sys-on-surface));font-family:var(--mat-select-trigger-text-font, var(--mat-sys-body-large-font));line-height:var(--mat-select-trigger-text-line-height, var(--mat-sys-body-large-line-height));font-size:var(--mat-select-trigger-text-size, var(--mat-sys-body-large-size));font-weight:var(--mat-select-trigger-text-weight, var(--mat-sys-body-large-weight));letter-spacing:var(--mat-select-trigger-text-tracking, var(--mat-sys-body-large-tracking))}div.mat-mdc-select-panel{box-shadow:var( --mat-select-container-elevation-shadow, 0px 3px 1px -2px rgba(0, 0, 0, .2), 0px 2px 2px 0px rgba(0, 0, 0, .14), 0px 1px 5px 0px rgba(0, 0, 0, .12) )}.mat-mdc-select-disabled,.mat-mdc-select-disabled .mat-mdc-select-placeholder{color:var(--mat-select-disabled-trigger-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mat-mdc-select-trigger{display:inline-flex;align-items:center;cursor:pointer;position:relative;box-sizing:border-box;width:100%}.mat-mdc-select-disabled .mat-mdc-select-trigger{-webkit-user-select:none;user-select:none;cursor:default}.mat-mdc-select-value{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mat-mdc-select-value-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mat-mdc-select-arrow-wrapper{height:24px;flex-shrink:0;display:inline-flex;align-items:center}.mat-mdc-select-arrow{width:10px;height:5px;position:relative;color:var(--mat-select-enabled-arrow-color, var(--mat-sys-on-surface-variant))}.mat-select-open .mat-mdc-select-arrow{transform:rotate(180deg)}.mat-mdc-select-arrow svg{fill:currentColor;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@media(forced-colors:active){.mat-mdc-select-arrow svg{fill:CanvasText}.mat-mdc-select-disabled .mat-mdc-select-arrow svg{fill:GrayText}}div.mat-mdc-select-panel{width:100%;max-height:275px;outline:0;overflow:auto;padding:8px 0;box-sizing:border-box;transform-origin:top center;border-radius:0 0 4px 4px;position:relative;background-color:var(--mat-select-panel-background-color, var(--mat-sys-surface-container))}.mat-mdc-select-panel-above div.mat-mdc-select-panel{border-radius:4px 4px 0 0;transform-origin:bottom center}@media(forced-colors:active){div.mat-mdc-select-panel{outline:solid 1px}}.mat-select-panel-animations-enabled{animation:_mat-select-enter .12s cubic-bezier(0,0,.2,1)}.mat-select-panel-animations-enabled.mat-select-panel-exit{animation:_mat-select-exit .1s linear}.mat-mdc-select-placeholder{transition:color .4s .1333333333333s cubic-bezier(.25,.8,.25,1);color:var(--mat-select-placeholder-text-color, var(--mat-sys-on-surface-variant))}._mat-animation-noopable .mat-mdc-select-placeholder{transition:none}.mat-mdc-select-min-line:empty:before{content:\" \";white-space:pre;width:1px;display:inline-block;visibility:hidden}selectfield.mat-mdc-select{display:flex;align-items:center;box-sizing:border-box;width:100%;height:2.25rem;padding:0 .75rem;border:1px solid hsl(var(--input));border-radius:calc(var(--radius) - .125rem);background:transparent;color:hsl(var(--foreground));font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--text-sm--line-height);cursor:pointer}selectfield.mat-mdc-select:focus,selectfield.mat-mdc-select.mat-select-open{outline:none;border-color:hsl(var(--ring));box-shadow:0 0 0 1px hsl(var(--ring))}selectfield.mat-mdc-select-disabled{cursor:not-allowed;opacity:.5;background:hsl(var(--muted) / .4)}selectfield.mat-mdc-select-invalid{border-color:hsl(var(--destructive))}selectfield .mat-mdc-select-value{color:hsl(var(--foreground))}selectfield .mat-mdc-select-placeholder{color:hsl(var(--muted-foreground))}selectfield .mat-mdc-select-arrow{color:hsl(var(--muted-foreground))}.mat-mdc-select-panel.select-panel{--mat-select-panel-background-color: hsl(var(--popover));background-color:hsl(var(--popover));color:hsl(var(--popover-foreground));border:1px solid hsl(var(--border));border-radius:var(--radius);box-shadow:var(--shadow-md, 0 8px 18px -14px hsl(var(--foreground) / .24));padding:.25rem}.select-panel .mat-mdc-option{--mat-option-label-text-color: hsl(var(--popover-foreground));--mat-option-label-text-font: var(--font-sans);--mat-option-label-text-size: var(--text-sm);--mat-option-label-text-line-height: var(--text-sm--line-height);--mat-option-label-text-weight: 400;--mat-option-hover-state-layer-color: hsl(var(--accent));--mat-option-focus-state-layer-color: hsl(var(--accent));--mat-option-selected-state-layer-color: hsl(var(--accent));--mat-option-selected-state-label-text-color: hsl(var(--accent-foreground));min-height:2.25rem;border-radius:calc(var(--radius) - .125rem)}.select-panel .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) .mdc-list-item__primary-text{color:hsl(var(--accent-foreground))}.select-panel .mat-mdc-optgroup-label{--mat-optgroup-label-text-color: hsl(var(--muted-foreground));--mat-optgroup-label-text-font: var(--font-sans);--mat-optgroup-label-text-size: var(--text-xs);min-height:1.75rem}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: SelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'SelectField', exportAs: 'matSelect', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [OverlayModule], host: {
+                        class: 'mat-mdc-select',
+                        role: 'combobox',
+                        'aria-haspopup': 'listbox',
+                    }, providers: [
+                        { provide: MatSelect, useExisting: forwardRef(() => SelectComponent) },
+                        { provide: MAT_OPTION_PARENT_COMPONENT, useExisting: forwardRef(() => SelectComponent) },
+                    ], template: `
+    <div
+      cdk-overlay-origin
+      class="mat-mdc-select-trigger"
+      (click)="open()"
+      #fallbackOverlayOrigin="cdkOverlayOrigin"
+      #trigger>
+      <div class="mat-mdc-select-value" [attr.id]="_valueId">
+        @if (empty) {
+          <span class="mat-mdc-select-placeholder mat-mdc-select-min-line">{{ placeholder }}</span>
+        } @else {
+          <span class="mat-mdc-select-value-text">
+            @if (customTrigger) {
+              <ng-content select="mat-select-trigger"></ng-content>
+            } @else {
+              <span class="mat-mdc-select-min-line">{{ triggerValue }}</span>
+            }
+          </span>
+        }
+      </div>
+
+      <div class="mat-mdc-select-arrow-wrapper">
+        <div class="mat-mdc-select-arrow">
+          <!-- Use an inline SVG, because it works better than a CSS triangle in high contrast mode. -->
+          <svg viewBox="0 0 24 24" width="24px" height="24px" focusable="false" aria-hidden="true">
+            <path d="M7 10l5 5 5-5z" />
+          </svg>
+        </div>
+      </div>
+    </div>
+
+    <ng-template
+      cdk-connected-overlay
+      cdkConnectedOverlayHasBackdrop
+      cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
+      [cdkConnectedOverlayDisableClose]="true"
+      [cdkConnectedOverlayPanelClass]="_overlayPanelClass"
+      [cdkConnectedOverlayScrollStrategy]="_scrollStrategy"
+      [cdkConnectedOverlayOrigin]="_preferredOverlayOrigin || fallbackOverlayOrigin"
+      [cdkConnectedOverlayPositions]="_positions"
+      [cdkConnectedOverlayWidth]="_overlayWidth"
+      [cdkConnectedOverlayFlexibleDimensions]="true"
+      [cdkConnectedOverlayUsePopover]="_popoverLocation"
+      (detach)="close()"
+      (backdropClick)="close()"
+      (overlayKeydown)="_handleOverlayKeydown($event)">
+      <!-- mat-undefined is weird, but we were using it internally -->
+      <div
+        #panel
+        role="listbox"
+        tabindex="-1"
+        class="mat-mdc-select-panel mdc-menu-surface mdc-menu-surface--open select-panel"
+        [class]="panelClass"
+        [class.mat-select-panel-animations-enabled]="!_animationsDisabled"
+        [class.mat-primary]="_parentFormField?.color === 'primary'"
+        [class.mat-accent]="_parentFormField?.color === 'accent'"
+        [class.mat-warn]="_parentFormField?.color === 'warn'"
+        [class.mat-undefined]="!_parentFormField?.color"
+        [attr.id]="id + '-panel'"
+        [attr.aria-multiselectable]="multiple"
+        [attr.aria-label]="ariaLabel || null"
+        [attr.aria-labelledby]="_getPanelAriaLabelledby()"
+        (keydown)="_handleKeydown($event)">
+        <ng-content></ng-content>
+      </div>
+    </ng-template>
+  `, styles: ["@keyframes _mat-select-enter{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:none}}@keyframes _mat-select-exit{0%{opacity:1}to{opacity:0}}.mat-mdc-select{display:inline-block;width:100%;outline:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:var(--mat-select-enabled-trigger-text-color, var(--mat-sys-on-surface));font-family:var(--mat-select-trigger-text-font, var(--mat-sys-body-large-font));line-height:var(--mat-select-trigger-text-line-height, var(--mat-sys-body-large-line-height));font-size:var(--mat-select-trigger-text-size, var(--mat-sys-body-large-size));font-weight:var(--mat-select-trigger-text-weight, var(--mat-sys-body-large-weight));letter-spacing:var(--mat-select-trigger-text-tracking, var(--mat-sys-body-large-tracking))}div.mat-mdc-select-panel{box-shadow:var( --mat-select-container-elevation-shadow, 0px 3px 1px -2px rgba(0, 0, 0, .2), 0px 2px 2px 0px rgba(0, 0, 0, .14), 0px 1px 5px 0px rgba(0, 0, 0, .12) )}.mat-mdc-select-disabled,.mat-mdc-select-disabled .mat-mdc-select-placeholder{color:var(--mat-select-disabled-trigger-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mat-mdc-select-trigger{display:inline-flex;align-items:center;cursor:pointer;position:relative;box-sizing:border-box;width:100%}.mat-mdc-select-disabled .mat-mdc-select-trigger{-webkit-user-select:none;user-select:none;cursor:default}.mat-mdc-select-value{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mat-mdc-select-value-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mat-mdc-select-arrow-wrapper{height:24px;flex-shrink:0;display:inline-flex;align-items:center}.mat-mdc-select-arrow{width:10px;height:5px;position:relative;color:var(--mat-select-enabled-arrow-color, var(--mat-sys-on-surface-variant))}.mat-select-open .mat-mdc-select-arrow{transform:rotate(180deg)}.mat-mdc-select-arrow svg{fill:currentColor;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@media(forced-colors:active){.mat-mdc-select-arrow svg{fill:CanvasText}.mat-mdc-select-disabled .mat-mdc-select-arrow svg{fill:GrayText}}div.mat-mdc-select-panel{width:100%;max-height:275px;outline:0;overflow:auto;padding:8px 0;box-sizing:border-box;transform-origin:top center;border-radius:0 0 4px 4px;position:relative;background-color:var(--mat-select-panel-background-color, var(--mat-sys-surface-container))}.mat-mdc-select-panel-above div.mat-mdc-select-panel{border-radius:4px 4px 0 0;transform-origin:bottom center}@media(forced-colors:active){div.mat-mdc-select-panel{outline:solid 1px}}.mat-select-panel-animations-enabled{animation:_mat-select-enter .12s cubic-bezier(0,0,.2,1)}.mat-select-panel-animations-enabled.mat-select-panel-exit{animation:_mat-select-exit .1s linear}.mat-mdc-select-placeholder{transition:color .4s .1333333333333s cubic-bezier(.25,.8,.25,1);color:var(--mat-select-placeholder-text-color, var(--mat-sys-on-surface-variant))}._mat-animation-noopable .mat-mdc-select-placeholder{transition:none}.mat-mdc-select-min-line:empty:before{content:\" \";white-space:pre;width:1px;display:inline-block;visibility:hidden}selectfield.mat-mdc-select{display:flex;align-items:center;box-sizing:border-box;width:100%;height:2.25rem;padding:0 .75rem;border:1px solid hsl(var(--input));border-radius:calc(var(--radius) - .125rem);background:transparent;color:hsl(var(--foreground));font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--text-sm--line-height);cursor:pointer}selectfield.mat-mdc-select:focus,selectfield.mat-mdc-select.mat-select-open{outline:none;border-color:hsl(var(--ring));box-shadow:0 0 0 1px hsl(var(--ring))}selectfield.mat-mdc-select-disabled{cursor:not-allowed;opacity:.5;background:hsl(var(--muted) / .4)}selectfield.mat-mdc-select-invalid{border-color:hsl(var(--destructive))}selectfield .mat-mdc-select-value{color:hsl(var(--foreground))}selectfield .mat-mdc-select-placeholder{color:hsl(var(--muted-foreground))}selectfield .mat-mdc-select-arrow{color:hsl(var(--muted-foreground))}.mat-mdc-select-panel.select-panel{--mat-select-panel-background-color: hsl(var(--popover));background-color:hsl(var(--popover));color:hsl(var(--popover-foreground));border:1px solid hsl(var(--border));border-radius:var(--radius);box-shadow:var(--shadow-md, 0 8px 18px -14px hsl(var(--foreground) / .24));padding:.25rem}.select-panel .mat-mdc-option{--mat-option-label-text-color: hsl(var(--popover-foreground));--mat-option-label-text-font: var(--font-sans);--mat-option-label-text-size: var(--text-sm);--mat-option-label-text-line-height: var(--text-sm--line-height);--mat-option-label-text-weight: 400;--mat-option-hover-state-layer-color: hsl(var(--accent));--mat-option-focus-state-layer-color: hsl(var(--accent));--mat-option-selected-state-layer-color: hsl(var(--accent));--mat-option-selected-state-label-text-color: hsl(var(--accent-foreground));min-height:2.25rem;border-radius:calc(var(--radius) - .125rem)}.select-panel .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) .mdc-list-item__primary-text{color:hsl(var(--accent-foreground))}.select-panel .mat-mdc-optgroup-label{--mat-optgroup-label-text-color: hsl(var(--muted-foreground));--mat-optgroup-label-text-font: var(--font-sans);--mat-optgroup-label-text-size: var(--text-xs);min-height:1.75rem}\n"] }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Option for `<SelectField>`.
+ *
+ * IMPORTANT: this MUST extend `MatOption` rather than wrap it in a child view.
+ * `mat-select` discovers options via `@ContentChildren(MatOption, { descendants: true })`,
+ * and Angular content queries do NOT cross into a child component's view. A
+ * previous version rendered `<mat-option>` inside this component's template, so
+ * mat-select found zero options — the trigger showed its placeholder instead of
+ * the bound value and `MatSelect._canOpen()` refused to open (it returns false
+ * when `options.length === 0`). By extending `MatOption` and re-providing it,
+ * the `<SelectItem>` element IS a real option that the query matches, working
+ * both at top level and nested inside `<mat-optgroup>`.
+ *
+ * Inputs (`value`, `disabled`, `id`), outputs, host bindings, and the internal
+ * `#text` view query are inherited from `MatOption`; only the template, styles,
+ * and the self-provider below are declared here. The template/styles mirror
+ * Material's own option so rendering stays pixel-identical.
+ */
+class OptionComponent extends MatOption {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: OptionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: OptionComponent, isStandalone: true, selector: "SelectItem", providers: [{ provide: MatOption, useExisting: forwardRef(() => OptionComponent) }], exportAs: ["matOption"], usesInheritance: true, ngImport: i0, template: `
+    @if (multiple) {
+      <mat-pseudo-checkbox
+        class="mat-mdc-option-pseudo-checkbox"
+        [disabled]="disabled"
+        [state]="selected ? 'checked' : 'unchecked'"
+        aria-hidden="true" />
+    }
+
+    <ng-content select="mat-icon" />
+
+    <span class="mdc-list-item__primary-text" #text><ng-content /></span>
+
+    @if (!multiple && selected && !hideSingleSelectionIndicator) {
+      <mat-pseudo-checkbox
+        class="mat-mdc-option-pseudo-checkbox"
+        [disabled]="disabled"
+        state="checked"
+        aria-hidden="true"
+        appearance="minimal" />
+    }
+
+    @if (group && group._inert) {
+      <span class="cdk-visually-hidden">({{ group.label }})</span>
+    }
+
+    <div
+      class="mat-mdc-option-ripple mat-focus-indicator"
+      aria-hidden="true"
+      mat-ripple
+      [matRippleTrigger]="_getHostElement()"
+      [matRippleDisabled]="disabled || disableRipple"></div>
+  `, isInline: true, styles: [".mat-mdc-option{-webkit-user-select:none;user-select:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:flex;position:relative;align-items:center;justify-content:flex-start;overflow:hidden;min-height:48px;padding:0 16px;cursor:pointer;-webkit-tap-highlight-color:transparent;color:var(--mat-option-label-text-color, var(--mat-sys-on-surface));font-family:var(--mat-option-label-text-font, var(--mat-sys-label-large-font));line-height:var(--mat-option-label-text-line-height, var(--mat-sys-label-large-line-height));font-size:var(--mat-option-label-text-size, var(--mat-sys-body-large-size));letter-spacing:var(--mat-option-label-text-tracking, var(--mat-sys-label-large-tracking));font-weight:var(--mat-option-label-text-weight, var(--mat-sys-body-large-weight))}.mat-mdc-option:hover:not(.mdc-list-item--disabled){background-color:var( --mat-option-hover-state-layer-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent) )}.mat-mdc-option:focus.mdc-list-item,.mat-mdc-option.mat-mdc-option-active.mdc-list-item{background-color:var( --mat-option-focus-state-layer-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-focus-state-layer-opacity) * 100%), transparent) );outline:0}.mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-active,.mat-mdc-option-multiple,:focus,:hover){background-color:var(--mat-option-selected-state-layer-color, var(--mat-sys-secondary-container))}.mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-active,.mat-mdc-option-multiple,:focus,:hover) .mdc-list-item__primary-text{color:var(--mat-option-selected-state-label-text-color, var(--mat-sys-on-secondary-container))}.mat-mdc-option .mat-pseudo-checkbox{--mat-pseudo-checkbox-minimal-selected-checkmark-color: var( --mat-option-selected-state-label-text-color, var(--mat-sys-on-secondary-container) )}.mat-mdc-option.mdc-list-item{align-items:center;background:transparent}.mat-mdc-option.mdc-list-item--disabled{cursor:default;pointer-events:none}.mat-mdc-option.mdc-list-item--disabled .mat-mdc-option-pseudo-checkbox,.mat-mdc-option.mdc-list-item--disabled .mdc-list-item__primary-text,.mat-mdc-option.mdc-list-item--disabled>mat-icon{opacity:.38}.mat-mdc-optgroup .mat-mdc-option:not(.mat-mdc-option-multiple){padding-left:32px}[dir=rtl] .mat-mdc-optgroup .mat-mdc-option:not(.mat-mdc-option-multiple){padding-left:16px;padding-right:32px}.mat-mdc-option .mat-icon,.mat-mdc-option .mat-pseudo-checkbox-full{margin-right:16px;flex-shrink:0}[dir=rtl] .mat-mdc-option .mat-icon,[dir=rtl] .mat-mdc-option .mat-pseudo-checkbox-full{margin-right:0;margin-left:16px}.mat-mdc-option .mat-pseudo-checkbox-minimal{margin-left:16px;flex-shrink:0}[dir=rtl] .mat-mdc-option .mat-pseudo-checkbox-minimal{margin-right:16px;margin-left:0}.mat-mdc-option .mat-mdc-option-ripple{inset:0;position:absolute;pointer-events:none}.mat-mdc-option .mdc-list-item__primary-text{white-space:normal;font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;font-family:inherit;text-decoration:inherit;text-transform:inherit;margin-right:auto}[dir=rtl] .mat-mdc-option .mdc-list-item__primary-text{margin-right:0;margin-left:auto}@media(forced-colors:active){.mat-mdc-option.mdc-list-item--selected:not(:has(.mat-mdc-option-pseudo-checkbox)):after{content:\"\";position:absolute;top:50%;right:16px;transform:translateY(-50%);width:10px;height:0;border-bottom:solid 10px;border-radius:10px}[dir=rtl] .mat-mdc-option.mdc-list-item--selected:not(:has(.mat-mdc-option-pseudo-checkbox)):after{right:auto;left:16px}}.mat-mdc-option-multiple{--mat-list-list-item-selected-container-color: var(--mat-list-list-item-container-color, transparent)}.mat-mdc-option-active .mat-focus-indicator:before{content:\"\"}\n"], dependencies: [{ kind: "component", type: MatPseudoCheckbox, selector: "mat-pseudo-checkbox", inputs: ["state", "disabled", "appearance"] }, { kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: OptionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'SelectItem', imports: [MatPseudoCheckbox, MatRipple], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'matOption', providers: [{ provide: MatOption, useExisting: forwardRef(() => OptionComponent) }], template: `
+    @if (multiple) {
+      <mat-pseudo-checkbox
+        class="mat-mdc-option-pseudo-checkbox"
+        [disabled]="disabled"
+        [state]="selected ? 'checked' : 'unchecked'"
+        aria-hidden="true" />
+    }
+
+    <ng-content select="mat-icon" />
+
+    <span class="mdc-list-item__primary-text" #text><ng-content /></span>
+
+    @if (!multiple && selected && !hideSingleSelectionIndicator) {
+      <mat-pseudo-checkbox
+        class="mat-mdc-option-pseudo-checkbox"
+        [disabled]="disabled"
+        state="checked"
+        aria-hidden="true"
+        appearance="minimal" />
+    }
+
+    @if (group && group._inert) {
+      <span class="cdk-visually-hidden">({{ group.label }})</span>
+    }
+
+    <div
+      class="mat-mdc-option-ripple mat-focus-indicator"
+      aria-hidden="true"
+      mat-ripple
+      [matRippleTrigger]="_getHostElement()"
+      [matRippleDisabled]="disabled || disableRipple"></div>
+  `, styles: [".mat-mdc-option{-webkit-user-select:none;user-select:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:flex;position:relative;align-items:center;justify-content:flex-start;overflow:hidden;min-height:48px;padding:0 16px;cursor:pointer;-webkit-tap-highlight-color:transparent;color:var(--mat-option-label-text-color, var(--mat-sys-on-surface));font-family:var(--mat-option-label-text-font, var(--mat-sys-label-large-font));line-height:var(--mat-option-label-text-line-height, var(--mat-sys-label-large-line-height));font-size:var(--mat-option-label-text-size, var(--mat-sys-body-large-size));letter-spacing:var(--mat-option-label-text-tracking, var(--mat-sys-label-large-tracking));font-weight:var(--mat-option-label-text-weight, var(--mat-sys-body-large-weight))}.mat-mdc-option:hover:not(.mdc-list-item--disabled){background-color:var( --mat-option-hover-state-layer-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent) )}.mat-mdc-option:focus.mdc-list-item,.mat-mdc-option.mat-mdc-option-active.mdc-list-item{background-color:var( --mat-option-focus-state-layer-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-focus-state-layer-opacity) * 100%), transparent) );outline:0}.mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-active,.mat-mdc-option-multiple,:focus,:hover){background-color:var(--mat-option-selected-state-layer-color, var(--mat-sys-secondary-container))}.mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-active,.mat-mdc-option-multiple,:focus,:hover) .mdc-list-item__primary-text{color:var(--mat-option-selected-state-label-text-color, var(--mat-sys-on-secondary-container))}.mat-mdc-option .mat-pseudo-checkbox{--mat-pseudo-checkbox-minimal-selected-checkmark-color: var( --mat-option-selected-state-label-text-color, var(--mat-sys-on-secondary-container) )}.mat-mdc-option.mdc-list-item{align-items:center;background:transparent}.mat-mdc-option.mdc-list-item--disabled{cursor:default;pointer-events:none}.mat-mdc-option.mdc-list-item--disabled .mat-mdc-option-pseudo-checkbox,.mat-mdc-option.mdc-list-item--disabled .mdc-list-item__primary-text,.mat-mdc-option.mdc-list-item--disabled>mat-icon{opacity:.38}.mat-mdc-optgroup .mat-mdc-option:not(.mat-mdc-option-multiple){padding-left:32px}[dir=rtl] .mat-mdc-optgroup .mat-mdc-option:not(.mat-mdc-option-multiple){padding-left:16px;padding-right:32px}.mat-mdc-option .mat-icon,.mat-mdc-option .mat-pseudo-checkbox-full{margin-right:16px;flex-shrink:0}[dir=rtl] .mat-mdc-option .mat-icon,[dir=rtl] .mat-mdc-option .mat-pseudo-checkbox-full{margin-right:0;margin-left:16px}.mat-mdc-option .mat-pseudo-checkbox-minimal{margin-left:16px;flex-shrink:0}[dir=rtl] .mat-mdc-option .mat-pseudo-checkbox-minimal{margin-right:16px;margin-left:0}.mat-mdc-option .mat-mdc-option-ripple{inset:0;position:absolute;pointer-events:none}.mat-mdc-option .mdc-list-item__primary-text{white-space:normal;font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;font-family:inherit;text-decoration:inherit;text-transform:inherit;margin-right:auto}[dir=rtl] .mat-mdc-option .mdc-list-item__primary-text{margin-right:0;margin-left:auto}@media(forced-colors:active){.mat-mdc-option.mdc-list-item--selected:not(:has(.mat-mdc-option-pseudo-checkbox)):after{content:\"\";position:absolute;top:50%;right:16px;transform:translateY(-50%);width:10px;height:0;border-bottom:solid 10px;border-radius:10px}[dir=rtl] .mat-mdc-option.mdc-list-item--selected:not(:has(.mat-mdc-option-pseudo-checkbox)):after{right:auto;left:16px}}.mat-mdc-option-multiple{--mat-list-list-item-selected-container-color: var(--mat-list-list-item-container-color, transparent)}.mat-mdc-option-active .mat-focus-indicator:before{content:\"\"}\n"] }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { OptionComponent, SelectComponent };
+//# sourceMappingURL=ojiepermana-angular-component-select.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ojiepermana-angular-component-select.mjs","sources":["../../../library/component/select/select.component.ts","../../../library/component/select/option.component.ts","../../../library/component/select/ojiepermana-angular-component-select.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, effect, forwardRef, inject, ViewEncapsulation } from '@angular/core';\nimport { OverlayModule } from '@angular/cdk/overlay';\nimport { MAT_OPTION_PARENT_COMPONENT } from '@angular/material/core';\nimport { MatSelect } from '@angular/material/select';\nimport { FormFieldContext } from '@ojiepermana/angular-component/form';\n\n/**\n * Custom shadcn-styled select.\n *\n * IMPORTANT: this MUST extend `MatSelect` (with a copied template) rather than\n * wrap `<mat-select>` in its own view. `mat-select` projects its options through\n * an `<ng-content>` that lives inside the deferred `cdk-connected-overlay`\n * `<ng-template>`. A wrapper that re-projects options into mat-select via its own\n * `<ng-content>` creates a *double* projection into that deferred slot, and the\n * projected options are never instantiated — `@ContentChildren(MatOption)` finds\n * zero, the trigger shows the placeholder instead of the bound value, and\n * `_canOpen()` refuses to open the panel. By BEING the mat-select, options are\n * direct (single-projection) content and register normally.\n *\n * The full MatSelect public API (`value`, `multiple`, `required`, `disabled`,\n * `placeholder`, `aria-*`, `open()/close()/focus()`, `selectionChange`,\n * `openedChange`, `valueChange`, and `ControlValueAccessor` for `ngModel`/reactive\n * forms) is inherited. Only the selector, template, styles, providers, and the\n * optional `<FormField>` bridge are declared here.\n */\n@Component({\n  selector: 'SelectField',\n  exportAs: 'matSelect',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  imports: [OverlayModule],\n  host: {\n    class: 'mat-mdc-select',\n    role: 'combobox',\n    'aria-haspopup': 'listbox',\n  },\n  providers: [\n    { provide: MatSelect, useExisting: forwardRef(() => SelectComponent) },\n    { provide: MAT_OPTION_PARENT_COMPONENT, useExisting: forwardRef(() => SelectComponent) },\n  ],\n  styleUrl: './select.component.css',\n  template: `\n    <div\n      cdk-overlay-origin\n      class=\"mat-mdc-select-trigger\"\n      (click)=\"open()\"\n      #fallbackOverlayOrigin=\"cdkOverlayOrigin\"\n      #trigger>\n      <div class=\"mat-mdc-select-value\" [attr.id]=\"_valueId\">\n        @if (empty) {\n          <span class=\"mat-mdc-select-placeholder mat-mdc-select-min-line\">{{ placeholder }}</span>\n        } @else {\n          <span class=\"mat-mdc-select-value-text\">\n            @if (customTrigger) {\n              <ng-content select=\"mat-select-trigger\"></ng-content>\n            } @else {\n              <span class=\"mat-mdc-select-min-line\">{{ triggerValue }}</span>\n            }\n          </span>\n        }\n      </div>\n\n      <div class=\"mat-mdc-select-arrow-wrapper\">\n        <div class=\"mat-mdc-select-arrow\">\n          <!-- Use an inline SVG, because it works better than a CSS triangle in high contrast mode. -->\n          <svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" focusable=\"false\" aria-hidden=\"true\">\n            <path d=\"M7 10l5 5 5-5z\" />\n          </svg>\n        </div>\n      </div>\n    </div>\n\n    <ng-template\n      cdk-connected-overlay\n      cdkConnectedOverlayHasBackdrop\n      cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n      [cdkConnectedOverlayDisableClose]=\"true\"\n      [cdkConnectedOverlayPanelClass]=\"_overlayPanelClass\"\n      [cdkConnectedOverlayScrollStrategy]=\"_scrollStrategy\"\n      [cdkConnectedOverlayOrigin]=\"_preferredOverlayOrigin || fallbackOverlayOrigin\"\n      [cdkConnectedOverlayPositions]=\"_positions\"\n      [cdkConnectedOverlayWidth]=\"_overlayWidth\"\n      [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n      [cdkConnectedOverlayUsePopover]=\"_popoverLocation\"\n      (detach)=\"close()\"\n      (backdropClick)=\"close()\"\n      (overlayKeydown)=\"_handleOverlayKeydown($event)\">\n      <!-- mat-undefined is weird, but we were using it internally -->\n      <div\n        #panel\n        role=\"listbox\"\n        tabindex=\"-1\"\n        class=\"mat-mdc-select-panel mdc-menu-surface mdc-menu-surface--open select-panel\"\n        [class]=\"panelClass\"\n        [class.mat-select-panel-animations-enabled]=\"!_animationsDisabled\"\n        [class.mat-primary]=\"_parentFormField?.color === 'primary'\"\n        [class.mat-accent]=\"_parentFormField?.color === 'accent'\"\n        [class.mat-warn]=\"_parentFormField?.color === 'warn'\"\n        [class.mat-undefined]=\"!_parentFormField?.color\"\n        [attr.id]=\"id + '-panel'\"\n        [attr.aria-multiselectable]=\"multiple\"\n        [attr.aria-label]=\"ariaLabel || null\"\n        [attr.aria-labelledby]=\"_getPanelAriaLabelledby()\"\n        (keydown)=\"_handleKeydown($event)\">\n        <ng-content></ng-content>\n      </div>\n    </ng-template>\n  `,\n})\nexport class SelectComponent extends MatSelect {\n  /** Optional bridge to an enclosing edsis `<FormField>` (validation + a11y). */\n  private readonly formFieldContext = inject(FormFieldContext, { optional: true });\n\n  constructor() {\n    super();\n\n    const ctx = this.formFieldContext;\n    if (ctx) {\n      // Mirror the FormField invalid state onto mat-select's errorState.\n      this.errorStateMatcher = { isErrorState: () => ctx.invalid() };\n      // Link the FormField's description/message ids for screen readers.\n      effect(() => {\n        const describedBy = ctx.describedBy();\n        if (describedBy) {\n          this.userAriaDescribedBy = describedBy;\n        }\n      });\n    }\n  }\n\n  override ngOnInit(): void {\n    super.ngOnInit();\n    // Register the bound control so <FormField> can derive invalid/aria state.\n    this.formFieldContext?.control.set(this.ngControl?.control ?? null);\n  }\n}\n","import { ChangeDetectionStrategy, Component, forwardRef, ViewEncapsulation } from '@angular/core';\nimport { MatOption, MatPseudoCheckbox, MatRipple } from '@angular/material/core';\n\n/**\n * Option for `<SelectField>`.\n *\n * IMPORTANT: this MUST extend `MatOption` rather than wrap it in a child view.\n * `mat-select` discovers options via `@ContentChildren(MatOption, { descendants: true })`,\n * and Angular content queries do NOT cross into a child component's view. A\n * previous version rendered `<mat-option>` inside this component's template, so\n * mat-select found zero options — the trigger showed its placeholder instead of\n * the bound value and `MatSelect._canOpen()` refused to open (it returns false\n * when `options.length === 0`). By extending `MatOption` and re-providing it,\n * the `<SelectItem>` element IS a real option that the query matches, working\n * both at top level and nested inside `<mat-optgroup>`.\n *\n * Inputs (`value`, `disabled`, `id`), outputs, host bindings, and the internal\n * `#text` view query are inherited from `MatOption`; only the template, styles,\n * and the self-provider below are declared here. The template/styles mirror\n * Material's own option so rendering stays pixel-identical.\n */\n@Component({\n  selector: 'SelectItem',\n  imports: [MatPseudoCheckbox, MatRipple],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  exportAs: 'matOption',\n  providers: [{ provide: MatOption, useExisting: forwardRef(() => OptionComponent) }],\n  template: `\n    @if (multiple) {\n      <mat-pseudo-checkbox\n        class=\"mat-mdc-option-pseudo-checkbox\"\n        [disabled]=\"disabled\"\n        [state]=\"selected ? 'checked' : 'unchecked'\"\n        aria-hidden=\"true\" />\n    }\n\n    <ng-content select=\"mat-icon\" />\n\n    <span class=\"mdc-list-item__primary-text\" #text><ng-content /></span>\n\n    @if (!multiple && selected && !hideSingleSelectionIndicator) {\n      <mat-pseudo-checkbox\n        class=\"mat-mdc-option-pseudo-checkbox\"\n        [disabled]=\"disabled\"\n        state=\"checked\"\n        aria-hidden=\"true\"\n        appearance=\"minimal\" />\n    }\n\n    @if (group && group._inert) {\n      <span class=\"cdk-visually-hidden\">({{ group.label }})</span>\n    }\n\n    <div\n      class=\"mat-mdc-option-ripple mat-focus-indicator\"\n      aria-hidden=\"true\"\n      mat-ripple\n      [matRippleTrigger]=\"_getHostElement()\"\n      [matRippleDisabled]=\"disabled || disableRipple\"></div>\n  `,\n  styleUrl: './option.component.css',\n})\nexport class OptionComponent extends MatOption {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,37 @@
+import * as i0 from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { cn } from '@ojiepermana/angular-component/utils';
+
+class SeparatorComponent {
+    orientation = input('horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    decorative = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "decorative" }] : /* istanbul ignore next */ []));
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('block shrink-0 bg-border', this.orientation() === 'horizontal' ? 'h-px w-full' : 'h-full w-px', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: SeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: SeparatorComponent, isStandalone: true, selector: "Separator", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, decorative: { classPropertyName: "decorative", publicName: "decorative", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.role": "decorative() ? \"none\" : \"separator\"", "attr.aria-orientation": "decorative() ? null : orientation()", "attr.data-orientation": "orientation()" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: SeparatorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'Separator',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.role]': 'decorative() ? "none" : "separator"',
+                        '[attr.aria-orientation]': 'decorative() ? null : orientation()',
+                        '[attr.data-orientation]': 'orientation()',
+                    },
+                    template: '',
+                }]
+        }], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], decorative: [{ type: i0.Input, args: [{ isSignal: true, alias: "decorative", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SeparatorComponent };
+//# sourceMappingURL=ojiepermana-angular-component-separator.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ojiepermana-angular-component-separator.mjs","sources":["../../../library/component/separator/separator.component.ts","../../../library/component/separator/ojiepermana-angular-component-separator.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { cn } from '@ojiepermana/angular-component/utils';\n\nexport type SeparatorOrientation = 'horizontal' | 'vertical';\n\n@Component({\n  selector: 'Separator',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'classes()',\n    '[attr.role]': 'decorative() ? \"none\" : \"separator\"',\n    '[attr.aria-orientation]': 'decorative() ? null : orientation()',\n    '[attr.data-orientation]': 'orientation()',\n  },\n  template: '',\n})\nexport class SeparatorComponent {\n  readonly orientation = input<SeparatorOrientation>('horizontal');\n  readonly decorative = input<boolean>(true);\n  readonly class = input<string>('');\n\n  protected readonly classes = computed(() =>\n    cn('block shrink-0 bg-border', this.orientation() === 'horizontal' ? 'h-px w-full' : 'h-full w-px', this.class()),\n  );\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAgBa,kBAAkB,CAAA;IACpB,WAAW,GAAG,KAAK,CAAuB,YAAY;oFAAC;IACvD,UAAU,GAAG,KAAK,CAAU,IAAI;mFAAC;IACjC,KAAK,GAAG,KAAK,CAAS,EAAE;8EAAC;AAEf,IAAA,OAAO,GAAG,QAAQ,CAAC,MACpC,EAAE,CAAC,0BAA0B,EAAE,IAAI,CAAC,WAAW,EAAE,KAAK,YAAY,GAAG,aAAa,GAAG,aAAa,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;gFAClH;uGAPU,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAlB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,4qBAFnB,EAAE,EAAA,QAAA,EAAA,IAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAED,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAX9B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,WAAW;oBACrB,eAAe,EAAE,uBAAuB,CAAC,MAAM;AAC/C,oBAAA,IAAI,EAAE;AACJ,wBAAA,SAAS,EAAE,WAAW;AACtB,wBAAA,aAAa,EAAE,qCAAqC;AACpD,wBAAA,yBAAyB,EAAE,qCAAqC;AAChE,wBAAA,yBAAyB,EAAE,eAAe;AAC3C,qBAAA;AACD,oBAAA,QAAQ,EAAE,EAAE;AACb,iBAAA;;;ACfD;;AAEG;;;;"}