@masterkeymaterial/ui 0.0.1 → 0.0.2

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

@@ -0,0 +1,98 @@
+:host {
+	display: block;
+	width: 100%;
+}
+
+.buttonsGap {
+	display: flex;
+	flex-direction: var(--ui-form-flex-direction, column);
+	gap: var(--MasterGap);
+	margin-top: var(--MasterGap);
+	z-index: 9;
+}
+
+.fieldHidden {
+	display: none;
+}
+
+
+.showOutlineFields fields-g {
+	outline: 1px dashed #555;
+	z-index: 2;
+}
+
+.icons {
+	display: flex;
+	flex-direction: row;
+	gap: 5px;
+	justify-content: center;
+	align-items: center;
+}
+
+.icons .done {
+	color: var(--sys-warning);
+}
+
+.icons .done.success {
+	color: var(--sys-success);
+}
+
+.icons .done.fail {
+	color: var(--sys-error);
+}
+
+.containerFases {
+	display: flex;
+	flex-direction: row;
+	width: 100%;
+	gap: calc(var(--MasterGap) * 2);
+	margin-top: var(--MasterGap);
+	margin-bottom: var(--MasterGap);
+	overflow: hidden;
+	/* overflow-x: hidden;
+	overflow-y: auto;
+	O OverflowX é necessário, o Y não. E o Y está gerando problemas. Ao definir o X, o Y resolve ser obrigatório.
+	Problemas quando overflow-y é auto:
+		- A largura da barra causa um erro no calculo do translateX, fazendo um pequeno espaço sumir no início.
+	*/
+	position: relative;
+	padding: 2px;
+	z-index: 10;
+}
+
+.containerFases.showOutlineFields {
+	outline: 1px solid var(--sys-outline);
+}
+
+.areaFase {
+	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
+	width: 100%;
+	min-width: 100%;
+	flex-shrink: 0;
+	height: fit-content;
+	transform: translateX(calc(var(--fase, 0) * (100% + (var(--MasterGap) * 2)) * -1));
+	/* margin-left: var(--MasterGap); */
+}
+
+.areaFase.ativo {
+	opacity: 1;
+}
+
+.areaFase:not(.ativo) {
+	opacity: 0;
+	height: 1px;
+}
+
+.botaoAcaoSave {
+	position: relative;
+}
+
+.loadingSubmit {
+	position: absolute;
+	right: 5px;
+	font-size: 32px;
+	/* transform: translate(10px); */
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}

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

@@ -0,0 +1,75 @@
+<ui-form-fase [fases]="fases()" [campos]="form.listaCampos()" [(faseIndex)]="faseIndex"></ui-form-fase>
+@if(isFaseado()){
+<div class="containerFases" [class.showOutlineFields]="hasOutline()">
+	@for (fase of listaFase(); track $index;let fIndex = $index) {
+	<div class="areaFase g-fields" [style.--fase]="faseIndex()" [class.ativo]="faseIndex() == fIndex"
+		[style.--g-fields-min]="fase.gridMin" [style.--g-fields-max]="fase.gridMax"
+		[class.showOutlineFields]="hasOutline()">
+		@for (faseGrupo of faseGrupo(); track $index) {
+		@if(faseGrupo.faseIndex == fIndex){
+
+		@if(faseGrupo.tipo == 'campo' && faseGrupo.campo){
+
+		<fields-g [form]="form" [name]="faseGrupo.campo.prop"
+			[class]="faseGrupo.campo.tipo == 'hidden' ? 'fieldHidden' : ''"></fields-g>
+
+		} @else if (faseGrupo.tipo == 'grupo' && faseGrupo.grupo) {
+
+		<div class="field-group" [style.grid-area]="faseGrupo.grupo.area ?? 'auto / auto / auto / span 2'">
+			@if(faseGrupo.grupo.titulo){ <div class="group-title"
+				[style.grid-area]="faseGrupo.grupo.tituloArea ?? 'auto / auto / auto / span 2'">{{
+				faseGrupo.grupo!.titulo }}</div> }
+			@for(campo of faseGrupo.grupo!.campos; track $index){
+			<fields-g [form]="form" [name]="campo"
+				[class]="form.campos()[campo]?.tipo == 'hidden' ? 'fieldHidden' : ''"></fields-g>
+			}
+		</div>
+
+		}@else{
+
+		<div class="card bg-danger"> ❌ Falha tipo {{ faseGrupo.tipo }}.<br> Campo {{ faseGrupo.nome }} não encontrado!</div>
+		}
+
+		}
+		}
+	</div>
+	}
+</div>
+
+}@else {
+<div class="g-fields" [style.--g-fields-min]="gmin()" [style.--g-fields-max]="gmax()"
+	[class.showOutlineFields]="hasOutline()">
+
+	@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" (clicked)="onSave()" [disabled]="isDisabledAction()" class="botaoAcaoSave">
+		@if(showFormControls()){
+		<div class="icons">
+			@for (task of tasksToSave(); track $index) {
+			<i [class]="task.icone" [class.done]="task.done" [class.success]="task.success == true"
+				[class.fail]="task.success == false"></i>
+			}
+		</div>
+		}
+		<div class="f-1">
+			{{ actionTitle() ?? 'Salvar' }}
+		</div>
+		@if(isLoadingActive()){
+		<div class="loadingSubmit">
+			<ui-loading></ui-loading>
+		</div>
+		}
+	</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-action/form-action.ts

@@ -0,0 +1,187 @@
+import { Component, input, model, OnInit, output, signal } from '@angular/core';
+import { UiButton } from "../../../elements/ui-button/ui-button";
+import { LibUtil, LOG } from '../../../util/util';
+import { BaseFieldsValues } from '../../Base/BaseFieldsValues/BaseFieldsValues';
+import { FieldsGeneric } from '../../generic/generic';
+import { FormControls } from "../form-controls/form-controls";
+import { FormFase } from "../form-fase/form-fase";
+import { UiLoading } from "../../../elements/ui-loading/ui-loading";
+
+export interface ISaveTasks {
+  title: string;
+  icone: string;
+  task: () => Promise<boolean>;
+  done?: boolean;
+  success?: boolean;
+}
+
+export interface IActionsDone {
+  values: any;
+  result: any;
+  tasks: ISaveTasks[];
+  ok: boolean; // Booleano que indica se todas tarefas inseridas foram concluídas com sucesso.
+}
+
+@Component({
+  selector: 'fields-form-action',
+  templateUrl: './form-action.html',
+  styleUrls: ['./form-action.css'],
+  imports: [UiButton, FieldsGeneric, FormControls, FormFase, UiLoading],
+})
+export class FormAction<T> extends BaseFieldsValues<T> implements OnInit {
+
+  hasOutline = model<boolean>(false);
+
+  actionTitle = input<string | undefined>();
+  sendValues = input<((values: any) => Promise<any>) | undefined>();
+  sending = output<boolean>();
+  done = output<IActionsDone>();
+
+  // Permite customizar tarefas.
+  taskTocar = input<boolean>(true);
+  taskSanitizar = input<boolean>(true);
+  taskDisponiveis = input<boolean>(true);
+  taskValidar = input<boolean>(true);
+  taskEnviar = input<boolean>(true);
+  tasksToSave = signal<ISaveTasks[]>([]);
+
+  result: any = null;
+
+  override ngOnInit(): void {
+    super.ngOnInit();
+    this.updateDisabledAction();
+
+    // Incrementa tarefa TOCAR
+    if (this.taskTocar()) {
+      this.tasksToSave.update(tasks => [...tasks, {
+        title: 'Tocando campos',
+        icone: 'fa fa-handshake',
+        task: async () => {
+          this.form.setTouchedAll(true);
+          return true;
+        }
+      }]);
+    }
+
+    // Incrementa tarefa Sanitizando
+    if (this.taskSanitizar()) {
+      this.tasksToSave.update(tasks => [...tasks, {
+        title: 'Sanitizando',
+        icone: 'fa fa-quidditch-broom-ball',
+        task: async () => {
+          this.form.sanitizar();
+          return true;
+        }
+      }]);
+    }
+
+    // Tarefa para filtrar apenas os campos disponíveis para envio (ex: campos desabilitados, etc).
+    if (this.taskDisponiveis()) {
+      this.tasksToSave.update(tasks => [...tasks, {
+        title: 'Disponíveis para envio',
+        icone: 'fa fa-power-off',
+        task: async () => {
+          this.form.onlyAvailable();
+          return true;
+        }
+      }]);
+    }
+
+    // Incrementa tarefa VALIDAR
+    if (this.taskValidar()) {
+      this.tasksToSave.update(tasks => [...tasks, {
+        title: 'Validando',
+        icone: 'bi bi-ui-checks',
+        task: async () => {
+          try {
+            await this.form.validar();
+            return true;
+          } catch (e) {
+            return false;
+          }
+        }
+      }]);
+    }
+
+    // Incrementa tarefa SENDVALUES
+    if (this.taskEnviar() && this.sendValues()) {
+      this.tasksToSave.update(tasks => [...tasks, {
+        title: 'Ação de enviar',
+        icone: 'fa fa-paper-plane',
+        task: async () => {
+          // Para enviar, o form deve estar válido.
+          if (!this.form.valido()) return false;
+
+          // Para enviar, deve existir a função de envio.
+          let fnEnviar = this.sendValues();
+          if (!fnEnviar) return false;
+
+          // Reinicia o resultado anterior, se houver.
+          this.result = null;
+
+          // Obtem os valores do formulário.
+          let valores = LibUtil.clonar(this.form.values());
+
+          // Inicia o envio.
+          try {
+            this.form.isEnviando = true;
+            this.sending.emit(true);
+            this.result = await fnEnviar(valores);
+            this.form.isEnviando = false;
+            this.sending.emit(false);
+            if (this.result != null) {
+              // Indica que a tarefa de envio foi concluída com sucesso.
+              return true;
+            }
+          } catch (e) {
+            LOG(1, "❌ ERRO ao Enviar Valores. ", e);
+          }
+
+          // Qualquer outro caso, indica falha.
+          return false;
+        }
+      }]);
+    }
+
+    // Neste componente, há sempre uma ação e sempre emite tasksDone.
+    this.tasksToSave.update(tasks => [
+      ...tasks,
+      {
+        title: 'Ações concluídas',
+        icone: 'fa fa-flag-checkered',
+        task: async () => {
+          let ok = this.tasksToSave().filter(task => task.title !== 'Ações concluídas').every(task => task.success);
+          let values = LibUtil.clonar(this.form.values());
+          let actionsDone: IActionsDone = {
+            values,
+            result: this.result,
+            tasks: this.tasksToSave(),
+            ok
+          }
+          this.done.emit(actionsDone);
+          if (ok) this.form.isEnviado = true;
+          return ok;
+        }
+      }
+    ]);
+
+  }
+
+  async onSave() {
+    this.tasksToSave.update(tasks => tasks.map(t => ({ ...t, done: false })));
+    this.updateDisabledAction(true);
+    this.isLoadingActive.set(true);
+
+    for await (const task of this.tasksToSave()) {
+      // await LibUtil.wait(1000);
+      let r = task.task();
+      r.then(s => task.success = s).catch(f => task.success = false);
+      await r;
+      task.done = true;
+    }
+
+    this.isLoadingActive.set(false);
+    this.updateDisabledAction();
+  }
+
+}

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

@@ -0,0 +1,108 @@
+.areaFormControl {
+	display: flex;
+	flex-direction: column;
+	gap: var(--MasterGap);
+	margin-top: var(--MasterGap);
+}
+
+.barStatus {
+	display: flex;
+	flex-direction: row;
+	gap: var(--MasterGap);
+	align-items: center;
+}
+
+.formColtrols {
+	display: flex;
+	flex-direction: row;
+	gap: var(--MasterGap);
+}
+
+.collapsed .formColtrols {
+	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;
+}
+
+.areaValues.jsonArea {
+	flex: 1;
+	overflow: auto;
+}
+
+.divider {
+	flex: 1;
+	height: 30px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	cursor: pointer;
+}
+
+.controls {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+	--ui-justify-content: left;
+}
+
+.controls .dados {
+	--ui-font-size: 20px;
+}
+
+.controls .estado {
+	--ui-font-size: 20px;
+}
+
+ui-button.estado.ativo {
+	outline: 1px outset var(--sys-high);
+	box-shadow:
+		0 0 1px var(--sys-high),
+		inset 0 0 5px var(--sys-high);
+	border-radius: var(--MasterRadius);
+}
+
+pre {
+	font-size: 16px;
+	padding: 1rem;
+}
+
+.status {
+	gap: 5px;
+}
+
+.statusItem {
+	width: 30px;
+	height: 30px;
+	border: 1px solid var(--sys-outline);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	text-align: center;
+	border-radius: 4px;
+	line-height: 13px;
+	background-color: var(--sys-background);
+}
+
+.statusItem.ativo {
+	background-color: var(--sys-success-15);
+	border-color: var(--sys-success);
+}
+
+.statusItem.inativo {
+	background-color: var(--sys-error-15);
+	border-color: var(--sys-error);
+}
+
+.barIcoCollapse i {
+	transition: 300ms;
+}
+
+.collapsed .barIcoCollapse i {
+	transition: 300ms;
+	transform: rotate(180deg);
+}

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

@@ -0,0 +1,105 @@
+<div class="areaFormControl" [class.collapsed]="colapsed()">
+	<div class="areaValues barStatus">
+		<div class="f-s-e status">
+			<div class="statusItem f-s-12 f-t-b" [title]="'Fases. Atual: ' + faseIndex() + '. Total: ' + totalFases()"
+				[class.ativo]="totalFases() > 1" [class.inativo]="faseIndex() < 0 || faseIndex() > totalFases()">
+				@if(totalFases() > 1){
+				<div class="f-s-e">
+					<div>A</div>
+					<div>{{ faseIndex() }}</div>
+				</div>
+				<div class="f-s-e">
+					<div>U</div>
+					<div>{{ totalFases() - 1 }}</div>
+				</div>
+				} @else {
+				<i class="fa fa-list-check f-s-18"></i>
+				}
+			</div>
+			<div class="statusItem" [class.ativo]="form().algumTocado()" [class.inativo]="!form().algumTocado()"
+				title="Algum campo tocado">
+				<i class="fa fa-handshake f-s-20"></i>
+			</div>
+			<div class="statusItem" [class.ativo]="form().valido()" [class.inativo]="!form().valido()"
+				title="Todos campos Válidos">
+				<i class="bi bi-check2-all f-s-20"></i>
+			</div>
+			<div class="statusItem" [class.ativo]="form().isEnviado" [class.inativo]="!form().isEnviado"
+				title="Estado de Enviado">
+				<i class="bi bi-send-check f-s-18"></i>
+			</div>
+		</div>
+		<div class="divider barIcoCollapse" (click)="colapsed.set(!colapsed())">
+			<i class="bi bi-caret-down"></i>
+		</div>
+		<div class="f-s-e status">
+			<ui-button tipo="icon" tema="success" class="dados" (click)="copiar()" icone="bi bi-copy"
+				title="Copiar o JSON de valores"></ui-button>
+			<ui-button tipo="icon" tema="success" class="estado" (click)="setOutline()" [class.ativo]="hasOutline()"
+				icone="fa fa-border-top-left" [title]="(hasOutline() ? 'Com' : 'Sem') +' Outline'"></ui-button>
+			<ui-button tipo="icon" tema="info" class="estado" (click)="changePreview()" [class.ativo]="showingErrors()"
+				icone="bi bi-exclamation-triangle" [title]="showingErrors() ? 'Errors' : 'Values'"></ui-button>
+			<ui-button tipo="icon" tema="info" class="estado" (click)="obrigatorio()" [class.ativo]="fullRequired()"
+				icone="fa fa-file-circle-exclamation" [title]="fullRequired() ? 'Obrigatório' : 'Liberado'"></ui-button>
+
+			<ui-button tipo="icon" tema="info" class="estado" (click)="desativados()" [class.ativo]="fullDisabled()"
+				icone="bi bi-person-fill-lock" [title]="fullDisabled() ? 'Desativado' : 'Ativo'"></ui-button>
+			<ui-button tipo="icon" tema="info" class="estado" (click)="pendentes()" [class.ativo]="fullPending()"
+				icone="fa fa-clock-four" [title]="fullPending() ? 'Pendente' : 'Sincronizado'"></ui-button>
+
+		</div>
+	</div>
+	@if(!colapsed()){
+	<div class="formColtrols">
+		<div class="areaValues jsonArea">
+			@if(showingErrors()){
+			<div>Erros do Formulário (Tipo: {{ form().listaErrors() | classOf }})</div>
+			<pre class="p-2" [innerHTML]="form().listaErrors() | jsonColorido"></pre>
+			} @else {
+			<div>Valor do Formulário (Tipo: {{ form().values() | classOf }})</div>
+			<pre class="p-2" [innerHTML]="valoresOrdenados() | jsonColorido"></pre>
+			}
+		</div>
+		<div class="areaValues controls">
+
+			<ui-button tipo="outlined" tema="success" class="dados" (click)="sanitizar()" icone="fa fa-quidditch-broom-ball"
+				title="Filtra e mantém apenas os valores dos campos que estão definidos para este formulário.">
+				Sanitizar
+			</ui-button>
+			<ui-button tipo="outlined" tema="success" class="dados" (click)="onlyAvailable()" icone="fa fa-power-off"
+				title="Filtra e mantém apenas os valores dos campos que estão disponíveis para este formulário.">
+				Disponíveis
+			</ui-button>
+			<ui-button tipo="outlined" tema="success" class="dados" (click)="validar()" icone="bi bi-ui-checks"
+				title="Valida o formulário e seus campos.">
+				Validar
+			</ui-button>
+			<ui-button tipo="outlined" tema="warning" class="dados" (click)="setarValRecebido()"
+				icone="fa fa-clock-rotate-left" title="Seta os valores que foram recebidos no formulário.">
+				Recebido
+			</ui-button>
+			<ui-button tipo="outlined" tema="error" class="dados" (click)="forcarVazio()" icone="bi bi-eraser-fill"
+				title="Limpa todos os valores do formulário.">
+				Limpar
+			</ui-button>
+			<ui-button tipo="outlined" tema="error" class="dados" (click)="setarValInicio()" icone="bi bi-skip-backward"
+				title="Reseta os valores do formulário para os valores iniciais.">
+				Reset
+			</ui-button>
+			<ui-button tipo="outlined" tema="info" class="dados" (click)="tocados()"
+				[icone]="fullTouched() ? 'fa fa-handshake' : 'fa fa-handshake-slash'"
+				title="Marca todos os campos como tocados ou não tocados.">
+				{{ fullTouched() ? 'Tocados' : 'Tocar Todos' }}
+			</ui-button>
+
+			<ui-button tipo="outlined" tema="error" class="estado" (click)="setErrorAll()"
+				[class.ativo]="form().listaErrors().length > 0"
+				[icone]="form().listaErrors().length > 0 ? 'bi bi-exclamation-triangle' : 'bi bi-circle'"
+				[title]="form().listaErrors().length > 0 ? 'Erros adicionados' : 'Erros removidos'">
+				{{ form().listaErrors().length > 0 ? 'Erros Forçados' : 'Erros removidos' }}
+			</ui-button>
+
+		</div>
+	</div>
+	}
+</div>

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

@@ -0,0 +1,122 @@
+import { Component, computed, input, model, signal } from '@angular/core';
+import { UiButton } from "../../../elements/ui-button/ui-button";
+import { Formulario } from '../Formulario';
+import { JsonColoridoPipe } from '../../../util/JsonColorido.pipe';
+import { ClassOfPipe } from '../../../util/ClassOf.pipe';
+import { LibUtil } from '../../../util/util';
+
+@Component({
+  selector: 'ui-form-controls',
+  templateUrl: './form-controls.html',
+  styleUrls: ['./form-controls.css'],
+  imports: [UiButton, JsonColoridoPipe, ClassOfPipe],
+})
+export class FormControls {
+
+  form = input.required<Formulario>();
+  recebido = input<any>({});
+  hasOutline = model<boolean>(false);
+  faseIndex = input<number>(0);
+  totalFases = input<number>(0);
+
+  colapsed = signal(true);
+
+  valoresOrdenados = computed(() => {
+    let jsonValues: any = {};
+    let formValues = this.form().values();
+    if (LibUtil.classof(formValues) !== 'object') {
+      return formValues;
+    }
+    let keys = Object.keys(formValues);
+    keys.sort();
+    for (let key of keys) {
+      jsonValues[key] = formValues[key];
+    }
+    return jsonValues;
+  });
+
+  // CONTROLES
+  copiar() {
+    let values = LibUtil.formatJson(this.valoresOrdenados(), true)
+    LibUtil.copy(values);
+  }
+
+
+  fullDisabled = signal(false);
+  desativados() {
+    this.fullDisabled.set(!this.fullDisabled());
+    this.form().setDisabledAll(this.fullDisabled());
+  }
+
+  fullRequired = signal(false);
+  obrigatorio() {
+    this.fullRequired.set(!this.fullRequired());
+    this.form().campos.update(c => {
+      for (const key of Object.keys(c)) {
+        c[key].need = this.fullRequired();
+      }
+      return c;
+    });
+  }
+
+  fullPending = signal(false);
+  pendentes() {
+    this.fullPending.set(!this.fullPending());
+    this.form().campos.update(c => {
+      for (const key of Object.keys(c)) {
+        c[key].pending = this.fullPending();
+      }
+      return c;
+    });
+  }
+
+  fullTouched = signal(false);
+  tocados() {
+    this.fullTouched.set(!this.fullTouched());
+    this.form().setTouchedAll(this.fullTouched());
+  }
+
+  forcarVazio() {
+    this.form().setAllValuesTo('');
+  }
+
+  setarValInicio() {
+    this.form().resetToStartValues();
+  }
+
+  setarValRecebido() {
+    this.form().updateValues(this.recebido());
+  }
+
+  setOutline() {
+    this.hasOutline.set(!this.hasOutline());
+    this.form().showTouched.update(v => !v);
+  }
+
+  sanitizar() {
+    this.form().sanitizar();
+  }
+
+  onlyAvailable() {
+    this.form().onlyAvailable();
+  }
+
+  async validar() {
+    await this.form().validar();
+  }
+
+  showingErrors = signal(false);
+  changePreview() {
+    this.showingErrors.set(!this.showingErrors());
+  }
+
+  errorsSetted = signal(false);
+  setErrorAll() {
+    this.errorsSetted.set(!this.errorsSetted());
+    if (this.errorsSetted()) {
+      this.form().setAllCamposPartial({ errors: ['Erro exemplo'] });
+    } else {
+      this.form().setAllCamposPartial({ errors: [] });
+    }
+  }
+}