@mk-kit/ui 0.41.0 → 0.42.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/README.md +3 -3
- package/fesm2022/mk-kit-ui-core.mjs +87 -0
- package/fesm2022/mk-kit-ui-core.mjs.map +1 -1
- package/fesm2022/mk-kit-ui-data.mjs +368 -13
- package/fesm2022/mk-kit-ui-data.mjs.map +1 -1
- package/fesm2022/mk-kit-ui-datetime.mjs +2 -2
- package/fesm2022/mk-kit-ui-datetime.mjs.map +1 -1
- package/fesm2022/mk-kit-ui-directives.mjs +395 -2
- package/fesm2022/mk-kit-ui-directives.mjs.map +1 -1
- package/fesm2022/mk-kit-ui-dnd.mjs +183 -29
- package/fesm2022/mk-kit-ui-dnd.mjs.map +1 -1
- package/fesm2022/mk-kit-ui-forms.mjs +6 -4
- package/fesm2022/mk-kit-ui-forms.mjs.map +1 -1
- package/fesm2022/mk-kit-ui-table.mjs +26 -6
- package/fesm2022/mk-kit-ui-table.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/mk-kit.css +604 -0
- package/types/mk-kit-ui-core.d.ts +48 -1
- package/types/mk-kit-ui-data.d.ts +158 -3
- package/types/mk-kit-ui-directives.d.ts +234 -3
- package/types/mk-kit-ui-dnd.d.ts +96 -14
- package/types/mk-kit-ui-forms.d.ts +6 -4
- package/types/mk-kit-ui-table.d.ts +38 -4
|
@@ -609,7 +609,7 @@ class MkCalendar {
|
|
|
609
609
|
useExisting: forwardRef(() => MkCalendar),
|
|
610
610
|
multi: true,
|
|
611
611
|
},
|
|
612
|
-
], ngImport: i0, template: "<div class=\"mk-calendar__header\">\n <button\n type=\"button\"\n class=\"mk-calendar__nav\"\n [attr.aria-label]=\"i18n.previousMonth\"\n (click)=\"prevMonth()\"\n >\n <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" aria-hidden=\"true\">\n <path\n d=\"M15 5l-7 7 7 7\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n\n <span class=\"mk-calendar__label\" [id]=\"labelId\" aria-live=\"polite\">{{\n monthLabel()\n }}</span>\n\n <button\n type=\"button\"\n class=\"mk-calendar__nav\"\n [attr.aria-label]=\"i18n.nextMonth\"\n (click)=\"nextMonth()\"\n >\n <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" aria-hidden=\"true\">\n <path\n d=\"M9 5l7 7-7 7\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n</div>\n\n<table\n class=\"mk-calendar__grid\"\n role=\"grid\"\n [attr.aria-labelledby]=\"labelId\"\n (keydown)=\"onGridKeydown($event)\"\n>\n <thead>\n <tr>\n @for (wd of weekdays(); track $index) {\n <th class=\"mk-calendar__weekday\" scope=\"col\">\n <abbr [title]=\"wd.full\">{{ wd.short }}</abbr>\n </th>\n }\n </tr>\n </thead>\n <tbody (mouseleave)=\"clearHover()\">\n @for (week of weeks(); track $index) {\n <tr>\n @for (day of week; track day.getTime()) {\n <td\n class=\"mk-calendar__cell\"\n role=\"gridcell\"\n [attr.aria-selected]=\"isAriaSelected(day) || null\"\n >\n <button\n type=\"button\"\n class=\"mk-calendar__day\"\n [class.mk-calendar__day--outside]=\"isOutside(day)\"\n [class.mk-calendar__day--today]=\"isToday(day)\"\n [class.mk-calendar__day--selected]=\"isSelected(day)\"\n [class.mk-calendar__day--range-start]=\"isRangeStart(day)\"\n [class.mk-calendar__day--range-end]=\"isRangeEnd(day)\"\n [class.mk-calendar__day--in-range]=\"isInRange(day)\"\n [class.mk-calendar__day--disabled]=\"isDisabled(day)\"\n [attr.tabindex]=\"isFocused(day) ? 0 : -1\"\n [attr.aria-label]=\"dayLabel(day)\"\n [attr.aria-current]=\"isToday(day) ? 'date' : null\"\n [attr.aria-disabled]=\"isDisabled(day) || null\"\n (click)=\"select(day)\"\n (mouseenter)=\"onHover(day)\"\n >\n <span class=\"mk-calendar__day-num\">{{ day.getDate() }}</span>\n </button>\n </td>\n }\n </tr>\n }\n </tbody>\n</table>\n", styles: ["@charset \"UTF-8\";:host{--_cell-size: 2.5rem;display:inline-block;width:fit-content;max-width:100%;padding:var(--mk-space-4);font-family:var(--mk-font-sans);color:var(--mk-text);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-lg);box-shadow:var(--mk-shadow-xs)}:host(.mk-calendar--full){display:block;width:100%;min-width:min-content}:host(.mk-calendar--full) .mk-calendar__grid{width:100%}:host(.mk-calendar--full) .mk-calendar__weekday{width:auto;min-width:var(--_cell-size)}:host(.mk-calendar--full) .mk-calendar__day{width:100%;min-width:var(--_cell-size)}:host(.mk-calendar--sm){--_cell-size: 2.1rem;padding:var(--mk-space-3);font-size:var(--mk-font-size-sm)}:host(.mk-calendar--lg){--_cell-size: 2.9rem;font-size:var(--mk-font-size-lg)}.mk-calendar__header{display:flex;align-items:center;gap:var(--mk-space-1);margin-bottom:var(--mk-space-2)}.mk-calendar__label{flex:1 1 auto;text-align:center;font-weight:var(--mk-font-weight-semibold);font-size:var(--mk-font-size-md);white-space:nowrap}.mk-calendar__nav{display:inline-flex;align-items:center;justify-content:center;width:var(--mk-control-height-sm);height:var(--mk-control-height-sm);flex:none;color:var(--mk-text-muted);background:transparent;border:var(--mk-border-width) solid transparent;border-radius:var(--mk-radius-md);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-calendar__nav:hover{background-color:var(--mk-hover-overlay);color:var(--mk-text)}.mk-calendar__nav:active{background-color:var(--mk-active-overlay)}.mk-calendar__nav:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-calendar__nav svg{display:block}.mk-calendar__grid{border-collapse:separate;border-spacing:0;table-layout:fixed}.mk-calendar__weekday{width:var(--_cell-size);padding:0 0 var(--mk-space-2);font-size:var(--mk-font-size-xs);font-weight:var(--mk-font-weight-semibold);letter-spacing:var(--mk-letter-spacing-wide);text-transform:uppercase;color:var(--mk-text-subtle)}.mk-calendar__weekday abbr{text-decoration:none;cursor:default}.mk-calendar__cell{padding:1px;text-align:center}.mk-calendar__day{display:inline-flex;align-items:center;justify-content:center;position:relative;width:var(--_cell-size);height:var(--_cell-size);font-family:inherit;font-size:var(--mk-font-size-sm);color:var(--mk-text);background:transparent;border:var(--mk-border-width) solid transparent;border-radius:var(--mk-radius-md);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-calendar__day:hover:not(.mk-calendar__day--disabled){background-color:var(--mk-hover-overlay)}.mk-calendar__day:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(var(--mk-focus-ring-offset) * -1)}.mk-calendar__day--outside{color:var(--mk-text-
|
|
612
|
+
], ngImport: i0, template: "<div class=\"mk-calendar__header\">\n <button\n type=\"button\"\n class=\"mk-calendar__nav\"\n [attr.aria-label]=\"i18n.previousMonth\"\n (click)=\"prevMonth()\"\n >\n <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" aria-hidden=\"true\">\n <path\n d=\"M15 5l-7 7 7 7\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n\n <span class=\"mk-calendar__label\" [id]=\"labelId\" aria-live=\"polite\">{{\n monthLabel()\n }}</span>\n\n <button\n type=\"button\"\n class=\"mk-calendar__nav\"\n [attr.aria-label]=\"i18n.nextMonth\"\n (click)=\"nextMonth()\"\n >\n <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" aria-hidden=\"true\">\n <path\n d=\"M9 5l7 7-7 7\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n</div>\n\n<table\n class=\"mk-calendar__grid\"\n role=\"grid\"\n [attr.aria-labelledby]=\"labelId\"\n (keydown)=\"onGridKeydown($event)\"\n>\n <thead>\n <tr>\n @for (wd of weekdays(); track $index) {\n <th class=\"mk-calendar__weekday\" scope=\"col\">\n <abbr [title]=\"wd.full\">{{ wd.short }}</abbr>\n </th>\n }\n </tr>\n </thead>\n <tbody (mouseleave)=\"clearHover()\">\n @for (week of weeks(); track $index) {\n <tr>\n @for (day of week; track day.getTime()) {\n <td\n class=\"mk-calendar__cell\"\n role=\"gridcell\"\n [attr.aria-selected]=\"isAriaSelected(day) || null\"\n >\n <button\n type=\"button\"\n class=\"mk-calendar__day\"\n [class.mk-calendar__day--outside]=\"isOutside(day)\"\n [class.mk-calendar__day--today]=\"isToday(day)\"\n [class.mk-calendar__day--selected]=\"isSelected(day)\"\n [class.mk-calendar__day--range-start]=\"isRangeStart(day)\"\n [class.mk-calendar__day--range-end]=\"isRangeEnd(day)\"\n [class.mk-calendar__day--in-range]=\"isInRange(day)\"\n [class.mk-calendar__day--disabled]=\"isDisabled(day)\"\n [attr.tabindex]=\"isFocused(day) ? 0 : -1\"\n [attr.aria-label]=\"dayLabel(day)\"\n [attr.aria-current]=\"isToday(day) ? 'date' : null\"\n [attr.aria-disabled]=\"isDisabled(day) || null\"\n (click)=\"select(day)\"\n (mouseenter)=\"onHover(day)\"\n >\n <span class=\"mk-calendar__day-num\">{{ day.getDate() }}</span>\n </button>\n </td>\n }\n </tr>\n }\n </tbody>\n</table>\n", styles: ["@charset \"UTF-8\";:host{--_cell-size: 2.5rem;display:inline-block;width:fit-content;max-width:100%;padding:var(--mk-space-4);font-family:var(--mk-font-sans);color:var(--mk-text);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-lg);box-shadow:var(--mk-shadow-xs)}:host(.mk-calendar--full){display:block;width:100%;min-width:min-content}:host(.mk-calendar--full) .mk-calendar__grid{width:100%}:host(.mk-calendar--full) .mk-calendar__weekday{width:auto;min-width:var(--_cell-size)}:host(.mk-calendar--full) .mk-calendar__day{width:100%;min-width:var(--_cell-size)}:host(.mk-calendar--sm){--_cell-size: 2.1rem;padding:var(--mk-space-3);font-size:var(--mk-font-size-sm)}:host(.mk-calendar--lg){--_cell-size: 2.9rem;font-size:var(--mk-font-size-lg)}.mk-calendar__header{display:flex;align-items:center;gap:var(--mk-space-1);margin-bottom:var(--mk-space-2)}.mk-calendar__label{flex:1 1 auto;text-align:center;font-weight:var(--mk-font-weight-semibold);font-size:var(--mk-font-size-md);white-space:nowrap}.mk-calendar__nav{display:inline-flex;align-items:center;justify-content:center;width:var(--mk-control-height-sm);height:var(--mk-control-height-sm);flex:none;color:var(--mk-text-muted);background:transparent;border:var(--mk-border-width) solid transparent;border-radius:var(--mk-radius-md);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-calendar__nav:hover{background-color:var(--mk-hover-overlay);color:var(--mk-text)}.mk-calendar__nav:active{background-color:var(--mk-active-overlay)}.mk-calendar__nav:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-calendar__nav svg{display:block}.mk-calendar__grid{border-collapse:separate;border-spacing:0;table-layout:fixed}.mk-calendar__weekday{width:var(--_cell-size);padding:0 0 var(--mk-space-2);font-size:var(--mk-font-size-xs);font-weight:var(--mk-font-weight-semibold);letter-spacing:var(--mk-letter-spacing-wide);text-transform:uppercase;color:var(--mk-text-subtle)}.mk-calendar__weekday abbr{text-decoration:none;cursor:default}.mk-calendar__cell{padding:1px;text-align:center}.mk-calendar__day{display:inline-flex;align-items:center;justify-content:center;position:relative;width:var(--_cell-size);height:var(--_cell-size);font-family:inherit;font-size:var(--mk-font-size-sm);color:var(--mk-text);background:transparent;border:var(--mk-border-width) solid transparent;border-radius:var(--mk-radius-md);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-calendar__day:hover:not(.mk-calendar__day--disabled){background-color:var(--mk-hover-overlay)}.mk-calendar__day:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(var(--mk-focus-ring-offset) * -1)}.mk-calendar__day--outside{color:var(--mk-text-subtle)}.mk-calendar__day--today:after{content:\"\";position:absolute;left:50%;bottom:4px;width:4px;height:4px;border-radius:var(--mk-radius-circle);background-color:var(--mk-primary);transform:translate(-50%)}.mk-calendar__day--in-range{background-color:var(--mk-primary-subtle);border-radius:0}.mk-calendar__day--selected,.mk-calendar__day--range-start,.mk-calendar__day--range-end{background-color:var(--mk-primary);color:var(--mk-primary-contrast);font-weight:var(--mk-font-weight-semibold)}.mk-calendar__day--selected:hover,.mk-calendar__day--range-start:hover,.mk-calendar__day--range-end:hover{background-color:var(--mk-primary-hover)}.mk-calendar__day--range-start{border-start-end-radius:0;border-end-end-radius:0}.mk-calendar__day--range-end{border-start-start-radius:0;border-end-start-radius:0}.mk-calendar__day--today.mk-calendar__day--selected:after,.mk-calendar__day--today.mk-calendar__day--range-start:after,.mk-calendar__day--today.mk-calendar__day--range-end:after{background-color:var(--mk-primary-contrast)}.mk-calendar__day--disabled{color:var(--mk-text-disabled);cursor:not-allowed;opacity:.6}.mk-calendar__day-num{line-height:1}@media(prefers-reduced-motion:reduce){.mk-calendar__nav,.mk-calendar__day{transition:none}}.mk-calendar--disabled{opacity:.55;pointer-events:none}:host(.mk-calendar--invalid){border-color:var(--mk-danger)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
613
613
|
}
|
|
614
614
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkCalendar, decorators: [{
|
|
615
615
|
type: Component,
|
|
@@ -635,7 +635,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
635
635
|
'[class.mk-calendar--range]': 'rangeMode()',
|
|
636
636
|
'[class.mk-calendar--invalid]': 'isInvalid()',
|
|
637
637
|
'[attr.aria-invalid]': 'isInvalid() || null',
|
|
638
|
-
}, template: "<div class=\"mk-calendar__header\">\n <button\n type=\"button\"\n class=\"mk-calendar__nav\"\n [attr.aria-label]=\"i18n.previousMonth\"\n (click)=\"prevMonth()\"\n >\n <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" aria-hidden=\"true\">\n <path\n d=\"M15 5l-7 7 7 7\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n\n <span class=\"mk-calendar__label\" [id]=\"labelId\" aria-live=\"polite\">{{\n monthLabel()\n }}</span>\n\n <button\n type=\"button\"\n class=\"mk-calendar__nav\"\n [attr.aria-label]=\"i18n.nextMonth\"\n (click)=\"nextMonth()\"\n >\n <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" aria-hidden=\"true\">\n <path\n d=\"M9 5l7 7-7 7\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n</div>\n\n<table\n class=\"mk-calendar__grid\"\n role=\"grid\"\n [attr.aria-labelledby]=\"labelId\"\n (keydown)=\"onGridKeydown($event)\"\n>\n <thead>\n <tr>\n @for (wd of weekdays(); track $index) {\n <th class=\"mk-calendar__weekday\" scope=\"col\">\n <abbr [title]=\"wd.full\">{{ wd.short }}</abbr>\n </th>\n }\n </tr>\n </thead>\n <tbody (mouseleave)=\"clearHover()\">\n @for (week of weeks(); track $index) {\n <tr>\n @for (day of week; track day.getTime()) {\n <td\n class=\"mk-calendar__cell\"\n role=\"gridcell\"\n [attr.aria-selected]=\"isAriaSelected(day) || null\"\n >\n <button\n type=\"button\"\n class=\"mk-calendar__day\"\n [class.mk-calendar__day--outside]=\"isOutside(day)\"\n [class.mk-calendar__day--today]=\"isToday(day)\"\n [class.mk-calendar__day--selected]=\"isSelected(day)\"\n [class.mk-calendar__day--range-start]=\"isRangeStart(day)\"\n [class.mk-calendar__day--range-end]=\"isRangeEnd(day)\"\n [class.mk-calendar__day--in-range]=\"isInRange(day)\"\n [class.mk-calendar__day--disabled]=\"isDisabled(day)\"\n [attr.tabindex]=\"isFocused(day) ? 0 : -1\"\n [attr.aria-label]=\"dayLabel(day)\"\n [attr.aria-current]=\"isToday(day) ? 'date' : null\"\n [attr.aria-disabled]=\"isDisabled(day) || null\"\n (click)=\"select(day)\"\n (mouseenter)=\"onHover(day)\"\n >\n <span class=\"mk-calendar__day-num\">{{ day.getDate() }}</span>\n </button>\n </td>\n }\n </tr>\n }\n </tbody>\n</table>\n", styles: ["@charset \"UTF-8\";:host{--_cell-size: 2.5rem;display:inline-block;width:fit-content;max-width:100%;padding:var(--mk-space-4);font-family:var(--mk-font-sans);color:var(--mk-text);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-lg);box-shadow:var(--mk-shadow-xs)}:host(.mk-calendar--full){display:block;width:100%;min-width:min-content}:host(.mk-calendar--full) .mk-calendar__grid{width:100%}:host(.mk-calendar--full) .mk-calendar__weekday{width:auto;min-width:var(--_cell-size)}:host(.mk-calendar--full) .mk-calendar__day{width:100%;min-width:var(--_cell-size)}:host(.mk-calendar--sm){--_cell-size: 2.1rem;padding:var(--mk-space-3);font-size:var(--mk-font-size-sm)}:host(.mk-calendar--lg){--_cell-size: 2.9rem;font-size:var(--mk-font-size-lg)}.mk-calendar__header{display:flex;align-items:center;gap:var(--mk-space-1);margin-bottom:var(--mk-space-2)}.mk-calendar__label{flex:1 1 auto;text-align:center;font-weight:var(--mk-font-weight-semibold);font-size:var(--mk-font-size-md);white-space:nowrap}.mk-calendar__nav{display:inline-flex;align-items:center;justify-content:center;width:var(--mk-control-height-sm);height:var(--mk-control-height-sm);flex:none;color:var(--mk-text-muted);background:transparent;border:var(--mk-border-width) solid transparent;border-radius:var(--mk-radius-md);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-calendar__nav:hover{background-color:var(--mk-hover-overlay);color:var(--mk-text)}.mk-calendar__nav:active{background-color:var(--mk-active-overlay)}.mk-calendar__nav:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-calendar__nav svg{display:block}.mk-calendar__grid{border-collapse:separate;border-spacing:0;table-layout:fixed}.mk-calendar__weekday{width:var(--_cell-size);padding:0 0 var(--mk-space-2);font-size:var(--mk-font-size-xs);font-weight:var(--mk-font-weight-semibold);letter-spacing:var(--mk-letter-spacing-wide);text-transform:uppercase;color:var(--mk-text-subtle)}.mk-calendar__weekday abbr{text-decoration:none;cursor:default}.mk-calendar__cell{padding:1px;text-align:center}.mk-calendar__day{display:inline-flex;align-items:center;justify-content:center;position:relative;width:var(--_cell-size);height:var(--_cell-size);font-family:inherit;font-size:var(--mk-font-size-sm);color:var(--mk-text);background:transparent;border:var(--mk-border-width) solid transparent;border-radius:var(--mk-radius-md);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-calendar__day:hover:not(.mk-calendar__day--disabled){background-color:var(--mk-hover-overlay)}.mk-calendar__day:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(var(--mk-focus-ring-offset) * -1)}.mk-calendar__day--outside{color:var(--mk-text-
|
|
638
|
+
}, template: "<div class=\"mk-calendar__header\">\n <button\n type=\"button\"\n class=\"mk-calendar__nav\"\n [attr.aria-label]=\"i18n.previousMonth\"\n (click)=\"prevMonth()\"\n >\n <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" aria-hidden=\"true\">\n <path\n d=\"M15 5l-7 7 7 7\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n\n <span class=\"mk-calendar__label\" [id]=\"labelId\" aria-live=\"polite\">{{\n monthLabel()\n }}</span>\n\n <button\n type=\"button\"\n class=\"mk-calendar__nav\"\n [attr.aria-label]=\"i18n.nextMonth\"\n (click)=\"nextMonth()\"\n >\n <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" aria-hidden=\"true\">\n <path\n d=\"M9 5l7 7-7 7\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n</div>\n\n<table\n class=\"mk-calendar__grid\"\n role=\"grid\"\n [attr.aria-labelledby]=\"labelId\"\n (keydown)=\"onGridKeydown($event)\"\n>\n <thead>\n <tr>\n @for (wd of weekdays(); track $index) {\n <th class=\"mk-calendar__weekday\" scope=\"col\">\n <abbr [title]=\"wd.full\">{{ wd.short }}</abbr>\n </th>\n }\n </tr>\n </thead>\n <tbody (mouseleave)=\"clearHover()\">\n @for (week of weeks(); track $index) {\n <tr>\n @for (day of week; track day.getTime()) {\n <td\n class=\"mk-calendar__cell\"\n role=\"gridcell\"\n [attr.aria-selected]=\"isAriaSelected(day) || null\"\n >\n <button\n type=\"button\"\n class=\"mk-calendar__day\"\n [class.mk-calendar__day--outside]=\"isOutside(day)\"\n [class.mk-calendar__day--today]=\"isToday(day)\"\n [class.mk-calendar__day--selected]=\"isSelected(day)\"\n [class.mk-calendar__day--range-start]=\"isRangeStart(day)\"\n [class.mk-calendar__day--range-end]=\"isRangeEnd(day)\"\n [class.mk-calendar__day--in-range]=\"isInRange(day)\"\n [class.mk-calendar__day--disabled]=\"isDisabled(day)\"\n [attr.tabindex]=\"isFocused(day) ? 0 : -1\"\n [attr.aria-label]=\"dayLabel(day)\"\n [attr.aria-current]=\"isToday(day) ? 'date' : null\"\n [attr.aria-disabled]=\"isDisabled(day) || null\"\n (click)=\"select(day)\"\n (mouseenter)=\"onHover(day)\"\n >\n <span class=\"mk-calendar__day-num\">{{ day.getDate() }}</span>\n </button>\n </td>\n }\n </tr>\n }\n </tbody>\n</table>\n", styles: ["@charset \"UTF-8\";:host{--_cell-size: 2.5rem;display:inline-block;width:fit-content;max-width:100%;padding:var(--mk-space-4);font-family:var(--mk-font-sans);color:var(--mk-text);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-lg);box-shadow:var(--mk-shadow-xs)}:host(.mk-calendar--full){display:block;width:100%;min-width:min-content}:host(.mk-calendar--full) .mk-calendar__grid{width:100%}:host(.mk-calendar--full) .mk-calendar__weekday{width:auto;min-width:var(--_cell-size)}:host(.mk-calendar--full) .mk-calendar__day{width:100%;min-width:var(--_cell-size)}:host(.mk-calendar--sm){--_cell-size: 2.1rem;padding:var(--mk-space-3);font-size:var(--mk-font-size-sm)}:host(.mk-calendar--lg){--_cell-size: 2.9rem;font-size:var(--mk-font-size-lg)}.mk-calendar__header{display:flex;align-items:center;gap:var(--mk-space-1);margin-bottom:var(--mk-space-2)}.mk-calendar__label{flex:1 1 auto;text-align:center;font-weight:var(--mk-font-weight-semibold);font-size:var(--mk-font-size-md);white-space:nowrap}.mk-calendar__nav{display:inline-flex;align-items:center;justify-content:center;width:var(--mk-control-height-sm);height:var(--mk-control-height-sm);flex:none;color:var(--mk-text-muted);background:transparent;border:var(--mk-border-width) solid transparent;border-radius:var(--mk-radius-md);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-calendar__nav:hover{background-color:var(--mk-hover-overlay);color:var(--mk-text)}.mk-calendar__nav:active{background-color:var(--mk-active-overlay)}.mk-calendar__nav:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-calendar__nav svg{display:block}.mk-calendar__grid{border-collapse:separate;border-spacing:0;table-layout:fixed}.mk-calendar__weekday{width:var(--_cell-size);padding:0 0 var(--mk-space-2);font-size:var(--mk-font-size-xs);font-weight:var(--mk-font-weight-semibold);letter-spacing:var(--mk-letter-spacing-wide);text-transform:uppercase;color:var(--mk-text-subtle)}.mk-calendar__weekday abbr{text-decoration:none;cursor:default}.mk-calendar__cell{padding:1px;text-align:center}.mk-calendar__day{display:inline-flex;align-items:center;justify-content:center;position:relative;width:var(--_cell-size);height:var(--_cell-size);font-family:inherit;font-size:var(--mk-font-size-sm);color:var(--mk-text);background:transparent;border:var(--mk-border-width) solid transparent;border-radius:var(--mk-radius-md);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-calendar__day:hover:not(.mk-calendar__day--disabled){background-color:var(--mk-hover-overlay)}.mk-calendar__day:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(var(--mk-focus-ring-offset) * -1)}.mk-calendar__day--outside{color:var(--mk-text-subtle)}.mk-calendar__day--today:after{content:\"\";position:absolute;left:50%;bottom:4px;width:4px;height:4px;border-radius:var(--mk-radius-circle);background-color:var(--mk-primary);transform:translate(-50%)}.mk-calendar__day--in-range{background-color:var(--mk-primary-subtle);border-radius:0}.mk-calendar__day--selected,.mk-calendar__day--range-start,.mk-calendar__day--range-end{background-color:var(--mk-primary);color:var(--mk-primary-contrast);font-weight:var(--mk-font-weight-semibold)}.mk-calendar__day--selected:hover,.mk-calendar__day--range-start:hover,.mk-calendar__day--range-end:hover{background-color:var(--mk-primary-hover)}.mk-calendar__day--range-start{border-start-end-radius:0;border-end-end-radius:0}.mk-calendar__day--range-end{border-start-start-radius:0;border-end-start-radius:0}.mk-calendar__day--today.mk-calendar__day--selected:after,.mk-calendar__day--today.mk-calendar__day--range-start:after,.mk-calendar__day--today.mk-calendar__day--range-end:after{background-color:var(--mk-primary-contrast)}.mk-calendar__day--disabled{color:var(--mk-text-disabled);cursor:not-allowed;opacity:.6}.mk-calendar__day-num{line-height:1}@media(prefers-reduced-motion:reduce){.mk-calendar__nav,.mk-calendar__day{transition:none}}.mk-calendar--disabled{opacity:.55;pointer-events:none}:host(.mk-calendar--invalid){border-color:var(--mk-danger)}\n"] }]
|
|
639
639
|
}], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], disabledDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDate", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], rangeMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeMode", required: false }] }], rangeStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeStart", required: false }] }], rangeEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeEnd", required: false }] }], dateSelected: [{ type: i0.Output, args: ["dateSelected"] }], dateHovered: [{ type: i0.Output, args: ["dateHovered"] }] } });
|
|
640
640
|
|
|
641
641
|
/**
|