@edm-sdui/sdui 1.0.0 → 1.0.1

package/ng-package.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/libs/sdui",
+  "deleteDestPath": true,
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "allowedNonPeerDependencies": ["tslib"]
+}

package/package.json

@@ -1,27 +1,25 @@
 {
   "name": "@edm-sdui/sdui",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": false,
   "publishConfig": {
     "access": "public"
   },
-  "peerDependencies": {
-    "@angular/core": "^19.1.0",
-    "@angular/common": "^19.1.0"
-  },
-  "module": "fesm2022/edm-sdui-sdui.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "default": "./fesm2022/edm-sdui-sdui.mjs"
+  "ngPackage": {
+    "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+    "dest": "../../dist/libs/sdui",
+    "lib": {
+      "entryFile": "src/public-api.ts"
     }
   },
-  "sideEffects": false,
-  "dependencies": {
-    "tslib": "^2.3.0"
+  "scripts": {
+    "build": "ng-packagr -p ng-package.json"
+  },
+  "peerDependencies": {
+    "@angular/core": "^18.2.9",
+    "@angular/common": "^18.2.9"
+  },
+  "devDependencies": {
+    "ng-packagr": "^18.2.9"
   }
-}
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/src/lib/components/navigation-controls/navigation-controls.component.html

@@ -0,0 +1,9 @@
+<div class="navigation-controls">
+  <button
+    class="back-button"
+    [disabled]="!(viewModel.canGoBack$ | async)"
+    (click)="goBack()"
+  >
+    <span class="material-icons">arrow_back</span>
+  </button>
+</div>

package/src/lib/components/navigation-controls/navigation-controls.component.scss

@@ -0,0 +1,35 @@
+:host {
+  display: contents;
+}
+
+.navigation-controls {
+  display: flex;
+  gap: 8px;
+  //margin: 8px;
+
+  button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 8px;
+    border-radius: 4px;
+    border: 1px solid #e0e0e0;
+    background-color: #f5f5f5;
+    cursor: pointer;
+    transition: all 0.2s ease;
+
+    &:hover:not(:disabled) {
+      background-color: #e8e8e8;
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .material-icons {
+      font-size: 18px;
+      color: #444;
+    }
+  }
+}

package/src/lib/components/navigation-controls/navigation-controls.component.ts

@@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+import { UIScreenViewModel } from '../../core/view-models/uiscreen.viewmodel';
+
+@Component({
+  selector: 'edm-sdui-navigation-controls',
+  templateUrl: './navigation-controls.component.html',
+  styleUrls: ['./navigation-controls.component.scss'],
+  standalone: false,
+})
+export class NavigationControlsComponent implements OnInit {
+  constructor(public viewModel: UIScreenViewModel) {}
+
+  ngOnInit(): void {
+    // Monitorar o estado do botão de voltar para debugging
+    this.viewModel.canGoBack$.subscribe((canGoBack) => {
+      console.debug(
+        '[NavigationControls] Estado do botão de voltar:',
+        canGoBack
+      );
+    });
+  }
+
+  goBack(): void {
+    console.debug('[NavigationControls] Botão de voltar clicado');
+    this.viewModel.goBack();
+  }
+}

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

@@ -0,0 +1,4 @@
+<button #buttonElement [edmSduiView]="uiComponent.element" *ngIf="uiComponent">
+  <img *ngIf="uiComponent.element.asset" [src]="getAssetPath(uiComponent.element.asset)" alt="">
+  {{ uiComponent.element.label }}
+</button>

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

@@ -0,0 +1,11 @@
+:host {
+  display: contents;
+}
+
+button {
+  border: none;
+  white-space: nowrap;
+  line-height: 1.5;
+  // transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  background-color: unset;
+}

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

@@ -0,0 +1,64 @@
+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 { assetMapping } from '../../../core/uitheme/mapping/asset-mapping';
+import { UIAsset } from '../../../core/uitheme/enums/uiasset';
+
+@Component({
+  selector: 'edm-sdui-button',
+  templateUrl: './button.component.html',
+  styleUrl: './button.component.scss',
+  standalone: false,
+})
+export class ButtonComponent implements OnInit, AfterViewInit {
+  @ViewChild('buttonElement') buttonElementRef!: ElementRef<HTMLButtonElement>;
+
+  constructor(
+    @Inject('uiComponent') public uiComponent: UIComponent,
+    private renderer: Renderer2
+  ) {}
+
+  ngOnInit(): void {
+    // console.debug('button.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.buttonElementRef.nativeElement,
+        'color',
+        color
+      );
+    }
+
+    if (element.textStyle) {
+      const fontSize = textStyleMappingFontSize[element.textStyle];
+      this.renderer.setStyle(
+        this.buttonElementRef.nativeElement,
+        'font-size',
+        fontSize
+      );
+    }
+  }
+
+  getAssetPath(asset: UIAsset) {
+    return './assets/' +assetMapping[asset];
+  }
+}

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

@@ -0,0 +1,7 @@
+<div class="column" *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/column/column.component.scss

@@ -0,0 +1,9 @@
+:host {
+  display: contents;
+}
+
+.column {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}

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

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

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

@@ -0,0 +1 @@
+<img #imgElement [edmSduiView]="uiComponent.element" *ngIf="uiComponent" />

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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