@edm-sdui/sdui 1.0.1 → 1.0.2

package/src/lib/components/uicomponent/search-bar/search-bar.component.ts

@@ -1,129 +0,0 @@
-import {
-  AfterViewInit,
-  Component,
-  ElementRef,
-  Inject,
-  OnInit,
-  Renderer2,
-  ViewChild,
-} from '@angular/core';
-import { UIComponent } from '../../../core/uicomposition/models/uicomponent';
-import { UIElement } from '../../../core/uicomposition/models/uielement';
-import { colorMapping } from '../../../core/uitheme/mapping/color-mapping';
-import { textStyleMappingFontSize } from '../../../core/uitheme/mapping/text-style-mapping';
-import { UIActionService } from '../../../core/services/ui-action.service';
-
-@Component({
-  styleUrl: './search-bar.component.scss',
-  templateUrl: './search-bar.component.html',
-  standalone: false,
-  selector: 'edm-sdui-search-bar',
-})
-export class SearchBarComponent implements OnInit, AfterViewInit {
-  @ViewChild('inputElement') inputElementRef!: ElementRef<HTMLInputElement>;
-
-  constructor(
-    private actionService: UIActionService,
-    @Inject('uiComponent') public uiComponent: UIComponent,
-    private renderer: Renderer2
-  ) {}
-
-  ngOnInit(): void {
-    // console.debug('label.uiComponent: ', this.uiComponent);
-  }
-
-  ngAfterViewInit(): void {
-    if (this.uiComponent.element) {
-      this.applyElement(this.uiComponent.element);
-      this.renderer.listen(
-        this.inputElementRef.nativeElement,
-        'keydown',
-        (event: KeyboardEvent) => {
-          if (event.key === 'Enter') {
-            const action = this.uiComponent.element?.action;
-            const inputValue = this.inputElementRef.nativeElement.value.trim();
-
-            if (action && inputValue && action.url) {
-              const param = action.param || 'SEARCH';
-              const encodedValue = encodeURIComponent(inputValue);
-
-              try {
-                const parsed = new URL(action.url);
-                const innerUrlRaw = parsed.searchParams.get('url');
-
-                if (innerUrlRaw) {
-                  const decodedInnerUrl = decodeURIComponent(innerUrlRaw);
-                  const updatedInnerUrl = decodedInnerUrl.replace(
-                    `{${param}}`,
-                    encodedValue
-                  );
-                  parsed.searchParams.set(
-                    'url',
-                    encodeURIComponent(updatedInnerUrl)
-                  );
-
-                  const adjustedUrl = parsed.toString();
-
-                  console.debug('[key.enter]', {
-                    param,
-                    encodedValue,
-                    adjustedUrl,
-                  });
-
-                  this.actionService.execute({
-                    ...action,
-                    url: adjustedUrl,
-                  });
-                }
-              } catch (err) {
-                console.warn(
-                  '[key.enter] Invalid action.url format:',
-                  action.url,
-                  err
-                );
-              }
-            }
-          }
-        }
-      );
-    }
-  }
-
-  private applyElement(element: UIElement) {
-    console.debug('search.element:', element);
-
-    const inputEl = this.inputElementRef.nativeElement;
-
-    if (element.placeholder) {
-      this.renderer.setAttribute(inputEl, 'placeholder', element.placeholder);
-    }
-
-    if (element.textColor) {
-      const color = colorMapping[element.textColor];
-      this.renderer.setStyle(inputEl, 'color', color);
-    }
-
-    if (element.textStyle) {
-      const fontSize = textStyleMappingFontSize[element.textStyle];
-      this.renderer.setStyle(inputEl, 'font-size', fontSize);
-    }
-
-    if (element.placeholderTextColor || element.placeholderTextStyle) {
-      const styleEl = this.renderer.createElement('style');
-      const color = element.placeholderTextColor
-        ? colorMapping[element.placeholderTextColor]
-        : 'inherit';
-      const fontSize = element.placeholderTextStyle
-        ? textStyleMappingFontSize[element.placeholderTextStyle]
-        : 'inherit';
-
-      styleEl.textContent = `
-            edm-sdui-search-bar input::placeholder {
-                color: ${color};
-                font-size: ${fontSize};
-            }
-        `;
-      this.renderer.appendChild(document.head, styleEl);
-    }
-  }
-}

package/src/lib/components/uicomponent/space/space.component.html

@@ -1 +0,0 @@
-<div class="space"></div>

package/src/lib/components/uicomponent/space/space.component.scss

@@ -1,10 +0,0 @@
-:host {
-  display: contents;
-}
-
-.space {
-  flex-grow: 1;
-  flex-shrink: 1;
-  min-height: 1px;
-  min-width: 1px;
-}

package/src/lib/components/uicomponent/space/space.component.ts

@@ -1,16 +0,0 @@
-import { Component, Inject, Input, OnInit } from '@angular/core';
-import { UIComponent } from '../../../core/uicomposition/models/uicomponent';
-
-@Component({
-  selector: 'edm-sdui-space',
-  templateUrl: './space.component.html',
-  styleUrl: './space.component.scss',
-  standalone: false,
-})
-export class SpaceComponent implements OnInit {
-  constructor(@Inject('uiComponent') public uiComponent: UIComponent) {}
-
-  ngOnInit(): void {
-    // console.debug('space.uiComponent: ', this.uiComponent);
-  }
-}

package/src/lib/components/uicomponent/tag/tag.component.html

@@ -1,3 +0,0 @@
-<div class="tag" #tagElement *ngIf="uiComponent" [edmSduiView]="uiComponent.element">
-    <span class="tag-name" #tagNameElement>{{ uiComponent.element?.label ?? '' }}</span>
-</div>

package/src/lib/components/uicomponent/tag/tag.component.scss

@@ -1,7 +0,0 @@
-:host {
-  display: contents;
-}
-
-.tag {
-  padding: 4px 8px;
-}

package/src/lib/components/uicomponent/tag/tag.component.ts

@@ -1,54 +0,0 @@
-import { AfterViewInit, Component, ElementRef, Inject, OnInit, Renderer2, ViewChild } from "@angular/core";
-import { UIComponent } from "../../../core/uicomposition/models/uicomponent";
-import { UIElement } from "../../../core/uicomposition/models/uielement";
-import { colorMapping } from "../../../core/uitheme/mapping/color-mapping";
-import { textStyleMappingFontSize } from "../../../core/uitheme/mapping/text-style-mapping";
-
-@Component({
-    styleUrl: './tag.component.scss',
-    templateUrl: './tag.component.html',
-    standalone: false
-})
-export class TagComponent implements OnInit, AfterViewInit {
-    @ViewChild('tagElement') tagElementRef!: ElementRef<HTMLImageElement>;
-    @ViewChild('tagNameElement') tagNameElementRef!: ElementRef<HTMLImageElement>;
-    
-    constructor(
-    @Inject('uiComponent') public uiComponent: UIComponent,
-    private renderer: Renderer2
-    ) {}
-
-    ngOnInit(): void {
-        
-    }
-
-    ngAfterViewInit(): void {
-        if (this.uiComponent.element) {
-            this.applyElement(this.uiComponent.element);
-        }
-
-        if (this.uiComponent.element) {
-            this.applyLabelElement(this.uiComponent.element);
-        }
-    }
-
-    private applyElement(element: UIElement) {
-        
-    }
-
-    private applyLabelElement(element: UIElement) {
-        if (element.textColor) {
-            const color = colorMapping[element.textColor];
-            this.renderer.setStyle(this.tagNameElementRef.nativeElement, 'color', color);
-        }
-
-        if (element.textStyle) {
-            const fontSize = textStyleMappingFontSize[element.textStyle];
-            this.renderer.setStyle(
-                this.tagNameElementRef.nativeElement,
-                'font-size',
-                fontSize
-            );
-        }
-    }
-}

package/src/lib/components/uicomponent/uicomponent.component.html

@@ -1,5 +0,0 @@
-<ng-container *ngIf="componentToRender">
-  <ng-container
-    *ngComponentOutlet="componentToRender; injector: componentInjector"
-  ></ng-container>
-</ng-container>

package/src/lib/components/uicomponent/uicomponent.component.scss

@@ -1,3 +0,0 @@
-:host {
-  display: contents;
-}

package/src/lib/components/uicomponent/uicomponent.component.ts

@@ -1,53 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  Injector,
-  Input,
-  OnChanges,
-  OnInit,
-  SimpleChanges,
-  Type,
-} from '@angular/core';
-import { UIComponent } from '../../core/uicomposition/models/uicomponent';
-import { componentMapping } from '../../core/uicomposition/mapping/component-mapping';
-
-@Component({
-  selector: 'edm-sdui-component',
-  styleUrl: './uicomponent.component.scss',
-  templateUrl: './uicomponent.component.html',
-  standalone: false,
-})
-export class UIComponentComponent implements OnInit, OnChanges {
-  @Input() uiComponent?: UIComponent;
-  componentToRender?: Type<any>;
-  componentInjector!: Injector;
-
-  constructor(private injector: Injector, private cdr: ChangeDetectorRef) {}
-
-  ngOnInit(): void {
-    this.initializeComponent();
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes['uiComponent'] && changes['uiComponent'].currentValue) {
-      this.initializeComponent();
-    }
-  }
-
-  private initializeComponent(): void {
-    const current = this.uiComponent;
-    if (!current) return;
-
-    const mappingFn = componentMapping[current.type];
-    mappingFn().then((component: Type<any>) => {
-      this.componentToRender = component;
-      this.cdr.markForCheck();
-    });
-
-    this.componentInjector = Injector.create({
-      providers: [{ provide: 'uiComponent', useValue: current }],
-      parent: this.injector,
-    });
-  }
-}

package/src/lib/components/uicomponent/zstack/zstack.component.html

@@ -1,6 +0,0 @@
-<div class="zstack" *ngIf="uiComponent" [edmSduiView]="uiComponent.element">
-  <edm-sdui-component
-    *ngFor="let child of uiComponent.components"
-    [uiComponent]="child"
-  ></edm-sdui-component>
-</div>

package/src/lib/components/uicomponent/zstack/zstack.component.scss

@@ -1,12 +0,0 @@
-:host {
-  display: contents;
-}
-
-.zstack {
-  display: grid;
-  place-items: center;
-}
-
-.zstack > * {
-  grid-area: 1 / 1;
-}

package/src/lib/components/uicomponent/zstack/zstack.component.ts

@@ -1,16 +0,0 @@
-import { Component, Inject, OnInit } from '@angular/core';
-import { UIComponent } from '../../../core/uicomposition/models/uicomponent';
-
-@Component({
-  selector: 'edm-sdui-zstack',
-  styleUrl: './zstack.component.scss',
-  templateUrl: './zstack.component.html',
-  standalone: false,
-})
-export class ZStackComponent implements OnInit {
-  constructor(@Inject('uiComponent') public uiComponent: UIComponent) {}
-
-  ngOnInit(): void {
-    // console.debug('zstack.uiComponent: ', this.uiComponent);
-  }
-}

package/src/lib/components/uilayout/centered-content-layout/centered-content-layout.component.html

@@ -1,20 +0,0 @@
-<div class="centered-content-layout" *ngIf="!!uiLayout">
-  <!-- <pre>{{ uiLayout | json }}</pre> -->
-
-  <edm-sdui-navigation [uiNavigation]="uiLayout.nav"></edm-sdui-navigation>
-
-  <div class="header" *ngIf="!!uiLayout?.header">
-    <edm-sdui-component [uiComponent]="uiLayout.header"></edm-sdui-component>
-  </div>
-
-  <div class="centered">
-    <edm-sdui-component
-      *ngIf="!!uiLayout?.centered"
-      [uiComponent]="uiLayout.centered"
-    ></edm-sdui-component>
-  </div>
-
-  <div class="footer" *ngIf="!!uiLayout?.footer">
-    <edm-sdui-component [uiComponent]="uiLayout.footer"></edm-sdui-component>
-  </div>
-</div>

package/src/lib/components/uilayout/centered-content-layout/centered-content-layout.component.scss

@@ -1,36 +0,0 @@
-:host {
-  display: contents;
-}
-
-.centered-content-layout {
-  display: flex;
-  flex-direction: column;
-  width: 100vw;
-  min-height: 100vh;
-  position: relative;
-
-  .header {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    z-index: 100;
-  }
-
-  .centered {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-top: var(--header-height, 64px);
-    margin-bottom: var(--footer-height, 64px);
-  }
-
-  .footer {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    z-index: 100;
-  }
-}

package/src/lib/components/uilayout/centered-content-layout/centered-content-layout.component.ts

@@ -1,21 +0,0 @@
-import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
-import { UICenteredContentLayout } from '../../../core/uicomposition/models/uicentered-content-layout';
-
-@Component({
-  selector: 'edm-sdui-centered-content-layout',
-  templateUrl: './centered-content-layout.component.html',
-  styleUrl: './centered-content-layout.component.scss',
-  standalone: false,
-})
-export class CenteredContentLayoutComponent implements OnChanges {
-  @Input() uiLayout?: UICenteredContentLayout;
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes['uiLayout']) {
-      console.debug(
-        '[CenteredContentLayoutComponent] Novo layout recebido:',
-        changes['uiLayout'].currentValue
-      );
-    }
-  }
-}

package/src/lib/components/uilayout/single-column-layout/single-column-layout.component.html

@@ -1,22 +0,0 @@
-<div class="single-column-layout" *ngIf="!!uiLayout">
-  <!-- <pre>{{ uiLayout | json }}</pre> -->
-
-  <edm-sdui-navigation [uiNavigation]="uiLayout.nav"></edm-sdui-navigation>
-
-  <div class="header" *ngIf="!!uiLayout?.header">
-    <edm-sdui-component [uiComponent]="uiLayout.header"></edm-sdui-component>
-  </div>
-
-  <div class="scrollview" *ngIf="!!uiLayout?.main">
-    <div class="main">
-      <edm-sdui-component
-        *ngIf="!!uiLayout?.main"
-        [uiComponent]="uiLayout.main"
-      ></edm-sdui-component>
-    </div>
-  </div>
-
-  <div class="footer" *ngIf="!!uiLayout?.footer">
-    <edm-sdui-component [uiComponent]="uiLayout.footer"></edm-sdui-component>
-  </div>
-</div>

package/src/lib/components/uilayout/single-column-layout/single-column-layout.component.scss

@@ -1,37 +0,0 @@
-:host {
-  display: contents;
-}
-
-.single-column-layout {
-  display: flex;
-  flex-direction: column;
-  width: 100vw;
-  min-height: 100vh;
-  position: relative;
-
-  .header {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    z-index: 100;
-  }
-  .scrollview {
-    .main {
-      flex: 1;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin-top: var(--header-height, 64px);
-      margin-bottom: var(--footer-height, 64px);
-    }
-  }
-
-  .footer {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    z-index: 100;
-  }
-}

package/src/lib/components/uilayout/single-column-layout/single-column-layout.component.ts

@@ -1,27 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Input,
-  OnChanges,
-  SimpleChanges,
-} from '@angular/core';
-import { UISingleColumnLayout } from '../../../core/uicomposition/models/uisingle-column-layout';
-
-@Component({
-  selector: 'edm-sdui-single-column-layout',
-  templateUrl: './single-column-layout.component.html',
-  styleUrl: './single-column-layout.component.scss',
-  standalone: false,
-})
-export class SingleColumnLayoutComponent implements OnChanges {
-  @Input() uiLayout?: UISingleColumnLayout;
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes['uiLayout']) {
-      console.debug(
-        '[SingleColumnLayout] Novo layout recebido:',
-        changes['uiLayout'].currentValue
-      );
-    }
-  }
-}

package/src/lib/components/uilayout/uinavigation/uinavigation.component.html

@@ -1,8 +0,0 @@
-<div class="nav" *ngIf="uiNavigation">
-  <h1 *ngIf="uiNavigation.title">{{ uiNavigation.title }}</h1>
-
-  <edm-sdui-component
-    [uiComponent]="uiNavigation.titleComponent"
-    *ngIf="uiNavigation.titleComponent"
-  ></edm-sdui-component>
-</div>

package/src/lib/components/uilayout/uinavigation/uinavigation.component.scss

@@ -1,4 +0,0 @@
-:host {
-    display: contents;
-  }
-  

package/src/lib/components/uilayout/uinavigation/uinavigation.component.ts

@@ -1,12 +0,0 @@
-import { AfterViewInit, Component, Input } from '@angular/core';
-import { UINavigation } from '../../../core/uicomposition/models/uinavigation';
-
-@Component({
-  selector: 'edm-sdui-navigation',
-  styleUrl: './uinavigation.component.scss',
-  templateUrl: './uinavigation.component.html',
-  standalone: false,
-})
-export class UINavigationComponent {
-  @Input() uiNavigation?: UINavigation;
-}

package/src/lib/components/uiscreen/uiscreen.component.html

@@ -1,29 +0,0 @@
-<div *ngIf="viewModel.isLoading$ | async"><p>Carregando...</p></div>
-
-<div *ngIf="viewModel.error$ | async as errorMessage">
-  <p class="error-label">Erro: {{ errorMessage }}</p>
-</div>
-
-<div
-  class="ui-screen"
-  *ngIf="viewModel.uiScreen$ | async as uiScreen"
-  [edmSduiView]="uiScreen"
->
-  <edm-sdui-navigation-controls
-    [edmSduiView]="uiScreen"
-  ></edm-sdui-navigation-controls>
-
-  <ng-container [ngSwitch]="uiScreen.identifier">
-    <edm-sdui-single-column-layout
-      *ngSwitchCase="UIScreenIdentifier.SINGLE_COLUMN"
-      [uiLayout]="uiScreen.content"
-    >
-    </edm-sdui-single-column-layout>
-
-    <edm-sdui-centered-content-layout
-      *ngSwitchCase="UIScreenIdentifier.CENTERED_CONTENT"
-      [uiLayout]="uiScreen.content"
-    >
-    </edm-sdui-centered-content-layout>
-  </ng-container>
-</div>

package/src/lib/components/uiscreen/uiscreen.component.scss

@@ -1,12 +0,0 @@
-:host {
-  display: contents;
-}
-
-.ui-screen {
-  width: 100vw;
-  min-height: 100vh;
-}
-
-.error-label {
-  color: var(--input-error);
-}

package/src/lib/components/uiscreen/uiscreen.component.ts

@@ -1,15 +0,0 @@
-import { Component } from '@angular/core';
-import { UIScreenViewModel } from '../../core/view-models/uiscreen.viewmodel';
-import { UIScreenIdentifier } from '../../core/uicomposition/enums/uiscreen-identifier';
-
-@Component({
-  selector: 'edm-sdui-uiscreen',
-  templateUrl: './uiscreen.component.html',
-  styleUrl: './uiscreen.component.scss',
-  standalone: false,
-})
-export class UIScreenComponent {
-  readonly UIScreenIdentifier = UIScreenIdentifier;
-
-  constructor(public viewModel: UIScreenViewModel) {}
-}

package/src/lib/core/interfaces/sdui-config.interface.ts

@@ -1,3 +0,0 @@
-export interface SduiConfig {
-  baseUrl: string;
-}

package/src/lib/core/services/navigation.service.ts

@@ -1,25 +0,0 @@
-import { Injectable } from '@angular/core';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class SduiNavigationService {
-  private navigationHistory: string[] = [];
-
-  forward(url: string): void {
-    this.navigationHistory.push(url);
-  }
-
-  back(): string | null | undefined {
-    if (this.canGoBack()) {
-      this.navigationHistory.pop();
-      return this.navigationHistory[this.navigationHistory.length - 1];
-    }
-
-    return null;
-  }
-
-  canGoBack(): boolean {
-    return this.navigationHistory.length > 1;
-  }
-}

package/src/lib/core/services/sdui-config.service.ts

@@ -1,19 +0,0 @@
-import { Injectable } from '@angular/core';
-import { SduiConfig } from '../interfaces/sdui-config.interface';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class SduiConfigService {
-  private config: SduiConfig = {
-    baseUrl: '',
-  };
-
-  setConfig(config: SduiConfig): void {
-    this.config = { ...this.config, ...config };
-  }
-
-  getBaseUrl(): string {
-    return this.config.baseUrl;
-  }
-}