@masterkeymaterial/ui 0.1.0 → 0.2.0

package/README.md

@@ -121,6 +121,17 @@ Guia completo de uso e customizacao:
 
 - `docs/08-mk-grid-guia-consumidor.md`
 
+## Teste local do MkGrid
+
+Para validar o consumo da lib em runtime dentro deste workspace:
+
+```bash
+npm run build:lib
+npx ng serve mk-grid-demo
+```
+
+O app de teste esta em `projects/mk-grid-demo` e renderiza o `MkGrid` com dados mockados para validar comportamento de DI e interacoes basicas.
+
 ## Licenca
 
 MIT

package/fesm2022/masterkeymaterial-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { signal, computed, model, input, output, effect, Component, HostBinding, viewChild, ElementRef, inject, HostListener, Pipe, InjectionToken, Injectable, Injector, ViewContainerRef, ChangeDetectionStrategy } from '@angular/core';
+import { signal, computed, model, input, output, effect, Component, HostBinding, viewChild, ElementRef, inject, HostListener, Pipe, InjectionToken, Injectable, Injector, ViewContainerRef, ChangeDetectionStrategy, Optional, Inject } from '@angular/core';
 import { autoUpdate, computePosition, offset, flip, shift } from '@floating-ui/dom';
 import { NgComponentOutlet } from '@angular/common';
 import { DomSanitizer } from '@angular/platform-browser';
@@ -6482,10 +6482,11 @@ class GridCellService {
         this.gridParams.set(params);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: GridCellService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: GridCellService });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: GridCellService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: GridCellService, decorators: [{
-            type: Injectable
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
         }] });
 
 const PROP_CONTROLE_ATIVO$1 = 'is_ativo';
@@ -7478,11 +7479,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<lib-grid-filter-bar [config]=\"config()\" [colunasDefinidas]=\"$any(colunasDefinidas())\"\n\t[colAgrupadoAtual]=\"colAgrupadoAtual()\" [isAgrupado]=\"isAgrupado()\" [filterCollapsed]=\"filtroCollapsed()\"\n\t(searchInput)=\"onInputSearch($event)\" (filterToggle)=\"onClickOpenCloseFilterZone()\"\n\t(actionTriggered)=\"onClickAction($event)\" (groupByColumn)=\"onAgruparPor($any($event))\" (clearGroups)=\"onClearGroups()\"\n\t(collapseGroups)=\"onRecolherGroups()\" (expandGroups)=\"onExpandirGroups()\">\n</lib-grid-filter-bar>\n\n@if(config().showFilterBar) {\n<div class=\"table-filter-container table-styles\" [style.--filter-height.px]=\"filterHeight()\">\n\t<div #filterContainer class=\"table-filter-content\" [class.table-filter-hide]=\"filtroCollapsed()\">\n\t\t<ng-content></ng-content>\n\t</div>\n</div>\n}\n\n@if(config().screen() == \"Mobile\"){\n<!-- MOBILE INICIO -->\n\n@for (dadosLinha of listaExibir(); track $index;let i = $index) {\n@if( dadosLinha.isColapsed !== true){\n\n@if(dadosLinha.isFullLine?.visible){\n<!-- MOBILE GRUPO LINHA PR\u00D3PRIA -->\n<div class=\"table-row-mobile table-formated table-group table-styles\" (click)=\"onClickGroup(dadosLinha)\">\n\t<div>{{ dadosLinha.groupName }}</div>\n\t<div class=\"table-group-items-area\" [class.table-group-collapse]=\"dadosLinha.isFullLine?.colapsed === true\">\n\t\t{{ dadosLinha.isFullLine?.colapsedCount ?? 0 }} item(s)\n\t\t<div class=\"table-group-items-ico\">\n\t\t\t<i class=\"bi bi-caret-down\"></i>\n\t\t</div>\n\t</div>\n</div>\n} @else {\n\n<div class=\"table-overflow mobile\" [style.--table-min-height]=\"isCompacted() ? '20px' : minLineHeight()\">\n\t<div class=\"table-table-mobile\" [class.selected]=\"dadosLinha.selecionado\">\n\n\t\t<!-- MOBILE DADOS -->\n\t\t@if(config().showActionsLine){\n\t\t<div class=\"table-header-mobile\" [style.gridArea]=\"'auto / auto / auto / span 2'\">\n\t\t\t@if(hasVerticalLine()){\n\t\t\t<!-- MOBILE VERTICAL DIV -->\n\t\t\t<div class=\"table-header-mobile table-formated table-vertical-line\" (click)=\"onClickRow(dadosLinha)\">\n\t\t\t\t{{ dadosLinha.ordem }}\n\t\t\t</div>\n\t\t\t}\n\t\t\t@if(hasSeletor()){\n\t\t\t<!-- MOBILE SELECTOR DIV -->\n\t\t\t<div class=\"table-header-mobile table-formated table-item-seletor\" (click)=\"onClickRow(dadosLinha)\">\n\t\t\t\t<ui-check-box [(value)]=\"dadosLinha.selecionado\" [style.--ui-color]=\"'var(--sys-on-primary)'\"\n\t\t\t\t\t[style.--ui-outline]=\"'var(--sys-on-primary)'\" [single]=\"this.config().selectionMode == 'single'\"\n\t\t\t\t\t[style.--ui-size]=\"isCompacted() ? '15px' : undefined\"></ui-check-box>\n\t\t\t</div>\n\t\t\t}\n\t\t\t<div class=\"table-header-mobile-space\" (click)=\"onClickRow(dadosLinha)\"></div>\n\t\t\t<lib-grid-cell-actions [config]=\"config()\" [dadosDaLinha]=\"dadosLinha\" [mobileHeader]=\"true\"\n\t\t\t\t(action)=\"onClickCellAction($event)\" [compact]=\"isCompacted()\"></lib-grid-cell-actions>\n\t\t</div>\n\t\t}\n\n\t\t<!-- MOBILE LINHA -->\n\t\t@for (localColuna of colunasOrdenadas(); track $index;) {\n\t\t<div class=\"table-header-mobile\" [class.sortable]=\"localColuna.sortable !== false\"\n\t\t\t[class.sorted-asc]=\"obterDirecaoOrdenacao(localColuna.prop) === 'asc'\"\n\t\t\t[class.sorted-desc]=\"obterDirecaoOrdenacao(localColuna.prop) === 'desc'\"\n\t\t\t(click)=\"localColuna.sortable !== false && alternarOrdenacao(localColuna.prop)\" [style]=\"localColuna.styleHeader\">\n\t\t\t<div class=\"table-header-mobile-text\" [title]=\"localColuna.titulo\"\n\t\t\t\t[innerHTML]=\"localColuna.tituloReduzido ?? localColuna.titulo\">\n\t\t\t</div>\n\t\t\t<div class=\"table-header-controls\">\n\t\t\t\t@if (localColuna.sortable !== false) {\n\t\t\t\t<span class=\"table-ico-sort\">\n\t\t\t\t\t@if (obterDirecaoOrdenacao(localColuna.prop) === 'asc') {\n\t\t\t\t\t<i class=\"fa fa-sort-up asc\"></i>\n\t\t\t\t\t} @else if (obterDirecaoOrdenacao(localColuna.prop) === 'desc') {\n\t\t\t\t\t<i class=\"fa fa-sort-down desc\"></i>\n\t\t\t\t\t}\n\t\t\t\t</span>\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t\t<lib-grid-cell-handler class=\"table-item-mobile table-formated\" [class.odd]=\"i % 2 !== 0\" [class.even]=\"i % 2 === 0\"\n\t\t\t[linha]=\"dadosLinha.dados\" [localColuna]=\"localColuna\" [lista]=\"lista()!\" [config]=\"config()\"\n\t\t\t[localColunas]=\"colunasOrdenadas()\" [inputSearchText]=\"inputSearchText()\"></lib-grid-cell-handler>\n\t\t}\n\t</div>\n</div>\n}\n}\n} @empty {\n<!-- LINHA DE SEM DADOS -->\n<div class=\"table-styles\"><lib-grid-empty-list></lib-grid-empty-list></div>\n}\n<!-- MOBILE FIM -->\n\n\n} @else {\n<!-- DESKTOP INICIO -->\n<div #gridSize class=\"table-overflow\" [class.compacted]=\"isCompacted()\"\n\t[style.--table-min-height]=\"isCompacted() ? '40px' : minLineHeight()\">\n\t<div class=\"table-table\" [class.table-has-vertical-line]=\"hasVerticalLine()\" [class.table-has-seletor]=\"hasSeletor()\"\n\t\tcdkDropList (cdkDropListDropped)=\"onDropColuna($event)\" [cdkDropListData]=\"colunasExibir()\"\n\t\t[style.gridTemplateColumns]=\"`${this.pxVerticalLine()}${this.pxSelector()}` + this.pxColunas() + this.pxActions()\">\n\t\t<!-- DESKTOP HEADER -->\n\t\t<lib-grid-header-row [colunas]=\"colunasExibir()\" [ordenacoes]=\"ordenacoesSignal()\"\n\t\t\t[todosSelecionados]=\"todosSelecionados()\" [config]=\"config()\" [hasSeletor]=\"hasSeletor()\"\n\t\t\t[hasVerticalLine]=\"hasVerticalLine()\" [hasGrid]=\"hasGrid()\" [isCompacted]=\"isCompacted()\"\n\t\t\t[isSelectingAll]=\"isSelectingAll()\" (columnSort)=\"alternarOrdenacao($event)\"\n\t\t\t(selectAll)=\"onChangeTodosSelecionados($event)\"\n\t\t\t(columnResizeStart)=\"onResizeStart($event.event, $any($event.coluna))\"\n\t\t\t(columnResizeDoubleClick)=\"onDoubleClickControls($event.event, $any($event.coluna))\">\n\t\t</lib-grid-header-row>\n\n\t\t<!-- DESKTOP LINHAS DE DADOS -->\n\t\t@for (dadosLinha of listaExibir(); track $index; let i = $index) {@if( dadosLinha.isColapsed !== true){\n\n\t\t@if(dadosLinha.isFullLine?.visible){\n\n\t\t<!-- DESKTOP FULL LINE (COLSPAN HORIZONTAL) -->\n\t\t@if(hasVerticalLine()){\n\t\t<!-- DESKTOP HEADER VERTICAL FULL LINE -->\n\t\t<div class=\"table-header table-formated table-vertical-line\">\n\t\t\t{{ dadosLinha.ordem }}\n\t\t</div>\n\t\t}\n\t\t<!-- DESKTOP GRUPO: ROW -->\n\t\t@if(dadosLinha.isGroup){\n\n\t\t<div class=\"table-row table-formated table-group table-border-bottom-card\"\n\t\t\t[style.gridArea]=\"'auto / auto / auto / span ' + (totalColsVisivel() - (hasVerticalLine() ? 1 : 0))\">\n\t\t\t<div class=\"table-group-name\" [class.table-inativo]=\"dadosLinha.inativo\">\n\t\t\t\t<lib-grid-cell-handler class=\"table-item table-dados {{ colAgrupadoAtual()?.classeCell }}\"\n\t\t\t\t\t[linha]=\"dadosLinha.dados\" [localColuna]=\"colAgrupadoAtual()!\" [lista]=\"lista()!\" [config]=\"config()\"\n\t\t\t\t\t[localColunas]=\"colunasDefinidas()\" [inputSearchText]=\"inputSearchText()\"></lib-grid-cell-handler>\n\t\t\t</div>\n\t\t\t<ui-button tipo=\"nofill\" (click)=\"onClickGroup(dadosLinha)\">\n\t\t\t\t<div class=\"table-group-items-area\" [class.table-group-collapse]=\"dadosLinha.isFullLine?.colapsed === true\">\n\t\t\t\t\t{{ dadosLinha.isFullLine?.colapsedCount ?? 0 }} item(s)\n\t\t\t\t\t<div class=\"table-group-items-ico\">\n\t\t\t\t\t\t<i [class]=\"dadosLinha.isFullLine?.colapsed ? 'bi bi-caret-down-fill' : 'bi bi-caret-down'\"></i>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</ui-button>\n\t\t</div>\n\n\t\t} @else {\n\t\t<div class=\"table-row table-formated table-others\"\n\t\t\t[style.gridArea]=\"'auto / auto / auto / span ' + (totalColsVisivel() - (hasVerticalLine() ? 1 : 0))\">\n\t\t\tNada a exibir nesta linha\n\t\t</div>\n\t\t}\n\n\t\t} @else {\n\n\t\t<!-- LINHA NORMAL via GridRowRenderer -->\n\t\t<lib-grid-row-renderer [dadosLinha]=\"dadosLinha\" [config]=\"config()\" [colunas]=\"colunasExibir()\"\n\t\t\t[colunasOrdenadas]=\"colunasOrdenadas()\" [lista]=\"lista()!\" [inputSearchText]=\"inputSearchText()\"\n\t\t\t[hasSeletor]=\"hasSeletor()\" [hasVerticalLine]=\"hasVerticalLine()\" [isCompacted]=\"isCompacted()\"\n\t\t\t[hasGrid]=\"hasGrid()\" [rowIndex]=\"i\" (actionTriggered)=\"onClickCellAction($event)\"\n\t\t\t(rowClicked)=\"onClickRow($event)\">\n\t\t</lib-grid-row-renderer>\n\n\t\t}}\n\n\t\t<!-- POSSIBILIDADES SEM DADOS -->\n\t\t} @empty {\n\n\t\t<!-- ERRO -->\n\t\t@if(config().hasError) {\n\t\t<div class=\"table-row table-formated table-errors\"\n\t\t\t[style.gridArea]=\"'auto / auto / auto / span ' + (totalColsVisivel() - (hasVerticalLine() ? 1 : 0))\">\n\t\t\t<ng-content select=\"[mkGridError]\"></ng-content>\n\t\t</div>\n\n\t\t<!-- LOADING -->\n\t\t} @else if(!config().isLoaded) {\n\t\t<div class=\"table-row table-formated table-loader\"\n\t\t\t[style.gridArea]=\"'auto / auto / auto / span ' + (totalColsVisivel() - (hasVerticalLine() ? 1 : 0))\">\n\t\t\t<ng-content select=\"[mkGridLoading]\"></ng-content>\n\t\t</div>\n\n\t\t} @else {\n\n\t\t<div class=\"table-row table-empty\"\n\t\t\t[style.gridArea]=\"'auto / auto / auto / span ' + (totalColsVisivel() - (hasVerticalLine() ? 1 : 0))\">\n\t\t\t<lib-grid-empty-list></lib-grid-empty-list>\n\t\t</div>\n\t\t}\n\n\t\t}\n\n\t\t<!-- FIM DA LINHA NORMAL -->\n\n\n\t</div>\n</div>\n<!-- DESKTOP FIM -->\n}\n\n\n@if(config().showPagination){\n<lib-grid-pagination [paginacao]=\"paginacaoSignal()\" [totalPaginas]=\"totalPaginas()\"\n\t(pageChange)=\"irParaPagina($event)\">\n</lib-grid-pagination>\n}\n\n\n\n\n@if(config().showInfoBar){\n<!-- Informa\u00E7\u00F5es de Ordena\u00E7\u00E3o -->\n@if (ordenacoesSignal().length > 0) {\n<div class=\"table-info-row table-styles\">\n\t@if (ordenacoesSignal().length > 0) {\n\t<div>Ordenado por: {{ getOrdenacaoTexto() }}</div>\n\t}\n\t<div class=\"f-1\"></div>\n\t<ui-button tipo=\"outlined\" tema=\"primary\" (click)=\"onClickClearInfo()\" icone=\"bi bi-x-lg\"></ui-button>\n</div>\n}\n<!-- Informa\u00E7\u00F5es de Agrupamento -->\n@if (this.isAgrupado()) {\n<div class=\"table-info-row table-styles\">\n\t<i class=\"fa fa-object-group\"></i>\n\t<div class=\"flex flex-wrap gap-1 f-t-b\">\n\t\tAgrupado por {{ colAgrupadoAtual()?.titulo }} (h\u00E1 {{ gruposEncontrados.itens.size }} grupos)\n\t\t<div class=\"campoSemForm\">\n\t\t\t<ui-select [value]=\"colAgrupadoAtual()?.prop\" [options]=\"this.colunasKVDefinidas()\"\n\t\t\t\t(changed)=\"onChangedAgrupamento($event)\"></ui-select>\n\t\t</div>\n\n\t</div>\n\t<div class=\"f-1\"></div>\n\t<ui-button tipo=\"nofill\" tema=\"primary\" (click)=\"onRecolherGroups()\" icone=\"bi bi-arrows-collapse\">\n\t\tRecolher Todos\n\t</ui-button>\n\t<ui-button tipo=\"nofill\" tema=\"primary\" (click)=\"onExpandirGroups()\" icone=\"bi bi-arrows-expand\">\n\t\tExpandir Todos\n\t</ui-button>\n\t<ui-button tipo=\"outlined\" tema=\"primary\" (click)=\"onClearGroups()\" icone=\"fa fa-object-ungroup\">\n\t\tDesagrupar\n\t</ui-button>\n</div>\n}\n}\n\n\n@if(devMode){\n<!-- MODO DESENVOLVIMENTO -->\n<div class=\"table-info-row table-styles\">\n\t<i class=\"fa fa-microscope\"></i>\n\t<div>Fun\u00E7\u00F5es extras</div>\n\t<div class=\"f-1\"></div>\n\t<ui-button tipo=\"icon\" tema=\"primary\" [ativo]=\"hasGrid()\" (click)=\"onChangeHasGrid()\" icone='bi bi-grid-3x3'\n\t\ttitle=\"Grid\"></ui-button>\n\t<ui-button tipo=\"icon\" tema=\"primary\" [ativo]=\"isCompacted()\" (click)=\"onChangeCompacted()\"\n\t\ticone='fa fa-arrows-to-circle' title=\"Compactar\"></ui-button>\n\t<ui-button tipo=\"icon\" tema=\"primary\" [ativo]=\"hasVerticalLine()\" (click)=\"onChangeLineNumber()\"\n\t\ticone='bi bi-layout-sidebar' title=\"Linha Vertical\"></ui-button>\n\t<ui-button tipo=\"icon\" tema=\"primary\" [ativo]=\"hasSeletor()\" (click)=\"onChangeSeletor()\" icone='fa fa-check-double'\n\t\ttitle=\"Seletor\"></ui-button>\n</div>\n}", styles: [":host{--mk-grid-border-radius: var(--sys-border-radius, 10px);--mk-grid-gap: var(--sys-gap, 8px);--mk-grid-lum-10: var(--sys-lum-10, 95%);--mk-grid-card: var(--sys-card, hsl(216 22% 96%));--mk-grid-background: var(--sys-background, hsl(0 0% 100%));--mk-grid-bg-card: var(--mk-grid-card);--mk-grid-bg: var(--mk-grid-background);--mk-grid-outline: var(--sys-outline, hsl(220 15% 86%));--mk-grid-primary: var(--sys-primary, hsl(224 74% 53%));--mk-grid-on-primary: var(--sys-on-primary, hsl(0 0% 100%));--mk-grid-secondary: var(--sys-secondary, hsl(221 44% 49%));--mk-grid-error: var(--sys-error, hsl(0 66% 47%));--mk-grid-info: var(--sys-info, hsl(210 79% 46%));--mk-grid-high: var(--sys-high, hsl(221 100% 97%));--mk-grid-on-high: var(--sys-on-high, hsl(222 35% 16%));--mk-grid-on-card: var(--sys-on-card, hsl(221 27% 16%));--mk-grid-on-card-variant: var(--sys-on-card-variant, hsl(222 15% 43%));--mk-grid-on-background: var(--sys-on-background, hsl(222 20% 20%));--mk-grid-primary-15: var(--sys-primary-15, hsl(224 74% 53% / 15%))}:host .drag-container{cursor:grab}:host .drag-container:active{cursor:grabbing}:host-context(body:has(.cdk-drag-preview)) .drop-option{outline:1px dashed var(--mk-grid-outline)}:host-context(body:has(.cdk-drag-preview)) .drop-option:hover{outline:1px solid var(--mk-grid-outline);background-color:var(--mk-grid-high)}:host ui-menu>ui-button{border-bottom:1px solid var(--ui-outline-color, var(--mk-grid-outline))}:host .menu-title{font-size:1.2rem;font-weight:600;padding:0 calc(var(--mk-grid-gap) / 2) var(--mk-grid-gap) calc(var(--mk-grid-gap) / 2);border-bottom:1px solid var(--mk-grid-outline);display:flex;justify-content:space-between;align-items:center;gap:var(--mk-grid-gap)}:host .menu-sub-title{font-size:14px;font-weight:500;display:flex;justify-content:flex-start;align-items:center;gap:var(--mk-grid-gap);padding-left:calc(var(--mk-grid-gap) / 2);min-height:30px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .menu-sub-value{font-size:14px;font-weight:400;display:flex;justify-content:flex-end;align-items:center;gap:calc(var(--mk-grid-gap) / 2);padding-right:calc(var(--mk-grid-gap) / 2);min-height:30px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host{display:flex;flex-direction:column}.table-overflow{display:grid;overflow:auto;margin-top:10px;padding:0;position:relative}.table-overflow.compacted{justify-content:center}.table-overflow.mobile{border-radius:calc(var(--mk-grid-border-radius) / 2)}.table-overflow.mobile{overflow:hidden}.table-table-mobile,.table-table{display:grid;font-size:13px}.table-table-mobile{grid-template-columns:1fr 1fr}.table-header,.table-header-mobile{background:var(--mk-grid-primary);color:var(--mk-grid-on-primary);transition:background-color .2s ease;display:flex;flex-wrap:wrap;align-items:center;align-content:stretch;justify-content:center;-webkit-user-select:none;user-select:none;min-height:var(--table-min-height)}.table-header-mobile{padding:0 5px}.table-header-mobile-space{flex:1;height:100%;display:flex;align-items:center;justify-content:center}.table-header-mobile-text,.table-header-text{flex:1;font-weight:600;text-align:center;display:block;align-content:center}.table-header-mobile-text{text-align:start}.table-header-text{height:100%;border-radius:var(--mk-grid-border-radius);position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cdk-drag-preview{font-size:14px!important;background:var(--mk-grid-high);color:var(--mk-grid-on-high);opacity:.6}.cdk-drop-list-receiving:before{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background-color:var(--mk-grid-info);filter:opacity(.5)}.cdk-drag-placeholder:before{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background-color:var(--mk-grid-primary)}.textVertical .table-header-text{writing-mode:vertical-lr;text-orientation:upright;letter-spacing:-5px;padding-bottom:5px;text-align:right;align-self:end;display:flex;justify-content:center;align-items:center;flex-wrap:wrap}.table-header-controls{width:6px;min-width:6px;max-width:6px;cursor:col-resize;height:100%;display:flex;align-items:center;justify-content:center}.table-ico-sort{font-size:10px;color:color-mix(in srgb,var(--mk-grid-secondary) 50%,var(--mk-grid-on-primary) 50%)}.table-ico-sort .asc{animation:aniSortUp 1s infinite cubic-bezier(.175,.885,.32,1.275)}.table-ico-sort .desc{animation:aniSortDown 1s infinite cubic-bezier(.175,.885,.32,1.275)}@keyframes aniSortUp{0%{transform:translateY(0) scale(1)}20%{transform:translateY(0) scale(1)}80%{transform:translateY(-3px) scale(1.1)}to{transform:translateY(0) scale(1)}}@keyframes aniSortDown{0%{transform:translateY(0) scale(1)}20%{transform:translateY(0) scale(1)}80%{transform:translateY(3px) scale(1.1)}to{transform:translateY(0) scale(1)}}.table-row,.table-row-mobile{display:flex;justify-content:space-between;align-items:center}.table-row{background:color-mix(in srgb,var(--mk-grid-primary) 10%,var(--mk-grid-background) 90%)}.table-row-mobile{margin-top:10px}.table-group{border-top-right-radius:calc(var(--mk-grid-border-radius) / 2);border-top-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-group:has(.table-group-collapse){border-bottom-right-radius:calc(var(--mk-grid-border-radius) / 2);border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-group.table-formated{padding-left:10px}.table-group-items-area{display:flex;justify-content:flex-end;align-items:center;gap:8px;font-size:12px;font-style:italic;color:color-mix(in srgb,var(--mk-grid-on-background) 60%,var(--mk-grid-background) 40%);overflow:hidden}.table-group-items-ico{transition:transform .3s ease;transform:rotate(180deg)}.table-group-name{flex:1;height:100%;display:flex;align-items:center}.table-group-collapse .table-group-items-ico{transition:transform .3s ease;transform:rotate(0);color:color-mix(in srgb,var(--mk-grid-primary) 60%,var(--mk-grid-background) 40%)}.table-formated{min-height:var(--table-min-height);padding:1px 2px;font-size:14px}.table-dados{min-height:var(--table-min-height);padding:1px 2px}.table-item{cursor:pointer}.table-item,.table-header{border-left:0px solid transparent;border-right:0px solid transparent}.table-header:first-child{border-top-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-item:last-child{border-bottom-right-radius:calc(var(--mk-grid-border-radius) / 2)}.header-last-col{border-top-right-radius:calc(var(--mk-grid-border-radius) / 2)}.table-table:not(.table-has-vertical-line) .table-item:nth-last-child(-n+1 of div.table-item-seletor){border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-table:not(.table-has-vertical-line,.table-has-seletor) .table-dados:nth-last-child(-n+1 of.table-first-col){border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-header:nth-last-child(-n+1 of div.table-vertical-line){border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-header-mobile.table-vertical-line,.table-header.table-vertical-line,.table-item.table-vertical-line{background:var(--mk-grid-primary);color:var(--mk-grid-on-primary);display:flex;justify-content:center;align-items:center}.table-grupo-seletor,.table-item-seletor{display:flex;justify-content:center;align-items:center}.table-header-mobile.sortable .table-header-text,.table-header.sortable .table-header-text{cursor:pointer;-webkit-user-select:none;user-select:none}.table-header-mobile.sortable:hover,.table-header.sortable:hover,.table-header-mobile.sorted-asc,.table-header-mobile.sorted-desc,.table-header.sorted-asc,.table-header.sorted-desc{background:color-mix(in srgb,var(--mk-grid-secondary) 30%,var(--mk-grid-primary) 70%);color:var(--mk-grid-on-primary)}.table-row.table-errors,.table-row.table-loader{justify-content:center}.table-border-bottom-card{border-bottom:1px solid var(--mk-grid-card)}.table-border-left-darker{border-left:1px solid color-mix(in srgb,var(--mk-grid-card) 20%,transparent 80%)}.table-border-right-darker{border-right:1px solid color-mix(in srgb,var(--mk-grid-card) 20%,transparent 80%)}.table-border-left{border-left:1px solid var(--mk-grid-background)}.table-border-right{border-right:1px solid var(--mk-grid-background)}.table-item-mobile,.table-item{transition:background-color .2s cubic-bezier(.075,.82,.165,1);border-bottom:1px solid var(--mk-grid-background);position:relative}.table-item.hashue{background-color:hsl(var(--bghue) 100 var(--mk-grid-lum-10))}.table-item-mobile.odd:before,.table-item.odd:before,.table-item-mobile.even:before,.table-item.even:before,.table-item.table-bg-error:before{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;z-index:0;pointer-events:none;background:var(--mk-grid-background)}.table-item-mobile.odd:before,.table-item.odd:before{opacity:.2}.table-item-mobile.even:before,.table-item.even:before{opacity:.1}.table-item.table-bg-error:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;z-index:0;pointer-events:none;outline-offset:0px;outline:2px solid var(--mk-grid-error);background-color:var(--mk-grid-error);opacity:.04}.table-border-right-error{border-right:1px dashed color-mix(in srgb,var(--mk-grid-error) 50%,transparent 50%)}.table-styles{color:var(--mk-grid-on-card);background:color-mix(in srgb,var(--mk-grid-outline) 20%,var(--mk-grid-card) 80%);border-radius:calc(var(--mk-grid-border-radius) / 2)}.table-show-error{display:flex;justify-content:center;align-items:center;padding:16px;margin-top:10px}.table-topo-container{display:flex;flex-wrap:wrap;align-items:center;font-size:14px;padding:8px;gap:1rem}.table-actions-outside{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-start;gap:8px}.table-top-right-container{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;flex:1}.table-collapse-ico{display:inline-block;transition:transform .3s}.table-collapse-ico.ativo{transition:transform .3s ease-in-out;transform:rotate(-180deg)}.table-filter-content{font-size:14px;padding:8px;overflow:hidden;transition:all .3s cubic-bezier(.075,.82,.165,1);position:relative;opacity:1}.table-filter-content.table-filter-hide{padding:0;opacity:0;margin-top:calc(var(--filter-height) * -1);transition:all .3s cubic-bezier(.075,.82,.165,1)}.table-filter-container:has(.table-filter-hide){pointer-events:none;-webkit-user-select:none;user-select:none}.table-conjunto-actions{position:relative;display:flex;align-items:stretch}.table-conjunto-actions>*{outline:1px solid var(--mk-grid-outline);outline-offset:-1px}.table-conjunto-actions>:first-child{border-radius:var(--mk-grid-border-radius);border-top-right-radius:0;border-bottom-right-radius:0}.table-conjunto-actions>:last-child{border-radius:0 7px 7px 0}.table-conjunto-actions-item{display:flex;align-items:center;justify-content:center;padding:0;min-height:40px}.table-inativo{color:var(--mk-grid-error)}.table-pagination-overflow{display:grid;align-items:center;overflow:auto;margin-top:10px}.table-pagination-overflow.compacted{margin-top:2px;justify-content:center}.table-pagination-container{display:flex;align-items:center;justify-content:space-between;padding:16px;flex-wrap:wrap;gap:16px;flex:1}.table-pagination-overflow.compacted .table-pagination-container{padding:2px 4px;gap:4px}.table-pagination-overflow.compacted.table-has-pages .table-pagination-controls{border-left:1px solid var(--mk-grid-card);border-right:1px solid var(--mk-grid-card)}.table-pagination-info{display:flex;flex-direction:column;color:var(--mk-grid-on-card-variant);font-size:12px}.table-pagination-controls{display:flex;align-items:center;gap:4px}.table-pagination-show{border-radius:var(--mk-grid-border-radius);min-width:47px;min-height:38px;display:flex;justify-content:center;align-items:center;font-size:12px}.table-pagination-per-page{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mk-grid-on-card-variant);flex-wrap:nowrap;white-space:nowrap}.table-pagination-per-page-select{--ui-width: 50px;font-size:12px;text-align:center}.table-performance{font-size:10px;font-style:italic}.compacted .table-pagination-range{display:none}.compacted .table-pagination-totais{font-size:10px}.compacted .table-performance{display:none}.table-empty{display:flex;justify-content:center;align-items:center;padding:16px}.table-info-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px;font-size:12px;border-left:4px solid var(--mk-grid-primary);padding:12px 16px;margin-top:10px}@media(max-width:768px){.table-pagination-container{flex-direction:column;align-items:stretch;padding:2px}.table-pagination-overflow.compacted .table-pagination-container{padding:0}.table-pagination-controls{justify-content:center}.table-pagination-info{flex-direction:row;justify-content:space-around;gap:10px}.table-pagination-per-page{justify-content:center}}@media(max-width:480px){.table-topo-container{flex-direction:column;align-items:stretch}.table-pagination-container{flex-wrap:wrap;justify-content:space-evenly}.table-small-screen-hide{display:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { lista: [{ type: i0.Input, args: [{ isSignal: true, alias: "lista", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], filtro: [{ type: i0.Input, args: [{ isSignal: true, alias: "filtro", required: false }] }], minLineHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLineHeight", required: false }] }, { type: i0.Output, args: ["minLineHeightChange"] }], isCompacted: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCompacted", required: false }] }, { type: i0.Output, args: ["isCompactedChange"] }], hasGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasGrid", required: false }] }, { type: i0.Output, args: ["hasGridChange"] }], hasVerticalLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasVerticalLine", required: false }] }, { type: i0.Output, args: ["hasVerticalLineChange"] }], hasSeletor: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasSeletor", required: false }] }, { type: i0.Output, args: ["hasSeletorChange"] }], gridSize: [{ type: i0.ViewChild, args: ['gridSize', { ...{ read: ElementRef }, isSignal: true }] }], gridfiltro: [{ type: i0.ViewChild, args: ['gridfiltro', { ...{ read: ElementRef }, isSignal: true }] }], filterContainer: [{ type: i0.ViewChild, args: ['filterContainer', { ...{ read: ElementRef }, isSignal: true }] }] } });
 
+class GridCell {
+    params;
+    _masterCellService;
+    constructor(inputToken, legacyInput) {
+        const input = inputToken ?? legacyInput ?? undefined;
+        this.params = signal(input, ...(ngDevMode ? [{ debugName: "params" }] : /* istanbul ignore next */ []));
+        this._masterCellService = input?.servicoParams;
+        if (this._masterCellService) {
+            effect(() => { this.params.set(this._masterCellService?.gridParams() ?? input); });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: GridCell, deps: [{ token: GRID_PARAMS_TOKEN, optional: true }, { token: 'GRID_PARAMS', optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: GridCell, isStandalone: true, selector: "lib-grid-cell", ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: GridCell, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'lib-grid-cell',
+                    template: '',
+                }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [GRID_PARAMS_TOKEN]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: ['GRID_PARAMS']
+                }] }] });
+
 // Tipos mais específicos, enuns, interfaces e funções uteis.
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { BaseFieldsForm, BaseFieldsValues, CampoDe, FieldsGeneric, FiltroDe, FormAction, FormFilter, FormNoAction, FormatedValues, Formulario, GRID_PARAMS_TOKEN, IField, IGridFilterType, IRegraTipo, LibUtil, MkGrid, PAGINATION_OPTIONS, Regra, ScreenMode, SingleValues, UiButton, UiCheckBox, UiChip, UiDropZone, UiFileList, UiListErrors, UiLoading, UiMenu, UiProcurar, UiProgress, UiSelect, UiSlide };
+export { BaseFieldsForm, BaseFieldsValues, CampoDe, FieldsGeneric, FiltroDe, FormAction, FormFilter, FormNoAction, FormatedValues, Formulario, GRID_PARAMS_TOKEN, GridCell, IField, IGridFilterType, IRegraTipo, LibUtil, MkGrid, PAGINATION_OPTIONS, Regra, ScreenMode, SingleValues, UiButton, UiCheckBox, UiChip, UiDropZone, UiFileList, UiListErrors, UiLoading, UiMenu, UiProcurar, UiProgress, UiSelect, UiSlide };
 //# sourceMappingURL=masterkeymaterial-ui.mjs.map