@masterkeymaterial/ui 0.0.2 → 0.0.4

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

@@ -1,186 +0,0 @@
-import { Component, computed, input, model } from '@angular/core';
-import { LibUtil, LOG } from '../../../util/util';
-import { IField, IFieldComponent } from '../Formulario';
-
-export type IModeShowEntidade = "centro" | "cantos" | "esquerda" | "grid" | "wrap";
-
-@Component({
-  selector: 'ui-formated-values',
-  templateUrl: './formated-values.html',
-  styleUrls: ['./formated-values.css'],
-  imports: [],
-})
-export class FormatedValues {
-
-  campos = input<IFieldComponent<any>[] | undefined>();
-  dados = input<any>();
-  modo = model<IModeShowEntidade>("centro");
-  especialKeys = input<string[] | undefined>();
-  ignoreKeys = input<string[] | undefined>([]);
-
-  camposFormatados = computed(() => {
-    let campos = this.campos();
-    let especialKeys = (this.especialKeys() ?? []).map(k => k.toLowerCase());
-
-    let listaDados = campos?.map(campo => {
-      let inputs: any = {};
-      // let isInner: boolean = this.getIsInner(campo, inputs);
-      let titulo = campo.titulo ?? campo.prop ?? "";
-      return {
-        ...campo,
-        label: titulo + ':',
-        value: this.getFormattedValue(campo) ?? "",
-        // isInner,
-        inputs,
-        isEspecial: especialKeys.includes(campo.prop?.toLowerCase()),
-      };
-    }).filter(campo => !this.ignoreKeys()?.includes(campo.prop));
-
-    // Ordena a lista colocando os isEspecial no final
-    listaDados = listaDados?.sort((a, b) => {
-      if (a.isEspecial && !b.isEspecial) return 1;
-      if (!a.isEspecial && b.isEspecial) return -1;
-      return 0;
-    });
-
-    // Retorna
-    return listaDados;
-  });
-
-  // changeModoTo(modo: IModeShowEntidade) {
-  //   this.modo.set(modo);
-  // }
-
-  // getIsInner(campo: IFieldComponent<any>, inputs: any): boolean {
-  //   switch (campo.tipo) {
-
-  //     case IField.Upload:
-  //       inputs["file"] = this.dados()?.[campo.prop];
-  //       inputs["tipo"] = IMGTYPE.Generic;
-  //       inputs["h"] = 45;
-  //       return false;
-
-  //     default:
-  //       return true;
-
-  //   }
-  // }
-
-  getFormattedValue(campo: IFieldComponent<any>) {
-    let value = this.dados()?.[campo.prop];
-    if (value == null || value == undefined) return "";
-
-    switch (campo.tipo) {
-
-      case IField.AutoComplete:
-        // A implementar...
-        break;
-
-
-      case IField.Button:
-        // A implementar...
-        break;
-
-      case IField.Checkbox:
-        value = value === true ? "Sim" : "Não";
-        break;
-
-      case IField.Color:
-        // A implementar...
-        break;
-
-      case IField.Custom:
-        LOG(1, "ShowEntidade: A exibição do custom não deve ser alterada por aqui. (Remover o aviso quando for implementar o custom)");
-        break;
-
-      case IField.Date:
-        value = LibUtil.stringToDataBR(value)?.split(" ")[0];
-        break;
-
-      case IField.DateTime:
-        value = LibUtil.stringToDataBR(value);
-        break;
-
-      case IField.Display:
-        // A implementar...
-        break;
-
-      case IField.Editor:
-        // A implementar...
-        break;
-
-      case IField.Email:
-        // A implementar...
-        break;
-
-      case IField.Hidden:
-        // A implementar...
-        break;
-
-      case IField.Icon:
-        value = `<i class="${value}"></i>&nbsp; ${value}`;
-        break;
-
-      case IField.MultiFactor:
-        // A implementar...
-        break;
-
-      case IField.MultiText:
-        // A implementar...
-        break;
-
-      case IField.Number:
-        // A implementar...
-        break;
-
-      case IField.Password:
-        value = "••••••••";
-        break;
-
-      case IField.Referencia:
-        if (campo.getDisplay) value = campo.getDisplay(value);
-        break;
-
-      case IField.Search:
-        // A implementar...
-        break;
-
-      case IField.Select:
-        let options = campo.options?.();
-        let optionValue = options?.find(o => o.k == value)?.v
-        optionValue ? value = `${optionValue}` : value = `${value}`;
-        break;
-
-      case IField.Slide:
-        value = value == true ? "Sim" : "Não";
-        break;
-
-      case IField.Text:
-        // A implementar...
-        break;
-
-      case IField.Upload:
-        // A implementar...
-        break;
-
-    }
-
-    // Estes abaixo só se aplicariam se o ShowEntidade fosse mais genérico.
-    // switch (Util.classof(value)) {
-    //   case "boolean":
-    //     if (value === true) value = "Sim";
-    //     if (value === false) value = "Não";
-    //     break;
-    //   case "array":
-    //     if (value.length && value.length > 0) {
-    //       if (Util.classof(value[0]) == "object") {
-    //         value = `Lista com ${value.length} registros`
-    //       } else {
-    //         value = value.join(", ");
-    //       }
-    //     }
-    //     break;
-    // }
-    return value;
-  }
-}

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

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

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

@@ -1,11 +0,0 @@
-<div [class]="modo()" [class.showEntidade]="true">
-
-
-	@for (dado of dadosAExibir(); track $index) {
-	<div class="linhaDado" [class.isEspecial]="dado.isEspecial">
-		<div class="titulo" [innerHTML]="dado.label"></div>
-		<div class="conteudo" [innerHTML]="dado.value"></div>
-	</div>
-	}
-
-</div>

package/src/fields/Formulario/single-values/single-values.ts

@@ -1,65 +0,0 @@
-import { Component, computed, input, model } from '@angular/core';
-import { LibUtil } from '../../../util/util';
-import { IModeShowEntidade } from '../formated-values/formated-values';
-
-@Component({
-  selector: 'ui-single-values',
-  templateUrl: './single-values.html',
-  styleUrls: ['./single-values.css'],
-  imports: [],
-})
-export class SingleValues {
-
-  dados = input<any>();
-  modo = model<IModeShowEntidade>("centro");
-  especialKeys = input<string[] | undefined>();
-
-  dadosAExibir = computed(() => {
-    let dados = this.dados();
-    let keys = Object.keys(dados ?? {}).sort();
-    let especialKeys = (this.especialKeys() ?? []).map(k => k.toLowerCase());
-
-    let listaDados = keys?.map(chave => {
-      return {
-        label: LibUtil.pascalCase(chave) + ':',
-        value: this.getNormalizedValue(dados[chave]) ?? "",
-        isEspecial: especialKeys.includes(chave.toLowerCase()),
-      };
-    });
-
-    // Ordena a lista colocando os isEspecial no final
-    listaDados = listaDados?.sort((a, b) => {
-      if (a.isEspecial && !b.isEspecial) return 1;
-      if (!a.isEspecial && b.isEspecial) return -1;
-      return 0;
-    });
-
-    // Retorna
-    return listaDados;
-  });
-
-  getNormalizedValue(value: any) {
-    if (value == null || value == undefined) return "";
-
-    let classofValue = LibUtil.classof(value);
-
-    switch (classofValue) {
-
-      case "object":
-        value = `{ ... Objeto com ${Object.keys(value).length} itens }`
-        break;
-
-      case "array":
-        if (value.length && value.length > 0) {
-          if (LibUtil.classof(value[0]) == "object") {
-            value = `[ ... Lista com ${value.length} registros ]`
-          } else {
-            value = value.join(", ");
-          }
-        }
-        break;
-
-    }
-    return value;
-  }
-}

package/src/fields/autocomplete/autocomplete.css

@@ -1,94 +0,0 @@
-.FieldAutoComplete {
-	position: relative;
-	display: flex;
-}
-
-.FieldAutoComplete>div:first-child {
-	flex: 1;
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-}
-
-.FieldAutoComplete>div:first-child:focus {
-	outline: 2px solid var(--campoCor);
-}
-
-.menuTrigger {
-	width: 100%;
-	height: 0px;
-}
-
-.select-options-container {
-	width: max-content;
-	position: fixed;
-	z-index: 1000;
-	display: flex;
-	flex-direction: column;
-	border-radius: 10px;
-	overflow: hidden;
-}
-
-.select-options-container.open {
-	color: var(--sys-on-background);
-	background: var(--sys-background);
-	outline: 1px solid var(--sys-outline);
-	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-}
-
-.options-list {
-	padding: 0;
-	max-height: 300px;
-	overflow-y: auto;
-}
-
-.option-item {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	padding: 15px 5px;
-	margin-top: 3px;
-	cursor: pointer;
-	transition: background-color 0.2s;
-}
-
-.option-item.selected {
-	background: color-mix(in srgb, var(--sys-primary) 50%, var(--sys-background) 50%);
-	color: var(--sys-on-background);
-	font-weight: 500;
-}
-
-.option-item.choosing {
-	outline: none;
-	background: color-mix(in srgb, var(--sys-primary) 20%, var(--sys-background) 80%);
-	color: var(--sys-on-background);
-}
-
-.option-item:hover {
-	background: color-mix(in srgb, var(--sys-primary) 20%, var(--sys-background) 80%);
-	color: var(--sys-on-background);
-}
-
-.option-item-text {
-	flex: 1;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	user-select: none;
-}
-
-.option-item-check {
-	width: 16px;
-	height: 16px;
-	margin: auto 2px;
-	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
-	background-size: contain;
-	background-repeat: no-repeat;
-	background-position: center;
-	flex-shrink: 0;
-	visibility: hidden;
-}
-
-.option-item.selected .option-item-check {
-	visibility: visible;
-}

package/src/fields/autocomplete/autocomplete.html

@@ -1,38 +0,0 @@
-<div class="fieldContainer" [class.isTouched]="campo()?.touched" [class.showTouched]="form().showTouched()"
-	[class.isInvalid]="campo()?.invalid" [class.isDisabled]="campo()?.disabled" [class.isReadonly]="campo()?.readonly"
-	[class.isNeed]="campo()?.need" [class.isPending]="campo()?.pending" [class.isEmpty]="campo()?.empty">
-	<div class="fieldLabel" (click)="onClickLabel()" [class.hideLabel]="campo()?.hideLabel">
-		@if(campo()?.icone){ <div class="fieldIcon"><i [class]="campo()?.icone"></i></div> }
-		{{ campo()?.titulo }}
-	</div>
-	<div class="fieldControl doCampo">
-		<div class="fieldEffect">
-			<div #triggerElement class="fieldField FieldAutoComplete">
-				<div [class]="campo()?.classe" [style]="campo()?.style">
-					<input type="text" [value]="value()" (input)="onInput($event.target.value)" (change)="onChangeEmit()"
-						[name]="campo()?.prop" [disabled]="campo()?.disabled" [placeholder]="campo()?.placeholder ?? ''"
-						[attr.maxLength]="campo()?.maxl" [attr.minLength]="campo()?.minl" [class]="campo()?.classe"
-						[style]="campo()?.style" (keyup)="markKey($event)" (keydown.tab)="closeOverlay()" [class.outlined]="true"
-						[class.input]="true" />
-				</div>
-			</div>
-		</div>
-	</div>
-	<ui-list-errors [errors]="campo()?.errors" [dica]="campo()?.dica" [show]="campo()?.touched"></ui-list-errors>
-</div>
-
-<div #optionsContainer class="select-options-container" [class.open]="isOpenedOptions()"
-	[style.left]="menuPosition().left" [style.top]="menuPosition().top">
-	@if(isOpenedOptions()) {
-	<div class="options-list">
-		@for(option of optionsFiltered(); track option.k) {
-		<div class="option-item" [class.selected]="option.selected" [style.width.px]="offsetWidth()" [title]="option.v"
-			(click)="onSelectOption(option)" (keyup.Enter)="onSelectOption(option)" tabindex="-1"
-			[class.choosing]="option.choosing">
-			<div class="option-item-check"></div>
-			<div class="option-item-text" [innerHTML]="option.html"></div>
-		</div>
-		}
-	</div>
-	}
-</div>