@kouji-ui/components 0.1.5 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -771,6 +771,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
771
771
|
* --kj-badge-dot-size — Diameter of the leading dot (when `dot` is set).
|
|
772
772
|
* --kj-badge-dot-color — Fill of the leading dot. Defaults to currentColor.
|
|
773
773
|
*
|
|
774
|
+
* Custom colours: the `bg` / `fg` / `dotColor` inputs set these variables as
|
|
775
|
+
* inline styles on the badge span, so they win over any variant or theme rule.
|
|
776
|
+
* Use for data-driven colour maps (status pills, role badges).
|
|
777
|
+
*
|
|
774
778
|
* @doc-category Library/Data display
|
|
775
779
|
* @doc
|
|
776
780
|
* @doc-name badge
|
|
@@ -783,14 +787,26 @@ class KjBadgeComponent {
|
|
|
783
787
|
size = input('md', /* @ts-ignore */
|
|
784
788
|
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
785
789
|
dot = input(false, { ...(ngDevMode ? { debugName: "dot" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
790
|
+
/** Custom background — any CSS color/var(). Wins over the variant (inline style). Empty = variant colours. */
|
|
791
|
+
bg = input('', /* @ts-ignore */
|
|
792
|
+
...(ngDevMode ? [{ debugName: "bg" }] : /* istanbul ignore next */ []));
|
|
793
|
+
/** Custom foreground — any CSS color/var(). Wins over the variant (inline style). */
|
|
794
|
+
fg = input('', /* @ts-ignore */
|
|
795
|
+
...(ngDevMode ? [{ debugName: "fg" }] : /* istanbul ignore next */ []));
|
|
796
|
+
/** Custom dot colour (with `dot`). Defaults to currentColor via the theme. */
|
|
797
|
+
dotColor = input('', /* @ts-ignore */
|
|
798
|
+
...(ngDevMode ? [{ debugName: "dotColor" }] : /* istanbul ignore next */ []));
|
|
786
799
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
787
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: KjBadgeComponent, isStandalone: true, selector: "kj-badge", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "dot", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: contents;" }, ngImport: i0, template: `
|
|
800
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: KjBadgeComponent, isStandalone: true, selector: "kj-badge", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "dot", isSignal: true, isRequired: false, transformFunction: null }, bg: { classPropertyName: "bg", publicName: "bg", isSignal: true, isRequired: false, transformFunction: null }, fg: { classPropertyName: "fg", publicName: "fg", isSignal: true, isRequired: false, transformFunction: null }, dotColor: { classPropertyName: "dotColor", publicName: "dotColor", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: contents;" }, ngImport: i0, template: `
|
|
788
801
|
<span
|
|
789
802
|
kjBadge
|
|
790
803
|
class="kj-badge"
|
|
791
804
|
[kjBadgeVariant]="variant()"
|
|
792
805
|
[kjBadgeDot]="dot()"
|
|
793
806
|
[attr.data-size]="size()"
|
|
807
|
+
[style.--kj-badge-bg]="bg() || null"
|
|
808
|
+
[style.--kj-badge-fg]="fg() || null"
|
|
809
|
+
[style.--kj-badge-dot-color]="dotColor() || null"
|
|
794
810
|
>
|
|
795
811
|
<ng-content />
|
|
796
812
|
</span>
|
|
@@ -805,11 +821,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
805
821
|
[kjBadgeVariant]="variant()"
|
|
806
822
|
[kjBadgeDot]="dot()"
|
|
807
823
|
[attr.data-size]="size()"
|
|
824
|
+
[style.--kj-badge-bg]="bg() || null"
|
|
825
|
+
[style.--kj-badge-fg]="fg() || null"
|
|
826
|
+
[style.--kj-badge-dot-color]="dotColor() || null"
|
|
808
827
|
>
|
|
809
828
|
<ng-content />
|
|
810
829
|
</span>
|
|
811
830
|
`, encapsulation: ViewEncapsulation.None, host: { style: 'display: contents;' }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer kj.component{.kj-badge{--kj-badge-bg: var(--kj-bg-primary);--kj-badge-fg: var(--kj-fg-on-primary);--kj-badge-border-color: transparent;--kj-badge-radius: var(--kj-radius-selector);--kj-badge-padding-x: var(--kj-space-sm);--kj-badge-padding-y: .125rem;--kj-badge-font-size: .75rem;--kj-badge-dot-size: .375rem;--kj-badge-dot-color: currentColor;display:inline-flex;align-items:center;gap:.25rem;background:var(--kj-badge-bg);color:var(--kj-badge-fg);border:var(--kj-border) solid var(--kj-badge-border-color);border-radius:var(--kj-badge-radius);padding:var(--kj-badge-padding-y) var(--kj-badge-padding-x);font:var(--kj-badge-font-size) / 1 var(--kj-font-sans);font-weight:500}.kj-badge[data-dot]:before{content:\"\";flex:none;width:var(--kj-badge-dot-size);height:var(--kj-badge-dot-size);border-radius:50%;background:var(--kj-badge-dot-color)}.kj-badge[data-variant=secondary]{--kj-badge-bg: var(--kj-bg-surface);--kj-badge-fg: var(--kj-fg-default)}.kj-badge[data-variant=destructive]{--kj-badge-bg: var(--kj-bg-danger);--kj-badge-fg: var(--kj-fg-on-danger)}.kj-badge[data-variant=outline]{--kj-badge-bg: transparent;--kj-badge-fg: var(--kj-fg-default);--kj-badge-border-color: var(--kj-border-default)}.kj-badge[data-size=xs]{--kj-badge-padding-x: .1875rem;--kj-badge-padding-y: .03125rem;--kj-badge-font-size: .5625rem}.kj-badge[data-size=sm]{--kj-badge-padding-x: .375rem;--kj-badge-padding-y: .125rem;--kj-badge-font-size: .6875rem}.kj-badge[data-size=lg]{--kj-badge-padding-x: var(--kj-space-md);--kj-badge-font-size: .875rem}}\n"] }]
|
|
812
|
-
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], dot: [{ type: i0.Input, args: [{ isSignal: true, alias: "dot", required: false }] }] } });
|
|
831
|
+
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], dot: [{ type: i0.Input, args: [{ isSignal: true, alias: "dot", required: false }] }], bg: [{ type: i0.Input, args: [{ isSignal: true, alias: "bg", required: false }] }], fg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fg", required: false }] }], dotColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "dotColor", required: false }] }] } });
|
|
813
832
|
|
|
814
833
|
/**
|
|
815
834
|
* Styled wrapper around the headless `KjBreadcrumb` directive — root of the
|
|
@@ -3548,7 +3567,7 @@ class KjDatePickerComponent {
|
|
|
3548
3567
|
/>
|
|
3549
3568
|
</div>
|
|
3550
3569
|
</div>
|
|
3551
|
-
`, isInline: true, styles: [".kj-date-picker{display:inline-flex;align-items:center;gap:var(--kj-space-xs);position:relative}.kj-date-picker__input{--kj-date-picker-input-height: 2.25rem;appearance:none;border:var(--kj-border) solid var(--kj-border-default);border-radius:var(--kj-radius-field);padding:0 var(--kj-space-md);height:var(--kj-date-picker-input-height);font:inherit;background:var(--kj-bg-field);color:var(--kj-fg-default);min-width:12ch}.kj-date-picker[data-size=xs] .kj-date-picker__input{--kj-date-picker-input-height: 1.75rem;font-size:.75rem;padding-inline:var(--kj-space-sm);min-width:0}.kj-date-picker[data-size=sm] .kj-date-picker__input{--kj-date-picker-input-height: 2rem;font-size:.8125rem}.kj-date-picker[data-size=lg] .kj-date-picker__input{--kj-date-picker-input-height: 2.75rem;font-size:1rem}.kj-date-picker__input:focus{outline:2px solid var(--kj-border-focus);outline-offset:2px;border-color:var(--kj-border-focus)}.kj-date-picker__input[disabled]{opacity:.55;cursor:not-allowed}.kj-date-picker__panel{box-sizing:border-box;z-index:50;display:inline-block;background:var(--kj-bg-elevated);color:var(--kj-fg-default);border:var(--kj-border) solid var(--kj-border-default);border-radius:var(--kj-radius-box);box-shadow:var(--kj-shadow-md);padding:var(--kj-space-sm)}.kj-date-picker__panel .kj-calendar{padding:0}.kj-date-picker__panel[hidden]{display:none}\n"], dependencies: [{ kind: "directive", type: KjDatePicker, selector: "[kjDatePicker]", inputs: ["kjValue", "kjMin", "kjMax", "kjDisabledDates", "kjLocale", "kjFirstDayOfWeek", "kjReadonly", "kjOpen"], outputs: ["kjValueChange", "kjOpenChange"], exportAs: ["kjDatePicker"] }, { kind: "directive", type: KjDatePickerTrigger, selector: "input[kjDatePickerTrigger]", exportAs: ["kjDatePickerTrigger"] }, { kind: "directive", type: KjDatePickerCalendar, selector: "[kjDatePickerCalendar]", inputs: ["kjSide", "kjAlign", "kjOffset"], exportAs: ["kjDatePickerCalendar"] }, { kind: "component", type: KjCalendarComponent, selector: "kj-calendar", inputs: ["kjValue", "kjMin", "kjMax", "kjDisabledDates", "kjLocale", "kjFirstDayOfWeek", "kjAriaLabel", "kjDisabled"], outputs: ["kjValueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3570
|
+
`, isInline: true, styles: [".kj-date-picker{display:inline-flex;align-items:center;gap:var(--kj-space-xs);position:relative}.kj-date-picker__input{--kj-date-picker-input-height: 2.25rem;appearance:none;border:var(--kj-border) solid var(--kj-border-default);border-radius:var(--kj-radius-field);padding:0 var(--kj-space-md);height:var(--kj-date-picker-input-height);font:inherit;background:var(--kj-bg-field);color:var(--kj-fg-default);min-width:12ch}.kj-date-picker[data-size=xs] .kj-date-picker__input{--kj-date-picker-input-height: 1.75rem;font-size:.75rem;padding-inline:var(--kj-space-sm);min-width:0}.kj-date-picker[data-size=sm] .kj-date-picker__input{--kj-date-picker-input-height: 2rem;font-size:.8125rem}.kj-date-picker[data-size=lg] .kj-date-picker__input{--kj-date-picker-input-height: 2.75rem;font-size:1rem}.kj-date-picker__input:focus{outline:2px solid var(--kj-border-focus);outline-offset:2px;border-color:var(--kj-border-focus)}.kj-date-picker__input[disabled]{opacity:.55;cursor:not-allowed}.kj-date-picker__panel{box-sizing:border-box;z-index:50;display:inline-block;background:var(--kj-bg-elevated);color:var(--kj-fg-default);border:var(--kj-border) solid var(--kj-border-default);border-radius:var(--kj-radius-box);box-shadow:var(--kj-shadow-md);padding:var(--kj-space-sm)}.kj-date-picker__panel .kj-calendar{padding:0}.kj-date-picker__panel[hidden]{display:none}\n"], dependencies: [{ kind: "directive", type: KjDatePicker, selector: "[kjDatePicker]", inputs: ["kjValue", "kjMin", "kjMax", "kjDisabledDates", "kjLocale", "kjFirstDayOfWeek", "kjReadonly", "kjOpen"], outputs: ["kjValueChange", "kjOpenChange"], exportAs: ["kjDatePicker"] }, { kind: "directive", type: KjDatePickerTrigger, selector: "input[kjDatePickerTrigger]", inputs: ["kjDisplayFormat"], exportAs: ["kjDatePickerTrigger"] }, { kind: "directive", type: KjDatePickerCalendar, selector: "[kjDatePickerCalendar]", inputs: ["kjSide", "kjAlign", "kjOffset"], exportAs: ["kjDatePickerCalendar"] }, { kind: "component", type: KjCalendarComponent, selector: "kj-calendar", inputs: ["kjValue", "kjMin", "kjMax", "kjDisabledDates", "kjLocale", "kjFirstDayOfWeek", "kjAriaLabel", "kjDisabled"], outputs: ["kjValueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3552
3571
|
}
|
|
3553
3572
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjDatePickerComponent, decorators: [{
|
|
3554
3573
|
type: Component,
|
|
@@ -3599,6 +3618,209 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
3599
3618
|
`, encapsulation: ViewEncapsulation.None, host: { class: 'kj-date-picker-host', style: 'display: contents;' }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".kj-date-picker{display:inline-flex;align-items:center;gap:var(--kj-space-xs);position:relative}.kj-date-picker__input{--kj-date-picker-input-height: 2.25rem;appearance:none;border:var(--kj-border) solid var(--kj-border-default);border-radius:var(--kj-radius-field);padding:0 var(--kj-space-md);height:var(--kj-date-picker-input-height);font:inherit;background:var(--kj-bg-field);color:var(--kj-fg-default);min-width:12ch}.kj-date-picker[data-size=xs] .kj-date-picker__input{--kj-date-picker-input-height: 1.75rem;font-size:.75rem;padding-inline:var(--kj-space-sm);min-width:0}.kj-date-picker[data-size=sm] .kj-date-picker__input{--kj-date-picker-input-height: 2rem;font-size:.8125rem}.kj-date-picker[data-size=lg] .kj-date-picker__input{--kj-date-picker-input-height: 2.75rem;font-size:1rem}.kj-date-picker__input:focus{outline:2px solid var(--kj-border-focus);outline-offset:2px;border-color:var(--kj-border-focus)}.kj-date-picker__input[disabled]{opacity:.55;cursor:not-allowed}.kj-date-picker__panel{box-sizing:border-box;z-index:50;display:inline-block;background:var(--kj-bg-elevated);color:var(--kj-fg-default);border:var(--kj-border) solid var(--kj-border-default);border-radius:var(--kj-radius-box);box-shadow:var(--kj-shadow-md);padding:var(--kj-space-sm)}.kj-date-picker__panel .kj-calendar{padding:0}.kj-date-picker__panel[hidden]{display:none}\n"] }]
|
|
3600
3619
|
}], propDecorators: { kjValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjValue", required: false }] }, { type: i0.Output, args: ["kjValueChange"] }], kjOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjOpen", required: false }] }, { type: i0.Output, args: ["kjOpenChange"] }], kjMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjMin", required: false }] }], kjMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjMax", required: false }] }], kjDisabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjDisabledDates", required: false }] }], kjLocale: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjLocale", required: false }] }], kjFirstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjFirstDayOfWeek", required: false }] }], kjPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjPlaceholder", required: false }] }], kjReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjReadonly", required: false }] }], kjDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjDisabled", required: false }] }], kjSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjSize", required: false }] }] } });
|
|
3601
3620
|
|
|
3621
|
+
/** Format a Date as a locale short date + HH:mm time. */
|
|
3622
|
+
function formatDateTime(d, locale) {
|
|
3623
|
+
const date = new Intl.DateTimeFormat(locale || undefined, { dateStyle: 'short' }).format(d);
|
|
3624
|
+
const time = new Intl.DateTimeFormat(locale || undefined, { hour: '2-digit', minute: '2-digit', hour12: false }).format(d);
|
|
3625
|
+
return date + ' ' + time;
|
|
3626
|
+
}
|
|
3627
|
+
/** "HH:mm" for the panel's time input. */
|
|
3628
|
+
function toTimeString(d) {
|
|
3629
|
+
if (!d)
|
|
3630
|
+
return '';
|
|
3631
|
+
const hh = String(d.getHours()).padStart(2, '0');
|
|
3632
|
+
const mm = String(d.getMinutes()).padStart(2, '0');
|
|
3633
|
+
return hh + ':' + mm;
|
|
3634
|
+
}
|
|
3635
|
+
/**
|
|
3636
|
+
* Themed datetime picker — the date-picker's calendar popover plus a time
|
|
3637
|
+
* field in the panel. Value is a single native `Date` carrying both parts.
|
|
3638
|
+
*
|
|
3639
|
+
* Unlike `kj-date-picker`, selecting a calendar day keeps the panel open so
|
|
3640
|
+
* the time can be adjusted; the day merge preserves the current time-of-day
|
|
3641
|
+
* (defaults to 09:00 for a fresh value). Close with Escape or by clicking
|
|
3642
|
+
* outside.
|
|
3643
|
+
*
|
|
3644
|
+
* @doc-example Default
|
|
3645
|
+
* Pick a meeting date and time — a single `Date` two-way binding.
|
|
3646
|
+
* @doc-file datetime-picker.example.ts
|
|
3647
|
+
*
|
|
3648
|
+
* @doc-keyboard
|
|
3649
|
+
* Enter|ArrowDown — Opens the calendar popover from the trigger
|
|
3650
|
+
* Escape — Closes the popover and returns focus to the trigger
|
|
3651
|
+
*
|
|
3652
|
+
* @doc-css-var
|
|
3653
|
+
* --kj-datetime-picker-input-height — Height of the trigger input. Sizes override.
|
|
3654
|
+
*
|
|
3655
|
+
* @doc-related date-picker,calendar,time-picker
|
|
3656
|
+
*
|
|
3657
|
+
* @doc-category Library/Data input
|
|
3658
|
+
* @doc
|
|
3659
|
+
* @doc-name datetime-picker
|
|
3660
|
+
* @doc-description Themed date + time picker sharing one native Date value; calendar popover with a time field.
|
|
3661
|
+
* @doc-is-main
|
|
3662
|
+
*/
|
|
3663
|
+
class KjDatetimePickerComponent {
|
|
3664
|
+
/** Selected date + time. Two-way bindable — `[(kjValue)]`. `null` clears. */
|
|
3665
|
+
kjValue = model(null, /* @ts-ignore */
|
|
3666
|
+
...(ngDevMode ? [{ debugName: "kjValue" }] : /* istanbul ignore next */ []));
|
|
3667
|
+
/** Two-way bindable open state for the popover. */
|
|
3668
|
+
kjOpen = model(false, /* @ts-ignore */
|
|
3669
|
+
...(ngDevMode ? [{ debugName: "kjOpen" }] : /* istanbul ignore next */ []));
|
|
3670
|
+
/** Earliest selectable date (inclusive). */
|
|
3671
|
+
kjMin = input(null, /* @ts-ignore */
|
|
3672
|
+
...(ngDevMode ? [{ debugName: "kjMin" }] : /* istanbul ignore next */ []));
|
|
3673
|
+
/** Latest selectable date (inclusive). */
|
|
3674
|
+
kjMax = input(null, /* @ts-ignore */
|
|
3675
|
+
...(ngDevMode ? [{ debugName: "kjMax" }] : /* istanbul ignore next */ []));
|
|
3676
|
+
/** BCP-47 locale tag. Defaults to Angular's `LOCALE_ID`. */
|
|
3677
|
+
kjLocale = input('', /* @ts-ignore */
|
|
3678
|
+
...(ngDevMode ? [{ debugName: "kjLocale" }] : /* istanbul ignore next */ []));
|
|
3679
|
+
/** First day of the week override (0=Sun … 6=Sat). */
|
|
3680
|
+
kjFirstDayOfWeek = input(null, /* @ts-ignore */
|
|
3681
|
+
...(ngDevMode ? [{ debugName: "kjFirstDayOfWeek" }] : /* istanbul ignore next */ []));
|
|
3682
|
+
/** Placeholder text for the trigger input. */
|
|
3683
|
+
kjPlaceholder = input('', /* @ts-ignore */
|
|
3684
|
+
...(ngDevMode ? [{ debugName: "kjPlaceholder" }] : /* istanbul ignore next */ []));
|
|
3685
|
+
/** Label for the time row inside the panel. */
|
|
3686
|
+
kjTimeLabel = input('Time', /* @ts-ignore */
|
|
3687
|
+
...(ngDevMode ? [{ debugName: "kjTimeLabel" }] : /* istanbul ignore next */ []));
|
|
3688
|
+
/** Hour used when a day is picked on a previously-empty value. */
|
|
3689
|
+
kjDefaultHour = input(9, /* @ts-ignore */
|
|
3690
|
+
...(ngDevMode ? [{ debugName: "kjDefaultHour" }] : /* istanbul ignore next */ []));
|
|
3691
|
+
kjReadonly = input(false, { ...(ngDevMode ? { debugName: "kjReadonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3692
|
+
kjDisabled = input(false, { ...(ngDevMode ? { debugName: "kjDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3693
|
+
/** Size preset for the trigger input. */
|
|
3694
|
+
kjSize = input('md', /* @ts-ignore */
|
|
3695
|
+
...(ngDevMode ? [{ debugName: "kjSize" }] : /* istanbul ignore next */ []));
|
|
3696
|
+
/** Trigger display: locale short date + HH:mm. */
|
|
3697
|
+
displayFormat = formatDateTime;
|
|
3698
|
+
timeText = computed(() => toTimeString(this.kjValue()), /* @ts-ignore */
|
|
3699
|
+
...(ngDevMode ? [{ debugName: "timeText" }] : /* istanbul ignore next */ []));
|
|
3700
|
+
/** Merge the picked day into the value, preserving time-of-day. Keeps the
|
|
3701
|
+
* panel open so the time can be adjusted next. */
|
|
3702
|
+
onCalendarSelect(day) {
|
|
3703
|
+
if (!day) {
|
|
3704
|
+
this.kjValue.set(null);
|
|
3705
|
+
return;
|
|
3706
|
+
}
|
|
3707
|
+
const prev = this.kjValue();
|
|
3708
|
+
const next = new Date(day);
|
|
3709
|
+
if (prev) {
|
|
3710
|
+
next.setHours(prev.getHours(), prev.getMinutes(), 0, 0);
|
|
3711
|
+
}
|
|
3712
|
+
else {
|
|
3713
|
+
next.setHours(this.kjDefaultHour(), 0, 0, 0);
|
|
3714
|
+
}
|
|
3715
|
+
this.kjValue.set(next);
|
|
3716
|
+
}
|
|
3717
|
+
/** Merge an "HH:mm" time into the value, preserving the date part. */
|
|
3718
|
+
onTimeInput(event) {
|
|
3719
|
+
const raw = event.target.value;
|
|
3720
|
+
const match = /^(\d{2}):(\d{2})$/.exec(raw);
|
|
3721
|
+
if (!match)
|
|
3722
|
+
return;
|
|
3723
|
+
const base = this.kjValue() ?? new Date();
|
|
3724
|
+
const next = new Date(base);
|
|
3725
|
+
next.setHours(Number(match[1]), Number(match[2]), 0, 0);
|
|
3726
|
+
this.kjValue.set(next);
|
|
3727
|
+
}
|
|
3728
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjDatetimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3729
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: KjDatetimePickerComponent, isStandalone: true, selector: "kj-datetime-picker", inputs: { kjValue: { classPropertyName: "kjValue", publicName: "kjValue", isSignal: true, isRequired: false, transformFunction: null }, kjOpen: { classPropertyName: "kjOpen", publicName: "kjOpen", isSignal: true, isRequired: false, transformFunction: null }, kjMin: { classPropertyName: "kjMin", publicName: "kjMin", isSignal: true, isRequired: false, transformFunction: null }, kjMax: { classPropertyName: "kjMax", publicName: "kjMax", isSignal: true, isRequired: false, transformFunction: null }, kjLocale: { classPropertyName: "kjLocale", publicName: "kjLocale", isSignal: true, isRequired: false, transformFunction: null }, kjFirstDayOfWeek: { classPropertyName: "kjFirstDayOfWeek", publicName: "kjFirstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, kjPlaceholder: { classPropertyName: "kjPlaceholder", publicName: "kjPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, kjTimeLabel: { classPropertyName: "kjTimeLabel", publicName: "kjTimeLabel", isSignal: true, isRequired: false, transformFunction: null }, kjDefaultHour: { classPropertyName: "kjDefaultHour", publicName: "kjDefaultHour", isSignal: true, isRequired: false, transformFunction: null }, kjReadonly: { classPropertyName: "kjReadonly", publicName: "kjReadonly", isSignal: true, isRequired: false, transformFunction: null }, kjDisabled: { classPropertyName: "kjDisabled", publicName: "kjDisabled", isSignal: true, isRequired: false, transformFunction: null }, kjSize: { classPropertyName: "kjSize", publicName: "kjSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { kjValue: "kjValueChange", kjOpen: "kjOpenChange" }, host: { styleAttribute: "display: contents;", classAttribute: "kj-datetime-picker-host" }, ngImport: i0, template: `
|
|
3730
|
+
<div
|
|
3731
|
+
kjDatePicker
|
|
3732
|
+
class="kj-datetime-picker"
|
|
3733
|
+
#picker="kjDatePicker"
|
|
3734
|
+
[attr.data-size]="kjSize() === 'md' ? null : kjSize()"
|
|
3735
|
+
[kjValue]="kjValue() ?? null!"
|
|
3736
|
+
(kjValueChange)="kjValue.set($event)"
|
|
3737
|
+
[(kjOpen)]="kjOpen"
|
|
3738
|
+
[kjMin]="kjMin() ?? null!"
|
|
3739
|
+
[kjMax]="kjMax() ?? null!"
|
|
3740
|
+
[kjLocale]="kjLocale()"
|
|
3741
|
+
[kjFirstDayOfWeek]="kjFirstDayOfWeek() ?? 0"
|
|
3742
|
+
[kjReadonly]="kjReadonly()"
|
|
3743
|
+
[kjDisabled]="kjDisabled()"
|
|
3744
|
+
>
|
|
3745
|
+
<input
|
|
3746
|
+
kjDatePickerTrigger
|
|
3747
|
+
#trig="kjDatePickerTrigger"
|
|
3748
|
+
class="kj-datetime-picker__input"
|
|
3749
|
+
[kjDisplayFormat]="displayFormat"
|
|
3750
|
+
[placeholder]="kjPlaceholder()"
|
|
3751
|
+
/>
|
|
3752
|
+
<div kjDatePickerCalendar [kjFor]="trig" class="kj-datetime-picker__panel">
|
|
3753
|
+
<kj-calendar
|
|
3754
|
+
[kjValue]="kjValue()"
|
|
3755
|
+
[kjMin]="kjMin()"
|
|
3756
|
+
[kjMax]="kjMax()"
|
|
3757
|
+
[kjLocale]="kjLocale()"
|
|
3758
|
+
[kjFirstDayOfWeek]="kjFirstDayOfWeek() ?? 0"
|
|
3759
|
+
(kjValueChange)="onCalendarSelect($event)"
|
|
3760
|
+
/>
|
|
3761
|
+
<label class="kj-datetime-picker__time">
|
|
3762
|
+
<span class="kj-datetime-picker__time-label">{{ kjTimeLabel() }}</span>
|
|
3763
|
+
<input
|
|
3764
|
+
type="time"
|
|
3765
|
+
class="kj-datetime-picker__time-input"
|
|
3766
|
+
[value]="timeText()"
|
|
3767
|
+
[disabled]="kjDisabled()"
|
|
3768
|
+
(change)="onTimeInput($event)"
|
|
3769
|
+
/>
|
|
3770
|
+
</label>
|
|
3771
|
+
</div>
|
|
3772
|
+
</div>
|
|
3773
|
+
`, isInline: true, styles: [".kj-datetime-picker{display:inline-flex;align-items:center;gap:var(--kj-space-xs);position:relative}.kj-datetime-picker__input{--kj-datetime-picker-input-height: 2.25rem;appearance:none;border:var(--kj-border) solid var(--kj-border-default);border-radius:var(--kj-radius-field);padding:0 var(--kj-space-md);height:var(--kj-datetime-picker-input-height);font:inherit;background:var(--kj-bg-field);color:var(--kj-fg-default);min-width:16ch}.kj-datetime-picker[data-size=xs] .kj-datetime-picker__input{--kj-datetime-picker-input-height: 1.75rem;font-size:.75rem;padding-inline:var(--kj-space-sm);min-width:0}.kj-datetime-picker[data-size=sm] .kj-datetime-picker__input{--kj-datetime-picker-input-height: 2rem;font-size:.8125rem}.kj-datetime-picker[data-size=lg] .kj-datetime-picker__input{--kj-datetime-picker-input-height: 2.75rem;font-size:1rem}.kj-datetime-picker__input:focus{outline:2px solid var(--kj-border-focus);outline-offset:2px;border-color:var(--kj-border-focus)}.kj-datetime-picker__input[disabled]{opacity:.55;cursor:not-allowed}.kj-datetime-picker__panel{box-sizing:border-box;z-index:50;display:inline-block;background:var(--kj-bg-elevated);color:var(--kj-fg-default);border:var(--kj-border) solid var(--kj-border-default);border-radius:var(--kj-radius-box);box-shadow:var(--kj-shadow-md);padding:var(--kj-space-sm)}.kj-datetime-picker__panel .kj-calendar{padding:0}.kj-datetime-picker__panel[hidden]{display:none}.kj-datetime-picker__time{display:flex;align-items:center;justify-content:space-between;gap:var(--kj-space-sm);margin-top:var(--kj-space-sm);padding:var(--kj-space-sm) var(--kj-space-xs) 0;border-top:var(--kj-border) solid var(--kj-border-muted);font-size:.8125rem;color:var(--kj-fg-muted)}.kj-datetime-picker__time-input{appearance:none;border:var(--kj-border) solid var(--kj-border-default);border-radius:var(--kj-radius-field);background:var(--kj-bg-field);color:var(--kj-fg-default);font:inherit;font-size:.8125rem;padding:2px var(--kj-space-sm)}.kj-datetime-picker__time-input:focus{outline:2px solid var(--kj-border-focus);outline-offset:1px}\n"], dependencies: [{ kind: "directive", type: KjDatePicker, selector: "[kjDatePicker]", inputs: ["kjValue", "kjMin", "kjMax", "kjDisabledDates", "kjLocale", "kjFirstDayOfWeek", "kjReadonly", "kjOpen"], outputs: ["kjValueChange", "kjOpenChange"], exportAs: ["kjDatePicker"] }, { kind: "directive", type: KjDatePickerTrigger, selector: "input[kjDatePickerTrigger]", inputs: ["kjDisplayFormat"], exportAs: ["kjDatePickerTrigger"] }, { kind: "directive", type: KjDatePickerCalendar, selector: "[kjDatePickerCalendar]", inputs: ["kjSide", "kjAlign", "kjOffset"], exportAs: ["kjDatePickerCalendar"] }, { kind: "component", type: KjCalendarComponent, selector: "kj-calendar", inputs: ["kjValue", "kjMin", "kjMax", "kjDisabledDates", "kjLocale", "kjFirstDayOfWeek", "kjAriaLabel", "kjDisabled"], outputs: ["kjValueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3774
|
+
}
|
|
3775
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjDatetimePickerComponent, decorators: [{
|
|
3776
|
+
type: Component,
|
|
3777
|
+
args: [{ selector: 'kj-datetime-picker', standalone: true, imports: [KjDatePicker, KjDatePickerTrigger, KjDatePickerCalendar, KjCalendarComponent], template: `
|
|
3778
|
+
<div
|
|
3779
|
+
kjDatePicker
|
|
3780
|
+
class="kj-datetime-picker"
|
|
3781
|
+
#picker="kjDatePicker"
|
|
3782
|
+
[attr.data-size]="kjSize() === 'md' ? null : kjSize()"
|
|
3783
|
+
[kjValue]="kjValue() ?? null!"
|
|
3784
|
+
(kjValueChange)="kjValue.set($event)"
|
|
3785
|
+
[(kjOpen)]="kjOpen"
|
|
3786
|
+
[kjMin]="kjMin() ?? null!"
|
|
3787
|
+
[kjMax]="kjMax() ?? null!"
|
|
3788
|
+
[kjLocale]="kjLocale()"
|
|
3789
|
+
[kjFirstDayOfWeek]="kjFirstDayOfWeek() ?? 0"
|
|
3790
|
+
[kjReadonly]="kjReadonly()"
|
|
3791
|
+
[kjDisabled]="kjDisabled()"
|
|
3792
|
+
>
|
|
3793
|
+
<input
|
|
3794
|
+
kjDatePickerTrigger
|
|
3795
|
+
#trig="kjDatePickerTrigger"
|
|
3796
|
+
class="kj-datetime-picker__input"
|
|
3797
|
+
[kjDisplayFormat]="displayFormat"
|
|
3798
|
+
[placeholder]="kjPlaceholder()"
|
|
3799
|
+
/>
|
|
3800
|
+
<div kjDatePickerCalendar [kjFor]="trig" class="kj-datetime-picker__panel">
|
|
3801
|
+
<kj-calendar
|
|
3802
|
+
[kjValue]="kjValue()"
|
|
3803
|
+
[kjMin]="kjMin()"
|
|
3804
|
+
[kjMax]="kjMax()"
|
|
3805
|
+
[kjLocale]="kjLocale()"
|
|
3806
|
+
[kjFirstDayOfWeek]="kjFirstDayOfWeek() ?? 0"
|
|
3807
|
+
(kjValueChange)="onCalendarSelect($event)"
|
|
3808
|
+
/>
|
|
3809
|
+
<label class="kj-datetime-picker__time">
|
|
3810
|
+
<span class="kj-datetime-picker__time-label">{{ kjTimeLabel() }}</span>
|
|
3811
|
+
<input
|
|
3812
|
+
type="time"
|
|
3813
|
+
class="kj-datetime-picker__time-input"
|
|
3814
|
+
[value]="timeText()"
|
|
3815
|
+
[disabled]="kjDisabled()"
|
|
3816
|
+
(change)="onTimeInput($event)"
|
|
3817
|
+
/>
|
|
3818
|
+
</label>
|
|
3819
|
+
</div>
|
|
3820
|
+
</div>
|
|
3821
|
+
`, encapsulation: ViewEncapsulation.None, host: { class: 'kj-datetime-picker-host', style: 'display: contents;' }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".kj-datetime-picker{display:inline-flex;align-items:center;gap:var(--kj-space-xs);position:relative}.kj-datetime-picker__input{--kj-datetime-picker-input-height: 2.25rem;appearance:none;border:var(--kj-border) solid var(--kj-border-default);border-radius:var(--kj-radius-field);padding:0 var(--kj-space-md);height:var(--kj-datetime-picker-input-height);font:inherit;background:var(--kj-bg-field);color:var(--kj-fg-default);min-width:16ch}.kj-datetime-picker[data-size=xs] .kj-datetime-picker__input{--kj-datetime-picker-input-height: 1.75rem;font-size:.75rem;padding-inline:var(--kj-space-sm);min-width:0}.kj-datetime-picker[data-size=sm] .kj-datetime-picker__input{--kj-datetime-picker-input-height: 2rem;font-size:.8125rem}.kj-datetime-picker[data-size=lg] .kj-datetime-picker__input{--kj-datetime-picker-input-height: 2.75rem;font-size:1rem}.kj-datetime-picker__input:focus{outline:2px solid var(--kj-border-focus);outline-offset:2px;border-color:var(--kj-border-focus)}.kj-datetime-picker__input[disabled]{opacity:.55;cursor:not-allowed}.kj-datetime-picker__panel{box-sizing:border-box;z-index:50;display:inline-block;background:var(--kj-bg-elevated);color:var(--kj-fg-default);border:var(--kj-border) solid var(--kj-border-default);border-radius:var(--kj-radius-box);box-shadow:var(--kj-shadow-md);padding:var(--kj-space-sm)}.kj-datetime-picker__panel .kj-calendar{padding:0}.kj-datetime-picker__panel[hidden]{display:none}.kj-datetime-picker__time{display:flex;align-items:center;justify-content:space-between;gap:var(--kj-space-sm);margin-top:var(--kj-space-sm);padding:var(--kj-space-sm) var(--kj-space-xs) 0;border-top:var(--kj-border) solid var(--kj-border-muted);font-size:.8125rem;color:var(--kj-fg-muted)}.kj-datetime-picker__time-input{appearance:none;border:var(--kj-border) solid var(--kj-border-default);border-radius:var(--kj-radius-field);background:var(--kj-bg-field);color:var(--kj-fg-default);font:inherit;font-size:.8125rem;padding:2px var(--kj-space-sm)}.kj-datetime-picker__time-input:focus{outline:2px solid var(--kj-border-focus);outline-offset:1px}\n"] }]
|
|
3822
|
+
}], propDecorators: { kjValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjValue", required: false }] }, { type: i0.Output, args: ["kjValueChange"] }], kjOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjOpen", required: false }] }, { type: i0.Output, args: ["kjOpenChange"] }], kjMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjMin", required: false }] }], kjMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjMax", required: false }] }], kjLocale: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjLocale", required: false }] }], kjFirstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjFirstDayOfWeek", required: false }] }], kjPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjPlaceholder", required: false }] }], kjTimeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjTimeLabel", required: false }] }], kjDefaultHour: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjDefaultHour", required: false }] }], kjReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjReadonly", required: false }] }], kjDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjDisabled", required: false }] }], kjSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjSize", required: false }] }] } });
|
|
3823
|
+
|
|
3602
3824
|
/**
|
|
3603
3825
|
* Service-launched modal dialog. Inject `KjDialogService` and call `open()`
|
|
3604
3826
|
* with a template; mount `[kjDialog]` once near your trigger to host the
|
|
@@ -17674,5 +17896,5 @@ const KJ_COMPONENTS_VERSION = '0.0.1';
|
|
|
17674
17896
|
* Generated bundle index. Do not edit.
|
|
17675
17897
|
*/
|
|
17676
17898
|
|
|
17677
|
-
export { KJ_COMPONENTS_VERSION, KJ_EDITOR_CONTRACT, KJ_FILTER_CONTEXT, KjAccordionComponent, KjAccordionContentComponent, KjAccordionItemComponent, KjAccordionTriggerComponent, KjAlertActionsComponent, KjAlertComponent, KjAlertDescriptionComponent, KjAlertDismissComponent, KjAlertIconComponent, KjAlertTitleComponent, KjAvatarComponent, KjAvatarGroupComponent, KjBadgeComponent, KjBooleanEditor, KjBreadcrumbComponent, KjBreadcrumbCurrentComponent, KjBreadcrumbEllipsisComponent, KjBreadcrumbItemComponent, KjBreadcrumbLinkComponent, KjBreadcrumbListComponent, KjBreadcrumbSeparatorComponent, KjBulkAction, KjButtonComponent, KjButtonGroupComponent, KjCalendarComponent, KjCardComponent, KjCardContentComponent, KjCardCoverComponent, KjCardFooterComponent, KjCardHeaderComponent, KjCardSubtitleComponent, KjCardTitleComponent, KjCarouselAutoplayComponent, KjCarouselComponent, KjCarouselIndicatorsComponent, KjCarouselNextComponent, KjCarouselPauseComponent, KjCarouselPreviousComponent, KjCarouselSlideComponent, KjCarouselViewportComponent, KjCascadeOptionComponent, KjCascadeSelectComponent, KjCascadeSubPanelComponent, KjCellEditorOutlet, KjChatAvatarComponent, KjChatBubbleComponent, KjChatComponent, KjChatFooterComponent, KjChatHeaderComponent, KjChatLogComponent, KjCheckboxComponent, KjColorPickerComponent, KjComboboxComponent, KjComboboxEmptyComponent, KjComboboxLoadingComponent, KjComboboxOptionComponent, KjCommandEmptyComponent, KjCommandGroupComponent, KjCommandInputComponent, KjCommandItemComponent, KjCommandPaletteComponent, KjCommandPaletteFooter, KjCommandPaletteItemTemplate, KjCommandSeparatorComponent, KjConfirmPopupActionComponent, KjConfirmPopupActionsComponent, KjConfirmPopupCancelComponent, KjConfirmPopupComponent, KjConfirmPopupContentComponent, KjConfirmPopupMessageComponent, KjConfirmPopupTriggerComponent, KjDateEditor, KjDateFilter, KjDatePickerComponent, KjDialogComponent, KjDividerComponent, KjDrawerComponent, KjDropdownMenuComponent, KjEmptyStateActionsComponent, KjEmptyStateComponent, KjEmptyStateDescriptionComponent, KjEmptyStateIconComponent, KjEmptyStateTitleComponent, KjFieldComponent, KjFieldErrorComponent, KjFieldGroupComponent, KjFieldHelpComponent, KjFieldLabelComponent, KjFileUploadComponent, KjFilterCellOutlet, KjFormActionsComponent, KjFormComponent, KjFormSummaryComponent, KjIconGalleryExample, KjIconUsageExample, KjInputComponent, KjInputGroupAddonComponent, KjInputGroupComponent, KjInputMaskComponent, KjInputMaskCreditCardExample, KjInputMaskCustomTokensExample, KjInputMaskDateExample, KjInputMaskExample, KjInputMaskUsageExample, KjInputMaskValidationExample, KjInputOtpComponent, KjKbdComponent, KjLinkComponent, KjListComponent, KjListItemComponent, KjMenubarComponent, KjMenubarItemComponent, KjNumberEditor, KjNumberFilter, KjNumberInputComponent, KjOptionComponent, KjOverlayBadgeComponent, KjOverlayBadgeContentComponent, KjPaginationComponent, KjPaginationDefaultComponent, KjPaginationEllipsisComponent, KjPaginationFirstComponent, KjPaginationInfoComponent, KjPaginationItemComponent, KjPaginationLastComponent, KjPaginationNextComponent, KjPaginationPreviousComponent, KjPasswordInputComponent, KjPopoverComponent, KjProgressBarComponent, KjRadioComponent, KjRadioGroupComponent, KjSelectComponent, KjSelectEditor, KjSelectFilter, KjSkeletonComponent, KjSliderComponent, KjSpeedDialActionComponent, KjSpeedDialActionsComponent, KjSpeedDialComponent, KjSpeedDialTriggerComponent, KjSpinnerComponent, KjStepComponent, KjStepContentComponent, KjStepLabelComponent, KjStepperComponent, KjStepperNextComponent, KjStepperPreviousComponent, KjStepperResetComponent, KjTabComponent, KjTabListComponent, KjTabPanelComponent, KjTableComponent, KjTablePaginationComponent, KjTableSidePanelComponent, KjTableSidePanelContent, KjTableStatusBarComponent, KjTableToolbarComponent, KjTableVirtual, KjTabsComponent, KjTagComponent, KjTagListComponent, KjTagRemoveComponent, KjTextEditor, KjTextFilter, KjTextareaComponent, KjTimePickerComponent, KjToastCloseComponent, KjToastComponent, KjToastViewportComponent, KjToastWrapperComponent, KjToggleComponent, KjTooltipComponent, KjTreeSelectComponent, KjTreeSelectNodeComponent, LUCIDE_ICON_NAMES, copyToClipboard, downloadString, exportCsv, exportJson, provideLucideIcons, toTsv };
|
|
17899
|
+
export { KJ_COMPONENTS_VERSION, KJ_EDITOR_CONTRACT, KJ_FILTER_CONTEXT, KjAccordionComponent, KjAccordionContentComponent, KjAccordionItemComponent, KjAccordionTriggerComponent, KjAlertActionsComponent, KjAlertComponent, KjAlertDescriptionComponent, KjAlertDismissComponent, KjAlertIconComponent, KjAlertTitleComponent, KjAvatarComponent, KjAvatarGroupComponent, KjBadgeComponent, KjBooleanEditor, KjBreadcrumbComponent, KjBreadcrumbCurrentComponent, KjBreadcrumbEllipsisComponent, KjBreadcrumbItemComponent, KjBreadcrumbLinkComponent, KjBreadcrumbListComponent, KjBreadcrumbSeparatorComponent, KjBulkAction, KjButtonComponent, KjButtonGroupComponent, KjCalendarComponent, KjCardComponent, KjCardContentComponent, KjCardCoverComponent, KjCardFooterComponent, KjCardHeaderComponent, KjCardSubtitleComponent, KjCardTitleComponent, KjCarouselAutoplayComponent, KjCarouselComponent, KjCarouselIndicatorsComponent, KjCarouselNextComponent, KjCarouselPauseComponent, KjCarouselPreviousComponent, KjCarouselSlideComponent, KjCarouselViewportComponent, KjCascadeOptionComponent, KjCascadeSelectComponent, KjCascadeSubPanelComponent, KjCellEditorOutlet, KjChatAvatarComponent, KjChatBubbleComponent, KjChatComponent, KjChatFooterComponent, KjChatHeaderComponent, KjChatLogComponent, KjCheckboxComponent, KjColorPickerComponent, KjComboboxComponent, KjComboboxEmptyComponent, KjComboboxLoadingComponent, KjComboboxOptionComponent, KjCommandEmptyComponent, KjCommandGroupComponent, KjCommandInputComponent, KjCommandItemComponent, KjCommandPaletteComponent, KjCommandPaletteFooter, KjCommandPaletteItemTemplate, KjCommandSeparatorComponent, KjConfirmPopupActionComponent, KjConfirmPopupActionsComponent, KjConfirmPopupCancelComponent, KjConfirmPopupComponent, KjConfirmPopupContentComponent, KjConfirmPopupMessageComponent, KjConfirmPopupTriggerComponent, KjDateEditor, KjDateFilter, KjDatePickerComponent, KjDatetimePickerComponent, KjDialogComponent, KjDividerComponent, KjDrawerComponent, KjDropdownMenuComponent, KjEmptyStateActionsComponent, KjEmptyStateComponent, KjEmptyStateDescriptionComponent, KjEmptyStateIconComponent, KjEmptyStateTitleComponent, KjFieldComponent, KjFieldErrorComponent, KjFieldGroupComponent, KjFieldHelpComponent, KjFieldLabelComponent, KjFileUploadComponent, KjFilterCellOutlet, KjFormActionsComponent, KjFormComponent, KjFormSummaryComponent, KjIconGalleryExample, KjIconUsageExample, KjInputComponent, KjInputGroupAddonComponent, KjInputGroupComponent, KjInputMaskComponent, KjInputMaskCreditCardExample, KjInputMaskCustomTokensExample, KjInputMaskDateExample, KjInputMaskExample, KjInputMaskUsageExample, KjInputMaskValidationExample, KjInputOtpComponent, KjKbdComponent, KjLinkComponent, KjListComponent, KjListItemComponent, KjMenubarComponent, KjMenubarItemComponent, KjNumberEditor, KjNumberFilter, KjNumberInputComponent, KjOptionComponent, KjOverlayBadgeComponent, KjOverlayBadgeContentComponent, KjPaginationComponent, KjPaginationDefaultComponent, KjPaginationEllipsisComponent, KjPaginationFirstComponent, KjPaginationInfoComponent, KjPaginationItemComponent, KjPaginationLastComponent, KjPaginationNextComponent, KjPaginationPreviousComponent, KjPasswordInputComponent, KjPopoverComponent, KjProgressBarComponent, KjRadioComponent, KjRadioGroupComponent, KjSelectComponent, KjSelectEditor, KjSelectFilter, KjSkeletonComponent, KjSliderComponent, KjSpeedDialActionComponent, KjSpeedDialActionsComponent, KjSpeedDialComponent, KjSpeedDialTriggerComponent, KjSpinnerComponent, KjStepComponent, KjStepContentComponent, KjStepLabelComponent, KjStepperComponent, KjStepperNextComponent, KjStepperPreviousComponent, KjStepperResetComponent, KjTabComponent, KjTabListComponent, KjTabPanelComponent, KjTableComponent, KjTablePaginationComponent, KjTableSidePanelComponent, KjTableSidePanelContent, KjTableStatusBarComponent, KjTableToolbarComponent, KjTableVirtual, KjTabsComponent, KjTagComponent, KjTagListComponent, KjTagRemoveComponent, KjTextEditor, KjTextFilter, KjTextareaComponent, KjTimePickerComponent, KjToastCloseComponent, KjToastComponent, KjToastViewportComponent, KjToastWrapperComponent, KjToggleComponent, KjTooltipComponent, KjTreeSelectComponent, KjTreeSelectNodeComponent, LUCIDE_ICON_NAMES, copyToClipboard, downloadString, exportCsv, exportJson, provideLucideIcons, toTsv };
|
|
17678
17900
|
//# sourceMappingURL=kouji-ui-components.mjs.map
|