oxpi-nglib 1.0.9 → 1.0.13

package/fesm2020/oxpi-nglib.mjs

@@ -141,12 +141,14 @@ class CommonWebService {
         this.ESTOQUE_URL = '';
         this.MEDIA_BASE_URL = '';
         this.MEDIA_PRODUTO_IMAGEM_URL = '';
+        this.PRODUTO_COMPOSICAO_BASE_URL = '';
     }
     setToken(token) {
         this.token = token;
     }
     start(rootUrl) {
         this.ROOT_URL = rootUrl;
+        this.PRODUTO_COMPOSICAO_BASE_URL = rootUrl + "ProdutoComposicao/";
         this.FUNCIONARIO_BASE_URL = rootUrl + "Funcionario/";
         this.FUNCIONARIO_CARGO_BASE_URL = rootUrl + "FuncionarioCargo/";
         this.PRODUTO_BASE_URL = rootUrl + "ProdutoFiscal/";
@@ -296,6 +298,24 @@ class CommonWebService {
         const url = this.ESTOQUE_URL + 'Setor/';
         return this.http.get(url, this.getHttpOptions()).pipe(map(data => data));
     }
+    getProdutoComposicao(produtoId) {
+        const url = this.PRODUTO_COMPOSICAO_BASE_URL;
+        const params = new HttpParams()
+            .set("produtoId", '' + produtoId);
+        return this.http.get(url, this.getHttpOptions(params)).pipe(map(data => data));
+    }
+    saveProdutoComposicao(s) {
+        const url = this.PRODUTO_COMPOSICAO_BASE_URL;
+        return this.http.post(url, JSON.stringify(s), this.getHttpOptions()).pipe(map(data => data));
+    }
+    addProdutoComposicao(p) {
+        const url = this.PRODUTO_COMPOSICAO_BASE_URL;
+        return this.http.put(url, JSON.stringify(p), this.getHttpOptions()).pipe(map(data => data));
+    }
+    deleteProdutoComposicao(id) {
+        const url = this.PRODUTO_COMPOSICAO_BASE_URL + id;
+        return this.http.delete(url, this.getHttpOptions()).pipe(map(data => data));
+    }
     getHttpOptions(parameters) {
         return {
             headers: new HttpHeaders({
@@ -981,6 +1001,8 @@ class AuthDataService {
         this.userId = 0;
         this.email = '';
         this.nome = '';
+        this.usaEstoqueOnline = false;
+        this.usaFinancasOnline = false;
     }
     login(result) {
         this.isLoggedIn = true;
@@ -993,6 +1015,8 @@ class AuthDataService {
         this.userId = result.userId;
         this.nome = result.nome;
         this.email = result.email;
+        this.usaEstoqueOnline = result.usaEstoqueOnline;
+        this.usaFinancasOnline = result.usaFinancasOnline;
     }
 }
 AuthDataService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: AuthDataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -1926,13 +1950,16 @@ class ProdutoSubgrupoSelecaoDialogComponent {
     atualiza() {
         this.isBusy = true;
         this.ws.buscaProdutoSubgrupo(this.setting)
-            .subscribe(r => {
-            this.isBusy = false;
-            this.items = r;
-            console.info(r);
-        }, err => {
-            this.isBusy = false;
-            this.notification.showHttpError(err);
+            .subscribe({
+            next: r => {
+                this.isBusy = false;
+                this.items = r;
+                console.info(r);
+            },
+            error: err => {
+                this.isBusy = false;
+                this.notification.showHttpError(err);
+            }
         });
     }
     selectItem(i) {
@@ -2410,26 +2437,30 @@ class ProdutoAddDialogComponent {
         }
         this.isBusy = true;
         this.ws.addProduto(this.model)
-            .subscribe(r => {
-            this.isBusy = false;
-            this.notification.showMsg("Salvo com sucesso.");
-            if (this.dialogRef)
-                this.dialogRef.close(true);
-        }, err => {
-            this.isBusy = false;
-            this.notification.showMsg(err.error);
+            .subscribe({
+            next: r => {
+                this.isBusy = false;
+                this.notification.showMsg("Salvo com sucesso.");
+                if (this.dialogRef)
+                    this.dialogRef.close(true);
+            }, error: err => {
+                this.isBusy = false;
+                this.notification.showMsg(err.error);
+            }
         });
     }
     getNextId() {
         this.isBusy = true;
         this.ws.getNextIdProduto()
-            .subscribe(r => {
-            this.model.id = r;
-            this.model.referencia = '' + r;
-            this.isBusy = false;
-        }, err => {
-            this.isBusy = false;
-            this.notification.showMsg(err.error);
+            .subscribe({
+            next: r => {
+                this.model.id = r;
+                this.model.referencia = '' + r;
+                this.isBusy = false;
+            }, error: err => {
+                this.isBusy = false;
+                this.notification.showMsg(err.error);
+            }
         });
     }
 }
@@ -2551,6 +2582,319 @@ class ProdutoSearchSetting extends SearchSetting {
     }
 }
 
+function validaProdutoComposicao(item, focus) {
+    if (valNumberMin(item.quantidade, 0)) {
+        focus.set('quantidade');
+        return 'Digite uma quantidade válida.';
+    }
+    return null;
+}
+
+class ProdutoComposicaoAddDialogComponent {
+    constructor(model, ws, notification, dialogRef, screenHelper) {
+        this.model = model;
+        this.ws = ws;
+        this.notification = notification;
+        this.dialogRef = dialogRef;
+        this.screenHelper = screenHelper;
+        this.isBusy = false;
+        this.focus = new FocusService();
+        this.mobile = this.screenHelper.isMedium;
+        this.screenHelper.changedMediumScreen.subscribe(x => this.mobile = x);
+    }
+    ngOnInit() {
+    }
+    salvar() {
+        if (!this.model)
+            return;
+        const valMsg = validaProdutoComposicao(this.model, this.focus);
+        if (valMsg) {
+            this.notification.showMsgError(valMsg);
+            return;
+        }
+        this.isBusy = true;
+        const onFinished = {
+            next: (r) => {
+                this.isBusy = false;
+                this.notification.showMsg("Salvo com sucesso.");
+                if (this.dialogRef)
+                    this.dialogRef.close(true);
+            },
+            error: (err) => {
+                this.isBusy = false;
+                this.notification.showMsg(err.error);
+            }
+        };
+        if (this.model.id === 0) {
+            this.ws.addProdutoComposicao(this.model)
+                .subscribe(onFinished);
+        }
+        else {
+            this.ws.saveProdutoComposicao(this.model)
+                .subscribe(onFinished);
+        }
+    }
+}
+ProdutoComposicaoAddDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: ProdutoComposicaoAddDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: CommonWebService }, { token: NotificationService }, { token: i3.MatDialogRef }, { token: ScreenHelperService }], target: i0.ɵɵFactoryTarget.Component });
+ProdutoComposicaoAddDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.5", type: ProdutoComposicaoAddDialogComponent, selector: "lib-produto-composicao-add-dialog", ngImport: i0, template: "<div class=\"ox-header\">\n    <span class=\"titulo\">Composi\u00E7\u00E3o do '{{model.produtoNome}}'</span>\n    <button mat-icon-button mat-dialog-close>\n        <mat-icon>close</mat-icon>\n    </button>\n</div>\n<ox-busy-indicator [isBusy]=\"isBusy\"></ox-busy-indicator>\n<div class=\"dialog-content\">\n    <h4>{{model.produtoItemNome}}</h4>\n    <div class=\"vbox margin-top-32\">\n        <div class=\"form-group\">\n            <label>Quantidade</label>\n            <input id=\"quantidade\" [(ngModel)]=\"model.quantidade\" class=\"form-control input-120\" maxlength=\"10\" type=\"number\">\n        </div>\n    </div>\n</div>\n<div class=\"dialog-footer\">\n    <button mat-button (click)=\"salvar()\">CONFIRMAR</button>\n</div>", styles: [":host{background:#fafafa;display:flex;flex-direction:column;height:100%;max-height:99vh}\n"], dependencies: [{ kind: "directive", type: i7.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: i7.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: BusyIndicatorComponent, selector: "ox-busy-indicator", inputs: ["isBusy"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: ProdutoComposicaoAddDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-produto-composicao-add-dialog', template: "<div class=\"ox-header\">\n    <span class=\"titulo\">Composi\u00E7\u00E3o do '{{model.produtoNome}}'</span>\n    <button mat-icon-button mat-dialog-close>\n        <mat-icon>close</mat-icon>\n    </button>\n</div>\n<ox-busy-indicator [isBusy]=\"isBusy\"></ox-busy-indicator>\n<div class=\"dialog-content\">\n    <h4>{{model.produtoItemNome}}</h4>\n    <div class=\"vbox margin-top-32\">\n        <div class=\"form-group\">\n            <label>Quantidade</label>\n            <input id=\"quantidade\" [(ngModel)]=\"model.quantidade\" class=\"form-control input-120\" maxlength=\"10\" type=\"number\">\n        </div>\n    </div>\n</div>\n<div class=\"dialog-footer\">\n    <button mat-button (click)=\"salvar()\">CONFIRMAR</button>\n</div>", styles: [":host{background:#fafafa;display:flex;flex-direction:column;height:100%;max-height:99vh}\n"] }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: CommonWebService }, { type: NotificationService }, { type: i3.MatDialogRef }, { type: ScreenHelperService }]; } });
+
+class ProdutoSelecaoDialogComponent {
+    constructor(dialogRef, dialog, ws, notification, auth, screenHelper) {
+        this.dialogRef = dialogRef;
+        this.dialog = dialog;
+        this.ws = ws;
+        this.notification = notification;
+        this.screenHelper = screenHelper;
+        this.items = [];
+        this.selectedItem = null;
+        this.isBusy = false;
+        this.setting = new SearchSetting();
+        this.lazyTrigger = new LazyTrigger(() => { this.atualiza(); });
+        this.nav = new NavegacaoSelecaoDialogUtil(this);
+        this.mobile = this.screenHelper.isMedium;
+        this.allowAdd = auth.permissoes.adminProdutoAdd;
+        this.allowEdit = auth.permissoes.adminProdutoPesquisa;
+    }
+    ngOnInit() {
+        this.atualiza();
+    }
+    atualiza() {
+        this.isBusy = true;
+        this.ws.buscaPaginadaProdutos(this.setting, 1, 50)
+            .subscribe({
+            next: r => {
+                this.isBusy = false;
+                this.items = r.items;
+                console.info(r);
+            },
+            error: err => {
+                this.isBusy = false;
+                this.notification.showHttpError(err);
+            }
+        });
+    }
+    selectItem(i) {
+        if (this.selectedItem === i) {
+            this.dialogRef.close(i);
+        }
+        this.selectedItem = i;
+    }
+    editar() {
+        const item = this.selectedItem;
+        if (!item)
+            return;
+        this.abreCadastro(item);
+    }
+    abreCadastro(item) {
+        let height = undefined;
+        let width = 550 + 'px';
+        if (this.mobile) {
+            width = (window.innerWidth * 0.99) + 'px';
+            height = (window.innerHeight * 0.99) + 'px';
+        }
+        const dialog = this.dialog.open(ProdutoEditDialogComponent, {
+            data: item,
+            width: width,
+            height: height,
+            maxWidth: '100%',
+            panelClass: 'dialog-p0',
+        });
+        dialog.afterClosed().subscribe(result => {
+            if (result !== true)
+                return;
+            this.notification.showMsg("Salvo com sucesso.");
+            this.atualiza();
+        });
+    }
+    novo() {
+        let height = (window.innerHeight * 0.90) + 'px';
+        let width = 550 + 'px';
+        if (this.mobile) {
+            width = (window.innerWidth * 0.99) + 'px';
+            //height = (window.innerHeight * 0.98) + 'px';
+        }
+        const dialog = this.dialog.open(ProdutoAddDialogComponent, {
+            width: width,
+            height: height,
+            maxWidth: '100%',
+            panelClass: 'dialog-p0',
+        });
+        dialog.afterClosed().subscribe(result => {
+            if (result === undefined)
+                return;
+            this.notification.showMsg("Salvo com sucesso.");
+            this.atualiza();
+        });
+    }
+    excluir() {
+        const item = this.selectedItem;
+        if (!item)
+            return;
+        confirmaExclusao(this.dialog, `Deseja prosseguir com a exclusão do produto ${item.nome}?`, () => {
+            this.isBusy = true;
+            this.ws.deleteProduto(item.id)
+                .subscribe({
+                next: r => {
+                    this.notification.showMsg("O produto foi excluído com sucesso.");
+                    this.items.remove(item);
+                    this.selectedItem = null;
+                    this.isBusy = false;
+                },
+                error: err => {
+                    this.isBusy = false;
+                    this.notification.showMsg(err.error);
+                }
+            });
+        });
+    }
+}
+ProdutoSelecaoDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: ProdutoSelecaoDialogComponent, deps: [{ token: i3.MatDialogRef }, { token: i3.MatDialog }, { token: CommonWebService }, { token: NotificationService }, { token: AuthDataService }, { token: ScreenHelperService }], target: i0.ɵɵFactoryTarget.Component });
+ProdutoSelecaoDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.5", type: ProdutoSelecaoDialogComponent, selector: "lib-produto-selecao-dialog", ngImport: i0, template: "<div class=\"dialog-header\">\n    <h2>Sele\u00E7\u00E3o de Subgrupos</h2>\n  </div>\n  <div class=\"tool-panel\">\n    <div class=\"tool-section\">\n      <label>Pesquisa</label>\n      <div class=\"search-input-container\">\n        <input (keydown)=\"nav.onKeyDown($event)\" cdkFocusInitial [(ngModel)]=\"setting.frase\" placeholder=\"Digite um termo de busca...\" (input)=\"lazyTrigger.fire()\">\n      </div>\n    </div>\n    <div class=\"tool-section\">\n      <label>A\u00E7\u00F5es</label>\n      <div class=\"tool-row\">\n        <button mat-icon-button (click)=\"atualiza()\">\n          <mat-icon aria-label=\"Atualizar\">refresh</mat-icon>\n        </button>\n        <button mat-icon-button (click)=\"novo()\" *ngIf=\"allowAdd\">\n          <mat-icon aria-label=\"novo\">add</mat-icon>\n        </button>\n        <button mat-icon-button (click)=\"editar()\" *ngIf=\"selectedItem  && allowEdit\">\n          <mat-icon aria-label=\"editar\">edit</mat-icon>\n        </button>\n      </div>\n    </div>\n  </div>\n  <div class=\"dialog-content\">\n      <ox-item-card [nome]=\"i.nome\" (click)=\"selectItem(i)\" *ngFor=\"let i of items\" [class.selected]=\"i === selectedItem\"></ox-item-card>\n  </div>\n  <div class=\"dialog-footer\">\n    <button mat-button [disabled]=\"selectedItem == null\" color=\"primary\" [mat-dialog-close]=\"selectedItem\">CONFIRMAR</button>\n    <button mat-button [mat-dialog-close]=\"undefined\">VOLTAR</button>\n  </div>\n  <ox-busy-indicator [isBusy]=\"isBusy\"></ox-busy-indicator>", styles: [":host{background:#fafafa;display:flex;flex-direction:column;height:100%;max-height:99vh}\n"], dependencies: [{ kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: BusyIndicatorComponent, selector: "ox-busy-indicator", inputs: ["isBusy"] }, { kind: "component", type: ItemCardComponent, selector: "ox-item-card", inputs: ["nome", "codigo", "star", "cloud", "desativado"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: ProdutoSelecaoDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-produto-selecao-dialog', template: "<div class=\"dialog-header\">\n    <h2>Sele\u00E7\u00E3o de Subgrupos</h2>\n  </div>\n  <div class=\"tool-panel\">\n    <div class=\"tool-section\">\n      <label>Pesquisa</label>\n      <div class=\"search-input-container\">\n        <input (keydown)=\"nav.onKeyDown($event)\" cdkFocusInitial [(ngModel)]=\"setting.frase\" placeholder=\"Digite um termo de busca...\" (input)=\"lazyTrigger.fire()\">\n      </div>\n    </div>\n    <div class=\"tool-section\">\n      <label>A\u00E7\u00F5es</label>\n      <div class=\"tool-row\">\n        <button mat-icon-button (click)=\"atualiza()\">\n          <mat-icon aria-label=\"Atualizar\">refresh</mat-icon>\n        </button>\n        <button mat-icon-button (click)=\"novo()\" *ngIf=\"allowAdd\">\n          <mat-icon aria-label=\"novo\">add</mat-icon>\n        </button>\n        <button mat-icon-button (click)=\"editar()\" *ngIf=\"selectedItem  && allowEdit\">\n          <mat-icon aria-label=\"editar\">edit</mat-icon>\n        </button>\n      </div>\n    </div>\n  </div>\n  <div class=\"dialog-content\">\n      <ox-item-card [nome]=\"i.nome\" (click)=\"selectItem(i)\" *ngFor=\"let i of items\" [class.selected]=\"i === selectedItem\"></ox-item-card>\n  </div>\n  <div class=\"dialog-footer\">\n    <button mat-button [disabled]=\"selectedItem == null\" color=\"primary\" [mat-dialog-close]=\"selectedItem\">CONFIRMAR</button>\n    <button mat-button [mat-dialog-close]=\"undefined\">VOLTAR</button>\n  </div>\n  <ox-busy-indicator [isBusy]=\"isBusy\"></ox-busy-indicator>", styles: [":host{background:#fafafa;display:flex;flex-direction:column;height:100%;max-height:99vh}\n"] }]
+        }], ctorParameters: function () { return [{ type: i3.MatDialogRef }, { type: i3.MatDialog }, { type: CommonWebService }, { type: NotificationService }, { type: AuthDataService }, { type: ScreenHelperService }]; } });
+
+class ProdutoComposicaoComponent {
+    constructor(dialogRef, dialog, produto, ws, notification, screenHelper) {
+        this.dialogRef = dialogRef;
+        this.dialog = dialog;
+        this.produto = produto;
+        this.ws = ws;
+        this.notification = notification;
+        this.screenHelper = screenHelper;
+        this.items = [];
+        this.selectedItem = null;
+        this.isBusy = false;
+        this.mobile = this.screenHelper.isMedium;
+    }
+    ngOnInit() {
+        this.atualiza();
+    }
+    atualiza() {
+        this.isBusy = true;
+        this.ws.getProdutoComposicao(this.produto.id)
+            .subscribe({
+            next: r => {
+                this.isBusy = false;
+                for (const item of r) {
+                    item.produtoId = this.produto.id;
+                    item.produtoNome = this.produto.nome;
+                }
+                this.items = r;
+                console.info(r);
+            },
+            error: err => {
+                this.isBusy = false;
+                this.notification.showHttpError(err);
+            }
+        });
+    }
+    selectItem(i) {
+        this.selectedItem = i;
+    }
+    novo() {
+        let height = (window.innerHeight * 0.90) + 'px';
+        let width = 550 + 'px';
+        if (this.mobile) {
+            width = (window.innerWidth * 0.99) + 'px';
+            //height = (window.innerHeight * 0.98) + 'px';
+        }
+        const dialog = this.dialog.open(ProdutoSelecaoDialogComponent, {
+            width: width,
+            //height: height,
+            maxWidth: '100%',
+            panelClass: 'dialog-p0',
+        });
+        dialog.afterClosed().subscribe(result => {
+            if (result === undefined)
+                return;
+            const p = result;
+            const composicao = {
+                id: 0,
+                produtoId: this.produto.id,
+                produtoNome: this.produto.nome,
+                produtoItemId: p.id,
+                produtoItemNome: p.nome,
+                quantidade: 1
+            };
+            const dialog2 = this.dialog.open(ProdutoComposicaoAddDialogComponent, {
+                width: width,
+                //height: height,
+                data: composicao,
+                maxWidth: '100%',
+                panelClass: 'dialog-p0',
+            });
+            dialog2.afterClosed().subscribe(result => {
+                if (result === undefined)
+                    return;
+                this.notification.showMsg("Salvo com sucesso.");
+                this.atualiza();
+            });
+        });
+    }
+    editar() {
+        if (!this.selectedItem)
+            return;
+        let height = (window.innerHeight * 0.90) + 'px';
+        let width = 550 + 'px';
+        if (this.mobile) {
+            width = (window.innerWidth * 0.99) + 'px';
+            //height = (window.innerHeight * 0.98) + 'px';
+        }
+        const dialog = this.dialog.open(ProdutoSelecaoDialogComponent, {
+            width: width,
+            //height: height,
+            data: this.selectedItem,
+            maxWidth: '100%',
+            panelClass: 'dialog-p0',
+        });
+        dialog.afterClosed().subscribe(result => {
+            if (result === undefined)
+                return;
+            this.notification.showMsg("Salvo com sucesso.");
+            this.atualiza();
+        });
+    }
+    excluir() {
+        const item = this.selectedItem;
+        if (!item)
+            return;
+        confirmaExclusao(this.dialog, `Deseja prosseguir com a exclusão do produto '${item.produtoItemNome}'?`, () => {
+            this.isBusy = true;
+            this.ws.deleteProdutoComposicao(item.id)
+                .subscribe({
+                next: r => {
+                    this.notification.showMsg("O produto foi excluído com sucesso.");
+                    this.items.remove(item);
+                    this.selectedItem = null;
+                    this.isBusy = false;
+                },
+                error: err => {
+                    this.isBusy = false;
+                    this.notification.showMsg(err.error);
+                }
+            });
+        });
+    }
+}
+ProdutoComposicaoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: ProdutoComposicaoComponent, deps: [{ token: i3.MatDialogRef }, { token: i3.MatDialog }, { token: MAT_DIALOG_DATA }, { token: CommonWebService }, { token: NotificationService }, { token: ScreenHelperService }], target: i0.ɵɵFactoryTarget.Component });
+ProdutoComposicaoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.5", type: ProdutoComposicaoComponent, selector: "ox-produto-composicao", ngImport: i0, template: "<div class=\"dialog-header\">\n    <h2>Composi\u00E7\u00E3o do Produto '{{produto.nome}}'</h2>\n  </div>\n  <div class=\"tool-panel\">\n    <div class=\"tool-section\">\n        <label>A\u00E7\u00F5es</label>\n        <div class=\"tool-row\">\n          <button mat-icon-button (click)=\"atualiza()\">\n            <mat-icon aria-label=\"Atualizar\">refresh</mat-icon>\n          </button>\n          <button mat-icon-button (click)=\"novo()\">\n            <mat-icon aria-label=\"novo\">add</mat-icon>\n          </button>\n          <button mat-icon-button (click)=\"editar()\" *ngIf=\"selectedItem\">\n            <mat-icon aria-label=\"editar\">edit</mat-icon>\n          </button>\n          <button mat-icon-button (click)=\"excluir()\" *ngIf=\"selectedItem\">\n            <mat-icon aria-label=\"editar\">delete</mat-icon>\n          </button>\n        </div>\n      </div>\n  </div>\n  <div class=\"dialog-content\">\n      <ox-item-card [codigo]=\"i.quantidade\" [nome]=\"i.produtoItemNome\" (click)=\"selectItem(i)\" *ngFor=\"let i of items\" [class.selected]=\"i === selectedItem\"></ox-item-card>\n  </div>\n  <div class=\"dialog-footer\">\n    <button mat-button [disabled]=\"selectedItem == undefined\" color=\"primary\" [mat-dialog-close]=\"selectedItem\">CONFIRMAR</button>\n    <button mat-button [mat-dialog-close]=\"undefined\">VOLTAR</button>\n  </div>\n  <ox-busy-indicator [isBusy]=\"isBusy\"></ox-busy-indicator>", styles: [":host{background:#fafafa;display:flex;flex-direction:column;height:100%;max-height:99vh}\n"], dependencies: [{ kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: BusyIndicatorComponent, selector: "ox-busy-indicator", inputs: ["isBusy"] }, { kind: "component", type: ItemCardComponent, selector: "ox-item-card", inputs: ["nome", "codigo", "star", "cloud", "desativado"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: ProdutoComposicaoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ox-produto-composicao', template: "<div class=\"dialog-header\">\n    <h2>Composi\u00E7\u00E3o do Produto '{{produto.nome}}'</h2>\n  </div>\n  <div class=\"tool-panel\">\n    <div class=\"tool-section\">\n        <label>A\u00E7\u00F5es</label>\n        <div class=\"tool-row\">\n          <button mat-icon-button (click)=\"atualiza()\">\n            <mat-icon aria-label=\"Atualizar\">refresh</mat-icon>\n          </button>\n          <button mat-icon-button (click)=\"novo()\">\n            <mat-icon aria-label=\"novo\">add</mat-icon>\n          </button>\n          <button mat-icon-button (click)=\"editar()\" *ngIf=\"selectedItem\">\n            <mat-icon aria-label=\"editar\">edit</mat-icon>\n          </button>\n          <button mat-icon-button (click)=\"excluir()\" *ngIf=\"selectedItem\">\n            <mat-icon aria-label=\"editar\">delete</mat-icon>\n          </button>\n        </div>\n      </div>\n  </div>\n  <div class=\"dialog-content\">\n      <ox-item-card [codigo]=\"i.quantidade\" [nome]=\"i.produtoItemNome\" (click)=\"selectItem(i)\" *ngFor=\"let i of items\" [class.selected]=\"i === selectedItem\"></ox-item-card>\n  </div>\n  <div class=\"dialog-footer\">\n    <button mat-button [disabled]=\"selectedItem == undefined\" color=\"primary\" [mat-dialog-close]=\"selectedItem\">CONFIRMAR</button>\n    <button mat-button [mat-dialog-close]=\"undefined\">VOLTAR</button>\n  </div>\n  <ox-busy-indicator [isBusy]=\"isBusy\"></ox-busy-indicator>", styles: [":host{background:#fafafa;display:flex;flex-direction:column;height:100%;max-height:99vh}\n"] }]
+        }], ctorParameters: function () { return [{ type: i3.MatDialogRef }, { type: i3.MatDialog }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: CommonWebService }, { type: NotificationService }, { type: ScreenHelperService }]; } });
+
 class PaginatorComponent {
     constructor() {
         this.paginaAtualChange = new EventEmitter();
@@ -2643,6 +2987,7 @@ class ProdutosComponent {
         this.allowAdd = auth.permissoes.adminProdutoAdd;
         this.allowExcluir = auth.permissoes.adminProdutoDelete;
         this.mobile = this.screenHelper.isMedium;
+        this.usaEstoqueOnline = auth.usaEstoqueOnline;
         this.screenHelper.changedMediumScreen.subscribe(x => this.mobile = x);
         this.setting.exibeNaoControladoEstoque = true;
         this.setting.exibeImprimiCozinha = true;
@@ -2700,14 +3045,17 @@ class ProdutosComponent {
         confirmaExclusao(this.dialog, `Deseja prosseguir com a exclusão do produto ${item.nome}?`, () => {
             this.isBusy = true;
             this.ws.deleteProduto(item.id)
-                .subscribe(r => {
-                this.notification.showMsg("O produto foi excluído com sucesso.");
-                this.items.remove(item);
-                this.selectedItem = null;
-                this.isBusy = false;
-            }, err => {
-                this.isBusy = false;
-                this.notification.showMsg(err.error);
+                .subscribe({
+                next: r => {
+                    this.notification.showMsg("O produto foi excluído com sucesso.");
+                    this.items.remove(item);
+                    this.selectedItem = null;
+                    this.isBusy = false;
+                },
+                error: err => {
+                    this.isBusy = false;
+                    this.notification.showMsg(err.error);
+                }
             });
         });
     }
@@ -2762,12 +3110,15 @@ class ProdutosComponent {
         }
         this.isBusy = true;
         this.ws.saveProduto(this.selectedItem)
-            .subscribe(r => {
-            this.notification.showMsg("Salvo com sucesso.");
-            this.isBusy = false;
-        }, err => {
-            this.isBusy = false;
-            this.notification.showMsg(err.error);
+            .subscribe({
+            next: r => {
+                this.notification.showMsg("Salvo com sucesso.");
+                this.isBusy = false;
+            },
+            error: err => {
+                this.isBusy = false;
+                this.notification.showMsg(err.error);
+            }
         });
     }
     filtros() {
@@ -2796,12 +3147,32 @@ class ProdutosComponent {
             this.atualiza();
         });
     }
+    composicao() {
+        let height = (window.innerHeight * 0.90) + 'px';
+        let width = 550 + 'px';
+        if (this.mobile) {
+            width = (window.innerWidth * 0.99) + 'px';
+            //height = (window.innerHeight * 0.98) + 'px';
+        }
+        const dialog = this.dialog.open(ProdutoComposicaoComponent, {
+            width: width,
+            height: height,
+            maxWidth: '100%',
+            panelClass: 'dialog-p0',
+        });
+        dialog.afterClosed().subscribe(result => {
+            if (result === undefined)
+                return;
+            this.notification.showMsg("Salvo com sucesso.");
+            this.atualiza();
+        });
+    }
 }
 ProdutosComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: ProdutosComponent, deps: [{ token: CommonWebService }, { token: NotificationService }, { token: i3.MatDialog }, { token: AuthDataService }, { token: ScreenHelperService }], target: i0.ɵɵFactoryTarget.Component });
-ProdutosComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.5", type: ProdutosComponent, selector: "ox-produtos", ngImport: i0, template: "<ox-busy-indicator [isBusy]=\"isBusy\"></ox-busy-indicator>\n<div class=\"tool-panel\" *ngIf=\"mobile\">\n  <div class=\"tool-section\">\n    <label>Pesquisa</label>\n    <div class=\"search-input-container\">\n      <input [(ngModel)]=\"setting.frase\" placeholder=\"Digite um termo de busca...\" (input)=\"lazyTrigger.fire()\">\n      <button mat-icon-button (click)=\"filtros()\">\n        <mat-icon aria-label=\"Filtros\">manage_search</mat-icon>\n      </button>\n    </div>\n  </div>\n  <div class=\"tool-section ordem-sm2\">\n    <label>A\u00E7\u00F5es</label>\n    <div class=\"tool-row\">\n      <button mat-icon-button (click)=\"atualiza()\">\n        <mat-icon aria-label=\"Atualizar\">refresh</mat-icon>\n      </button>\n      <button mat-icon-button (click)=\"novo()\" *ngIf=\"allowAdd\">\n        <mat-icon aria-label=\"Novo Grupo\">add</mat-icon>\n      </button>\n      <button mat-icon-button (click)=\"excluir()\" *ngIf=\"selectedItem && allowExcluir\" [@fade]>\n        <mat-icon aria-label=\"Excluir Grupo\">delete</mat-icon>\n      </button>\n    </div>\n  </div>\n</div>\n<div class=\"result-container\" *ngIf=\"items\">\n  <div class=\"cards-container cards-container-shadow\" *ngIf=\"mobile\">\n    <ox-item-card [desativado]=\"!i.isAtivo\" [cloud]=\"i.enviadoPC\" [nome]=\"i.nome\" *ngFor=\"let i of items\" (click)=\"abreCadastro(i)\"></ox-item-card>\n  </div>  \n  <div class=\"hbox\"  *ngIf=\"mobile\">\n    <ox-paginator (change)=\"trocaPagina()\" [(paginaAtual)]=\"paginaAtual\" [(totalPaginas)]=\"result.totalPaginas\">\n    </ox-paginator>\n  </div>\n  <div class=\"listagem-desktop-grid\" *ngIf=\"!mobile\">\n    <div class=\"listagem-column-container listagem-list-column\">\n      <h3>Produtos</h3>\n      <div class=\"tool-panel tool-panel-float\">\n        <div class=\"tool-section\">\n          <label>Pesquisa</label>\n          <div class=\"search-input-container\">\n            <input [(ngModel)]=\"setting.frase\" placeholder=\"Digite um termo de busca...\" (input)=\"lazyTrigger.fire()\">\n            <button mat-icon-button (click)=\"filtros()\">\n              <mat-icon aria-label=\"Filtros\">manage_search</mat-icon>\n            </button>\n          </div>\n        </div>\n        <div class=\"tool-section ordem-sm2\">\n          <label>A\u00E7\u00F5es</label>\n          <div class=\"tool-row\">\n            <button mat-icon-button (click)=\"atualiza()\">\n              <mat-icon aria-label=\"Atualizar\">refresh</mat-icon>\n            </button>\n            <button mat-icon-button (click)=\"novo()\" *ngIf=\"allowAdd\">\n              <mat-icon aria-label=\"Novo\">add</mat-icon>\n            </button>\n            <button mat-icon-button (click)=\"excluir()\" *ngIf=\"selectedItem && allowExcluir\" [@fade]>\n              <mat-icon aria-label=\"Excluir\">delete</mat-icon>\n            </button>\n          </div>\n        </div>\n      </div>\n      <div class=\"listagem-list-container\">\n        <h4 *ngIf=\"items.length === 0\" class=\"nenhum-item-msg\">A busca n\u00E3o retornou resultados</h4>\n\n        <ox-item-card [desativado]=\"!i.isAtivo\" [cloud]=\"i.enviadoPC\" [codigo]=\"i.id\" [nome]=\"i.nome\" *ngFor=\"let i of items\" [class.selected]=\"i === selectedItem\"\n          (click)=\"selectedItem = i;\"></ox-item-card>\n\n      </div>\n      <div class=\"hbox\">\n        <ox-paginator (change)=\"trocaPagina()\" [(paginaAtual)]=\"paginaAtual\" [(totalPaginas)]=\"result.totalPaginas\">\n        </ox-paginator>\n        <div class=\"total-qtd\">Exibindo {{result.inicioQtd}}-{{result.finalQtd}} de {{result.quantidade}}</div>\n        \n      </div>\n    </div>\n    <div class=\"listagem-column-container listagem-column-form\">\n      <h3 *ngIf=\"!selectedItem\">Selecione um produto no lado direito</h3>\n      <h3 *ngIf=\"selectedItem\">{{selectedItem.nome | uppercase}}</h3>\n      <div class=\"listagem-form-container\">\n        <ox-produto-form [@fade] [model]=\"selectedItem\" *ngIf=\"selectedItem\" [editMode]=\"true\">\n        </ox-produto-form>\n      </div>\n\n      <div class=\"listagem-form-acoes\">\n        <button (click)=\"salvar()\" mat-fab color=\"primary\" *ngIf=\"selectedItem\" tabindex=\"20\">\n          <mat-icon>save</mat-icon>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>", styles: [":host{height:calc(100% - 48px);display:flex;flex-grow:1;flex-direction:column;background:#F0F0F0}:host{background-color:#fdfdfd}.total-qtd{align-self:center;font-size:small}\n"], dependencies: [{ kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: BusyIndicatorComponent, selector: "ox-busy-indicator", inputs: ["isBusy"] }, { kind: "component", type: PaginatorComponent, selector: "ox-paginator", inputs: ["pageSize", "paginaAtual", "totalPaginas"], outputs: ["paginaAtualChange", "totalPaginasChange", "change"] }, { kind: "component", type: ItemCardComponent, selector: "ox-item-card", inputs: ["nome", "codigo", "star", "cloud", "desativado"] }, { kind: "component", type: ProdutoFormComponent, selector: "ox-produto-form", inputs: ["editMode", "model"], outputs: ["nextIdClick"] }, { kind: "pipe", type: i6.UpperCasePipe, name: "uppercase" }], animations: [fadeAnimation] });
+ProdutosComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.5", type: ProdutosComponent, selector: "ox-produtos", ngImport: i0, template: "<ox-busy-indicator [isBusy]=\"isBusy\"></ox-busy-indicator>\n<div class=\"tool-panel\" *ngIf=\"mobile\">\n  <div class=\"tool-section\">\n    <label>Pesquisa</label>\n    <div class=\"search-input-container\">\n      <input [(ngModel)]=\"setting.frase\" placeholder=\"Digite um termo de busca...\" (input)=\"lazyTrigger.fire()\">\n      <button mat-icon-button (click)=\"filtros()\">\n        <mat-icon aria-label=\"Filtros\">manage_search</mat-icon>\n      </button>\n    </div>\n  </div>\n  <div class=\"tool-section ordem-sm2\">\n    <label>A\u00E7\u00F5es</label>\n    <div class=\"tool-row\">\n      <button mat-icon-button (click)=\"atualiza()\">\n        <mat-icon aria-label=\"Atualizar\">refresh</mat-icon>\n      </button>\n      <button mat-icon-button (click)=\"novo()\" *ngIf=\"allowAdd\">\n        <mat-icon aria-label=\"Novo Grupo\">add</mat-icon>\n      </button>\n      <button mat-icon-button (click)=\"excluir()\" *ngIf=\"selectedItem && allowExcluir\" [@fade]>\n        <mat-icon aria-label=\"Excluir Grupo\">delete</mat-icon>\n      </button>\n    </div>\n  </div>\n</div>\n<div class=\"result-container\" *ngIf=\"items\">\n  <div class=\"cards-container cards-container-shadow\" *ngIf=\"mobile\">\n    <ox-item-card [desativado]=\"!i.isAtivo\" [cloud]=\"i.enviadoPC\" [nome]=\"i.nome\" *ngFor=\"let i of items\" (click)=\"abreCadastro(i)\"></ox-item-card>\n  </div>  \n  <div class=\"hbox\"  *ngIf=\"mobile\">\n    <ox-paginator (change)=\"trocaPagina()\" [(paginaAtual)]=\"paginaAtual\" [(totalPaginas)]=\"result.totalPaginas\">\n    </ox-paginator>\n  </div>\n  <div class=\"listagem-desktop-grid\" *ngIf=\"!mobile\">\n    <div class=\"listagem-column-container listagem-list-column\">\n      <h3>Produtos</h3>\n      <div class=\"tool-panel tool-panel-float\">\n        <div class=\"tool-section\">\n          <label>Pesquisa</label>\n          <div class=\"search-input-container\">\n            <input [(ngModel)]=\"setting.frase\" placeholder=\"Digite um termo de busca...\" (input)=\"lazyTrigger.fire()\">\n            <button mat-icon-button (click)=\"filtros()\">\n              <mat-icon aria-label=\"Filtros\">manage_search</mat-icon>\n            </button>\n          </div>\n        </div>\n        <div class=\"tool-section ordem-sm2\">\n          <label>A\u00E7\u00F5es</label>\n          <div class=\"tool-row\">\n            <button mat-icon-button (click)=\"atualiza()\">\n              <mat-icon aria-label=\"Atualizar\">refresh</mat-icon>\n            </button>\n            <button mat-icon-button (click)=\"novo()\" *ngIf=\"allowAdd\">\n              <mat-icon aria-label=\"Novo\">add</mat-icon>\n            </button>\n            <button mat-icon-button (click)=\"excluir()\" *ngIf=\"selectedItem && allowExcluir\" [@fade]>\n              <mat-icon aria-label=\"Excluir\">delete</mat-icon>\n            </button>\n          </div>\n        </div>\n      </div>\n      <div class=\"listagem-list-container\">\n        <h4 *ngIf=\"items.length === 0\" class=\"nenhum-item-msg\">A busca n\u00E3o retornou resultados</h4>\n\n        <ox-item-card [desativado]=\"!i.isAtivo\" [cloud]=\"i.enviadoPC\" [codigo]=\"i.id\" [nome]=\"i.nome\" *ngFor=\"let i of items\" [class.selected]=\"i === selectedItem\"\n          (click)=\"selectedItem = i;\"></ox-item-card>\n\n      </div>\n      <div class=\"hbox\">\n        <ox-paginator (change)=\"trocaPagina()\" [(paginaAtual)]=\"paginaAtual\" [(totalPaginas)]=\"result.totalPaginas\">\n        </ox-paginator>\n        <div class=\"total-qtd\">Exibindo {{result.inicioQtd}}-{{result.finalQtd}} de {{result.quantidade}}</div>\n        \n      </div>\n    </div>\n    <div class=\"listagem-column-container listagem-column-form\">\n      <h3 *ngIf=\"!selectedItem\">Selecione um produto no lado direito</h3>\n      <h3 *ngIf=\"selectedItem\">{{selectedItem.nome | uppercase}}</h3>\n      <div class=\"listagem-form-container\">\n        <ox-produto-form [@fade] [model]=\"selectedItem\" *ngIf=\"selectedItem\" [editMode]=\"true\">\n        </ox-produto-form>\n      </div>\n\n      <div class=\"listagem-form-acoes\">\n        <button (click)=\"salvar()\" mat-raised-button color=\"primary\" *ngIf=\"selectedItem\" tabindex=\"20\">Salvar</button>\n        <button (click)=\"composicao()\" mat-raised-button *ngIf=\"selectedItem && usaEstoqueOnline\" tabindex=\"20\">Composi\u00E7\u00E3o</button>\n      </div>\n    </div>\n  </div>\n</div>", styles: [":host{height:calc(100% - 48px);display:flex;flex-grow:1;flex-direction:column;background:#F0F0F0}:host{background-color:#fdfdfd}.total-qtd{align-self:center;font-size:small}\n"], dependencies: [{ kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: BusyIndicatorComponent, selector: "ox-busy-indicator", inputs: ["isBusy"] }, { kind: "component", type: PaginatorComponent, selector: "ox-paginator", inputs: ["pageSize", "paginaAtual", "totalPaginas"], outputs: ["paginaAtualChange", "totalPaginasChange", "change"] }, { kind: "component", type: ItemCardComponent, selector: "ox-item-card", inputs: ["nome", "codigo", "star", "cloud", "desativado"] }, { kind: "component", type: ProdutoFormComponent, selector: "ox-produto-form", inputs: ["editMode", "model"], outputs: ["nextIdClick"] }, { kind: "pipe", type: i6.UpperCasePipe, name: "uppercase" }], animations: [fadeAnimation] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: ProdutosComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ox-produtos', animations: [fadeAnimation], template: "<ox-busy-indicator [isBusy]=\"isBusy\"></ox-busy-indicator>\n<div class=\"tool-panel\" *ngIf=\"mobile\">\n  <div class=\"tool-section\">\n    <label>Pesquisa</label>\n    <div class=\"search-input-container\">\n      <input [(ngModel)]=\"setting.frase\" placeholder=\"Digite um termo de busca...\" (input)=\"lazyTrigger.fire()\">\n      <button mat-icon-button (click)=\"filtros()\">\n        <mat-icon aria-label=\"Filtros\">manage_search</mat-icon>\n      </button>\n    </div>\n  </div>\n  <div class=\"tool-section ordem-sm2\">\n    <label>A\u00E7\u00F5es</label>\n    <div class=\"tool-row\">\n      <button mat-icon-button (click)=\"atualiza()\">\n        <mat-icon aria-label=\"Atualizar\">refresh</mat-icon>\n      </button>\n      <button mat-icon-button (click)=\"novo()\" *ngIf=\"allowAdd\">\n        <mat-icon aria-label=\"Novo Grupo\">add</mat-icon>\n      </button>\n      <button mat-icon-button (click)=\"excluir()\" *ngIf=\"selectedItem && allowExcluir\" [@fade]>\n        <mat-icon aria-label=\"Excluir Grupo\">delete</mat-icon>\n      </button>\n    </div>\n  </div>\n</div>\n<div class=\"result-container\" *ngIf=\"items\">\n  <div class=\"cards-container cards-container-shadow\" *ngIf=\"mobile\">\n    <ox-item-card [desativado]=\"!i.isAtivo\" [cloud]=\"i.enviadoPC\" [nome]=\"i.nome\" *ngFor=\"let i of items\" (click)=\"abreCadastro(i)\"></ox-item-card>\n  </div>  \n  <div class=\"hbox\"  *ngIf=\"mobile\">\n    <ox-paginator (change)=\"trocaPagina()\" [(paginaAtual)]=\"paginaAtual\" [(totalPaginas)]=\"result.totalPaginas\">\n    </ox-paginator>\n  </div>\n  <div class=\"listagem-desktop-grid\" *ngIf=\"!mobile\">\n    <div class=\"listagem-column-container listagem-list-column\">\n      <h3>Produtos</h3>\n      <div class=\"tool-panel tool-panel-float\">\n        <div class=\"tool-section\">\n          <label>Pesquisa</label>\n          <div class=\"search-input-container\">\n            <input [(ngModel)]=\"setting.frase\" placeholder=\"Digite um termo de busca...\" (input)=\"lazyTrigger.fire()\">\n            <button mat-icon-button (click)=\"filtros()\">\n              <mat-icon aria-label=\"Filtros\">manage_search</mat-icon>\n            </button>\n          </div>\n        </div>\n        <div class=\"tool-section ordem-sm2\">\n          <label>A\u00E7\u00F5es</label>\n          <div class=\"tool-row\">\n            <button mat-icon-button (click)=\"atualiza()\">\n              <mat-icon aria-label=\"Atualizar\">refresh</mat-icon>\n            </button>\n            <button mat-icon-button (click)=\"novo()\" *ngIf=\"allowAdd\">\n              <mat-icon aria-label=\"Novo\">add</mat-icon>\n            </button>\n            <button mat-icon-button (click)=\"excluir()\" *ngIf=\"selectedItem && allowExcluir\" [@fade]>\n              <mat-icon aria-label=\"Excluir\">delete</mat-icon>\n            </button>\n          </div>\n        </div>\n      </div>\n      <div class=\"listagem-list-container\">\n        <h4 *ngIf=\"items.length === 0\" class=\"nenhum-item-msg\">A busca n\u00E3o retornou resultados</h4>\n\n        <ox-item-card [desativado]=\"!i.isAtivo\" [cloud]=\"i.enviadoPC\" [codigo]=\"i.id\" [nome]=\"i.nome\" *ngFor=\"let i of items\" [class.selected]=\"i === selectedItem\"\n          (click)=\"selectedItem = i;\"></ox-item-card>\n\n      </div>\n      <div class=\"hbox\">\n        <ox-paginator (change)=\"trocaPagina()\" [(paginaAtual)]=\"paginaAtual\" [(totalPaginas)]=\"result.totalPaginas\">\n        </ox-paginator>\n        <div class=\"total-qtd\">Exibindo {{result.inicioQtd}}-{{result.finalQtd}} de {{result.quantidade}}</div>\n        \n      </div>\n    </div>\n    <div class=\"listagem-column-container listagem-column-form\">\n      <h3 *ngIf=\"!selectedItem\">Selecione um produto no lado direito</h3>\n      <h3 *ngIf=\"selectedItem\">{{selectedItem.nome | uppercase}}</h3>\n      <div class=\"listagem-form-container\">\n        <ox-produto-form [@fade] [model]=\"selectedItem\" *ngIf=\"selectedItem\" [editMode]=\"true\">\n        </ox-produto-form>\n      </div>\n\n      <div class=\"listagem-form-acoes\">\n        <button (click)=\"salvar()\" mat-fab color=\"primary\" *ngIf=\"selectedItem\" tabindex=\"20\">\n          <mat-icon>save</mat-icon>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>", styles: [":host{height:calc(100% - 48px);display:flex;flex-grow:1;flex-direction:column;background:#F0F0F0}:host{background-color:#fdfdfd}.total-qtd{align-self:center;font-size:small}\n"] }]
+            args: [{ selector: 'ox-produtos', animations: [fadeAnimation], template: "<ox-busy-indicator [isBusy]=\"isBusy\"></ox-busy-indicator>\n<div class=\"tool-panel\" *ngIf=\"mobile\">\n  <div class=\"tool-section\">\n    <label>Pesquisa</label>\n    <div class=\"search-input-container\">\n      <input [(ngModel)]=\"setting.frase\" placeholder=\"Digite um termo de busca...\" (input)=\"lazyTrigger.fire()\">\n      <button mat-icon-button (click)=\"filtros()\">\n        <mat-icon aria-label=\"Filtros\">manage_search</mat-icon>\n      </button>\n    </div>\n  </div>\n  <div class=\"tool-section ordem-sm2\">\n    <label>A\u00E7\u00F5es</label>\n    <div class=\"tool-row\">\n      <button mat-icon-button (click)=\"atualiza()\">\n        <mat-icon aria-label=\"Atualizar\">refresh</mat-icon>\n      </button>\n      <button mat-icon-button (click)=\"novo()\" *ngIf=\"allowAdd\">\n        <mat-icon aria-label=\"Novo Grupo\">add</mat-icon>\n      </button>\n      <button mat-icon-button (click)=\"excluir()\" *ngIf=\"selectedItem && allowExcluir\" [@fade]>\n        <mat-icon aria-label=\"Excluir Grupo\">delete</mat-icon>\n      </button>\n    </div>\n  </div>\n</div>\n<div class=\"result-container\" *ngIf=\"items\">\n  <div class=\"cards-container cards-container-shadow\" *ngIf=\"mobile\">\n    <ox-item-card [desativado]=\"!i.isAtivo\" [cloud]=\"i.enviadoPC\" [nome]=\"i.nome\" *ngFor=\"let i of items\" (click)=\"abreCadastro(i)\"></ox-item-card>\n  </div>  \n  <div class=\"hbox\"  *ngIf=\"mobile\">\n    <ox-paginator (change)=\"trocaPagina()\" [(paginaAtual)]=\"paginaAtual\" [(totalPaginas)]=\"result.totalPaginas\">\n    </ox-paginator>\n  </div>\n  <div class=\"listagem-desktop-grid\" *ngIf=\"!mobile\">\n    <div class=\"listagem-column-container listagem-list-column\">\n      <h3>Produtos</h3>\n      <div class=\"tool-panel tool-panel-float\">\n        <div class=\"tool-section\">\n          <label>Pesquisa</label>\n          <div class=\"search-input-container\">\n            <input [(ngModel)]=\"setting.frase\" placeholder=\"Digite um termo de busca...\" (input)=\"lazyTrigger.fire()\">\n            <button mat-icon-button (click)=\"filtros()\">\n              <mat-icon aria-label=\"Filtros\">manage_search</mat-icon>\n            </button>\n          </div>\n        </div>\n        <div class=\"tool-section ordem-sm2\">\n          <label>A\u00E7\u00F5es</label>\n          <div class=\"tool-row\">\n            <button mat-icon-button (click)=\"atualiza()\">\n              <mat-icon aria-label=\"Atualizar\">refresh</mat-icon>\n            </button>\n            <button mat-icon-button (click)=\"novo()\" *ngIf=\"allowAdd\">\n              <mat-icon aria-label=\"Novo\">add</mat-icon>\n            </button>\n            <button mat-icon-button (click)=\"excluir()\" *ngIf=\"selectedItem && allowExcluir\" [@fade]>\n              <mat-icon aria-label=\"Excluir\">delete</mat-icon>\n            </button>\n          </div>\n        </div>\n      </div>\n      <div class=\"listagem-list-container\">\n        <h4 *ngIf=\"items.length === 0\" class=\"nenhum-item-msg\">A busca n\u00E3o retornou resultados</h4>\n\n        <ox-item-card [desativado]=\"!i.isAtivo\" [cloud]=\"i.enviadoPC\" [codigo]=\"i.id\" [nome]=\"i.nome\" *ngFor=\"let i of items\" [class.selected]=\"i === selectedItem\"\n          (click)=\"selectedItem = i;\"></ox-item-card>\n\n      </div>\n      <div class=\"hbox\">\n        <ox-paginator (change)=\"trocaPagina()\" [(paginaAtual)]=\"paginaAtual\" [(totalPaginas)]=\"result.totalPaginas\">\n        </ox-paginator>\n        <div class=\"total-qtd\">Exibindo {{result.inicioQtd}}-{{result.finalQtd}} de {{result.quantidade}}</div>\n        \n      </div>\n    </div>\n    <div class=\"listagem-column-container listagem-column-form\">\n      <h3 *ngIf=\"!selectedItem\">Selecione um produto no lado direito</h3>\n      <h3 *ngIf=\"selectedItem\">{{selectedItem.nome | uppercase}}</h3>\n      <div class=\"listagem-form-container\">\n        <ox-produto-form [@fade] [model]=\"selectedItem\" *ngIf=\"selectedItem\" [editMode]=\"true\">\n        </ox-produto-form>\n      </div>\n\n      <div class=\"listagem-form-acoes\">\n        <button (click)=\"salvar()\" mat-raised-button color=\"primary\" *ngIf=\"selectedItem\" tabindex=\"20\">Salvar</button>\n        <button (click)=\"composicao()\" mat-raised-button *ngIf=\"selectedItem && usaEstoqueOnline\" tabindex=\"20\">Composi\u00E7\u00E3o</button>\n      </div>\n    </div>\n  </div>\n</div>", styles: [":host{height:calc(100% - 48px);display:flex;flex-grow:1;flex-direction:column;background:#F0F0F0}:host{background-color:#fdfdfd}.total-qtd{align-self:center;font-size:small}\n"] }]
         }], ctorParameters: function () { return [{ type: CommonWebService }, { type: NotificationService }, { type: i3.MatDialog }, { type: AuthDataService }, { type: ScreenHelperService }]; } });
 
 class ProdutosCategoriasCardapioComponent {
@@ -3637,7 +4008,10 @@ OxpiNglibModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version
         ProdutosCategoriasCardapioComponent,
         ProdutoCategoriaCardapioAddDialogComponent,
         ProdutoCategoriaCardapioEditDialogComponent,
-        ProdutoCategoriaCardapioSelecaoDialogComponent], imports: [BrowserModule,
+        ProdutoCategoriaCardapioSelecaoDialogComponent,
+        ProdutoComposicaoComponent,
+        ProdutoComposicaoAddDialogComponent,
+        ProdutoSelecaoDialogComponent], imports: [BrowserModule,
         BrowserAnimationsModule,
         FormsModule,
         MatButtonModule,
@@ -3700,7 +4074,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.5", ngImpor
                         ProdutosCategoriasCardapioComponent,
                         ProdutoCategoriaCardapioAddDialogComponent,
                         ProdutoCategoriaCardapioEditDialogComponent,
-                        ProdutoCategoriaCardapioSelecaoDialogComponent
+                        ProdutoCategoriaCardapioSelecaoDialogComponent,
+                        ProdutoComposicaoComponent,
+                        ProdutoComposicaoAddDialogComponent,
+                        ProdutoSelecaoDialogComponent
                     ],
                     imports: [
                         BrowserModule,
@@ -3924,5 +4301,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AlertDialogComponent, AuthDataService, BusyIndicatorComponent, BusyState, CheckButtonComponent, CommonWebService, ConsumoProdutoSearchSetting, DuplicataSearchSetting, ExportFileService, FocusService, FuncionarioAddDialogComponent, FuncionarioEditDialogComponent, FuncionarioFormComponent, FuncionariosComponent, ImageViewerComponent, ItemCardComponent, LazyTrigger, MonthYearPickerComponent, MoverGrupoDialogComponent, NavegacaoSelecaoDialogUtil, NotificationService, NumberParser, NumericPickerComponent, OcupacaoFilterSetting, OcupacaoSearchDateField, OcupacaoSearchSetting, OcupacaoSearchTipoEntrada, Ordem, OxpiNglibModule, PagamentoRecebimentoSearchSetting, PaginatorComponent, PorOcupacaoTipo, Preferences, ProdutoAddDialogComponent, ProdutoBuscaFiltrosDialogComponent, ProdutoCategoriaCardapioAddDialogComponent, ProdutoCategoriaCardapioEditDialogComponent, ProdutoCategoriaCardapioSelecaoDialogComponent, ProdutoEditDialogComponent, ProdutoFormComponent, ProdutoGrupoAddDialogComponent, ProdutoGrupoEditDialogComponent, ProdutoGrupoFormComponent, ProdutoGrupoSelecaoDialogComponent, ProdutoSearchSetting, ProdutoSubgrupoAddDialogComponent, ProdutoSubgrupoEditDialogComponent, ProdutoSubgrupoSelecaoDialogComponent, ProdutosCategoriasCardapioComponent, ProdutosComponent, ProdutosGruposComponent, ProdutosNcmDialogComponent, ProdutosSubgruposComponent, RadioButtonGroupComponent, SafeHtmlPipe, ScreenHelperService, SearchMode, SearchSetting, SuitesIntervencoesSetting, confirmaExclusao, createProduct, fadeAnimation, lateralAnimation, menuLateralAnimation, printHtml, printTxt, selectText, valNumberEmpty, valNumberMin, valTextEmpty, valTextMax, validaProduto, validaProdutoGrupo };
+export { AlertDialogComponent, AuthDataService, BusyIndicatorComponent, BusyState, CheckButtonComponent, CommonWebService, ConsumoProdutoSearchSetting, DuplicataSearchSetting, ExportFileService, FocusService, FuncionarioAddDialogComponent, FuncionarioEditDialogComponent, FuncionarioFormComponent, FuncionariosComponent, ImageViewerComponent, ItemCardComponent, LazyTrigger, MonthYearPickerComponent, MoverGrupoDialogComponent, NavegacaoSelecaoDialogUtil, NotificationService, NumberParser, NumericPickerComponent, OcupacaoFilterSetting, OcupacaoSearchDateField, OcupacaoSearchSetting, OcupacaoSearchTipoEntrada, Ordem, OxpiNglibModule, PagamentoRecebimentoSearchSetting, PaginatorComponent, PorOcupacaoTipo, Preferences, ProdutoAddDialogComponent, ProdutoBuscaFiltrosDialogComponent, ProdutoCategoriaCardapioAddDialogComponent, ProdutoCategoriaCardapioEditDialogComponent, ProdutoCategoriaCardapioSelecaoDialogComponent, ProdutoComposicaoAddDialogComponent, ProdutoComposicaoComponent, ProdutoEditDialogComponent, ProdutoFormComponent, ProdutoGrupoAddDialogComponent, ProdutoGrupoEditDialogComponent, ProdutoGrupoFormComponent, ProdutoGrupoSelecaoDialogComponent, ProdutoSearchSetting, ProdutoSelecaoDialogComponent, ProdutoSubgrupoAddDialogComponent, ProdutoSubgrupoEditDialogComponent, ProdutoSubgrupoSelecaoDialogComponent, ProdutosCategoriasCardapioComponent, ProdutosComponent, ProdutosGruposComponent, ProdutosNcmDialogComponent, ProdutosSubgruposComponent, RadioButtonGroupComponent, SafeHtmlPipe, ScreenHelperService, SearchMode, SearchSetting, SuitesIntervencoesSetting, confirmaExclusao, createProduct, fadeAnimation, lateralAnimation, menuLateralAnimation, printHtml, printTxt, selectText, valNumberEmpty, valNumberMin, valTextEmpty, valTextMax, validaProduto, validaProdutoComposicao, validaProdutoGrupo };
 //# sourceMappingURL=oxpi-nglib.mjs.map