otimus-library 0.1.42 → 0.1.44
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 +5 -5
- 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 +3 -3
- 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-table/oc-table.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/oc-toast.service.mjs +3 -3
- package/fesm2022/otimus-library.mjs +82 -82
- package/fesm2022/otimus-library.mjs.map +1 -1
- package/package.json +3 -3
|
@@ -17,10 +17,10 @@ export class OcAccordionComponent {
|
|
|
17
17
|
this.items.forEach((item) => (item.ocIsOpen = false));
|
|
18
18
|
}
|
|
19
19
|
}
|
|
20
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
21
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
20
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: OcAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
21
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: OcAccordionComponent, isStandalone: true, selector: "oc-accordion", inputs: { ocAlternate: "ocAlternate" }, queries: [{ propertyName: "items", predicate: OcAccordionItemComponent }], ngImport: i0, template: "<div>\r\n <ng-content></ng-content>\r\n</div>", styles: [".oc-accordion{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
22
22
|
}
|
|
23
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
23
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: OcAccordionComponent, decorators: [{
|
|
24
24
|
type: Component,
|
|
25
25
|
args: [{ selector: 'oc-accordion', standalone: true, imports: [CommonModule, OcAccordionItemComponent], template: "<div>\r\n <ng-content></ng-content>\r\n</div>", styles: [".oc-accordion{display:flex;flex-direction:column}\n"] }]
|
|
26
26
|
}], propDecorators: { items: [{
|
|
@@ -16,12 +16,12 @@ export class OcAccordionItemComponent {
|
|
|
16
16
|
this.closeAllItems.emit();
|
|
17
17
|
this.ocIsOpen = !this.ocIsOpen;
|
|
18
18
|
}
|
|
19
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
20
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
19
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: OcAccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
20
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: OcAccordionItemComponent, isStandalone: true, selector: "oc-accordion-item", inputs: { ocIsOpen: "ocIsOpen", ocTitle: "ocTitle" }, outputs: { closeAllItems: "closeAllItems" }, ngImport: i0, template: "<div class=\"oc-accordion-item\">\r\n <div class=\"item-header\" [ngClass]=\"{\r\n open: ocIsOpen\r\n }\" (click)=\"toggle()\">\r\n <h3>{{ocTitle}}</h3>\r\n <span class=\"material-symbols-outlined\">\r\n keyboard_control_key\r\n </span>\r\n </div>\r\n @if (ocIsOpen) {\r\n <div class=\"oc-content\">\r\n <ng-content></ng-content>\r\n </div>\r\n }\r\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}.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-left:1.5rem}@keyframes show-up{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
21
21
|
}
|
|
22
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
22
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: OcAccordionItemComponent, decorators: [{
|
|
23
23
|
type: Component,
|
|
24
|
-
args: [{ selector: 'oc-accordion-item', standalone: true, imports: [CommonModule], template: "<div class=\"oc-accordion-item\">\r\n <div class=\"item-header\" [ngClass]=\"{\r\n open: ocIsOpen\r\n }\" (click)=\"toggle()\">\r\n <h3>{{ocTitle}}</h3>\r\n <span class=\"material-symbols-outlined\">\r\n keyboard_control_key\r\n </span>\r\n </div>\r\n @if (ocIsOpen) {\r\n <div class=\"oc-content\">\r\n <ng-content></ng-content>\r\n </div>\r\n }\r\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
|
|
24
|
+
args: [{ selector: 'oc-accordion-item', standalone: true, imports: [CommonModule], template: "<div class=\"oc-accordion-item\">\r\n <div class=\"item-header\" [ngClass]=\"{\r\n open: ocIsOpen\r\n }\" (click)=\"toggle()\">\r\n <h3>{{ocTitle}}</h3>\r\n <span class=\"material-symbols-outlined\">\r\n keyboard_control_key\r\n </span>\r\n </div>\r\n @if (ocIsOpen) {\r\n <div class=\"oc-content\">\r\n <ng-content></ng-content>\r\n </div>\r\n }\r\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}.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-left:1.5rem}@keyframes show-up{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}\n"] }]
|
|
25
25
|
}], propDecorators: { ocIsOpen: [{
|
|
26
26
|
type: Input
|
|
27
27
|
}], ocTitle: [{
|
|
@@ -29,4 +29,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
|
|
|
29
29
|
}], closeAllItems: [{
|
|
30
30
|
type: Output
|
|
31
31
|
}] } });
|
|
32
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
32
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib2MtYWNjb3JkaW9uLWl0ZW0uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvb3RpbXVzLWxpYnJhcnkvc3JjL2xpYi9jb21wb25lbnRzL29jLWFjY29yZGlvbi1pdGVtL29jLWFjY29yZGlvbi1pdGVtLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL290aW11cy1saWJyYXJ5L3NyYy9saWIvY29tcG9uZW50cy9vYy1hY2NvcmRpb24taXRlbS9vYy1hY2NvcmRpb24taXRlbS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUE7QUFDOUMsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQTs7O0FBU3RFLE1BQU0sT0FBTyx3QkFBd0I7SUFQckM7UUFRVyxhQUFRLEdBQVksS0FBSyxDQUFBO1FBQ3pCLFlBQU8sR0FBVyxFQUFFLENBQUE7UUFDbkIsa0JBQWEsR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFBO0tBVTdDO0lBUlcsTUFBTTtRQUNkLElBQUksSUFBSSxDQUFDLFFBQVEsRUFBRSxDQUFDO1lBQ2xCLElBQUksQ0FBQyxRQUFRLEdBQUcsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFBO1lBQzlCLE9BQU07UUFDUixDQUFDO1FBQ0QsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLEVBQUUsQ0FBQTtRQUN6QixJQUFJLENBQUMsUUFBUSxHQUFHLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQTtJQUNoQyxDQUFDOytHQVpVLHdCQUF3QjttR0FBeEIsd0JBQXdCLGdMQ1ZyQyxvWUFjTywrNkJEUkssWUFBWTs7NEZBSVgsd0JBQXdCO2tCQVBwQyxTQUFTOytCQUNFLG1CQUFtQixjQUNqQixJQUFJLFdBQ1AsQ0FBQyxZQUFZLENBQUM7OEJBS2QsUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0ksYUFBYTtzQkFBdEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbidcclxuaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJ1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdvYy1hY2NvcmRpb24taXRlbScsXHJcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcclxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlXSxcclxuICB0ZW1wbGF0ZVVybDogJy4vb2MtYWNjb3JkaW9uLWl0ZW0uY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsOiAnLi9vYy1hY2NvcmRpb24taXRlbS5jb21wb25lbnQuc2NzcycsXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBPY0FjY29yZGlvbkl0ZW1Db21wb25lbnQge1xyXG4gIEBJbnB1dCgpIG9jSXNPcGVuOiBib29sZWFuID0gZmFsc2VcclxuICBASW5wdXQoKSBvY1RpdGxlOiBzdHJpbmcgPSAnJ1xyXG4gIEBPdXRwdXQoKSBjbG9zZUFsbEl0ZW1zID0gbmV3IEV2ZW50RW1pdHRlcigpXHJcblxyXG4gIHByb3RlY3RlZCB0b2dnbGUoKTogdm9pZCB7XHJcbiAgICBpZiAodGhpcy5vY0lzT3Blbikge1xyXG4gICAgICB0aGlzLm9jSXNPcGVuID0gIXRoaXMub2NJc09wZW5cclxuICAgICAgcmV0dXJuXHJcbiAgICB9XHJcbiAgICB0aGlzLmNsb3NlQWxsSXRlbXMuZW1pdCgpXHJcbiAgICB0aGlzLm9jSXNPcGVuID0gIXRoaXMub2NJc09wZW5cclxuICB9XHJcbn1cclxuIiwiPGRpdiBjbGFzcz1cIm9jLWFjY29yZGlvbi1pdGVtXCI+XHJcbiAgPGRpdiBjbGFzcz1cIml0ZW0taGVhZGVyXCIgW25nQ2xhc3NdPVwie1xyXG4gICAgb3Blbjogb2NJc09wZW5cclxuICB9XCIgKGNsaWNrKT1cInRvZ2dsZSgpXCI+XHJcbiAgICA8aDM+e3tvY1RpdGxlfX08L2gzPlxyXG4gICAgPHNwYW4gY2xhc3M9XCJtYXRlcmlhbC1zeW1ib2xzLW91dGxpbmVkXCI+XHJcbiAgICAgIGtleWJvYXJkX2NvbnRyb2xfa2V5XHJcbiAgICAgIDwvc3Bhbj5cclxuICA8L2Rpdj5cclxuICBAaWYgKG9jSXNPcGVuKSB7XHJcbiAgPGRpdiBjbGFzcz1cIm9jLWNvbnRlbnRcIj5cclxuICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cclxuICA8L2Rpdj5cclxuICB9XHJcbjwvZGl2PiAiXX0=
|
|
@@ -143,10 +143,10 @@ export class OcAutocompleteComponent {
|
|
|
143
143
|
this.ocValue = '';
|
|
144
144
|
this.filteredData = this.ocData;
|
|
145
145
|
}
|
|
146
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
147
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
146
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: OcAutocompleteComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
147
|
+
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", ocRequired: "ocRequired", ocMaxResults: "ocMaxResults", ocAllowNotListedValue: "ocAllowNotListedValue", ocNoAvailableOptionsText: "ocNoAvailableOptionsText", ocTypeForMoreResultsText: "ocTypeForMoreResultsText" }, outputs: { ocValueChange: "ocValueChange", ocChange: "ocChange" }, 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 }], 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 class=\"oc-input-box\" [ngClass]=\"{\r\n 'small': ocSize === 'small',\r\n 'large': ocSize === 'large',\r\n error: !!ocError,\r\n prefix: hasPrefix,\r\n suffix: hasSuffix\r\n }\"\r\n >\r\n <ng-content></ng-content>\r\n <input #input (click)=\"toggleOptions()\" type=\"text\" (input)=\"filterData(ocValue)\" [(ngModel)]=\"ocValue\" (ngModelChange)=\"ocValue = $event; ocValueChange.emit($event)\">\r\n <label>{{ocPlaceholder}}\r\n @if(ocRequired) {\r\n <span class=\"oc color error\">*</span>\r\n }\r\n </label>\r\n <small\r\n *ngIf=\"ocError\"\r\n class=\"error-msg\"\r\n >{{ocError}}</small>\r\n <ng-content select=\"ocPrefix\"></ng-content>\r\n <ng-content select=\"ocSuffix\"></ng-content>\r\n\r\n <div \r\n class=\"oc-options-div\"\r\n>\r\n @if(isOptionsShown){\r\n <ul #options class=\"oc-options\">\r\n @if(!filteredData.length){\r\n <li class=\"no-options\">\r\n {{ ocNoAvailableOptionsText || 'Nenhuma op\u00E7\u00E3o dispon\u00EDvel'}}\r\n </li>\r\n }@else {\r\n @for(data of filteredData; track data.value; let i = $index) {\r\n @if(!ocMaxResults || i < ocMaxResults) {\r\n <li>\r\n <button type=\"button\" (click)=\"selectValue(data.value)\">\r\n {{data.name}}\r\n </button>\r\n </li>\r\n }\r\n }\r\n @if(ocMaxResults && filteredData.length > ocMaxResults) {\r\n <li class=\"no-options\">\r\n {{ocTypeForMoreResultsText || 'Digite um valor para mais resultados'}}\r\n </li>\r\n }\r\n }\r\n </ul>\r\n }\r\n</div>\r\n</div>\r\n\r\n", 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{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.prefix .material-symbols-outlined{padding:.5rem .7rem}.oc-input-box.prefix input{padding-left:2.5rem}.oc-input-box.prefix label{padding:.7rem 2.5rem}.oc-input-box.suffix .material-symbols-outlined{padding:.5rem .7rem}.oc-input-box.suffix input{padding-right:2.5rem}.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}.error small,.error label{color:#ed3a3a!important;font-weight:600}input.small input,input.small textarea,input.small select{padding:.3rem .7rem;border-radius:.5rem}input.small.prefix .material-symbols-outlined{padding:.35rem .7rem;font-size:1.25rem}input.small.prefix label{padding:.45rem 2.5rem}input.small.suffix .material-symbols-outlined{padding:.35rem .7rem}input.small.suffix label{padding:.45rem .7rem}input.small label{padding:.5rem .7rem}input.small input:focus~label,input.small input:not(:placeholder-shown)~label,input.small textarea:focus~label,input.small textarea:not(:placeholder-shown)~label,input.small select:focus~label,input.small select:valid~label{transform:translateY(-.99rem) translate(.6rem);color:#7e8485;background-color:#fff;padding:1px 7px;font-weight:500}input.large input,input.large textarea,input.large select{padding:1rem;border-radius:1rem}input.large label,input.large.prefix .material-symbols-outlined{padding:1rem .7rem}input.large.prefix input{padding-left:2.5rem}input.large.prefix label{padding:1.1rem 2.5rem}input.large.suffix .material-symbols-outlined{padding:.9rem .7rem}input.large.suffix input{padding-right:2.5rem}input.large.suffix label{padding:1.1rem .7rem}input.large input:focus~label,input.large input:not(:placeholder-shown)~label,input.large textarea:focus~label,input.large textarea:not(:placeholder-shown)~label,input.large select:focus~label,input.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}.oc-options-div{position:absolute;min-width:20vw}.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}\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"] }] }); }
|
|
148
148
|
}
|
|
149
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
149
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: OcAutocompleteComponent, decorators: [{
|
|
150
150
|
type: Component,
|
|
151
151
|
args: [{ selector: 'oc-autocomplete', standalone: true, imports: [CommonModule, FormsModule], host: {
|
|
152
152
|
'[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
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
17
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: OcBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
18
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: OcBadgeComponent, isStandalone: true, selector: "oc-badge", inputs: { ocSize: "ocSize", ocColor: "ocColor", ocWaved: "ocWaved" }, ngImport: i0, template: "<div>\r\n <div class=\"oc-badge\" [ngClass]=\"classList\">\r\n <ng-content>\r\n \r\n </ng-content>\r\n </div>\r\n</div>\r\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: "
|
|
20
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: OcBadgeComponent, decorators: [{
|
|
21
21
|
type: Component,
|
|
22
22
|
args: [{ selector: 'oc-badge', standalone: true, imports: [CommonModule], template: "<div>\r\n <div class=\"oc-badge\" [ngClass]=\"classList\">\r\n <ng-content>\r\n \r\n </ng-content>\r\n </div>\r\n</div>\r\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: [{
|
|
@@ -36,8 +36,8 @@ export class OcCheckboxComponent {
|
|
|
36
36
|
this.formControl.setValue(this.ocChecked);
|
|
37
37
|
}
|
|
38
38
|
}
|
|
39
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
40
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
39
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: OcCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
40
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: OcCheckboxComponent, isStandalone: true, selector: "oc-checkbox", inputs: { ocChecked: "ocChecked", ocSize: "ocSize", ocLabel: "ocLabel", ocName: "ocName", ocColor: "ocColor", ocBorderColor: "ocBorderColor", formControl: "formControl" }, outputs: { ocChange: "ocChange" }, providers: [
|
|
41
41
|
{
|
|
42
42
|
provide: NG_VALUE_ACCESSOR,
|
|
43
43
|
useExisting: forwardRef(() => OcCheckboxComponent),
|
|
@@ -45,7 +45,7 @@ export class OcCheckboxComponent {
|
|
|
45
45
|
},
|
|
46
46
|
], ngImport: i0, template: "<button class=\"oc-checkbox-content cbx\" type=\"button\"\r\n(click)=\"toggleChecked()\">\r\n\r\n <div class=\"oc-checkbox cbx\" [ngClass]=\"{\r\n 'checked': ocChecked,\r\n 'tiny': ocSize === 'tiny',\r\n purple: ocColor === 'purple',\r\n 'gray-border': ocBorderColor === 'gray'\r\n }\"\r\n >\r\n\r\n <span class=\"check-icon material-symbols-outlined\">check_small</span>\r\n </div>\r\n \r\n @if(ocLabel) {\r\n <span class=\"oc-checkbox-label cbx\">\r\n {{ocLabel}}\r\n </span>\r\n }\r\n\r\n <ng-content>\r\n </ng-content>\r\n\r\n @if(formControl) {\r\n <input [formControl]=\"formControl\" [name]=\"ocName\" [checked]=\"ocChecked\" type=\"checkbox\" hidden>\r\n } @else {\r\n <input [name]=\"ocName\" [checked]=\"ocChecked\" type=\"checkbox\" hidden>\r\n }\r\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}.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;position:absolute;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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
|
|
47
47
|
}
|
|
48
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
48
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: OcCheckboxComponent, decorators: [{
|
|
49
49
|
type: Component,
|
|
50
50
|
args: [{ selector: 'oc-checkbox', standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule], providers: [
|
|
51
51
|
{
|
|
@@ -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: "
|
|
27
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
26
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: OcChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
27
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", 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\r\n [ngClass]=\"{\r\n 'oc-chip': true,\r\n selected: ocSelected,\r\n 'not-selectable': ocType !== 'select' && ocType !== 'select_remove',\r\n 'tag': ocType === 'tag',\r\n 'remove': ocType === 'remove' || ocType==='select_remove',\r\n 'green-bg': ocBg === 'green',\r\n 'red-bg': ocBg === 'red',\r\n 'yellow-bg': ocBg === 'yellow'\r\n }\"\r\n type=\"button\"\r\n [title]=\"ocText\"\r\n (click)=\"ocType.includes('select') ? ocEvent($event) : null\"\r\n>\r\n <ng-content></ng-content>\r\n @if (ocType.includes('remove')) {\r\n <span class=\"material-symbols-outlined\" (click)=\"ocRemoveEvent($event)\">close</span>\r\n }\r\n</button>\r\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: "
|
|
29
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: OcChipComponent, decorators: [{
|
|
30
30
|
type: Component,
|
|
31
31
|
args: [{ selector: 'oc-chip', standalone: true, imports: [CommonModule], template: "<button\r\n [ngClass]=\"{\r\n 'oc-chip': true,\r\n selected: ocSelected,\r\n 'not-selectable': ocType !== 'select' && ocType !== 'select_remove',\r\n 'tag': ocType === 'tag',\r\n 'remove': ocType === 'remove' || ocType==='select_remove',\r\n 'green-bg': ocBg === 'green',\r\n 'red-bg': ocBg === 'red',\r\n 'yellow-bg': ocBg === 'yellow'\r\n }\"\r\n type=\"button\"\r\n [title]=\"ocText\"\r\n (click)=\"ocType.includes('select') ? ocEvent($event) : null\"\r\n>\r\n <ng-content></ng-content>\r\n @if (ocType.includes('remove')) {\r\n <span class=\"material-symbols-outlined\" (click)=\"ocRemoveEvent($event)\">close</span>\r\n }\r\n</button>\r\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: [{
|
|
@@ -13,10 +13,10 @@ export class OcFilterComponent {
|
|
|
13
13
|
toggleOpen() {
|
|
14
14
|
this.isOpen = !this.isOpen;
|
|
15
15
|
}
|
|
16
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
17
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
16
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: OcFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
17
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: OcFilterComponent, isStandalone: true, selector: "oc-filter", inputs: { isOpen: "isOpen", ocText: "ocText", ocActive: "ocActive", ocSide: "ocSide" }, ngImport: i0, template: "<div class=\"oc-filter-row\" [ngClass]=\"{\r\n reverse: ocSide === 'right'\r\n}\">\r\n <button class=\"oc-filter-btn\" (click)=\"toggleOpen()\">\r\n <span class=\"material-symbols-outlined\">filter_list</span>\r\n {{ocText}}\r\n <div class=\"badge\">\r\n <oc-badge *ngIf=\"ocActive > 0\" ocSize=\"small\" ocColor=\"success\" [ocWaved]=\"true\">{{ocActive}}</oc-badge>\r\n </div>\r\n </button>\r\n \r\n <div class=\"filter-row-content\">\r\n <ng-content select=\"[row]\"></ng-content>\r\n </div>\r\n \r\n</div>\r\n<div *ngIf=\"isOpen\" class=\"oc-filter-content\">\r\n <ng-content select=\"[body]\">\r\n </ng-content>\r\n</div>\r\n", 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-content{width:100%;animation:showing-up .15s ease;overflow:hidden;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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OcBadgeComponent, selector: "oc-badge", inputs: ["ocSize", "ocColor", "ocWaved"] }] }); }
|
|
18
18
|
}
|
|
19
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
19
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: OcFilterComponent, decorators: [{
|
|
20
20
|
type: Component,
|
|
21
21
|
args: [{ selector: 'oc-filter', standalone: true, imports: [CommonModule, OcBadgeComponent], template: "<div class=\"oc-filter-row\" [ngClass]=\"{\r\n reverse: ocSide === 'right'\r\n}\">\r\n <button class=\"oc-filter-btn\" (click)=\"toggleOpen()\">\r\n <span class=\"material-symbols-outlined\">filter_list</span>\r\n {{ocText}}\r\n <div class=\"badge\">\r\n <oc-badge *ngIf=\"ocActive > 0\" ocSize=\"small\" ocColor=\"success\" [ocWaved]=\"true\">{{ocActive}}</oc-badge>\r\n </div>\r\n </button>\r\n \r\n <div class=\"filter-row-content\">\r\n <ng-content select=\"[row]\"></ng-content>\r\n </div>\r\n \r\n</div>\r\n<div *ngIf=\"isOpen\" class=\"oc-filter-content\">\r\n <ng-content select=\"[body]\">\r\n </ng-content>\r\n</div>\r\n", 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-content{width:100%;animation:showing-up .15s ease;overflow:hidden;margin-top:1rem}@keyframes showing-up{0%{height:0px;opacity:0}to{height:100%;opacity:1}}\n"] }]
|
|
22
22
|
}], propDecorators: { isOpen: [{
|
|
@@ -44,10 +44,10 @@ export class OcInputComponent {
|
|
|
44
44
|
if (this.ocSuffix)
|
|
45
45
|
this.hasSuffix = true;
|
|
46
46
|
}
|
|
47
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
48
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
47
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: OcInputComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
48
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: OcInputComponent, isStandalone: true, selector: "oc-input", inputs: { ocError: "ocError", ocSize: "ocSize", ocPlaceholder: "ocPlaceholder", ocWidth: "ocWidth", ocMinWidth: "ocMinWidth", ocMaxWidth: "ocMaxWidth", ocRequired: "ocRequired" }, 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 class=\"oc-input-box\" [ngClass]=\"{\r\n 'small': ocSize === 'small',\r\n 'large': ocSize === 'large',\r\n error: !!ocError,\r\n prefix: hasPrefix,\r\n suffix: hasSuffix\r\n}\"\r\n [id]=\"inputId\">\r\n <ng-content></ng-content>\r\n <ng-content select=\"ocPrefix\"></ng-content>\r\n <ng-content select=\"ocSuffix\"></ng-content>\r\n <label>{{ocPlaceholder}}\r\n @if(ocRequired) {\r\n <span class=\"oc color error\">*</span>\r\n }\r\n </label>\r\n <small\r\n *ngIf=\"ocError\"\r\n class=\"error-msg\"\r\n >{{ocError}}</small>\r\n</div>\r\n\r\n", 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{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.prefix .material-symbols-outlined{padding:.5rem .7rem}.oc-input-box.prefix input{padding-left:2.5rem}.oc-input-box.prefix label{padding:.7rem 2.5rem}.oc-input-box.suffix .material-symbols-outlined{padding:.5rem .7rem}.oc-input-box.suffix input{padding-right:2.5rem}.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}.error small,.error label{color:#ed3a3a!important;font-weight:600}input.small input,input.small textarea,input.small select{padding:.3rem .7rem;border-radius:.5rem}input.small.prefix .material-symbols-outlined{padding:.35rem .7rem;font-size:1.25rem}input.small.prefix label{padding:.45rem 2.5rem}input.small.suffix .material-symbols-outlined{padding:.35rem .7rem}input.small.suffix label{padding:.45rem .7rem}input.small label{padding:.5rem .7rem}input.small input:focus~label,input.small input:not(:placeholder-shown)~label,input.small textarea:focus~label,input.small textarea:not(:placeholder-shown)~label,input.small select:focus~label,input.small select:valid~label{transform:translateY(-.99rem) translate(.6rem);color:#7e8485;background-color:#fff;padding:1px 7px;font-weight:500}input.large input,input.large textarea,input.large select{padding:1rem;border-radius:1rem}input.large label,input.large.prefix .material-symbols-outlined{padding:1rem .7rem}input.large.prefix input{padding-left:2.5rem}input.large.prefix label{padding:1.1rem 2.5rem}input.large.suffix .material-symbols-outlined{padding:.9rem .7rem}input.large.suffix input{padding-right:2.5rem}input.large.suffix label{padding:1.1rem .7rem}input.large input:focus~label,input.large input:not(:placeholder-shown)~label,input.large textarea:focus~label,input.large textarea:not(:placeholder-shown)~label,input.large select:focus~label,input.large select:valid~label{transform:translateY(-.77rem) translate(.6rem);color:#7e8485;background-color:#fff;padding:1px 7px;font-weight:500}\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"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
49
49
|
}
|
|
50
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
50
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: OcInputComponent, decorators: [{
|
|
51
51
|
type: Component,
|
|
52
52
|
args: [{ selector: 'oc-input', host: {
|
|
53
53
|
'[style.width]': 'computedWidth',
|
|
@@ -5,10 +5,10 @@ export class OcKeyValueComponent {
|
|
|
5
5
|
this.ocKey = '';
|
|
6
6
|
this.ocValue = '';
|
|
7
7
|
}
|
|
8
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
9
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
8
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: OcKeyValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: OcKeyValueComponent, isStandalone: true, selector: "oc-key-value", inputs: { ocKey: "ocKey", ocValue: "ocValue" }, ngImport: i0, template: "<div class=\"oc-key-value\">\r\n <!-- \u00CDcone -->\r\n <ng-content></ng-content>\r\n <p>\r\n @if (ocKey) {\r\n <span>{{ocKey}}:</span>\r\n }\r\n {{ocValue}}\r\n </p>\r\n</div>", 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}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
10
10
|
}
|
|
11
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
11
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: OcKeyValueComponent, decorators: [{
|
|
12
12
|
type: Component,
|
|
13
13
|
args: [{ selector: 'oc-key-value', standalone: true, imports: [], encapsulation: ViewEncapsulation.None, template: "<div class=\"oc-key-value\">\r\n <!-- \u00CDcone -->\r\n <ng-content></ng-content>\r\n <p>\r\n @if (ocKey) {\r\n <span>{{ocKey}}:</span>\r\n }\r\n {{ocValue}}\r\n </p>\r\n</div>", 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}\n"] }]
|
|
14
14
|
}], propDecorators: { ocKey: [{
|
|
@@ -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: "
|
|
12
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
11
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: OcLogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: OcLogComponent, isStandalone: true, selector: "oc-log", inputs: { ocProfilePic: "ocProfilePic", ocUserName: "ocUserName" }, ngImport: i0, template: "<div class=\"oc-log\">\r\n <div class=\"left-side\" [ngClass]=\"{\r\n 'has-profile': ocProfilePic || ocUserName\r\n }\">\r\n @if(ocProfilePic || ocUserName) {\r\n <oc-profile [ocProfilePic]=\"ocProfilePic\" [ocUserName]=\"ocUserName\">\r\n </oc-profile>\r\n } @else {\r\n <div class=\"dot\"></div>\r\n }\r\n </div>\r\n\r\n <div class=\"content\" [ngClass]=\"{\r\n 'has-profile-content': ocProfilePic || ocUserName\r\n }\" selector=\"[content]\">\r\n <ng-content></ng-content>\r\n </div>\r\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: "
|
|
14
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", 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\">\r\n <div class=\"left-side\" [ngClass]=\"{\r\n 'has-profile': ocProfilePic || ocUserName\r\n }\">\r\n @if(ocProfilePic || ocUserName) {\r\n <oc-profile [ocProfilePic]=\"ocProfilePic\" [ocUserName]=\"ocUserName\">\r\n </oc-profile>\r\n } @else {\r\n <div class=\"dot\"></div>\r\n }\r\n </div>\r\n\r\n <div class=\"content\" [ngClass]=\"{\r\n 'has-profile-content': ocProfilePic || ocUserName\r\n }\" selector=\"[content]\">\r\n <ng-content></ng-content>\r\n </div>\r\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: "
|
|
68
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
67
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", 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.12", 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>\r\n <ul>\r\n @for(option of ocMenu; track $index) {\r\n <li\r\n [ngClass]=\"{\r\n 'checkbox-option cbx': typeof(option.checked) === 'boolean'\r\n }\"\r\n >\r\n @if(typeof(option.checked) === 'boolean'){\r\n <div class=\"checkbox-opt cbx\">\r\n <oc-checkbox (ocChange)=\"changeCheckbox(option.name, $event)\" [ocChecked]=\"option.checked!\" class=\"cbx\" ocSize=\"tiny\" [ocLabel]=\"option.name\" ocBorderColor=\"gray\"/>\r\n </div>\r\n }\r\n @if(option.icon) {\r\n <span class=\"material-symbols-outlined\">\r\n {{option.icon}}\r\n </span>\r\n } \r\n @if(option.callback){\r\n <button (click)=\"option.callback()\">{{option.name}}</button>\r\n }\r\n @if(option.url){\r\n <a [href]=\"option.url\" [target]=\"option.targetBlank ? '_blank' : ''\">{{option.name}}</a>\r\n }\r\n @if (!option.callback && !option.url && typeof(option.checked) !== 'boolean') {\r\n <span>{{option.name}}</span>\r\n }\r\n </li>\r\n }\r\n </ul>\r\n</div>\r\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", "formControl"], outputs: ["ocChange"] }] }); }
|
|
69
69
|
}
|
|
70
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
70
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", 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>\r\n <ul>\r\n @for(option of ocMenu; track $index) {\r\n <li\r\n [ngClass]=\"{\r\n 'checkbox-option cbx': typeof(option.checked) === 'boolean'\r\n }\"\r\n >\r\n @if(typeof(option.checked) === 'boolean'){\r\n <div class=\"checkbox-opt cbx\">\r\n <oc-checkbox (ocChange)=\"changeCheckbox(option.name, $event)\" [ocChecked]=\"option.checked!\" class=\"cbx\" ocSize=\"tiny\" [ocLabel]=\"option.name\" ocBorderColor=\"gray\"/>\r\n </div>\r\n }\r\n @if(option.icon) {\r\n <span class=\"material-symbols-outlined\">\r\n {{option.icon}}\r\n </span>\r\n } \r\n @if(option.callback){\r\n <button (click)=\"option.callback()\">{{option.name}}</button>\r\n }\r\n @if(option.url){\r\n <a [href]=\"option.url\" [target]=\"option.targetBlank ? '_blank' : ''\">{{option.name}}</a>\r\n }\r\n @if (!option.callback && !option.url && typeof(option.checked) !== 'boolean') {\r\n <span>{{option.name}}</span>\r\n }\r\n </li>\r\n }\r\n </ul>\r\n</div>\r\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: [{
|