codexly-ui 0.0.85 → 0.0.86
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.
- package/fesm2022/codexly-ui.mjs +300 -1
- package/fesm2022/codexly-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/types/codexly-ui.d.ts +78 -4
package/fesm2022/codexly-ui.mjs
CHANGED
|
@@ -8120,6 +8120,305 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
|
|
|
8120
8120
|
args: ['keydown.escape']
|
|
8121
8121
|
}] } });
|
|
8122
8122
|
|
|
8123
|
+
const TIMEPICKER_SIZE_MAP = {
|
|
8124
|
+
sm: { trigger: 'h-8 text-sm', label: 'text-xs font-medium', hint: 'text-xs', iconSize: 'xs' },
|
|
8125
|
+
md: { trigger: 'h-10 text-sm', label: 'text-sm font-medium', hint: 'text-xs', iconSize: 'sm' },
|
|
8126
|
+
lg: { trigger: 'h-12 text-base', label: 'text-sm font-medium', hint: 'text-sm', iconSize: 'md' },
|
|
8127
|
+
};
|
|
8128
|
+
|
|
8129
|
+
const HOURS = Array.from({ length: 24 }, (_, i) => i);
|
|
8130
|
+
const MINUTES = [0, 15, 30, 45];
|
|
8131
|
+
function pad2(n) {
|
|
8132
|
+
return n.toString().padStart(2, '0');
|
|
8133
|
+
}
|
|
8134
|
+
function roundToNearest15(date) {
|
|
8135
|
+
const m = date.getMinutes();
|
|
8136
|
+
const rem = m % 15;
|
|
8137
|
+
const rounded = rem < 8 ? m - rem : m + (15 - rem);
|
|
8138
|
+
let h = date.getHours();
|
|
8139
|
+
let mn = rounded;
|
|
8140
|
+
if (mn >= 60) {
|
|
8141
|
+
mn = 0;
|
|
8142
|
+
h = (h + 1) % 24;
|
|
8143
|
+
}
|
|
8144
|
+
return `${pad2(h)}:${pad2(mn)}`;
|
|
8145
|
+
}
|
|
8146
|
+
class ClxTimepickerComponent {
|
|
8147
|
+
origin;
|
|
8148
|
+
label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
8149
|
+
placeholder = input('Selecciona una hora', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
8150
|
+
color = input('indigo', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
|
|
8151
|
+
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
8152
|
+
status = input('default', ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
|
|
8153
|
+
statusMessage = input('', ...(ngDevMode ? [{ debugName: "statusMessage" }] : /* istanbul ignore next */ []));
|
|
8154
|
+
hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
|
|
8155
|
+
value = input(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
8156
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
8157
|
+
_value = signal(null, ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
|
|
8158
|
+
_cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_cvaDisabled" }] : /* istanbul ignore next */ []));
|
|
8159
|
+
_cvaConnected = false;
|
|
8160
|
+
_valueEffect = effect(() => {
|
|
8161
|
+
const v = this.value();
|
|
8162
|
+
if (!this._cvaConnected)
|
|
8163
|
+
untracked(() => { this._value.set(v); });
|
|
8164
|
+
}, ...(ngDevMode ? [{ debugName: "_valueEffect" }] : /* istanbul ignore next */ []));
|
|
8165
|
+
_disabled = computed(() => this._cvaDisabled() || this.disabled(), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
|
|
8166
|
+
_isOpen = signal(false, ...(ngDevMode ? [{ debugName: "_isOpen" }] : /* istanbul ignore next */ []));
|
|
8167
|
+
_hours = HOURS;
|
|
8168
|
+
_minutes = MINUTES;
|
|
8169
|
+
_el = inject((ElementRef));
|
|
8170
|
+
_sso = inject(ScrollStrategyOptions);
|
|
8171
|
+
_scrollStrategy = this._sso.reposition();
|
|
8172
|
+
_onChange = () => { };
|
|
8173
|
+
_onTouched = () => { };
|
|
8174
|
+
_positions = [
|
|
8175
|
+
{ originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
|
|
8176
|
+
{ originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
|
|
8177
|
+
];
|
|
8178
|
+
_sizeConfig = computed(() => TIMEPICKER_SIZE_MAP[this.size()], ...(ngDevMode ? [{ debugName: "_sizeConfig" }] : /* istanbul ignore next */ []));
|
|
8179
|
+
_statusCfg = computed(() => INPUT_STATUS_MAP[this.status()], ...(ngDevMode ? [{ debugName: "_statusCfg" }] : /* istanbul ignore next */ []));
|
|
8180
|
+
_overlayWidth = computed(() => {
|
|
8181
|
+
this._isOpen();
|
|
8182
|
+
return this._el.nativeElement.getBoundingClientRect().width;
|
|
8183
|
+
}, ...(ngDevMode ? [{ debugName: "_overlayWidth" }] : /* istanbul ignore next */ []));
|
|
8184
|
+
_labelClass = computed(() => `${this._sizeConfig().label} text-slate-700 leading-none`, ...(ngDevMode ? [{ debugName: "_labelClass" }] : /* istanbul ignore next */ []));
|
|
8185
|
+
_hintClass = computed(() => `${this._sizeConfig().hint} text-gray-400`, ...(ngDevMode ? [{ debugName: "_hintClass" }] : /* istanbul ignore next */ []));
|
|
8186
|
+
_statusMsgClass = computed(() => `${this._sizeConfig().hint} ${this._statusCfg().msgCls}`, ...(ngDevMode ? [{ debugName: "_statusMsgClass" }] : /* istanbul ignore next */ []));
|
|
8187
|
+
_prefixCellCls = computed(() => {
|
|
8188
|
+
const t = resolveColor(this.color());
|
|
8189
|
+
return `px-3 flex items-center shrink-0 border-r ${t.bgSubtle} ${t.textSubtle} ${t.borderLight}`;
|
|
8190
|
+
}, ...(ngDevMode ? [{ debugName: "_prefixCellCls" }] : /* istanbul ignore next */ []));
|
|
8191
|
+
_triggerClass = computed(() => {
|
|
8192
|
+
const size = this._sizeConfig();
|
|
8193
|
+
const status = this._statusCfg();
|
|
8194
|
+
const focus = resolveColor(this.color()).focus;
|
|
8195
|
+
const border = this._disabled() ? 'border-gray-200 bg-gray-50' : `${status.border} focus:outline-none ${focus}`;
|
|
8196
|
+
const cursor = this._disabled() ? 'cursor-not-allowed opacity-60' : 'cursor-pointer';
|
|
8197
|
+
return `relative flex items-stretch ${size.trigger} rounded-md border ${border} ${cursor} overflow-hidden transition-all duration-200 select-none`;
|
|
8198
|
+
}, ...(ngDevMode ? [{ debugName: "_triggerClass" }] : /* istanbul ignore next */ []));
|
|
8199
|
+
_displayClass = computed(() => {
|
|
8200
|
+
const hasValue = !!this._value();
|
|
8201
|
+
const color = this._disabled() ? 'text-gray-400' : hasValue ? 'text-slate-700' : 'text-gray-400';
|
|
8202
|
+
return `flex-1 pl-3 pr-9 flex items-center text-sm ${color} truncate`;
|
|
8203
|
+
}, ...(ngDevMode ? [{ debugName: "_displayClass" }] : /* istanbul ignore next */ []));
|
|
8204
|
+
_displayValue = computed(() => this._value() ?? this.placeholder(), ...(ngDevMode ? [{ debugName: "_displayValue" }] : /* istanbul ignore next */ []));
|
|
8205
|
+
_panelClass = computed(() => 'bg-white rounded-xl shadow-xl border border-slate-200 overflow-hidden w-full min-w-56', ...(ngDevMode ? [{ debugName: "_panelClass" }] : /* istanbul ignore next */ []));
|
|
8206
|
+
_cellCls(h, m) {
|
|
8207
|
+
const base = 'py-1.5 text-xs rounded-lg transition-colors text-center font-mono';
|
|
8208
|
+
const t = resolveColor(this.color());
|
|
8209
|
+
const selected = this._value() === `${pad2(h)}:${pad2(m)}`;
|
|
8210
|
+
return selected
|
|
8211
|
+
? `${base} ${t.bg} ${t.text} font-semibold`
|
|
8212
|
+
: `${base} text-slate-600 ${t.hoverBgMuted} cursor-pointer`;
|
|
8213
|
+
}
|
|
8214
|
+
_pad(n) { return pad2(n); }
|
|
8215
|
+
_togglePanel() { this._isOpen() ? this._closePanel() : this._isOpen.set(true); }
|
|
8216
|
+
_closePanel() { this._isOpen.set(false); this._onTouched(); }
|
|
8217
|
+
_selectTime(h, m) {
|
|
8218
|
+
const val = `${pad2(h)}:${pad2(m)}`;
|
|
8219
|
+
this._value.set(val);
|
|
8220
|
+
this._onChange(val);
|
|
8221
|
+
this._closePanel();
|
|
8222
|
+
}
|
|
8223
|
+
_selectNow() {
|
|
8224
|
+
const val = roundToNearest15(new Date());
|
|
8225
|
+
this._value.set(val);
|
|
8226
|
+
this._onChange(val);
|
|
8227
|
+
this._closePanel();
|
|
8228
|
+
}
|
|
8229
|
+
_clear() { this._value.set(null); this._onChange(null); }
|
|
8230
|
+
onEscape() { if (this._isOpen())
|
|
8231
|
+
this._closePanel(); }
|
|
8232
|
+
_onOverlayKeydown(event) {
|
|
8233
|
+
if (event.key === 'Escape')
|
|
8234
|
+
this._closePanel();
|
|
8235
|
+
}
|
|
8236
|
+
writeValue(val) {
|
|
8237
|
+
this._cvaConnected = true;
|
|
8238
|
+
this._value.set(val ?? null);
|
|
8239
|
+
}
|
|
8240
|
+
registerOnChange(fn) { this._onChange = fn; }
|
|
8241
|
+
registerOnTouched(fn) { this._onTouched = fn; }
|
|
8242
|
+
setDisabledState(disabled) { this._cvaDisabled.set(disabled); }
|
|
8243
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxTimepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8244
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxTimepickerComponent, isStandalone: true, selector: "clx-timepicker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, statusMessage: { classPropertyName: "statusMessage", publicName: "statusMessage", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown.escape": "onEscape()" }, classAttribute: "flex flex-col gap-1.5" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ClxTimepickerComponent), multi: true }], viewQueries: [{ propertyName: "origin", first: true, predicate: ["origin"], descendants: true }], ngImport: i0, template: `
|
|
8245
|
+
@if (label()) {
|
|
8246
|
+
<label [class]="_labelClass()">{{ label() }}</label>
|
|
8247
|
+
}
|
|
8248
|
+
|
|
8249
|
+
<div
|
|
8250
|
+
#origin="cdkOverlayOrigin"
|
|
8251
|
+
cdkOverlayOrigin
|
|
8252
|
+
[class]="_triggerClass()"
|
|
8253
|
+
(click)="!_disabled() && _togglePanel()"
|
|
8254
|
+
(keydown.enter)="!_disabled() && _togglePanel()"
|
|
8255
|
+
(keydown.space)="!_disabled() && _togglePanel()"
|
|
8256
|
+
tabindex="0"
|
|
8257
|
+
role="button"
|
|
8258
|
+
[attr.aria-expanded]="_isOpen()"
|
|
8259
|
+
aria-label="Selecciona una hora">
|
|
8260
|
+
|
|
8261
|
+
<div [class]="_prefixCellCls()">
|
|
8262
|
+
<span clx-icon name="schedule" [size]="_sizeConfig().iconSize"></span>
|
|
8263
|
+
</div>
|
|
8264
|
+
|
|
8265
|
+
<span [class]="_displayClass()">{{ _displayValue() }}</span>
|
|
8266
|
+
|
|
8267
|
+
@if (_value() && !_disabled()) {
|
|
8268
|
+
<div class="absolute right-0 top-0 h-full flex items-center pr-1">
|
|
8269
|
+
<button clx-button variant="ghost" [color]="color()" shape="circle" size="sm"
|
|
8270
|
+
icon="close" [iconOnly]="true"
|
|
8271
|
+
(mousedown)="$event.preventDefault()"
|
|
8272
|
+
(click)="$event.stopPropagation(); _clear()"></button>
|
|
8273
|
+
</div>
|
|
8274
|
+
}
|
|
8275
|
+
</div>
|
|
8276
|
+
|
|
8277
|
+
<ng-template
|
|
8278
|
+
cdkConnectedOverlay
|
|
8279
|
+
[cdkConnectedOverlayOrigin]="origin"
|
|
8280
|
+
[cdkConnectedOverlayOpen]="_isOpen()"
|
|
8281
|
+
[cdkConnectedOverlayPositions]="_positions"
|
|
8282
|
+
[cdkConnectedOverlayScrollStrategy]="_scrollStrategy"
|
|
8283
|
+
[cdkConnectedOverlayMinWidth]="_overlayWidth()"
|
|
8284
|
+
[cdkConnectedOverlayPush]="true"
|
|
8285
|
+
(overlayOutsideClick)="_closePanel()"
|
|
8286
|
+
(overlayKeydown)="_onOverlayKeydown($event)">
|
|
8287
|
+
|
|
8288
|
+
<div [class]="_panelClass()" role="dialog" aria-label="Selector de hora">
|
|
8289
|
+
|
|
8290
|
+
<div class="px-4 pt-4 pb-2 border-b border-slate-100">
|
|
8291
|
+
<p class="text-xs font-semibold text-slate-400 uppercase tracking-wide">Selecciona una hora</p>
|
|
8292
|
+
</div>
|
|
8293
|
+
|
|
8294
|
+
<div class="p-3 max-h-64 overflow-y-auto">
|
|
8295
|
+
<div class="grid grid-cols-4 gap-1">
|
|
8296
|
+
@for (h of _hours; track h) {
|
|
8297
|
+
@for (m of _minutes; track m) {
|
|
8298
|
+
<button
|
|
8299
|
+
type="button"
|
|
8300
|
+
[class]="_cellCls(h, m)"
|
|
8301
|
+
(click)="_selectTime(h, m)">
|
|
8302
|
+
{{ _pad(h) }}:{{ _pad(m) }}
|
|
8303
|
+
</button>
|
|
8304
|
+
}
|
|
8305
|
+
}
|
|
8306
|
+
</div>
|
|
8307
|
+
</div>
|
|
8308
|
+
|
|
8309
|
+
<div class="flex items-center justify-between px-4 py-2 border-t border-slate-100">
|
|
8310
|
+
<button clx-button variant="ghost" [color]="color()" size="sm" (click)="_selectNow()">Ahora</button>
|
|
8311
|
+
<button clx-button variant="ghost" color="slate" size="sm" (click)="_closePanel()">Cerrar</button>
|
|
8312
|
+
</div>
|
|
8313
|
+
|
|
8314
|
+
</div>
|
|
8315
|
+
</ng-template>
|
|
8316
|
+
|
|
8317
|
+
@if (statusMessage() && status() !== 'default') {
|
|
8318
|
+
<p [class]="_statusMsgClass()">{{ statusMessage() }}</p>
|
|
8319
|
+
} @else if (hint()) {
|
|
8320
|
+
<p [class]="_hintClass()">{{ hint() }}</p>
|
|
8321
|
+
}
|
|
8322
|
+
`, isInline: true, dependencies: [{ kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly", "badge", "badgeColor"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
8323
|
+
}
|
|
8324
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxTimepickerComponent, decorators: [{
|
|
8325
|
+
type: Component,
|
|
8326
|
+
args: [{
|
|
8327
|
+
selector: 'clx-timepicker',
|
|
8328
|
+
standalone: true,
|
|
8329
|
+
imports: [ClxIconComponent, ClxButtonComponent, OverlayModule],
|
|
8330
|
+
providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ClxTimepickerComponent), multi: true }],
|
|
8331
|
+
template: `
|
|
8332
|
+
@if (label()) {
|
|
8333
|
+
<label [class]="_labelClass()">{{ label() }}</label>
|
|
8334
|
+
}
|
|
8335
|
+
|
|
8336
|
+
<div
|
|
8337
|
+
#origin="cdkOverlayOrigin"
|
|
8338
|
+
cdkOverlayOrigin
|
|
8339
|
+
[class]="_triggerClass()"
|
|
8340
|
+
(click)="!_disabled() && _togglePanel()"
|
|
8341
|
+
(keydown.enter)="!_disabled() && _togglePanel()"
|
|
8342
|
+
(keydown.space)="!_disabled() && _togglePanel()"
|
|
8343
|
+
tabindex="0"
|
|
8344
|
+
role="button"
|
|
8345
|
+
[attr.aria-expanded]="_isOpen()"
|
|
8346
|
+
aria-label="Selecciona una hora">
|
|
8347
|
+
|
|
8348
|
+
<div [class]="_prefixCellCls()">
|
|
8349
|
+
<span clx-icon name="schedule" [size]="_sizeConfig().iconSize"></span>
|
|
8350
|
+
</div>
|
|
8351
|
+
|
|
8352
|
+
<span [class]="_displayClass()">{{ _displayValue() }}</span>
|
|
8353
|
+
|
|
8354
|
+
@if (_value() && !_disabled()) {
|
|
8355
|
+
<div class="absolute right-0 top-0 h-full flex items-center pr-1">
|
|
8356
|
+
<button clx-button variant="ghost" [color]="color()" shape="circle" size="sm"
|
|
8357
|
+
icon="close" [iconOnly]="true"
|
|
8358
|
+
(mousedown)="$event.preventDefault()"
|
|
8359
|
+
(click)="$event.stopPropagation(); _clear()"></button>
|
|
8360
|
+
</div>
|
|
8361
|
+
}
|
|
8362
|
+
</div>
|
|
8363
|
+
|
|
8364
|
+
<ng-template
|
|
8365
|
+
cdkConnectedOverlay
|
|
8366
|
+
[cdkConnectedOverlayOrigin]="origin"
|
|
8367
|
+
[cdkConnectedOverlayOpen]="_isOpen()"
|
|
8368
|
+
[cdkConnectedOverlayPositions]="_positions"
|
|
8369
|
+
[cdkConnectedOverlayScrollStrategy]="_scrollStrategy"
|
|
8370
|
+
[cdkConnectedOverlayMinWidth]="_overlayWidth()"
|
|
8371
|
+
[cdkConnectedOverlayPush]="true"
|
|
8372
|
+
(overlayOutsideClick)="_closePanel()"
|
|
8373
|
+
(overlayKeydown)="_onOverlayKeydown($event)">
|
|
8374
|
+
|
|
8375
|
+
<div [class]="_panelClass()" role="dialog" aria-label="Selector de hora">
|
|
8376
|
+
|
|
8377
|
+
<div class="px-4 pt-4 pb-2 border-b border-slate-100">
|
|
8378
|
+
<p class="text-xs font-semibold text-slate-400 uppercase tracking-wide">Selecciona una hora</p>
|
|
8379
|
+
</div>
|
|
8380
|
+
|
|
8381
|
+
<div class="p-3 max-h-64 overflow-y-auto">
|
|
8382
|
+
<div class="grid grid-cols-4 gap-1">
|
|
8383
|
+
@for (h of _hours; track h) {
|
|
8384
|
+
@for (m of _minutes; track m) {
|
|
8385
|
+
<button
|
|
8386
|
+
type="button"
|
|
8387
|
+
[class]="_cellCls(h, m)"
|
|
8388
|
+
(click)="_selectTime(h, m)">
|
|
8389
|
+
{{ _pad(h) }}:{{ _pad(m) }}
|
|
8390
|
+
</button>
|
|
8391
|
+
}
|
|
8392
|
+
}
|
|
8393
|
+
</div>
|
|
8394
|
+
</div>
|
|
8395
|
+
|
|
8396
|
+
<div class="flex items-center justify-between px-4 py-2 border-t border-slate-100">
|
|
8397
|
+
<button clx-button variant="ghost" [color]="color()" size="sm" (click)="_selectNow()">Ahora</button>
|
|
8398
|
+
<button clx-button variant="ghost" color="slate" size="sm" (click)="_closePanel()">Cerrar</button>
|
|
8399
|
+
</div>
|
|
8400
|
+
|
|
8401
|
+
</div>
|
|
8402
|
+
</ng-template>
|
|
8403
|
+
|
|
8404
|
+
@if (statusMessage() && status() !== 'default') {
|
|
8405
|
+
<p [class]="_statusMsgClass()">{{ statusMessage() }}</p>
|
|
8406
|
+
} @else if (hint()) {
|
|
8407
|
+
<p [class]="_hintClass()">{{ hint() }}</p>
|
|
8408
|
+
}
|
|
8409
|
+
`,
|
|
8410
|
+
encapsulation: ViewEncapsulation.None,
|
|
8411
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
8412
|
+
host: { class: 'flex flex-col gap-1.5' },
|
|
8413
|
+
}]
|
|
8414
|
+
}], propDecorators: { origin: [{
|
|
8415
|
+
type: ViewChild,
|
|
8416
|
+
args: ['origin']
|
|
8417
|
+
}], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], statusMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusMessage", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], onEscape: [{
|
|
8418
|
+
type: HostListener,
|
|
8419
|
+
args: ['keydown.escape']
|
|
8420
|
+
}] } });
|
|
8421
|
+
|
|
8123
8422
|
const MONTH_NAMES_ES = [
|
|
8124
8423
|
'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
|
|
8125
8424
|
'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre',
|
|
@@ -14311,5 +14610,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
|
|
|
14311
14610
|
* Generated bundle index. Do not edit.
|
|
14312
14611
|
*/
|
|
14313
14612
|
|
|
14314
|
-
export { CLX_ALERT_OPTIONS, CLX_ALERT_RESOLVE, CLX_COLOR_HEX, CLX_COLOR_MAP, CLX_MODAL_ANIM_CONFIG, CLX_MODAL_DATA, CLX_MODAL_REF, CLX_RADIO_GROUP, CLX_TOAST_DEFAULTS, ClxAlertComponent, ClxAlertService, ClxAnimateDirective, ClxAnimateGroupDirective, ClxAnimateService, ClxAppLayoutComponent, ClxAvatarComponent, ClxBadgeComponent, ClxBrandComponent, ClxButtonComponent, ClxButtonGroupComponent, ClxCardBodyDirective, ClxCardComponent, ClxCardFooterDirective, ClxCardHeaderDirective, ClxCarouselComponent, ClxCarouselDirective, ClxCartComponent, ClxCartSummaryDrawer, ClxCellDirective, ClxChartComponent, ClxCheckboxComponent, ClxColorPickerComponent, ClxColumnDefDirective, ClxDateRangePickerComponent, ClxDatepickerComponent, ClxDrawerComponent, ClxDrawerService, ClxEditorComponent, ClxEditorLinkModalComponent, ClxFilterPanelComponent, ClxHeaderCellDirective, ClxIconComponent, ClxInputComponent, ClxListComponent, ClxListItemComponent, ClxMenuComponent, ClxMenuItemComponent, ClxModalComponent, ClxModalService, ClxNavGroupComponent, ClxNumberComponent, ClxPageEmptyComponent, ClxPageNotFoundComponent, ClxPageServerErrorComponent, ClxPageUnauthorizedComponent, ClxPaginationComponent, ClxProductComponent, ClxProductDetailComponent, ClxProfileComponent, ClxProgressBarComponent, ClxRadioComponent, ClxRadioGroupComponent, ClxRatingComponent, ClxSelectComponent, ClxSkeletonComponent, ClxSliderComponent, ClxSpinnerComponent, ClxStatCardComponent, ClxStepComponent, ClxStepperComponent, ClxSwitchComponent, ClxTabDirective, ClxTableComponent, ClxTabsComponent, ClxTagComponent, ClxTextareaComponent, ClxTimelineComponent, ClxTimelineItemComponent, ClxToastComponent, ClxToastContainerComponent, ClxToastService, ClxTooltipComponent, ClxTooltipDirective, ClxTreeComponent, ClxUploadComponent, ClxWishlistComponent, ClxWizardComponent, parseColorInput, resolveColor };
|
|
14613
|
+
export { CLX_ALERT_OPTIONS, CLX_ALERT_RESOLVE, CLX_COLOR_HEX, CLX_COLOR_MAP, CLX_MODAL_ANIM_CONFIG, CLX_MODAL_DATA, CLX_MODAL_REF, CLX_RADIO_GROUP, CLX_TOAST_DEFAULTS, ClxAlertComponent, ClxAlertService, ClxAnimateDirective, ClxAnimateGroupDirective, ClxAnimateService, ClxAppLayoutComponent, ClxAvatarComponent, ClxBadgeComponent, ClxBrandComponent, ClxButtonComponent, ClxButtonGroupComponent, ClxCardBodyDirective, ClxCardComponent, ClxCardFooterDirective, ClxCardHeaderDirective, ClxCarouselComponent, ClxCarouselDirective, ClxCartComponent, ClxCartSummaryDrawer, ClxCellDirective, ClxChartComponent, ClxCheckboxComponent, ClxColorPickerComponent, ClxColumnDefDirective, ClxDateRangePickerComponent, ClxDatepickerComponent, ClxDrawerComponent, ClxDrawerService, ClxEditorComponent, ClxEditorLinkModalComponent, ClxFilterPanelComponent, ClxHeaderCellDirective, ClxIconComponent, ClxInputComponent, ClxListComponent, ClxListItemComponent, ClxMenuComponent, ClxMenuItemComponent, ClxModalComponent, ClxModalService, ClxNavGroupComponent, ClxNumberComponent, ClxPageEmptyComponent, ClxPageNotFoundComponent, ClxPageServerErrorComponent, ClxPageUnauthorizedComponent, ClxPaginationComponent, ClxProductComponent, ClxProductDetailComponent, ClxProfileComponent, ClxProgressBarComponent, ClxRadioComponent, ClxRadioGroupComponent, ClxRatingComponent, ClxSelectComponent, ClxSkeletonComponent, ClxSliderComponent, ClxSpinnerComponent, ClxStatCardComponent, ClxStepComponent, ClxStepperComponent, ClxSwitchComponent, ClxTabDirective, ClxTableComponent, ClxTabsComponent, ClxTagComponent, ClxTextareaComponent, ClxTimelineComponent, ClxTimelineItemComponent, ClxTimepickerComponent, ClxToastComponent, ClxToastContainerComponent, ClxToastService, ClxTooltipComponent, ClxTooltipDirective, ClxTreeComponent, ClxUploadComponent, ClxWishlistComponent, ClxWizardComponent, TIMEPICKER_SIZE_MAP, parseColorInput, resolveColor };
|
|
14315
14614
|
//# sourceMappingURL=codexly-ui.mjs.map
|