@masterkeymaterial/ui 0.0.1 → 0.0.2

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

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

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

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

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

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

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