@memberjunction/ng-ui-components 0.0.1 → 5.24.0

package/dist/lib/datepicker/datepicker.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"datepicker.component.d.ts","sourceRoot":"","sources":["../../../src/lib/datepicker/datepicker.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,YAAY,EAAkD,SAAS,EAA6B,MAAM,eAAe,CAAC;AAC7J,OAAO,EAAqB,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AACzE,OAAO,EAAiB,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACxE,OAAO,EAAE,WAAW,EAAgE,MAAM,4BAA4B,CAAC;;AAEvH;;GAEG;AACH,qBAkDa,qBAAsB,YAAW,oBAAoB,EAAE,SAAS;IAClE,GAAG,EAAE,IAAI,GAAG,IAAI,CAAQ;IACxB,GAAG,EAAE,IAAI,GAAG,IAAI,CAAQ;IACxB,MAAM,SAAgB;IACtB,WAAW,SAAM;IACjB,QAAQ,UAAS;IAChB,WAAW,4BAAmC;IAClC,OAAO,CAAC,SAAS,CAA2B;IACzB,QAAQ,CAAC,SAAS,QAAQ;IACnE,OAAO,CAAC,GAAG,CAA6B;IAExC,MAAM,UAAS;IAAC,UAAU,UAAS;IAAC,YAAY,SAAM;IACtD,KAAK,EAAE,WAAW,EAAE,EAAE,CAAM;IAAC,QAAQ,WAAa;IAClD,SAAS,EAAE,iBAAiB,EAAE,CAG5B;IACF,OAAO,CAAC,QAAQ,CAAc;IAC9B,OAAO,CAAC,YAAY,CAAqB;IACzC,OAAO,CAAC,QAAQ,CAA0C;IAC1D,OAAO,CAAC,SAAS,CAAwB;IAEzC,IAAI,cAAc,IAAI,MAAM,CAA6C;IAEzE,MAAM,IAAI,IAAI;IACd,IAAI,IAAI,IAAI;IAKZ,KAAK,IAAI,IAAI;IACb,aAAa,IAAI,IAAI;IACrB,SAAS,IAAI,IAAI;IAEjB,UAAU,CAAC,GAAG,EAAE,WAAW,GAAG,IAAI;IAKlC,WAAW,IAAI,IAAI;IAKnB,aAAa,CAAC,GAAG,EAAE,WAAW,GAAG,OAAO;IAIxC,YAAY,CAAC,GAAG,EAAE,WAAW,GAAG,OAAO;IAKvC,aAAa,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAKjC,MAAM,IAAI,IAAI;IACd,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAIrC,UAAU,CAAC,KAAK,EAAE,IAAI,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI;IAI7C,gBAAgB,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,GAAG,IAAI;IACxD,iBAAiB,CAAC,EAAE,EAAE,MAAM,IAAI,GAAG,IAAI;IACvC,gBAAgB,CAAC,UAAU,EAAE,OAAO,GAAG,IAAI;IAC3C,WAAW,IAAI,IAAI;yCAtER,qBAAqB;2CAArB,qBAAqB;CAuEjC"}

package/dist/lib/datepicker/datepicker.component.js

@@ -0,0 +1,279 @@
+import { Component, Input, Output, EventEmitter, forwardRef, HostBinding, ViewChild, inject, ChangeDetectorRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { OverlayModule } from '@angular/cdk/overlay';
+import { WEEK_DAYS, BuildCalendarWeeks, FormatDate, GetMonthYearLabel } from '../calendar/calendar-utils';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/cdk/overlay";
+const _c0 = ["trigger"];
+const _forTrack0 = ($index, $item) => $item.date.getTime();
+function MJDatepickerComponent_ng_template_7_For_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 15);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const day_r4 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(day_r4);
+} }
+function MJDatepickerComponent_ng_template_7_For_12_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 20);
+    i0.ɵɵlistener("click", function MJDatepickerComponent_ng_template_7_For_12_For_2_Template_button_click_0_listener() { const day_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.SelectDate(day_r6)); });
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const day_r6 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassProp("mj-calendar-day--selected", ctx_r2.IsSelectedDay(day_r6))("mj-calendar-day--today", day_r6.isToday)("mj-calendar-day--other-month", !day_r6.isCurrentMonth);
+    i0.ɵɵproperty("disabled", ctx_r2.IsOutOfRange(day_r6));
+    i0.ɵɵattribute("aria-selected", ctx_r2.IsSelectedDay(day_r6));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(day_r6.dayNumber);
+} }
+function MJDatepickerComponent_ng_template_7_For_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 16);
+    i0.ɵɵrepeaterCreate(1, MJDatepickerComponent_ng_template_7_For_12_For_2_Template, 2, 9, "button", 19, _forTrack0);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const week_r7 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(week_r7);
+} }
+function MJDatepickerComponent_ng_template_7_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 7)(1, "div", 8)(2, "button", 9);
+    i0.ɵɵlistener("click", function MJDatepickerComponent_ng_template_7_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.PreviousMonth()); });
+    i0.ɵɵelement(3, "i", 10);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "span", 11);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "button", 12);
+    i0.ɵɵlistener("click", function MJDatepickerComponent_ng_template_7_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.NextMonth()); });
+    i0.ɵɵelement(7, "i", 13);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(8, "div", 14);
+    i0.ɵɵrepeaterCreate(9, MJDatepickerComponent_ng_template_7_For_10_Template, 2, 1, "span", 15, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd();
+    i0.ɵɵrepeaterCreate(11, MJDatepickerComponent_ng_template_7_For_12_Template, 3, 0, "div", 16, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵelementStart(13, "div", 17)(14, "button", 18);
+    i0.ɵɵlistener("click", function MJDatepickerComponent_ng_template_7_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.SelectToday()); });
+    i0.ɵɵtext(15, "Today");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r2.MonthYearLabel);
+    i0.ɵɵadvance(4);
+    i0.ɵɵrepeater(ctx_r2.WeekDays);
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r2.Weeks);
+} }
+/**
+ * mj-datepicker — Date picker with calendar popup. Replaces `<kendo-datepicker>`.
+ */
+export class MJDatepickerComponent {
+    Min = null;
+    Max = null;
+    Format = 'MM/dd/yyyy';
+    Placeholder = '';
+    Disabled = false;
+    ValueChange = new EventEmitter();
+    triggerEl;
+    hostClass = true;
+    cdr = inject(ChangeDetectorRef);
+    IsOpen = false;
+    IsDisabled = false;
+    DisplayValue = '';
+    Weeks = [];
+    WeekDays = WEEK_DAYS;
+    Positions = [
+        { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
+        { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' }
+    ];
+    viewDate = new Date();
+    selectedDate = null;
+    onChange = () => { };
+    onTouched = () => { };
+    get MonthYearLabel() { return GetMonthYearLabel(this.viewDate); }
+    Toggle() { if (this.IsDisabled)
+        return; this.IsOpen ? this.Close() : this.Open(); }
+    Open() {
+        if (this.IsDisabled || this.IsOpen)
+            return;
+        this.viewDate = this.selectedDate ? new Date(this.selectedDate) : new Date();
+        this.Weeks = BuildCalendarWeeks(this.viewDate);
+        this.IsOpen = true;
+        this.cdr.detectChanges();
+    }
+    Close() { if (!this.IsOpen)
+        return; this.IsOpen = false; this.cdr.detectChanges(); }
+    PreviousMonth() { this.viewDate = new Date(this.viewDate.getFullYear(), this.viewDate.getMonth() - 1, 1); this.Weeks = BuildCalendarWeeks(this.viewDate); }
+    NextMonth() { this.viewDate = new Date(this.viewDate.getFullYear(), this.viewDate.getMonth() + 1, 1); this.Weeks = BuildCalendarWeeks(this.viewDate); }
+    SelectDate(day) {
+        if (this.IsOutOfRange(day))
+            return;
+        this.selectedDate = day.date;
+        this.DisplayValue = FormatDate(day.date);
+        this.onChange(day.date);
+        this.ValueChange.emit(day.date);
+        this.Close();
+    }
+    SelectToday() {
+        const today = new Date();
+        today.setHours(0, 0, 0, 0);
+        this.selectedDate = today;
+        this.DisplayValue = FormatDate(today);
+        this.onChange(today);
+        this.ValueChange.emit(today);
+        this.Close();
+    }
+    IsSelectedDay(day) {
+        if (!this.selectedDate)
+            return false;
+        return day.date.getFullYear() === this.selectedDate.getFullYear() && day.date.getMonth() === this.selectedDate.getMonth() && day.date.getDate() === this.selectedDate.getDate();
+    }
+    IsOutOfRange(day) {
+        if (this.Min && day.date < this.Min)
+            return true;
+        if (this.Max && day.date > this.Max)
+            return true;
+        return false;
+    }
+    OnInputChange(event) {
+        const value = event.target.value;
+        this.DisplayValue = value;
+        const parsed = new Date(value);
+        if (!isNaN(parsed.getTime())) {
+            this.selectedDate = parsed;
+            this.onChange(parsed);
+            this.ValueChange.emit(parsed);
+        }
+    }
+    OnBlur() { this.onTouched(); }
+    OnKeyDown(event) {
+        if (event.key === 'Escape')
+            this.Close();
+        else if (event.key === 'Enter' && !this.IsOpen)
+            this.Open();
+    }
+    writeValue(value) {
+        if (value == null) {
+            this.selectedDate = null;
+            this.DisplayValue = '';
+        }
+        else {
+            const d = typeof value === 'string' ? new Date(value) : value;
+            if (!isNaN(d.getTime())) {
+                this.selectedDate = d;
+                this.DisplayValue = FormatDate(d);
+            }
+        }
+    }
+    registerOnChange(fn) { this.onChange = fn; }
+    registerOnTouched(fn) { this.onTouched = fn; }
+    setDisabledState(isDisabled) { this.IsDisabled = isDisabled || this.Disabled; }
+    ngOnDestroy() { this.Close(); }
+    static ɵfac = function MJDatepickerComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MJDatepickerComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJDatepickerComponent, selectors: [["mj-datepicker"]], viewQuery: function MJDatepickerComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.triggerEl = _t.first);
+        } }, hostVars: 2, hostBindings: function MJDatepickerComponent_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵclassProp("mj-datepicker-host", ctx.hostClass);
+        } }, inputs: { Min: "Min", Max: "Max", Format: "Format", Placeholder: "Placeholder", Disabled: "Disabled" }, outputs: { ValueChange: "ValueChange" }, features: [i0.ɵɵProvidersFeature([{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => MJDatepickerComponent), multi: true }])], decls: 8, vars: 10, consts: [["trigger", "", "overlayOrigin", "cdkOverlayOrigin"], ["dateInput", ""], ["cdkOverlayOrigin", "", 1, "mj-datepicker"], ["type", "text", 1, "mj-input", "mj-datepicker-input", 3, "input", "blur", "keydown", "placeholder", "disabled", "value"], ["type", "button", "tabindex", "-1", "aria-label", "Open calendar", 1, "mj-datepicker-toggle", 3, "click", "disabled"], [1, "fa-solid", "fa-calendar"], ["cdkConnectedOverlay", "", "cdkConnectedOverlayBackdropClass", "mj-dropdown-backdrop", 3, "backdropClick", "detach", "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayPositions", "cdkConnectedOverlayHasBackdrop"], ["role", "grid", "aria-label", "Calendar", 1, "mj-calendar"], [1, "mj-calendar-header"], ["type", "button", "aria-label", "Previous month", 1, "mj-calendar-nav", 3, "click"], [1, "fa-solid", "fa-chevron-left"], [1, "mj-calendar-title"], ["type", "button", "aria-label", "Next month", 1, "mj-calendar-nav", 3, "click"], [1, "fa-solid", "fa-chevron-right"], ["role", "row", 1, "mj-calendar-weekdays"], ["role", "columnheader", 1, "mj-calendar-weekday"], ["role", "row", 1, "mj-calendar-row"], [1, "mj-calendar-footer"], ["type", "button", 1, "mj-calendar-today", 3, "click"], ["type", "button", "role", "gridcell", 1, "mj-calendar-day", 3, "mj-calendar-day--selected", "mj-calendar-day--today", "mj-calendar-day--other-month", "disabled"], ["type", "button", "role", "gridcell", 1, "mj-calendar-day", 3, "click", "disabled"]], template: function MJDatepickerComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "div", 2, 0)(3, "input", 3, 1);
+            i0.ɵɵlistener("input", function MJDatepickerComponent_Template_input_input_3_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnInputChange($event)); })("blur", function MJDatepickerComponent_Template_input_blur_3_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnBlur()); })("keydown", function MJDatepickerComponent_Template_input_keydown_3_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnKeyDown($event)); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(5, "button", 4);
+            i0.ɵɵlistener("click", function MJDatepickerComponent_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.Toggle()); });
+            i0.ɵɵelement(6, "i", 5);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵtemplate(7, MJDatepickerComponent_ng_template_7_Template, 16, 1, "ng-template", 6);
+            i0.ɵɵlistener("backdropClick", function MJDatepickerComponent_Template_ng_template_backdropClick_7_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.Close()); })("detach", function MJDatepickerComponent_Template_ng_template_detach_7_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.Close()); });
+        } if (rf & 2) {
+            const overlayOrigin_r8 = i0.ɵɵreference(2);
+            i0.ɵɵclassProp("mj-datepicker--disabled", ctx.IsDisabled);
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("placeholder", ctx.Placeholder)("disabled", ctx.IsDisabled)("value", ctx.DisplayValue);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("disabled", ctx.IsDisabled);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("cdkConnectedOverlayOrigin", overlayOrigin_r8)("cdkConnectedOverlayOpen", ctx.IsOpen)("cdkConnectedOverlayPositions", ctx.Positions)("cdkConnectedOverlayHasBackdrop", true);
+        } }, dependencies: [OverlayModule, i1.CdkConnectedOverlay, i1.CdkOverlayOrigin], encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJDatepickerComponent, [{
+        type: Component,
+        args: [{
+                selector: 'mj-datepicker',
+                standalone: true,
+                imports: [OverlayModule],
+                template: `
+    <div class="mj-datepicker" #trigger cdkOverlayOrigin #overlayOrigin="cdkOverlayOrigin"
+      [class.mj-datepicker--disabled]="IsDisabled">
+      <input #dateInput class="mj-input mj-datepicker-input" type="text"
+        [placeholder]="Placeholder" [disabled]="IsDisabled" [value]="DisplayValue"
+        (input)="OnInputChange($event)" (blur)="OnBlur()" (keydown)="OnKeyDown($event)" />
+      <button type="button" class="mj-datepicker-toggle" tabindex="-1" [disabled]="IsDisabled"
+        (click)="Toggle()" aria-label="Open calendar">
+        <i class="fa-solid fa-calendar"></i>
+      </button>
+    </div>
+    <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]="overlayOrigin"
+      [cdkConnectedOverlayOpen]="IsOpen" [cdkConnectedOverlayPositions]="Positions"
+      [cdkConnectedOverlayHasBackdrop]="true" cdkConnectedOverlayBackdropClass="mj-dropdown-backdrop"
+      (backdropClick)="Close()" (detach)="Close()">
+      <div class="mj-calendar" role="grid" aria-label="Calendar">
+        <div class="mj-calendar-header">
+          <button type="button" (click)="PreviousMonth()" aria-label="Previous month" class="mj-calendar-nav">
+            <i class="fa-solid fa-chevron-left"></i></button>
+          <span class="mj-calendar-title">{{ MonthYearLabel }}</span>
+          <button type="button" (click)="NextMonth()" aria-label="Next month" class="mj-calendar-nav">
+            <i class="fa-solid fa-chevron-right"></i></button>
+        </div>
+        <div class="mj-calendar-weekdays" role="row">
+          @for (day of WeekDays; track day) { <span class="mj-calendar-weekday" role="columnheader">{{ day }}</span> }
+        </div>
+        @for (week of Weeks; track $index) {
+          <div class="mj-calendar-row" role="row">
+            @for (day of week; track day.date.getTime()) {
+              <button type="button" class="mj-calendar-day" role="gridcell"
+                [class.mj-calendar-day--selected]="IsSelectedDay(day)"
+                [class.mj-calendar-day--today]="day.isToday"
+                [class.mj-calendar-day--other-month]="!day.isCurrentMonth"
+                [disabled]="IsOutOfRange(day)" [attr.aria-selected]="IsSelectedDay(day)"
+                (click)="SelectDate(day)">{{ day.dayNumber }}</button>
+            }
+          </div>
+        }
+        <div class="mj-calendar-footer">
+          <button type="button" class="mj-calendar-today" (click)="SelectToday()">Today</button>
+        </div>
+      </div>
+    </ng-template>
+  `,
+                providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => MJDatepickerComponent), multi: true }]
+            }]
+    }], null, { Min: [{
+            type: Input
+        }], Max: [{
+            type: Input
+        }], Format: [{
+            type: Input
+        }], Placeholder: [{
+            type: Input
+        }], Disabled: [{
+            type: Input
+        }], ValueChange: [{
+            type: Output
+        }], triggerEl: [{
+            type: ViewChild,
+            args: ['trigger']
+        }], hostClass: [{
+            type: HostBinding,
+            args: ['class.mj-datepicker-host']
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJDatepickerComponent, { className: "MJDatepickerComponent", filePath: "lib/datepicker/datepicker.component.ts", lineNumber: 59 }); })();
+//# sourceMappingURL=datepicker.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"datepicker.component.js","sourceRoot":"","sources":["../../../src/lib/datepicker/datepicker.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, Input, Output, EventEmitter, forwardRef, HostBinding, ElementRef, ViewChild, OnDestroy, inject, ChangeDetectorRef } from '@angular/core';\nimport { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';\nimport { OverlayModule, ConnectedPosition } from '@angular/cdk/overlay';\nimport { CalendarDay, WEEK_DAYS, BuildCalendarWeeks, FormatDate, GetMonthYearLabel } from '../calendar/calendar-utils';\n\n/**\n * mj-datepicker — Date picker with calendar popup. Replaces `<kendo-datepicker>`.\n */\n@Component({\n  selector: 'mj-datepicker',\n  standalone: true,\n  imports: [OverlayModule],\n  template: `\n    <div class=\"mj-datepicker\" #trigger cdkOverlayOrigin #overlayOrigin=\"cdkOverlayOrigin\"\n      [class.mj-datepicker--disabled]=\"IsDisabled\">\n      <input #dateInput class=\"mj-input mj-datepicker-input\" type=\"text\"\n        [placeholder]=\"Placeholder\" [disabled]=\"IsDisabled\" [value]=\"DisplayValue\"\n        (input)=\"OnInputChange($event)\" (blur)=\"OnBlur()\" (keydown)=\"OnKeyDown($event)\" />\n      <button type=\"button\" class=\"mj-datepicker-toggle\" tabindex=\"-1\" [disabled]=\"IsDisabled\"\n        (click)=\"Toggle()\" aria-label=\"Open calendar\">\n        <i class=\"fa-solid fa-calendar\"></i>\n      </button>\n    </div>\n    <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n      [cdkConnectedOverlayOpen]=\"IsOpen\" [cdkConnectedOverlayPositions]=\"Positions\"\n      [cdkConnectedOverlayHasBackdrop]=\"true\" cdkConnectedOverlayBackdropClass=\"mj-dropdown-backdrop\"\n      (backdropClick)=\"Close()\" (detach)=\"Close()\">\n      <div class=\"mj-calendar\" role=\"grid\" aria-label=\"Calendar\">\n        <div class=\"mj-calendar-header\">\n          <button type=\"button\" (click)=\"PreviousMonth()\" aria-label=\"Previous month\" class=\"mj-calendar-nav\">\n            <i class=\"fa-solid fa-chevron-left\"></i></button>\n          <span class=\"mj-calendar-title\">{{ MonthYearLabel }}</span>\n          <button type=\"button\" (click)=\"NextMonth()\" aria-label=\"Next month\" class=\"mj-calendar-nav\">\n            <i class=\"fa-solid fa-chevron-right\"></i></button>\n        </div>\n        <div class=\"mj-calendar-weekdays\" role=\"row\">\n          @for (day of WeekDays; track day) { <span class=\"mj-calendar-weekday\" role=\"columnheader\">{{ day }}</span> }\n        </div>\n        @for (week of Weeks; track $index) {\n          <div class=\"mj-calendar-row\" role=\"row\">\n            @for (day of week; track day.date.getTime()) {\n              <button type=\"button\" class=\"mj-calendar-day\" role=\"gridcell\"\n                [class.mj-calendar-day--selected]=\"IsSelectedDay(day)\"\n                [class.mj-calendar-day--today]=\"day.isToday\"\n                [class.mj-calendar-day--other-month]=\"!day.isCurrentMonth\"\n                [disabled]=\"IsOutOfRange(day)\" [attr.aria-selected]=\"IsSelectedDay(day)\"\n                (click)=\"SelectDate(day)\">{{ day.dayNumber }}</button>\n            }\n          </div>\n        }\n        <div class=\"mj-calendar-footer\">\n          <button type=\"button\" class=\"mj-calendar-today\" (click)=\"SelectToday()\">Today</button>\n        </div>\n      </div>\n    </ng-template>\n  `,\n  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => MJDatepickerComponent), multi: true }]\n})\nexport class MJDatepickerComponent implements ControlValueAccessor, OnDestroy {\n  @Input() Min: Date | null = null;\n  @Input() Max: Date | null = null;\n  @Input() Format = 'MM/dd/yyyy';\n  @Input() Placeholder = '';\n  @Input() Disabled = false;\n  @Output() ValueChange = new EventEmitter<Date | null>();\n  @ViewChild('trigger') private triggerEl!: ElementRef<HTMLElement>;\n  @HostBinding('class.mj-datepicker-host') readonly hostClass = true;\n  private cdr = inject(ChangeDetectorRef);\n\n  IsOpen = false; IsDisabled = false; DisplayValue = '';\n  Weeks: CalendarDay[][] = []; WeekDays = WEEK_DAYS;\n  Positions: ConnectedPosition[] = [\n    { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },\n    { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' }\n  ];\n  private viewDate = new Date();\n  private selectedDate: Date | null = null;\n  private onChange: (value: Date | null) => void = () => {};\n  private onTouched: () => void = () => {};\n\n  get MonthYearLabel(): string { return GetMonthYearLabel(this.viewDate); }\n\n  Toggle(): void { if (this.IsDisabled) return; this.IsOpen ? this.Close() : this.Open(); }\n  Open(): void {\n    if (this.IsDisabled || this.IsOpen) return;\n    this.viewDate = this.selectedDate ? new Date(this.selectedDate) : new Date();\n    this.Weeks = BuildCalendarWeeks(this.viewDate); this.IsOpen = true; this.cdr.detectChanges();\n  }\n  Close(): void { if (!this.IsOpen) return; this.IsOpen = false; this.cdr.detectChanges(); }\n  PreviousMonth(): void { this.viewDate = new Date(this.viewDate.getFullYear(), this.viewDate.getMonth() - 1, 1); this.Weeks = BuildCalendarWeeks(this.viewDate); }\n  NextMonth(): void { this.viewDate = new Date(this.viewDate.getFullYear(), this.viewDate.getMonth() + 1, 1); this.Weeks = BuildCalendarWeeks(this.viewDate); }\n\n  SelectDate(day: CalendarDay): void {\n    if (this.IsOutOfRange(day)) return;\n    this.selectedDate = day.date; this.DisplayValue = FormatDate(day.date);\n    this.onChange(day.date); this.ValueChange.emit(day.date); this.Close();\n  }\n  SelectToday(): void {\n    const today = new Date(); today.setHours(0, 0, 0, 0);\n    this.selectedDate = today; this.DisplayValue = FormatDate(today);\n    this.onChange(today); this.ValueChange.emit(today); this.Close();\n  }\n  IsSelectedDay(day: CalendarDay): boolean {\n    if (!this.selectedDate) return false;\n    return day.date.getFullYear() === this.selectedDate.getFullYear() && day.date.getMonth() === this.selectedDate.getMonth() && day.date.getDate() === this.selectedDate.getDate();\n  }\n  IsOutOfRange(day: CalendarDay): boolean {\n    if (this.Min && day.date < this.Min) return true;\n    if (this.Max && day.date > this.Max) return true;\n    return false;\n  }\n  OnInputChange(event: Event): void {\n    const value = (event.target as HTMLInputElement).value; this.DisplayValue = value;\n    const parsed = new Date(value);\n    if (!isNaN(parsed.getTime())) { this.selectedDate = parsed; this.onChange(parsed); this.ValueChange.emit(parsed); }\n  }\n  OnBlur(): void { this.onTouched(); }\n  OnKeyDown(event: KeyboardEvent): void {\n    if (event.key === 'Escape') this.Close();\n    else if (event.key === 'Enter' && !this.IsOpen) this.Open();\n  }\n  writeValue(value: Date | string | null): void {\n    if (value == null) { this.selectedDate = null; this.DisplayValue = ''; }\n    else { const d = typeof value === 'string' ? new Date(value) : value; if (!isNaN(d.getTime())) { this.selectedDate = d; this.DisplayValue = FormatDate(d); } }\n  }\n  registerOnChange(fn: (value: Date | null) => 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"]}

package/dist/lib/datepicker/datepicker.scss

@@ -0,0 +1,60 @@
+/**
+ * MJ Datepicker / Calendar Styles
+ */
+
+.mj-datepicker-host { display: inline-block; width: 100%; }
+
+.mj-datepicker {
+  display: flex; align-items: center;
+  background: var(--mj-bg-surface); border: 1px solid var(--mj-border-default);
+  border-radius: var(--mj-radius-sm); transition: var(--mj-transition-colors), box-shadow var(--mj-transition-base);
+  &:hover:not(.mj-datepicker--disabled) { border-color: var(--mj-border-strong); }
+  &:focus-within:not(.mj-datepicker--disabled) { border-color: var(--mj-brand-primary); box-shadow: var(--mj-focus-ring); }
+  &.mj-datepicker--disabled { opacity: 0.5; cursor: not-allowed; background: var(--mj-bg-surface-sunken); }
+}
+
+.mj-datepicker-input { flex: 1; border: none !important; outline: none !important; box-shadow: none !important; background: transparent !important; min-width: 0; }
+
+.mj-datepicker-toggle {
+  display: flex; align-items: center; justify-content: center; width: 38px; align-self: stretch;
+  background: none; border: none; border-left: 1px solid var(--mj-border-default);
+  cursor: pointer; color: var(--mj-text-muted); padding: 0;
+  &:hover:not(:disabled) { color: var(--mj-brand-primary); background: var(--mj-bg-surface-hover); }
+  &:disabled { cursor: not-allowed; }
+}
+
+.mj-calendar {
+  background: var(--mj-bg-surface-elevated); border: 1px solid var(--mj-border-default);
+  border-radius: var(--mj-radius-md); box-shadow: var(--mj-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
+  padding: 12px; width: 280px; z-index: 1000;
+}
+.mj-calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
+.mj-calendar-title { font-weight: var(--mj-font-semibold); font-size: var(--mj-text-sm); color: var(--mj-text-primary); }
+.mj-calendar-nav {
+  display: flex; align-items: center; justify-content: center; width: 32px; height: 32px;
+  border: none; background: none; cursor: pointer; color: var(--mj-text-muted); border-radius: var(--mj-radius-sm);
+  &:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }
+}
+.mj-calendar-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; }
+.mj-calendar-weekday { text-align: center; font-size: 0.75rem; font-weight: var(--mj-font-semibold); color: var(--mj-text-muted); padding: 4px 0; }
+.mj-calendar-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
+.mj-calendar-day {
+  display: flex; align-items: center; justify-content: center; width: 36px; height: 36px;
+  border: none; background: none; cursor: pointer; font-size: var(--mj-text-sm);
+  color: var(--mj-text-primary); border-radius: var(--mj-radius-sm);
+  transition: background var(--mj-transition-fast);
+  &:hover:not(:disabled):not(.mj-calendar-day--selected) { background: var(--mj-bg-surface-hover); }
+  &.mj-calendar-day--selected { background: var(--mj-brand-primary); color: var(--mj-brand-on-primary); font-weight: var(--mj-font-semibold); }
+  &.mj-calendar-day--today:not(.mj-calendar-day--selected) { font-weight: var(--mj-font-semibold); border: 1px solid var(--mj-brand-primary); }
+  &.mj-calendar-day--other-month { color: var(--mj-text-disabled); }
+  &:disabled { color: var(--mj-text-disabled); cursor: not-allowed; opacity: 0.4; }
+}
+.mj-calendar-footer { display: flex; justify-content: center; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--mj-border-default); }
+.mj-calendar-today {
+  background: none; border: none; color: var(--mj-brand-primary);
+  font-size: var(--mj-text-sm); font-weight: var(--mj-font-semibold);
+  cursor: pointer; padding: 4px 12px; border-radius: var(--mj-radius-sm);
+  &:hover { background: var(--mj-bg-surface-hover); }
+}
+
+@media (prefers-reduced-motion: reduce) { .mj-calendar-day { transition: none; } }

package/dist/lib/dialog/dialog.component.d.ts

@@ -0,0 +1,84 @@
+import { EventEmitter, OnDestroy } from '@angular/core';
+import * as i0 from "@angular/core";
+export type MjDialogSize = 'sm' | 'md' | 'lg' | 'xl' | 'auto';
+/**
+ * mj-dialog — Modal dialog component using native `<dialog>` element.
+ *
+ * Replaces `<kendo-dialog>`.
+ *
+ * Supports both explicit width/height and size presets.
+ * Content is projected, with an optional `<mj-dialog-actions>` for the footer.
+ *
+ * @example
+ * ```html
+ * <mj-dialog [Visible]="showDialog" Title="Confirm" (Close)="onClose()">
+ *   <p>Are you sure?</p>
+ *   <mj-dialog-actions>
+ *     <button mjButton variant="primary" (click)="onConfirm()">Yes</button>
+ *     <button mjButton (click)="onClose()">No</button>
+ *   </mj-dialog-actions>
+ * </mj-dialog>
+ * ```
+ */
+export declare class MJDialogComponent implements OnDestroy {
+    private _visible;
+    private static nextId;
+    set Visible(value: boolean);
+    get Visible(): boolean;
+    Title: string;
+    Width: number | string | null;
+    Height: number | string | null;
+    Size: MjDialogSize;
+    Closeable: boolean;
+    MinWidth: number | null;
+    Close: EventEmitter<void>;
+    DialogId: number;
+    get dialogId(): number;
+    get resolvedWidth(): string;
+    get resolvedHeight(): string;
+    OnEscapeKey(): void;
+    OnBackdropClick(event: Event): void;
+    OnCloseClick(): void;
+    private onOpen;
+    private onCloseInternal;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MJDialogComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MJDialogComponent, "mj-dialog", never, { "Visible": { "alias": "Visible"; "required": false; }; "Title": { "alias": "Title"; "required": false; }; "Width": { "alias": "Width"; "required": false; }; "Height": { "alias": "Height"; "required": false; }; "Size": { "alias": "Size"; "required": false; }; "Closeable": { "alias": "Closeable"; "required": false; }; "MinWidth": { "alias": "MinWidth"; "required": false; }; }, { "Close": "Close"; }, never, ["mj-dialog-titlebar", "*", "mj-dialog-actions"], true, never>;
+}
+/**
+ * mj-dialog-titlebar — Custom titlebar content for mj-dialog.
+ *
+ * Replaces `<kendo-dialog-titlebar>`.
+ *
+ * @example
+ * ```html
+ * <mj-dialog [Visible]="show" (Close)="onClose()">
+ *   <mj-dialog-titlebar>
+ *     <i class="fa-solid fa-save"></i> Custom Title
+ *   </mj-dialog-titlebar>
+ *   <p>Dialog content</p>
+ * </mj-dialog>
+ * ```
+ */
+export declare class MJDialogTitlebarComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MJDialogTitlebarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MJDialogTitlebarComponent, "mj-dialog-titlebar", never, {}, {}, never, ["*"], true, never>;
+}
+/**
+ * mj-dialog-actions — Footer action bar for mj-dialog.
+ *
+ * Replaces `<kendo-dialog-actions>`.
+ *
+ * @example
+ * ```html
+ * <mj-dialog-actions>
+ *   <button mjButton variant="primary">Save</button>
+ *   <button mjButton>Cancel</button>
+ * </mj-dialog-actions>
+ * ```
+ */
+export declare class MJDialogActionsComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MJDialogActionsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MJDialogActionsComponent, "mj-dialog-actions", never, {}, {}, never, ["*"], true, never>;
+}
+//# sourceMappingURL=dialog.component.d.ts.map

package/dist/lib/dialog/dialog.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.component.d.ts","sourceRoot":"","sources":["../../../src/lib/dialog/dialog.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,YAAY,EAKZ,SAAS,EAEV,MAAM,eAAe,CAAC;;AAEvB,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAU9D;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBA2Ca,iBAAkB,YAAW,SAAS;IACjD,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,MAAM,CAAC,MAAM,CAAK;IAE1B,IACI,OAAO,CAAC,KAAK,EAAE,OAAO,EASzB;IACD,IAAI,OAAO,IAAI,OAAO,CAErB;IAEQ,KAAK,SAAM;IACX,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAQ;IACrC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAQ;IACtC,IAAI,EAAE,YAAY,CAAU;IAC5B,SAAS,UAAQ;IACjB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE9B,KAAK,qBAA4B;IAE3C,QAAQ,SAA8B;IAEtC,IAAI,QAAQ,IAAI,MAAM,CAErB;IAED,IAAI,aAAa,IAAI,MAAM,CAK1B;IAED,IAAI,cAAc,IAAI,MAAM,CAK3B;IAGD,WAAW,IAAI,IAAI;IAMnB,eAAe,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAMnC,YAAY,IAAI,IAAI;IAIpB,OAAO,CAAC,MAAM;IAId,OAAO,CAAC,eAAe;IAIvB,WAAW,IAAI,IAAI;yCAzER,iBAAiB;2CAAjB,iBAAiB;CA4E7B;AAED;;;;;;;;;;;;;;GAcG;AACH,qBAKa,yBAAyB;yCAAzB,yBAAyB;2CAAzB,yBAAyB;CAAG;AAEzC;;;;;;;;;;;;GAYG;AACH,qBASa,wBAAwB;yCAAxB,wBAAwB;2CAAxB,wBAAwB;CAAG"}