@masterkeymaterial/ui 0.0.2 → 0.0.4

package/src/elements/ui-procurar/ui-procurar.css

@@ -1,48 +0,0 @@
-:host {
-	display: flex;
-	align-items: center;
-	width: 100%;
-	height: 100%;
-	padding: 0px;
-}
-
-.e-procurar-input-container {
-	width: 200px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	transition: width 1s cubic-bezier(0.075, 0.82, 0.165, 1);
-}
-
-.e-procurar-input-container.colapsed {
-	width: 1px;
-	padding: 0px;
-	transition: width 1s cubic-bezier(0.075, 0.82, 0.165, 1);
-}
-
-.e-procurar-input {
-	width: 100%;
-	height: auto;
-	cursor: text;
-	border: none;
-	outline: none;
-	background: transparent;
-	caret-color: var(--sys-primary);
-}
-
-.e-procurar-icone-search {
-	color: color-mix(in srgb, var(--sys-primary) 60%, var(--sys-background) 40%);
-	--ui-font-size: 14px;
-}
-
-.e-procurar-botao-clear {
-	color: color-mix(in srgb, var(--sys-primary) 80%, var(--sys-background) 20%);
-	margin-left: 7px;
-	--ui-font-size: 14px;
-}
-
-.e-procurar-input-container.colapsed .e-procurar-icone-search,
-.e-procurar-input-container.colapsed .e-procurar-botao-clear {
-	margin-left: 0px;
-	--ui-font-size: 12px;
-}

package/src/elements/ui-procurar/ui-procurar.html

@@ -1,14 +0,0 @@
-<ui-button tipo="icon" tema="primary" class="e-procurar-icone-search" (clicked)="onClickSearchIcon()" tabindex="-1"
-	icone="fa fa-search">
-</ui-button>
-<div class="e-procurar-input-container" [class.colapsed]="computedColapsed()">
-	<input #searchInput type="text" class="e-procurar-input" [value]="value()" (input)="onInput($event.target.value)"
-		[name]="'procurar_'+(name() ?? '')" (change)="onChange()" [placeholder]="placeholder() ?? 'Procurar...'"
-		[disabled]="disabled()" (keyup.Enter)="onSearch()" (keyup.Escape)="onClearSearch()" (focus)="onFocus($event)"
-		(blur)="onBlur($event)" />
-</div>
-@if(value().length > 0) {
-<ui-button tipo="icon" tema="error" class="e-procurar-botao-clear" (clicked)="onClearSearch()" title="Limpar"
-	icone="fa fa-times">
-</ui-button>
-}

package/src/elements/ui-procurar/ui-procurar.ts

@@ -1,82 +0,0 @@
-import { Component, computed, ElementRef, input, model, output, signal, viewChild } from '@angular/core';
-import { UiButton } from "../ui-button/ui-button";
-
-@Component({
-  selector: 'ui-procurar',
-  templateUrl: './ui-procurar.html',
-  styleUrl: './ui-procurar.css',
-  host: { '[class.focused]': 'focused()' },
-  imports: [UiButton],
-})
-export class UiProcurar {
-
-  readonly searchInput = viewChild<ElementRef>('searchInput');
-
-  inputed = output<string>();
-  changed = output<string>();
-  value = model<string>('');
-  colapsed = model<boolean | undefined>(false);
-  autoColapse = model<boolean | undefined>(false);
-
-  computedColapsed = computed(() => {
-    if (this.focused() || this.value().length > 0) {
-      return false;
-    }
-    if (this.autoColapse()) {
-      return this.value().length === 0;
-    }
-    return this.colapsed() ?? false;
-  });
-
-  name = input<string | number | undefined>();
-  placeholder = input<string>();
-  disabled = input<boolean>();
-
-  focused = signal<boolean | undefined>(false);
-
-  onInput(value: string) {
-    this.value.set(value);
-    this.inputed.emit(value);
-  }
-
-  // Limpa o filtro de opções
-  onClearSearch() {
-    this.value.set('');
-    this.focusSearchInput();
-    this.onInputed();
-    this.onChange();
-  }
-
-  focusSearchInput() {
-    this.searchInput()?.nativeElement?.focus();
-  }
-
-  onClickSearchIcon() {
-    this.focusSearchInput();
-    this.onInputed();
-    this.onChange();
-  }
-
-  onSearch() {
-    this.onInputed();
-    this.onChange();
-  }
-
-  onInputed() {
-    this.inputed.emit(this.value());
-  }
-
-  onChange() {
-    this.changed.emit(this.value());
-  }
-
-
-  onFocus(ev: FocusEvent) {
-    this.focused.set(true);
-  }
-
-  onBlur(ev: FocusEvent) {
-    this.focused.set(false);
-  }
-
-}

package/src/elements/ui-progress/ui-progress.html

@@ -1 +0,0 @@
-<progress [value]="value()"></progress>

package/src/elements/ui-progress/ui-progress.ts

@@ -1,15 +0,0 @@
-import { Component, input } from '@angular/core';
-import { UiProgressMode } from '../../interfaces/interfaces';
-
-@Component({
-  selector: 'ui-progress',
-  templateUrl: './ui-progress.html',
-  styleUrl: './ui-progress.css',
-})
-export class UiProgress {
-
-  value = input<number>(0);
-  bufferValue = input<number>(0);
-  mode = input<UiProgressMode>('determinate');
-
-}

package/src/elements/ui-select/ui-select.css

@@ -1,211 +0,0 @@
-/* triggerElement */
-.e-select-container {
-	position: relative;
-	display: flex;
-	flex: 1;
-	align-items: center;
-	justify-content: space-between;
-	padding: var(--ui-padding, none);
-}
-
-.e-select-container,
-.e-select-arrow-area,
-.e-select,
-.e-select input {
-	cursor: pointer;
-}
-
-.e-select {
-	flex: 1;
-	height: var(--ui-height, auto);
-	width: var(--ui-width, auto);
-}
-
-.e-select input {
-	border: none;
-	background: transparent;
-	caret-color: var(--sys-primary);
-	outline: none;
-	width: 100%;
-	height: 100%;
-	display: flex;
-	justify-content: flex-start;
-	align-items: center;
-	text-align: left;
-}
-
-
-.e-select-arrow-area {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 30px;
-}
-
-.e-select-arrow {
-	width: 0;
-	height: 0;
-	border-left: 6px solid transparent;
-	border-right: 6px solid transparent;
-	border-top: 6px solid var(--sys-primary);
-	margin: 0 5px;
-	transition: transform 0.2s ease-in-out;
-}
-
-.e-select-arrow.open {
-	transform: rotate(180deg);
-}
-
-.e-select-overlay {
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100vh;
-	z-index: 2001;
-	background-color: transparent;
-	pointer-events: none;
-	transition: background-color 0.2s ease-in-out;
-}
-
-.e-select-overlay.open {
-	background-color: rgba(0, 0, 0, 0.25);
-	pointer-events: auto;
-}
-
-.e-select-options-container {
-	width: max-content;
-	position: fixed;
-	z-index: 2002;
-	display: flex;
-	flex-direction: column;
-	overflow: hidden;
-	border-radius: 10px;
-	transform: translateZ(0);
-	will-change: transform;
-}
-
-.e-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);
-}
-
-.e-select-options-container.open.smallScreen {
-	width: 90vw;
-	left: 5vw !important;
-	/* 170 == 300 List + 40 Search / 2 */
-	top: calc(50vh - 170px) !important;
-}
-
-.e-select-search-area {
-	display: flex;
-	background-color: var(--sys-background);
-	border: 0;
-	border-bottom: 1px inset var(--sys-outline);
-	border-radius: 10px;
-	height: 40px;
-	max-height: 40px;
-}
-
-.e-select-search {
-	flex: 1;
-	width: 100%;
-	border: none;
-	background: var(--sys-surface-container-low);
-	color: var(--sys-on-surface);
-	caret-color: var(--sys-primary);
-	padding: 8px 12px 8px 4px;
-	outline: none;
-}
-
-.e-select-search-clearicon {
-	color: color-mix(in srgb, var(--sys-primary) 80%, var(--sys-background) 20%);
-	font-size: 1rem;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	cursor: pointer;
-}
-
-.e-select-search-icon {
-	color: color-mix(in srgb, var(--sys-primary) 60%, var(--sys-background) 40%);
-	font-size: 0.8rem;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	cursor: pointer;
-}
-
-.e-select-options-list {
-	padding: 0;
-	max-height: 300px;
-	overflow-y: auto;
-}
-
-.e-select-option {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	padding: 15px 0px;
-	margin-top: 2px;
-	cursor: pointer;
-	transition: background-color 0.2s;
-}
-
-.e-select-option.selected {
-	background: color-mix(in srgb, var(--sys-primary) 50%, var(--sys-background) 50%);
-	color: var(--sys-on-background);
-	font-weight: 500;
-}
-
-.e-select-option.choosing {
-	outline: none;
-	background: color-mix(in srgb, var(--sys-primary) 20%, var(--sys-background) 80%);
-	color: var(--sys-on-background);
-}
-
-.e-select-option.empty {
-	cursor: default;
-	color: var(--sys-on-surface-variant);
-	justify-content: center;
-	font-style: italic;
-}
-
-.e-select-option:hover {
-	background: color-mix(in srgb, var(--sys-primary) 20%, var(--sys-background) 80%);
-	color: var(--sys-on-background);
-}
-
-.e-select-option-text {
-	flex: 1;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	user-select: none;
-}
-
-.e-select-option-check {
-	width: 16px;
-	height: 16px;
-	margin: auto 5px;
-	flex-shrink: 0;
-	visibility: hidden;
-
-	/* SVG como máscara */
-	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
-	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
-
-	-webkit-mask-size: contain;
-	mask-size: contain;
-	-webkit-mask-repeat: no-repeat;
-	mask-repeat: no-repeat;
-	-webkit-mask-position: center;
-	mask-position: center;
-	background-color: var(--sys-on-background);
-}
-
-.e-select-option.selected .e-select-option-check {
-	visibility: visible;
-}

package/src/elements/ui-select/ui-select.html

@@ -1,46 +0,0 @@
-<div #triggerElement class="e-select-container" (click)="onOpenOrCloseOptions()" (keyup.Enter)="onOpenOrCloseOptions()"
-	(keyup.ArrowDown)="onOpenOrCloseOptions()" (keyup.ArrowUp)="onOpenOrCloseOptions()">
-	<div class="e-select">
-		<input #displayText type="text" [name]="'select_'+(name() ?? '')" [value]="textoExibindo()" readonly
-			[placeholder]="placeholder() ?? ''" [disabled]="disabled()" [class.outlined]="true" [class.input]="true" />
-	</div>
-	<div class="e-select-arrow-area">
-		<div class="e-select-arrow" [class.open]="isOpenedOptions()"></div>
-	</div>
-</div>
-
-
-<div #optionsOverlay class="e-select-overlay" [class.open]="isOpenedOptions()" (click)="closeOverlay()">
-
-	<div #optionsContainer class="e-select-options-container" [class.open]="isOpenedOptions()"
-		[class.smallScreen]="isSmallScreen()" [style.left]="menuPosition().left" [style.top]="menuPosition().top">
-		@if(isOpenedOptions()) {
-		<div class="e-select-search-area" [style.minWidth.px]="optionMinWidth()">
-			<input #optionSearchInput type="text" name="e-select-search-input" class="e-select-search"
-				(keyup)="markKey($event)" placeholder="Procurar..." [value]="textoFiltrado()" (keydown.Escape)="closeOverlay()"
-				size="8" (keydown.Tab)="closeOverlay()" (input)="onInputSearch($event.target.value)" />
-			@if(textoFiltrado().length > 0) {
-			<ui-button tipo="icon" tema="error" class="e-select-search-clearicon" (click)="onClearSearch()"
-				icone="fa fa-times"></ui-button>
-			}
-			<ui-button tipo="icon" tema="primary" class="e-select-search-icon" (click)="focusToSearchInput()"
-				icone="fa fa-search"></ui-button>
-		</div>
-		<div class="e-select-options-list">
-			@for(option of optionsFiltered(); track $index) {
-			<div class="e-select-option" [class.selected]="option.selected" [style.minWidth.px]="optionMinWidth()"
-				[title]="option.v" (click)="onSelectOption(option)" (keyup.Enter)="onSelectOption(option)" tabindex="-1"
-				[class.choosing]="option.choosing">
-				<div class="e-select-option-check"></div>
-				<div class="e-select-option-text" [innerHTML]="option.html"></div>
-			</div>
-			}@empty {
-			<div class="e-select-option empty">
-				Nenhuma opção disponível
-			</div>
-			}
-		</div>
-		}
-	</div>
-
-</div>