@stemy/ngx-utils 19.9.42 → 19.9.43
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.
|
@@ -7859,6 +7859,7 @@ class DropdownContentDirective {
|
|
|
7859
7859
|
arrow.classList.add(`dropdown-content-arrow`);
|
|
7860
7860
|
arrow.style.position = `absolute`;
|
|
7861
7861
|
wrapper.appendChild(arrow);
|
|
7862
|
+
wrapper.popover = "manual";
|
|
7862
7863
|
const ref = this.vcr.createEmbeddedView(this.templateRef);
|
|
7863
7864
|
ref.rootNodes.forEach(node => wrapper.appendChild(node));
|
|
7864
7865
|
ref.detectChanges();
|
|
@@ -7890,6 +7891,10 @@ class DropdownContentDirective {
|
|
|
7890
7891
|
}
|
|
7891
7892
|
}
|
|
7892
7893
|
wrapper.classList.add("dropdown-content-wrap");
|
|
7894
|
+
wrapper.style.margin = "0";
|
|
7895
|
+
wrapper.style.padding = "0";
|
|
7896
|
+
wrapper.style.border = "none";
|
|
7897
|
+
wrapper.showPopover();
|
|
7893
7898
|
return [wrapper, arrow];
|
|
7894
7899
|
}
|
|
7895
7900
|
initialize() {
|
|
@@ -8608,11 +8613,11 @@ class CalendarComponent extends CalendarInputs {
|
|
|
8608
8613
|
this.initialSelectedStateBeforeDrag.set(new Map());
|
|
8609
8614
|
}
|
|
8610
8615
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8611
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.22", type: CalendarComponent, isStandalone: false, selector: "calendar", host: { listeners: { "window:mouseup": "onMouseUpGlobal($event)" } }, usesInheritance: true, ngImport: i0, template: "@let id = testId();\r\n<div class=\"calendar-container\">\r\n <div class=\"calendar-header\">\r\n <div class=\"prev\">\r\n @if (canGoPrev()) {\r\n <btn icon=\"chevron-left\"\r\n [attr.data-testid]=\"id + '-prev-month'\"\r\n (click)=\"prevMonth()\"></btn>\r\n }\r\n </div>\r\n <div class=\"header-label\">\r\n @let month = currentMonth();\r\n <span [attr.data-testid]=\"id + '-month'\"\r\n [attr.data-value]=\"month\">\r\n {{ \"month.\" + months[month] | translate }}\r\n </span>\r\n @let year = currentYear();\r\n <span [attr.data-testid]=\"id + '-year'\"\r\n [attr.data-value]=\"year\">\r\n {{ year }}\r\n </span>\r\n </div>\r\n <div class=\"next\">\r\n @if (canGoNext()) {\r\n <btn icon=\"chevron-right\"\r\n [attr.data-testid]=\"id + '-next-month'\"\r\n (click)=\"nextMonth()\"></btn>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div class=\"calendar-grid days-header\">\r\n <div class=\"day-label\"></div>\r\n @for (day of daysOfWeek; track day) {\r\n <div class=\"day-label\">{{ \"day.\" + day | translate }}</div>\r\n }\r\n </div>\r\n\r\n <div class=\"calendar-grid days-grid\" (mouseleave)=\"onGridMouseLeave()\">\r\n @for (cell of calendarCells(); track cell.id) {\r\n @if (cell.isWeekNum) {\r\n <div class=\"calendar-cell week-number-cell\"\r\n [attr.data-testid]=\"cell.id\">\r\n {{ cell.numValue }}\r\n </div>\r\n }\r\n @else {\r\n <div\r\n class=\"calendar-cell\"\r\n [class.filler]=\"!cell.isCurrentMonth\"\r\n [class.filler-start]=\"cell.isFillerStart\"\r\n [class.filler-end]=\"cell.isFillerEnd\"\r\n [class.disabled]=\"cell.isDisabled\"\r\n [class.in-range]=\"cell.isInDragRange\"\r\n [class.range-start]=\"cell.isRangeStart\"\r\n [class.range-end]=\"cell.isRangeEnd\"\r\n [class.active]=\"cell.isSelected\"\r\n [attr.data-testid]=\"cell.id\"\r\n (mousedown)=\"onMouseDown(cell, $event)\"\r\n (mouseenter)=\"onMouseEnter(cell)\"\r\n >\r\n <span class=\"cell-number\">{{ cell.numValue }}</span>\r\n </div>\r\n }\r\n }\r\n </div>\r\n</div>\r\n", styles: [".calendar-container{--calendar-color: var(--primary-color, var(--bs-primary, var(--mat-sys-primary, #666666)));--calendar-secondary-color: #686868;--calendar-padding: 4px;--calendar-cell-padding: 3px;--calendar-num-size: 30px;--calendar-num-radius: calc(var(--calendar-num-size) / 2 + var(--calendar-cell-padding));min-width:300px;
|
|
8616
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.22", type: CalendarComponent, isStandalone: false, selector: "calendar", host: { listeners: { "window:mouseup": "onMouseUpGlobal($event)" } }, usesInheritance: true, ngImport: i0, template: "@let id = testId();\r\n<div class=\"calendar-container\">\r\n <div class=\"calendar-header\">\r\n <div class=\"prev\">\r\n @if (canGoPrev()) {\r\n <btn icon=\"chevron-left\"\r\n [attr.data-testid]=\"id + '-prev-month'\"\r\n (click)=\"prevMonth()\"></btn>\r\n }\r\n </div>\r\n <div class=\"header-label\">\r\n @let month = currentMonth();\r\n <span [attr.data-testid]=\"id + '-month'\"\r\n [attr.data-value]=\"month\">\r\n {{ \"month.\" + months[month] | translate }}\r\n </span>\r\n @let year = currentYear();\r\n <span [attr.data-testid]=\"id + '-year'\"\r\n [attr.data-value]=\"year\">\r\n {{ year }}\r\n </span>\r\n </div>\r\n <div class=\"next\">\r\n @if (canGoNext()) {\r\n <btn icon=\"chevron-right\"\r\n [attr.data-testid]=\"id + '-next-month'\"\r\n (click)=\"nextMonth()\"></btn>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div class=\"calendar-grid days-header\">\r\n <div class=\"day-label\"></div>\r\n @for (day of daysOfWeek; track day) {\r\n <div class=\"day-label\">{{ \"day.\" + day | translate }}</div>\r\n }\r\n </div>\r\n\r\n <div class=\"calendar-grid days-grid\" (mouseleave)=\"onGridMouseLeave()\">\r\n @for (cell of calendarCells(); track cell.id) {\r\n @if (cell.isWeekNum) {\r\n <div class=\"calendar-cell week-number-cell\"\r\n [attr.data-testid]=\"cell.id\">\r\n {{ cell.numValue }}\r\n </div>\r\n }\r\n @else {\r\n <div\r\n class=\"calendar-cell\"\r\n [class.filler]=\"!cell.isCurrentMonth\"\r\n [class.filler-start]=\"cell.isFillerStart\"\r\n [class.filler-end]=\"cell.isFillerEnd\"\r\n [class.disabled]=\"cell.isDisabled\"\r\n [class.in-range]=\"cell.isInDragRange\"\r\n [class.range-start]=\"cell.isRangeStart\"\r\n [class.range-end]=\"cell.isRangeEnd\"\r\n [class.active]=\"cell.isSelected\"\r\n [attr.data-testid]=\"cell.id\"\r\n (mousedown)=\"onMouseDown(cell, $event)\"\r\n (mouseenter)=\"onMouseEnter(cell)\"\r\n >\r\n <span class=\"cell-number\">{{ cell.numValue }}</span>\r\n </div>\r\n }\r\n }\r\n </div>\r\n</div>\r\n", styles: [".calendar-container{--calendar-color: var(--primary-color, var(--bs-primary, var(--mat-sys-primary, #666666)));--calendar-secondary-color: #686868;--calendar-padding: 4px;--calendar-cell-padding: 3px;--calendar-num-size: 30px;--calendar-num-radius: calc(var(--calendar-num-size) / 2 + var(--calendar-cell-padding));min-width:300px;border:1px solid #e0e0e0;padding:var(--calendar-padding);-webkit-user-select:none;user-select:none;background:#fff}.calendar-container *{box-sizing:border-box}.calendar-container .calendar-header{display:grid;grid-template-columns:50px 1fr 50px;justify-content:space-between;align-items:center;background-color:var(--calendar-color);color:#fff;padding:var(--calendar-padding);border-radius:3px;font-weight:700}.calendar-container .calendar-header .header-label{text-align:center}.calendar-container .calendar-header .prev{display:flex;justify-content:flex-start}.calendar-container .calendar-header .next{display:flex;justify-content:flex-end}.calendar-container .calendar-grid{display:grid;gap:5px 0;grid-template-columns:repeat(8,1fr);text-align:center}.calendar-container .days-header{margin-top:12px;font-weight:500;color:#757575;font-size:14px}.calendar-container .day-label{padding:8px 0}.calendar-container .days-grid{margin-top:8px}.calendar-container .calendar-cell{position:relative;padding:var(--calendar-cell-padding);font-size:14px;color:#333;cursor:pointer;display:flex;align-items:center;justify-content:center}.calendar-container .calendar-cell.week-number-cell{color:var(--calendar-color);font-weight:700;cursor:default;pointer-events:none}.calendar-container .calendar-cell.filler{color:#666;background-color:#f6f6f6}.calendar-container .calendar-cell.filler.filler-start{border-top-left-radius:var(--calendar-num-radius);border-bottom-left-radius:var(--calendar-num-radius)}.calendar-container .calendar-cell.filler.filler-end{border-top-right-radius:var(--calendar-num-radius);border-bottom-right-radius:var(--calendar-num-radius)}.calendar-container .calendar-cell.in-range:before{opacity:.5;inset:0;content:\" \";position:absolute;background:var(--calendar-color)}.calendar-container .calendar-cell.in-range.range-start:before{border-top-left-radius:var(--calendar-num-radius);border-bottom-left-radius:var(--calendar-num-radius)}.calendar-container .calendar-cell.in-range.range-end:before{border-top-right-radius:var(--calendar-num-radius);border-bottom-right-radius:var(--calendar-num-radius)}.calendar-container .calendar-cell.disabled{color:#7e7e7e;opacity:.75;cursor:default}.calendar-container .cell-number{position:relative;border-radius:50%;width:var(--calendar-num-size);height:var(--calendar-num-size);display:flex;align-items:center;justify-content:center}.calendar-container .calendar-cell.active .cell-number{background-color:var(--calendar-color);color:#fff}\n"], dependencies: [{ kind: "component", type: BtnComponent, selector: "btn", inputs: ["label", "tooltip", "icon", "disabled", "path", "type", "size"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
8612
8617
|
}
|
|
8613
8618
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: CalendarComponent, decorators: [{
|
|
8614
8619
|
type: Component,
|
|
8615
|
-
args: [{ standalone: false, encapsulation: ViewEncapsulation.None, selector: "calendar", template: "@let id = testId();\r\n<div class=\"calendar-container\">\r\n <div class=\"calendar-header\">\r\n <div class=\"prev\">\r\n @if (canGoPrev()) {\r\n <btn icon=\"chevron-left\"\r\n [attr.data-testid]=\"id + '-prev-month'\"\r\n (click)=\"prevMonth()\"></btn>\r\n }\r\n </div>\r\n <div class=\"header-label\">\r\n @let month = currentMonth();\r\n <span [attr.data-testid]=\"id + '-month'\"\r\n [attr.data-value]=\"month\">\r\n {{ \"month.\" + months[month] | translate }}\r\n </span>\r\n @let year = currentYear();\r\n <span [attr.data-testid]=\"id + '-year'\"\r\n [attr.data-value]=\"year\">\r\n {{ year }}\r\n </span>\r\n </div>\r\n <div class=\"next\">\r\n @if (canGoNext()) {\r\n <btn icon=\"chevron-right\"\r\n [attr.data-testid]=\"id + '-next-month'\"\r\n (click)=\"nextMonth()\"></btn>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div class=\"calendar-grid days-header\">\r\n <div class=\"day-label\"></div>\r\n @for (day of daysOfWeek; track day) {\r\n <div class=\"day-label\">{{ \"day.\" + day | translate }}</div>\r\n }\r\n </div>\r\n\r\n <div class=\"calendar-grid days-grid\" (mouseleave)=\"onGridMouseLeave()\">\r\n @for (cell of calendarCells(); track cell.id) {\r\n @if (cell.isWeekNum) {\r\n <div class=\"calendar-cell week-number-cell\"\r\n [attr.data-testid]=\"cell.id\">\r\n {{ cell.numValue }}\r\n </div>\r\n }\r\n @else {\r\n <div\r\n class=\"calendar-cell\"\r\n [class.filler]=\"!cell.isCurrentMonth\"\r\n [class.filler-start]=\"cell.isFillerStart\"\r\n [class.filler-end]=\"cell.isFillerEnd\"\r\n [class.disabled]=\"cell.isDisabled\"\r\n [class.in-range]=\"cell.isInDragRange\"\r\n [class.range-start]=\"cell.isRangeStart\"\r\n [class.range-end]=\"cell.isRangeEnd\"\r\n [class.active]=\"cell.isSelected\"\r\n [attr.data-testid]=\"cell.id\"\r\n (mousedown)=\"onMouseDown(cell, $event)\"\r\n (mouseenter)=\"onMouseEnter(cell)\"\r\n >\r\n <span class=\"cell-number\">{{ cell.numValue }}</span>\r\n </div>\r\n }\r\n }\r\n </div>\r\n</div>\r\n", styles: [".calendar-container{--calendar-color: var(--primary-color, var(--bs-primary, var(--mat-sys-primary, #666666)));--calendar-secondary-color: #686868;--calendar-padding: 4px;--calendar-cell-padding: 3px;--calendar-num-size: 30px;--calendar-num-radius: calc(var(--calendar-num-size) / 2 + var(--calendar-cell-padding));min-width:300px;
|
|
8620
|
+
args: [{ standalone: false, encapsulation: ViewEncapsulation.None, selector: "calendar", template: "@let id = testId();\r\n<div class=\"calendar-container\">\r\n <div class=\"calendar-header\">\r\n <div class=\"prev\">\r\n @if (canGoPrev()) {\r\n <btn icon=\"chevron-left\"\r\n [attr.data-testid]=\"id + '-prev-month'\"\r\n (click)=\"prevMonth()\"></btn>\r\n }\r\n </div>\r\n <div class=\"header-label\">\r\n @let month = currentMonth();\r\n <span [attr.data-testid]=\"id + '-month'\"\r\n [attr.data-value]=\"month\">\r\n {{ \"month.\" + months[month] | translate }}\r\n </span>\r\n @let year = currentYear();\r\n <span [attr.data-testid]=\"id + '-year'\"\r\n [attr.data-value]=\"year\">\r\n {{ year }}\r\n </span>\r\n </div>\r\n <div class=\"next\">\r\n @if (canGoNext()) {\r\n <btn icon=\"chevron-right\"\r\n [attr.data-testid]=\"id + '-next-month'\"\r\n (click)=\"nextMonth()\"></btn>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div class=\"calendar-grid days-header\">\r\n <div class=\"day-label\"></div>\r\n @for (day of daysOfWeek; track day) {\r\n <div class=\"day-label\">{{ \"day.\" + day | translate }}</div>\r\n }\r\n </div>\r\n\r\n <div class=\"calendar-grid days-grid\" (mouseleave)=\"onGridMouseLeave()\">\r\n @for (cell of calendarCells(); track cell.id) {\r\n @if (cell.isWeekNum) {\r\n <div class=\"calendar-cell week-number-cell\"\r\n [attr.data-testid]=\"cell.id\">\r\n {{ cell.numValue }}\r\n </div>\r\n }\r\n @else {\r\n <div\r\n class=\"calendar-cell\"\r\n [class.filler]=\"!cell.isCurrentMonth\"\r\n [class.filler-start]=\"cell.isFillerStart\"\r\n [class.filler-end]=\"cell.isFillerEnd\"\r\n [class.disabled]=\"cell.isDisabled\"\r\n [class.in-range]=\"cell.isInDragRange\"\r\n [class.range-start]=\"cell.isRangeStart\"\r\n [class.range-end]=\"cell.isRangeEnd\"\r\n [class.active]=\"cell.isSelected\"\r\n [attr.data-testid]=\"cell.id\"\r\n (mousedown)=\"onMouseDown(cell, $event)\"\r\n (mouseenter)=\"onMouseEnter(cell)\"\r\n >\r\n <span class=\"cell-number\">{{ cell.numValue }}</span>\r\n </div>\r\n }\r\n }\r\n </div>\r\n</div>\r\n", styles: [".calendar-container{--calendar-color: var(--primary-color, var(--bs-primary, var(--mat-sys-primary, #666666)));--calendar-secondary-color: #686868;--calendar-padding: 4px;--calendar-cell-padding: 3px;--calendar-num-size: 30px;--calendar-num-radius: calc(var(--calendar-num-size) / 2 + var(--calendar-cell-padding));min-width:300px;border:1px solid #e0e0e0;padding:var(--calendar-padding);-webkit-user-select:none;user-select:none;background:#fff}.calendar-container *{box-sizing:border-box}.calendar-container .calendar-header{display:grid;grid-template-columns:50px 1fr 50px;justify-content:space-between;align-items:center;background-color:var(--calendar-color);color:#fff;padding:var(--calendar-padding);border-radius:3px;font-weight:700}.calendar-container .calendar-header .header-label{text-align:center}.calendar-container .calendar-header .prev{display:flex;justify-content:flex-start}.calendar-container .calendar-header .next{display:flex;justify-content:flex-end}.calendar-container .calendar-grid{display:grid;gap:5px 0;grid-template-columns:repeat(8,1fr);text-align:center}.calendar-container .days-header{margin-top:12px;font-weight:500;color:#757575;font-size:14px}.calendar-container .day-label{padding:8px 0}.calendar-container .days-grid{margin-top:8px}.calendar-container .calendar-cell{position:relative;padding:var(--calendar-cell-padding);font-size:14px;color:#333;cursor:pointer;display:flex;align-items:center;justify-content:center}.calendar-container .calendar-cell.week-number-cell{color:var(--calendar-color);font-weight:700;cursor:default;pointer-events:none}.calendar-container .calendar-cell.filler{color:#666;background-color:#f6f6f6}.calendar-container .calendar-cell.filler.filler-start{border-top-left-radius:var(--calendar-num-radius);border-bottom-left-radius:var(--calendar-num-radius)}.calendar-container .calendar-cell.filler.filler-end{border-top-right-radius:var(--calendar-num-radius);border-bottom-right-radius:var(--calendar-num-radius)}.calendar-container .calendar-cell.in-range:before{opacity:.5;inset:0;content:\" \";position:absolute;background:var(--calendar-color)}.calendar-container .calendar-cell.in-range.range-start:before{border-top-left-radius:var(--calendar-num-radius);border-bottom-left-radius:var(--calendar-num-radius)}.calendar-container .calendar-cell.in-range.range-end:before{border-top-right-radius:var(--calendar-num-radius);border-bottom-right-radius:var(--calendar-num-radius)}.calendar-container .calendar-cell.disabled{color:#7e7e7e;opacity:.75;cursor:default}.calendar-container .cell-number{position:relative;border-radius:50%;width:var(--calendar-num-size);height:var(--calendar-num-size);display:flex;align-items:center;justify-content:center}.calendar-container .calendar-cell.active .cell-number{background-color:var(--calendar-color);color:#fff}\n"] }]
|
|
8616
8621
|
}], ctorParameters: () => [], propDecorators: { onMouseUpGlobal: [{
|
|
8617
8622
|
type: HostListener,
|
|
8618
8623
|
args: ["window:mouseup", ["$event"]]
|