otimus-library 0.3.59 → 0.3.61
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/otimus-library.mjs +38 -11
- package/fesm2022/otimus-library.mjs.map +1 -1
- package/index.d.ts +6 -1
- package/package.json +1 -1
|
@@ -809,6 +809,7 @@ class OcChipComponent {
|
|
|
809
809
|
this.ocFontSize = '16px';
|
|
810
810
|
this.ocClick = new EventEmitter();
|
|
811
811
|
this.ocRemove = new EventEmitter();
|
|
812
|
+
this.ocStyleTheme = 'otimus';
|
|
812
813
|
}
|
|
813
814
|
ocEvent(event) {
|
|
814
815
|
event.stopPropagation();
|
|
@@ -823,11 +824,11 @@ class OcChipComponent {
|
|
|
823
824
|
this.ocRemove.emit();
|
|
824
825
|
}
|
|
825
826
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
826
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: OcChipComponent, isStandalone: true, selector: "oc-chip", inputs: { ocSelected: "ocSelected", ocType: "ocType", ocBg: "ocBg", ocBgHexColor: "ocBgHexColor", ocText: "ocText", ocFontSize: "ocFontSize" }, outputs: { ocClick: "ocClick", ocRemove: "ocRemove" }, ngImport: i0, template: "<button
|
|
827
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: OcChipComponent, isStandalone: true, selector: "oc-chip", inputs: { ocSelected: "ocSelected", ocType: "ocType", ocBg: "ocBg", ocBgHexColor: "ocBgHexColor", ocText: "ocText", ocFontSize: "ocFontSize" }, outputs: { ocClick: "ocClick", ocRemove: "ocRemove" }, ngImport: i0, template: "<button [ngClass]=\"{\n 'oc-chip': true,\n selected: ocSelected,\n 'not-selectable': ocType !== 'select' && ocType !== 'select_remove',\n tag: ocType === 'tag',\n remove: ocType === 'remove' || ocType === 'select_remove',\n 'green-bg': ocBg === 'green' && !ocBgHexColor,\n 'red-bg': ocBg === 'red' && !ocBgHexColor,\n 'yellow-bg': ocBg === 'yellow' && !ocBgHexColor,\n 'custom-hex-color': !!ocBgHexColor,\n 'shui': ocStyleTheme === 'shui'\n}\" type=\"button\" [ngStyle]=\"{\n 'font-size': ocFontSize,\n 'background-color': ocBgHexColor || null,\n }\" [title]=\"ocText\" (click)=\"ocType.includes('select') ? ocEvent($event) : null\">\n <div class=\"content\">\n <ng-content></ng-content>\n </div>\n @if (ocType.includes('remove')) {\n <span class=\"material-symbols-outlined\" (click)=\"ocRemoveEvent($event)\">close</span>\n }\n</button>", styles: [".oc-chip{background-color:#f7f7f7;color:#8f9596;border:2px solid #d1d5db;border-radius:16px;font-size:14px!important;font-weight:500;padding:3px 14px;transition:.3s ease!important;cursor:pointer;display:flex;align-items:center}.oc-chip:hover{filter:brightness(.95)}.oc-chip:active{filter:brightness(.85)}.oc-chip.custom-hex-color{border:none;color:#fff;padding:.375rem .75rem;border-radius:1rem;white-space:nowrap}:host-context(body.shui) .oc-chip.custom-hex-color{box-shadow:0 2px 4px #0000001a}:host-context(body.shui) .oc-chip.custom-hex-color:hover{filter:brightness(1.1);box-shadow:0 3px 6px #00000026}:host-context(body.shui) .oc-chip.custom-hex-color:active{filter:brightness(.95);box-shadow:0 1px 2px #0000001a}.selected{background-color:#ccfbe6dc;border:2px solid #00dda3;color:#00dda3}.selected.red-bg{color:#ed3a3a;border-color:#ed3a3a;background-color:#ffcaca}.selected.green-bg{color:#00dda3;border-color:#00dda3;background-color:#ccfbe6dc}.selected.yellow-bg{color:#ebbc2e;border-color:#ebbc2e;background-color:#fffaea}.not-selectable{border:none;background-color:#f7f7f7;color:#8f9596;cursor:default}.not-selectable:active{cursor:not-allowed}.material-symbols-outlined{font-size:.9rem;width:10px;height:10px}.remove{display:flex;align-items:center;gap:.5rem;padding-right:.5rem}.remove:hover{filter:brightness(1)}.remove span{display:flex;align-items:center;justify-content:center;padding:5px;cursor:pointer;border-radius:50%;transition:.1s ease}.remove span:hover{background-color:#d1d5db}\n", ":host-context(.shui) .oc-chip,.oc-chip.shui{border:1px solid #0169b2;color:#0169b2;background-color:#0169b20f}:host-context(.shui) .oc-chip:hover,.oc-chip.shui:hover{background-color:#0169b21a}:host-context(.shui) .oc-chip.selected,.oc-chip.shui.selected{background-color:#0169b2;color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
827
828
|
}
|
|
828
829
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcChipComponent, decorators: [{
|
|
829
830
|
type: Component,
|
|
830
|
-
args: [{ selector: 'oc-chip', standalone: true, imports: [CommonModule], template: "<button
|
|
831
|
+
args: [{ selector: 'oc-chip', standalone: true, imports: [CommonModule], template: "<button [ngClass]=\"{\n 'oc-chip': true,\n selected: ocSelected,\n 'not-selectable': ocType !== 'select' && ocType !== 'select_remove',\n tag: ocType === 'tag',\n remove: ocType === 'remove' || ocType === 'select_remove',\n 'green-bg': ocBg === 'green' && !ocBgHexColor,\n 'red-bg': ocBg === 'red' && !ocBgHexColor,\n 'yellow-bg': ocBg === 'yellow' && !ocBgHexColor,\n 'custom-hex-color': !!ocBgHexColor,\n 'shui': ocStyleTheme === 'shui'\n}\" type=\"button\" [ngStyle]=\"{\n 'font-size': ocFontSize,\n 'background-color': ocBgHexColor || null,\n }\" [title]=\"ocText\" (click)=\"ocType.includes('select') ? ocEvent($event) : null\">\n <div class=\"content\">\n <ng-content></ng-content>\n </div>\n @if (ocType.includes('remove')) {\n <span class=\"material-symbols-outlined\" (click)=\"ocRemoveEvent($event)\">close</span>\n }\n</button>", styles: [".oc-chip{background-color:#f7f7f7;color:#8f9596;border:2px solid #d1d5db;border-radius:16px;font-size:14px!important;font-weight:500;padding:3px 14px;transition:.3s ease!important;cursor:pointer;display:flex;align-items:center}.oc-chip:hover{filter:brightness(.95)}.oc-chip:active{filter:brightness(.85)}.oc-chip.custom-hex-color{border:none;color:#fff;padding:.375rem .75rem;border-radius:1rem;white-space:nowrap}:host-context(body.shui) .oc-chip.custom-hex-color{box-shadow:0 2px 4px #0000001a}:host-context(body.shui) .oc-chip.custom-hex-color:hover{filter:brightness(1.1);box-shadow:0 3px 6px #00000026}:host-context(body.shui) .oc-chip.custom-hex-color:active{filter:brightness(.95);box-shadow:0 1px 2px #0000001a}.selected{background-color:#ccfbe6dc;border:2px solid #00dda3;color:#00dda3}.selected.red-bg{color:#ed3a3a;border-color:#ed3a3a;background-color:#ffcaca}.selected.green-bg{color:#00dda3;border-color:#00dda3;background-color:#ccfbe6dc}.selected.yellow-bg{color:#ebbc2e;border-color:#ebbc2e;background-color:#fffaea}.not-selectable{border:none;background-color:#f7f7f7;color:#8f9596;cursor:default}.not-selectable:active{cursor:not-allowed}.material-symbols-outlined{font-size:.9rem;width:10px;height:10px}.remove{display:flex;align-items:center;gap:.5rem;padding-right:.5rem}.remove:hover{filter:brightness(1)}.remove span{display:flex;align-items:center;justify-content:center;padding:5px;cursor:pointer;border-radius:50%;transition:.1s ease}.remove span:hover{background-color:#d1d5db}\n", ":host-context(.shui) .oc-chip,.oc-chip.shui{border:1px solid #0169b2;color:#0169b2;background-color:#0169b20f}:host-context(.shui) .oc-chip:hover,.oc-chip.shui:hover{background-color:#0169b21a}:host-context(.shui) .oc-chip.selected,.oc-chip.shui.selected{background-color:#0169b2;color:#fff}\n"] }]
|
|
831
832
|
}], propDecorators: { ocSelected: [{
|
|
832
833
|
type: Input
|
|
833
834
|
}], ocType: [{
|
|
@@ -2046,11 +2047,11 @@ class OcMenuHorizComponent {
|
|
|
2046
2047
|
}
|
|
2047
2048
|
}
|
|
2048
2049
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcMenuHorizComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2049
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: OcMenuHorizComponent, isStandalone: true, selector: "oc-menu-horiz", inputs: { ocMenu: "ocMenu", maxWidth: "maxWidth", width: "width", shouldCloseOnClickOut: "shouldCloseOnClickOut", hostElement: "hostElement" }, outputs: { ocChange: "ocChange" }, viewQueries: [{ propertyName: "menuElementInvisible", first: true, predicate: ["menuContainerInvis"], descendants: true }, { propertyName: "menuElement", first: true, predicate: ["menuContainer"], descendants: true }, { propertyName: "itemsListElement", first: true, predicate: ["itemsListInvisible"], descendants: true }], ngImport: i0, template: "@if (isMenuShown && ocMenu.length > 0) {\n <div\n class=\"oc-menu-horiz\"\n [style.width]=\"'fit-content'\"\n #menuContainer\n >\n <ul>\n @if (visibleItems.length === 0 && overflowItems.length === 0) {\n @for (option of ocMenu; track $index) {\n <li\n [ngStyle]=\"{\n 'background-color': option.backgroundColor,\n }\"\n ocTooltip\n [content]=\"option.tooltip || ''\"\n >\n @if (option.callback) {\n <button\n (click)=\"option.callback()\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n @if (option.icon) {\n <span class=\"material-symbols-outlined\">{{ option.icon }}</span>\n }\n {{ option.name }}\n </button>\n } @else if (option.url) {\n <a\n [href]=\"option.url\"\n [target]=\"option.targetBlank ? '_blank' : ''\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n @if (option.icon) {\n <span class=\"material-symbols-outlined\">{{ option.icon }}</span>\n }\n {{ option.name }}\n </a>\n } @else {\n @if (option.icon) {\n <span\n class=\"material-symbols-outlined\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n {{ option.icon }}\n </span>\n }\n <span\n [ngStyle]=\"{\n color: option.color,\n }\"\n >{{ option.name }}</span\n >\n }\n </li>\n }\n }\n\n @for (option of visibleItems; track $index) {\n <li\n [ngStyle]=\"{\n 'background-color': option.backgroundColor,\n }\"\n ocTooltip\n [content]=\"option.tooltip || ''\"\n >\n @if (option.callback) {\n <button\n (click)=\"option.callback()\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n @if (option.icon) {\n <span class=\"material-symbols-outlined\">{{ option.icon }}</span>\n }\n {{ option.name }}\n </button>\n } @else if (option.url) {\n <a\n [href]=\"option.url\"\n [target]=\"option.targetBlank ? '_blank' : ''\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n @if (option.icon) {\n <span class=\"material-symbols-outlined\">{{ option.icon }}</span>\n }\n {{ option.name }}\n </a>\n } @else {\n @if (option.icon) {\n <span\n class=\"material-symbols-outlined\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n {{ option.icon }}\n </span>\n }\n <span\n [ngStyle]=\"{\n color: option.color,\n }\"\n >{{ option.name }}</span\n >\n }\n </li>\n }\n\n @if (overflowItems.length > 0) {\n <li class=\"overflow-menu-item\">\n <button\n (click)=\"toggleOverflowMenu($event)\"\n class=\"overflow-button\"\n >\n <span class=\"material-symbols-outlined\">more_horiz</span>\n </button>\n\n @if (showOverflowMenu) {\n <div class=\"overflow-dropdown\">\n <ul>\n @for (option of overflowItems; track $index) {\n <li\n [ngStyle]=\"{\n 'background-color': option.backgroundColor,\n }\"\n ocTooltip\n [content]=\"option.tooltip || ''\"\n >\n @if (option.callback) {\n <button\n (click)=\"handleOverflowItemClick(option.callback)\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n @if (option.icon) {\n <span class=\"material-symbols-outlined\">{{ option.icon }}</span>\n }\n {{ option.name }}\n </button>\n } @else if (option.url) {\n <a\n [href]=\"option.url\"\n [target]=\"option.targetBlank ? '_blank' : ''\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n @if (option.icon) {\n <span class=\"material-symbols-outlined\">{{ option.icon }}</span>\n }\n {{ option.name }}\n </a>\n } @else {\n @if (option.icon) {\n <span\n class=\"material-symbols-outlined\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n {{ option.icon }}\n </span>\n }\n <span\n [ngStyle]=\"{\n color: option.color,\n }\"\n >{{ option.name }}</span\n >\n }\n </li>\n }\n </ul>\n </div>\n }\n </li>\n }\n </ul>\n </div>\n\n <!-- Invisible Element used to calculate the size of elements -->\n <div\n class=\"oc-menu-horiz\"\n [style.max-width]=\"maxWidth\"\n [style.width]=\"width\"\n #menuContainerInvis\n [ngStyle]=\"{ visibility: 'hidden', 'z-index': '-1', opacity: 0 }\"\n [style.max-width]=\"maxWidth\"\n [style.width]=\"width\"\n >\n <ul\n #itemsListInvisible\n [ngStyle]=\"{ visibility: 'hidden', 'z-index': '-1', opacity: 0 }\"\n >\n @for (option of ocMenu; track $index) {\n <li>\n @if (option.icon) {\n <span class=\"material-symbols-outlined\">\n {{ option.icon }}\n </span>\n }\n @if (option.callback) {\n <button>{{ option.name }}</button>\n }\n @if (option.url) {\n <a>{{ option.name }}</a>\n }\n @if (!option.callback && !option.url) {\n <span>{{ option.name }}</span>\n }\n </li>\n }\n </ul>\n </div>\n}\n", styles: ["*{box-sizing:border-box}.oc-menu-horiz{display:flex;flex-direction:row;border-radius:0 8px 8px;background-color:#f8f9ff;border:2px solid transparent;position:absolute;z-index:10;box-shadow:0 4px 8.7px #00000021;animation:showUp .15s ease;max-width:100%}.oc-menu-horiz ul{display:flex;flex-direction:row;list-style:none;margin:0;padding:0;width:100%}.oc-menu-horiz ul li{text-align:left;text-decoration:none;width:auto;max-height:30px;display:flex;align-items:center;gap:.2rem;white-space:nowrap;flex-shrink:0}.oc-menu-horiz ul li.measuring{visibility:hidden;position:absolute}.oc-menu-horiz ul li .checkbox-opt{min-width:1.3rem}.oc-menu-horiz ul li a,.oc-menu-horiz ul li button{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:.2rem}.oc-menu-horiz ul li a,.oc-menu-horiz ul li button,.oc-menu-horiz ul li span,.oc-menu-horiz ul li .checkbox-opt{color:#8f9596;text-decoration:none;font-size:1rem;font-weight:400;text-align:left;padding:0;margin:0;border:none;padding:.6rem;background-color:transparent;width:100%;cursor:pointer}.oc-menu-horiz ul li .material-symbols-outlined{width:1rem;padding:0;margin:0;font-size:1.1rem;pointer-events:none}.oc-menu-horiz ul li:hover{background-color:#fff}.oc-menu-horiz ul li.overflow-menu-item{position:relative;width:auto;margin-left:auto}.oc-menu-horiz ul li.overflow-menu-item .overflow-button{display:flex;align-items:center;justify-content:center;min-width:40px;width:100%;padding:.6rem .8rem}.oc-menu-horiz ul li.overflow-menu-item .overflow-button .material-symbols-outlined{width:auto}.oc-menu-horiz ul li.overflow-menu-item .overflow-dropdown{position:absolute;top:calc(100% + 4px);right:0;background-color:#f8f9ff;border:2px solid #ffffff;border-radius:8px;box-shadow:0 4px 8.7px #00000021;animation:showUp .15s ease;z-index:1001;min-width:150px}.oc-menu-horiz ul li.overflow-menu-item .overflow-dropdown ul{flex-direction:column}.oc-menu-horiz ul li.overflow-menu-item .overflow-dropdown ul li{width:100%;max-height:none}.oc-menu-horiz ul li.overflow-menu-item .overflow-dropdown ul li:first-child{border-radius:6px 6px 0 0}.oc-menu-horiz ul li.overflow-menu-item .overflow-dropdown ul li:last-child{border-radius:0 0 6px 6px}@keyframes showUp{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: CdkMenuModule }, { kind: "directive", type: OcTooltipDirective, selector: "[ocTooltip]", inputs: ["content", "side"] }] }); }
|
|
2050
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: OcMenuHorizComponent, isStandalone: true, selector: "oc-menu-horiz", inputs: { ocMenu: "ocMenu", maxWidth: "maxWidth", width: "width", shouldCloseOnClickOut: "shouldCloseOnClickOut", hostElement: "hostElement" }, outputs: { ocChange: "ocChange" }, viewQueries: [{ propertyName: "menuElementInvisible", first: true, predicate: ["menuContainerInvis"], descendants: true }, { propertyName: "menuElement", first: true, predicate: ["menuContainer"], descendants: true }, { propertyName: "itemsListElement", first: true, predicate: ["itemsListInvisible"], descendants: true }], ngImport: i0, template: "@if (isMenuShown && ocMenu.length > 0) {\n <div\n class=\"oc-menu-horiz\"\n [style.width]=\"'fit-content'\"\n #menuContainer\n >\n <ul>\n @if (visibleItems.length === 0 && overflowItems.length === 0) {\n @for (option of ocMenu; track $index) {\n <li\n [ngStyle]=\"{\n 'background-color': option.backgroundColor,\n }\"\n ocTooltip\n [content]=\"option.tooltip || ''\"\n >\n @if (option.callback) {\n <button\n (click)=\"option.callback()\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n @if (option.icon) {\n <span class=\"material-symbols-outlined\">{{ option.icon }}</span>\n }\n {{ option.name }}\n </button>\n } @else if (option.url) {\n <a\n [href]=\"option.url\"\n [target]=\"option.targetBlank ? '_blank' : ''\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n @if (option.icon) {\n <span class=\"material-symbols-outlined\">{{ option.icon }}</span>\n }\n {{ option.name }}\n </a>\n } @else {\n @if (option.icon) {\n <span\n class=\"material-symbols-outlined\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n {{ option.icon }}\n </span>\n }\n <span\n [ngStyle]=\"{\n color: option.color,\n }\"\n >{{ option.name }}</span\n >\n }\n </li>\n }\n }\n\n @for (option of visibleItems; track $index) {\n <li\n [ngStyle]=\"{\n 'background-color': option.backgroundColor,\n }\"\n ocTooltip\n [content]=\"option.tooltip || ''\"\n >\n @if (option.callback) {\n <button\n (click)=\"option.callback()\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n @if (option.icon) {\n <span class=\"material-symbols-outlined\">{{ option.icon }}</span>\n }\n {{ option.name }}\n </button>\n } @else if (option.url) {\n <a\n [href]=\"option.url\"\n [target]=\"option.targetBlank ? '_blank' : ''\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n @if (option.icon) {\n <span class=\"material-symbols-outlined\">{{ option.icon }}</span>\n }\n {{ option.name }}\n </a>\n } @else {\n @if (option.icon) {\n <span\n class=\"material-symbols-outlined\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n {{ option.icon }}\n </span>\n }\n <span\n [ngStyle]=\"{\n color: option.color,\n }\"\n >{{ option.name }}</span\n >\n }\n </li>\n }\n\n @if (overflowItems.length > 0) {\n <li class=\"overflow-menu-item\">\n <button\n (click)=\"toggleOverflowMenu($event)\"\n class=\"overflow-button\"\n >\n <span class=\"material-symbols-outlined\">more_horiz</span>\n </button>\n\n @if (showOverflowMenu) {\n <div class=\"overflow-dropdown\">\n <ul>\n @for (option of overflowItems; track $index) {\n <li\n [ngStyle]=\"{\n 'background-color': option.backgroundColor,\n }\"\n ocTooltip\n [content]=\"option.tooltip || ''\"\n >\n @if (option.callback) {\n <button\n (click)=\"handleOverflowItemClick(option.callback)\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n @if (option.icon) {\n <span class=\"material-symbols-outlined\">{{ option.icon }}</span>\n }\n {{ option.name }}\n </button>\n } @else if (option.url) {\n <a\n [href]=\"option.url\"\n [target]=\"option.targetBlank ? '_blank' : ''\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n @if (option.icon) {\n <span class=\"material-symbols-outlined\">{{ option.icon }}</span>\n }\n {{ option.name }}\n </a>\n } @else {\n @if (option.icon) {\n <span\n class=\"material-symbols-outlined\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n {{ option.icon }}\n </span>\n }\n <span\n [ngStyle]=\"{\n color: option.color,\n }\"\n >{{ option.name }}</span\n >\n }\n </li>\n }\n </ul>\n </div>\n }\n </li>\n }\n </ul>\n </div>\n\n <!-- Invisible Element used to calculate the size of elements -->\n <div\n class=\"oc-menu-horiz\"\n [style.max-width]=\"maxWidth\"\n [style.width]=\"width\"\n #menuContainerInvis\n [ngStyle]=\"{ visibility: 'hidden', 'z-index': '-1', opacity: 0 }\"\n [style.max-width]=\"maxWidth\"\n [style.width]=\"width\"\n >\n <ul\n #itemsListInvisible\n [ngStyle]=\"{ visibility: 'hidden', 'z-index': '-1', opacity: 0 }\"\n >\n @for (option of ocMenu; track $index) {\n <li>\n @if (option.icon) {\n <span class=\"material-symbols-outlined\">\n {{ option.icon }}\n </span>\n }\n @if (option.callback) {\n <button>{{ option.name }}</button>\n }\n @if (option.url) {\n <a>{{ option.name }}</a>\n }\n @if (!option.callback && !option.url) {\n <span>{{ option.name }}</span>\n }\n </li>\n }\n </ul>\n </div>\n}\n", styles: ["*{box-sizing:border-box}.oc-menu-horiz{display:flex;flex-direction:row;border-radius:0 8px 8px;background-color:#f8f9ff;border:2px solid transparent;position:absolute;z-index:10;box-shadow:0 4px 8.7px #00000021;animation:showUp .15s ease;max-width:100%}.oc-menu-horiz ul{display:flex;flex-direction:row;list-style:none;margin:0;padding:0;width:100%}.oc-menu-horiz ul li{text-align:left;text-decoration:none;width:auto;max-height:30px;display:flex;align-items:center;gap:.2rem;white-space:nowrap;flex-shrink:0}.oc-menu-horiz ul li.measuring{visibility:hidden;position:absolute}.oc-menu-horiz ul li .checkbox-opt{min-width:1.3rem}.oc-menu-horiz ul li a,.oc-menu-horiz ul li button{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:.2rem}.oc-menu-horiz ul li a,.oc-menu-horiz ul li button,.oc-menu-horiz ul li span,.oc-menu-horiz ul li .checkbox-opt{color:#8f9596;text-decoration:none;font-size:1rem;font-weight:400;text-align:left;padding:0;margin:0;border:none;padding:.6rem;background-color:transparent;width:100%;cursor:pointer}.oc-menu-horiz ul li .material-symbols-outlined{color:inherit;width:1rem;padding:0;margin:0;font-size:1.1rem;pointer-events:none}.oc-menu-horiz ul li:hover{background-color:#fff}.oc-menu-horiz ul li.overflow-menu-item{position:relative;width:auto;margin-left:auto}.oc-menu-horiz ul li.overflow-menu-item .overflow-button{display:flex;align-items:center;justify-content:center;min-width:40px;width:100%;padding:.6rem .8rem}.oc-menu-horiz ul li.overflow-menu-item .overflow-button .material-symbols-outlined{width:auto}.oc-menu-horiz ul li.overflow-menu-item .overflow-dropdown{position:absolute;top:calc(100% + 4px);right:0;background-color:#f8f9ff;border:2px solid #ffffff;border-radius:8px;box-shadow:0 4px 8.7px #00000021;animation:showUp .15s ease;z-index:1001;min-width:150px}.oc-menu-horiz ul li.overflow-menu-item .overflow-dropdown ul{flex-direction:column}.oc-menu-horiz ul li.overflow-menu-item .overflow-dropdown ul li{width:100%;max-height:none}.oc-menu-horiz ul li.overflow-menu-item .overflow-dropdown ul li:first-child{border-radius:6px 6px 0 0}.oc-menu-horiz ul li.overflow-menu-item .overflow-dropdown ul li:last-child{border-radius:0 0 6px 6px}@keyframes showUp{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: CdkMenuModule }, { kind: "directive", type: OcTooltipDirective, selector: "[ocTooltip]", inputs: ["content", "side"] }] }); }
|
|
2050
2051
|
}
|
|
2051
2052
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcMenuHorizComponent, decorators: [{
|
|
2052
2053
|
type: Component,
|
|
2053
|
-
args: [{ selector: 'oc-menu-horiz', standalone: true, imports: [CommonModule, CdkMenuModule, OcTooltipDirective], template: "@if (isMenuShown && ocMenu.length > 0) {\n <div\n class=\"oc-menu-horiz\"\n [style.width]=\"'fit-content'\"\n #menuContainer\n >\n <ul>\n @if (visibleItems.length === 0 && overflowItems.length === 0) {\n @for (option of ocMenu; track $index) {\n <li\n [ngStyle]=\"{\n 'background-color': option.backgroundColor,\n }\"\n ocTooltip\n [content]=\"option.tooltip || ''\"\n >\n @if (option.callback) {\n <button\n (click)=\"option.callback()\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n @if (option.icon) {\n <span class=\"material-symbols-outlined\">{{ option.icon }}</span>\n }\n {{ option.name }}\n </button>\n } @else if (option.url) {\n <a\n [href]=\"option.url\"\n [target]=\"option.targetBlank ? '_blank' : ''\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n @if (option.icon) {\n <span class=\"material-symbols-outlined\">{{ option.icon }}</span>\n }\n {{ option.name }}\n </a>\n } @else {\n @if (option.icon) {\n <span\n class=\"material-symbols-outlined\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n {{ option.icon }}\n </span>\n }\n <span\n [ngStyle]=\"{\n color: option.color,\n }\"\n >{{ option.name }}</span\n >\n }\n </li>\n }\n }\n\n @for (option of visibleItems; track $index) {\n <li\n [ngStyle]=\"{\n 'background-color': option.backgroundColor,\n }\"\n ocTooltip\n [content]=\"option.tooltip || ''\"\n >\n @if (option.callback) {\n <button\n (click)=\"option.callback()\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n @if (option.icon) {\n <span class=\"material-symbols-outlined\">{{ option.icon }}</span>\n }\n {{ option.name }}\n </button>\n } @else if (option.url) {\n <a\n [href]=\"option.url\"\n [target]=\"option.targetBlank ? '_blank' : ''\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n @if (option.icon) {\n <span class=\"material-symbols-outlined\">{{ option.icon }}</span>\n }\n {{ option.name }}\n </a>\n } @else {\n @if (option.icon) {\n <span\n class=\"material-symbols-outlined\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n {{ option.icon }}\n </span>\n }\n <span\n [ngStyle]=\"{\n color: option.color,\n }\"\n >{{ option.name }}</span\n >\n }\n </li>\n }\n\n @if (overflowItems.length > 0) {\n <li class=\"overflow-menu-item\">\n <button\n (click)=\"toggleOverflowMenu($event)\"\n class=\"overflow-button\"\n >\n <span class=\"material-symbols-outlined\">more_horiz</span>\n </button>\n\n @if (showOverflowMenu) {\n <div class=\"overflow-dropdown\">\n <ul>\n @for (option of overflowItems; track $index) {\n <li\n [ngStyle]=\"{\n 'background-color': option.backgroundColor,\n }\"\n ocTooltip\n [content]=\"option.tooltip || ''\"\n >\n @if (option.callback) {\n <button\n (click)=\"handleOverflowItemClick(option.callback)\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n @if (option.icon) {\n <span class=\"material-symbols-outlined\">{{ option.icon }}</span>\n }\n {{ option.name }}\n </button>\n } @else if (option.url) {\n <a\n [href]=\"option.url\"\n [target]=\"option.targetBlank ? '_blank' : ''\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n @if (option.icon) {\n <span class=\"material-symbols-outlined\">{{ option.icon }}</span>\n }\n {{ option.name }}\n </a>\n } @else {\n @if (option.icon) {\n <span\n class=\"material-symbols-outlined\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n {{ option.icon }}\n </span>\n }\n <span\n [ngStyle]=\"{\n color: option.color,\n }\"\n >{{ option.name }}</span\n >\n }\n </li>\n }\n </ul>\n </div>\n }\n </li>\n }\n </ul>\n </div>\n\n <!-- Invisible Element used to calculate the size of elements -->\n <div\n class=\"oc-menu-horiz\"\n [style.max-width]=\"maxWidth\"\n [style.width]=\"width\"\n #menuContainerInvis\n [ngStyle]=\"{ visibility: 'hidden', 'z-index': '-1', opacity: 0 }\"\n [style.max-width]=\"maxWidth\"\n [style.width]=\"width\"\n >\n <ul\n #itemsListInvisible\n [ngStyle]=\"{ visibility: 'hidden', 'z-index': '-1', opacity: 0 }\"\n >\n @for (option of ocMenu; track $index) {\n <li>\n @if (option.icon) {\n <span class=\"material-symbols-outlined\">\n {{ option.icon }}\n </span>\n }\n @if (option.callback) {\n <button>{{ option.name }}</button>\n }\n @if (option.url) {\n <a>{{ option.name }}</a>\n }\n @if (!option.callback && !option.url) {\n <span>{{ option.name }}</span>\n }\n </li>\n }\n </ul>\n </div>\n}\n", styles: ["*{box-sizing:border-box}.oc-menu-horiz{display:flex;flex-direction:row;border-radius:0 8px 8px;background-color:#f8f9ff;border:2px solid transparent;position:absolute;z-index:10;box-shadow:0 4px 8.7px #00000021;animation:showUp .15s ease;max-width:100%}.oc-menu-horiz ul{display:flex;flex-direction:row;list-style:none;margin:0;padding:0;width:100%}.oc-menu-horiz ul li{text-align:left;text-decoration:none;width:auto;max-height:30px;display:flex;align-items:center;gap:.2rem;white-space:nowrap;flex-shrink:0}.oc-menu-horiz ul li.measuring{visibility:hidden;position:absolute}.oc-menu-horiz ul li .checkbox-opt{min-width:1.3rem}.oc-menu-horiz ul li a,.oc-menu-horiz ul li button{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:.2rem}.oc-menu-horiz ul li a,.oc-menu-horiz ul li button,.oc-menu-horiz ul li span,.oc-menu-horiz ul li .checkbox-opt{color:#8f9596;text-decoration:none;font-size:1rem;font-weight:400;text-align:left;padding:0;margin:0;border:none;padding:.6rem;background-color:transparent;width:100%;cursor:pointer}.oc-menu-horiz ul li .material-symbols-outlined{width:1rem;padding:0;margin:0;font-size:1.1rem;pointer-events:none}.oc-menu-horiz ul li:hover{background-color:#fff}.oc-menu-horiz ul li.overflow-menu-item{position:relative;width:auto;margin-left:auto}.oc-menu-horiz ul li.overflow-menu-item .overflow-button{display:flex;align-items:center;justify-content:center;min-width:40px;width:100%;padding:.6rem .8rem}.oc-menu-horiz ul li.overflow-menu-item .overflow-button .material-symbols-outlined{width:auto}.oc-menu-horiz ul li.overflow-menu-item .overflow-dropdown{position:absolute;top:calc(100% + 4px);right:0;background-color:#f8f9ff;border:2px solid #ffffff;border-radius:8px;box-shadow:0 4px 8.7px #00000021;animation:showUp .15s ease;z-index:1001;min-width:150px}.oc-menu-horiz ul li.overflow-menu-item .overflow-dropdown ul{flex-direction:column}.oc-menu-horiz ul li.overflow-menu-item .overflow-dropdown ul li{width:100%;max-height:none}.oc-menu-horiz ul li.overflow-menu-item .overflow-dropdown ul li:first-child{border-radius:6px 6px 0 0}.oc-menu-horiz ul li.overflow-menu-item .overflow-dropdown ul li:last-child{border-radius:0 0 6px 6px}@keyframes showUp{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}\n"] }]
|
|
2054
|
+
args: [{ selector: 'oc-menu-horiz', standalone: true, imports: [CommonModule, CdkMenuModule, OcTooltipDirective], template: "@if (isMenuShown && ocMenu.length > 0) {\n <div\n class=\"oc-menu-horiz\"\n [style.width]=\"'fit-content'\"\n #menuContainer\n >\n <ul>\n @if (visibleItems.length === 0 && overflowItems.length === 0) {\n @for (option of ocMenu; track $index) {\n <li\n [ngStyle]=\"{\n 'background-color': option.backgroundColor,\n }\"\n ocTooltip\n [content]=\"option.tooltip || ''\"\n >\n @if (option.callback) {\n <button\n (click)=\"option.callback()\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n @if (option.icon) {\n <span class=\"material-symbols-outlined\">{{ option.icon }}</span>\n }\n {{ option.name }}\n </button>\n } @else if (option.url) {\n <a\n [href]=\"option.url\"\n [target]=\"option.targetBlank ? '_blank' : ''\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n @if (option.icon) {\n <span class=\"material-symbols-outlined\">{{ option.icon }}</span>\n }\n {{ option.name }}\n </a>\n } @else {\n @if (option.icon) {\n <span\n class=\"material-symbols-outlined\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n {{ option.icon }}\n </span>\n }\n <span\n [ngStyle]=\"{\n color: option.color,\n }\"\n >{{ option.name }}</span\n >\n }\n </li>\n }\n }\n\n @for (option of visibleItems; track $index) {\n <li\n [ngStyle]=\"{\n 'background-color': option.backgroundColor,\n }\"\n ocTooltip\n [content]=\"option.tooltip || ''\"\n >\n @if (option.callback) {\n <button\n (click)=\"option.callback()\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n @if (option.icon) {\n <span class=\"material-symbols-outlined\">{{ option.icon }}</span>\n }\n {{ option.name }}\n </button>\n } @else if (option.url) {\n <a\n [href]=\"option.url\"\n [target]=\"option.targetBlank ? '_blank' : ''\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n @if (option.icon) {\n <span class=\"material-symbols-outlined\">{{ option.icon }}</span>\n }\n {{ option.name }}\n </a>\n } @else {\n @if (option.icon) {\n <span\n class=\"material-symbols-outlined\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n {{ option.icon }}\n </span>\n }\n <span\n [ngStyle]=\"{\n color: option.color,\n }\"\n >{{ option.name }}</span\n >\n }\n </li>\n }\n\n @if (overflowItems.length > 0) {\n <li class=\"overflow-menu-item\">\n <button\n (click)=\"toggleOverflowMenu($event)\"\n class=\"overflow-button\"\n >\n <span class=\"material-symbols-outlined\">more_horiz</span>\n </button>\n\n @if (showOverflowMenu) {\n <div class=\"overflow-dropdown\">\n <ul>\n @for (option of overflowItems; track $index) {\n <li\n [ngStyle]=\"{\n 'background-color': option.backgroundColor,\n }\"\n ocTooltip\n [content]=\"option.tooltip || ''\"\n >\n @if (option.callback) {\n <button\n (click)=\"handleOverflowItemClick(option.callback)\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n @if (option.icon) {\n <span class=\"material-symbols-outlined\">{{ option.icon }}</span>\n }\n {{ option.name }}\n </button>\n } @else if (option.url) {\n <a\n [href]=\"option.url\"\n [target]=\"option.targetBlank ? '_blank' : ''\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n @if (option.icon) {\n <span class=\"material-symbols-outlined\">{{ option.icon }}</span>\n }\n {{ option.name }}\n </a>\n } @else {\n @if (option.icon) {\n <span\n class=\"material-symbols-outlined\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n {{ option.icon }}\n </span>\n }\n <span\n [ngStyle]=\"{\n color: option.color,\n }\"\n >{{ option.name }}</span\n >\n }\n </li>\n }\n </ul>\n </div>\n }\n </li>\n }\n </ul>\n </div>\n\n <!-- Invisible Element used to calculate the size of elements -->\n <div\n class=\"oc-menu-horiz\"\n [style.max-width]=\"maxWidth\"\n [style.width]=\"width\"\n #menuContainerInvis\n [ngStyle]=\"{ visibility: 'hidden', 'z-index': '-1', opacity: 0 }\"\n [style.max-width]=\"maxWidth\"\n [style.width]=\"width\"\n >\n <ul\n #itemsListInvisible\n [ngStyle]=\"{ visibility: 'hidden', 'z-index': '-1', opacity: 0 }\"\n >\n @for (option of ocMenu; track $index) {\n <li>\n @if (option.icon) {\n <span class=\"material-symbols-outlined\">\n {{ option.icon }}\n </span>\n }\n @if (option.callback) {\n <button>{{ option.name }}</button>\n }\n @if (option.url) {\n <a>{{ option.name }}</a>\n }\n @if (!option.callback && !option.url) {\n <span>{{ option.name }}</span>\n }\n </li>\n }\n </ul>\n </div>\n}\n", styles: ["*{box-sizing:border-box}.oc-menu-horiz{display:flex;flex-direction:row;border-radius:0 8px 8px;background-color:#f8f9ff;border:2px solid transparent;position:absolute;z-index:10;box-shadow:0 4px 8.7px #00000021;animation:showUp .15s ease;max-width:100%}.oc-menu-horiz ul{display:flex;flex-direction:row;list-style:none;margin:0;padding:0;width:100%}.oc-menu-horiz ul li{text-align:left;text-decoration:none;width:auto;max-height:30px;display:flex;align-items:center;gap:.2rem;white-space:nowrap;flex-shrink:0}.oc-menu-horiz ul li.measuring{visibility:hidden;position:absolute}.oc-menu-horiz ul li .checkbox-opt{min-width:1.3rem}.oc-menu-horiz ul li a,.oc-menu-horiz ul li button{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:.2rem}.oc-menu-horiz ul li a,.oc-menu-horiz ul li button,.oc-menu-horiz ul li span,.oc-menu-horiz ul li .checkbox-opt{color:#8f9596;text-decoration:none;font-size:1rem;font-weight:400;text-align:left;padding:0;margin:0;border:none;padding:.6rem;background-color:transparent;width:100%;cursor:pointer}.oc-menu-horiz ul li .material-symbols-outlined{color:inherit;width:1rem;padding:0;margin:0;font-size:1.1rem;pointer-events:none}.oc-menu-horiz ul li:hover{background-color:#fff}.oc-menu-horiz ul li.overflow-menu-item{position:relative;width:auto;margin-left:auto}.oc-menu-horiz ul li.overflow-menu-item .overflow-button{display:flex;align-items:center;justify-content:center;min-width:40px;width:100%;padding:.6rem .8rem}.oc-menu-horiz ul li.overflow-menu-item .overflow-button .material-symbols-outlined{width:auto}.oc-menu-horiz ul li.overflow-menu-item .overflow-dropdown{position:absolute;top:calc(100% + 4px);right:0;background-color:#f8f9ff;border:2px solid #ffffff;border-radius:8px;box-shadow:0 4px 8.7px #00000021;animation:showUp .15s ease;z-index:1001;min-width:150px}.oc-menu-horiz ul li.overflow-menu-item .overflow-dropdown ul{flex-direction:column}.oc-menu-horiz ul li.overflow-menu-item .overflow-dropdown ul li{width:100%;max-height:none}.oc-menu-horiz ul li.overflow-menu-item .overflow-dropdown ul li:first-child{border-radius:6px 6px 0 0}.oc-menu-horiz ul li.overflow-menu-item .overflow-dropdown ul li:last-child{border-radius:0 0 6px 6px}@keyframes showUp{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}\n"] }]
|
|
2054
2055
|
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }], propDecorators: { ocMenu: [{
|
|
2055
2056
|
type: Input
|
|
2056
2057
|
}], maxWidth: [{
|
|
@@ -2970,7 +2971,11 @@ class OcCalendarComponent {
|
|
|
2970
2971
|
ngOnInit() {
|
|
2971
2972
|
this.setWeekDays();
|
|
2972
2973
|
this.generateCalendar();
|
|
2973
|
-
|
|
2974
|
+
}
|
|
2975
|
+
ngOnChanges(changes) {
|
|
2976
|
+
if (changes['ocStartDate'] || changes['ocEndDate'] || changes['ocMinDate'] || changes['ocMaxDate']) {
|
|
2977
|
+
this.generateCalendar();
|
|
2978
|
+
}
|
|
2974
2979
|
}
|
|
2975
2980
|
previousMonth() {
|
|
2976
2981
|
this.currentMonth = new Date(this.currentMonth.getFullYear(), this.currentMonth.getMonth() - 1, 1);
|
|
@@ -3039,10 +3044,8 @@ class OcCalendarComponent {
|
|
|
3039
3044
|
isCurrentMonth: date.getMonth() === this.currentMonth.getMonth(),
|
|
3040
3045
|
isSelected: this.isSameDate(date, this.ocStartDate) ||
|
|
3041
3046
|
this.isSameDate(date, this.ocEndDate),
|
|
3042
|
-
isInRange:
|
|
3043
|
-
|
|
3044
|
-
date > this.ocStartDate &&
|
|
3045
|
-
date < this.ocEndDate),
|
|
3047
|
+
isInRange: this.isDateInRange(date),
|
|
3048
|
+
isDisabled: this.isDateDisabled(date),
|
|
3046
3049
|
});
|
|
3047
3050
|
}
|
|
3048
3051
|
this.weeks.push(days);
|
|
@@ -3055,6 +3058,30 @@ class OcCalendarComponent {
|
|
|
3055
3058
|
a.getMonth() === b.getMonth() &&
|
|
3056
3059
|
a.getFullYear() === b.getFullYear());
|
|
3057
3060
|
}
|
|
3061
|
+
isDateInRange(date) {
|
|
3062
|
+
if (!this.ocStartDate || !this.ocEndDate)
|
|
3063
|
+
return false;
|
|
3064
|
+
const dateOnly = new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
|
|
3065
|
+
const startOnly = new Date(this.ocStartDate.getFullYear(), this.ocStartDate.getMonth(), this.ocStartDate.getDate()).getTime();
|
|
3066
|
+
const endOnly = new Date(this.ocEndDate.getFullYear(), this.ocEndDate.getMonth(), this.ocEndDate.getDate()).getTime();
|
|
3067
|
+
return dateOnly > startOnly && dateOnly < endOnly;
|
|
3068
|
+
}
|
|
3069
|
+
isDateDisabled(date) {
|
|
3070
|
+
const dateOnly = new Date(date.getFullYear(), date.getMonth(), date.getDate());
|
|
3071
|
+
if (this.ocMinDate) {
|
|
3072
|
+
const minDateOnly = new Date(this.ocMinDate.getFullYear(), this.ocMinDate.getMonth(), this.ocMinDate.getDate());
|
|
3073
|
+
if (dateOnly < minDateOnly) {
|
|
3074
|
+
return true;
|
|
3075
|
+
}
|
|
3076
|
+
}
|
|
3077
|
+
if (this.ocMaxDate) {
|
|
3078
|
+
const maxDateOnly = new Date(this.ocMaxDate.getFullYear(), this.ocMaxDate.getMonth(), this.ocMaxDate.getDate());
|
|
3079
|
+
if (dateOnly > maxDateOnly) {
|
|
3080
|
+
return true;
|
|
3081
|
+
}
|
|
3082
|
+
}
|
|
3083
|
+
return false;
|
|
3084
|
+
}
|
|
3058
3085
|
getWeekRange(date) {
|
|
3059
3086
|
const dayOfWeek = (date.getDay() - this.ocWeekStartsOn + 7) % 7;
|
|
3060
3087
|
const startOfWeek = new Date(date);
|
|
@@ -3087,14 +3114,14 @@ class OcCalendarComponent {
|
|
|
3087
3114
|
this.weekDays = weekDaysMap[this.ocLanguage];
|
|
3088
3115
|
}
|
|
3089
3116
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcCalendarComponent, deps: [{ token: StyleThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3090
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: OcCalendarComponent, isStandalone: true, selector: "oc-calendar", inputs: { ocSelectionMode: "ocSelectionMode", ocStartDate: "ocStartDate", ocEndDate: "ocEndDate", ocMinDate: "ocMinDate", ocMaxDate: "ocMaxDate", ocWeekStartsOn: "ocWeekStartsOn", ocWidth: "ocWidth", ocMaxWidth: "ocMaxWidth", ocLanguage: "ocLanguage", ocSelectWholeWeek: "ocSelectWholeWeek", ocSelectDaysCount: "ocSelectDaysCount", ocStyle: "ocStyle" }, outputs: { ocDateSelected: "ocDateSelected", ocRangeSelected: "ocRangeSelected" }, host: { properties: { "style.width": "this.computedWidth", "style.max-width": "this.computedMaxWidth" } }, ngImport: i0, template: "<div class=\"oc-calendar\" [ngClass]=\"ocStyle\">\n <!-- Existing date selector -->\n <div class=\"oc-calendar-header\">\n <oc-date-select\n [ocValue]=\"(currentMonth | date: 'yyyy-MM-dd')!\"\n ocType=\"month\"\n ocSkipType=\"month\"\n (ocChange)=\"onMonthChange($event)\"\n />\n </div>\n\n <!-- Weekdays -->\n <div class=\"oc-calendar-weekdays\">\n @for (d of weekDays; track d) {\n <span>{{ d }}</span>\n }\n </div>\n\n <!-- Calendar grid -->\n <div class=\"oc-calendar-weeks\">\n @for (week of weeks; track $index) {\n <div class=\"oc-calendar-week\">\n @for (day of week; track day.date.getTime()) {\n <button\n class=\"oc-calendar-day\"\n [class.is-outside]=\"!day.isCurrentMonth\"\n [class.is-selected]=\"day.isSelected\"\n [class.is-in-range]=\"day.isInRange\"\n (click)=\"selectDay(day)\"\n >\n {{ day.date.getDate() }}\n </button>\n }\n </div>\n }\n </div>\n</div>\n", styles: [".shui.oc-calendar .oc-calendar-weekdays,.shui .oc-calendar .oc-calendar-weekdays{color:#7d7d7d}.shui.oc-calendar .oc-calendar-day,.shui .oc-calendar .oc-calendar-day{color:#000;position:relative;border-radius:50%}.shui.oc-calendar .oc-calendar-day.is-outside,.shui .oc-calendar .oc-calendar-day.is-outside{color:#c8c8c8;opacity:.5}.shui.oc-calendar .oc-calendar-day.is-selected,.shui .oc-calendar .oc-calendar-day.is-selected{background:#0169b2;color:#fff}.shui.oc-calendar .oc-calendar-day.is-in-range,.shui .oc-calendar .oc-calendar-day.is-in-range{background:#0000001a;color:#000}.shui.oc-calendar .oc-calendar-day:hover:not(.is-selected),.shui .oc-calendar .oc-calendar-day:hover:not(.is-selected){background:#ebebeb}:host{display:block;width:320px}.oc-calendar{width:100%;font-family:system-ui,sans-serif}.oc-calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.oc-calendar-header button{border:none;background:none;font-size:20px;cursor:pointer}.oc-calendar-weekdays,.oc-calendar-week{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}.oc-calendar-weekdays{font-size:12px;opacity:.6;margin-bottom:4px}.oc-calendar-weeks{display:flex;flex-direction:column;gap:4px}.oc-calendar-day{aspect-ratio:1/1;width:100%;border-radius:8px;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center}.oc-calendar-day.is-outside{opacity:.3}.oc-calendar-day.is-selected{background:#5505a2;color:#fff}.oc-calendar-day.is-in-range{background:#d1d5db}.oc-calendar-day:hover{background:#00000014}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: OcDateSelectComponent, selector: "oc-date-select", inputs: ["ocValue", "ocType", "ocSkipType", "ocLanguage", "ocMaxDate", "ocMinDate"], outputs: ["ocValueChange", "ocChange"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] }); }
|
|
3117
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: OcCalendarComponent, isStandalone: true, selector: "oc-calendar", inputs: { ocSelectionMode: "ocSelectionMode", ocStartDate: "ocStartDate", ocEndDate: "ocEndDate", ocMinDate: "ocMinDate", ocMaxDate: "ocMaxDate", ocWeekStartsOn: "ocWeekStartsOn", ocWidth: "ocWidth", ocMaxWidth: "ocMaxWidth", ocLanguage: "ocLanguage", ocSelectWholeWeek: "ocSelectWholeWeek", ocSelectDaysCount: "ocSelectDaysCount", ocStyle: "ocStyle" }, outputs: { ocDateSelected: "ocDateSelected", ocRangeSelected: "ocRangeSelected" }, host: { properties: { "style.width": "this.computedWidth", "style.max-width": "this.computedMaxWidth" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"oc-calendar\" [ngClass]=\"ocStyle\">\n <!-- Existing date selector -->\n <div class=\"oc-calendar-header\">\n <oc-date-select\n [ocValue]=\"(currentMonth | date: 'yyyy-MM-dd')!\"\n ocType=\"month\"\n ocSkipType=\"month\"\n (ocChange)=\"onMonthChange($event)\"\n />\n </div>\n\n <!-- Weekdays -->\n <div class=\"oc-calendar-weekdays\">\n @for (d of weekDays; track d) {\n <span>{{ d }}</span>\n }\n </div>\n\n <!-- Calendar grid -->\n <div class=\"oc-calendar-weeks\">\n @for (week of weeks; track $index) {\n <div class=\"oc-calendar-week\">\n @for (day of week; track day.date.getTime()) {\n <button\n class=\"oc-calendar-day\"\n [class.is-outside]=\"!day.isCurrentMonth\"\n [class.is-selected]=\"day.isSelected\"\n [class.is-in-range]=\"day.isInRange\"\n [class.is-disabled]=\"day.isDisabled\"\n [disabled]=\"day.isDisabled\"\n (click)=\"selectDay(day)\"\n >\n {{ day.date.getDate() }}\n </button>\n }\n </div>\n }\n </div>\n</div>\n", styles: [".shui.oc-calendar .oc-calendar-weekdays,.shui .oc-calendar .oc-calendar-weekdays{color:#7d7d7d}.shui.oc-calendar .oc-calendar-day,.shui .oc-calendar .oc-calendar-day{color:#000;position:relative;border-radius:50%}.shui.oc-calendar .oc-calendar-day.is-outside,.shui .oc-calendar .oc-calendar-day.is-outside{color:#c8c8c8;opacity:.5}.shui.oc-calendar .oc-calendar-day.is-selected,.shui .oc-calendar .oc-calendar-day.is-selected{background:#0169b2;color:#fff}.shui.oc-calendar .oc-calendar-day.is-in-range,.shui .oc-calendar .oc-calendar-day.is-in-range{background:#0000001a;color:#000}.shui.oc-calendar .oc-calendar-day:hover:not(.is-selected),.shui .oc-calendar .oc-calendar-day:hover:not(.is-selected){background:#ebebeb}:host{display:block;width:320px}.oc-calendar{width:100%;font-family:system-ui,sans-serif}.oc-calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.oc-calendar-header button{border:none;background:none;font-size:20px;cursor:pointer}.oc-calendar-weekdays,.oc-calendar-week{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}.oc-calendar-weekdays{font-size:12px;opacity:.6;margin-bottom:4px}.oc-calendar-weeks{display:flex;flex-direction:column;gap:4px}.oc-calendar-day{aspect-ratio:1/1;width:100%;border-radius:8px;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center}.oc-calendar-day.is-outside{opacity:.3}.oc-calendar-day.is-selected{background:#5505a2;color:#fff}.oc-calendar-day.is-in-range{background:#d1d5db}.oc-calendar-day:hover{background:#00000014}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: OcDateSelectComponent, selector: "oc-date-select", inputs: ["ocValue", "ocType", "ocSkipType", "ocLanguage", "ocMaxDate", "ocMinDate"], outputs: ["ocValueChange", "ocChange"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] }); }
|
|
3091
3118
|
}
|
|
3092
3119
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcCalendarComponent, decorators: [{
|
|
3093
3120
|
type: Component,
|
|
3094
3121
|
args: [{ selector: 'oc-calendar', standalone: true, host: {
|
|
3095
3122
|
'[style.width]': 'computedWidth',
|
|
3096
3123
|
'[style.max-width]': 'computedMaxWidth',
|
|
3097
|
-
}, imports: [CommonModule, DatePipe, OcDateSelectComponent], template: "<div class=\"oc-calendar\" [ngClass]=\"ocStyle\">\n <!-- Existing date selector -->\n <div class=\"oc-calendar-header\">\n <oc-date-select\n [ocValue]=\"(currentMonth | date: 'yyyy-MM-dd')!\"\n ocType=\"month\"\n ocSkipType=\"month\"\n (ocChange)=\"onMonthChange($event)\"\n />\n </div>\n\n <!-- Weekdays -->\n <div class=\"oc-calendar-weekdays\">\n @for (d of weekDays; track d) {\n <span>{{ d }}</span>\n }\n </div>\n\n <!-- Calendar grid -->\n <div class=\"oc-calendar-weeks\">\n @for (week of weeks; track $index) {\n <div class=\"oc-calendar-week\">\n @for (day of week; track day.date.getTime()) {\n <button\n class=\"oc-calendar-day\"\n [class.is-outside]=\"!day.isCurrentMonth\"\n [class.is-selected]=\"day.isSelected\"\n [class.is-in-range]=\"day.isInRange\"\n (click)=\"selectDay(day)\"\n >\n {{ day.date.getDate() }}\n </button>\n }\n </div>\n }\n </div>\n</div>\n", styles: [".shui.oc-calendar .oc-calendar-weekdays,.shui .oc-calendar .oc-calendar-weekdays{color:#7d7d7d}.shui.oc-calendar .oc-calendar-day,.shui .oc-calendar .oc-calendar-day{color:#000;position:relative;border-radius:50%}.shui.oc-calendar .oc-calendar-day.is-outside,.shui .oc-calendar .oc-calendar-day.is-outside{color:#c8c8c8;opacity:.5}.shui.oc-calendar .oc-calendar-day.is-selected,.shui .oc-calendar .oc-calendar-day.is-selected{background:#0169b2;color:#fff}.shui.oc-calendar .oc-calendar-day.is-in-range,.shui .oc-calendar .oc-calendar-day.is-in-range{background:#0000001a;color:#000}.shui.oc-calendar .oc-calendar-day:hover:not(.is-selected),.shui .oc-calendar .oc-calendar-day:hover:not(.is-selected){background:#ebebeb}:host{display:block;width:320px}.oc-calendar{width:100%;font-family:system-ui,sans-serif}.oc-calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.oc-calendar-header button{border:none;background:none;font-size:20px;cursor:pointer}.oc-calendar-weekdays,.oc-calendar-week{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}.oc-calendar-weekdays{font-size:12px;opacity:.6;margin-bottom:4px}.oc-calendar-weeks{display:flex;flex-direction:column;gap:4px}.oc-calendar-day{aspect-ratio:1/1;width:100%;border-radius:8px;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center}.oc-calendar-day.is-outside{opacity:.3}.oc-calendar-day.is-selected{background:#5505a2;color:#fff}.oc-calendar-day.is-in-range{background:#d1d5db}.oc-calendar-day:hover{background:#00000014}\n"] }]
|
|
3124
|
+
}, imports: [CommonModule, DatePipe, OcDateSelectComponent], template: "<div class=\"oc-calendar\" [ngClass]=\"ocStyle\">\n <!-- Existing date selector -->\n <div class=\"oc-calendar-header\">\n <oc-date-select\n [ocValue]=\"(currentMonth | date: 'yyyy-MM-dd')!\"\n ocType=\"month\"\n ocSkipType=\"month\"\n (ocChange)=\"onMonthChange($event)\"\n />\n </div>\n\n <!-- Weekdays -->\n <div class=\"oc-calendar-weekdays\">\n @for (d of weekDays; track d) {\n <span>{{ d }}</span>\n }\n </div>\n\n <!-- Calendar grid -->\n <div class=\"oc-calendar-weeks\">\n @for (week of weeks; track $index) {\n <div class=\"oc-calendar-week\">\n @for (day of week; track day.date.getTime()) {\n <button\n class=\"oc-calendar-day\"\n [class.is-outside]=\"!day.isCurrentMonth\"\n [class.is-selected]=\"day.isSelected\"\n [class.is-in-range]=\"day.isInRange\"\n [class.is-disabled]=\"day.isDisabled\"\n [disabled]=\"day.isDisabled\"\n (click)=\"selectDay(day)\"\n >\n {{ day.date.getDate() }}\n </button>\n }\n </div>\n }\n </div>\n</div>\n", styles: [".shui.oc-calendar .oc-calendar-weekdays,.shui .oc-calendar .oc-calendar-weekdays{color:#7d7d7d}.shui.oc-calendar .oc-calendar-day,.shui .oc-calendar .oc-calendar-day{color:#000;position:relative;border-radius:50%}.shui.oc-calendar .oc-calendar-day.is-outside,.shui .oc-calendar .oc-calendar-day.is-outside{color:#c8c8c8;opacity:.5}.shui.oc-calendar .oc-calendar-day.is-selected,.shui .oc-calendar .oc-calendar-day.is-selected{background:#0169b2;color:#fff}.shui.oc-calendar .oc-calendar-day.is-in-range,.shui .oc-calendar .oc-calendar-day.is-in-range{background:#0000001a;color:#000}.shui.oc-calendar .oc-calendar-day:hover:not(.is-selected),.shui .oc-calendar .oc-calendar-day:hover:not(.is-selected){background:#ebebeb}:host{display:block;width:320px}.oc-calendar{width:100%;font-family:system-ui,sans-serif}.oc-calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.oc-calendar-header button{border:none;background:none;font-size:20px;cursor:pointer}.oc-calendar-weekdays,.oc-calendar-week{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}.oc-calendar-weekdays{font-size:12px;opacity:.6;margin-bottom:4px}.oc-calendar-weeks{display:flex;flex-direction:column;gap:4px}.oc-calendar-day{aspect-ratio:1/1;width:100%;border-radius:8px;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center}.oc-calendar-day.is-outside{opacity:.3}.oc-calendar-day.is-selected{background:#5505a2;color:#fff}.oc-calendar-day.is-in-range{background:#d1d5db}.oc-calendar-day:hover{background:#00000014}\n"] }]
|
|
3098
3125
|
}], ctorParameters: () => [{ type: StyleThemeService }], propDecorators: { ocSelectionMode: [{
|
|
3099
3126
|
type: Input
|
|
3100
3127
|
}], ocStartDate: [{
|