otimus-library 0.4.87 → 0.4.88
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 +57 -21
- package/fesm2022/otimus-library.mjs.map +1 -1
- package/index.d.ts +22 -4
- package/package.json +1 -1
|
@@ -966,10 +966,27 @@ class OcChipComponent {
|
|
|
966
966
|
this.ocBg = 'green';
|
|
967
967
|
this.ocText = '';
|
|
968
968
|
this.ocFontSize = '16px';
|
|
969
|
+
/**
|
|
970
|
+
* Optional Material Symbol name rendered before the chip body — e.g.
|
|
971
|
+
* `'circle'` (status dot), `'check_circle'`, `'error'`. Empty string hides
|
|
972
|
+
* the icon, unless `ocLoading` is true. Use `ocLeftIconFilled` for the
|
|
973
|
+
* filled-glyph variant.
|
|
974
|
+
*/
|
|
975
|
+
this.ocLeftIcon = '';
|
|
976
|
+
/** Renders `ocLeftIcon` with `font-variation-settings: 'FILL' 1`. */
|
|
977
|
+
this.ocLeftIconFilled = false;
|
|
978
|
+
/**
|
|
979
|
+
* When true, forces the leading icon to `progress_activity` and spins it
|
|
980
|
+
* continuously (1 s linear).
|
|
981
|
+
*/
|
|
982
|
+
this.ocLoading = false;
|
|
969
983
|
this.ocClick = new EventEmitter();
|
|
970
984
|
this.ocRemove = new EventEmitter();
|
|
971
985
|
this.ocStyleTheme = 'otimus';
|
|
972
986
|
}
|
|
987
|
+
get leftIcon() {
|
|
988
|
+
return this.ocLoading ? 'progress_activity' : this.ocLeftIcon;
|
|
989
|
+
}
|
|
973
990
|
ocEvent(event) {
|
|
974
991
|
event.stopPropagation();
|
|
975
992
|
this.ocClick.emit();
|
|
@@ -983,11 +1000,11 @@ class OcChipComponent {
|
|
|
983
1000
|
this.ocRemove.emit();
|
|
984
1001
|
}
|
|
985
1002
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
986
|
-
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", ocTextHexColor: "ocTextHexColor", 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 'color': ocTextHexColor || 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
|
|
1003
|
+
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", ocTextHexColor: "ocTextHexColor", ocText: "ocText", ocFontSize: "ocFontSize", ocLeftIcon: "ocLeftIcon", ocLeftIconFilled: "ocLeftIconFilled", ocLoading: "ocLoading" }, 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 'color': ocTextHexColor || null,\n }\" [title]=\"ocText\" (click)=\"ocType.includes('select') ? ocEvent($event) : null\">\n @if (leftIcon) {\n <span\n class=\"material-symbols-outlined oc-chip__left-icon\"\n [class.is-filled]=\"ocLeftIconFilled\"\n [class.is-loading]=\"ocLoading\"\n aria-hidden=\"true\"\n >{{ leftIcon }}</span>\n }\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>\n", 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;gap:4px}.oc-chip:hover{filter:brightness(.95)}.oc-chip:active{filter:brightness(.85)}.oc-chip__left-icon{font-size:1em!important;line-height:1;width:auto;height:auto}.oc-chip__left-icon.is-filled{font-variation-settings:\"FILL\" 1}.oc-chip__left-icon.is-loading{animation:oc-chip-spin 1s linear infinite}.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}@keyframes oc-chip-spin{to{transform:rotate(360deg)}}.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{color:#0169b2;background-color:#0169b20f}:host-context(.shui) .oc-chip:not(.not-selectable),.oc-chip.shui:not(.not-selectable){border:1px solid #0169b2}: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"] }] }); }
|
|
987
1004
|
}
|
|
988
1005
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcChipComponent, decorators: [{
|
|
989
1006
|
type: Component,
|
|
990
|
-
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 'color': ocTextHexColor || 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
|
|
1007
|
+
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 'color': ocTextHexColor || null,\n }\" [title]=\"ocText\" (click)=\"ocType.includes('select') ? ocEvent($event) : null\">\n @if (leftIcon) {\n <span\n class=\"material-symbols-outlined oc-chip__left-icon\"\n [class.is-filled]=\"ocLeftIconFilled\"\n [class.is-loading]=\"ocLoading\"\n aria-hidden=\"true\"\n >{{ leftIcon }}</span>\n }\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>\n", 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;gap:4px}.oc-chip:hover{filter:brightness(.95)}.oc-chip:active{filter:brightness(.85)}.oc-chip__left-icon{font-size:1em!important;line-height:1;width:auto;height:auto}.oc-chip__left-icon.is-filled{font-variation-settings:\"FILL\" 1}.oc-chip__left-icon.is-loading{animation:oc-chip-spin 1s linear infinite}.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}@keyframes oc-chip-spin{to{transform:rotate(360deg)}}.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{color:#0169b2;background-color:#0169b20f}:host-context(.shui) .oc-chip:not(.not-selectable),.oc-chip.shui:not(.not-selectable){border:1px solid #0169b2}: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"] }]
|
|
991
1008
|
}], propDecorators: { ocSelected: [{
|
|
992
1009
|
type: Input
|
|
993
1010
|
}], ocType: [{
|
|
@@ -1002,6 +1019,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
|
|
|
1002
1019
|
type: Input
|
|
1003
1020
|
}], ocFontSize: [{
|
|
1004
1021
|
type: Input
|
|
1022
|
+
}], ocLeftIcon: [{
|
|
1023
|
+
type: Input
|
|
1024
|
+
}], ocLeftIconFilled: [{
|
|
1025
|
+
type: Input
|
|
1026
|
+
}], ocLoading: [{
|
|
1027
|
+
type: Input
|
|
1005
1028
|
}], ocClick: [{
|
|
1006
1029
|
type: Output
|
|
1007
1030
|
}], ocRemove: [{
|
|
@@ -1897,7 +1920,7 @@ class OcAutocompleteComponent {
|
|
|
1897
1920
|
this.closeOverlay();
|
|
1898
1921
|
}
|
|
1899
1922
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcAutocompleteComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: InternationalizationService }, { token: StyleThemeService }, { token: i0.ChangeDetectorRef }, { token: i3.Overlay }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1900
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: OcAutocompleteComponent, isStandalone: true, selector: "oc-autocomplete", inputs: { ocData: { classPropertyName: "ocData", publicName: "ocData", isSignal: false, isRequired: false, transformFunction: null }, ocPlaceholder: { classPropertyName: "ocPlaceholder", publicName: "ocPlaceholder", isSignal: false, isRequired: false, transformFunction: null }, ocError: { classPropertyName: "ocError", publicName: "ocError", isSignal: false, isRequired: false, transformFunction: null }, ocSize: { classPropertyName: "ocSize", publicName: "ocSize", isSignal: false, isRequired: false, transformFunction: null }, ocValue: { classPropertyName: "ocValue", publicName: "ocValue", isSignal: false, isRequired: false, transformFunction: null }, ocClearOnChange: { classPropertyName: "ocClearOnChange", publicName: "ocClearOnChange", isSignal: false, isRequired: false, transformFunction: null }, ocWidth: { classPropertyName: "ocWidth", publicName: "ocWidth", isSignal: false, isRequired: false, transformFunction: null }, ocMinWidth: { classPropertyName: "ocMinWidth", publicName: "ocMinWidth", isSignal: false, isRequired: false, transformFunction: null }, ocMaxWidth: { classPropertyName: "ocMaxWidth", publicName: "ocMaxWidth", isSignal: false, isRequired: false, transformFunction: null }, ocOptionsMaxHeight: { classPropertyName: "ocOptionsMaxHeight", publicName: "ocOptionsMaxHeight", isSignal: false, isRequired: false, transformFunction: null }, ocOptionsWidth: { classPropertyName: "ocOptionsWidth", publicName: "ocOptionsWidth", isSignal: false, isRequired: false, transformFunction: null }, ocRequired: { classPropertyName: "ocRequired", publicName: "ocRequired", isSignal: false, isRequired: false, transformFunction: null }, ocMaxResults: { classPropertyName: "ocMaxResults", publicName: "ocMaxResults", isSignal: false, isRequired: false, transformFunction: null }, ocAllowNotListedValue: { classPropertyName: "ocAllowNotListedValue", publicName: "ocAllowNotListedValue", isSignal: false, isRequired: false, transformFunction: null }, ocNoAvailableOptionsText: { classPropertyName: "ocNoAvailableOptionsText", publicName: "ocNoAvailableOptionsText", isSignal: false, isRequired: false, transformFunction: null }, ocTypeForMoreResultsText: { classPropertyName: "ocTypeForMoreResultsText", publicName: "ocTypeForMoreResultsText", isSignal: false, isRequired: false, transformFunction: null }, ocLoading: { classPropertyName: "ocLoading", publicName: "ocLoading", isSignal: false, isRequired: false, transformFunction: null }, ocSemanticLike: { classPropertyName: "ocSemanticLike", publicName: "ocSemanticLike", isSignal: false, isRequired: false, transformFunction: null }, ocStyle: { classPropertyName: "ocStyle", publicName: "ocStyle", isSignal: false, isRequired: false, transformFunction: null }, ocTabIndex: { classPropertyName: "ocTabIndex", publicName: "ocTabIndex", isSignal: false, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: false, isRequired: false, transformFunction: null }, ocSelectByTyping: { classPropertyName: "ocSelectByTyping", publicName: "ocSelectByTyping", isSignal: false, isRequired: false, transformFunction: null }, ocDisabled: { classPropertyName: "ocDisabled", publicName: "ocDisabled", isSignal: false, isRequired: false, transformFunction: null }, ocType: { classPropertyName: "ocType", publicName: "ocType", isSignal: false, isRequired: false, transformFunction: null }, ocShowBackdrop: { classPropertyName: "ocShowBackdrop", publicName: "ocShowBackdrop", isSignal: false, isRequired: false, transformFunction: null }, ocHasDeleteButton: { classPropertyName: "ocHasDeleteButton", publicName: "ocHasDeleteButton", isSignal: false, isRequired: false, transformFunction: null }, ocEnableKeyboard: { classPropertyName: "ocEnableKeyboard", publicName: "ocEnableKeyboard", isSignal: false, isRequired: false, transformFunction: null }, ocSelectionEllipsisAt: { classPropertyName: "ocSelectionEllipsisAt", publicName: "ocSelectionEllipsisAt", isSignal: false, isRequired: false, transformFunction: null }, ocMaxVisibleChips: { classPropertyName: "ocMaxVisibleChips", publicName: "ocMaxVisibleChips", isSignal: false, isRequired: false, transformFunction: null }, ocSelectedValues: { classPropertyName: "ocSelectedValues", publicName: "ocSelectedValues", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ocValueChange: "ocValueChange", ocChange: "ocChange", ocCounterSelectChange: "ocCounterSelectChange", ocMultipleSelectChange: "ocMultipleSelectChange", ocOptionNotFound: "ocOptionNotFound", ocClick: "ocClick", ocHiddenChipsCountChange: "ocHiddenChipsCountChange" }, host: { properties: { "style.width": "computedWidth", "style.min-width": "computedMinWidth", "style.max-width": "computedMaxWidth" } }, providers: [InternationalizationService], queries: [{ propertyName: "ocPrefix", first: true, predicate: ["ocPrefix"], descendants: true }, { propertyName: "ocSuffix", first: true, predicate: ["ocSuffix"], descendants: true }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "options", first: true, predicate: ["options"], descendants: true }, { propertyName: "outerDiv", first: true, predicate: ["outerDiv"], descendants: true }, { propertyName: "listOptionsElements", predicate: ["listOptionsRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"oc-input-box\"\n [ngClass]=\"{\n small: ocSize === 'small',\n large: ocSize === 'large',\n error: !!ocError,\n prefix: hasPrefix,\n suffix: hasSuffix || ocHasDeleteButton,\n shui: ocStyle === 'shui',\n 'shui-input-box': ocStyle === 'shui',\n 'multiple-select': ocType === 'multipleSelect' || ocType === 'counterSelect',\n }\"\n>\n <ng-content></ng-content>\n @if (ocType === 'multipleSelect' && selectedValues.length > 0) {\n <div class=\"oc-chips-container\">\n @for (item of visibleChips; track item.value) {\n <oc-chip\n ocType=\"tag\"\n (ocRemove)=\"removeSelectedValue(item)\"\n >\n <p\n ocTooltip\n [content]=\"\n ocSelectionEllipsisAt && item.name.length > ocSelectionEllipsisAt ? item.name : ''\n \"\n >\n @if (ocSelectionEllipsisAt) {\n {{ item.name | slice: 0 : ocSelectionEllipsisAt\n }}{{ item.name.length > ocSelectionEllipsisAt ? '...' : '' }}\n } @else {\n {{ item.name }}\n }\n </p>\n </oc-chip>\n }\n @if (hiddenChipsCountByInput > 0) {\n <oc-chip\n ocType=\"tag\"\n class=\"oc-more-chip\"\n ocTooltip\n [content]=\"hiddenChipNames\"\n >\n <p>+{{ hiddenChipsCountByInput }}</p>\n </oc-chip>\n }\n </div>\n }\n @if (ocType === 'counterSelect' && getCounterItems().length > 0) {\n <div class=\"oc-chips-container\">\n @for (item of visibleCounterChips; track item.value) {\n <oc-chip\n ocType=\"tag\"\n (ocRemove)=\"decrementCounter(item)\"\n >\n <p\n ocTooltip\n [content]=\"\n ocSelectionEllipsisAt && item.name.length > ocSelectionEllipsisAt ? item.name : ''\n \"\n >\n @if (ocSelectionEllipsisAt) {\n {{ item.name | slice: 0 : ocSelectionEllipsisAt\n }}{{ item.name.length > ocSelectionEllipsisAt ? '...' : '' }}\n } @else {\n {{ item.name }}\n }\n ({{ item.counter }})\n </p>\n </oc-chip>\n }\n @if (hiddenCounterChipsCount > 0) {\n <oc-chip\n ocType=\"tag\"\n class=\"oc-more-chip\"\n ocTooltip\n [content]=\"hiddenChipNames\"\n >\n <p>+{{ hiddenCounterChipsCount }}</p>\n </oc-chip>\n }\n </div>\n }\n <input\n #input\n (click)=\"toggleOptions(); ocClick.emit()\"\n type=\"text\"\n (input)=\"filterData(ocValue)\"\n [(ngModel)]=\"ocValue\"\n (ngModelChange)=\"ocValue = $event; ocValueChange.emit($event)\"\n [ngClass]=\"{\n 'semantic-input': ocSemanticLike || ocStyle === 'semantic',\n 'has-chips':\n (ocType === 'multipleSelect' && selectedValues.length > 0) ||\n (ocType === 'counterSelect' && getCounterItems().length > 0),\n }\"\n [tabindex]=\"ocTabIndex\"\n [disabled]=\"ocDisabled\"\n (keydown)=\"onKeyDown($event)\"\n />\n @if (!ocSemanticLike && ocStyle !== 'semantic') {\n <label>\n <span [innerHTML]=\"ocPlaceholder || ''\"></span>\n @if (ocRequired) {\n <span class=\"oc color error\">*</span>\n }\n </label>\n }\n <small\n *ngIf=\"ocError\"\n class=\"error-msg\"\n >{{ ocError }}</small\n >\n <ng-content select=\"ocPrefix\"></ng-content>\n @if (ocHasDeleteButton && !ocDisabled) {\n <button\n class=\"oc-has-close-button oc suffix\"\n (click)=\"clearValue(); ocChange.emit(null)\"\n [disabled]=\"ocDisabled\"\n >\n <span class=\"material-symbols-outlined\">backspace</span>\n </button>\n }\n <ng-content select=\"ocSuffix\"></ng-content>\n</div>\n", styles: ["@charset \"UTF-8\";.shui-input-box.prefix .material-symbols-outlined{position:absolute;left:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.shui-input-box.suffix .material-symbols-outlined,.shui-input-box.suffix .oc.suffix{position:absolute;right:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.shui-input-box{position:relative;margin-top:.5rem}.shui-input-box select *{background-color:#f5f5f5}.shui-input-box label{position:absolute;left:0;top:0;padding:.5rem .7rem;font-size:.85rem;color:#000;pointer-events:none;transition:.3s ease;border-radius:.5rem;white-space:nowrap}.shui-input-box.prefix{z-index:5}.shui-input-box.prefix .material-symbols-outlined,.shui-input-box.prefix .oc.suffix{padding:.5rem .7rem}.shui-input-box.prefix input{padding-left:1.75rem}.shui-input-box.prefix label{padding:.7rem 2.5rem}.shui-input-box.suffix{z-index:5}.shui-input-box.suffix .material-symbols-outlined,.shui-input-box.suffix .oc.suffix{padding:.5rem .7rem}.shui-input-box.suffix input{padding-right:1.75rem}.shui-input-box.suffix label{padding:.7rem}.shui-input-box input,.shui-input-box textarea,.shui-input-box select{border-radius:0;font-size:1rem;background-color:#f5f5f5;border:none;outline:none;padding:1rem .9rem .2rem;width:100%;transition:.3s ease;color:#000;font-weight:400;height:41px;min-width:100%}.shui-input-box textarea{height:inherit;padding-top:20px}.shui-input-box input:not(:placeholder-shown)~label,.shui-input-box input:-webkit-autofill~label,.shui-input-box input:autofill~label,.shui-input-box input:focus~label,.shui-input-box textarea:not(:placeholder-shown)~label,.shui-input-box textarea:focus~label,.shui-input-box select:valid~label,.shui-input-box select:focus~label{transform:translate(.45rem);background-color:#f5f5f5;width:95%;padding:1px 7px 0;font-size:.7rem;font-weight:500}.shui-input-box input:focus~label,.shui-input-box input:-webkit-autofill~label,.shui-input-box input:autofill~label,.shui-input-box textarea:focus~label,.shui-input-box select:valid~label,.shui-input-box select:focus~label{color:#0169b2}.shui-input-box:before{display:block;content:\"\";position:absolute;bottom:0;height:1px;width:100%;background-color:#7d7d7d;transition:.4s ease;width:0;background-color:#0169b2}.shui-input-box:focus-within:before{width:100%}.shui-input-box.small input,.shui-input-box.small textarea,.shui-input-box.small select{max-height:36px;padding-top:1rem}.shui-input-box.small.prefix{z-index:5}.shui-input-box.small.prefix .material-symbols-outlined{padding:.35rem .7rem;font-size:1.25rem;color:#0169b2}.shui-input-box.small.prefix label{padding:.45rem 2.5rem}.shui-input-box.small.suffix{z-index:5}.shui-input-box.small.suffix .material-symbols-outlined{padding:.35rem .7rem;color:#0169b2}.shui-input-box.small.suffix label{padding:.45rem .7rem}.shui-input-box.large input,.shui-input-box.large textarea,.shui-input-box.large select{height:46px}.shui-input-box.large label{padding:1rem .7rem}.shui-input-box.large.prefix{z-index:5}.shui-input-box.large.prefix .material-symbols-outlined{padding:1rem .7rem}.shui-input-box.large.prefix input{padding-left:2.5rem}.shui-input-box.large.prefix label{padding:1.1rem 2.5rem}.shui-input-box.large.suffix{z-index:5}.shui-input-box.large.suffix .material-symbols-outlined{padding:.9rem .7rem}.shui-input-box.large.suffix input{padding-right:2.5rem}.shui-input-box.large.suffix label{padding:1.1rem .7rem}.error input,.error textarea,.error select{border:1px solid #e7001d;box-shadow:0 4px 6.1px #a1000014}.error:before{width:0!important}.shui .prefix .material-symbols-outlined{position:absolute;left:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.shui .suffix .material-symbols-outlined,.shui .suffix .oc.suffix{position:absolute;right:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.shui .oc-input-box{position:relative;margin-top:.5rem}.shui .oc-input-box select *{background-color:#f5f5f5}.shui .oc-input-box label{position:absolute;left:0;top:0;padding:.5rem .7rem;font-size:.85rem;color:#000;pointer-events:none;transition:.3s ease;border-radius:.5rem;white-space:nowrap}.shui .oc-input-box.prefix{z-index:5}.shui .oc-input-box.prefix .material-symbols-outlined,.shui .oc-input-box.prefix .oc.suffix{padding:.5rem .7rem}.shui .oc-input-box.prefix input{padding-left:1.75rem}.shui .oc-input-box.prefix label{padding:.7rem 2.5rem}.shui .oc-input-box.suffix{z-index:5}.shui .oc-input-box.suffix .material-symbols-outlined,.shui .oc-input-box.suffix .oc.suffix{padding:.5rem .7rem}.shui .oc-input-box.suffix input{padding-right:1.75rem}.shui .oc-input-box.suffix label{padding:.7rem}.shui .oc-input-box input,.shui .oc-input-box textarea,.shui .oc-input-box select{border-radius:0;font-size:1rem;background-color:#f5f5f5;border:none;outline:none;padding:1rem .9rem .2rem;width:100%;transition:.3s ease;color:#000;font-weight:400;height:41px;min-width:100%}.shui .oc-input-box textarea{height:inherit;padding-top:20px}.shui .oc-input-box input:not(:placeholder-shown)~label,.shui .oc-input-box input:-webkit-autofill~label,.shui .oc-input-box input:autofill~label,.shui .oc-input-box input:focus~label,.shui .oc-input-box textarea:not(:placeholder-shown)~label,.shui .oc-input-box textarea:focus~label,.shui .oc-input-box select:valid~label,.shui .oc-input-box select:focus~label{transform:translate(.45rem);background-color:#f5f5f5;width:95%;padding:1px 7px 0;font-size:.7rem;font-weight:500}.shui .oc-input-box input:focus~label,.shui .oc-input-box input:-webkit-autofill~label,.shui .oc-input-box input:autofill~label,.shui .oc-input-box textarea:focus~label,.shui .oc-input-box select:valid~label,.shui .oc-input-box select:focus~label{color:#0169b2}.shui .oc-input-box:before{display:block;content:\"\";position:absolute;bottom:0;height:1px;width:100%;background-color:#7d7d7d;transition:.4s ease;width:0;background-color:#0169b2}.shui .oc-input-box:focus-within:before{width:100%}.shui .oc-input-box.small input,.shui .oc-input-box.small textarea,.shui .oc-input-box.small select{max-height:36px;padding-top:1rem}.shui .oc-input-box.small.prefix{z-index:5}.shui .oc-input-box.small.prefix .material-symbols-outlined{padding:.35rem .7rem;font-size:1.25rem;color:#0169b2}.shui .oc-input-box.small.prefix label{padding:.45rem 2.5rem}.shui .oc-input-box.small.suffix{z-index:5}.shui .oc-input-box.small.suffix .material-symbols-outlined{padding:.35rem .7rem;color:#0169b2}.shui .oc-input-box.small.suffix label{padding:.45rem .7rem}.shui .oc-input-box.large input,.shui .oc-input-box.large textarea,.shui .oc-input-box.large select{height:46px}.shui .oc-input-box.large label{padding:1rem .7rem}.shui .oc-input-box.large.prefix{z-index:5}.shui .oc-input-box.large.prefix .material-symbols-outlined{padding:1rem .7rem}.shui .oc-input-box.large.prefix input{padding-left:2.5rem}.shui .oc-input-box.large.prefix label{padding:1.1rem 2.5rem}.shui .oc-input-box.large.suffix{z-index:5}.shui .oc-input-box.large.suffix .material-symbols-outlined{padding:.9rem .7rem}.shui .oc-input-box.large.suffix input{padding-right:2.5rem}.shui .oc-input-box.large.suffix label{padding:1.1rem .7rem}.shui .error input,.shui .error textarea,.shui .error select{border:1px solid #e7001d;box-shadow:0 4px 6.1px #a1000014}.shui .error:before{width:0!important}.shui .error small,.shui .error label{color:#ed3a3a!important;font-weight:600}.oc.suffix,.oc.prefix,.material-symbols-outlined,.shui .oc.suffix,.shui .oc.prefix,.shui .material-symbols-outlined{z-index:5!important}.oc-input-box.prefix .material-symbols-outlined{position:absolute;left:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.oc-input-box.suffix .material-symbols-outlined,.oc-input-box.suffix .oc.suffix{position:absolute;right:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.oc-input-box{position:relative;margin-top:.5rem}.oc-input-box select *{background-color:#f8f9ff}.oc-input-box label{position:absolute;left:0;top:0;padding:.5rem .7rem;font-size:.85rem;color:#8f9596;pointer-events:none;transition:.3s ease;border-radius:.5rem;white-space:nowrap}.oc-input-box label .oc.color.error{font-weight:700;margin-left:.2rem}.oc-input-box.prefix .material-symbols-outlined,.oc-input-box.prefix .oc.suffix{padding:.5rem .7rem}.oc-input-box.prefix input{padding-left:1.75rem}.oc-input-box.prefix label{padding:.7rem 2.5rem}.oc-input-box.suffix .material-symbols-outlined,.oc-input-box.suffix .oc.suffix{padding:.5rem .7rem}.oc-input-box.suffix input{padding-right:1.75rem}.oc-input-box.suffix label{padding:.7rem}.oc-input-box input,.oc-input-box textarea,.oc-input-box select{font-size:1rem;border-radius:.7rem;background-color:#f8f9ff;border:1px solid #d1d5db;outline:none;padding:.6rem .9rem;width:100%;transition:.3s ease;color:#7e8485;font-weight:500}.oc-input-box input:focus,.oc-input-box textarea:focus,.oc-input-box select:focus{border:1px solid #00dda3;box-shadow:0 4px 3.2px #00dda314}.oc-input-box input:not(:placeholder-shown)~label,.oc-input-box input:-webkit-autofill~label,.oc-input-box input:autofill~label,.oc-input-box input:focus~label,.oc-input-box textarea:not(:placeholder-shown)~label,.oc-input-box textarea:focus~label,.oc-input-box select:valid~label,.oc-input-box select:focus~label{transform:translateY(-.855rem) translate(.6rem);color:#1e0832;background-color:#f8f9ff;padding:1px 7px;font-weight:500}.error input,.error textarea,.error select{border:1px solid #ed3a3a;box-shadow:0 4px 6.1px #a1000014}.error small,.error label{color:#ed3a3a!important;font-weight:600}.oc-input-box.small input,.oc-input-box.small textarea,.oc-input-box.small select{padding:.3rem .7rem;border-radius:.5rem}.oc-input-box.small.prefix .material-symbols-outlined{padding:.35rem .7rem;font-size:1.25rem}.oc-input-box.small.prefix label{padding:.45rem 2.5rem}.oc-input-box.small.suffix .material-symbols-outlined{padding:.35rem .7rem}.oc-input-box.small.suffix label{padding:.45rem .7rem}.oc-input-box.small label{padding:.5rem .7rem}.oc-input-box.small input:focus~label,.oc-input-box.small input:not(:placeholder-shown)~label,.oc-input-box.small input:-webkit-autofill~label,.oc-input-box.small input:autofill~label,.oc-input-box.small textarea:focus~label,.oc-input-box.small textarea:not(:placeholder-shown)~label,.oc-input-box.small select:focus~label,.oc-input-box.small select:valid~label{transform:translateY(-.99rem) translate(.6rem);color:#7e8485;background-color:#fff;padding:1px 7px;font-weight:500}.oc-input-box.large input,.oc-input-box.large textarea,.oc-input-box.large select{padding:1rem;border-radius:1rem}.oc-input-box.large label,.oc-input-box.large.prefix .material-symbols-outlined{padding:1rem .7rem}.oc-input-box.large.prefix input{padding-left:2.5rem}.oc-input-box.large.prefix label{padding:1.1rem 2.5rem}.oc-input-box.large.suffix .material-symbols-outlined{padding:.9rem .7rem}.oc-input-box.large.suffix input{padding-right:2.5rem}.oc-input-box.large.suffix label{padding:1.1rem .7rem}.oc-input-box.large input:focus~label,.oc-input-box.large input:not(:placeholder-shown)~label,.oc-input-box.large input:-webkit-autofill~label,.oc-input-box.large input:autofill~label,.oc-input-box.large textarea:focus~label,.oc-input-box.large textarea:not(:placeholder-shown)~label,.oc-input-box.large select:focus~label,.oc-input-box.large select:valid~label{transform:translateY(-.77rem) translate(.6rem);color:#7e8485;background-color:#fff;padding:1px 7px;font-weight:500}.oc-input-box{position:relative}.cdk-overlay-transparent-backdrop{background:none}.cdk-overlay-connected-position-bounding-box{max-width:90vw!important;left:auto!important;top:auto!important}.cdk-overlay-pane{max-width:90vw!important}.oc-has-close-button-input{padding-right:60px}.oc-has-close-button{display:flex;justify-content:center;align-items:center;position:absolute;right:.5rem!important;top:8%;height:84%;width:2.2rem;border:2px solid transparent;border-radius:.5rem;background-color:transparent;padding:0!important;transition:border-color .2s ease,box-shadow .2s ease}.oc-has-close-button:hover{border:2px solid #8f9596;box-shadow:0 4px 8.7px #00000021;cursor:pointer}.oc-has-close-button span{padding:0!important;margin:.3rem}.oc-counter-select{display:flex;gap:.2rem;align-items:center;float:right;max-height:30px}.oc-counter-select .counter{font-size:.9rem;color:#5505a2;font-weight:600;margin:0;padding:0}.oc-counter-select button{display:flex;justify-content:center;align-items:center;text-align:center;max-width:20px}.oc-counter-select .subtract span,.oc-counter-select .add span{font-size:1rem;font-weight:600;text-align:center}.oc-counter-select span{transition:.2s ease}.oc-counter-select .subtract:hover span{color:#ed3a3a!important}.oc-counter-select .add:hover span{color:#00dda3!important}.shui-option-box .oc-counter-select .counter{color:#0169b2}.no-options{padding:.6rem!important;color:#8f9596}.oc-options.loader{display:flex;align-items:center;justify-content:center}.oc-options.loader span{width:24px;margin:3rem;color:#5505a2}.loading{animation:spinLoad .5s linear infinite}.semantic-input{display:inline-block;width:100%;padding:10px 12px;font-size:14px;line-height:1.5;color:#333;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 1px 2px #22242626;transition:border-color .2s ease,box-shadow .2s ease}.semantic-input:hover{border-color:#b3b3b3}.semantic-input:focus{border-color:#85b7d9;box-shadow:0 0 0 2px #22242626;outline:none}.semantic-input:disabled{background-color:#f9f9f9;color:#b3b3b3;border-color:#ddd;cursor:not-allowed}.oc-input-box.multiple-select{position:relative}.oc-input-box.multiple-select input{padding-left:.9rem;text-indent:0}.oc-input-box.multiple-select.small input{padding-left:.7rem}.oc-input-box.multiple-select.large input{padding-left:1rem}.oc-input-box.multiple-select input.has-chips~label{transform:translateY(-.855rem) translate(.6rem);color:#1e0832;background-color:#f8f9ff;padding:1px 7px;font-weight:500}.oc-input-box.multiple-select.shui input.has-chips~label,.oc-input-box.multiple-select.shui-input-box input.has-chips~label{transform:translate(.45rem);background-color:#f5f5f5;width:95%;padding:1px 7px 0;font-size:.7rem;font-weight:500;color:#0169b2}.oc-chips-container{position:absolute;left:.9rem;top:50%;transform:translateY(-50%);display:flex;flex-wrap:nowrap;gap:.1rem;align-items:center;pointer-events:none;max-width:calc(100% - 1.8rem);overflow:hidden}.oc-chips-container oc-chip{cursor:pointer;pointer-events:auto;flex-shrink:0}.oc-chips-container oc-chip p{font-size:12px!important;margin:0;padding:0}.oc-chips-container oc-chip:hover{opacity:.8}.oc-chips-container oc-chip.oc-more-chip{cursor:default;pointer-events:auto}.oc-chips-container oc-chip.oc-more-chip p{font-weight:600;color:#7e8485}.oc-input-box.multiple-select .oc-chips-container~input{padding-left:calc(.9rem + var(--chips-width, 0px))}@keyframes spinLoad{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: OcChipComponent, selector: "oc-chip", inputs: ["ocSelected", "ocType", "ocBg", "ocBgHexColor", "ocTextHexColor", "ocText", "ocFontSize"], outputs: ["ocClick", "ocRemove"] }, { kind: "directive", type: OcTooltipDirective, selector: "[ocTooltip]", inputs: ["content", "side"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1923
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: OcAutocompleteComponent, isStandalone: true, selector: "oc-autocomplete", inputs: { ocData: { classPropertyName: "ocData", publicName: "ocData", isSignal: false, isRequired: false, transformFunction: null }, ocPlaceholder: { classPropertyName: "ocPlaceholder", publicName: "ocPlaceholder", isSignal: false, isRequired: false, transformFunction: null }, ocError: { classPropertyName: "ocError", publicName: "ocError", isSignal: false, isRequired: false, transformFunction: null }, ocSize: { classPropertyName: "ocSize", publicName: "ocSize", isSignal: false, isRequired: false, transformFunction: null }, ocValue: { classPropertyName: "ocValue", publicName: "ocValue", isSignal: false, isRequired: false, transformFunction: null }, ocClearOnChange: { classPropertyName: "ocClearOnChange", publicName: "ocClearOnChange", isSignal: false, isRequired: false, transformFunction: null }, ocWidth: { classPropertyName: "ocWidth", publicName: "ocWidth", isSignal: false, isRequired: false, transformFunction: null }, ocMinWidth: { classPropertyName: "ocMinWidth", publicName: "ocMinWidth", isSignal: false, isRequired: false, transformFunction: null }, ocMaxWidth: { classPropertyName: "ocMaxWidth", publicName: "ocMaxWidth", isSignal: false, isRequired: false, transformFunction: null }, ocOptionsMaxHeight: { classPropertyName: "ocOptionsMaxHeight", publicName: "ocOptionsMaxHeight", isSignal: false, isRequired: false, transformFunction: null }, ocOptionsWidth: { classPropertyName: "ocOptionsWidth", publicName: "ocOptionsWidth", isSignal: false, isRequired: false, transformFunction: null }, ocRequired: { classPropertyName: "ocRequired", publicName: "ocRequired", isSignal: false, isRequired: false, transformFunction: null }, ocMaxResults: { classPropertyName: "ocMaxResults", publicName: "ocMaxResults", isSignal: false, isRequired: false, transformFunction: null }, ocAllowNotListedValue: { classPropertyName: "ocAllowNotListedValue", publicName: "ocAllowNotListedValue", isSignal: false, isRequired: false, transformFunction: null }, ocNoAvailableOptionsText: { classPropertyName: "ocNoAvailableOptionsText", publicName: "ocNoAvailableOptionsText", isSignal: false, isRequired: false, transformFunction: null }, ocTypeForMoreResultsText: { classPropertyName: "ocTypeForMoreResultsText", publicName: "ocTypeForMoreResultsText", isSignal: false, isRequired: false, transformFunction: null }, ocLoading: { classPropertyName: "ocLoading", publicName: "ocLoading", isSignal: false, isRequired: false, transformFunction: null }, ocSemanticLike: { classPropertyName: "ocSemanticLike", publicName: "ocSemanticLike", isSignal: false, isRequired: false, transformFunction: null }, ocStyle: { classPropertyName: "ocStyle", publicName: "ocStyle", isSignal: false, isRequired: false, transformFunction: null }, ocTabIndex: { classPropertyName: "ocTabIndex", publicName: "ocTabIndex", isSignal: false, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: false, isRequired: false, transformFunction: null }, ocSelectByTyping: { classPropertyName: "ocSelectByTyping", publicName: "ocSelectByTyping", isSignal: false, isRequired: false, transformFunction: null }, ocDisabled: { classPropertyName: "ocDisabled", publicName: "ocDisabled", isSignal: false, isRequired: false, transformFunction: null }, ocType: { classPropertyName: "ocType", publicName: "ocType", isSignal: false, isRequired: false, transformFunction: null }, ocShowBackdrop: { classPropertyName: "ocShowBackdrop", publicName: "ocShowBackdrop", isSignal: false, isRequired: false, transformFunction: null }, ocHasDeleteButton: { classPropertyName: "ocHasDeleteButton", publicName: "ocHasDeleteButton", isSignal: false, isRequired: false, transformFunction: null }, ocEnableKeyboard: { classPropertyName: "ocEnableKeyboard", publicName: "ocEnableKeyboard", isSignal: false, isRequired: false, transformFunction: null }, ocSelectionEllipsisAt: { classPropertyName: "ocSelectionEllipsisAt", publicName: "ocSelectionEllipsisAt", isSignal: false, isRequired: false, transformFunction: null }, ocMaxVisibleChips: { classPropertyName: "ocMaxVisibleChips", publicName: "ocMaxVisibleChips", isSignal: false, isRequired: false, transformFunction: null }, ocSelectedValues: { classPropertyName: "ocSelectedValues", publicName: "ocSelectedValues", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ocValueChange: "ocValueChange", ocChange: "ocChange", ocCounterSelectChange: "ocCounterSelectChange", ocMultipleSelectChange: "ocMultipleSelectChange", ocOptionNotFound: "ocOptionNotFound", ocClick: "ocClick", ocHiddenChipsCountChange: "ocHiddenChipsCountChange" }, host: { properties: { "style.width": "computedWidth", "style.min-width": "computedMinWidth", "style.max-width": "computedMaxWidth" } }, providers: [InternationalizationService], queries: [{ propertyName: "ocPrefix", first: true, predicate: ["ocPrefix"], descendants: true }, { propertyName: "ocSuffix", first: true, predicate: ["ocSuffix"], descendants: true }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "options", first: true, predicate: ["options"], descendants: true }, { propertyName: "outerDiv", first: true, predicate: ["outerDiv"], descendants: true }, { propertyName: "listOptionsElements", predicate: ["listOptionsRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"oc-input-box\"\n [ngClass]=\"{\n small: ocSize === 'small',\n large: ocSize === 'large',\n error: !!ocError,\n prefix: hasPrefix,\n suffix: hasSuffix || ocHasDeleteButton,\n shui: ocStyle === 'shui',\n 'shui-input-box': ocStyle === 'shui',\n 'multiple-select': ocType === 'multipleSelect' || ocType === 'counterSelect',\n }\"\n>\n <ng-content></ng-content>\n @if (ocType === 'multipleSelect' && selectedValues.length > 0) {\n <div class=\"oc-chips-container\">\n @for (item of visibleChips; track item.value) {\n <oc-chip\n ocType=\"tag\"\n (ocRemove)=\"removeSelectedValue(item)\"\n >\n <p\n ocTooltip\n [content]=\"\n ocSelectionEllipsisAt && item.name.length > ocSelectionEllipsisAt ? item.name : ''\n \"\n >\n @if (ocSelectionEllipsisAt) {\n {{ item.name | slice: 0 : ocSelectionEllipsisAt\n }}{{ item.name.length > ocSelectionEllipsisAt ? '...' : '' }}\n } @else {\n {{ item.name }}\n }\n </p>\n </oc-chip>\n }\n @if (hiddenChipsCountByInput > 0) {\n <oc-chip\n ocType=\"tag\"\n class=\"oc-more-chip\"\n ocTooltip\n [content]=\"hiddenChipNames\"\n >\n <p>+{{ hiddenChipsCountByInput }}</p>\n </oc-chip>\n }\n </div>\n }\n @if (ocType === 'counterSelect' && getCounterItems().length > 0) {\n <div class=\"oc-chips-container\">\n @for (item of visibleCounterChips; track item.value) {\n <oc-chip\n ocType=\"tag\"\n (ocRemove)=\"decrementCounter(item)\"\n >\n <p\n ocTooltip\n [content]=\"\n ocSelectionEllipsisAt && item.name.length > ocSelectionEllipsisAt ? item.name : ''\n \"\n >\n @if (ocSelectionEllipsisAt) {\n {{ item.name | slice: 0 : ocSelectionEllipsisAt\n }}{{ item.name.length > ocSelectionEllipsisAt ? '...' : '' }}\n } @else {\n {{ item.name }}\n }\n ({{ item.counter }})\n </p>\n </oc-chip>\n }\n @if (hiddenCounterChipsCount > 0) {\n <oc-chip\n ocType=\"tag\"\n class=\"oc-more-chip\"\n ocTooltip\n [content]=\"hiddenChipNames\"\n >\n <p>+{{ hiddenCounterChipsCount }}</p>\n </oc-chip>\n }\n </div>\n }\n <input\n #input\n (click)=\"toggleOptions(); ocClick.emit()\"\n type=\"text\"\n (input)=\"filterData(ocValue)\"\n [(ngModel)]=\"ocValue\"\n (ngModelChange)=\"ocValue = $event; ocValueChange.emit($event)\"\n [ngClass]=\"{\n 'semantic-input': ocSemanticLike || ocStyle === 'semantic',\n 'has-chips':\n (ocType === 'multipleSelect' && selectedValues.length > 0) ||\n (ocType === 'counterSelect' && getCounterItems().length > 0),\n }\"\n [tabindex]=\"ocTabIndex\"\n [disabled]=\"ocDisabled\"\n (keydown)=\"onKeyDown($event)\"\n />\n @if (!ocSemanticLike && ocStyle !== 'semantic') {\n <label>\n <span [innerHTML]=\"ocPlaceholder || ''\"></span>\n @if (ocRequired) {\n <span class=\"oc color error\">*</span>\n }\n </label>\n }\n <small\n *ngIf=\"ocError\"\n class=\"error-msg\"\n >{{ ocError }}</small\n >\n <ng-content select=\"ocPrefix\"></ng-content>\n @if (ocHasDeleteButton && !ocDisabled) {\n <button\n class=\"oc-has-close-button oc suffix\"\n (click)=\"clearValue(); ocChange.emit(null)\"\n [disabled]=\"ocDisabled\"\n >\n <span class=\"material-symbols-outlined\">backspace</span>\n </button>\n }\n <ng-content select=\"ocSuffix\"></ng-content>\n</div>\n", styles: ["@charset \"UTF-8\";.shui-input-box.prefix .material-symbols-outlined{position:absolute;left:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.shui-input-box.suffix .material-symbols-outlined,.shui-input-box.suffix .oc.suffix{position:absolute;right:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.shui-input-box{position:relative;margin-top:.5rem}.shui-input-box select *{background-color:#f5f5f5}.shui-input-box label{position:absolute;left:0;top:0;padding:.5rem .7rem;font-size:.85rem;color:#000;pointer-events:none;transition:.3s ease;border-radius:.5rem;white-space:nowrap}.shui-input-box.prefix{z-index:5}.shui-input-box.prefix .material-symbols-outlined,.shui-input-box.prefix .oc.suffix{padding:.5rem .7rem}.shui-input-box.prefix input{padding-left:1.75rem}.shui-input-box.prefix label{padding:.7rem 2.5rem}.shui-input-box.suffix{z-index:5}.shui-input-box.suffix .material-symbols-outlined,.shui-input-box.suffix .oc.suffix{padding:.5rem .7rem}.shui-input-box.suffix input{padding-right:1.75rem}.shui-input-box.suffix label{padding:.7rem}.shui-input-box input,.shui-input-box textarea,.shui-input-box select{border-radius:0;font-size:1rem;background-color:#f5f5f5;border:none;outline:none;padding:1rem .9rem .2rem;width:100%;transition:.3s ease;color:#000;font-weight:400;height:41px;min-width:100%}.shui-input-box textarea{height:inherit;padding-top:20px}.shui-input-box input:not(:placeholder-shown)~label,.shui-input-box input:-webkit-autofill~label,.shui-input-box input:autofill~label,.shui-input-box input:focus~label,.shui-input-box textarea:not(:placeholder-shown)~label,.shui-input-box textarea:focus~label,.shui-input-box select:valid~label,.shui-input-box select:focus~label{transform:translate(.45rem);background-color:#f5f5f5;width:95%;padding:1px 7px 0;font-size:.7rem;font-weight:500}.shui-input-box input:focus~label,.shui-input-box input:-webkit-autofill~label,.shui-input-box input:autofill~label,.shui-input-box textarea:focus~label,.shui-input-box select:valid~label,.shui-input-box select:focus~label{color:#0169b2}.shui-input-box:before{display:block;content:\"\";position:absolute;bottom:0;height:1px;width:100%;background-color:#7d7d7d;transition:.4s ease;width:0;background-color:#0169b2}.shui-input-box:focus-within:before{width:100%}.shui-input-box.small input,.shui-input-box.small textarea,.shui-input-box.small select{max-height:36px;padding-top:1rem}.shui-input-box.small.prefix{z-index:5}.shui-input-box.small.prefix .material-symbols-outlined{padding:.35rem .7rem;font-size:1.25rem;color:#0169b2}.shui-input-box.small.prefix label{padding:.45rem 2.5rem}.shui-input-box.small.suffix{z-index:5}.shui-input-box.small.suffix .material-symbols-outlined{padding:.35rem .7rem;color:#0169b2}.shui-input-box.small.suffix label{padding:.45rem .7rem}.shui-input-box.large input,.shui-input-box.large textarea,.shui-input-box.large select{height:46px}.shui-input-box.large label{padding:1rem .7rem}.shui-input-box.large.prefix{z-index:5}.shui-input-box.large.prefix .material-symbols-outlined{padding:1rem .7rem}.shui-input-box.large.prefix input{padding-left:2.5rem}.shui-input-box.large.prefix label{padding:1.1rem 2.5rem}.shui-input-box.large.suffix{z-index:5}.shui-input-box.large.suffix .material-symbols-outlined{padding:.9rem .7rem}.shui-input-box.large.suffix input{padding-right:2.5rem}.shui-input-box.large.suffix label{padding:1.1rem .7rem}.error input,.error textarea,.error select{border:1px solid #e7001d;box-shadow:0 4px 6.1px #a1000014}.error:before{width:0!important}.shui .prefix .material-symbols-outlined{position:absolute;left:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.shui .suffix .material-symbols-outlined,.shui .suffix .oc.suffix{position:absolute;right:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.shui .oc-input-box{position:relative;margin-top:.5rem}.shui .oc-input-box select *{background-color:#f5f5f5}.shui .oc-input-box label{position:absolute;left:0;top:0;padding:.5rem .7rem;font-size:.85rem;color:#000;pointer-events:none;transition:.3s ease;border-radius:.5rem;white-space:nowrap}.shui .oc-input-box.prefix{z-index:5}.shui .oc-input-box.prefix .material-symbols-outlined,.shui .oc-input-box.prefix .oc.suffix{padding:.5rem .7rem}.shui .oc-input-box.prefix input{padding-left:1.75rem}.shui .oc-input-box.prefix label{padding:.7rem 2.5rem}.shui .oc-input-box.suffix{z-index:5}.shui .oc-input-box.suffix .material-symbols-outlined,.shui .oc-input-box.suffix .oc.suffix{padding:.5rem .7rem}.shui .oc-input-box.suffix input{padding-right:1.75rem}.shui .oc-input-box.suffix label{padding:.7rem}.shui .oc-input-box input,.shui .oc-input-box textarea,.shui .oc-input-box select{border-radius:0;font-size:1rem;background-color:#f5f5f5;border:none;outline:none;padding:1rem .9rem .2rem;width:100%;transition:.3s ease;color:#000;font-weight:400;height:41px;min-width:100%}.shui .oc-input-box textarea{height:inherit;padding-top:20px}.shui .oc-input-box input:not(:placeholder-shown)~label,.shui .oc-input-box input:-webkit-autofill~label,.shui .oc-input-box input:autofill~label,.shui .oc-input-box input:focus~label,.shui .oc-input-box textarea:not(:placeholder-shown)~label,.shui .oc-input-box textarea:focus~label,.shui .oc-input-box select:valid~label,.shui .oc-input-box select:focus~label{transform:translate(.45rem);background-color:#f5f5f5;width:95%;padding:1px 7px 0;font-size:.7rem;font-weight:500}.shui .oc-input-box input:focus~label,.shui .oc-input-box input:-webkit-autofill~label,.shui .oc-input-box input:autofill~label,.shui .oc-input-box textarea:focus~label,.shui .oc-input-box select:valid~label,.shui .oc-input-box select:focus~label{color:#0169b2}.shui .oc-input-box:before{display:block;content:\"\";position:absolute;bottom:0;height:1px;width:100%;background-color:#7d7d7d;transition:.4s ease;width:0;background-color:#0169b2}.shui .oc-input-box:focus-within:before{width:100%}.shui .oc-input-box.small input,.shui .oc-input-box.small textarea,.shui .oc-input-box.small select{max-height:36px;padding-top:1rem}.shui .oc-input-box.small.prefix{z-index:5}.shui .oc-input-box.small.prefix .material-symbols-outlined{padding:.35rem .7rem;font-size:1.25rem;color:#0169b2}.shui .oc-input-box.small.prefix label{padding:.45rem 2.5rem}.shui .oc-input-box.small.suffix{z-index:5}.shui .oc-input-box.small.suffix .material-symbols-outlined{padding:.35rem .7rem;color:#0169b2}.shui .oc-input-box.small.suffix label{padding:.45rem .7rem}.shui .oc-input-box.large input,.shui .oc-input-box.large textarea,.shui .oc-input-box.large select{height:46px}.shui .oc-input-box.large label{padding:1rem .7rem}.shui .oc-input-box.large.prefix{z-index:5}.shui .oc-input-box.large.prefix .material-symbols-outlined{padding:1rem .7rem}.shui .oc-input-box.large.prefix input{padding-left:2.5rem}.shui .oc-input-box.large.prefix label{padding:1.1rem 2.5rem}.shui .oc-input-box.large.suffix{z-index:5}.shui .oc-input-box.large.suffix .material-symbols-outlined{padding:.9rem .7rem}.shui .oc-input-box.large.suffix input{padding-right:2.5rem}.shui .oc-input-box.large.suffix label{padding:1.1rem .7rem}.shui .error input,.shui .error textarea,.shui .error select{border:1px solid #e7001d;box-shadow:0 4px 6.1px #a1000014}.shui .error:before{width:0!important}.shui .error small,.shui .error label{color:#ed3a3a!important;font-weight:600}.oc.suffix,.oc.prefix,.material-symbols-outlined,.shui .oc.suffix,.shui .oc.prefix,.shui .material-symbols-outlined{z-index:5!important}.oc-input-box.prefix .material-symbols-outlined{position:absolute;left:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.oc-input-box.suffix .material-symbols-outlined,.oc-input-box.suffix .oc.suffix{position:absolute;right:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.oc-input-box{position:relative;margin-top:.5rem}.oc-input-box select *{background-color:#f8f9ff}.oc-input-box label{position:absolute;left:0;top:0;padding:.5rem .7rem;font-size:.85rem;color:#8f9596;pointer-events:none;transition:.3s ease;border-radius:.5rem;white-space:nowrap}.oc-input-box label .oc.color.error{font-weight:700;margin-left:.2rem}.oc-input-box.prefix .material-symbols-outlined,.oc-input-box.prefix .oc.suffix{padding:.5rem .7rem}.oc-input-box.prefix input{padding-left:1.75rem}.oc-input-box.prefix label{padding:.7rem 2.5rem}.oc-input-box.suffix .material-symbols-outlined,.oc-input-box.suffix .oc.suffix{padding:.5rem .7rem}.oc-input-box.suffix input{padding-right:1.75rem}.oc-input-box.suffix label{padding:.7rem}.oc-input-box input,.oc-input-box textarea,.oc-input-box select{font-size:1rem;border-radius:.7rem;background-color:#f8f9ff;border:1px solid #d1d5db;outline:none;padding:.6rem .9rem;width:100%;transition:.3s ease;color:#7e8485;font-weight:500}.oc-input-box input:focus,.oc-input-box textarea:focus,.oc-input-box select:focus{border:1px solid #00dda3;box-shadow:0 4px 3.2px #00dda314}.oc-input-box input:not(:placeholder-shown)~label,.oc-input-box input:-webkit-autofill~label,.oc-input-box input:autofill~label,.oc-input-box input:focus~label,.oc-input-box textarea:not(:placeholder-shown)~label,.oc-input-box textarea:focus~label,.oc-input-box select:valid~label,.oc-input-box select:focus~label{transform:translateY(-.855rem) translate(.6rem);color:#1e0832;background-color:#f8f9ff;padding:1px 7px;font-weight:500}.error input,.error textarea,.error select{border:1px solid #ed3a3a;box-shadow:0 4px 6.1px #a1000014}.error small,.error label{color:#ed3a3a!important;font-weight:600}.oc-input-box.small input,.oc-input-box.small textarea,.oc-input-box.small select{padding:.3rem .7rem;border-radius:.5rem}.oc-input-box.small.prefix .material-symbols-outlined{padding:.35rem .7rem;font-size:1.25rem}.oc-input-box.small.prefix label{padding:.45rem 2.5rem}.oc-input-box.small.suffix .material-symbols-outlined{padding:.35rem .7rem}.oc-input-box.small.suffix label{padding:.45rem .7rem}.oc-input-box.small label{padding:.5rem .7rem}.oc-input-box.small input:focus~label,.oc-input-box.small input:not(:placeholder-shown)~label,.oc-input-box.small input:-webkit-autofill~label,.oc-input-box.small input:autofill~label,.oc-input-box.small textarea:focus~label,.oc-input-box.small textarea:not(:placeholder-shown)~label,.oc-input-box.small select:focus~label,.oc-input-box.small select:valid~label{transform:translateY(-.99rem) translate(.6rem);color:#7e8485;background-color:#fff;padding:1px 7px;font-weight:500}.oc-input-box.large input,.oc-input-box.large textarea,.oc-input-box.large select{padding:1rem;border-radius:1rem}.oc-input-box.large label,.oc-input-box.large.prefix .material-symbols-outlined{padding:1rem .7rem}.oc-input-box.large.prefix input{padding-left:2.5rem}.oc-input-box.large.prefix label{padding:1.1rem 2.5rem}.oc-input-box.large.suffix .material-symbols-outlined{padding:.9rem .7rem}.oc-input-box.large.suffix input{padding-right:2.5rem}.oc-input-box.large.suffix label{padding:1.1rem .7rem}.oc-input-box.large input:focus~label,.oc-input-box.large input:not(:placeholder-shown)~label,.oc-input-box.large input:-webkit-autofill~label,.oc-input-box.large input:autofill~label,.oc-input-box.large textarea:focus~label,.oc-input-box.large textarea:not(:placeholder-shown)~label,.oc-input-box.large select:focus~label,.oc-input-box.large select:valid~label{transform:translateY(-.77rem) translate(.6rem);color:#7e8485;background-color:#fff;padding:1px 7px;font-weight:500}.oc-input-box{position:relative}.cdk-overlay-transparent-backdrop{background:none}.cdk-overlay-connected-position-bounding-box{max-width:90vw!important;left:auto!important;top:auto!important}.cdk-overlay-pane{max-width:90vw!important}.oc-has-close-button-input{padding-right:60px}.oc-has-close-button{display:flex;justify-content:center;align-items:center;position:absolute;right:.5rem!important;top:8%;height:84%;width:2.2rem;border:2px solid transparent;border-radius:.5rem;background-color:transparent;padding:0!important;transition:border-color .2s ease,box-shadow .2s ease}.oc-has-close-button:hover{border:2px solid #8f9596;box-shadow:0 4px 8.7px #00000021;cursor:pointer}.oc-has-close-button span{padding:0!important;margin:.3rem}.oc-counter-select{display:flex;gap:.2rem;align-items:center;float:right;max-height:30px}.oc-counter-select .counter{font-size:.9rem;color:#5505a2;font-weight:600;margin:0;padding:0}.oc-counter-select button{display:flex;justify-content:center;align-items:center;text-align:center;max-width:20px}.oc-counter-select .subtract span,.oc-counter-select .add span{font-size:1rem;font-weight:600;text-align:center}.oc-counter-select span{transition:.2s ease}.oc-counter-select .subtract:hover span{color:#ed3a3a!important}.oc-counter-select .add:hover span{color:#00dda3!important}.shui-option-box .oc-counter-select .counter{color:#0169b2}.no-options{padding:.6rem!important;color:#8f9596}.oc-options.loader{display:flex;align-items:center;justify-content:center}.oc-options.loader span{width:24px;margin:3rem;color:#5505a2}.loading{animation:spinLoad .5s linear infinite}.semantic-input{display:inline-block;width:100%;padding:10px 12px;font-size:14px;line-height:1.5;color:#333;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 1px 2px #22242626;transition:border-color .2s ease,box-shadow .2s ease}.semantic-input:hover{border-color:#b3b3b3}.semantic-input:focus{border-color:#85b7d9;box-shadow:0 0 0 2px #22242626;outline:none}.semantic-input:disabled{background-color:#f9f9f9;color:#b3b3b3;border-color:#ddd;cursor:not-allowed}.oc-input-box.multiple-select{position:relative}.oc-input-box.multiple-select input{padding-left:.9rem;text-indent:0}.oc-input-box.multiple-select.small input{padding-left:.7rem}.oc-input-box.multiple-select.large input{padding-left:1rem}.oc-input-box.multiple-select input.has-chips~label{transform:translateY(-.855rem) translate(.6rem);color:#1e0832;background-color:#f8f9ff;padding:1px 7px;font-weight:500}.oc-input-box.multiple-select.shui input.has-chips~label,.oc-input-box.multiple-select.shui-input-box input.has-chips~label{transform:translate(.45rem);background-color:#f5f5f5;width:95%;padding:1px 7px 0;font-size:.7rem;font-weight:500;color:#0169b2}.oc-chips-container{position:absolute;left:.9rem;top:50%;transform:translateY(-50%);display:flex;flex-wrap:nowrap;gap:.1rem;align-items:center;pointer-events:none;max-width:calc(100% - 1.8rem);overflow:hidden}.oc-chips-container oc-chip{cursor:pointer;pointer-events:auto;flex-shrink:0}.oc-chips-container oc-chip p{font-size:12px!important;margin:0;padding:0}.oc-chips-container oc-chip:hover{opacity:.8}.oc-chips-container oc-chip.oc-more-chip{cursor:default;pointer-events:auto}.oc-chips-container oc-chip.oc-more-chip p{font-weight:600;color:#7e8485}.oc-input-box.multiple-select .oc-chips-container~input{padding-left:calc(.9rem + var(--chips-width, 0px))}@keyframes spinLoad{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: OcChipComponent, selector: "oc-chip", inputs: ["ocSelected", "ocType", "ocBg", "ocBgHexColor", "ocTextHexColor", "ocText", "ocFontSize", "ocLeftIcon", "ocLeftIconFilled", "ocLoading"], outputs: ["ocClick", "ocRemove"] }, { kind: "directive", type: OcTooltipDirective, selector: "[ocTooltip]", inputs: ["content", "side"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1901
1924
|
}
|
|
1902
1925
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcAutocompleteComponent, decorators: [{
|
|
1903
1926
|
type: Component,
|
|
@@ -2277,8 +2300,9 @@ class OcDateSelectComponent {
|
|
|
2277
2300
|
this.ocChange.emit(this.ocValue); // evento custom
|
|
2278
2301
|
}
|
|
2279
2302
|
increaseDate() {
|
|
2280
|
-
const date =
|
|
2303
|
+
const date = this.parseValueAsLocalDate(this.ocValue);
|
|
2281
2304
|
if (this.ocSkipType === 'month') {
|
|
2305
|
+
date.setDate(1);
|
|
2282
2306
|
date.setMonth(date.getMonth() + 1);
|
|
2283
2307
|
}
|
|
2284
2308
|
else if (this.ocSkipType === 'week') {
|
|
@@ -2287,11 +2311,12 @@ class OcDateSelectComponent {
|
|
|
2287
2311
|
else {
|
|
2288
2312
|
date.setDate(date.getDate() + 1);
|
|
2289
2313
|
}
|
|
2290
|
-
this.updateValue(
|
|
2314
|
+
this.updateValue(this.formatLocalDate(date));
|
|
2291
2315
|
}
|
|
2292
2316
|
decreaseDate() {
|
|
2293
|
-
const date =
|
|
2317
|
+
const date = this.parseValueAsLocalDate(this.ocValue);
|
|
2294
2318
|
if (this.ocSkipType === 'month') {
|
|
2319
|
+
date.setDate(1);
|
|
2295
2320
|
date.setMonth(date.getMonth() - 1);
|
|
2296
2321
|
}
|
|
2297
2322
|
else if (this.ocSkipType === 'week') {
|
|
@@ -2300,7 +2325,17 @@ class OcDateSelectComponent {
|
|
|
2300
2325
|
else {
|
|
2301
2326
|
date.setDate(date.getDate() - 1);
|
|
2302
2327
|
}
|
|
2303
|
-
this.updateValue(
|
|
2328
|
+
this.updateValue(this.formatLocalDate(date));
|
|
2329
|
+
}
|
|
2330
|
+
parseValueAsLocalDate(value) {
|
|
2331
|
+
const [year, month, day] = value.split('-').map(Number);
|
|
2332
|
+
return new Date(year, (month || 1) - 1, day || 1);
|
|
2333
|
+
}
|
|
2334
|
+
formatLocalDate(date) {
|
|
2335
|
+
const yyyy = date.getFullYear();
|
|
2336
|
+
const mm = String(date.getMonth() + 1).padStart(2, '0');
|
|
2337
|
+
const dd = String(date.getDate()).padStart(2, '0');
|
|
2338
|
+
return `${yyyy}-${mm}-${dd}`;
|
|
2304
2339
|
}
|
|
2305
2340
|
startHold(direction) {
|
|
2306
2341
|
this.stopHold();
|
|
@@ -2793,20 +2828,20 @@ class OcDropdownService {
|
|
|
2793
2828
|
this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
|
|
2794
2829
|
this.renderer = this.rendererFactory.createRenderer(null, null);
|
|
2795
2830
|
}
|
|
2796
|
-
toggle(triggerElement, template, viewContainerRef) {
|
|
2831
|
+
toggle(triggerElement, template, viewContainerRef, align = 'start') {
|
|
2797
2832
|
if (this.isOpen()) {
|
|
2798
2833
|
this.close();
|
|
2799
2834
|
}
|
|
2800
2835
|
else {
|
|
2801
|
-
this.open(triggerElement, template, viewContainerRef);
|
|
2836
|
+
this.open(triggerElement, template, viewContainerRef, align);
|
|
2802
2837
|
}
|
|
2803
2838
|
}
|
|
2804
|
-
open(triggerElement, template, viewContainerRef) {
|
|
2839
|
+
open(triggerElement, template, viewContainerRef, align) {
|
|
2805
2840
|
if (this.isOpen()) {
|
|
2806
2841
|
this.close();
|
|
2807
2842
|
}
|
|
2808
2843
|
this.triggerElement = triggerElement;
|
|
2809
|
-
this.createOverlay(triggerElement);
|
|
2844
|
+
this.createOverlay(triggerElement, align);
|
|
2810
2845
|
if (!this.overlayRef) {
|
|
2811
2846
|
return;
|
|
2812
2847
|
}
|
|
@@ -2841,7 +2876,7 @@ class OcDropdownService {
|
|
|
2841
2876
|
this.close();
|
|
2842
2877
|
return trigger;
|
|
2843
2878
|
}
|
|
2844
|
-
createOverlay(triggerElement) {
|
|
2879
|
+
createOverlay(triggerElement, align) {
|
|
2845
2880
|
if (this.overlayRef) {
|
|
2846
2881
|
this.destroyOverlay();
|
|
2847
2882
|
}
|
|
@@ -2849,16 +2884,16 @@ class OcDropdownService {
|
|
|
2849
2884
|
.flexibleConnectedTo(triggerElement)
|
|
2850
2885
|
.withPositions([
|
|
2851
2886
|
{
|
|
2852
|
-
originX:
|
|
2887
|
+
originX: align,
|
|
2853
2888
|
originY: 'bottom',
|
|
2854
|
-
overlayX:
|
|
2889
|
+
overlayX: align,
|
|
2855
2890
|
overlayY: 'top',
|
|
2856
2891
|
offsetY: 4,
|
|
2857
2892
|
},
|
|
2858
2893
|
{
|
|
2859
|
-
originX:
|
|
2894
|
+
originX: align,
|
|
2860
2895
|
originY: 'top',
|
|
2861
|
-
overlayX:
|
|
2896
|
+
overlayX: align,
|
|
2862
2897
|
overlayY: 'bottom',
|
|
2863
2898
|
offsetY: -4,
|
|
2864
2899
|
},
|
|
@@ -2990,6 +3025,7 @@ class OcDropdownDirective {
|
|
|
2990
3025
|
this.ocDropdownMenu = input(...(ngDevMode ? [undefined, { debugName: "ocDropdownMenu" }] : []));
|
|
2991
3026
|
this.ocTrigger = input('click', ...(ngDevMode ? [{ debugName: "ocTrigger" }] : []));
|
|
2992
3027
|
this.ocDisabled = input(false, ...(ngDevMode ? [{ debugName: "ocDisabled" }] : []));
|
|
3028
|
+
this.ocAlign = input('start', ...(ngDevMode ? [{ debugName: "ocAlign" }] : []));
|
|
2993
3029
|
}
|
|
2994
3030
|
ngOnInit() {
|
|
2995
3031
|
const element = this.elementRef.nativeElement;
|
|
@@ -3034,7 +3070,7 @@ class OcDropdownDirective {
|
|
|
3034
3070
|
}
|
|
3035
3071
|
const menuContent = this.ocDropdownMenu();
|
|
3036
3072
|
if (menuContent) {
|
|
3037
|
-
this.dropdownService.toggle(this.elementRef, menuContent.contentTemplate(), this.viewContainerRef);
|
|
3073
|
+
this.dropdownService.toggle(this.elementRef, menuContent.contentTemplate(), this.viewContainerRef, this.ocAlign());
|
|
3038
3074
|
}
|
|
3039
3075
|
}
|
|
3040
3076
|
openDropdown() {
|
|
@@ -3043,14 +3079,14 @@ class OcDropdownDirective {
|
|
|
3043
3079
|
}
|
|
3044
3080
|
const menuContent = this.ocDropdownMenu();
|
|
3045
3081
|
if (menuContent && !this.dropdownService.isOpen()) {
|
|
3046
|
-
this.dropdownService.toggle(this.elementRef, menuContent.contentTemplate(), this.viewContainerRef);
|
|
3082
|
+
this.dropdownService.toggle(this.elementRef, menuContent.contentTemplate(), this.viewContainerRef, this.ocAlign());
|
|
3047
3083
|
}
|
|
3048
3084
|
}
|
|
3049
3085
|
closeDropdown() {
|
|
3050
3086
|
this.dropdownService.close();
|
|
3051
3087
|
}
|
|
3052
3088
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcDropdownDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3053
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: OcDropdownDirective, isStandalone: true, selector: "[oc-dropdown], [ocDropdown]", inputs: { ocDropdownMenu: { classPropertyName: "ocDropdownMenu", publicName: "ocDropdownMenu", isSignal: true, isRequired: false, transformFunction: null }, ocTrigger: { classPropertyName: "ocTrigger", publicName: "ocTrigger", isSignal: true, isRequired: false, transformFunction: null }, ocDisabled: { classPropertyName: "ocDisabled", publicName: "ocDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)", "mouseenter": "onHoverToggle($event)", "mouseleave": "onHoverToggle($event)", "keydown": "onKeydown($event)" }, properties: { "attr.tabindex": "0", "attr.role": "\"button\"", "attr.aria-haspopup": "\"menu\"", "attr.aria-expanded": "isThisDropdownOpen()", "attr.aria-disabled": "ocDisabled()" } }, exportAs: ["ocDropdown"], ngImport: i0 }); }
|
|
3089
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: OcDropdownDirective, isStandalone: true, selector: "[oc-dropdown], [ocDropdown]", inputs: { ocDropdownMenu: { classPropertyName: "ocDropdownMenu", publicName: "ocDropdownMenu", isSignal: true, isRequired: false, transformFunction: null }, ocTrigger: { classPropertyName: "ocTrigger", publicName: "ocTrigger", isSignal: true, isRequired: false, transformFunction: null }, ocDisabled: { classPropertyName: "ocDisabled", publicName: "ocDisabled", isSignal: true, isRequired: false, transformFunction: null }, ocAlign: { classPropertyName: "ocAlign", publicName: "ocAlign", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)", "mouseenter": "onHoverToggle($event)", "mouseleave": "onHoverToggle($event)", "keydown": "onKeydown($event)" }, properties: { "attr.tabindex": "0", "attr.role": "\"button\"", "attr.aria-haspopup": "\"menu\"", "attr.aria-expanded": "isThisDropdownOpen()", "attr.aria-disabled": "ocDisabled()" } }, exportAs: ["ocDropdown"], ngImport: i0 }); }
|
|
3054
3090
|
}
|
|
3055
3091
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcDropdownDirective, decorators: [{
|
|
3056
3092
|
type: Directive,
|
|
@@ -3069,7 +3105,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
|
|
|
3069
3105
|
},
|
|
3070
3106
|
exportAs: 'ocDropdown',
|
|
3071
3107
|
}]
|
|
3072
|
-
}], propDecorators: { ocDropdownMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "ocDropdownMenu", required: false }] }], ocTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "ocTrigger", required: false }] }], ocDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ocDisabled", required: false }] }] } });
|
|
3108
|
+
}], propDecorators: { ocDropdownMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "ocDropdownMenu", required: false }] }], ocTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "ocTrigger", required: false }] }], ocDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ocDisabled", required: false }] }], ocAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "ocAlign", required: false }] }] } });
|
|
3073
3109
|
|
|
3074
3110
|
class OcDropdownMenuContentComponent {
|
|
3075
3111
|
constructor() {
|
|
@@ -4226,7 +4262,7 @@ class OcTableComponent {
|
|
|
4226
4262
|
return !!Object.keys(column).length;
|
|
4227
4263
|
}
|
|
4228
4264
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4229
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: OcTableComponent, isStandalone: true, selector: "oc-table", inputs: { ocData: "ocData", ocPage: "ocPage", ocMaxPage: "ocMaxPage", ocPerPage: "ocPerPage" }, outputs: { ocGetPage: "ocGetPage", ocSelect: "ocSelect" }, ngImport: i0, template: "<table class=\"oc table\" cdk-table [dataSource]=\"ocData\">\n\n <ng-container *ngFor=\"let column of columns; let i = index\" [cdkColumnDef]=\"column\">\n <!-- Table Columns -->\n <th cdk-header-cell *cdkHeaderCellDef>\n @if(!column.includes('oc ')) {\n {{column}}\n } @else {\n @if (ocSelect && i === 0) {\n <oc-checkbox ocBorderColor=\"gray\" />\n }\n }\n </th>\n\n <td cdk-cell *cdkCellDef=\"let row\" [ngStyle]=\"{\n 'width': (\n column === 'oc select' ? '20px' : \n row[keys[i]]?.width || 'inherit'\n )\n }\">\n\n @if (!column.includes('oc ')) {\n @if (isObject(row[keys[i]])) {\n @if (!row[keys[i]].component) {\n {{row[keys[i]].value}}\n } @else {\n\n @if(row[keys[i]].component.name === 'oc-chip') {\n <oc-chip [ocType]=\"row[keys[i]].component.ocType\" [ocBg]=\"row[keys[i]].component.ocBg\">\n {{row[keys[i]].value}}\n </oc-chip>\n }\n }\n } @else {\n {{row[keys[i]] || ''}}\n }\n } @else {\n\n @if(column === 'oc select') {\n <oc-checkbox ocBorderColor=\"gray\"></oc-checkbox>\n }@else if (column === 'oc actions') {\n <div class=\"button-row\">\n @for (action of row.oc_actions; track $index) {\n <button class=\"oc button icon tiny gray-1\" (click)=\"action.callback()\">\n <span class=\"material-symbols-outlined oc color\" [ngClass]=\"{\n error: action.icon === 'delete'\n }\">{{action.icon}}</span>\n </button>\n }\n </div>\n }\n }\n </td>\n </ng-container>\n\n <tr cdk-header-row *cdkHeaderRowDef=\"columns\"></tr>\n <tr cdk-row *cdkRowDef=\"let row; columns: columns\"></tr>\n</table>\n\n@if (ocPage) {\n<oc-pagination [ocPage]=\"ocPage\" [ocMaxPage]=\"ocMaxPage\" (ocGetPage)=\"ocGetPage.emit()\" />\n}", styles: [".shui .oc.table,.shui.oc.table{width:100%;border-collapse:collapse;margin:20px 0;font-size:1em;font-family:Arial,sans-serif}.shui .oc.table thead,.shui.oc.table thead{min-height:50px;height:50px}.shui .oc.table tr,.shui.oc.table tr{background-color:#fff;transition:.1s ease;border:none;border-top:0;border-bottom:0}.shui .oc.table tr:hover,.shui.oc.table tr:hover{background-color:#f5f5f54d!important}.shui .oc.table th,.shui .oc.table td,.shui.oc.table th,.shui.oc.table td{padding:15px;text-align:left}.shui .oc.table th,.shui.oc.table th{background-color:transparent;border-bottom:1px solid rgba(125,125,125,.75);color:#000;font-weight:600;padding:12px 15px}.shui .oc.table td,.shui.oc.table td{border-bottom:1px solid rgba(200,200,200,.5);font-size:.9rem}.shui .oc.table.striped tr:nth-child(2n),.shui.oc.table.striped tr:nth-child(2n){background-color:#fff}.oc.table{width:100%;border-collapse:separate;border-spacing:0;margin:20px 0;font-size:.95rem;font-family:inherit;color:#353535;background-color:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px #1e08320f;border:1px solid #f7f7f7}.oc.table tr{background-color:#fff;transition:background-color .15s ease,opacity .15s ease}.oc.table.refreshing tr{opacity:.35!important;animation:refreshing 1.3s ease-in-out infinite;animation-fill-mode:both}.oc.table.refreshing tr:nth-child(1){animation-delay:0s}.oc.table.refreshing tr:nth-child(2){animation-delay:.2s}.oc.table.refreshing tr:nth-child(3){animation-delay:.4s}.oc.table.refreshing tr:nth-child(4){animation-delay:.6s}.oc.table.refreshing tr:nth-child(5){animation-delay:.8s}.oc.table.refreshing tr:nth-child(6){animation-delay:1s}.oc.table.refreshing tr:nth-child(7){animation-delay:1.2s}.oc.table.refreshing tr:nth-child(8){animation-delay:1.4s}.oc.table.refreshing tr:nth-child(9){animation-delay:1.6s}.oc.table.refreshing tr:nth-child(10){animation-delay:1.8s}.oc.table th,.oc.table td{padding:14px 18px;text-align:left;vertical-align:middle}.oc.table th{background-color:#f8f9ff;color:#5505a2;font-weight:600;border-bottom:1px solid #f7f7f7}.oc.table tbody td{border-bottom:1px solid #f7f7f7}.oc.table tbody tr:last-child td{border-bottom:0}.oc.table tbody tr:hover{background-color:#5505a20a}.oc.table.striped tbody tr:nth-child(2n){background-color:#f8f9ff99}.oc.table.bordered th+th,.oc.table.bordered td+td{border-left:1px solid #f7f7f7}.oc.table.rounded{border-radius:12px}.oc.table tr.oc-table-row.clickable{cursor:pointer}.oc.table tr.oc-table-row.clickable:focus-visible{outline:2px solid #5505a2;outline-offset:-2px}.oc-table-expand-indicator{opacity:.4;transition:opacity .15s ease;vertical-align:middle}.oc.table tr.oc-table-row.expandable:hover .oc-table-expand-indicator,.oc.table tr.oc-table-row.expandable:focus-visible .oc-table-expand-indicator,.oc.table tr.oc-table-row.expandable.expanded .oc-table-expand-indicator{opacity:1}.oc.table tr.oc-table-row-detail{display:none;background-color:#5505a208}.oc.table tr.oc-table-row-detail.expanded{display:table-row}.oc.table tr.oc-table-row-detail td{padding:16px 24px;border-bottom:1px solid #f7f7f7;border-top:1px solid #f7f7f7;color:#353535}.button-row{display:flex;justify-content:flex-end;gap:.75rem}@media (max-width: 1024px){.oc.table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(85,5,162,.25) transparent}.oc.table>thead{display:table-header-group}.oc.table>tbody{display:table-row-group}.oc.table>tfoot{display:table-footer-group}.oc.table::-webkit-scrollbar{height:8px}.oc.table::-webkit-scrollbar-track{background:transparent}.oc.table::-webkit-scrollbar-thumb{background:#5505a233;border-radius:4px}.oc.table::-webkit-scrollbar-thumb:hover{background:#5505a266}.oc.table th,.oc.table td{padding:12px 14px;white-space:nowrap}}@media (max-width: 600px){.oc.table{font-size:.875rem;border-radius:8px}.oc.table th{font-size:.75rem}.oc.table th,.oc.table td{padding:10px 12px}.oc.table tr.oc-table-row-detail td{padding:12px 14px;white-space:normal}}@keyframes refreshing{0%{opacity:.35}50%{opacity:.55}to{opacity:.35}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: CdkTableModule }, { kind: "component", type: i2$3.CdkTable, selector: "cdk-table, table[cdk-table]", inputs: ["trackBy", "dataSource", "multiTemplateDataRows", "fixedLayout"], outputs: ["contentChanged"], exportAs: ["cdkTable"] }, { kind: "directive", type: i2$3.CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }, { kind: "directive", type: i2$3.CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: i2$3.CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { kind: "directive", type: i2$3.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "directive", type: i2$3.CdkCell, selector: "cdk-cell, td[cdk-cell]" }, { kind: "component", type: i2$3.CdkRow, selector: "cdk-row, tr[cdk-row]" }, { kind: "directive", type: i2$3.CdkHeaderCell, selector: "cdk-header-cell, th[cdk-header-cell]" }, { kind: "component", type: i2$3.CdkHeaderRow, selector: "cdk-header-row, tr[cdk-header-row]" }, { kind: "directive", type: i2$3.CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { kind: "component", type: OcCheckboxComponent, selector: "oc-checkbox", inputs: ["ocChecked", "ocSize", "ocLabel", "ocName", "ocColor", "ocBorderColor", "ocStyle", "formControl", "ocTabIndex", "disableDoubleClickCheck", "ocDisabled"], outputs: ["ocChange", "ocCheckedChange", "ocDoubleClick"] }, { kind: "component", type: OcPaginationComponent, selector: "oc-pagination", inputs: ["ocPage", "ocMaxPage", "ocStyle", "ocItemName"], outputs: ["ocGetPage"] }, { kind: "component", type: OcChipComponent, selector: "oc-chip", inputs: ["ocSelected", "ocType", "ocBg", "ocBgHexColor", "ocTextHexColor", "ocText", "ocFontSize"], outputs: ["ocClick", "ocRemove"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
4265
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: OcTableComponent, isStandalone: true, selector: "oc-table", inputs: { ocData: "ocData", ocPage: "ocPage", ocMaxPage: "ocMaxPage", ocPerPage: "ocPerPage" }, outputs: { ocGetPage: "ocGetPage", ocSelect: "ocSelect" }, ngImport: i0, template: "<table class=\"oc table\" cdk-table [dataSource]=\"ocData\">\n\n <ng-container *ngFor=\"let column of columns; let i = index\" [cdkColumnDef]=\"column\">\n <!-- Table Columns -->\n <th cdk-header-cell *cdkHeaderCellDef>\n @if(!column.includes('oc ')) {\n {{column}}\n } @else {\n @if (ocSelect && i === 0) {\n <oc-checkbox ocBorderColor=\"gray\" />\n }\n }\n </th>\n\n <td cdk-cell *cdkCellDef=\"let row\" [ngStyle]=\"{\n 'width': (\n column === 'oc select' ? '20px' : \n row[keys[i]]?.width || 'inherit'\n )\n }\">\n\n @if (!column.includes('oc ')) {\n @if (isObject(row[keys[i]])) {\n @if (!row[keys[i]].component) {\n {{row[keys[i]].value}}\n } @else {\n\n @if(row[keys[i]].component.name === 'oc-chip') {\n <oc-chip [ocType]=\"row[keys[i]].component.ocType\" [ocBg]=\"row[keys[i]].component.ocBg\">\n {{row[keys[i]].value}}\n </oc-chip>\n }\n }\n } @else {\n {{row[keys[i]] || ''}}\n }\n } @else {\n\n @if(column === 'oc select') {\n <oc-checkbox ocBorderColor=\"gray\"></oc-checkbox>\n }@else if (column === 'oc actions') {\n <div class=\"button-row\">\n @for (action of row.oc_actions; track $index) {\n <button class=\"oc button icon tiny gray-1\" (click)=\"action.callback()\">\n <span class=\"material-symbols-outlined oc color\" [ngClass]=\"{\n error: action.icon === 'delete'\n }\">{{action.icon}}</span>\n </button>\n }\n </div>\n }\n }\n </td>\n </ng-container>\n\n <tr cdk-header-row *cdkHeaderRowDef=\"columns\"></tr>\n <tr cdk-row *cdkRowDef=\"let row; columns: columns\"></tr>\n</table>\n\n@if (ocPage) {\n<oc-pagination [ocPage]=\"ocPage\" [ocMaxPage]=\"ocMaxPage\" (ocGetPage)=\"ocGetPage.emit()\" />\n}", styles: [".shui .oc.table,.shui.oc.table{width:100%;border-collapse:collapse;margin:20px 0;font-size:1em;font-family:Arial,sans-serif}.shui .oc.table thead,.shui.oc.table thead{min-height:50px;height:50px}.shui .oc.table tr,.shui.oc.table tr{background-color:#fff;transition:.1s ease;border:none;border-top:0;border-bottom:0}.shui .oc.table tr:hover,.shui.oc.table tr:hover{background-color:#f5f5f54d!important}.shui .oc.table th,.shui .oc.table td,.shui.oc.table th,.shui.oc.table td{padding:15px;text-align:left}.shui .oc.table th,.shui.oc.table th{background-color:transparent;border-bottom:1px solid rgba(125,125,125,.75);color:#000;font-weight:600;padding:12px 15px}.shui .oc.table td,.shui.oc.table td{border-bottom:1px solid rgba(200,200,200,.5);font-size:.9rem}.shui .oc.table.striped tr:nth-child(2n),.shui.oc.table.striped tr:nth-child(2n){background-color:#fff}.oc.table{width:100%;border-collapse:separate;border-spacing:0;margin:20px 0;font-size:.95rem;font-family:inherit;color:#353535;background-color:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px #1e08320f;border:1px solid #f7f7f7}.oc.table tr{background-color:#fff;transition:background-color .15s ease,opacity .15s ease}.oc.table.refreshing tr{opacity:.35!important;animation:refreshing 1.3s ease-in-out infinite;animation-fill-mode:both}.oc.table.refreshing tr:nth-child(1){animation-delay:0s}.oc.table.refreshing tr:nth-child(2){animation-delay:.2s}.oc.table.refreshing tr:nth-child(3){animation-delay:.4s}.oc.table.refreshing tr:nth-child(4){animation-delay:.6s}.oc.table.refreshing tr:nth-child(5){animation-delay:.8s}.oc.table.refreshing tr:nth-child(6){animation-delay:1s}.oc.table.refreshing tr:nth-child(7){animation-delay:1.2s}.oc.table.refreshing tr:nth-child(8){animation-delay:1.4s}.oc.table.refreshing tr:nth-child(9){animation-delay:1.6s}.oc.table.refreshing tr:nth-child(10){animation-delay:1.8s}.oc.table th,.oc.table td{padding:14px 18px;text-align:left;vertical-align:middle}.oc.table th{background-color:#f8f9ff;color:#5505a2;font-weight:600;border-bottom:1px solid #f7f7f7}.oc.table tbody td{border-bottom:1px solid #f7f7f7}.oc.table tbody tr:last-child td{border-bottom:0}.oc.table tbody tr:hover{background-color:#5505a20a}.oc.table.striped tbody tr:nth-child(2n){background-color:#f8f9ff99}.oc.table.bordered th+th,.oc.table.bordered td+td{border-left:1px solid #f7f7f7}.oc.table.rounded{border-radius:12px}.oc.table tr.oc-table-row.clickable{cursor:pointer}.oc.table tr.oc-table-row.clickable:focus-visible{outline:2px solid #5505a2;outline-offset:-2px}.oc-table-expand-indicator{opacity:.4;transition:opacity .15s ease;vertical-align:middle}.oc.table tr.oc-table-row.expandable:hover .oc-table-expand-indicator,.oc.table tr.oc-table-row.expandable:focus-visible .oc-table-expand-indicator,.oc.table tr.oc-table-row.expandable.expanded .oc-table-expand-indicator{opacity:1}.oc.table tr.oc-table-row-detail{display:none;background-color:#5505a208}.oc.table tr.oc-table-row-detail.expanded{display:table-row}.oc.table tr.oc-table-row-detail td{padding:16px 24px;border-bottom:1px solid #f7f7f7;border-top:1px solid #f7f7f7;color:#353535}.button-row{display:flex;justify-content:flex-end;gap:.75rem}@media (max-width: 1024px){.oc.table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(85,5,162,.25) transparent}.oc.table>thead{display:table-header-group}.oc.table>tbody{display:table-row-group}.oc.table>tfoot{display:table-footer-group}.oc.table::-webkit-scrollbar{height:8px}.oc.table::-webkit-scrollbar-track{background:transparent}.oc.table::-webkit-scrollbar-thumb{background:#5505a233;border-radius:4px}.oc.table::-webkit-scrollbar-thumb:hover{background:#5505a266}.oc.table th,.oc.table td{padding:12px 14px;white-space:nowrap}}@media (max-width: 600px){.oc.table{font-size:.875rem;border-radius:8px}.oc.table th{font-size:.75rem}.oc.table th,.oc.table td{padding:10px 12px}.oc.table tr.oc-table-row-detail td{padding:12px 14px;white-space:normal}}@keyframes refreshing{0%{opacity:.35}50%{opacity:.55}to{opacity:.35}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: CdkTableModule }, { kind: "component", type: i2$3.CdkTable, selector: "cdk-table, table[cdk-table]", inputs: ["trackBy", "dataSource", "multiTemplateDataRows", "fixedLayout"], outputs: ["contentChanged"], exportAs: ["cdkTable"] }, { kind: "directive", type: i2$3.CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }, { kind: "directive", type: i2$3.CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: i2$3.CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { kind: "directive", type: i2$3.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "directive", type: i2$3.CdkCell, selector: "cdk-cell, td[cdk-cell]" }, { kind: "component", type: i2$3.CdkRow, selector: "cdk-row, tr[cdk-row]" }, { kind: "directive", type: i2$3.CdkHeaderCell, selector: "cdk-header-cell, th[cdk-header-cell]" }, { kind: "component", type: i2$3.CdkHeaderRow, selector: "cdk-header-row, tr[cdk-header-row]" }, { kind: "directive", type: i2$3.CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { kind: "component", type: OcCheckboxComponent, selector: "oc-checkbox", inputs: ["ocChecked", "ocSize", "ocLabel", "ocName", "ocColor", "ocBorderColor", "ocStyle", "formControl", "ocTabIndex", "disableDoubleClickCheck", "ocDisabled"], outputs: ["ocChange", "ocCheckedChange", "ocDoubleClick"] }, { kind: "component", type: OcPaginationComponent, selector: "oc-pagination", inputs: ["ocPage", "ocMaxPage", "ocStyle", "ocItemName"], outputs: ["ocGetPage"] }, { kind: "component", type: OcChipComponent, selector: "oc-chip", inputs: ["ocSelected", "ocType", "ocBg", "ocBgHexColor", "ocTextHexColor", "ocText", "ocFontSize", "ocLeftIcon", "ocLeftIconFilled", "ocLoading"], outputs: ["ocClick", "ocRemove"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
4230
4266
|
}
|
|
4231
4267
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcTableComponent, decorators: [{
|
|
4232
4268
|
type: Component,
|