otimus-library 0.2.50 → 0.2.51
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/esm2022/lib/components/oc-accordion/oc-accordion.component.mjs +3 -3
- package/esm2022/lib/components/oc-accordion-item/oc-accordion-item.component.mjs +3 -3
- package/esm2022/lib/components/oc-autocomplete/oc-autocomplete.component.mjs +3 -3
- package/esm2022/lib/components/oc-badge/oc-badge.component.mjs +3 -3
- package/esm2022/lib/components/oc-checkbox/oc-checkbox.component.mjs +3 -3
- package/esm2022/lib/components/oc-chip/oc-chip.component.mjs +3 -3
- package/esm2022/lib/components/oc-filter/oc-filter.component.mjs +3 -3
- package/esm2022/lib/components/oc-input/oc-input.component.mjs +3 -3
- package/esm2022/lib/components/oc-key-value/oc-key-value.component.mjs +10 -8
- package/esm2022/lib/components/oc-log/oc-log.component.mjs +3 -3
- package/esm2022/lib/components/oc-menu/oc-menu.component.mjs +3 -3
- package/esm2022/lib/components/oc-modal/oc-modal.component.mjs +3 -3
- package/esm2022/lib/components/oc-modal-footer/oc-modal-footer.component.mjs +3 -3
- package/esm2022/lib/components/oc-not-found/oc-not-found.component.mjs +3 -3
- package/esm2022/lib/components/oc-pagination/oc-pagination.component.mjs +3 -3
- package/esm2022/lib/components/oc-profile/oc-profile.component.mjs +3 -3
- package/esm2022/lib/components/oc-step/oc-step.component.mjs +3 -3
- package/esm2022/lib/components/oc-stepper/oc-stepper.component.mjs +3 -3
- package/esm2022/lib/components/oc-tab/oc-tab.component.mjs +3 -3
- package/esm2022/lib/components/oc-tabs/oc-tabs.component.mjs +3 -3
- package/esm2022/lib/components/oc-toast/oc-toast.component.mjs +3 -3
- package/esm2022/lib/components/oc-toggle/oc-toggle.component.mjs +3 -3
- package/esm2022/lib/directives/oc-tooltip/oc-tooltip.directive.mjs +3 -3
- package/esm2022/lib/otimus-library.component.mjs +3 -3
- package/esm2022/lib/otimus-library.service.mjs +3 -3
- package/esm2022/lib/services/internationalization.service.mjs +3 -3
- package/esm2022/lib/services/oc-toast.service.mjs +3 -3
- package/esm2022/lib/services/style-theme.service.mjs +3 -3
- package/fesm2022/otimus-library.mjs +90 -88
- package/fesm2022/otimus-library.mjs.map +1 -1
- package/lib/components/oc-key-value/oc-key-value.component.d.ts +3 -1
- package/package.json +1 -1
|
@@ -29,10 +29,10 @@ export class OcAccordionComponent {
|
|
|
29
29
|
item.ocIsOpen = false;
|
|
30
30
|
});
|
|
31
31
|
}
|
|
32
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
33
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.
|
|
32
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OcAccordionComponent, deps: [{ token: i1.StyleThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
33
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: OcAccordionComponent, isStandalone: true, selector: "oc-accordion", inputs: { ocAlternate: "ocAlternate", ocCurrentIndex: "ocCurrentIndex", ocStyle: "ocStyle" }, queries: [{ propertyName: "items", predicate: OcAccordionItemComponent }], ngImport: i0, template: "<div>\n <ng-content></ng-content>\n</div>", styles: [".oc-accordion{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
34
34
|
}
|
|
35
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
35
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OcAccordionComponent, decorators: [{
|
|
36
36
|
type: Component,
|
|
37
37
|
args: [{ selector: 'oc-accordion', standalone: true, imports: [CommonModule, OcAccordionItemComponent], template: "<div>\n <ng-content></ng-content>\n</div>", styles: [".oc-accordion{display:flex;flex-direction:column}\n"] }]
|
|
38
38
|
}], ctorParameters: () => [{ type: i1.StyleThemeService }], propDecorators: { items: [{
|
|
@@ -17,10 +17,10 @@ export class OcAccordionItemComponent {
|
|
|
17
17
|
this.closeAllItems.emit();
|
|
18
18
|
this.ocIsOpen = !this.ocIsOpen;
|
|
19
19
|
}
|
|
20
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
21
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.
|
|
20
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OcAccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
21
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: OcAccordionItemComponent, isStandalone: true, selector: "oc-accordion-item", inputs: { ocIsOpen: "ocIsOpen", ocTitle: "ocTitle", ocStyle: "ocStyle" }, outputs: { closeAllItems: "closeAllItems" }, ngImport: i0, template: "<div class=\"oc-accordion-item\" [ngClass]=\"{\n 'shui': ocStyle === 'shui'\n}\">\n <div class=\"item-header\" [ngClass]=\"{\n open: ocIsOpen\n }\" (click)=\"toggle()\">\n <h3>{{ocTitle}}</h3>\n <span class=\"material-symbols-outlined\">\n keyboard_control_key\n </span>\n </div>\n @if (ocIsOpen) {\n <div class=\"oc-content\" [ngClass]=\"{\n open: ocIsOpen\n }\">\n <ng-content></ng-content>\n </div>\n }\n</div>", styles: [".oc-accordion-item{width:100%}.oc-accordion-item .item-header{cursor:pointer;transition:.1s ease;display:flex;justify-content:space-between;align-items:center;padding:1.5rem;border-radius:1rem}.oc-accordion-item .item-header h3{color:#353535;padding:0;margin:0}.oc-accordion-item .item-header span{transition:.3s ease;color:#7e8485}.oc-accordion-item .item-header:hover{background-color:#f8f9ff}.oc-accordion-item .item-header:active{transform:scale(.99)}.oc-accordion-item .item-header.open{background-color:#f8f9ff;border-bottom-left-radius:0;border-bottom-right-radius:0}.oc-accordion-item .item-header.open h3{color:#5505a2}.oc-accordion-item .item-header.open span{color:#00dda3;transform:rotate(180deg)}.oc-accordion-item .closed,.oc-accordion-item closed *{display:none}.oc-accordion-item .oc-content{animation:show-up .15s ease;padding:2rem 1.5rem 2.5rem;border-radius:0 0 16px 16px}.oc-accordion-item .oc-content.open{background-color:#f8f9ff}@keyframes show-up{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.oc-accordion-item.shui{width:100%}.oc-accordion-item.shui .item-header{border-radius:0}.oc-accordion-item.shui .item-header h3{color:#000000bf}.oc-accordion-item.shui .item-header span{color:#7d7d7d}.oc-accordion-item.shui .item-header:hover,.oc-accordion-item.shui .item-header.open{background-color:#f5f5f5}.oc-accordion-item.shui .item-header.open h3{color:#0169b2}.oc-accordion-item.shui .item-header.open span{color:#099}.oc-accordion-item.shui .oc-content{border-radius:0}.oc-accordion-item.shui .oc-content.open{background-color:#f5f5f566}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
22
22
|
}
|
|
23
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
23
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OcAccordionItemComponent, decorators: [{
|
|
24
24
|
type: Component,
|
|
25
25
|
args: [{ selector: 'oc-accordion-item', standalone: true, imports: [CommonModule], template: "<div class=\"oc-accordion-item\" [ngClass]=\"{\n 'shui': ocStyle === 'shui'\n}\">\n <div class=\"item-header\" [ngClass]=\"{\n open: ocIsOpen\n }\" (click)=\"toggle()\">\n <h3>{{ocTitle}}</h3>\n <span class=\"material-symbols-outlined\">\n keyboard_control_key\n </span>\n </div>\n @if (ocIsOpen) {\n <div class=\"oc-content\" [ngClass]=\"{\n open: ocIsOpen\n }\">\n <ng-content></ng-content>\n </div>\n }\n</div>", styles: [".oc-accordion-item{width:100%}.oc-accordion-item .item-header{cursor:pointer;transition:.1s ease;display:flex;justify-content:space-between;align-items:center;padding:1.5rem;border-radius:1rem}.oc-accordion-item .item-header h3{color:#353535;padding:0;margin:0}.oc-accordion-item .item-header span{transition:.3s ease;color:#7e8485}.oc-accordion-item .item-header:hover{background-color:#f8f9ff}.oc-accordion-item .item-header:active{transform:scale(.99)}.oc-accordion-item .item-header.open{background-color:#f8f9ff;border-bottom-left-radius:0;border-bottom-right-radius:0}.oc-accordion-item .item-header.open h3{color:#5505a2}.oc-accordion-item .item-header.open span{color:#00dda3;transform:rotate(180deg)}.oc-accordion-item .closed,.oc-accordion-item closed *{display:none}.oc-accordion-item .oc-content{animation:show-up .15s ease;padding:2rem 1.5rem 2.5rem;border-radius:0 0 16px 16px}.oc-accordion-item .oc-content.open{background-color:#f8f9ff}@keyframes show-up{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.oc-accordion-item.shui{width:100%}.oc-accordion-item.shui .item-header{border-radius:0}.oc-accordion-item.shui .item-header h3{color:#000000bf}.oc-accordion-item.shui .item-header span{color:#7d7d7d}.oc-accordion-item.shui .item-header:hover,.oc-accordion-item.shui .item-header.open{background-color:#f5f5f5}.oc-accordion-item.shui .item-header.open h3{color:#0169b2}.oc-accordion-item.shui .item-header.open span{color:#099}.oc-accordion-item.shui .oc-content{border-radius:0}.oc-accordion-item.shui .oc-content.open{background-color:#f5f5f566}\n"] }]
|
|
26
26
|
}], propDecorators: { ocIsOpen: [{
|
|
@@ -187,10 +187,10 @@ export class OcAutocompleteComponent {
|
|
|
187
187
|
this.ocValue = '';
|
|
188
188
|
this.filteredData = this.ocData;
|
|
189
189
|
}
|
|
190
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
191
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: OcAutocompleteComponent, isStandalone: true, selector: "oc-autocomplete", inputs: { ocPlaceholder: "ocPlaceholder", ocError: "ocError", ocSize: "ocSize", ocData: "ocData", ocValue: "ocValue", ocClearOnChange: "ocClearOnChange", ocWidth: "ocWidth", ocMinWidth: "ocMinWidth", ocMaxWidth: "ocMaxWidth", ocOptionsMaxHeight: "ocOptionsMaxHeight", ocOptionsWidth: "ocOptionsWidth", ocRequired: "ocRequired", ocMaxResults: "ocMaxResults", ocAllowNotListedValue: "ocAllowNotListedValue", ocNoAvailableOptionsText: "ocNoAvailableOptionsText", ocTypeForMoreResultsText: "ocTypeForMoreResultsText", ocLoading: "ocLoading", ocSemanticLike: "ocSemanticLike", ocStyle: "ocStyle", ocTabIndex: "ocTabIndex", ocHasDeleteButton: "ocHasDeleteButton" }, outputs: { ocValueChange: "ocValueChange", ocChange: "ocChange", ocOptionNotFound: "ocOptionNotFound", ocClick: "ocClick" }, host: { properties: { "style.width": "this.computedWidth", "style.min-width": "this.computedMinWidth", "style.max-width": "this.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 }], usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"{\n 'oc-input-box': !ocSemanticLike && ocStyle === 'otimus',\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 }\">\n <ng-content></ng-content>\n <input [placeholder]=\"ocPlaceholder\" #input (click)=\"toggleOptions(); ocClick.emit()\" type=\"text\"\n (input)=\"filterData(ocValue)\" [(ngModel)]=\"ocValue\" (ngModelChange)=\"ocValue = $event; ocValueChange.emit($event)\"\n [ngClass]=\"{\n 'semantic-input': ocSemanticLike || ocStyle === 'semantic',\n }\" [tabindex]=\"ocTabIndex\" />\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 *ngIf=\"ocError\" class=\"error-msg\">{{ ocError }}</small>\n <ng-content select=\"ocPrefix\"></ng-content>\n @if (ocHasDeleteButton) {\n <button class=\"oc-has-close-button oc suffix\" (click)=\"clearValue()\">\n <span class=\"material-symbols-outlined\">backspace</span>\n </button>\n }\n <ng-content select=\"ocSuffix\"></ng-content>\n\n <div class=\"oc-options-div\">\n @if (isOptionsShown && !ocLoading) {\n <ul #options class=\"oc-options\" [ngStyle]=\"{\n 'max-height': ocOptionsMaxHeight,\n width: ocOptionsWidth,\n }\">\n @if (!filteredData.length) {\n <li class=\"no-options\">\n {{ ocNoAvailableOptionsText || 'Nenhum resultado dispon\u00EDvel' }}\n </li>\n } @else {\n @for (data of filteredData; track data.value; let i = $index) {\n @if (!ocMaxResults || i < ocMaxResults) { <li>\n <button type=\"button\" (click)=\"selectValue(data.value)\">\n {{ data.name }}\n </button>\n </li>\n }\n }\n @if (ocMaxResults && filteredData.length > ocMaxResults) {\n <li class=\"no-options\">\n {{ ocTypeForMoreResultsText || 'Digite para ver mais resultados' }}\n </li>\n }\n }\n </ul>\n } @else if (isOptionsShown && ocLoading) {\n <div class=\"oc-options loader\">\n <span class=\"material-symbols-outlined loading\"> progress_activity </span>\n </div>\n }\n </div>\n</div>", styles: ["@charset \"UTF-8\";.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: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}.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 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 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}.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:#ebebeb}.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{font-size:1rem;background-color:#ebebeb;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: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:#ebebeb;width:95%;padding:1px 7px 0;font-size:.7rem;font-weight:500}.shui-input-box input:focus~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%}.error input,.error textarea,.error select{border:1px solid #e7001d;box-shadow:0 4px 6.1px #a1000014}.error:before{width:0!important}.error small,.error label{color:#ed3a3a!important;font-weight:600}.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}.oc.suffix,.oc.prefix,.material-symbols-outlined{z-index:5!important}.oc-input-box{position:relative}.oc-options-div{position:absolute;width:100%}.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-options{display:flex;flex-direction:column;list-style:none;max-height:40vh;background-color:#f8f9ff;border:2px solid #ffffff;box-shadow:0 4px 8.7px #00000021;padding:0;margin-block-start:0;border-radius:.5rem;overflow:hidden;width:100%;position:absolute;top:50%;overflow-y:auto;z-index:15}.oc-options>li{padding:0;margin:0}.oc-options>li button{width:100%;text-align:left;padding:.6rem;border:none;background-color:#f8f9ff;cursor:pointer}.oc-options>li button:hover{filter:brightness(.9)}.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}@keyframes spinLoad{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
|
|
190
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OcAutocompleteComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.InternationalizationService }, { token: i2.StyleThemeService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
191
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: OcAutocompleteComponent, isStandalone: true, selector: "oc-autocomplete", inputs: { ocPlaceholder: "ocPlaceholder", ocError: "ocError", ocSize: "ocSize", ocData: "ocData", ocValue: "ocValue", ocClearOnChange: "ocClearOnChange", ocWidth: "ocWidth", ocMinWidth: "ocMinWidth", ocMaxWidth: "ocMaxWidth", ocOptionsMaxHeight: "ocOptionsMaxHeight", ocOptionsWidth: "ocOptionsWidth", ocRequired: "ocRequired", ocMaxResults: "ocMaxResults", ocAllowNotListedValue: "ocAllowNotListedValue", ocNoAvailableOptionsText: "ocNoAvailableOptionsText", ocTypeForMoreResultsText: "ocTypeForMoreResultsText", ocLoading: "ocLoading", ocSemanticLike: "ocSemanticLike", ocStyle: "ocStyle", ocTabIndex: "ocTabIndex", ocHasDeleteButton: "ocHasDeleteButton" }, outputs: { ocValueChange: "ocValueChange", ocChange: "ocChange", ocOptionNotFound: "ocOptionNotFound", ocClick: "ocClick" }, host: { properties: { "style.width": "this.computedWidth", "style.min-width": "this.computedMinWidth", "style.max-width": "this.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 }], usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"{\n 'oc-input-box': !ocSemanticLike && ocStyle === 'otimus',\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 }\">\n <ng-content></ng-content>\n <input [placeholder]=\"ocPlaceholder\" #input (click)=\"toggleOptions(); ocClick.emit()\" type=\"text\"\n (input)=\"filterData(ocValue)\" [(ngModel)]=\"ocValue\" (ngModelChange)=\"ocValue = $event; ocValueChange.emit($event)\"\n [ngClass]=\"{\n 'semantic-input': ocSemanticLike || ocStyle === 'semantic',\n }\" [tabindex]=\"ocTabIndex\" />\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 *ngIf=\"ocError\" class=\"error-msg\">{{ ocError }}</small>\n <ng-content select=\"ocPrefix\"></ng-content>\n @if (ocHasDeleteButton) {\n <button class=\"oc-has-close-button oc suffix\" (click)=\"clearValue()\">\n <span class=\"material-symbols-outlined\">backspace</span>\n </button>\n }\n <ng-content select=\"ocSuffix\"></ng-content>\n\n <div class=\"oc-options-div\">\n @if (isOptionsShown && !ocLoading) {\n <ul #options class=\"oc-options\" [ngStyle]=\"{\n 'max-height': ocOptionsMaxHeight,\n width: ocOptionsWidth,\n }\">\n @if (!filteredData.length) {\n <li class=\"no-options\">\n {{ ocNoAvailableOptionsText || 'Nenhum resultado dispon\u00EDvel' }}\n </li>\n } @else {\n @for (data of filteredData; track data.value; let i = $index) {\n @if (!ocMaxResults || i < ocMaxResults) { <li>\n <button type=\"button\" (click)=\"selectValue(data.value)\">\n {{ data.name }}\n </button>\n </li>\n }\n }\n @if (ocMaxResults && filteredData.length > ocMaxResults) {\n <li class=\"no-options\">\n {{ ocTypeForMoreResultsText || 'Digite para ver mais resultados' }}\n </li>\n }\n }\n </ul>\n } @else if (isOptionsShown && ocLoading) {\n <div class=\"oc-options loader\">\n <span class=\"material-symbols-outlined loading\"> progress_activity </span>\n </div>\n }\n </div>\n</div>", styles: ["@charset \"UTF-8\";.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: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}.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 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 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}.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:#ebebeb}.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{font-size:1rem;background-color:#ebebeb;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: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:#ebebeb;width:95%;padding:1px 7px 0;font-size:.7rem;font-weight:500}.shui-input-box input:focus~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%}.error input,.error textarea,.error select{border:1px solid #e7001d;box-shadow:0 4px 6.1px #a1000014}.error:before{width:0!important}.error small,.error label{color:#ed3a3a!important;font-weight:600}.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}.oc.suffix,.oc.prefix,.material-symbols-outlined{z-index:5!important}.oc-input-box{position:relative}.oc-options-div{position:absolute;width:100%}.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-options{display:flex;flex-direction:column;list-style:none;max-height:40vh;background-color:#f8f9ff;border:2px solid #ffffff;box-shadow:0 4px 8.7px #00000021;padding:0;margin-block-start:0;border-radius:.5rem;overflow:hidden;width:100%;position:absolute;top:50%;overflow-y:auto;z-index:15}.oc-options>li{padding:0;margin:0}.oc-options>li button{width:100%;text-align:left;padding:.6rem;border:none;background-color:#f8f9ff;cursor:pointer}.oc-options>li button:hover{filter:brightness(.9)}.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}@keyframes spinLoad{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
|
|
192
192
|
}
|
|
193
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
193
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OcAutocompleteComponent, decorators: [{
|
|
194
194
|
type: Component,
|
|
195
195
|
args: [{ selector: 'oc-autocomplete', standalone: true, imports: [CommonModule, FormsModule], providers: [InternationalizationService], host: {
|
|
196
196
|
'[style.width]': 'computedWidth',
|
|
@@ -14,10 +14,10 @@ export class OcBadgeComponent {
|
|
|
14
14
|
if (this.ocWaved)
|
|
15
15
|
this.classList.push('waved');
|
|
16
16
|
}
|
|
17
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
18
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.
|
|
17
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OcBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
18
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: OcBadgeComponent, isStandalone: true, selector: "oc-badge", inputs: { ocSize: "ocSize", ocColor: "ocColor", ocWaved: "ocWaved" }, ngImport: i0, template: "<div>\n <div class=\"oc-badge\" [ngClass]=\"classList\">\n <ng-content>\n \n </ng-content>\n </div>\n</div>\n", styles: [".oc-badge{border-radius:50%;display:flex;justify-content:center;align-items:center;color:#f8f9ff}.oc-badge>*{color:#f8f9ff;font-weight:600}.notification{background-color:#ed3a3a}.brand-g{background-color:#00dda3}.brand-p{background-color:#5505a2}.success{background-color:#4ab858}.warning{background-color:#ebbc2e}.small{width:22px;height:22px;font-size:1rem}.medium{width:28px;height:28px;font-size:1.25rem}.large{width:34px;height:34px;font-size:1.5rem}.waved{position:relative;z-index:2}.waved:before,.waved:after{z-index:-1;content:\"\";position:absolute;top:0;border-radius:50%;width:100%;height:100%;animation:wave infinite 2s}.waved:after{animation-delay:.6s}.waved.notification:before,.waved.notification:after{background-color:#ed3a3a}.waved.brand-g:before,.waved.brand-g:after{background-color:#00dda3}.waved.brand-p:before,.waved.brand-p:after{background-color:#5505a2}.waved.success:before,.waved.success:after{background-color:#4ab858}.waved.warning:before,.waved.warning:after{background-color:#ebbc2e}@keyframes wave{0%{transform:scale(0)}to{opacity:0;transform:scale(2)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
19
19
|
}
|
|
20
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
20
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OcBadgeComponent, decorators: [{
|
|
21
21
|
type: Component,
|
|
22
22
|
args: [{ selector: 'oc-badge', standalone: true, imports: [CommonModule], template: "<div>\n <div class=\"oc-badge\" [ngClass]=\"classList\">\n <ng-content>\n \n </ng-content>\n </div>\n</div>\n", styles: [".oc-badge{border-radius:50%;display:flex;justify-content:center;align-items:center;color:#f8f9ff}.oc-badge>*{color:#f8f9ff;font-weight:600}.notification{background-color:#ed3a3a}.brand-g{background-color:#00dda3}.brand-p{background-color:#5505a2}.success{background-color:#4ab858}.warning{background-color:#ebbc2e}.small{width:22px;height:22px;font-size:1rem}.medium{width:28px;height:28px;font-size:1.25rem}.large{width:34px;height:34px;font-size:1.5rem}.waved{position:relative;z-index:2}.waved:before,.waved:after{z-index:-1;content:\"\";position:absolute;top:0;border-radius:50%;width:100%;height:100%;animation:wave infinite 2s}.waved:after{animation-delay:.6s}.waved.notification:before,.waved.notification:after{background-color:#ed3a3a}.waved.brand-g:before,.waved.brand-g:after{background-color:#00dda3}.waved.brand-p:before,.waved.brand-p:after{background-color:#5505a2}.waved.success:before,.waved.success:after{background-color:#4ab858}.waved.warning:before,.waved.warning:after{background-color:#ebbc2e}@keyframes wave{0%{transform:scale(0)}to{opacity:0;transform:scale(2)}}\n"] }]
|
|
23
23
|
}], propDecorators: { ocSize: [{
|
|
@@ -87,8 +87,8 @@ export class OcCheckboxComponent {
|
|
|
87
87
|
this.cdr.markForCheck();
|
|
88
88
|
this.cdr.detectChanges();
|
|
89
89
|
}
|
|
90
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
91
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.
|
|
90
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OcCheckboxComponent, deps: [{ token: i1.StyleThemeService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
91
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: OcCheckboxComponent, isStandalone: true, selector: "oc-checkbox", inputs: { ocChecked: "ocChecked", ocSize: "ocSize", ocLabel: "ocLabel", ocName: "ocName", ocColor: "ocColor", ocBorderColor: "ocBorderColor", ocStyle: "ocStyle", formControl: "formControl", ocTabIndex: "ocTabIndex", disableDoubleClickCheck: "disableDoubleClickCheck" }, outputs: { ocChange: "ocChange", ocDoubleClick: "ocDoubleClick" }, providers: [
|
|
92
92
|
{
|
|
93
93
|
provide: NG_VALUE_ACCESSOR,
|
|
94
94
|
useExisting: forwardRef(() => OcCheckboxComponent),
|
|
@@ -96,7 +96,7 @@ export class OcCheckboxComponent {
|
|
|
96
96
|
},
|
|
97
97
|
], ngImport: i0, template: "<button class=\"oc-checkbox-content cbx\" type=\"button\" (click)=\"toggleChecked();\nonDoubleClick()\" [ngClass]=\"{\n shui: ocStyle === 'shui'\n}\" [tabIndex]=\"ocTabIndex\">\n\n <div class=\"oc-checkbox cbx\" [ngClass]=\"{\n 'checked': ocChecked,\n 'tiny': ocSize === 'tiny',\n purple: ocColor === 'purple',\n 'gray-border': ocBorderColor === 'gray'\n }\">\n\n <span class=\"check-icon material-symbols-outlined\">check_small</span>\n </div>\n\n @if(ocLabel) {\n <span class=\"oc-checkbox-label cbx\">\n {{ocLabel}}\n </span>\n }\n\n <ng-content>\n </ng-content>\n\n @if(formControl) {\n <input [formControl]=\"formControl\" [name]=\"ocName\" [checked]=\"ocChecked\" type=\"checkbox\" hidden>\n } @else {\n <input [name]=\"ocName\" [checked]=\"ocChecked\" type=\"checkbox\" hidden>\n }\n</button>", styles: [".oc-checkbox-content{display:flex;align-items:center;padding:0;margin:0;border:none;background-color:transparent;gap:.3rem}.oc-checkbox-content .oc-checkbox-label{background-color:transparent;border:none;color:#8f9596;font-weight:500;text-align:left}.oc-checkbox{min-width:1rem;width:1.2rem;height:1.2rem;border-radius:.3rem;background-color:#f7f7f7;border:2px solid #ffffff;display:flex;align-items:center;justify-content:center;transition:.15s ease;cursor:pointer;overflow:hidden}.oc-checkbox:hover{filter:brightness(.95)}.oc-checkbox .check-icon{font-weight:700;color:#f8f9ff;opacity:0;pointer-events:none;margin:0;font-size:1.15rem;transition:.2s ease;transform:translateY(15px) scale(.5)}.oc-checkbox.gray-border{border:2px solid #d1d5db}.oc-checkbox.tiny{width:1rem;height:1rem;border:1px solid #ffffff}.oc-checkbox.tiny.gray{border:1px solid #d1d5db}.checked{background-color:#00dda3;box-shadow:0 2px 10px #00dda32b;border:none!important}.checked .check-icon{transform:translateY(0) scale(1);opacity:1;color:#f8f9ff}.checked.purple{background-color:#5505a2;box-shadow:0 2px 10px #5505a233}.label{width:18.4px!important;height:18.4px!important}.oc-checkbox-content.shui .oc-checkbox,.oc-checkbox-content.shui .purple{border-radius:.15rem;background-color:#f5f5f5}.oc-checkbox-content.shui .oc-checkbox.gray-border,.oc-checkbox-content.shui .purple.gray-border{border:2px solid #009999;background-color:transparent}.oc-checkbox-content.shui .oc-checkbox.checked,.oc-checkbox-content.shui .purple.checked{background-color:#099}.oc-checkbox-content.shui span.cbx{color:#000000bf}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
|
|
98
98
|
}
|
|
99
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
99
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OcCheckboxComponent, decorators: [{
|
|
100
100
|
type: Component,
|
|
101
101
|
args: [{ selector: 'oc-checkbox', standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule], providers: [
|
|
102
102
|
{
|
|
@@ -23,10 +23,10 @@ export class OcChipComponent {
|
|
|
23
23
|
}
|
|
24
24
|
this.ocRemove.emit();
|
|
25
25
|
}
|
|
26
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
27
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.
|
|
26
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OcChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
27
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: OcChipComponent, isStandalone: true, selector: "oc-chip", inputs: { ocSelected: "ocSelected", ocType: "ocType", ocBg: "ocBg", ocText: "ocText" }, outputs: { ocClick: "ocClick", ocRemove: "ocRemove" }, ngImport: i0, template: "<button\n [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',\n 'red-bg': ocBg === 'red',\n 'yellow-bg': ocBg === 'yellow'\n }\"\n type=\"button\"\n [title]=\"ocText\"\n (click)=\"ocType.includes('select') ? ocEvent($event) : null\"\n>\n <ng-content></ng-content>\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:1rem;font-weight:500;padding:3px 18px;transition:.3s ease!important;cursor:pointer}.oc-chip:hover{filter:brightness(.95)}.oc-chip:active{filter:brightness(.85)}.selected{background-color:#ccfbe6dc;border:2px solid #00dda3;color:#00dda3}.selected.red-bg{color:#ed3a3a;border-color:#ed3a3a;background-color:#ffcaca}.selected.green-bg{color:#00dda3;border-color:#00dda3;background-color:#ccfbe6dc}.selected.yellow-bg{color:#ebbc2e;border-color:#ebbc2e;background-color:#fffaea}.not-selectable{border:none;background-color:#f7f7f7;color:#8f9596;cursor:default}.not-selectable:active{cursor:not-allowed}.material-symbols-outlined{font-size:.9rem;width:10px;height:10px}.remove{display:flex;align-items:center;gap:.5rem;padding-right:.5rem}.remove:hover{filter:brightness(1)}.remove span{display:flex;align-items:center;justify-content:center;padding:5px;cursor:pointer;border-radius:50%;transition:.1s ease}.remove span:hover{background-color:#d1d5db}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
28
28
|
}
|
|
29
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
29
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OcChipComponent, decorators: [{
|
|
30
30
|
type: Component,
|
|
31
31
|
args: [{ selector: 'oc-chip', standalone: true, imports: [CommonModule], template: "<button\n [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',\n 'red-bg': ocBg === 'red',\n 'yellow-bg': ocBg === 'yellow'\n }\"\n type=\"button\"\n [title]=\"ocText\"\n (click)=\"ocType.includes('select') ? ocEvent($event) : null\"\n>\n <ng-content></ng-content>\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:1rem;font-weight:500;padding:3px 18px;transition:.3s ease!important;cursor:pointer}.oc-chip:hover{filter:brightness(.95)}.oc-chip:active{filter:brightness(.85)}.selected{background-color:#ccfbe6dc;border:2px solid #00dda3;color:#00dda3}.selected.red-bg{color:#ed3a3a;border-color:#ed3a3a;background-color:#ffcaca}.selected.green-bg{color:#00dda3;border-color:#00dda3;background-color:#ccfbe6dc}.selected.yellow-bg{color:#ebbc2e;border-color:#ebbc2e;background-color:#fffaea}.not-selectable{border:none;background-color:#f7f7f7;color:#8f9596;cursor:default}.not-selectable:active{cursor:not-allowed}.material-symbols-outlined{font-size:.9rem;width:10px;height:10px}.remove{display:flex;align-items:center;gap:.5rem;padding-right:.5rem}.remove:hover{filter:brightness(1)}.remove span{display:flex;align-items:center;justify-content:center;padding:5px;cursor:pointer;border-radius:50%;transition:.1s ease}.remove span:hover{background-color:#d1d5db}\n"] }]
|
|
32
32
|
}], propDecorators: { ocSelected: [{
|
|
@@ -19,10 +19,10 @@ export class OcFilterComponent {
|
|
|
19
19
|
toggleOpen() {
|
|
20
20
|
this.isOpen = !this.isOpen;
|
|
21
21
|
}
|
|
22
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
23
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.
|
|
22
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OcFilterComponent, deps: [{ token: i1.StyleThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
23
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: OcFilterComponent, isStandalone: true, selector: "oc-filter", inputs: { isOpen: "isOpen", ocText: "ocText", ocActive: "ocActive", ocSide: "ocSide", ocStyle: "ocStyle" }, ngImport: i0, template: "<div class=\"oc-filter-row\" [ngClass]=\"{\n reverse: ocSide === 'right'\n}\">\n <button class=\"oc-filter-btn\" [ngClass]=\"{\n shui: ocStyle === 'shui'\n }\" (click)=\"toggleOpen()\">\n <span class=\"material-symbols-outlined\">filter_list</span>\n {{ocText}}\n <div class=\"badge\">\n <oc-badge *ngIf=\"ocActive > 0\" ocSize=\"small\" ocColor=\"success\" [ocWaved]=\"true\">{{ocActive}}</oc-badge>\n </div>\n </button>\n\n <div class=\"filter-row-content\">\n <ng-content select=\"[row]\"></ng-content>\n </div>\n\n</div>\n<div *ngIf=\"isOpen\" class=\"oc-filter-content\">\n <ng-content select=\"[body]\">\n </ng-content>\n</div>", styles: [".oc-filter-row{display:flex;align-items:center;gap:1rem}.oc-filter-row .filter-row-content{width:100%}.reverse{flex-direction:row-reverse}.oc-filter-btn{background-color:#5505a2;color:#f8f9ff;border:none;border-radius:.5rem;padding:.4rem .8rem;font-weight:600;display:flex;align-items:center;gap:.2rem;transition:.2s ease;position:relative;cursor:pointer}.oc-filter-btn:hover{filter:brightness(.9)}.oc-filter-btn .material-symbols-outlined{font-size:1rem;color:#f7f7f7}.oc-filter-btn img{width:15px;filter:brightness(0) invert(1)}.oc-filter-btn .badge{position:absolute;top:-8px;right:-12px}.oc-filter-btn.shui{background-color:#099!important;border-radius:50px!important}.oc-filter-content{width:100%;animation:showing-up .15s ease;margin-top:1rem}@keyframes showing-up{0%{height:0px;opacity:0}to{height:100%;opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OcBadgeComponent, selector: "oc-badge", inputs: ["ocSize", "ocColor", "ocWaved"] }] }); }
|
|
24
24
|
}
|
|
25
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
25
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OcFilterComponent, decorators: [{
|
|
26
26
|
type: Component,
|
|
27
27
|
args: [{ selector: 'oc-filter', standalone: true, imports: [CommonModule, OcBadgeComponent], template: "<div class=\"oc-filter-row\" [ngClass]=\"{\n reverse: ocSide === 'right'\n}\">\n <button class=\"oc-filter-btn\" [ngClass]=\"{\n shui: ocStyle === 'shui'\n }\" (click)=\"toggleOpen()\">\n <span class=\"material-symbols-outlined\">filter_list</span>\n {{ocText}}\n <div class=\"badge\">\n <oc-badge *ngIf=\"ocActive > 0\" ocSize=\"small\" ocColor=\"success\" [ocWaved]=\"true\">{{ocActive}}</oc-badge>\n </div>\n </button>\n\n <div class=\"filter-row-content\">\n <ng-content select=\"[row]\"></ng-content>\n </div>\n\n</div>\n<div *ngIf=\"isOpen\" class=\"oc-filter-content\">\n <ng-content select=\"[body]\">\n </ng-content>\n</div>", styles: [".oc-filter-row{display:flex;align-items:center;gap:1rem}.oc-filter-row .filter-row-content{width:100%}.reverse{flex-direction:row-reverse}.oc-filter-btn{background-color:#5505a2;color:#f8f9ff;border:none;border-radius:.5rem;padding:.4rem .8rem;font-weight:600;display:flex;align-items:center;gap:.2rem;transition:.2s ease;position:relative;cursor:pointer}.oc-filter-btn:hover{filter:brightness(.9)}.oc-filter-btn .material-symbols-outlined{font-size:1rem;color:#f7f7f7}.oc-filter-btn img{width:15px;filter:brightness(0) invert(1)}.oc-filter-btn .badge{position:absolute;top:-8px;right:-12px}.oc-filter-btn.shui{background-color:#099!important;border-radius:50px!important}.oc-filter-content{width:100%;animation:showing-up .15s ease;margin-top:1rem}@keyframes showing-up{0%{height:0px;opacity:0}to{height:100%;opacity:1}}\n"] }]
|
|
28
28
|
}], ctorParameters: () => [{ type: i1.StyleThemeService }], propDecorators: { isOpen: [{
|
|
@@ -52,10 +52,10 @@ export class OcInputComponent {
|
|
|
52
52
|
this.hasSuffix = true;
|
|
53
53
|
}
|
|
54
54
|
}
|
|
55
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
56
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.
|
|
55
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OcInputComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.StyleThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
56
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: OcInputComponent, isStandalone: true, selector: "oc-input", inputs: { ocError: "ocError", ocSize: "ocSize", ocPlaceholder: "ocPlaceholder", ocWidth: "ocWidth", ocMinWidth: "ocMinWidth", ocMaxWidth: "ocMaxWidth", ocRequired: "ocRequired", ocStyle: "ocStyle" }, host: { properties: { "style.width": "this.computedWidth", "style.min-width": "this.computedMinWidth", "style.max-width": "this.computedMaxWidth" } }, queries: [{ propertyName: "ocPrefix", first: true, predicate: ["ocPrefix"], descendants: true }, { propertyName: "ocSuffix", first: true, predicate: ["ocSuffix"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"{\n 'oc-input-box': !ocStyle || ocStyle === 'otimus',\n small: ocSize === 'small',\n large: ocSize === 'large',\n error: !!ocError,\n prefix: hasPrefix,\n suffix: hasSuffix,\n 'shui': ocStyle === 'shui',\n 'shui-input-box': ocStyle === 'shui'\n}\" [id]=\"inputId\">\n <ng-content></ng-content>\n <ng-content select=\"ocPrefix\"></ng-content>\n <ng-content select=\"ocSuffix\"></ng-content>\n <label>\n <span [innerHTML]=\"ocPlaceholder\"></span>\n @if(ocRequired) {\n <span class=\"oc color error\">*</span>\n }\n </label>\n <small *ngIf=\"ocError\" class=\"error-msg\">{{ocError}}</small>\n</div>", styles: [".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: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}.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 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 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}.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}.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:#ebebeb}.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{font-size:1rem;background-color:#ebebeb;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: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:#ebebeb;width:95%;padding:1px 7px 0;font-size:.7rem;font-weight:500}.shui-input-box input:focus~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%}.error input,.error textarea,.error select{border:1px solid #e7001d;box-shadow:0 4px 6.1px #a1000014}.error:before{width:0!important}.error small,.error label{color:#ed3a3a!important;font-weight:600}.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}.oc.suffix,.oc.prefix,.material-symbols-outlined{z-index:5!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
57
57
|
}
|
|
58
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
58
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OcInputComponent, decorators: [{
|
|
59
59
|
type: Component,
|
|
60
60
|
args: [{ selector: 'oc-input', host: {
|
|
61
61
|
'[style.width]': 'computedWidth',
|
|
@@ -2,10 +2,12 @@ import { CommonModule } from '@angular/common';
|
|
|
2
2
|
import { Component, Input, ViewEncapsulation } from '@angular/core';
|
|
3
3
|
import * as i0 from "@angular/core";
|
|
4
4
|
import * as i1 from "../../services/style-theme.service";
|
|
5
|
-
import * as i2 from "@angular/
|
|
5
|
+
import * as i2 from "@angular/platform-browser";
|
|
6
|
+
import * as i3 from "@angular/common";
|
|
6
7
|
export class OcKeyValueComponent {
|
|
7
|
-
constructor(styleThemeService) {
|
|
8
|
+
constructor(styleThemeService, sanitizer) {
|
|
8
9
|
this.styleThemeService = styleThemeService;
|
|
10
|
+
this.sanitizer = sanitizer;
|
|
9
11
|
this.ocKey = '';
|
|
10
12
|
this.ocValue = '';
|
|
11
13
|
this.ocStyle = 'otimus';
|
|
@@ -13,17 +15,17 @@ export class OcKeyValueComponent {
|
|
|
13
15
|
ngAfterViewInit() {
|
|
14
16
|
this.ocStyle = this.styleThemeService.getStyleTheme() || this.ocStyle;
|
|
15
17
|
}
|
|
16
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
17
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.
|
|
18
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OcKeyValueComponent, deps: [{ token: i1.StyleThemeService }, { token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
19
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: OcKeyValueComponent, isStandalone: true, selector: "oc-key-value", inputs: { ocKey: "ocKey", ocValue: "ocValue", ocStyle: "ocStyle" }, ngImport: i0, template: "<div\n class=\"oc-key-value\"\n [ngClass]=\"{\n shui: ocStyle === 'shui',\n }\"\n>\n <!-- \u00CDcone -->\n <ng-content></ng-content>\n @if (ocKey) {\n <span [innerHTML]=\"ocKey + ':'\"></span>\n }\n <p [innerHTML]=\"sanitizer.bypassSecurityTrustHtml(ocValue)\"></p>\n</div>\n", styles: [".oc-key-value{display:flex;align-items:center;gap:.1rem;font-size:1rem}.oc-key-value p{color:#7e8485;font-weight:500}.oc-key-value span{color:#5505a2;font-weight:500}.oc-key-value .material-symbols-outlined{color:#5505a2;font-size:.95rem}.shui.oc-key-value{display:flex;align-items:center;gap:.1rem;font-size:1rem}.shui.oc-key-value p{color:#7d7d7d;font-weight:500}.shui.oc-key-value span{color:#0169b2;font-weight:500}.shui.oc-key-value .material-symbols-outlined{color:#0169b2;font-size:.95rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
18
20
|
}
|
|
19
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
21
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OcKeyValueComponent, decorators: [{
|
|
20
22
|
type: Component,
|
|
21
|
-
args: [{ selector: 'oc-key-value', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div
|
|
22
|
-
}], ctorParameters: () => [{ type: i1.StyleThemeService }], propDecorators: { ocKey: [{
|
|
23
|
+
args: [{ selector: 'oc-key-value', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div\n class=\"oc-key-value\"\n [ngClass]=\"{\n shui: ocStyle === 'shui',\n }\"\n>\n <!-- \u00CDcone -->\n <ng-content></ng-content>\n @if (ocKey) {\n <span [innerHTML]=\"ocKey + ':'\"></span>\n }\n <p [innerHTML]=\"sanitizer.bypassSecurityTrustHtml(ocValue)\"></p>\n</div>\n", styles: [".oc-key-value{display:flex;align-items:center;gap:.1rem;font-size:1rem}.oc-key-value p{color:#7e8485;font-weight:500}.oc-key-value span{color:#5505a2;font-weight:500}.oc-key-value .material-symbols-outlined{color:#5505a2;font-size:.95rem}.shui.oc-key-value{display:flex;align-items:center;gap:.1rem;font-size:1rem}.shui.oc-key-value p{color:#7d7d7d;font-weight:500}.shui.oc-key-value span{color:#0169b2;font-weight:500}.shui.oc-key-value .material-symbols-outlined{color:#0169b2;font-size:.95rem}\n"] }]
|
|
24
|
+
}], ctorParameters: () => [{ type: i1.StyleThemeService }, { type: i2.DomSanitizer }], propDecorators: { ocKey: [{
|
|
23
25
|
type: Input
|
|
24
26
|
}], ocValue: [{
|
|
25
27
|
type: Input
|
|
26
28
|
}], ocStyle: [{
|
|
27
29
|
type: Input
|
|
28
30
|
}] } });
|
|
29
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
31
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib2Mta2V5LXZhbHVlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL290aW11cy1saWJyYXJ5L3NyYy9saWIvY29tcG9uZW50cy9vYy1rZXktdmFsdWUvb2Mta2V5LXZhbHVlLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL290aW11cy1saWJyYXJ5L3NyYy9saWIvY29tcG9uZW50cy9vYy1rZXktdmFsdWUvb2Mta2V5LXZhbHVlLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQTtBQUM5QyxPQUFPLEVBQWlCLFNBQVMsRUFBRSxLQUFLLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxlQUFlLENBQUE7Ozs7O0FBYWxGLE1BQU0sT0FBTyxtQkFBbUI7SUFDOUIsWUFDVSxpQkFBb0MsRUFDbEMsU0FBdUI7UUFEekIsc0JBQWlCLEdBQWpCLGlCQUFpQixDQUFtQjtRQUNsQyxjQUFTLEdBQVQsU0FBUyxDQUFjO1FBRTFCLFVBQUssR0FBVyxFQUFFLENBQUE7UUFDbEIsWUFBTyxHQUFXLEVBQUUsQ0FBQTtRQUNwQixZQUFPLEdBQXFCLFFBQVEsQ0FBQTtJQUgxQyxDQUFDO0lBS0osZUFBZTtRQUNiLElBQUksQ0FBQyxPQUFPLEdBQUcsSUFBSSxDQUFDLGlCQUFpQixDQUFDLGFBQWEsRUFBRSxJQUFJLElBQUksQ0FBQyxPQUFPLENBQUE7SUFDdkUsQ0FBQzsrR0FYVSxtQkFBbUI7bUdBQW5CLG1CQUFtQiw0SUNkaEMsbVNBYUEsMmlCREpZLFlBQVk7OzRGQUtYLG1CQUFtQjtrQkFSL0IsU0FBUzsrQkFDRSxjQUFjLGNBQ1osSUFBSSxXQUNQLENBQUMsWUFBWSxDQUFDLGlCQUdSLGlCQUFpQixDQUFDLElBQUk7aUhBTzVCLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0csT0FBTztzQkFBZixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJ1xuaW1wb3J0IHsgQWZ0ZXJWaWV3SW5pdCwgQ29tcG9uZW50LCBJbnB1dCwgVmlld0VuY2Fwc3VsYXRpb24gfSBmcm9tICdAYW5ndWxhci9jb3JlJ1xuaW1wb3J0IHsgT2NTdHlsZVRoZW1lVHlwZSB9IGZyb20gJy4uLy4uL2ludGVyZmFjZXMvb2Mtc3R5bGUtdGhlbWUnXG5pbXBvcnQgeyBTdHlsZVRoZW1lU2VydmljZSB9IGZyb20gJy4uLy4uL3NlcnZpY2VzL3N0eWxlLXRoZW1lLnNlcnZpY2UnXG5pbXBvcnQgeyBEb21TYW5pdGl6ZXIgfSBmcm9tICdAYW5ndWxhci9wbGF0Zm9ybS1icm93c2VyJ1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdvYy1rZXktdmFsdWUnLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlXSxcbiAgdGVtcGxhdGVVcmw6ICcuL29jLWtleS12YWx1ZS5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsOiAnLi9vYy1rZXktdmFsdWUuY29tcG9uZW50LnNjc3MnLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxufSlcbmV4cG9ydCBjbGFzcyBPY0tleVZhbHVlQ29tcG9uZW50IGltcGxlbWVudHMgQWZ0ZXJWaWV3SW5pdCB7XG4gIGNvbnN0cnVjdG9yKFxuICAgIHByaXZhdGUgc3R5bGVUaGVtZVNlcnZpY2U6IFN0eWxlVGhlbWVTZXJ2aWNlLFxuICAgIHByb3RlY3RlZCBzYW5pdGl6ZXI6IERvbVNhbml0aXplclxuICApIHt9XG4gIEBJbnB1dCgpIG9jS2V5OiBzdHJpbmcgPSAnJ1xuICBASW5wdXQoKSBvY1ZhbHVlOiBzdHJpbmcgPSAnJ1xuICBASW5wdXQoKSBvY1N0eWxlOiBPY1N0eWxlVGhlbWVUeXBlID0gJ290aW11cydcblxuICBuZ0FmdGVyVmlld0luaXQoKTogdm9pZCB7XG4gICAgdGhpcy5vY1N0eWxlID0gdGhpcy5zdHlsZVRoZW1lU2VydmljZS5nZXRTdHlsZVRoZW1lKCkgfHwgdGhpcy5vY1N0eWxlXG4gIH1cbn1cbiIsIjxkaXZcbiAgY2xhc3M9XCJvYy1rZXktdmFsdWVcIlxuICBbbmdDbGFzc109XCJ7XG4gICAgc2h1aTogb2NTdHlsZSA9PT0gJ3NodWknLFxuICB9XCJcbj5cbiAgPCEtLSDDjWNvbmUgLS0+XG4gIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbiAgQGlmIChvY0tleSkge1xuICAgIDxzcGFuIFtpbm5lckhUTUxdPVwib2NLZXkgKyAnOidcIj48L3NwYW4+XG4gIH1cbiAgPHAgW2lubmVySFRNTF09XCJzYW5pdGl6ZXIuYnlwYXNzU2VjdXJpdHlUcnVzdEh0bWwob2NWYWx1ZSlcIj48L3A+XG48L2Rpdj5cbiJdfQ==
|
|
@@ -8,10 +8,10 @@ export class OcLogComponent {
|
|
|
8
8
|
this.ocProfilePic = '';
|
|
9
9
|
this.ocUserName = '';
|
|
10
10
|
}
|
|
11
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
12
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.
|
|
11
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OcLogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: OcLogComponent, isStandalone: true, selector: "oc-log", inputs: { ocProfilePic: "ocProfilePic", ocUserName: "ocUserName" }, ngImport: i0, template: "<div class=\"oc-log\">\n <div class=\"left-side\" [ngClass]=\"{\n 'has-profile': ocProfilePic || ocUserName\n }\">\n @if(ocProfilePic || ocUserName) {\n <oc-profile [ocProfilePic]=\"ocProfilePic\" [ocUserName]=\"ocUserName\">\n </oc-profile>\n } @else {\n <div class=\"dot\"></div>\n }\n </div>\n\n <div class=\"content\" [ngClass]=\"{\n 'has-profile-content': ocProfilePic || ocUserName\n }\" selector=\"[content]\">\n <ng-content></ng-content>\n </div>\n</div>", styles: [".oc-log{width:100%;margin:0;border-left:3px solid #d1d5db;position:relative;padding:4rem 0;padding-top:0;border-radius:1rem;border-bottom-left-radius:0;border-top-left-radius:0;transition:.2s ease}.oc-log:hover{background-color:#f7f7f7}.oc-log .has-profile{left:-2.1rem!important}.oc-log .left-side{position:absolute;z-index:8;left:-.6rem;top:0;height:100%;display:flex;align-items:flex-start}.oc-log .left-side .dot{width:1rem;height:1rem;border-radius:.2rem;transform:rotate(45deg);background-color:#5505a2}.content{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;padding-left:2rem;padding-top:1.5rem}.has-profile-content{padding-left:3rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: OcProfileComponent, selector: "oc-profile", inputs: ["ocUserName", "ocProfilePic", "ocSize"] }] }); }
|
|
13
13
|
}
|
|
14
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
14
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OcLogComponent, decorators: [{
|
|
15
15
|
type: Component,
|
|
16
16
|
args: [{ selector: 'oc-log', standalone: true, imports: [CommonModule, OcProfileComponent], template: "<div class=\"oc-log\">\n <div class=\"left-side\" [ngClass]=\"{\n 'has-profile': ocProfilePic || ocUserName\n }\">\n @if(ocProfilePic || ocUserName) {\n <oc-profile [ocProfilePic]=\"ocProfilePic\" [ocUserName]=\"ocUserName\">\n </oc-profile>\n } @else {\n <div class=\"dot\"></div>\n }\n </div>\n\n <div class=\"content\" [ngClass]=\"{\n 'has-profile-content': ocProfilePic || ocUserName\n }\" selector=\"[content]\">\n <ng-content></ng-content>\n </div>\n</div>", styles: [".oc-log{width:100%;margin:0;border-left:3px solid #d1d5db;position:relative;padding:4rem 0;padding-top:0;border-radius:1rem;border-bottom-left-radius:0;border-top-left-radius:0;transition:.2s ease}.oc-log:hover{background-color:#f7f7f7}.oc-log .has-profile{left:-2.1rem!important}.oc-log .left-side{position:absolute;z-index:8;left:-.6rem;top:0;height:100%;display:flex;align-items:flex-start}.oc-log .left-side .dot{width:1rem;height:1rem;border-radius:.2rem;transform:rotate(45deg);background-color:#5505a2}.content{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;padding-left:2rem;padding-top:1.5rem}.has-profile-content{padding-left:3rem}\n"] }]
|
|
17
17
|
}], propDecorators: { ocProfilePic: [{
|
|
@@ -64,10 +64,10 @@ export class OcMenuComponent {
|
|
|
64
64
|
typeof(key) {
|
|
65
65
|
return typeof key;
|
|
66
66
|
}
|
|
67
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
68
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.
|
|
67
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OcMenuComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
68
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: OcMenuComponent, isStandalone: true, selector: "oc-menu", inputs: { ocMenu: "ocMenu" }, outputs: { ocChange: "ocChange" }, viewQueries: [{ propertyName: "menu", first: true, predicate: ["ocMenuEl"], descendants: true }], ngImport: i0, template: "<div class=\"oc-menu\" *ngIf=\"isMenuShown\" cdkMenu #ocMenuEl>\n <ul>\n @for(option of ocMenu; track $index) {\n <li\n [ngClass]=\"{\n 'checkbox-option cbx': typeof(option.checked) === 'boolean'\n }\"\n >\n @if(typeof(option.checked) === 'boolean'){\n <div class=\"checkbox-opt cbx\">\n <oc-checkbox (ocChange)=\"changeCheckbox(option.name, $event)\" [ocChecked]=\"option.checked!\" class=\"cbx\" ocSize=\"tiny\" [ocLabel]=\"option.name\" ocBorderColor=\"gray\"/>\n </div>\n }\n @if(option.icon) {\n <span class=\"material-symbols-outlined\">\n {{option.icon}}\n </span>\n } \n @if(option.callback){\n <button (click)=\"option.callback()\">{{option.name}}</button>\n }\n @if(option.url){\n <a [href]=\"option.url\" [target]=\"option.targetBlank ? '_blank' : ''\">{{option.name}}</a>\n }\n @if (!option.callback && !option.url && typeof(option.checked) !== 'boolean') {\n <span>{{option.name}}</span>\n }\n </li>\n }\n </ul>\n</div>\n", styles: ["*{box-sizing:border-box}.oc-menu{display:flex;flex-direction:column;border-radius:0 8px 8px;background-color:#f8f9ff;border:2px solid #ffffff;position:absolute;z-index:1000;max-height:800px;box-shadow:0 4px 8.7px #00000021;animation:showUp .15s ease}.oc-menu ul{display:flex;flex-direction:column;list-style:none;margin:0;padding:0;width:100%}.oc-menu ul li{text-align:left;text-decoration:none;width:100%;max-height:30px;display:flex;align-items:center;gap:.2rem;white-space:nowrap}.oc-menu ul li .checkbox-opt{min-width:1.3rem}.oc-menu ul li a,.oc-menu ul li button{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.oc-menu ul li a,.oc-menu ul li button,.oc-menu ul li span,.oc-menu ul li .checkbox-opt{color:#8f9596;text-decoration:none;font-size:1rem;font-weight:400;text-align:left;padding:0;margin:0;border:none;padding:.6rem;background-color:transparent;width:100%;height:100%;cursor:pointer}.oc-menu ul li .material-symbols-outlined{width:.3rem;font-size:1.1rem;pointer-events:none}.oc-menu ul li:hover{background-color:#fff}@keyframes showUp{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}\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: CdkMenuModule }, { kind: "directive", type: i2.CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "component", type: OcCheckboxComponent, selector: "oc-checkbox", inputs: ["ocChecked", "ocSize", "ocLabel", "ocName", "ocColor", "ocBorderColor", "ocStyle", "formControl", "ocTabIndex", "disableDoubleClickCheck"], outputs: ["ocChange", "ocDoubleClick"] }] }); }
|
|
69
69
|
}
|
|
70
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
70
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OcMenuComponent, decorators: [{
|
|
71
71
|
type: Component,
|
|
72
72
|
args: [{ selector: 'oc-menu', standalone: true, imports: [CommonModule, CdkMenuModule, OcCheckboxComponent], template: "<div class=\"oc-menu\" *ngIf=\"isMenuShown\" cdkMenu #ocMenuEl>\n <ul>\n @for(option of ocMenu; track $index) {\n <li\n [ngClass]=\"{\n 'checkbox-option cbx': typeof(option.checked) === 'boolean'\n }\"\n >\n @if(typeof(option.checked) === 'boolean'){\n <div class=\"checkbox-opt cbx\">\n <oc-checkbox (ocChange)=\"changeCheckbox(option.name, $event)\" [ocChecked]=\"option.checked!\" class=\"cbx\" ocSize=\"tiny\" [ocLabel]=\"option.name\" ocBorderColor=\"gray\"/>\n </div>\n }\n @if(option.icon) {\n <span class=\"material-symbols-outlined\">\n {{option.icon}}\n </span>\n } \n @if(option.callback){\n <button (click)=\"option.callback()\">{{option.name}}</button>\n }\n @if(option.url){\n <a [href]=\"option.url\" [target]=\"option.targetBlank ? '_blank' : ''\">{{option.name}}</a>\n }\n @if (!option.callback && !option.url && typeof(option.checked) !== 'boolean') {\n <span>{{option.name}}</span>\n }\n </li>\n }\n </ul>\n</div>\n", styles: ["*{box-sizing:border-box}.oc-menu{display:flex;flex-direction:column;border-radius:0 8px 8px;background-color:#f8f9ff;border:2px solid #ffffff;position:absolute;z-index:1000;max-height:800px;box-shadow:0 4px 8.7px #00000021;animation:showUp .15s ease}.oc-menu ul{display:flex;flex-direction:column;list-style:none;margin:0;padding:0;width:100%}.oc-menu ul li{text-align:left;text-decoration:none;width:100%;max-height:30px;display:flex;align-items:center;gap:.2rem;white-space:nowrap}.oc-menu ul li .checkbox-opt{min-width:1.3rem}.oc-menu ul li a,.oc-menu ul li button{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.oc-menu ul li a,.oc-menu ul li button,.oc-menu ul li span,.oc-menu ul li .checkbox-opt{color:#8f9596;text-decoration:none;font-size:1rem;font-weight:400;text-align:left;padding:0;margin:0;border:none;padding:.6rem;background-color:transparent;width:100%;height:100%;cursor:pointer}.oc-menu ul li .material-symbols-outlined{width:.3rem;font-size:1.1rem;pointer-events:none}.oc-menu ul li:hover{background-color:#fff}@keyframes showUp{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}\n"] }]
|
|
73
73
|
}], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { menu: [{
|