@masterkeymaterial/ui 0.0.2 → 0.0.3

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

@@ -1,98 +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);
-	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

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

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

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

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

@@ -1,122 +0,0 @@
-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: [] });
-    }
-  }
-}