@edm-sdui/sdui 1.0.1 → 1.0.3

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

@@ -1,69 +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 { assetMapping } from '../../../core/uitheme/mapping/asset-mapping';
-import {
-  sizeMappingHeight,
-  sizeMappingWidth,
-} from '../../../core/uitheme/mapping/size-mapping';
-
-@Component({
-  selector: 'edm-sdui-image',
-  templateUrl: './image.component.html',
-  styleUrl: './image.component.scss',
-  standalone: false,
-})
-export class ImageComponent implements OnInit, AfterViewInit {
-  @ViewChild('imgElement') imgElementRef!: ElementRef<HTMLImageElement>;
-
-  constructor(
-    @Inject('uiComponent') public uiComponent: UIComponent,
-    private renderer: Renderer2
-  ) {}
-
-  ngOnInit(): void {
-    // console.debug('image.uiComponent: ', this.uiComponent);
-  }
-
-  ngAfterViewInit(): void {
-    if (this.uiComponent?.element) {
-      this.applyElement(this.uiComponent.element);
-    }
-  }
-
-  private applyElement(element: UIElement) {
-    if (element.asset) {
-      const asset = assetMapping[element.asset];
-      this.renderer.setAttribute(
-        this.imgElementRef.nativeElement,
-        'src',
-        './assets/' + asset
-      );
-    } else if (element.url) {
-      this.renderer.setAttribute(
-        this.imgElementRef.nativeElement,
-        'src',
-        element.url
-      );
-    }
-
-    if (element.size) {
-      const height = sizeMappingHeight[element.size];
-      const width = sizeMappingWidth[element.size];
-      this.renderer.setStyle(
-        this.imgElementRef.nativeElement,
-        'height',
-        height
-      );
-      this.renderer.setStyle(this.imgElementRef.nativeElement, 'width', width);
-    }
-  }
-}

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

@@ -1,3 +0,0 @@
-<span #spanElement [edmSduiView]="uiComponent.element" *ngIf="uiComponent">{{
-  uiComponent.element?.label ?? ""
-}}</span>

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

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

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

@@ -1,66 +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({
-  selector: 'edm-sdui-label',
-  templateUrl: './label.component.html',
-  styleUrl: './label.component.scss',
-  standalone: false,
-})
-export class LabelComponent implements OnInit, AfterViewInit {
-  @ViewChild('spanElement') spanElementRef!: ElementRef<HTMLImageElement>;
-
-  constructor(
-    @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);
-    }
-  }
-
-  private applyElement(element: UIElement) {
-    if (element.textColor) {
-      const color = colorMapping[element.textColor];
-      this.renderer.setStyle(this.spanElementRef.nativeElement, 'color', color);
-    }
-
-    if (element.textStyle) {
-      const fontSize = textStyleMappingFontSize[element.textStyle];
-      this.renderer.setStyle(
-        this.spanElementRef.nativeElement,
-        'font-size',
-        fontSize
-      );
-    }
-
-    const maxLines = element.maxLines ?? 1;
-    // TODO: - definir o maxLines do Span
-
-    if (element.opacity) {
-      const opacity = element.opacity;
-      this.renderer.setStyle(
-        this.spanElementRef.nativeElement,
-        'opacity',
-        opacity
-      );
-    }
-  }
-}

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

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

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

@@ -1,8 +0,0 @@
-:host {
-  display: contents;
-}
-
-.row {
-  display: flex;
-  flex-direction: row;
-}

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

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

package/src/lib/components/uicomponent/row-divisor/row-divisor.component.html

@@ -1,5 +0,0 @@
-<div
-  class="row-divisor"
-  *ngIf="uiComponent"
-  [edmSduiView]="uiComponent.element"
-></div>

package/src/lib/components/uicomponent/row-divisor/row-divisor.component.scss

@@ -1,8 +0,0 @@
-:host {
-  display: contents;
-}
-
-.row-divisor {
-  height: 1px;
-  // width: 100%;
-}

package/src/lib/components/uicomponent/row-divisor/row-divisor.component.ts

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

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

@@ -1,7 +0,0 @@
-<input
-  #inputElement
-  class="search-bar"
-  [edmSduiView]="uiComponent.element"
-  [disableClick]="true"
-  *ngIf="uiComponent"
-/>

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

@@ -1,7 +0,0 @@
-.search-bar {
-  width: 100vw;
-  margin: 1rem;
-  line-height: 1.5rem;
-  padding: 0.25rem 0.5rem;
-  background-color: var(--bg-search);
-}

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>