@litigiovirtual/ius-design-components 1.0.264 → 1.0.267

package/src/lib/create-ticket/create-ticket.component.html

@@ -0,0 +1,57 @@
+<ius-drawer-container-right [titleDrawer]="'Crear Ticket'" (onDrawerClosed)="onClose()"
+  [percentProgressBar]="percentProgressBar">
+  <div class="form between-xs">
+    <div class="content">
+      <ius-section-collapse-drawer-parent textTitle="Información general" [disabled]="false"
+        [isActive]="isExpandGeneralInformation" (buttonClicked)="onExpandGeneralInformation()">
+        <div class="section">
+          <div class="select">
+            <ius-input-select componentId="ticketType" [required]="true" [showHelpText]="true" labelSuperior="Tipo de ticket"
+              labelInput="Selecciona una opción" [textInput]="typeSelected?.tipo">
+              @for (type of tipos; track type) {
+              <ius-option (optionClick)="onSetValueType(type)">
+                {{ type.tipo }}
+              </ius-option>
+              }
+            </ius-input-select>
+          </div>
+          <div class="select">
+            <ius-input-select componentId="ticketReason" [required]="true" [showHelpText]="true" labelSuperior="Razón del ticket"
+              labelInput="Selecciona una opción" [textInput]="reasonSelected?.razon">
+              @for (reason of razones; track reason) {
+              <ius-option (optionClick)="onSetValueReason(reason)">
+                {{ reason.razon }}
+              </ius-option>
+              }
+            </ius-input-select>
+          </div>
+          <div class="select">
+            <ius-input-textfield componentId="tituloTicket" [initialText]="tituloTicket" [required]="true" [showHelpText]="true"
+              labelSuperior="Titulo o asunto para el ticket" labelInput="Defina brevemente un asunto o titulo"
+              (onChangesValueEvent)="onSetValueTituloTicket($event)">
+            </ius-input-textfield>
+          </div>
+          <div class="select">
+            <ius-input-large componentId="descripcionTicket" [initialText]="descripcionTicket" [required]="true" [showHelpText]="true"
+              labelSuperior="Descripcion del ticket" labelInput="Describe tu idea o petición para el ticket"
+              (onChangesValueEvent)="onSetValueDescripcionTicket($event)">
+            </ius-input-large>
+          </div>
+        </div>
+      </ius-section-collapse-drawer-parent>
+    </div>
+
+    <div class="footer">
+      <div class="toolbar">
+        <div class="toolbar-btn">
+          <ius-button-dynamic [labelDefault]="'Crear ticket'" [labelSuccess]="'Agregando'" [labelError]="'Error'"
+            [loading]="loading" [result]="lastResult" (buttonClicked)="createTicket()">
+          </ius-button-dynamic>
+        </div>
+        <div class="toolbar-btn">
+          <ius-button-standard-secondary (buttonClicked)="onClose()">Cancelar</ius-button-standard-secondary>
+        </div>
+      </div>
+    </div>
+  </div>
+</ius-drawer-container-right>

package/src/lib/create-ticket/create-ticket.component.scss

@@ -0,0 +1,54 @@
+@use "@litigiovirtual/ius-design-styles/lib/colors" as colors;
+@use "@litigiovirtual/ius-design-styles/lib/typography" as typography;
+@use "@litigiovirtual/ius-design-styles/lib/variables" as variables;
+@use "@litigiovirtual/ius-design-styles/lib/semantic-colors" as semantic-colors;
+
+.form {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+}
+
+.section {
+  display: flex;
+  padding: 0px variables.$spacing-xs;
+  flex-direction: column;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+}
+
+.select {
+  display: flex;
+  padding: variables.$spacing-xs variables.$spacing-md;
+  flex-direction: column;
+  justify-content: center;
+  gap: variables.$spacing-xs;
+  align-self: stretch;
+}
+
+.footer {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 10px;
+  flex: 1 0 0;
+  align-self: stretch;
+}
+
+.toolbar {
+  display: flex;
+  padding: variables.$spacing-sm variables.$spacing-md;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: center;
+  gap: variables.$spacing-xs;
+  align-self: stretch;
+}
+
+.toolbar-btn {
+  width: 100%;
+}

package/src/lib/create-ticket/create-ticket.component.ts

@@ -0,0 +1,119 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ButtonDynamicComponent, ButtonResult } from '../button-dynamic/button-dynamic.component';
+import { ButtonStandardSecondaryComponent } from '../button-standard-secondary/button-standard-secondary.component';
+import { DrawerContainerRightComponent } from '../drawer-container-right/drawer-container-right.component';
+import { SectionCollapseDrawerParentComponent } from '../section-collapse-drawer-parent/section-collapse-drawer-parent.component';
+import { InputSelectComponent } from '../input-select/input-select.component';
+import { InputTextfieldComponent } from '../input-textfield/input-textfield.component';
+import { OptionComponent } from '../option/option.component';
+import { InputLargeComponent } from '../input-large/input-large.component';
+
+export interface TipoTicket {
+  id?: number;
+  tipo?: string;
+  cntTipoTicket?: number;
+}
+
+export interface RazonTicket {
+  id?: number;
+  razon?: string;
+}
+
+export interface CreateTicketSubmitPayload {
+  titulo: string;
+  descripcion: string;
+  tipoTicketID?: number;
+  razonTicketID?: number;
+}
+
+/**
+ * Dumb component. Solo UI del drawer "Crear Ticket".
+ *
+ * App padre provee tipos/razones (que vienen de su API), recibe el evento
+ * submitTicket con el payload, y maneja el loading + resultado.
+ *
+ * Uso:
+ *   <ius-create-ticket
+ *     [tipos]="ticketTypes"
+ *     [razones]="ticketReasons"
+ *     [loading]="creatingTicket"
+ *     [lastResult]="ticketResult"
+ *     (submitTicket)="handleCreateTicket($event)"
+ *     (closeForm)="addTicket = false">
+ *   </ius-create-ticket>
+ */
+@Component({
+  selector: 'ius-create-ticket',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ButtonDynamicComponent,
+    ButtonStandardSecondaryComponent,
+    DrawerContainerRightComponent,
+    SectionCollapseDrawerParentComponent,
+    InputSelectComponent,
+    InputTextfieldComponent,
+    OptionComponent,
+    InputLargeComponent,
+  ],
+  templateUrl: './create-ticket.component.html',
+  styleUrl: './create-ticket.component.scss'
+})
+export class CreateTicketComponent {
+
+  @Input() tipos: TipoTicket[] = [];
+  @Input() razones: RazonTicket[] = [];
+  @Input() loading: boolean = false;
+  // Default undefined = botón en estado neutral al abrir el drawer.
+  // Se setea a 'success' o 'error' solo tras respuesta del API.
+  @Input() lastResult: ButtonResult = undefined;
+
+  @Output() submitTicket: EventEmitter<CreateTicketSubmitPayload> = new EventEmitter();
+  @Output() closeForm: EventEmitter<void> = new EventEmitter();
+
+  tituloTicket: string = '';
+  descripcionTicket: string = '';
+  typeSelected?: TipoTicket;
+  reasonSelected?: RazonTicket;
+
+  percentProgressBar = 100;
+  isExpandGeneralInformation = true;
+
+  onClose() {
+    this.closeForm.emit();
+  }
+
+  onExpandGeneralInformation() {
+    this.isExpandGeneralInformation = true;
+  }
+
+  onSetValueType(event: TipoTicket) {
+    this.typeSelected = event;
+  }
+
+  onSetValueReason(event: RazonTicket) {
+    this.reasonSelected = event;
+  }
+
+  onSetValueTituloTicket(event: any) {
+    this.tituloTicket = event;
+  }
+
+  onSetValueDescripcionTicket(event: any) {
+    this.descripcionTicket = event;
+  }
+
+  createTicket() {
+    if (this.loading) {
+      return;
+    }
+
+    this.submitTicket.emit({
+      titulo: this.tituloTicket,
+      descripcion: this.descripcionTicket,
+      tipoTicketID: this.typeSelected?.id,
+      razonTicketID: this.reasonSelected?.id,
+    });
+  }
+}

package/src/lib/create-ticket/index.ts

@@ -0,0 +1 @@
+export * from './create-ticket.component';

package/src/lib/custom-dropdown/custom-dropdown.component.html

@@ -0,0 +1,89 @@
+<div class="container-general" [id]="componentId">
+
+  <!-- Label superior -->
+  @if (labelSuperior) {
+    <div class="container-label-sup" [ngClass]="{ disabled: disabled }">
+      @if (!disabled && required) {
+        <div class="icon-dot"></div>
+      }
+      <span>{{ labelSuperior }}</span>
+      @if (!disabled && showHelpText) {
+        <ius-icon-md iconName="icon-help" class="icon-color-help"></ius-icon-md>
+      }
+      <span>:</span>
+    </div>
+  }
+
+  <!-- Input principal -->
+  <div
+    class="container-textfield"
+    [ngClass]="{
+      disabled: disabled,
+      focused: isFocused,
+      alert: (!isFocused && isAlertText && !disabled) || (error && !disabled)
+    }"
+  >
+    @if (iconInput) {
+      <ius-icon-md [iconName]="iconInput" class="icon-color"></ius-icon-md>
+    }
+    <input
+      type="text"
+      [(ngModel)]="textInput"
+      [placeholder]="labelInput"
+      [disabled]="disabled"
+      (input)="onInput()"
+      (focus)="onFocus()"
+      (blur)="onBlur()"
+      (keypress)="onKeyPress($event)"
+    />
+    <div class="cnt-icon-right">
+      @if (!showList) {
+        <ius-icon-md iconName="icon-keyboard-arrow-down" class="icon-arrows"></ius-icon-md>
+      } @else {
+        <ius-icon-md iconName="icon-keyboard-arrow-up" class="icon-arrows"></ius-icon-md>
+      }
+    </div>
+  </div>
+
+  <!-- Label inferior -->
+  @if (labelInferior && isFocused && !error) {
+    <span class="label-inf">{{ labelInferior }}</span>
+  }
+  @if ((errorText || labelInferior) && ((!isFocused && isAlertText && !disabled) || (error && !disabled))) {
+    <span class="label-inf" [ngClass]="{ alert: (!isFocused && isAlertText && !disabled) || (error && !disabled) }">
+      {{ errorText ?? labelInferior }}
+    </span>
+  }
+
+  <!-- Lista de opciones -->
+  @if (showList) {
+    <div class="container-options">
+      <div class="container-list scrollable-small">
+        <div (click)="onSelectOption()">
+          <ng-content selector="ius-option"></ng-content>
+        </div>
+      </div>
+      <ius-simple-divider></ius-simple-divider>
+      <div class="add-data">
+        <div class="container-text">
+          <input
+            type="text"
+            class="input-text"
+            [(ngModel)]="element"
+            (keypress)="onKeyPressAddElement($event)"
+            [placeholder]="placeholderAddText"
+          />
+        </div>
+        <div class="button-add-option">
+          <ius-button-standard-tertiary
+            [iconName]="iconBtnAdd"
+            (click)="onClickAddElement()"
+          >
+            {{ textBtnAdd }}
+          </ius-button-standard-tertiary>
+        </div>
+      </div>
+    </div>
+  }
+
+</div>

package/src/lib/custom-dropdown/custom-dropdown.component.scss

@@ -0,0 +1,209 @@
+@use "@litigiovirtual/ius-design-styles/lib/colors" as colors;
+@use "@litigiovirtual/ius-design-styles/lib/typography" as typography;
+@use "@litigiovirtual/ius-design-styles/lib/variables" as variables;
+@use "@litigiovirtual/ius-design-styles/lib/semantic-colors" as semantic-colors;
+
+.container-general {
+  position: relative;
+  height: 100%;
+}
+
+.container-textfield {
+  display: flex;
+  padding: 10px variables.$spacing-sm;
+  justify-content: center;
+  align-items: flex-start;
+  gap: variables.$spacing-xxs;
+
+  border: 1px solid colors.$neutral-2;
+  border-radius: variables.$radius-md;
+  background: colors.$neutral-2;
+
+  font-family: typography.$font-secondary;
+  font-size: typography.$font-size-base;
+  font-weight: typography.$font-weight-regular;
+  line-height: typography.$line-height-base;
+  letter-spacing: 0.28px;
+
+  &:hover:not(.disabled):not(.focused):not(.alert) {
+    background: colors.$info-100;
+  }
+
+  &.focused {
+    border: 1px solid colors.$primary-600;
+    background: colors.$info-100;
+  }
+
+  &.disabled {
+    .icon-color,
+    .icon-arrows {
+      color: semantic-colors.$color-text-disabled-on-light;
+    }
+    background: colors.$neutral-2;
+
+    input::placeholder {
+      color: semantic-colors.$color-text-disabled-on-light;
+      opacity: 1;
+    }
+  }
+
+  &.alert {
+    border: 1px solid colors.$danger-600;
+    background: colors.$danger-100;
+  }
+}
+
+.icon-color {
+  color: semantic-colors.$color-text-secundary-on-light;
+}
+
+.icon-arrows {
+  color: semantic-colors.$color-text-primary-on-light;
+}
+
+.icon-color-help {
+  color: semantic-colors.$color-text-tertiary-on-light;
+}
+
+input {
+  display: flex;
+  align-items: center;
+  flex: 1 0 0;
+  border: none;
+  outline: none;
+  background-color: transparent;
+  font-family: typography.$font-secondary;
+  font-size: typography.$font-size-base;
+  font-weight: typography.$font-weight-regular;
+  line-height: typography.$line-height-base;
+  letter-spacing: 0.28px;
+}
+
+.cnt-icon-right {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  padding: variables.$spacing-none;
+  color: semantic-colors.$color-text-primary-on-light;
+}
+
+.container-label-sup {
+  display: flex;
+  align-items: center;
+  gap: variables.$spacing-xxs;
+  margin-bottom: variables.$spacing-xs;
+  color: semantic-colors.$color-text-primary-on-light;
+  font-family: typography.$font-primary;
+  font-size: typography.$font-size-base;
+  font-weight: typography.$font-weight-medium;
+  line-height: typography.$line-height-base;
+  letter-spacing: 0.28px;
+
+  &.disabled {
+    color: semantic-colors.$color-text-disabled-on-light;
+  }
+}
+
+.icon-dot {
+  display: flex;
+  align-items: center;
+  width: 4px;
+  height: 4px;
+  aspect-ratio: 1/1;
+  background-color: colors.$danger-600;
+  border-radius: variables.$radius-pill;
+}
+
+.label-inf {
+  display: flex;
+  position: absolute;
+  margin-top: variables.$spacing-xxs;
+  color: semantic-colors.$color-text-secundary-on-light;
+  font-family: typography.$font-primary;
+  font-size: typography.$font-size-sm;
+  font-style: italic;
+  font-weight: typography.$font-weight-medium;
+  line-height: typography.$line-height-sm;
+  letter-spacing: 0.24px;
+
+  &.alert {
+    color: colors.$danger-800;
+  }
+}
+
+.container-options {
+  position: absolute;
+  width: 100%;
+  margin-top: variables.$spacing-xxs;
+  border-radius: variables.$radius-md;
+  background: colors.$neutral-white;
+  box-shadow: variables.$elevation-200;
+  z-index: 1000;
+}
+
+.container-list {
+  max-height: 144px;
+  display: flex;
+  flex-direction: column;
+  margin-top: variables.$spacing-xxs;
+  overflow-y: auto;
+}
+
+.add-data {
+  display: flex;
+  padding-top: variables.$spacing-xs;
+  padding-bottom: variables.$spacing-xs;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  background: colors.$neutral-white;
+  border-radius: variables.$radius-md;
+
+  .container-text {
+    display: flex;
+    width: 60%;
+    align-items: flex-start;
+    gap: variables.$spacing-xxs;
+
+    .input-text {
+      width: 100%;
+      display: flex;
+      margin-left: 10px;
+      padding: variables.$spacing-sm;
+      justify-content: center;
+      align-items: flex-start;
+      gap: variables.$spacing-xxs;
+      border-radius: variables.$radius-md;
+      background: colors.$neutral-2;
+    }
+  }
+
+  .button-add-option {
+    margin-right: 10px;
+    width: 40%;
+  }
+}
+
+.scrollable-small::-webkit-scrollbar {
+  -webkit-appearance: none;
+}
+
+.scrollable-small::-webkit-scrollbar:vertical {
+  width: variables.$spacing-xxs;
+  height: variables.$spacing-xl;
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+
+.scrollable-small::-webkit-scrollbar:horizontal {
+  height: 5px;
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+
+.scrollable-small::-webkit-scrollbar-thumb {
+  background-color: colors.$primary-500;
+  border-radius: variables.$radius-sm;
+}
+

package/src/lib/custom-dropdown/custom-dropdown.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CustomDropdownComponent } from './custom-dropdown.component';
+
+describe('CustomDropdownComponent', () => {
+  let component: CustomDropdownComponent;
+  let fixture: ComponentFixture<CustomDropdownComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CustomDropdownComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(CustomDropdownComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/custom-dropdown/custom-dropdown.component.ts

@@ -0,0 +1,122 @@
+import { Component, EventEmitter, HostListener, Input, Output } from '@angular/core';
+import { IconMdComponent } from '../icon-md/icon-md.component';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { SimpleDividerComponent } from '../simple-divider';
+import { ButtonStandardTertiaryComponent } from '../button-standard-tertiary';
+
+@Component({
+  selector: 'ius-custom-dropdown',
+  standalone: true,
+  imports: [
+    IconMdComponent,
+    FormsModule,
+    CommonModule,
+    SimpleDividerComponent,
+    ButtonStandardTertiaryComponent
+  ],
+  templateUrl: './custom-dropdown.component.html',
+  styleUrl: './custom-dropdown.component.scss'
+})
+export class CustomDropdownComponent {
+
+  isFocused = false;
+  isAlertText = false;
+  showList = false;
+  hasClickedInside = false;
+  selected = false;
+
+  @Input({ required: true }) componentId: string = '';
+  @Input() required = false;
+  @Input() disabled = false;
+  @Input() showHelpText = false;
+  @Input() error: boolean = false;
+
+  @Input() labelSuperior?: string;
+  @Input() labelInferior?: string;
+  @Input() errorText?: string;
+  @Input() labelInput?: string;
+  @Input() iconInput?: string;
+
+  @Input() placeholderAddText = 'Digite una nueva';
+  @Input() iconBtnAdd = 'icon-add';
+  @Input() textBtnAdd = 'Agregar';
+
+  @Input() textInput = '';
+  @Input() element = '';
+
+  @Output() onChangesValueEvent = new EventEmitter<any>();
+  @Output() onEnterKey = new EventEmitter<string>();
+  @Output() onAddElement = new EventEmitter<string>();
+  @Output() onBlurEvent = new EventEmitter<void>();
+
+  @HostListener('document:click', ['$event'])
+  onClickOutside(event: Event): void {
+    if (!this.hasClickedInside) return;
+
+    const target = event.target as HTMLElement;
+    const container = document.getElementById(this.componentId);
+
+    if (container && !container.contains(target)) {
+      this.isFocused = false;
+      this.showList = false;
+      this.isAlertText = !this.selected && !this.showList;
+    }
+  }
+
+  onInput(): void {
+    if (this.selected) this.selected = false;
+    this.onChangesValueEvent.emit(this.textInput);
+  }
+
+  onFocus(): void {
+    this.isFocused = true;
+    this.showList = true;
+    this.hasClickedInside = true;
+  }
+
+  onBlur(): void {
+    this.isFocused = false;
+    if (this.required) {
+      this.isAlertText = this.textInput === '';
+    }
+    this.onBlurEvent.emit();
+  }
+
+  onKeyPress(event: KeyboardEvent): void {
+    if (event.key === 'Enter') this.addText();
+  }
+
+  onKeyPressAddElement(event: KeyboardEvent): void {
+    if (event.key === 'Enter') this.addElementText();
+  }
+
+  onClickAddElement(): void {
+    if (this.element.trim() !== '') {
+      this.onAddElement.emit(this.element);
+      this.element = '';
+    } else {
+      this.isAlertText = true;
+    }
+  }
+
+  addElementText(): void {
+    if (this.element.trim() !== '') {
+      this.onAddElement.emit(this.element);
+      this.element = '';
+    }
+  }
+
+  addText(): void {
+    if (this.textInput.trim() !== '') {
+      this.onEnterKey.emit(this.textInput);
+    }
+  }
+
+  onSelectOption(): void {
+    this.isFocused = false;
+    this.showList = false;
+    this.isAlertText = false;
+    this.selected = true;
+  }
+}

package/src/lib/custom-dropdown/index.ts

@@ -0,0 +1,2 @@
+export * from './custom-dropdown.component';
+