@rt-tools/ui-kit-v2 0.39.1 → 0.40.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.
- package/fesm2022/rt-tools-ui-kit-v2-ai-prompt-input.mjs +13 -1
- package/fesm2022/rt-tools-ui-kit-v2-ai-prompt-input.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-core.mjs +12 -0
- package/fesm2022/rt-tools-ui-kit-v2-core.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-data-table.mjs +3 -1
- package/fesm2022/rt-tools-ui-kit-v2-data-table.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-date-picker.mjs +60 -7
- package/fesm2022/rt-tools-ui-kit-v2-date-picker.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-date-range.mjs +91 -10
- package/fesm2022/rt-tools-ui-kit-v2-date-range.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-detail-list.mjs +2 -2
- package/fesm2022/rt-tools-ui-kit-v2-detail-list.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-input-number.mjs +76 -5
- package/fesm2022/rt-tools-ui-kit-v2-input-number.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-rich-editor.mjs +111 -35
- package/fesm2022/rt-tools-ui-kit-v2-rich-editor.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-stat-tile.mjs +37 -16
- package/fesm2022/rt-tools-ui-kit-v2-stat-tile.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-table.mjs +94 -5
- package/fesm2022/rt-tools-ui-kit-v2-table.mjs.map +1 -1
- package/package.json +1 -1
- package/src/lib/components/date-picker/panel/rt-date-panel.component.scss +51 -2
- package/src/lib/components/date-range/panel/rt-date-range-panel.component.scss +95 -2
- package/src/lib/components/detail-list/CONTEXT.md +3 -0
- package/src/lib/components/detail-list/rt-detail-row.component.scss +1 -0
- package/src/lib/components/input-number/CONTEXT.md +8 -0
- package/src/lib/components/input-number/rt-input-number.component.scss +50 -0
- package/src/lib/components/stat-tile/CONTEXT.md +11 -6
- package/src/lib/components/stat-tile/rt-stat-tile.component.scss +21 -0
- package/src/lib/components/stat-tile/stories/component/test-stat-tile-matrix.component.scss +15 -0
- package/src/lib/components/table/CONTEXT.md +20 -0
- package/src/lib/components/table/rt-table.component.scss +77 -22
- package/src/lib/components/table/stories/component/test-table-pinned.component.scss +76 -0
- package/src/rich-editor/lib/components/chat/CONTEXT.md +5 -0
- package/src/styles/_primitives.scss +2 -0
- package/src/styles/_semantic.scss +9 -0
- package/src/styles/_theme-dark.scss +2 -0
- package/styles/tokens.css +66 -0
- package/types/rt-tools-ui-kit-v2-ai-prompt-input.d.ts +4 -0
- package/types/rt-tools-ui-kit-v2-core.d.ts +9 -1
- package/types/rt-tools-ui-kit-v2-date-picker.d.ts +14 -0
- package/types/rt-tools-ui-kit-v2-input-number.d.ts +30 -2
- package/types/rt-tools-ui-kit-v2-rich-editor.d.ts +13 -1
- package/types/rt-tools-ui-kit-v2-stat-tile.d.ts +29 -6
- package/types/rt-tools-ui-kit-v2-table.d.ts +31 -0
|
@@ -156,6 +156,24 @@ function rtDateMonths(year, locale, min, max) {
|
|
|
156
156
|
};
|
|
157
157
|
});
|
|
158
158
|
}
|
|
159
|
+
const YEAR_SPAN_ORIGIN = 2024;
|
|
160
|
+
const RT_DATE_YEAR_SPAN = 12;
|
|
161
|
+
function rtDateYearSpanStart(year) {
|
|
162
|
+
return YEAR_SPAN_ORIGIN + Math.floor((year - YEAR_SPAN_ORIGIN) / 12) * 12;
|
|
163
|
+
}
|
|
164
|
+
function rtDateYears(start, min, max) {
|
|
165
|
+
return Array.from({ length: 12 }, (_, i) => {
|
|
166
|
+
const key = String(start + i);
|
|
167
|
+
return {
|
|
168
|
+
key,
|
|
169
|
+
label: key,
|
|
170
|
+
disabled: !rtDateInBounds(key, min, max)
|
|
171
|
+
};
|
|
172
|
+
});
|
|
173
|
+
}
|
|
174
|
+
function rtDateCanPageYears(start, delta, min, max) {
|
|
175
|
+
return rtDateYears(start + delta * 12, min, max).some((cell) => !cell.disabled);
|
|
176
|
+
}
|
|
159
177
|
function timeBound(bound, day) {
|
|
160
178
|
if (bound === null || bound.length <= TIME_LEN) return bound;
|
|
161
179
|
return day === bound.slice(0, DAY_LEN) ? bound.slice(11) : null;
|
|
@@ -216,6 +234,11 @@ function rtDateGridKey(key, day, firstDay, min, max) {
|
|
|
216
234
|
const BEM_BLOCK$1 = "rt-date-panel";
|
|
217
235
|
const MONTH_LEN = 7;
|
|
218
236
|
const YEAR_LEN$1 = 4;
|
|
237
|
+
const ESCAPE_BACK = {
|
|
238
|
+
days: null,
|
|
239
|
+
months: "days",
|
|
240
|
+
years: "months"
|
|
241
|
+
};
|
|
219
242
|
var RtDatePanelComponent = class RtDatePanelComponent {
|
|
220
243
|
#locale;
|
|
221
244
|
#openedAt;
|
|
@@ -250,6 +273,17 @@ var RtDatePanelComponent = class RtDatePanelComponent {
|
|
|
250
273
|
this.monthCells = computed(() => rtDateMonths(this.year(), this.#locale(), this.min(), this.max()), ...ngDevMode ? [{ debugName: "monthCells" }] : /* istanbul ignore next */ []);
|
|
251
274
|
this.canPrevYear = computed(() => rtDateInBounds(String(this.year() - 1), this.min(), this.max()), ...ngDevMode ? [{ debugName: "canPrevYear" }] : /* istanbul ignore next */ []);
|
|
252
275
|
this.canNextYear = computed(() => rtDateInBounds(String(this.year() + 1), this.min(), this.max()), ...ngDevMode ? [{ debugName: "canNextYear" }] : /* istanbul ignore next */ []);
|
|
276
|
+
this.yearStart = linkedSignal(() => rtDateYearSpanStart(this.year()), ...ngDevMode ? [{ debugName: "yearStart" }] : /* istanbul ignore next */ []);
|
|
277
|
+
this.yearCells = computed(() => rtDateYears(this.yearStart(), this.min(), this.max()), ...ngDevMode ? [{ debugName: "yearCells" }] : /* istanbul ignore next */ []);
|
|
278
|
+
this.yearSpan = computed(() => {
|
|
279
|
+
const cells = this.yearCells();
|
|
280
|
+
return `${cells[0].label} – ${cells[cells.length - 1].label}`;
|
|
281
|
+
}, ...ngDevMode ? [{ debugName: "yearSpan" }] : /* istanbul ignore next */ []);
|
|
282
|
+
this.chosenYear = computed(() => this.draftDay()?.slice(0, YEAR_LEN$1) ?? null, ...ngDevMode ? [{ debugName: "chosenYear" }] : /* istanbul ignore next */ []);
|
|
283
|
+
this.currentYear = computed(() => this.today().slice(0, YEAR_LEN$1), ...ngDevMode ? [{ debugName: "currentYear" }] : /* istanbul ignore next */ []);
|
|
284
|
+
this.currentMonth = computed(() => this.today().slice(0, MONTH_LEN), ...ngDevMode ? [{ debugName: "currentMonth" }] : /* istanbul ignore next */ []);
|
|
285
|
+
this.canPrevYears = computed(() => rtDateCanPageYears(this.yearStart(), -1, this.min(), this.max()), ...ngDevMode ? [{ debugName: "canPrevYears" }] : /* istanbul ignore next */ []);
|
|
286
|
+
this.canNextYears = computed(() => rtDateCanPageYears(this.yearStart(), 1, this.min(), this.max()), ...ngDevMode ? [{ debugName: "canNextYears" }] : /* istanbul ignore next */ []);
|
|
253
287
|
this.draftHour = computed(() => this.#part(0), ...ngDevMode ? [{ debugName: "draftHour" }] : /* istanbul ignore next */ []);
|
|
254
288
|
this.draftMinute = computed(() => this.#part(1), ...ngDevMode ? [{ debugName: "draftMinute" }] : /* istanbul ignore next */ []);
|
|
255
289
|
this.columns = computed(() => rtDateTimeColumns({
|
|
@@ -334,6 +368,25 @@ var RtDatePanelComponent = class RtDatePanelComponent {
|
|
|
334
368
|
this.shownMonth.set(cell.key);
|
|
335
369
|
this.view.set("days");
|
|
336
370
|
}
|
|
371
|
+
openYears() {
|
|
372
|
+
this.yearStart.set(rtDateYearSpanStart(this.year()));
|
|
373
|
+
this.view.set("years");
|
|
374
|
+
}
|
|
375
|
+
pageYears(delta) {
|
|
376
|
+
this.yearStart.update((start) => start + delta * 12);
|
|
377
|
+
}
|
|
378
|
+
pickYear(cell) {
|
|
379
|
+
this.year.set(Number(cell.key));
|
|
380
|
+
this.view.set("months");
|
|
381
|
+
}
|
|
382
|
+
onEscape() {
|
|
383
|
+
const back = ESCAPE_BACK[this.view()];
|
|
384
|
+
if (back === null) {
|
|
385
|
+
this.closed.emit();
|
|
386
|
+
return;
|
|
387
|
+
}
|
|
388
|
+
this.view.set(back);
|
|
389
|
+
}
|
|
337
390
|
apply() {
|
|
338
391
|
const value = this.#draftValue();
|
|
339
392
|
if (value !== "") this.#emit(value);
|
|
@@ -423,7 +476,7 @@ var RtDatePanelComponent = class RtDatePanelComponent {
|
|
|
423
476
|
closed: "closed"
|
|
424
477
|
},
|
|
425
478
|
host: {
|
|
426
|
-
listeners: { "keydown.escape": "
|
|
479
|
+
listeners: { "keydown.escape": "onEscape()" },
|
|
427
480
|
properties: {
|
|
428
481
|
"class.rt-date-panel--sheet": "sheet()",
|
|
429
482
|
"class.rt-date-panel--with-time": "type() !== 'date'"
|
|
@@ -437,8 +490,8 @@ var RtDatePanelComponent = class RtDatePanelComponent {
|
|
|
437
490
|
isSignal: true
|
|
438
491
|
}],
|
|
439
492
|
ngImport: i0,
|
|
440
|
-
template: "<ng-container rtBlock=\"rt-date-panel\">\n @if (split()) {\n <rt-toggle-button-group\n rtElem=\"tabs\"\n qa-dataid=\"date-panel-tabs\"\n fullWidth\n [ariaLabel]=\"t().uiDate + ' | ' + t().uiTime\"\n [options]=\"tabs()\"\n [value]=\"tab()\"\n (valueChange)=\"tab.set($event)\" />\n }\n\n <div rtElem=\"body\">\n @if (showDate()) {\n @if (view() === 'days') {\n <rt-calendar\n rtElem=\"calendar\"\n qa-dataid=\"date-panel-calendar\"\n grid\n titleAction\n headerTitle\n [months]=\"months()\"\n [weekdayLabels]=\"weekdays()\"\n [canPrev]=\"canPrev()\"\n [canNext]=\"canNext()\"\n [activeKey]=\"activeKey()\"\n [prevAriaLabel]=\"t().uiPrevMonth\"\n [nextAriaLabel]=\"t().uiNextMonth\"\n (prevMonth)=\"page(-1)\"\n (nextMonth)=\"page(1)\"\n (dayClick)=\"pickDay($event)\"\n (gridKey)=\"onGridKey($event)\"\n (titleClick)=\"openMonths()\" />\n } @else {\n <div rtElem=\"months\" qa-dataid=\"date-panel-months\" role=\"group\" [attr.aria-label]=\"t().uiChooseMonth\">\n <div rtElem=\"months-header\">\n <rt-icon-button\n qa-dataid=\"date-panel-prev-year\"\n icon=\"chevron-left\"\n variant=\"secondary\"\n radius=\"full\"\n [ariaLabel]=\"t().uiPrevYear\"\n [disabled]=\"!canPrevYear()\"\n (clicked)=\"pageYear(-1)\" />\n <
|
|
441
|
-
styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-date-panel{--rt-date-panel-cell-size: var(--rt-control-height-sm);--rt-date-panel-cell-radius: var(--rt-radius-md);--rt-date-panel-divider-width: var(--rt-border-width-thin);--rt-date-panel-column-height: calc(var(--rt-date-panel-cell-size) * 7 + var(--rt-space-0-5) * 6);display:flex;flex-direction:column;padding:var(--rt-space-4);gap:var(--rt-space-4)}.rt-date-panel__body{display:flex;align-items:flex-start;gap:var(--rt-space-4)}.rt-date-panel .rt-date-panel__calendar{--rt-calendar-month-count: 1;--rt-calendar-day-justify: center}.rt-date-panel__calendar,.rt-date-panel__months{flex:1 1 auto;min-inline-size:calc(var(--rt-size-10) * 7)}.rt-date-panel__months-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--rt-space-4)}.rt-date-panel__year{color:var(--rt-color-text-primary);font-weight:var(--rt-font-weight-semibold)}.rt-date-panel__month-grid{display:grid;gap:var(--rt-space-1);grid-template-columns:repeat(3,1fr)}.rt-date-panel__time{display:flex;gap:var(--rt-space-1)}.rt-date-panel__column{position:relative;display:flex;flex-direction:column;gap:var(--rt-space-0-5);max-block-size:var(--rt-date-panel-column-height);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}.rt-date-panel__cell{flex:0 0 auto;padding:0 var(--rt-space-2);border:none;border-radius:var(--rt-date-panel-cell-radius);background:none;color:var(--rt-color-text-primary);cursor:pointer;font:inherit;font-size:var(--rt-text-sm);font-variant-numeric:tabular-nums;min-block-size:var(--rt-date-panel-cell-size);min-inline-size:var(--rt-control-height-md)}.rt-date-panel__cell:hover:not(:disabled,[aria-pressed=true]){background:var(--rt-color-bg-subtle)}.rt-date-panel__cell:focus-visible{outline:var(--rt-focus-ring-width) solid var(--rt-focus-ring-color);outline-offset:var(--rt-focus-ring-offset)}.rt-date-panel__cell[aria-pressed=true]{background:var(--rt-color-action-primary);color:var(--rt-color-action-on-primary)}.rt-date-panel__cell:disabled{color:var(--rt-color-text-muted);cursor:not-allowed;opacity:.45}.rt-date-panel__footer{display:flex;justify-content:flex-end;padding-top:var(--rt-space-2);border-top:var(--rt-date-panel-divider-width) solid var(--rt-color-border-subtle);gap:var(--rt-space-2)}.rt-date-panel:not(.rt-date-panel--with-time) .rt-date-panel__footer{justify-content:center}.rt-date-panel--sheet{--rt-date-panel-cell-size: calc(var(--rt-size-10) + var(--rt-size-1));padding-inline:
|
|
493
|
+
template: "<ng-container rtBlock=\"rt-date-panel\">\n @if (split()) {\n <rt-toggle-button-group\n rtElem=\"tabs\"\n qa-dataid=\"date-panel-tabs\"\n fullWidth\n [ariaLabel]=\"t().uiDate + ' | ' + t().uiTime\"\n [options]=\"tabs()\"\n [value]=\"tab()\"\n (valueChange)=\"tab.set($event)\" />\n }\n\n <div rtElem=\"body\">\n @if (showDate()) {\n @if (view() === 'days') {\n <rt-calendar\n rtElem=\"calendar\"\n qa-dataid=\"date-panel-calendar\"\n grid\n titleAction\n headerTitle\n [months]=\"months()\"\n [weekdayLabels]=\"weekdays()\"\n [canPrev]=\"canPrev()\"\n [canNext]=\"canNext()\"\n [activeKey]=\"activeKey()\"\n [prevAriaLabel]=\"t().uiPrevMonth\"\n [nextAriaLabel]=\"t().uiNextMonth\"\n (prevMonth)=\"page(-1)\"\n (nextMonth)=\"page(1)\"\n (dayClick)=\"pickDay($event)\"\n (gridKey)=\"onGridKey($event)\"\n (titleClick)=\"openMonths()\" />\n } @else if (view() === 'months') {\n <div rtElem=\"months\" qa-dataid=\"date-panel-months\" role=\"group\" [attr.aria-label]=\"t().uiChooseMonth\">\n <div rtElem=\"months-header\">\n <rt-icon-button\n qa-dataid=\"date-panel-prev-year\"\n icon=\"chevron-left\"\n variant=\"secondary\"\n radius=\"full\"\n [ariaLabel]=\"t().uiPrevYear\"\n [disabled]=\"!canPrevYear()\"\n (clicked)=\"pageYear(-1)\" />\n <button\n rtElem=\"year\"\n qa-dataid=\"date-panel-year\"\n type=\"button\"\n [attr.aria-label]=\"t().uiChooseYear\"\n (click)=\"openYears()\">\n {{ year() }}\n </button>\n <rt-icon-button\n qa-dataid=\"date-panel-next-year\"\n icon=\"chevron-right\"\n variant=\"secondary\"\n radius=\"full\"\n [ariaLabel]=\"t().uiNextYear\"\n [disabled]=\"!canNextYear()\"\n (clicked)=\"pageYear(1)\" />\n </div>\n <div rtElem=\"month-grid\">\n @for (cell of monthCells(); track cell.key) {\n <button\n rtElem=\"cell\"\n qa-dataid=\"date-panel-month\"\n type=\"button\"\n [attr.data-key]=\"cell.key\"\n [attr.data-current]=\"cell.key === currentMonth() ? '' : null\"\n [attr.aria-pressed]=\"cell.key === shownMonth()\"\n [disabled]=\"cell.disabled\"\n (click)=\"pickMonth(cell)\">\n {{ cell.label }}\n </button>\n }\n </div>\n </div>\n } @else {\n <div rtElem=\"months\" qa-dataid=\"date-panel-years\" role=\"group\" [attr.aria-label]=\"t().uiChooseYear\">\n <div rtElem=\"months-header\">\n <rt-icon-button\n qa-dataid=\"date-panel-prev-years\"\n icon=\"chevron-left\"\n variant=\"secondary\"\n radius=\"full\"\n [ariaLabel]=\"t().uiPrevYears\"\n [disabled]=\"!canPrevYears()\"\n (clicked)=\"pageYears(-1)\" />\n <span rtElem=\"span\" qa-dataid=\"date-panel-span\">{{ yearSpan() }}</span>\n <rt-icon-button\n qa-dataid=\"date-panel-next-years\"\n icon=\"chevron-right\"\n variant=\"secondary\"\n radius=\"full\"\n [ariaLabel]=\"t().uiNextYears\"\n [disabled]=\"!canNextYears()\"\n (clicked)=\"pageYears(1)\" />\n </div>\n <div rtElem=\"month-grid\">\n @for (cell of yearCells(); track cell.key) {\n <button\n rtElem=\"cell\"\n qa-dataid=\"date-panel-year-cell\"\n type=\"button\"\n [attr.data-key]=\"cell.key\"\n [attr.data-current]=\"cell.key === currentYear() ? '' : null\"\n [attr.aria-pressed]=\"cell.key === chosenYear()\"\n [disabled]=\"cell.disabled\"\n (click)=\"pickYear(cell)\">\n {{ cell.label }}\n </button>\n }\n </div>\n </div>\n }\n }\n\n @if (showTime()) {\n <div rtElem=\"time\" qa-dataid=\"date-panel-time\">\n <div rtElem=\"column\" qa-dataid=\"date-panel-hours\" role=\"group\" [attr.aria-label]=\"t().uiHours\">\n @for (cell of columns().hours; track cell.value) {\n <button\n #timeCell\n rtElem=\"cell\"\n qa-dataid=\"date-panel-hour\"\n type=\"button\"\n [attr.aria-pressed]=\"cell.value === draftHour()\"\n [disabled]=\"cell.disabled\"\n (click)=\"pickHour(cell.value)\">\n {{ cell.label }}\n </button>\n }\n </div>\n <div rtElem=\"column\" qa-dataid=\"date-panel-minutes\" role=\"group\" [attr.aria-label]=\"t().uiMinutes\">\n @for (cell of columns().minutes; track cell.value) {\n <button\n #timeCell\n rtElem=\"cell\"\n qa-dataid=\"date-panel-minute\"\n type=\"button\"\n [attr.aria-pressed]=\"cell.value === draftMinute()\"\n [disabled]=\"cell.disabled\"\n (click)=\"pickMinute(cell.value)\">\n {{ cell.label }}\n </button>\n }\n </div>\n </div>\n }\n </div>\n\n <div rtElem=\"footer\">\n @switch (type()) {\n @case ('date') {\n <button\n rtButton\n qa-dataid=\"date-panel-today\"\n theme=\"secondary\"\n appearance=\"text\"\n size=\"sm\"\n type=\"button\"\n [label]=\"t().uiToday\"\n [attr.aria-label]=\"t().uiToday\"\n [disabled]=\"todayOff()\"\n (click)=\"pickToday()\"></button>\n }\n @case ('time') {\n <button\n rtButton\n qa-dataid=\"date-panel-now\"\n theme=\"secondary\"\n appearance=\"text\"\n size=\"sm\"\n type=\"button\"\n [label]=\"t().uiNow\"\n [attr.aria-label]=\"t().uiNow\"\n (click)=\"pickNow()\"></button>\n <button\n rtButton\n qa-dataid=\"date-panel-done\"\n size=\"sm\"\n type=\"button\"\n [label]=\"t().uiDone\"\n [attr.aria-label]=\"t().uiDone\"\n [disabled]=\"!canApply()\"\n (click)=\"apply()\"></button>\n }\n @default {\n <button\n rtButton\n qa-dataid=\"date-panel-apply\"\n size=\"sm\"\n type=\"button\"\n [label]=\"t().uiApply\"\n [attr.aria-label]=\"t().uiApply\"\n [disabled]=\"!canApply()\"\n (click)=\"apply()\"></button>\n }\n }\n </div>\n</ng-container>\n",
|
|
494
|
+
styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-date-panel{--rt-date-panel-cell-size: var(--rt-control-height-sm);--rt-date-panel-cell-radius: var(--rt-radius-md);--rt-date-panel-divider-width: var(--rt-border-width-thin);--rt-date-panel-current-ring: inset 0 0 0 var(--rt-border-width-thin) var(--rt-color-action-primary);--rt-date-panel-column-height: calc(var(--rt-date-panel-cell-size) * 7 + var(--rt-space-0-5) * 6);display:flex;flex-direction:column;padding:var(--rt-space-4);gap:var(--rt-space-4)}.rt-date-panel__body{display:flex;align-items:flex-start;gap:var(--rt-space-4)}.rt-date-panel .rt-date-panel__calendar{--rt-calendar-month-count: 1;--rt-calendar-day-justify: center}.rt-date-panel__calendar,.rt-date-panel__months{flex:1 1 auto;min-inline-size:calc(var(--rt-size-10) * 7)}.rt-date-panel__months-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--rt-space-4)}.rt-date-panel__year{padding:var(--rt-space-1) var(--rt-space-2);border:none;border-radius:var(--rt-date-panel-cell-radius);background:none;color:var(--rt-color-text-primary);cursor:pointer;font:inherit;font-weight:var(--rt-font-weight-semibold)}.rt-date-panel__year:hover{background:var(--rt-color-bg-subtle)}.rt-date-panel__year:focus-visible{outline:var(--rt-focus-ring-width) solid var(--rt-focus-ring-color);outline-offset:var(--rt-focus-ring-offset)}.rt-date-panel__span{color:var(--rt-color-text-primary);font-weight:var(--rt-font-weight-semibold)}.rt-date-panel__month-grid{display:grid;gap:var(--rt-space-1);grid-template-columns:repeat(3,1fr)}.rt-date-panel__month-grid .rt-date-panel__cell{font-weight:var(--rt-font-weight-medium)}.rt-date-panel__month-grid .rt-date-panel__cell:hover:not(:disabled,[aria-pressed=true]){background:var(--rt-color-bg-hover)}.rt-date-panel__month-grid .rt-date-panel__cell[data-current]:not([aria-pressed=true]){color:var(--rt-color-action-primary)}.rt-date-panel__month-grid .rt-date-panel__cell:disabled{color:var(--rt-color-text-disabled);opacity:1}.rt-date-panel__time{display:flex;gap:var(--rt-space-1)}.rt-date-panel__column{position:relative;display:flex;flex-direction:column;gap:var(--rt-space-0-5);max-block-size:var(--rt-date-panel-column-height);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}.rt-date-panel__cell{flex:0 0 auto;padding:0 var(--rt-space-2);border:none;border-radius:var(--rt-date-panel-cell-radius);background:none;color:var(--rt-color-text-primary);cursor:pointer;font:inherit;font-size:var(--rt-text-sm);font-variant-numeric:tabular-nums;min-block-size:var(--rt-date-panel-cell-size);min-inline-size:var(--rt-control-height-md)}.rt-date-panel__cell:hover:not(:disabled,[aria-pressed=true]){background:var(--rt-color-bg-subtle)}.rt-date-panel__cell:focus-visible{outline:var(--rt-focus-ring-width) solid var(--rt-focus-ring-color);outline-offset:var(--rt-focus-ring-offset)}.rt-date-panel__cell[data-current]:not([aria-pressed=true]){box-shadow:var(--rt-date-panel-current-ring)}.rt-date-panel__cell[aria-pressed=true]{background:var(--rt-color-action-primary);color:var(--rt-color-action-on-primary)}.rt-date-panel__cell:disabled{color:var(--rt-color-text-muted);cursor:not-allowed;opacity:.45}.rt-date-panel__footer{display:flex;justify-content:flex-end;padding-top:var(--rt-space-2);border-top:var(--rt-date-panel-divider-width) solid var(--rt-color-border-subtle);gap:var(--rt-space-2)}.rt-date-panel:not(.rt-date-panel--with-time) .rt-date-panel__footer{justify-content:center}.rt-date-panel--sheet{--rt-date-panel-cell-size: calc(var(--rt-size-10) + var(--rt-size-1));padding-inline:var(--rt-space-5)}.rt-date-panel--sheet .rt-date-panel__calendar{--rt-calendar-day-size: var(--rt-date-panel-cell-size)}.rt-date-panel--sheet .rt-date-panel__body{flex-direction:column;align-items:stretch}.rt-date-panel--sheet .rt-date-panel__calendar,.rt-date-panel--sheet .rt-date-panel__months{min-inline-size:0}.rt-date-panel--sheet .rt-date-panel__time{justify-content:center}.rt-date-panel--sheet .rt-date-panel__column{flex:1 1 0}}\n"],
|
|
442
495
|
dependencies: [
|
|
443
496
|
{
|
|
444
497
|
kind: "directive",
|
|
@@ -570,10 +623,10 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
570
623
|
class: BEM_BLOCK$1,
|
|
571
624
|
"[class.rt-date-panel--sheet]": "sheet()",
|
|
572
625
|
"[class.rt-date-panel--with-time]": "type() !== 'date'",
|
|
573
|
-
"(keydown.escape)": "
|
|
626
|
+
"(keydown.escape)": "onEscape()"
|
|
574
627
|
},
|
|
575
|
-
template: "<ng-container rtBlock=\"rt-date-panel\">\n @if (split()) {\n <rt-toggle-button-group\n rtElem=\"tabs\"\n qa-dataid=\"date-panel-tabs\"\n fullWidth\n [ariaLabel]=\"t().uiDate + ' | ' + t().uiTime\"\n [options]=\"tabs()\"\n [value]=\"tab()\"\n (valueChange)=\"tab.set($event)\" />\n }\n\n <div rtElem=\"body\">\n @if (showDate()) {\n @if (view() === 'days') {\n <rt-calendar\n rtElem=\"calendar\"\n qa-dataid=\"date-panel-calendar\"\n grid\n titleAction\n headerTitle\n [months]=\"months()\"\n [weekdayLabels]=\"weekdays()\"\n [canPrev]=\"canPrev()\"\n [canNext]=\"canNext()\"\n [activeKey]=\"activeKey()\"\n [prevAriaLabel]=\"t().uiPrevMonth\"\n [nextAriaLabel]=\"t().uiNextMonth\"\n (prevMonth)=\"page(-1)\"\n (nextMonth)=\"page(1)\"\n (dayClick)=\"pickDay($event)\"\n (gridKey)=\"onGridKey($event)\"\n (titleClick)=\"openMonths()\" />\n } @else {\n <div rtElem=\"months\" qa-dataid=\"date-panel-months\" role=\"group\" [attr.aria-label]=\"t().uiChooseMonth\">\n <div rtElem=\"months-header\">\n <rt-icon-button\n qa-dataid=\"date-panel-prev-year\"\n icon=\"chevron-left\"\n variant=\"secondary\"\n radius=\"full\"\n [ariaLabel]=\"t().uiPrevYear\"\n [disabled]=\"!canPrevYear()\"\n (clicked)=\"pageYear(-1)\" />\n <
|
|
576
|
-
styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-date-panel{--rt-date-panel-cell-size: var(--rt-control-height-sm);--rt-date-panel-cell-radius: var(--rt-radius-md);--rt-date-panel-divider-width: var(--rt-border-width-thin);--rt-date-panel-column-height: calc(var(--rt-date-panel-cell-size) * 7 + var(--rt-space-0-5) * 6);display:flex;flex-direction:column;padding:var(--rt-space-4);gap:var(--rt-space-4)}.rt-date-panel__body{display:flex;align-items:flex-start;gap:var(--rt-space-4)}.rt-date-panel .rt-date-panel__calendar{--rt-calendar-month-count: 1;--rt-calendar-day-justify: center}.rt-date-panel__calendar,.rt-date-panel__months{flex:1 1 auto;min-inline-size:calc(var(--rt-size-10) * 7)}.rt-date-panel__months-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--rt-space-4)}.rt-date-panel__year{color:var(--rt-color-text-primary);font-weight:var(--rt-font-weight-semibold)}.rt-date-panel__month-grid{display:grid;gap:var(--rt-space-1);grid-template-columns:repeat(3,1fr)}.rt-date-panel__time{display:flex;gap:var(--rt-space-1)}.rt-date-panel__column{position:relative;display:flex;flex-direction:column;gap:var(--rt-space-0-5);max-block-size:var(--rt-date-panel-column-height);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}.rt-date-panel__cell{flex:0 0 auto;padding:0 var(--rt-space-2);border:none;border-radius:var(--rt-date-panel-cell-radius);background:none;color:var(--rt-color-text-primary);cursor:pointer;font:inherit;font-size:var(--rt-text-sm);font-variant-numeric:tabular-nums;min-block-size:var(--rt-date-panel-cell-size);min-inline-size:var(--rt-control-height-md)}.rt-date-panel__cell:hover:not(:disabled,[aria-pressed=true]){background:var(--rt-color-bg-subtle)}.rt-date-panel__cell:focus-visible{outline:var(--rt-focus-ring-width) solid var(--rt-focus-ring-color);outline-offset:var(--rt-focus-ring-offset)}.rt-date-panel__cell[aria-pressed=true]{background:var(--rt-color-action-primary);color:var(--rt-color-action-on-primary)}.rt-date-panel__cell:disabled{color:var(--rt-color-text-muted);cursor:not-allowed;opacity:.45}.rt-date-panel__footer{display:flex;justify-content:flex-end;padding-top:var(--rt-space-2);border-top:var(--rt-date-panel-divider-width) solid var(--rt-color-border-subtle);gap:var(--rt-space-2)}.rt-date-panel:not(.rt-date-panel--with-time) .rt-date-panel__footer{justify-content:center}.rt-date-panel--sheet{--rt-date-panel-cell-size: calc(var(--rt-size-10) + var(--rt-size-1));padding-inline:
|
|
628
|
+
template: "<ng-container rtBlock=\"rt-date-panel\">\n @if (split()) {\n <rt-toggle-button-group\n rtElem=\"tabs\"\n qa-dataid=\"date-panel-tabs\"\n fullWidth\n [ariaLabel]=\"t().uiDate + ' | ' + t().uiTime\"\n [options]=\"tabs()\"\n [value]=\"tab()\"\n (valueChange)=\"tab.set($event)\" />\n }\n\n <div rtElem=\"body\">\n @if (showDate()) {\n @if (view() === 'days') {\n <rt-calendar\n rtElem=\"calendar\"\n qa-dataid=\"date-panel-calendar\"\n grid\n titleAction\n headerTitle\n [months]=\"months()\"\n [weekdayLabels]=\"weekdays()\"\n [canPrev]=\"canPrev()\"\n [canNext]=\"canNext()\"\n [activeKey]=\"activeKey()\"\n [prevAriaLabel]=\"t().uiPrevMonth\"\n [nextAriaLabel]=\"t().uiNextMonth\"\n (prevMonth)=\"page(-1)\"\n (nextMonth)=\"page(1)\"\n (dayClick)=\"pickDay($event)\"\n (gridKey)=\"onGridKey($event)\"\n (titleClick)=\"openMonths()\" />\n } @else if (view() === 'months') {\n <div rtElem=\"months\" qa-dataid=\"date-panel-months\" role=\"group\" [attr.aria-label]=\"t().uiChooseMonth\">\n <div rtElem=\"months-header\">\n <rt-icon-button\n qa-dataid=\"date-panel-prev-year\"\n icon=\"chevron-left\"\n variant=\"secondary\"\n radius=\"full\"\n [ariaLabel]=\"t().uiPrevYear\"\n [disabled]=\"!canPrevYear()\"\n (clicked)=\"pageYear(-1)\" />\n <button\n rtElem=\"year\"\n qa-dataid=\"date-panel-year\"\n type=\"button\"\n [attr.aria-label]=\"t().uiChooseYear\"\n (click)=\"openYears()\">\n {{ year() }}\n </button>\n <rt-icon-button\n qa-dataid=\"date-panel-next-year\"\n icon=\"chevron-right\"\n variant=\"secondary\"\n radius=\"full\"\n [ariaLabel]=\"t().uiNextYear\"\n [disabled]=\"!canNextYear()\"\n (clicked)=\"pageYear(1)\" />\n </div>\n <div rtElem=\"month-grid\">\n @for (cell of monthCells(); track cell.key) {\n <button\n rtElem=\"cell\"\n qa-dataid=\"date-panel-month\"\n type=\"button\"\n [attr.data-key]=\"cell.key\"\n [attr.data-current]=\"cell.key === currentMonth() ? '' : null\"\n [attr.aria-pressed]=\"cell.key === shownMonth()\"\n [disabled]=\"cell.disabled\"\n (click)=\"pickMonth(cell)\">\n {{ cell.label }}\n </button>\n }\n </div>\n </div>\n } @else {\n <div rtElem=\"months\" qa-dataid=\"date-panel-years\" role=\"group\" [attr.aria-label]=\"t().uiChooseYear\">\n <div rtElem=\"months-header\">\n <rt-icon-button\n qa-dataid=\"date-panel-prev-years\"\n icon=\"chevron-left\"\n variant=\"secondary\"\n radius=\"full\"\n [ariaLabel]=\"t().uiPrevYears\"\n [disabled]=\"!canPrevYears()\"\n (clicked)=\"pageYears(-1)\" />\n <span rtElem=\"span\" qa-dataid=\"date-panel-span\">{{ yearSpan() }}</span>\n <rt-icon-button\n qa-dataid=\"date-panel-next-years\"\n icon=\"chevron-right\"\n variant=\"secondary\"\n radius=\"full\"\n [ariaLabel]=\"t().uiNextYears\"\n [disabled]=\"!canNextYears()\"\n (clicked)=\"pageYears(1)\" />\n </div>\n <div rtElem=\"month-grid\">\n @for (cell of yearCells(); track cell.key) {\n <button\n rtElem=\"cell\"\n qa-dataid=\"date-panel-year-cell\"\n type=\"button\"\n [attr.data-key]=\"cell.key\"\n [attr.data-current]=\"cell.key === currentYear() ? '' : null\"\n [attr.aria-pressed]=\"cell.key === chosenYear()\"\n [disabled]=\"cell.disabled\"\n (click)=\"pickYear(cell)\">\n {{ cell.label }}\n </button>\n }\n </div>\n </div>\n }\n }\n\n @if (showTime()) {\n <div rtElem=\"time\" qa-dataid=\"date-panel-time\">\n <div rtElem=\"column\" qa-dataid=\"date-panel-hours\" role=\"group\" [attr.aria-label]=\"t().uiHours\">\n @for (cell of columns().hours; track cell.value) {\n <button\n #timeCell\n rtElem=\"cell\"\n qa-dataid=\"date-panel-hour\"\n type=\"button\"\n [attr.aria-pressed]=\"cell.value === draftHour()\"\n [disabled]=\"cell.disabled\"\n (click)=\"pickHour(cell.value)\">\n {{ cell.label }}\n </button>\n }\n </div>\n <div rtElem=\"column\" qa-dataid=\"date-panel-minutes\" role=\"group\" [attr.aria-label]=\"t().uiMinutes\">\n @for (cell of columns().minutes; track cell.value) {\n <button\n #timeCell\n rtElem=\"cell\"\n qa-dataid=\"date-panel-minute\"\n type=\"button\"\n [attr.aria-pressed]=\"cell.value === draftMinute()\"\n [disabled]=\"cell.disabled\"\n (click)=\"pickMinute(cell.value)\">\n {{ cell.label }}\n </button>\n }\n </div>\n </div>\n }\n </div>\n\n <div rtElem=\"footer\">\n @switch (type()) {\n @case ('date') {\n <button\n rtButton\n qa-dataid=\"date-panel-today\"\n theme=\"secondary\"\n appearance=\"text\"\n size=\"sm\"\n type=\"button\"\n [label]=\"t().uiToday\"\n [attr.aria-label]=\"t().uiToday\"\n [disabled]=\"todayOff()\"\n (click)=\"pickToday()\"></button>\n }\n @case ('time') {\n <button\n rtButton\n qa-dataid=\"date-panel-now\"\n theme=\"secondary\"\n appearance=\"text\"\n size=\"sm\"\n type=\"button\"\n [label]=\"t().uiNow\"\n [attr.aria-label]=\"t().uiNow\"\n (click)=\"pickNow()\"></button>\n <button\n rtButton\n qa-dataid=\"date-panel-done\"\n size=\"sm\"\n type=\"button\"\n [label]=\"t().uiDone\"\n [attr.aria-label]=\"t().uiDone\"\n [disabled]=\"!canApply()\"\n (click)=\"apply()\"></button>\n }\n @default {\n <button\n rtButton\n qa-dataid=\"date-panel-apply\"\n size=\"sm\"\n type=\"button\"\n [label]=\"t().uiApply\"\n [attr.aria-label]=\"t().uiApply\"\n [disabled]=\"!canApply()\"\n (click)=\"apply()\"></button>\n }\n }\n </div>\n</ng-container>\n",
|
|
629
|
+
styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-date-panel{--rt-date-panel-cell-size: var(--rt-control-height-sm);--rt-date-panel-cell-radius: var(--rt-radius-md);--rt-date-panel-divider-width: var(--rt-border-width-thin);--rt-date-panel-current-ring: inset 0 0 0 var(--rt-border-width-thin) var(--rt-color-action-primary);--rt-date-panel-column-height: calc(var(--rt-date-panel-cell-size) * 7 + var(--rt-space-0-5) * 6);display:flex;flex-direction:column;padding:var(--rt-space-4);gap:var(--rt-space-4)}.rt-date-panel__body{display:flex;align-items:flex-start;gap:var(--rt-space-4)}.rt-date-panel .rt-date-panel__calendar{--rt-calendar-month-count: 1;--rt-calendar-day-justify: center}.rt-date-panel__calendar,.rt-date-panel__months{flex:1 1 auto;min-inline-size:calc(var(--rt-size-10) * 7)}.rt-date-panel__months-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--rt-space-4)}.rt-date-panel__year{padding:var(--rt-space-1) var(--rt-space-2);border:none;border-radius:var(--rt-date-panel-cell-radius);background:none;color:var(--rt-color-text-primary);cursor:pointer;font:inherit;font-weight:var(--rt-font-weight-semibold)}.rt-date-panel__year:hover{background:var(--rt-color-bg-subtle)}.rt-date-panel__year:focus-visible{outline:var(--rt-focus-ring-width) solid var(--rt-focus-ring-color);outline-offset:var(--rt-focus-ring-offset)}.rt-date-panel__span{color:var(--rt-color-text-primary);font-weight:var(--rt-font-weight-semibold)}.rt-date-panel__month-grid{display:grid;gap:var(--rt-space-1);grid-template-columns:repeat(3,1fr)}.rt-date-panel__month-grid .rt-date-panel__cell{font-weight:var(--rt-font-weight-medium)}.rt-date-panel__month-grid .rt-date-panel__cell:hover:not(:disabled,[aria-pressed=true]){background:var(--rt-color-bg-hover)}.rt-date-panel__month-grid .rt-date-panel__cell[data-current]:not([aria-pressed=true]){color:var(--rt-color-action-primary)}.rt-date-panel__month-grid .rt-date-panel__cell:disabled{color:var(--rt-color-text-disabled);opacity:1}.rt-date-panel__time{display:flex;gap:var(--rt-space-1)}.rt-date-panel__column{position:relative;display:flex;flex-direction:column;gap:var(--rt-space-0-5);max-block-size:var(--rt-date-panel-column-height);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}.rt-date-panel__cell{flex:0 0 auto;padding:0 var(--rt-space-2);border:none;border-radius:var(--rt-date-panel-cell-radius);background:none;color:var(--rt-color-text-primary);cursor:pointer;font:inherit;font-size:var(--rt-text-sm);font-variant-numeric:tabular-nums;min-block-size:var(--rt-date-panel-cell-size);min-inline-size:var(--rt-control-height-md)}.rt-date-panel__cell:hover:not(:disabled,[aria-pressed=true]){background:var(--rt-color-bg-subtle)}.rt-date-panel__cell:focus-visible{outline:var(--rt-focus-ring-width) solid var(--rt-focus-ring-color);outline-offset:var(--rt-focus-ring-offset)}.rt-date-panel__cell[data-current]:not([aria-pressed=true]){box-shadow:var(--rt-date-panel-current-ring)}.rt-date-panel__cell[aria-pressed=true]{background:var(--rt-color-action-primary);color:var(--rt-color-action-on-primary)}.rt-date-panel__cell:disabled{color:var(--rt-color-text-muted);cursor:not-allowed;opacity:.45}.rt-date-panel__footer{display:flex;justify-content:flex-end;padding-top:var(--rt-space-2);border-top:var(--rt-date-panel-divider-width) solid var(--rt-color-border-subtle);gap:var(--rt-space-2)}.rt-date-panel:not(.rt-date-panel--with-time) .rt-date-panel__footer{justify-content:center}.rt-date-panel--sheet{--rt-date-panel-cell-size: calc(var(--rt-size-10) + var(--rt-size-1));padding-inline:var(--rt-space-5)}.rt-date-panel--sheet .rt-date-panel__calendar{--rt-calendar-day-size: var(--rt-date-panel-cell-size)}.rt-date-panel--sheet .rt-date-panel__body{flex-direction:column;align-items:stretch}.rt-date-panel--sheet .rt-date-panel__calendar,.rt-date-panel--sheet .rt-date-panel__months{min-inline-size:0}.rt-date-panel--sheet .rt-date-panel__time{justify-content:center}.rt-date-panel--sheet .rt-date-panel__column{flex:1 1 0}}\n"]
|
|
577
630
|
}]
|
|
578
631
|
}],
|
|
579
632
|
ctorParameters: () => [],
|
|
@@ -1120,6 +1173,6 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1120
1173
|
}]
|
|
1121
1174
|
}
|
|
1122
1175
|
});
|
|
1123
|
-
export { RtDatePickerComponent, rtDateAddMonths, rtDateCanPage, rtDateFirstDay, rtDateGridKey, rtDateInBounds, rtDateLayout, rtDateMonth, rtDateMonths, rtDateNow, rtDateParse, rtDateRead, rtDateShape, rtDateSplit, rtDateText, rtDateTime, rtDateTimeColumns, rtDateWeekdays, rtDateWrite };
|
|
1176
|
+
export { RT_DATE_YEAR_SPAN, RtDatePickerComponent, rtDateAddMonths, rtDateCanPage, rtDateCanPageYears, rtDateFirstDay, rtDateGridKey, rtDateInBounds, rtDateLayout, rtDateMonth, rtDateMonths, rtDateNow, rtDateParse, rtDateRead, rtDateShape, rtDateSplit, rtDateText, rtDateTime, rtDateTimeColumns, rtDateWeekdays, rtDateWrite, rtDateYearSpanStart, rtDateYears };
|
|
1124
1177
|
|
|
1125
1178
|
//# sourceMappingURL=rt-tools-ui-kit-v2-date-picker.mjs.map
|