@memberjunction/ng-ui-components 0.0.1 → 5.24.0

package/dist/lib/dropdown/dropdown.component.js

@@ -0,0 +1,445 @@
+import { Component, Input, Output, EventEmitter, forwardRef, HostBinding, ViewChild, ContentChild, inject, ChangeDetectorRef } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { OverlayModule } from '@angular/cdk/overlay';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/cdk/overlay";
+const _c0 = ["mjDropdownItem"];
+const _c1 = ["trigger"];
+const _c2 = ["filterInput"];
+const _c3 = a0 => ({ $implicit: a0 });
+function MJDropdownComponent_ng_template_6_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 7)(1, "input", 11, 1);
+    i0.ɵɵlistener("input", function MJDropdownComponent_ng_template_6_Conditional_1_Template_input_input_1_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.OnFilterInput($event)); })("keydown", function MJDropdownComponent_ng_template_6_Conditional_1_Template_input_keydown_1_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.OnKeyDown($event)); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("value", ctx_r2.filterText);
+} }
+function MJDropdownComponent_ng_template_6_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 12);
+    i0.ɵɵlistener("click", function MJDropdownComponent_ng_template_6_Conditional_2_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.SelectItem(null, $event)); });
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("mj-dropdown-option--selected", ctx_r2.SelectedValue == null)("mj-dropdown-option--highlighted", ctx_r2.HighlightedIndex === -1);
+    i0.ɵɵattribute("aria-selected", ctx_r2.SelectedValue == null);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.GetItemText(ctx_r2.DefaultItem), " ");
+} }
+function MJDropdownComponent_ng_template_6_For_4_Conditional_1_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0);
+} }
+function MJDropdownComponent_ng_template_6_For_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, MJDropdownComponent_ng_template_6_For_4_Conditional_1_ng_container_0_Template, 1, 0, "ng-container", 14);
+} if (rf & 2) {
+    const item_r6 = i0.ɵɵnextContext().$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.itemTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c3, item_r6));
+} }
+function MJDropdownComponent_ng_template_6_For_4_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const item_r6 = i0.ɵɵnextContext().$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.GetItemText(item_r6), " ");
+} }
+function MJDropdownComponent_ng_template_6_For_4_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 13);
+    i0.ɵɵlistener("click", function MJDropdownComponent_ng_template_6_For_4_Template_div_click_0_listener($event) { const item_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.SelectItem(item_r6, $event)); });
+    i0.ɵɵconditionalCreate(1, MJDropdownComponent_ng_template_6_For_4_Conditional_1_Template, 1, 4, "ng-container")(2, MJDropdownComponent_ng_template_6_For_4_Conditional_2_Template, 1, 1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r6 = ctx.$implicit;
+    const $index_r7 = ctx.$index;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("mj-dropdown-option--selected", ctx_r2.IsItemSelected(item_r6))("mj-dropdown-option--highlighted", ctx_r2.HighlightedIndex === $index_r7);
+    i0.ɵɵattribute("aria-selected", ctx_r2.IsItemSelected(item_r6));
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.itemTemplate ? 1 : 2);
+} }
+function MJDropdownComponent_ng_template_6_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 10);
+    i0.ɵɵtext(1, "No data found");
+    i0.ɵɵelementEnd();
+} }
+function MJDropdownComponent_ng_template_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 6);
+    i0.ɵɵconditionalCreate(1, MJDropdownComponent_ng_template_6_Conditional_1_Template, 3, 1, "div", 7);
+    i0.ɵɵconditionalCreate(2, MJDropdownComponent_ng_template_6_Conditional_2_Template, 2, 6, "div", 8);
+    i0.ɵɵrepeaterCreate(3, MJDropdownComponent_ng_template_6_For_4_Template, 3, 6, "div", 9, i0.ɵɵcomponentInstance().TrackByIndex, true);
+    i0.ɵɵconditionalCreate(5, MJDropdownComponent_ng_template_6_Conditional_5_Template, 2, 0, "div", 10);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.Filterable ? 1 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.DefaultItem != null ? 2 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r2.FilteredItems);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r2.FilteredItems.length === 0 ? 5 : -1);
+} }
+/**
+ * mj-dropdown — Dropdown select component using CDK Overlay.
+ *
+ * Replaces `<kendo-dropdownlist>`.
+ *
+ * @example
+ * ```html
+ * <mj-dropdown
+ *   [Data]="items"
+ *   TextField="name"
+ *   ValueField="id"
+ *   [(ngModel)]="selectedId"
+ *   [ValuePrimitive]="true"
+ *   [Filterable]="true"
+ *   (FilterChange)="onFilter($event)">
+ * </mj-dropdown>
+ * ```
+ */
+export class MJDropdownComponent {
+    Data = [];
+    TextField = '';
+    ValueField = '';
+    Filterable = false;
+    ValuePrimitive = false;
+    Disabled = false;
+    Placeholder = 'Select...';
+    DefaultItem = null;
+    FilterChange = new EventEmitter();
+    ValueChange = new EventEmitter();
+    itemTemplate = null;
+    triggerEl;
+    filterInputEl;
+    hostClass = true;
+    cdr = inject(ChangeDetectorRef);
+    static nextId = 0;
+    DropdownId = MJDropdownComponent.nextId++;
+    IsOpen = false;
+    IsDisabled = false;
+    HighlightedIndex = -1;
+    SelectedValue = null;
+    TriggerWidth = 0;
+    filterText = '';
+    Positions = [
+        { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
+        { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' }
+    ];
+    onChange = () => { };
+    onTouched = () => { };
+    get FilteredItems() {
+        const data = (this.Data ?? []);
+        if (!this.Filterable || !this.filterText)
+            return data;
+        const search = this.filterText.toLowerCase();
+        return data.filter(item => this.GetItemText(item).toLowerCase().includes(search));
+    }
+    get HasValue() { return this.SelectedValue != null; }
+    get DisplayText() {
+        if (this.SelectedValue == null) {
+            if (this.DefaultItem != null)
+                return this.GetItemText(this.DefaultItem);
+            return this.Placeholder;
+        }
+        if (this.ValuePrimitive && this.ValueField) {
+            const found = (this.Data ?? []).find(item => this.GetItemValue(item) === this.SelectedValue);
+            return found ? this.GetItemText(found) : String(this.SelectedValue);
+        }
+        return this.GetItemText(this.SelectedValue);
+    }
+    Toggle() {
+        if (this.IsDisabled)
+            return;
+        this.IsOpen ? this.Close() : this.Open();
+    }
+    Open() {
+        if (this.IsDisabled || this.IsOpen)
+            return;
+        this.TriggerWidth = this.triggerEl?.nativeElement.offsetWidth ?? 200;
+        this.IsOpen = true;
+        this.HighlightedIndex = this.getSelectedIndex();
+        this.cdr.detectChanges();
+        if (this.Filterable)
+            setTimeout(() => this.filterInputEl?.nativeElement.focus(), 0);
+    }
+    Close() {
+        if (!this.IsOpen)
+            return;
+        this.IsOpen = false;
+        this.filterText = '';
+        this.HighlightedIndex = -1;
+        this.cdr.detectChanges();
+    }
+    SelectItem(item, event) {
+        event?.stopPropagation();
+        if (item == null) {
+            this.SelectedValue = null;
+            this.onChange(null);
+            this.ValueChange.emit(null);
+        }
+        else if (this.ValuePrimitive && this.ValueField) {
+            const value = this.GetItemValue(item);
+            this.SelectedValue = value;
+            this.onChange(value);
+            this.ValueChange.emit(value);
+        }
+        else {
+            this.SelectedValue = item;
+            this.onChange(item);
+            this.ValueChange.emit(item);
+        }
+        this.Close();
+    }
+    IsItemSelected(item) {
+        if (this.SelectedValue == null)
+            return false;
+        if (this.ValuePrimitive && this.ValueField)
+            return this.GetItemValue(item) === this.SelectedValue;
+        if (this.ValueField && typeof item === 'object' && typeof this.SelectedValue === 'object')
+            return this.GetItemValue(item) === this.GetItemValue(this.SelectedValue);
+        return item === this.SelectedValue;
+    }
+    OnFilterInput(event) {
+        this.filterText = event.target.value;
+        this.HighlightedIndex = 0;
+        this.FilterChange.emit(this.filterText);
+    }
+    OnKeyDown(event) {
+        const items = this.FilteredItems;
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                if (!this.IsOpen)
+                    this.Open();
+                else
+                    this.HighlightedIndex = Math.min(this.HighlightedIndex + 1, items.length - 1);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                if (this.IsOpen)
+                    this.HighlightedIndex = Math.max(this.HighlightedIndex - 1, 0);
+                break;
+            case 'Enter':
+                event.preventDefault();
+                if (this.IsOpen && this.HighlightedIndex >= 0 && this.HighlightedIndex < items.length)
+                    this.SelectItem(items[this.HighlightedIndex]);
+                else if (!this.IsOpen)
+                    this.Open();
+                break;
+            case 'Escape':
+                event.preventDefault();
+                this.Close();
+                break;
+            case 'Home':
+                if (this.IsOpen) {
+                    event.preventDefault();
+                    this.HighlightedIndex = 0;
+                }
+                break;
+            case 'End':
+                if (this.IsOpen) {
+                    event.preventDefault();
+                    this.HighlightedIndex = items.length - 1;
+                }
+                break;
+        }
+    }
+    OnBlur() { this.onTouched(); }
+    GetItemText(item) {
+        if (item == null)
+            return '';
+        if (typeof item === 'string')
+            return item;
+        if (this.TextField && typeof item === 'object')
+            return String(item[this.TextField] ?? '');
+        return String(item);
+    }
+    GetItemValue(item) {
+        if (typeof item === 'string')
+            return item;
+        if (this.ValueField && typeof item === 'object' && item != null)
+            return item[this.ValueField];
+        return item;
+    }
+    TrackByIndex(index) { return index; }
+    writeValue(value) { this.SelectedValue = value; }
+    registerOnChange(fn) { this.onChange = fn; }
+    registerOnTouched(fn) { this.onTouched = fn; }
+    setDisabledState(isDisabled) { this.IsDisabled = isDisabled || this.Disabled; }
+    ngOnDestroy() { this.Close(); }
+    getSelectedIndex() {
+        if (this.SelectedValue == null)
+            return -1;
+        return this.FilteredItems.findIndex(item => this.IsItemSelected(item));
+    }
+    static ɵfac = function MJDropdownComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MJDropdownComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJDropdownComponent, selectors: [["mj-dropdown"]], contentQueries: function MJDropdownComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
+            i0.ɵɵcontentQuery(dirIndex, _c0, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.itemTemplate = _t.first);
+        } }, viewQuery: function MJDropdownComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c1, 5)(_c2, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.triggerEl = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.filterInputEl = _t.first);
+        } }, hostVars: 2, hostBindings: function MJDropdownComponent_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵclassProp("mj-dropdown-host", ctx.hostClass);
+        } }, inputs: { Data: "Data", TextField: "TextField", ValueField: "ValueField", Filterable: "Filterable", ValuePrimitive: "ValuePrimitive", Disabled: "Disabled", Placeholder: "Placeholder", DefaultItem: "DefaultItem" }, outputs: { FilterChange: "FilterChange", ValueChange: "ValueChange" }, features: [i0.ɵɵProvidersFeature([{
+                    provide: NG_VALUE_ACCESSOR,
+                    useExisting: forwardRef(() => MJDropdownComponent),
+                    multi: true
+                }])], decls: 7, vars: 13, consts: [["trigger", "", "overlayOrigin", "cdkOverlayOrigin"], ["filterInput", ""], ["cdkOverlayOrigin", "", "role", "combobox", "aria-haspopup", "listbox", "tabindex", "0", 1, "mj-dropdown", 3, "click", "keydown", "blur"], [1, "mj-dropdown-value"], [1, "fa-solid", "fa-chevron-down", "mj-dropdown-arrow"], ["cdkConnectedOverlay", "", "cdkConnectedOverlayBackdropClass", "mj-dropdown-backdrop", 3, "backdropClick", "detach", "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayPositions", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHasBackdrop"], ["role", "listbox", 1, "mj-dropdown-panel"], [1, "mj-dropdown-filter-wrap"], ["role", "option", 1, "mj-dropdown-option", "mj-dropdown-option--default", 3, "mj-dropdown-option--selected", "mj-dropdown-option--highlighted"], ["role", "option", 1, "mj-dropdown-option", 3, "mj-dropdown-option--selected", "mj-dropdown-option--highlighted"], [1, "mj-dropdown-no-data"], ["type", "text", "placeholder", "Search...", 1, "mj-input", "mj-dropdown-filter", 3, "input", "keydown", "value"], ["role", "option", 1, "mj-dropdown-option", "mj-dropdown-option--default", 3, "click"], ["role", "option", 1, "mj-dropdown-option", 3, "click"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"]], template: function MJDropdownComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "div", 2, 0);
+            i0.ɵɵlistener("click", function MJDropdownComponent_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.Toggle()); })("keydown", function MJDropdownComponent_Template_div_keydown_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnKeyDown($event)); })("blur", function MJDropdownComponent_Template_div_blur_0_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnBlur()); });
+            i0.ɵɵelementStart(3, "span", 3);
+            i0.ɵɵtext(4);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(5, "i", 4);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(6, MJDropdownComponent_ng_template_6_Template, 6, 3, "ng-template", 5);
+            i0.ɵɵlistener("backdropClick", function MJDropdownComponent_Template_ng_template_backdropClick_6_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.Close()); })("detach", function MJDropdownComponent_Template_ng_template_detach_6_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.Close()); });
+        } if (rf & 2) {
+            const overlayOrigin_r8 = i0.ɵɵreference(2);
+            i0.ɵɵclassProp("mj-dropdown--open", ctx.IsOpen)("mj-dropdown--disabled", ctx.IsDisabled);
+            i0.ɵɵattribute("aria-expanded", ctx.IsOpen);
+            i0.ɵɵadvance(3);
+            i0.ɵɵclassProp("mj-dropdown-placeholder", !ctx.HasValue);
+            i0.ɵɵadvance();
+            i0.ɵɵtextInterpolate1(" ", ctx.DisplayText, " ");
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("cdkConnectedOverlayOrigin", overlayOrigin_r8)("cdkConnectedOverlayOpen", ctx.IsOpen)("cdkConnectedOverlayPositions", ctx.Positions)("cdkConnectedOverlayWidth", ctx.TriggerWidth)("cdkConnectedOverlayHasBackdrop", true);
+        } }, dependencies: [NgTemplateOutlet, OverlayModule, i1.CdkConnectedOverlay, i1.CdkOverlayOrigin], encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJDropdownComponent, [{
+        type: Component,
+        args: [{
+                selector: 'mj-dropdown',
+                standalone: true,
+                imports: [NgTemplateOutlet, OverlayModule],
+                template: `
+    <div
+      class="mj-dropdown"
+      #trigger
+      cdkOverlayOrigin
+      #overlayOrigin="cdkOverlayOrigin"
+      [class.mj-dropdown--open]="IsOpen"
+      [class.mj-dropdown--disabled]="IsDisabled"
+      role="combobox"
+      [attr.aria-expanded]="IsOpen"
+      aria-haspopup="listbox"
+      tabindex="0"
+      (click)="Toggle()"
+      (keydown)="OnKeyDown($event)"
+      (blur)="OnBlur()">
+      <span class="mj-dropdown-value" [class.mj-dropdown-placeholder]="!HasValue">
+        {{ DisplayText }}
+      </span>
+      <i class="fa-solid fa-chevron-down mj-dropdown-arrow"></i>
+    </div>
+
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="overlayOrigin"
+      [cdkConnectedOverlayOpen]="IsOpen"
+      [cdkConnectedOverlayPositions]="Positions"
+      [cdkConnectedOverlayWidth]="TriggerWidth"
+      [cdkConnectedOverlayHasBackdrop]="true"
+      cdkConnectedOverlayBackdropClass="mj-dropdown-backdrop"
+      (backdropClick)="Close()"
+      (detach)="Close()">
+      <div class="mj-dropdown-panel" role="listbox">
+        @if (Filterable) {
+          <div class="mj-dropdown-filter-wrap">
+            <input
+              #filterInput
+              class="mj-input mj-dropdown-filter"
+              type="text"
+              placeholder="Search..."
+              [value]="filterText"
+              (input)="OnFilterInput($event)"
+              (keydown)="OnKeyDown($event)" />
+          </div>
+        }
+        @if (DefaultItem != null) {
+          <div
+            class="mj-dropdown-option mj-dropdown-option--default"
+            [class.mj-dropdown-option--selected]="SelectedValue == null"
+            [class.mj-dropdown-option--highlighted]="HighlightedIndex === -1"
+            role="option"
+            [attr.aria-selected]="SelectedValue == null"
+            (click)="SelectItem(null, $event)">
+            {{ GetItemText(DefaultItem) }}
+          </div>
+        }
+        @for (item of FilteredItems; track TrackByIndex($index)) {
+          <div
+            class="mj-dropdown-option"
+            [class.mj-dropdown-option--selected]="IsItemSelected(item)"
+            [class.mj-dropdown-option--highlighted]="HighlightedIndex === $index"
+            role="option"
+            [attr.aria-selected]="IsItemSelected(item)"
+            (click)="SelectItem(item, $event)">
+            @if (itemTemplate) {
+              <ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: item }"></ng-container>
+            } @else {
+              {{ GetItemText(item) }}
+            }
+          </div>
+        }
+        @if (FilteredItems.length === 0) {
+          <div class="mj-dropdown-no-data">No data found</div>
+        }
+      </div>
+    </ng-template>
+  `,
+                providers: [{
+                        provide: NG_VALUE_ACCESSOR,
+                        useExisting: forwardRef(() => MJDropdownComponent),
+                        multi: true
+                    }]
+            }]
+    }], null, { Data: [{
+            type: Input
+        }], TextField: [{
+            type: Input
+        }], ValueField: [{
+            type: Input
+        }], Filterable: [{
+            type: Input
+        }], ValuePrimitive: [{
+            type: Input
+        }], Disabled: [{
+            type: Input
+        }], Placeholder: [{
+            type: Input
+        }], DefaultItem: [{
+            type: Input
+        }], FilterChange: [{
+            type: Output
+        }], ValueChange: [{
+            type: Output
+        }], itemTemplate: [{
+            type: ContentChild,
+            args: ['mjDropdownItem']
+        }], triggerEl: [{
+            type: ViewChild,
+            args: ['trigger']
+        }], filterInputEl: [{
+            type: ViewChild,
+            args: ['filterInput']
+        }], hostClass: [{
+            type: HostBinding,
+            args: ['class.mj-dropdown-host']
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJDropdownComponent, { className: "MJDropdownComponent", filePath: "lib/dropdown/dropdown.component.ts", lineNumber: 124 }); })();
+//# sourceMappingURL=dropdown.component.js.map

package/dist/lib/dropdown/dropdown.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.component.js","sourceRoot":"","sources":["../../../src/lib/dropdown/dropdown.component.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Input,\n  Output,\n  EventEmitter,\n  forwardRef,\n  HostBinding,\n  ElementRef,\n  ViewChild,\n  ContentChild,\n  TemplateRef,\n  OnDestroy,\n  inject,\n  ChangeDetectorRef\n} from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';\nimport { OverlayModule, ConnectedPosition } from '@angular/cdk/overlay';\n\n/**\n * mj-dropdown — Dropdown select component using CDK Overlay.\n *\n * Replaces `<kendo-dropdownlist>`.\n *\n * @example\n * ```html\n * <mj-dropdown\n *   [Data]=\"items\"\n *   TextField=\"name\"\n *   ValueField=\"id\"\n *   [(ngModel)]=\"selectedId\"\n *   [ValuePrimitive]=\"true\"\n *   [Filterable]=\"true\"\n *   (FilterChange)=\"onFilter($event)\">\n * </mj-dropdown>\n * ```\n */\n@Component({\n  selector: 'mj-dropdown',\n  standalone: true,\n  imports: [NgTemplateOutlet, OverlayModule],\n  template: `\n    <div\n      class=\"mj-dropdown\"\n      #trigger\n      cdkOverlayOrigin\n      #overlayOrigin=\"cdkOverlayOrigin\"\n      [class.mj-dropdown--open]=\"IsOpen\"\n      [class.mj-dropdown--disabled]=\"IsDisabled\"\n      role=\"combobox\"\n      [attr.aria-expanded]=\"IsOpen\"\n      aria-haspopup=\"listbox\"\n      tabindex=\"0\"\n      (click)=\"Toggle()\"\n      (keydown)=\"OnKeyDown($event)\"\n      (blur)=\"OnBlur()\">\n      <span class=\"mj-dropdown-value\" [class.mj-dropdown-placeholder]=\"!HasValue\">\n        {{ DisplayText }}\n      </span>\n      <i class=\"fa-solid fa-chevron-down mj-dropdown-arrow\"></i>\n    </div>\n\n    <ng-template\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n      [cdkConnectedOverlayOpen]=\"IsOpen\"\n      [cdkConnectedOverlayPositions]=\"Positions\"\n      [cdkConnectedOverlayWidth]=\"TriggerWidth\"\n      [cdkConnectedOverlayHasBackdrop]=\"true\"\n      cdkConnectedOverlayBackdropClass=\"mj-dropdown-backdrop\"\n      (backdropClick)=\"Close()\"\n      (detach)=\"Close()\">\n      <div class=\"mj-dropdown-panel\" role=\"listbox\">\n        @if (Filterable) {\n          <div class=\"mj-dropdown-filter-wrap\">\n            <input\n              #filterInput\n              class=\"mj-input mj-dropdown-filter\"\n              type=\"text\"\n              placeholder=\"Search...\"\n              [value]=\"filterText\"\n              (input)=\"OnFilterInput($event)\"\n              (keydown)=\"OnKeyDown($event)\" />\n          </div>\n        }\n        @if (DefaultItem != null) {\n          <div\n            class=\"mj-dropdown-option mj-dropdown-option--default\"\n            [class.mj-dropdown-option--selected]=\"SelectedValue == null\"\n            [class.mj-dropdown-option--highlighted]=\"HighlightedIndex === -1\"\n            role=\"option\"\n            [attr.aria-selected]=\"SelectedValue == null\"\n            (click)=\"SelectItem(null, $event)\">\n            {{ GetItemText(DefaultItem) }}\n          </div>\n        }\n        @for (item of FilteredItems; track TrackByIndex($index)) {\n          <div\n            class=\"mj-dropdown-option\"\n            [class.mj-dropdown-option--selected]=\"IsItemSelected(item)\"\n            [class.mj-dropdown-option--highlighted]=\"HighlightedIndex === $index\"\n            role=\"option\"\n            [attr.aria-selected]=\"IsItemSelected(item)\"\n            (click)=\"SelectItem(item, $event)\">\n            @if (itemTemplate) {\n              <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n            } @else {\n              {{ GetItemText(item) }}\n            }\n          </div>\n        }\n        @if (FilteredItems.length === 0) {\n          <div class=\"mj-dropdown-no-data\">No data found</div>\n        }\n      </div>\n    </ng-template>\n  `,\n  providers: [{\n    provide: NG_VALUE_ACCESSOR,\n    useExisting: forwardRef(() => MJDropdownComponent),\n    multi: true\n  }]\n})\nexport class MJDropdownComponent implements ControlValueAccessor, OnDestroy {\n  @Input() Data: Record<string, unknown>[] | string[] | readonly unknown[] | null = [];\n  @Input() TextField = '';\n  @Input() ValueField = '';\n  @Input() Filterable = false;\n  @Input() ValuePrimitive = false;\n  @Input() Disabled = false;\n  @Input() Placeholder = 'Select...';\n  @Input() DefaultItem: Record<string, unknown> | string | null = null;\n\n  @Output() FilterChange = new EventEmitter<string>();\n  @Output() ValueChange = new EventEmitter<unknown>();\n\n  @ContentChild('mjDropdownItem') itemTemplate: TemplateRef<{ $implicit: unknown }> | null = null;\n\n  @ViewChild('trigger') private triggerEl!: ElementRef<HTMLElement>;\n  @ViewChild('filterInput') private filterInputEl: ElementRef<HTMLInputElement> | undefined;\n\n  @HostBinding('class.mj-dropdown-host') readonly hostClass = true;\n\n  private cdr = inject(ChangeDetectorRef);\n  private static nextId = 0;\n\n  DropdownId = MJDropdownComponent.nextId++;\n  IsOpen = false;\n  IsDisabled = false;\n  HighlightedIndex = -1;\n  SelectedValue: unknown = null;\n  TriggerWidth = 0;\n\n  filterText = '';\n\n  Positions: ConnectedPosition[] = [\n    { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },\n    { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' }\n  ];\n\n  private onChange: (value: unknown) => void = () => {};\n  private onTouched: () => void = () => {};\n\n  get FilteredItems(): unknown[] {\n    const data = (this.Data ?? []) as unknown[];\n    if (!this.Filterable || !this.filterText) return data;\n    const search = this.filterText.toLowerCase();\n    return data.filter(item => this.GetItemText(item).toLowerCase().includes(search));\n  }\n\n  get HasValue(): boolean { return this.SelectedValue != null; }\n\n  get DisplayText(): string {\n    if (this.SelectedValue == null) {\n      if (this.DefaultItem != null) return this.GetItemText(this.DefaultItem);\n      return this.Placeholder;\n    }\n    if (this.ValuePrimitive && this.ValueField) {\n      const found = ((this.Data ?? []) as unknown[]).find(item => this.GetItemValue(item) === this.SelectedValue);\n      return found ? this.GetItemText(found) : String(this.SelectedValue);\n    }\n    return this.GetItemText(this.SelectedValue as Record<string, unknown> | string);\n  }\n\n  Toggle(): void {\n    if (this.IsDisabled) return;\n    this.IsOpen ? this.Close() : this.Open();\n  }\n\n  Open(): void {\n    if (this.IsDisabled || this.IsOpen) return;\n    this.TriggerWidth = this.triggerEl?.nativeElement.offsetWidth ?? 200;\n    this.IsOpen = true;\n    this.HighlightedIndex = this.getSelectedIndex();\n    this.cdr.detectChanges();\n    if (this.Filterable) setTimeout(() => this.filterInputEl?.nativeElement.focus(), 0);\n  }\n\n  Close(): void {\n    if (!this.IsOpen) return;\n    this.IsOpen = false;\n    this.filterText = '';\n    this.HighlightedIndex = -1;\n    this.cdr.detectChanges();\n  }\n\n  SelectItem(item: unknown | null, event?: Event): void {\n    event?.stopPropagation();\n    if (item == null) {\n      this.SelectedValue = null;\n      this.onChange(null);\n      this.ValueChange.emit(null);\n    } else if (this.ValuePrimitive && this.ValueField) {\n      const value = this.GetItemValue(item);\n      this.SelectedValue = value;\n      this.onChange(value);\n      this.ValueChange.emit(value);\n    } else {\n      this.SelectedValue = item;\n      this.onChange(item);\n      this.ValueChange.emit(item);\n    }\n    this.Close();\n  }\n\n  IsItemSelected(item: unknown): boolean {\n    if (this.SelectedValue == null) return false;\n    if (this.ValuePrimitive && this.ValueField) return this.GetItemValue(item) === this.SelectedValue;\n    if (this.ValueField && typeof item === 'object' && typeof this.SelectedValue === 'object')\n      return this.GetItemValue(item) === this.GetItemValue(this.SelectedValue);\n    return item === this.SelectedValue;\n  }\n\n  OnFilterInput(event: Event): void {\n    this.filterText = (event.target as HTMLInputElement).value;\n    this.HighlightedIndex = 0;\n    this.FilterChange.emit(this.filterText);\n  }\n\n  OnKeyDown(event: KeyboardEvent): void {\n    const items = this.FilteredItems;\n    switch (event.key) {\n      case 'ArrowDown':\n        event.preventDefault();\n        if (!this.IsOpen) this.Open();\n        else this.HighlightedIndex = Math.min(this.HighlightedIndex + 1, items.length - 1);\n        break;\n      case 'ArrowUp':\n        event.preventDefault();\n        if (this.IsOpen) this.HighlightedIndex = Math.max(this.HighlightedIndex - 1, 0);\n        break;\n      case 'Enter':\n        event.preventDefault();\n        if (this.IsOpen && this.HighlightedIndex >= 0 && this.HighlightedIndex < items.length)\n          this.SelectItem(items[this.HighlightedIndex]);\n        else if (!this.IsOpen) this.Open();\n        break;\n      case 'Escape': event.preventDefault(); this.Close(); break;\n      case 'Home': if (this.IsOpen) { event.preventDefault(); this.HighlightedIndex = 0; } break;\n      case 'End': if (this.IsOpen) { event.preventDefault(); this.HighlightedIndex = items.length - 1; } break;\n    }\n  }\n\n  OnBlur(): void { this.onTouched(); }\n\n  GetItemText(item: unknown): string {\n    if (item == null) return '';\n    if (typeof item === 'string') return item;\n    if (this.TextField && typeof item === 'object') return String((item as Record<string, unknown>)[this.TextField] ?? '');\n    return String(item);\n  }\n\n  GetItemValue(item: unknown): unknown {\n    if (typeof item === 'string') return item;\n    if (this.ValueField && typeof item === 'object' && item != null) return (item as Record<string, unknown>)[this.ValueField];\n    return item;\n  }\n\n  TrackByIndex(index: number): number { return index; }\n\n  writeValue(value: unknown): void { this.SelectedValue = value; }\n  registerOnChange(fn: (value: unknown) => void): void { this.onChange = fn; }\n  registerOnTouched(fn: () => void): void { this.onTouched = fn; }\n  setDisabledState(isDisabled: boolean): void { this.IsDisabled = isDisabled || this.Disabled; }\n  ngOnDestroy(): void { this.Close(); }\n\n  private getSelectedIndex(): number {\n    if (this.SelectedValue == null) return -1;\n    return this.FilteredItems.findIndex(item => this.IsItemSelected(item));\n  }\n}\n"]}

package/dist/lib/dropdown/dropdown.scss

@@ -0,0 +1,68 @@
+/**
+ * MJ Dropdown Styles
+ */
+
+.mj-dropdown-host { display: block; width: 100%; }
+
+.mj-dropdown {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 8px 12px;
+  min-height: 38px;
+  background: var(--mj-bg-surface);
+  border: 1px solid var(--mj-border-default);
+  border-radius: var(--mj-radius-sm);
+  font-family: var(--mj-font-family);
+  font-size: var(--mj-text-sm);
+  color: var(--mj-text-primary);
+  cursor: pointer;
+  transition: var(--mj-transition-colors), box-shadow var(--mj-transition-base);
+  outline: none;
+  user-select: none;
+
+  &:hover:not(.mj-dropdown--disabled) { border-color: var(--mj-border-strong); }
+  &:focus-visible:not(.mj-dropdown--disabled) { border-color: var(--mj-brand-primary); box-shadow: var(--mj-focus-ring); }
+  &.mj-dropdown--open { border-color: var(--mj-brand-primary); box-shadow: var(--mj-focus-ring); }
+  &.mj-dropdown--disabled { opacity: 0.5; cursor: not-allowed; background: var(--mj-bg-surface-sunken); }
+}
+
+.mj-dropdown-value { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.mj-dropdown-placeholder { color: var(--mj-text-disabled); }
+.mj-dropdown-arrow {
+  font-size: 0.75rem; color: var(--mj-text-muted); transition: transform var(--mj-transition-fast); flex-shrink: 0;
+  .mj-dropdown--open & { transform: rotate(180deg); }
+}
+.mj-dropdown-backdrop { background: transparent; }
+
+.mj-dropdown-panel {
+  width: 100%;
+  box-sizing: border-box;
+  background: var(--mj-bg-surface-elevated);
+  border: 1px solid var(--mj-border-default);
+  border-radius: var(--mj-radius-sm);
+  box-shadow: var(--mj-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
+  max-height: 300px;
+  overflow-y: auto;
+  z-index: 1000;
+  padding: 4px 0;
+}
+
+.mj-dropdown-filter-wrap { padding: 8px; border-bottom: 1px solid var(--mj-border-default); }
+.mj-dropdown-filter { width: 100%; min-height: 32px; padding: 6px 8px; }
+
+.mj-dropdown-option {
+  display: flex; align-items: center; padding: 8px 12px;
+  font-size: var(--mj-text-sm); color: var(--mj-text-primary);
+  cursor: pointer; transition: background var(--mj-transition-fast); min-height: 36px;
+  &:hover, &.mj-dropdown-option--highlighted { background: var(--mj-bg-surface-hover); }
+  &.mj-dropdown-option--selected {
+    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));
+    color: var(--mj-brand-primary); font-weight: var(--mj-font-semibold);
+  }
+}
+
+.mj-dropdown-no-data { padding: 16px 12px; color: var(--mj-text-muted); text-align: center; font-size: var(--mj-text-sm); }
+
+@media (max-width: 767px) { .mj-dropdown-panel { max-height: 50vh; } }

package/dist/lib/input/chip.scss

@@ -0,0 +1,64 @@
+/**
+ * MJ Status Chip Styles
+ *
+ * Replaces kendo-chip for simple status badges/labels.
+ */
+
+.status-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 10px;
+  font-size: 0.75rem;
+  font-weight: var(--mj-font-semibold);
+  border-radius: var(--mj-radius-full);
+  white-space: nowrap;
+  line-height: 1.5;
+
+  /* Default neutral */
+  background: var(--mj-bg-surface-card);
+  color: var(--mj-text-secondary);
+  border: 1px solid var(--mj-border-default);
+
+  /* Color variants via data-color attribute */
+  &[data-color="success"] {
+    background: var(--mj-status-success-bg);
+    color: var(--mj-status-success-text);
+    border-color: var(--mj-status-success-border);
+  }
+
+  &[data-color="error"] {
+    background: var(--mj-status-error-bg);
+    color: var(--mj-status-error-text);
+    border-color: var(--mj-status-error-border);
+  }
+
+  &[data-color="warning"] {
+    background: var(--mj-status-warning-bg);
+    color: var(--mj-status-warning-text);
+    border-color: var(--mj-status-warning-border);
+  }
+
+  &[data-color="info"] {
+    background: var(--mj-status-info-bg);
+    color: var(--mj-status-info-text);
+    border-color: var(--mj-status-info-border);
+  }
+
+  &[data-color="primary"] {
+    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));
+    color: var(--mj-brand-primary);
+    border-color: var(--mj-brand-primary);
+  }
+
+  /* Removable chip */
+  &.removable {
+    cursor: pointer;
+
+    i { font-size: 0.625rem; margin-left: 2px; }
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+}