@masterkeymaterial/ui 0.0.1 → 0.0.2

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

@@ -0,0 +1,84 @@
+/* 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

@@ -0,0 +1,24 @@
+@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

@@ -0,0 +1,157 @@
+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

@@ -0,0 +1,50 @@
+: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

@@ -0,0 +1,25 @@
+<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

@@ -0,0 +1,53 @@
+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

@@ -0,0 +1,32 @@
+: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

@@ -0,0 +1,12 @@
+<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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,104 @@
+.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

@@ -0,0 +1,15 @@
+<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>