otimus-library 0.4.87 → 0.4.89
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 +98 -29
- package/fesm2022/otimus-library.mjs.map +1 -1
- package/index.d.ts +26 -5
- 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,
|
|
@@ -2040,11 +2063,11 @@ class OcBreadcrumbComponent {
|
|
|
2040
2063
|
this.ocCrumbClick.emit(item);
|
|
2041
2064
|
}
|
|
2042
2065
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2043
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: OcBreadcrumbComponent, isStandalone: true, selector: "oc-breadcrumb", inputs: { ocItems: "ocItems" }, outputs: { ocCrumbClick: "ocCrumbClick" }, ngImport: i0, template: "<nav\n class=\"oc-breadcrumb\"\n aria-label=\"breadcrumb\"\n>\n <ol class=\"oc-breadcrumb-list\">\n @for (item of ocItems; track $index; let i = $index) {\n @let last = isLast(i);\n <li\n class=\"oc-breadcrumb-item\"\n [class.is-last]=\"last\"\n >\n @if (last || !item.route) {\n <span\n class=\"oc-breadcrumb-crumb\"\n [class.is-last]=\"last\"\n [attr.aria-current]=\"last ? 'page' : null\"\n >\n @if (item.icon) {\n <span class=\"material-symbols-outlined oc-breadcrumb-icon\">{{ item.icon }}</span>\n }\n <span class=\"oc-breadcrumb-label\">{{ item.label }}</span>\n </span>\n } @else {\n <a\n class=\"oc-breadcrumb-crumb\"\n [routerLink]=\"item.route\"\n [queryParams]=\"item.queryParams\"\n (click)=\"onCrumbClick($event, item, last)\"\n >\n @if (item.icon) {\n <span class=\"material-symbols-outlined oc-breadcrumb-icon\">{{ item.icon }}</span>\n }\n <span class=\"oc-breadcrumb-label\">{{ item.label }}</span>\n </a>\n }\n\n @if (!last) {\n <span\n class=\"material-symbols-outlined oc-breadcrumb-separator\"\n aria-hidden=\"true\"\n >keyboard_arrow_right</span\n >\n }\n </li>\n }\n </ol>\n</nav>\n", styles: [":host{display:block}.oc-breadcrumb{display:block;width:100%}.oc-breadcrumb-list{display:flex;flex-wrap:wrap;align-items:center;gap:2px;list-style:none;margin:0;padding:0}.oc-breadcrumb-item{display:inline-flex;align-items:center;gap:2px;min-width:0}.oc-breadcrumb-crumb{display:inline-flex;align-items:center;gap:4px;padding:4px 6px;border-radius:6px;color:#8f9596;font-size:.875rem;font-weight:400;line-height:1.2;text-decoration:none;transition:background-color .18s ease,color .18s ease}a.oc-breadcrumb-crumb{cursor:pointer}a.oc-breadcrumb-crumb:hover{background-color:#f7f7f7;color:#353535}a.oc-breadcrumb-crumb:focus-visible{outline:2px solid #8850be;outline-offset:2px}.oc-breadcrumb-crumb.is-last{color:#353535;font-weight:500;cursor:default;pointer-events:none}.oc-breadcrumb-icon{font-size:1rem;line-height:1;flex-shrink:0}.oc-breadcrumb-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.oc-breadcrumb-separator{font-size:1.125rem;line-height:1;color:#d1d5db;-webkit-user-select:none;user-select:none;flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
|
|
2066
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: OcBreadcrumbComponent, isStandalone: true, selector: "oc-breadcrumb", inputs: { ocItems: "ocItems" }, outputs: { ocCrumbClick: "ocCrumbClick" }, ngImport: i0, template: "<nav\n class=\"oc-breadcrumb\"\n aria-label=\"breadcrumb\"\n>\n <ol class=\"oc-breadcrumb-list\">\n @for (item of ocItems; track $index; let i = $index) {\n @let last = isLast(i);\n <li\n class=\"oc-breadcrumb-item\"\n [class.is-last]=\"last\"\n >\n @if (last || !item.route) {\n <span\n class=\"oc-breadcrumb-crumb\"\n [class.is-last]=\"last\"\n [class.is-clickable]=\"!last\"\n [attr.aria-current]=\"last ? 'page' : null\"\n [attr.role]=\"!last ? 'button' : null\"\n [attr.tabindex]=\"!last ? 0 : null\"\n (click)=\"onCrumbClick($event, item, last)\"\n (keydown.enter)=\"onCrumbClick($event, item, last)\"\n (keydown.space)=\"onCrumbClick($event, item, last)\"\n >\n @if (item.icon) {\n <span class=\"material-symbols-outlined oc-breadcrumb-icon\">{{ item.icon }}</span>\n }\n <span class=\"oc-breadcrumb-label\">{{ item.label }}</span>\n </span>\n } @else {\n <a\n class=\"oc-breadcrumb-crumb\"\n [routerLink]=\"item.route\"\n [queryParams]=\"item.queryParams\"\n (click)=\"onCrumbClick($event, item, last)\"\n >\n @if (item.icon) {\n <span class=\"material-symbols-outlined oc-breadcrumb-icon\">{{ item.icon }}</span>\n }\n <span class=\"oc-breadcrumb-label\">{{ item.label }}</span>\n </a>\n }\n\n @if (!last) {\n <span\n class=\"material-symbols-outlined oc-breadcrumb-separator\"\n aria-hidden=\"true\"\n >keyboard_arrow_right</span\n >\n }\n </li>\n }\n </ol>\n</nav>\n", styles: [":host{display:block}.oc-breadcrumb{display:block;width:100%}.oc-breadcrumb-list{display:flex;flex-wrap:wrap;align-items:center;gap:2px;list-style:none;margin:0;padding:0}.oc-breadcrumb-item{display:inline-flex;align-items:center;gap:2px;min-width:0}.oc-breadcrumb-crumb{display:inline-flex;align-items:center;gap:4px;padding:4px 6px;border-radius:6px;color:#8f9596;font-size:.875rem;font-weight:400;line-height:1.2;text-decoration:none;transition:background-color .18s ease,color .18s ease}a.oc-breadcrumb-crumb,.oc-breadcrumb-crumb.is-clickable{cursor:pointer}a.oc-breadcrumb-crumb:hover,.oc-breadcrumb-crumb.is-clickable:hover{background-color:#f7f7f7;color:#353535}a.oc-breadcrumb-crumb:focus-visible,.oc-breadcrumb-crumb.is-clickable:focus-visible{outline:2px solid #8850be;outline-offset:2px}.oc-breadcrumb-crumb.is-last{color:#353535;font-weight:500;cursor:default;pointer-events:none}.oc-breadcrumb-icon{font-size:1rem;line-height:1;flex-shrink:0}.oc-breadcrumb-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.oc-breadcrumb-separator{font-size:1.125rem;line-height:1;color:#d1d5db;-webkit-user-select:none;user-select:none;flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
|
|
2044
2067
|
}
|
|
2045
2068
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcBreadcrumbComponent, decorators: [{
|
|
2046
2069
|
type: Component,
|
|
2047
|
-
args: [{ selector: 'oc-breadcrumb', standalone: true, imports: [CommonModule, RouterModule], template: "<nav\n class=\"oc-breadcrumb\"\n aria-label=\"breadcrumb\"\n>\n <ol class=\"oc-breadcrumb-list\">\n @for (item of ocItems; track $index; let i = $index) {\n @let last = isLast(i);\n <li\n class=\"oc-breadcrumb-item\"\n [class.is-last]=\"last\"\n >\n @if (last || !item.route) {\n <span\n class=\"oc-breadcrumb-crumb\"\n [class.is-last]=\"last\"\n [attr.aria-current]=\"last ? 'page' : null\"\n >\n @if (item.icon) {\n <span class=\"material-symbols-outlined oc-breadcrumb-icon\">{{ item.icon }}</span>\n }\n <span class=\"oc-breadcrumb-label\">{{ item.label }}</span>\n </span>\n } @else {\n <a\n class=\"oc-breadcrumb-crumb\"\n [routerLink]=\"item.route\"\n [queryParams]=\"item.queryParams\"\n (click)=\"onCrumbClick($event, item, last)\"\n >\n @if (item.icon) {\n <span class=\"material-symbols-outlined oc-breadcrumb-icon\">{{ item.icon }}</span>\n }\n <span class=\"oc-breadcrumb-label\">{{ item.label }}</span>\n </a>\n }\n\n @if (!last) {\n <span\n class=\"material-symbols-outlined oc-breadcrumb-separator\"\n aria-hidden=\"true\"\n >keyboard_arrow_right</span\n >\n }\n </li>\n }\n </ol>\n</nav>\n", styles: [":host{display:block}.oc-breadcrumb{display:block;width:100%}.oc-breadcrumb-list{display:flex;flex-wrap:wrap;align-items:center;gap:2px;list-style:none;margin:0;padding:0}.oc-breadcrumb-item{display:inline-flex;align-items:center;gap:2px;min-width:0}.oc-breadcrumb-crumb{display:inline-flex;align-items:center;gap:4px;padding:4px 6px;border-radius:6px;color:#8f9596;font-size:.875rem;font-weight:400;line-height:1.2;text-decoration:none;transition:background-color .18s ease,color .18s ease}a.oc-breadcrumb-crumb{cursor:pointer}a.oc-breadcrumb-crumb:hover{background-color:#f7f7f7;color:#353535}a.oc-breadcrumb-crumb:focus-visible{outline:2px solid #8850be;outline-offset:2px}.oc-breadcrumb-crumb.is-last{color:#353535;font-weight:500;cursor:default;pointer-events:none}.oc-breadcrumb-icon{font-size:1rem;line-height:1;flex-shrink:0}.oc-breadcrumb-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.oc-breadcrumb-separator{font-size:1.125rem;line-height:1;color:#d1d5db;-webkit-user-select:none;user-select:none;flex-shrink:0}\n"] }]
|
|
2070
|
+
args: [{ selector: 'oc-breadcrumb', standalone: true, imports: [CommonModule, RouterModule], template: "<nav\n class=\"oc-breadcrumb\"\n aria-label=\"breadcrumb\"\n>\n <ol class=\"oc-breadcrumb-list\">\n @for (item of ocItems; track $index; let i = $index) {\n @let last = isLast(i);\n <li\n class=\"oc-breadcrumb-item\"\n [class.is-last]=\"last\"\n >\n @if (last || !item.route) {\n <span\n class=\"oc-breadcrumb-crumb\"\n [class.is-last]=\"last\"\n [class.is-clickable]=\"!last\"\n [attr.aria-current]=\"last ? 'page' : null\"\n [attr.role]=\"!last ? 'button' : null\"\n [attr.tabindex]=\"!last ? 0 : null\"\n (click)=\"onCrumbClick($event, item, last)\"\n (keydown.enter)=\"onCrumbClick($event, item, last)\"\n (keydown.space)=\"onCrumbClick($event, item, last)\"\n >\n @if (item.icon) {\n <span class=\"material-symbols-outlined oc-breadcrumb-icon\">{{ item.icon }}</span>\n }\n <span class=\"oc-breadcrumb-label\">{{ item.label }}</span>\n </span>\n } @else {\n <a\n class=\"oc-breadcrumb-crumb\"\n [routerLink]=\"item.route\"\n [queryParams]=\"item.queryParams\"\n (click)=\"onCrumbClick($event, item, last)\"\n >\n @if (item.icon) {\n <span class=\"material-symbols-outlined oc-breadcrumb-icon\">{{ item.icon }}</span>\n }\n <span class=\"oc-breadcrumb-label\">{{ item.label }}</span>\n </a>\n }\n\n @if (!last) {\n <span\n class=\"material-symbols-outlined oc-breadcrumb-separator\"\n aria-hidden=\"true\"\n >keyboard_arrow_right</span\n >\n }\n </li>\n }\n </ol>\n</nav>\n", styles: [":host{display:block}.oc-breadcrumb{display:block;width:100%}.oc-breadcrumb-list{display:flex;flex-wrap:wrap;align-items:center;gap:2px;list-style:none;margin:0;padding:0}.oc-breadcrumb-item{display:inline-flex;align-items:center;gap:2px;min-width:0}.oc-breadcrumb-crumb{display:inline-flex;align-items:center;gap:4px;padding:4px 6px;border-radius:6px;color:#8f9596;font-size:.875rem;font-weight:400;line-height:1.2;text-decoration:none;transition:background-color .18s ease,color .18s ease}a.oc-breadcrumb-crumb,.oc-breadcrumb-crumb.is-clickable{cursor:pointer}a.oc-breadcrumb-crumb:hover,.oc-breadcrumb-crumb.is-clickable:hover{background-color:#f7f7f7;color:#353535}a.oc-breadcrumb-crumb:focus-visible,.oc-breadcrumb-crumb.is-clickable:focus-visible{outline:2px solid #8850be;outline-offset:2px}.oc-breadcrumb-crumb.is-last{color:#353535;font-weight:500;cursor:default;pointer-events:none}.oc-breadcrumb-icon{font-size:1rem;line-height:1;flex-shrink:0}.oc-breadcrumb-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.oc-breadcrumb-separator{font-size:1.125rem;line-height:1;color:#d1d5db;-webkit-user-select:none;user-select:none;flex-shrink:0}\n"] }]
|
|
2048
2071
|
}], propDecorators: { ocItems: [{
|
|
2049
2072
|
type: Input
|
|
2050
2073
|
}], ocCrumbClick: [{
|
|
@@ -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();
|
|
@@ -2395,6 +2430,11 @@ class OcCalendarComponent {
|
|
|
2395
2430
|
if (changes['ocSelectionMode'] && !changes['ocSelectionMode'].firstChange) {
|
|
2396
2431
|
this.resetSelection();
|
|
2397
2432
|
}
|
|
2433
|
+
const target = this.dateChangedAcrossMonths(changes['ocCurrentDate']) ||
|
|
2434
|
+
this.dateChangedAcrossMonths(changes['ocStartDate']);
|
|
2435
|
+
if (target && !this.isSameMonth(target, this.currentMonth)) {
|
|
2436
|
+
this.currentMonth = new Date(target.getFullYear(), target.getMonth(), 1);
|
|
2437
|
+
}
|
|
2398
2438
|
if (changes['ocStartDate'] ||
|
|
2399
2439
|
changes['ocEndDate'] ||
|
|
2400
2440
|
changes['ocMinDate'] ||
|
|
@@ -2405,6 +2445,24 @@ class OcCalendarComponent {
|
|
|
2405
2445
|
this.generateCalendar();
|
|
2406
2446
|
}
|
|
2407
2447
|
}
|
|
2448
|
+
dateChangedAcrossMonths(change) {
|
|
2449
|
+
if (!change)
|
|
2450
|
+
return null;
|
|
2451
|
+
const curr = change.currentValue;
|
|
2452
|
+
const prev = change.previousValue;
|
|
2453
|
+
if (!curr)
|
|
2454
|
+
return null;
|
|
2455
|
+
if (change.firstChange)
|
|
2456
|
+
return curr;
|
|
2457
|
+
if (!prev)
|
|
2458
|
+
return curr;
|
|
2459
|
+
if (this.isSameMonth(curr, prev))
|
|
2460
|
+
return null;
|
|
2461
|
+
return curr;
|
|
2462
|
+
}
|
|
2463
|
+
isSameMonth(a, b) {
|
|
2464
|
+
return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
|
|
2465
|
+
}
|
|
2408
2466
|
resetSelection() {
|
|
2409
2467
|
this.ocStartDate = undefined;
|
|
2410
2468
|
this.ocEndDate = undefined;
|
|
@@ -2475,6 +2533,11 @@ class OcCalendarComponent {
|
|
|
2475
2533
|
}
|
|
2476
2534
|
this.generateCalendar();
|
|
2477
2535
|
}
|
|
2536
|
+
goToToday() {
|
|
2537
|
+
const today = new Date();
|
|
2538
|
+
this.currentMonth = new Date(today.getFullYear(), today.getMonth(), 1);
|
|
2539
|
+
this.generateCalendar();
|
|
2540
|
+
}
|
|
2478
2541
|
generateCalendar() {
|
|
2479
2542
|
const startOfMonth = new Date(this.currentMonth.getFullYear(), this.currentMonth.getMonth(), 1);
|
|
2480
2543
|
const startDay = (startOfMonth.getDay() - this.ocWeekStartsOn + 7) % 7;
|
|
@@ -2491,16 +2554,21 @@ class OcCalendarComponent {
|
|
|
2491
2554
|
const isCurrentDate = this.ocCurrentDate
|
|
2492
2555
|
? this.isSameDate(date, this.ocCurrentDate)
|
|
2493
2556
|
: this.isLastSelectedDate(date);
|
|
2557
|
+
const isCurrentMonth = this.isSameMonth(date, this.currentMonth);
|
|
2558
|
+
const isSelectedRaw = this.ocSelectionMode === 'multiple'
|
|
2559
|
+
? isCurrentDate
|
|
2560
|
+
: this.isSameDate(date, this.ocStartDate) || this.isSameDate(date, this.ocEndDate);
|
|
2494
2561
|
days.push({
|
|
2495
2562
|
date,
|
|
2496
|
-
isCurrentMonth
|
|
2497
|
-
isSelected:
|
|
2498
|
-
? isCurrentDate
|
|
2499
|
-
: this.isSameDate(date, this.ocStartDate) || this.isSameDate(date, this.ocEndDate),
|
|
2563
|
+
isCurrentMonth,
|
|
2564
|
+
isSelected: isSelectedRaw && isCurrentMonth,
|
|
2500
2565
|
isInRange: this.isDateInRange(date),
|
|
2501
2566
|
isDisabled: this.isDateDisabled(date),
|
|
2502
|
-
isToday: this.isSameDate(date, today),
|
|
2503
|
-
isPreviouslySelected: this.ocSelectionMode === 'multiple' &&
|
|
2567
|
+
isToday: this.isSameDate(date, today) && isCurrentMonth,
|
|
2568
|
+
isPreviouslySelected: this.ocSelectionMode === 'multiple' &&
|
|
2569
|
+
isMultipleSelected &&
|
|
2570
|
+
!isCurrentDate &&
|
|
2571
|
+
isCurrentMonth,
|
|
2504
2572
|
});
|
|
2505
2573
|
}
|
|
2506
2574
|
this.weeks.push(days);
|
|
@@ -2793,20 +2861,20 @@ class OcDropdownService {
|
|
|
2793
2861
|
this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
|
|
2794
2862
|
this.renderer = this.rendererFactory.createRenderer(null, null);
|
|
2795
2863
|
}
|
|
2796
|
-
toggle(triggerElement, template, viewContainerRef) {
|
|
2864
|
+
toggle(triggerElement, template, viewContainerRef, align = 'start') {
|
|
2797
2865
|
if (this.isOpen()) {
|
|
2798
2866
|
this.close();
|
|
2799
2867
|
}
|
|
2800
2868
|
else {
|
|
2801
|
-
this.open(triggerElement, template, viewContainerRef);
|
|
2869
|
+
this.open(triggerElement, template, viewContainerRef, align);
|
|
2802
2870
|
}
|
|
2803
2871
|
}
|
|
2804
|
-
open(triggerElement, template, viewContainerRef) {
|
|
2872
|
+
open(triggerElement, template, viewContainerRef, align) {
|
|
2805
2873
|
if (this.isOpen()) {
|
|
2806
2874
|
this.close();
|
|
2807
2875
|
}
|
|
2808
2876
|
this.triggerElement = triggerElement;
|
|
2809
|
-
this.createOverlay(triggerElement);
|
|
2877
|
+
this.createOverlay(triggerElement, align);
|
|
2810
2878
|
if (!this.overlayRef) {
|
|
2811
2879
|
return;
|
|
2812
2880
|
}
|
|
@@ -2841,7 +2909,7 @@ class OcDropdownService {
|
|
|
2841
2909
|
this.close();
|
|
2842
2910
|
return trigger;
|
|
2843
2911
|
}
|
|
2844
|
-
createOverlay(triggerElement) {
|
|
2912
|
+
createOverlay(triggerElement, align) {
|
|
2845
2913
|
if (this.overlayRef) {
|
|
2846
2914
|
this.destroyOverlay();
|
|
2847
2915
|
}
|
|
@@ -2849,16 +2917,16 @@ class OcDropdownService {
|
|
|
2849
2917
|
.flexibleConnectedTo(triggerElement)
|
|
2850
2918
|
.withPositions([
|
|
2851
2919
|
{
|
|
2852
|
-
originX:
|
|
2920
|
+
originX: align,
|
|
2853
2921
|
originY: 'bottom',
|
|
2854
|
-
overlayX:
|
|
2922
|
+
overlayX: align,
|
|
2855
2923
|
overlayY: 'top',
|
|
2856
2924
|
offsetY: 4,
|
|
2857
2925
|
},
|
|
2858
2926
|
{
|
|
2859
|
-
originX:
|
|
2927
|
+
originX: align,
|
|
2860
2928
|
originY: 'top',
|
|
2861
|
-
overlayX:
|
|
2929
|
+
overlayX: align,
|
|
2862
2930
|
overlayY: 'bottom',
|
|
2863
2931
|
offsetY: -4,
|
|
2864
2932
|
},
|
|
@@ -2990,6 +3058,7 @@ class OcDropdownDirective {
|
|
|
2990
3058
|
this.ocDropdownMenu = input(...(ngDevMode ? [undefined, { debugName: "ocDropdownMenu" }] : []));
|
|
2991
3059
|
this.ocTrigger = input('click', ...(ngDevMode ? [{ debugName: "ocTrigger" }] : []));
|
|
2992
3060
|
this.ocDisabled = input(false, ...(ngDevMode ? [{ debugName: "ocDisabled" }] : []));
|
|
3061
|
+
this.ocAlign = input('start', ...(ngDevMode ? [{ debugName: "ocAlign" }] : []));
|
|
2993
3062
|
}
|
|
2994
3063
|
ngOnInit() {
|
|
2995
3064
|
const element = this.elementRef.nativeElement;
|
|
@@ -3034,7 +3103,7 @@ class OcDropdownDirective {
|
|
|
3034
3103
|
}
|
|
3035
3104
|
const menuContent = this.ocDropdownMenu();
|
|
3036
3105
|
if (menuContent) {
|
|
3037
|
-
this.dropdownService.toggle(this.elementRef, menuContent.contentTemplate(), this.viewContainerRef);
|
|
3106
|
+
this.dropdownService.toggle(this.elementRef, menuContent.contentTemplate(), this.viewContainerRef, this.ocAlign());
|
|
3038
3107
|
}
|
|
3039
3108
|
}
|
|
3040
3109
|
openDropdown() {
|
|
@@ -3043,14 +3112,14 @@ class OcDropdownDirective {
|
|
|
3043
3112
|
}
|
|
3044
3113
|
const menuContent = this.ocDropdownMenu();
|
|
3045
3114
|
if (menuContent && !this.dropdownService.isOpen()) {
|
|
3046
|
-
this.dropdownService.toggle(this.elementRef, menuContent.contentTemplate(), this.viewContainerRef);
|
|
3115
|
+
this.dropdownService.toggle(this.elementRef, menuContent.contentTemplate(), this.viewContainerRef, this.ocAlign());
|
|
3047
3116
|
}
|
|
3048
3117
|
}
|
|
3049
3118
|
closeDropdown() {
|
|
3050
3119
|
this.dropdownService.close();
|
|
3051
3120
|
}
|
|
3052
3121
|
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 }); }
|
|
3122
|
+
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
3123
|
}
|
|
3055
3124
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcDropdownDirective, decorators: [{
|
|
3056
3125
|
type: Directive,
|
|
@@ -3069,7 +3138,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
|
|
|
3069
3138
|
},
|
|
3070
3139
|
exportAs: 'ocDropdown',
|
|
3071
3140
|
}]
|
|
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 }] }] } });
|
|
3141
|
+
}], 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
3142
|
|
|
3074
3143
|
class OcDropdownMenuContentComponent {
|
|
3075
3144
|
constructor() {
|
|
@@ -4226,7 +4295,7 @@ class OcTableComponent {
|
|
|
4226
4295
|
return !!Object.keys(column).length;
|
|
4227
4296
|
}
|
|
4228
4297
|
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 }); }
|
|
4298
|
+
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
4299
|
}
|
|
4231
4300
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcTableComponent, decorators: [{
|
|
4232
4301
|
type: Component,
|