@masterkeymaterial/ui 0.0.2 → 0.0.4

package/src/fields/Formulario/form-fase/form-fase.css

@@ -1,84 +0,0 @@
-/* FASES */
-.faseButtons {
-	display: flex;
-	flex-direction: row;
-	justify-content: center;
-	align-items: stretch;
-	height: 45px;
-	flex: 1;
-	gap: 1px;
-	position: relative;
-}
-
-.faseUnderline {
-	height: 1px;
-	background-color: var(--sys-outline);
-	margin-top: 0px;
-	margin-bottom: var(--MasterGap);
-}
-
-.faseUnderline.underline-linear {
-	margin-top: 5px;
-}
-
-.fase-linha-entre-botoes {
-	display: flex;
-	flex-direction: row;
-	justify-content: center;
-	align-items: stretch;
-	position: absolute;
-	top: 0px;
-	left: 0px;
-	right: 0px;
-	bottom: 0px;
-	pointer-events: none;
-}
-
-.fase-linha-central {
-	width: 99%;
-	height: 1px;
-	background-color: var(--sys-outline);
-	align-self: center;
-}
-
-.faseButtons .todosBotoes {
-	--ui-align-items: center;
-	--ui-height: 45px;
-}
-
-.faseBotao {
-	background-color: var(--sys-card);
-}
-
-.faseButtons .faseBotao.ativo {
-	--ui-background: color-mix(in srgb, var(--sys-background) 50%, transparent 50%);
-}
-
-.faseButtons .faseBotao:not(.ativo) {
-	--ui-outline-color: color-mix(in srgb, var(--sys-background) 50%, transparent 50%);
-	--ui-opacity: 0.1;
-}
-
-.faseButtons .faseBotao {
-	flex: 1;
-	position: relative;
-	min-width: 120px;
-}
-
-.faseHeader {
-	display: flex;
-	flex-direction: row;
-	justify-content: flex-start;
-	align-items: center;
-	position: relative;
-}
-
-.faseHeader.hasGap {
-	gap: 15px;
-}
-
-.faseHeaderText {
-	font-size: 14px;
-	font-weight: 600;
-	flex: 1;
-}

package/src/fields/Formulario/form-fase/form-fase.html

@@ -1,24 +0,0 @@
-@if(isFaseado()){
-<div class="faseButtons">
-	<ui-button tipo="icon" tema="primary" (clicked)="faseVoltar()" class="todosBotoes" [disabled]="isDisabledVoltar()"
-		icone="fa fa-arrow-left" title="Voltar" [radiusTabFormat]="!isLinear()"></ui-button>
-	<div class="faseButtons faseHeader" [class.hasGap]="isLinear()">
-		@if(isLinear()){
-		<div class="fase-linha-entre-botoes">
-			<div class="fase-linha-central"></div>
-		</div>
-		}
-		@for (fase of fasesList(); track $index) {
-		<ui-button tipo="nofill" tema="primary" class="todosBotoes faseBotao" (clicked)="faseAvancar($index)"
-			[class.ativo]="faseIndex() == $index" [disabled]="fase.disabled" [icone]="fase.icone" [title]="fase.nome"
-			[radiusTabFormat]="!isLinear()">
-			<div class="faseHeaderText" [innerHTML]="fase.nome"></div>
-		</ui-button>
-		}
-	</div>
-	<ui-button tipo="nofill" tema="primary" (clicked)="faseAvancar()" class="todosBotoes" [disabled]="isDisabledAvancar()"
-		icone="fa fa-arrow-right" [iconeAntes]="false" [iconeDepois]="true" title="Proximo"
-		[radiusTabFormat]="!isLinear()"></ui-button>
-</div>
-<div class="faseUnderline" [class.underline-linear]="isLinear()"></div>
-}

package/src/fields/Formulario/form-fase/form-fase.ts

@@ -1,157 +0,0 @@
-import { Component, computed, effect, input, model, OnInit, signal } from '@angular/core';
-import { UiButton } from "../../../elements/ui-button/ui-button";
-import { IFaseCampos, IFases, IFieldComponent } from '../Formulario';
-import { LOG } from '../../../util/util';
-
-@Component({
-  selector: 'ui-form-fase',
-  templateUrl: './form-fase.html',
-  styleUrls: ['./form-fase.css'],
-  imports: [UiButton],
-})
-export class FormFase implements OnInit {
-
-  fases = model<IFases<any>>();
-  campos = input<IFieldComponent<any>[]>();
-
-  isDisabledVoltar = signal(true);
-  isDisabledAvancar = signal(true);
-  isFaseado = computed(() => {
-    let fases = this.fases()?.fases;
-    return fases !== undefined && fases.length > 1; // 1 é faseado mas não tem navegação, mais de 1 é faseado com navegação
-  });
-  fasesList = computed(() => {
-    return this.fases()?.fases ?? [];
-  });
-  faseIndex = model<number>(0);
-  fase_historico = signal<number[]>([0]);
-  isLinear = computed(() => this.fases()?.isLinear ?? false);
-
-  constructor() {
-    effect(() => {
-      let fases = this.fases()?.fases;
-      if (fases == null) {
-        this.isDisabledAvancar.set(true);
-        this.isDisabledVoltar.set(true);
-        return;
-      }
-      this.isDisabledVoltar.set(this.faseIndex() <= 0);
-      this.isDisabledAvancar.set(this.faseIndex() >= (fases.length - 1));
-    });
-  }
-  ngOnInit(): void {
-    let campos = this.campos();
-    let fases = this.fases();
-
-    if (campos == null || fases == null) return;
-    let semFase = this.checkCamposInFase(campos, fases);
-    if (semFase.length > 0) {
-      semFase.forEach(prop => {
-        this.fases.update(f => {
-          if (f) {
-            // Adiciona os campos sem fase a primeira fase, se ela existir.
-            if (f.fases.length > 0) {
-              let primeiraFase = f.fases[0];
-              if (!primeiraFase.campos.includes(prop)) {
-                primeiraFase.campos.push(prop);
-              }
-            } else {
-              // Se não houver fase, cria uma nova fase e adiciona os campos sem fase nela.
-              f.fases.push({
-                nome: "Geral",
-                campos: [prop],
-              } as IFaseCampos<any>);
-            }
-          }
-          return f;
-        });
-      });
-    }
-    // LOG(1, "Fases configuradas:", this.fases());
-  }
-
-  faseAvancar(faseIndex?: number): void {
-    let fases = this.fases()?.fases;
-    if (fases == null) return;
-
-    if (faseIndex != null) {
-      let proximaFaseIndex = fases.indexOf(fases[faseIndex]);
-      if (proximaFaseIndex !== -1) {
-        if (proximaFaseIndex !== this.faseIndex()) {
-          this.faseIndex.set(faseIndex);
-          this.fase_historico.update(h => { h = [...h, faseIndex]; return h; });
-        }
-      } else {
-        LOG(1, "Fase informada não existe.");
-      }
-    } else {
-      let proximaFaseIndex = fases.indexOf(fases[this.faseIndex() + 1]);
-      if (proximaFaseIndex !== -1) {
-        if (proximaFaseIndex !== this.faseIndex()) {
-          this.faseIndex.set(proximaFaseIndex);
-          this.fase_historico.update(h => { h = [...h, proximaFaseIndex]; return h; });
-        }
-      } else {
-        LOG(1, "Não há próxima fase para avançar.");
-      }
-    }
-  }
-  faseVoltar(): void {
-    let fases = this.fases()?.fases;
-    if (fases == null) return;
-
-    if (this.faseIndex() > 0) {
-      this.fase_historico.update(h => { h.pop(); return h; });
-      let ultimaFaseDoHistorico = this.fase_historico()[this.fase_historico().length - 1];
-      if (ultimaFaseDoHistorico != null) {
-        this.faseIndex.set(ultimaFaseDoHistorico);
-      } else {
-        LOG(1, "Não para onde voltar.");
-      }
-    } else {
-      this.faseIndex.set(0);
-      this.fase_historico.set([0]);
-      LOG(1, "Já está na primeira fase possível.")
-    }
-  }
-
-
-
-  checkCamposInFase(campos: IFieldComponent<any>[], fases: IFases<any>): string[] {
-    // Verifica e informa no console se todos os campos recebidos estão presentes em alguma fase
-    let camposNomes = campos.map(c => c.prop);
-    let camposEmFases: string[] = [];
-    let camposNaoEmFases: string[] = [];
-    for (let campoNome of camposNomes) {
-      let encontrado = false;
-      for (let fase of fases.fases) {
-        for (let campoOrGrupo of fase.campos) {
-          if (typeof campoOrGrupo === 'string') {
-            if (campoOrGrupo === campoNome) {
-              encontrado = true;
-              break;
-            }
-          } else {
-            if (campoOrGrupo.campos.includes(campoNome)) {
-              encontrado = true;
-              break;
-            }
-          }
-        }
-        if (encontrado) break;
-      }
-      if (encontrado) {
-        camposEmFases.push(campoNome);
-      } else {
-        camposNaoEmFases.push(campoNome);
-      }
-    }
-    // if (camposNaoEmFases.length > 0) {
-    // LOG(1, "⚠️ Campos sem fase:", camposNaoEmFases);
-    // } else {
-    //   LOG(1, "✔️ Todos os campos estão presentes em alguma fase.");
-    // }
-    return camposNaoEmFases;
-
-  }
-}

package/src/fields/Formulario/form-filter/form-filter.css

@@ -1,50 +0,0 @@
-:host {
-	display: block;
-	width: 100%;
-	margin-top: 10px;
-}
-
-.buttonsGap {
-	display: flex;
-	flex-direction: var(--ui-form-flex-direction, column);
-	gap: var(--MasterGap);
-	margin-top: var(--MasterGap);
-}
-
-.filtrosAtivos {
-	display: flex;
-	flex-wrap: wrap;
-	gap: var(--MasterGap);
-	margin-bottom: var(--MasterGap);
-}
-
-.filtrosAtivos div {
-	display: flex;
-	gap: 2px;
-	align-items: center;
-	background-color: var(--sys-high-15);
-	padding: 0 0 0 1rem;
-	border-radius: var(--MasterRadius);
-	font-size: 0.9rem;
-}
-
-.fieldHidden {
-	display: none;
-}
-
-.areaValues {
-	outline: 1px solid color-mix(in srgb, var(--sys-outline) 50%, transparent 50%);
-	background-color: color-mix(in srgb, var(--sys-card) 80%, var(--sys-background) 20%);
-	border-radius: var(--MasterRadius);
-	padding: 0.5rem;
-	gap: var(--MasterGap);
-	margin-top: var(--MasterGap);
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-}
-
-.areaValues .card {
-	flex: 1;
-	overflow: auto;
-}

package/src/fields/Formulario/form-filter/form-filter.html

@@ -1,25 +0,0 @@
-<div class="filtrosAtivos">
-	@for ( item of kvPreenchido(); track $index) {
-	<div>
-		{{ item.v }}
-		<ui-button tipo="icon" tema="error" icone="bi bi-x" (click)="onDeletePropriedade(item.k)">
-		</ui-button>
-	</div>
-	}
-</div>
-<div class="g-fields" [style.--g-fields-min]="gmin()" [style.--g-fields-max]="gmax()">
-
-	@for (campo of form.listaCampos(); track $index) {
-	<fields-g [form]="form" [name]="campo.prop" [class]="campo.tipo == 'hidden' ? 'fieldHidden' : ''"></fields-g>
-	}
-
-</div>
-<div class="buttonsGap">
-	<ui-button tipo="fill" tema="primary" icone="bi bi-funnel" (click)="onFiltrar()">{{ actionTitle() }}</ui-button>
-	<ng-content></ng-content>
-</div>
-
-@if(showFormControls()){
-<ui-form-controls [form]="form" [recebido]="this.values()" [(hasOutline)]="hasOutline" [faseIndex]="faseIndex()"
-	[totalFases]="listaFase().length"></ui-form-controls>
-}

package/src/fields/Formulario/form-filter/form-filter.ts

@@ -1,53 +0,0 @@
-import { Component, computed, input, model, output } from '@angular/core';
-import { UiButton } from "../../../elements/ui-button/ui-button";
-import { BaseFieldsValues } from '../../Base/BaseFieldsValues/BaseFieldsValues';
-import { FieldsGeneric } from '../../generic/generic';
-import { LibUtil } from '../../../util/util';
-import { IKV } from '../../../interfaces/interfaces';
-import { FormControls } from "../form-controls/form-controls";
-import { IField, IFields } from '../Formulario';
-
-@Component({
-  selector: 'fields-form-filter',
-  templateUrl: './form-filter.html',
-  styleUrl: './form-filter.css',
-  imports: [UiButton, FieldsGeneric, FormControls],
-})
-export class FormFilter<T> extends BaseFieldsValues<T> {
-
-  async onSave() {
-    // Não faz nada.  
-    return;
-  }
-
-  hasOutline = model<boolean>(false);
-  filtrar = output<any>();
-  actionTitle = input<string>('Aplicar Filtro');
-
-  onFiltrar() {
-    let valores = LibUtil.clonar(this.form.values());
-    valores = LibUtil.limparObject(valores);
-    this.filtrar.emit(valores);
-  }
-
-  kvPreenchido = computed(() => {
-    let propriedades: IKV[] = [];
-    let valores = this.values() as any;
-    if (!valores) return propriedades;
-    let campos = this.campos();
-    for (const key of Object.keys(campos)) {
-      let campo = campos[key];
-      if (campo.tipo === IField.Hidden) continue;
-      if (valores?.[key] != null && valores?.[key] !== '' && !(Array.isArray(valores?.[key]) && valores?.[key].length === 0)) {
-        propriedades.push({ k: campo.prop, v: campo.titulo ?? String(campo.prop) });
-      }
-    }
-    return propriedades;
-  });
-
-  onDeletePropriedade(k: string | number | null | undefined) {
-    if (k == null) return;
-    this.form.updateValues({ [k as keyof IFields<T>]: '' });
-    this.onFiltrar();
-  }
-}

package/src/fields/Formulario/form-no-action/form-no-action.css

@@ -1,32 +0,0 @@
-:host {
-	display: block;
-	width: 100%;
-}
-
-.buttonsGap {
-	display: flex;
-	flex-direction: var(--ui-form-flex-direction, column);
-	gap: var(--MasterGap);
-	margin-top: var(--MasterGap);
-}
-
-.fieldHidden {
-	display: none;
-}
-
-.areaValues {
-	outline: 1px solid color-mix(in srgb, var(--sys-outline) 50%, transparent 50%);
-	background-color: color-mix(in srgb, var(--sys-card) 80%, var(--sys-background) 20%);
-	border-radius: var(--MasterRadius);
-	padding: 0.5rem;
-	gap: var(--MasterGap);
-	margin-top: var(--MasterGap);
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-}
-
-.areaValues .card {
-	flex: 1;
-	overflow: auto;
-}

package/src/fields/Formulario/form-no-action/form-no-action.html

@@ -1,12 +0,0 @@
-<div class="g-fields" [style.--g-fields-min]="gmin()" [style.--g-fields-max]="gmax()">
-
-	@for (campo of form.listaCampos(); track $index) {
-	<fields-g [form]="form" [name]="campo.prop" [class]="campo.tipo == 'hidden' ? 'fieldHidden' : ''"></fields-g>
-	}
-
-</div>
-
-@if(showFormControls()){
-<ui-form-controls [form]="form" [recebido]="this.values()" [(hasOutline)]="hasOutline" [faseIndex]="faseIndex()"
-	[totalFases]="listaFase().length"></ui-form-controls>
-}

package/src/fields/Formulario/form-no-action/form-no-action.ts

@@ -1,21 +0,0 @@
-import { Component, model } from '@angular/core';
-import { FieldsGeneric } from '../../generic/generic';
-import { BaseFieldsValues } from '../../Base/BaseFieldsValues/BaseFieldsValues';
-import { FormControls } from "../form-controls/form-controls";
-
-@Component({
-  selector: 'fields-form-no-action',
-  templateUrl: './form-no-action.html',
-  styleUrl: './form-no-action.css',
-  imports: [FieldsGeneric, FormControls],
-})
-export class FormNoAction<T> extends BaseFieldsValues<T> {
-
-  async onSave() {
-    // Não faz nada.  
-    return;
-  }
-
-  hasOutline = model<boolean>(false);
-
-}

package/src/fields/Formulario/formated-values/formated-values.css

@@ -1,104 +0,0 @@
-.showEntidade {
-	margin-top: 5px;
-}
-
-.linhaDado {
-	border: 1px solid transparent;
-	border-bottom: 1px dotted var(--sys-primary-15);
-}
-
-.titulo {
-	font-weight: 600;
-}
-
-.linhaDado.isEspecial .titulo {
-	color: var(--sys-secondary);
-}
-
-.conteudo {
-	color: color-mix(in srgb, var(--sys-secondary) 50%, var(--sys-on-background) 50%);
-}
-
-.linhaDado:hover {
-	border-bottom: 1px solid var(--sys-secondary);
-}
-
-.showEntidade.cantos .linhaDado {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	align-items: center;
-	flex-wrap: wrap;
-	gap: calc(var(--MasterGap) / 2);
-}
-
-.showEntidade.centro .linhaDado {
-	display: grid;
-	grid-template-columns: 1fr 1fr;
-	gap: calc(var(--MasterGap) / 2);
-}
-
-.showEntidade.centro .titulo {
-	text-align: end;
-}
-
-.showEntidade.esquerda .linhaDado {
-	display: grid;
-	grid-template-columns: auto 1fr;
-	gap: calc(var(--MasterGap) / 2);
-}
-
-
-.showEntidade.grid {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-	gap: calc(var(--MasterGap) / 4);
-}
-
-.showEntidade.grid .linhaDado {
-	display: flex;
-	flex-direction: column;
-	flex-wrap: wrap;
-	border: 1px solid var(--sys-primary-15);
-	border-radius: var(--MasterRadius);
-	padding: calc(var(--MasterGap) / 2);
-}
-
-.showEntidade.grid .linhaDado:hover {
-	border: 1px solid var(--sys-secondary);
-}
-
-.showEntidade.wrap {
-	display: flex;
-	flex-wrap: wrap;
-	gap: calc(var(--MasterGap) / 2);
-}
-
-.showEntidade.wrap .linhaDado {
-	display: flex;
-	flex-direction: column;
-	flex-wrap: wrap;
-	border: 1px solid var(--sys-primary-15);
-	border-radius: var(--MasterRadius);
-	padding: calc(var(--MasterGap) / 2);
-}
-
-.showEntidade.wrap .linhaDado:hover {
-	border: 1px solid var(--sys-secondary);
-}
-
-@media (max-width: 600px) {
-
-	.showEntidade.cantos .linhaDado,
-	.showEntidade.centro .linhaDado,
-	.showEntidade.esquerda .linhaDado,
-	.showEntidade.cantos .linhaDado *,
-	.showEntidade.centro .linhaDado *,
-	.showEntidade.esquerda .linhaDado * {
-		display: flex;
-		flex-direction: column;
-		flex-wrap: wrap;
-		gap: calc(var(--MasterGap) / 4);
-		text-align: start;
-	}
-}

package/src/fields/Formulario/formated-values/formated-values.html

@@ -1,15 +0,0 @@
-<div [class]="modo()" [class.showEntidade]="true">
-
-
-	@for (field of camposFormatados(); track $index) {
-	<div class="linhaDado" [class.isEspecial]="field.isEspecial">
-		<div class="titulo" [innerHTML]="field.label"></div>
-		<!-- @if(field.isInner){ -->
-		<div class="conteudo" [innerHTML]="field.value"></div>
-		<!-- }@else {
-		<build-component [componente]="field.value" [inputs]="field.inputs"></build-component>
-		} -->
-	</div>
-	}
-
-</div>