otimus-library 0.2.46 → 0.2.48

package/README.md

@@ -1,26 +1,26 @@
-# OtimusLibrary
-
-Library utilizada pelo OTIMUS CLINIC, um produto da Innovo
-
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.0.0.
-
-## Code scaffolding
-
-Run `ng generate component component-name --project otimus-library` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project otimus-library`.
-> Note: Don't forget to add `--project otimus-library` or else it will be added to the default project in your `angular.json` file. 
-
-## Build
-
-Run `ng build otimus-library` to build the project. The build artifacts will be stored in the `dist/` directory.
-
-## Publishing
-
-After building your library with `ng build otimus-library`, go to the dist folder `cd dist/otimus-library` and run `npm publish`.
-
-## Running unit tests
-
-Run `ng test otimus-library` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+# OtimusLibrary
+
+Library utilizada pelo OTIMUS CLINIC, um produto da Innovo
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.0.0.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project otimus-library` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project otimus-library`.
+> Note: Don't forget to add `--project otimus-library` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build otimus-library` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build otimus-library`, go to the dist folder `cd dist/otimus-library` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test otimus-library` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

package/ng-package.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/otimus-library",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "assets": [
+    { "input": "src/assets/iconfont", "glob": "**/*.*", "output": "assets/iconfont" },
+    { "input": "src/assets/fonts", "glob": "**/*.*", "output": "assets/fonts" },
+    { "input": "src/styles", "glob": "**/*.*", "output": "styles" }
+  ]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "otimus-library",
-  "version": "0.2.46",
+  "version": "0.2.48",
   "license": "MIT",
   "peerDependencies": {
     "@angular/cdk": "^18.2.14",
@@ -17,16 +17,7 @@
   "sideEffects": false,
   "exports": {
     ".": {
-      "sass": "./src/styles/styles.scss",
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/otimus-library.mjs",
-      "esm": "./esm2022/otimus-library.mjs",
-      "default": "./fesm2022/otimus-library.mjs"
-    },
-    "./package.json": {
-      "default": "./package.json"
+      "sass": "./src/styles/styles.scss"
     }
-  },
-  "module": "fesm2022/otimus-library.mjs",
-  "typings": "index.d.ts"
-}
+  }
+}

package/src/lib/components/oc-accordion/oc-accordion.component.html

@@ -0,0 +1,3 @@
+<div>
+  <ng-content></ng-content>
+</div>

package/src/lib/components/oc-accordion/oc-accordion.component.scss

@@ -0,0 +1,4 @@
+.oc-accordion {
+  display: flex;
+  flex-direction: column;
+}

package/src/lib/components/oc-accordion/oc-accordion.component.ts

@@ -0,0 +1,44 @@
+import { AfterViewInit, Component, ContentChildren, Input, QueryList } from '@angular/core'
+import { OcAccordionItemComponent } from '../oc-accordion-item/oc-accordion-item.component'
+import { CommonModule } from '@angular/common'
+import { OcStyleThemeType } from '../../interfaces/oc-style-theme'
+import { StyleThemeService } from '../../services/style-theme.service'
+
+@Component({
+  selector: 'oc-accordion',
+  standalone: true,
+  imports: [CommonModule, OcAccordionItemComponent],
+  templateUrl: './oc-accordion.component.html',
+  styleUrl: './oc-accordion.component.scss',
+})
+export class OcAccordionComponent implements AfterViewInit {
+  @ContentChildren(OcAccordionItemComponent) items!: QueryList<OcAccordionItemComponent>
+  @Input() ocAlternate: boolean = true
+  @Input() ocCurrentIndex?: number
+  @Input() ocStyle: OcStyleThemeType = 'otimus'
+
+  constructor(private styleThemeService: StyleThemeService) {}
+
+  ngAfterViewInit(): void {
+    this.items.forEach((item, i) => {
+      item.ocStyle = this.styleThemeService.getStyleTheme() || this.ocStyle
+      item.closeAllItems.subscribe(() => this.closeAllItems())
+    })
+  }
+
+  closeAllItems(): void {
+    if (this.ocAlternate) {
+      this.items.forEach((item) => (item.ocIsOpen = false))
+    }
+  }
+
+  alternateToIndex(index: number): void {
+    this.items.forEach((item, i) => {
+      if (i === index) {
+        item.ocIsOpen = true
+        return
+      }
+      item.ocIsOpen = false
+    })
+  }
+}

package/src/lib/components/oc-accordion-item/oc-accordion-item.component.html

@@ -0,0 +1,19 @@
+<div class="oc-accordion-item" [ngClass]="{
+  'shui': ocStyle === 'shui'
+}">
+  <div class="item-header" [ngClass]="{
+    open: ocIsOpen
+  }" (click)="toggle()">
+    <h3>{{ocTitle}}</h3>
+    <span class="material-symbols-outlined">
+      keyboard_control_key
+    </span>
+  </div>
+  @if (ocIsOpen) {
+  <div class="oc-content" [ngClass]="{
+    open: ocIsOpen
+  }">
+    <ng-content></ng-content>
+  </div>
+  }
+</div>

package/src/lib/components/oc-accordion-item/oc-accordion-item.component.scss

@@ -0,0 +1,86 @@
+@use '../../../styles/variables.scss';
+
+.oc-accordion-item {
+  width: 100%;
+
+  .item-header {
+    cursor: pointer;
+    
+    transition: 0.1s ease;
+
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    
+    padding: 1.5rem;
+    border-radius: 1rem;
+
+    h3 {
+      color: variables.$color-gray-1;
+      padding: 0;
+      margin: 0;
+    }
+
+    span {
+      transition: 0.3s ease;
+      color: variables.$color-gray-2;
+    }
+
+    &:hover {
+      background-color: variables.$color-gray-6;
+    }
+
+    &:active {
+      transform: scale(0.99);
+
+    }
+
+    &.open {
+      background-color: variables.$color-gray-6;
+
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+      h3 {
+        color: variables.$color-brand-p-1;
+      }
+
+      span {
+        color: variables.$color-brand-g-1;
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  .closed, closed *{
+    display: none;
+  }
+
+  .oc-content {
+    animation: show-up 0.15s ease;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+    padding-top: 2rem;
+    padding-bottom: 2.5rem;
+
+    border-radius: 16px;
+
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+
+    &.open {
+      background-color: variables.$color-gray-6;
+    }
+  }
+}
+
+@keyframes show-up {
+  from {
+    opacity: 0;
+    transform: scale(0.5); 
+  } to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@import './styles/oc-accordion-item.shui-component.scss';

package/src/lib/components/oc-accordion-item/oc-accordion-item.component.ts

@@ -0,0 +1,27 @@
+import { CommonModule } from '@angular/common'
+import { AfterViewInit, Component, EventEmitter, Input, Output } from '@angular/core'
+import { OcStyleThemeType } from '../../interfaces/oc-style-theme'
+import { StyleThemeService } from '../../services/style-theme.service'
+
+@Component({
+  selector: 'oc-accordion-item',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './oc-accordion-item.component.html',
+  styleUrl: './oc-accordion-item.component.scss',
+})
+export class OcAccordionItemComponent {
+  @Input() ocIsOpen: boolean = false
+  @Input() ocTitle: string = ''
+  @Input() ocStyle: OcStyleThemeType = 'otimus'
+  @Output() closeAllItems = new EventEmitter()
+
+  protected toggle(): void {
+    if (this.ocIsOpen) {
+      this.ocIsOpen = !this.ocIsOpen
+      return
+    }
+    this.closeAllItems.emit()
+    this.ocIsOpen = !this.ocIsOpen
+  }
+}

package/src/lib/components/oc-accordion-item/styles/oc-accordion-item.shui-component.scss

@@ -0,0 +1,41 @@
+@use '../../../../styles/variables.scss';
+
+.oc-accordion-item.shui {
+  width: 100%;
+
+  .item-header {
+
+    border-radius: 0;
+    h3 {
+      color: rgba(variables.$color-shui-ui-1, 0.75);
+    }
+
+    span {
+      color: variables.$color-shui-ui-5;
+    }
+
+    &:hover {
+      background-color: variables.$color-shui-base-2;
+    }
+
+
+    &.open {
+      background-color: variables.$color-shui-base-2;
+      h3 {
+        color: variables.$color-shui-ui-8;
+      }
+
+      span {
+        color: variables.$color-shui-ui-0;
+      }
+    }
+  }
+
+  .oc-content {
+    border-radius: 0;
+
+    &.open {
+      background-color: rgba(variables.$color-shui-base-2, 0.4);
+    }
+  }
+}

package/src/lib/components/oc-autocomplete/oc-autocomplete.component.html

@@ -0,0 +1,66 @@
+<div [ngClass]="{
+    'oc-input-box': !ocSemanticLike && ocStyle === 'otimus',
+    small: ocSize === 'small',
+    large: ocSize === 'large',
+    error: !!ocError,
+    prefix: hasPrefix,
+    suffix: hasSuffix || ocHasDeleteButton,
+    shui: ocStyle === 'shui',
+    'shui-input-box': ocStyle === 'shui',
+  }">
+  <ng-content></ng-content>
+  <input [placeholder]="ocPlaceholder" #input (click)="toggleOptions(); ocClick.emit()" type="text"
+    (input)="filterData(ocValue)" [(ngModel)]="ocValue" (ngModelChange)="ocValue = $event; ocValueChange.emit($event)"
+    [ngClass]="{
+      'semantic-input': ocSemanticLike || ocStyle === 'semantic',
+    }" [tabindex]="ocTabIndex" />
+  @if (!ocSemanticLike && ocStyle !== 'semantic') {
+  <label>
+    <span [innerHTML]="ocPlaceholder"></span>
+    @if (ocRequired) {
+    <span class="oc color error">*</span>
+    }
+  </label>
+  }
+  <small *ngIf="ocError" class="error-msg">{{ ocError }}</small>
+  <ng-content select="ocPrefix"></ng-content>
+  @if (ocHasDeleteButton) {
+  <button class="oc-has-close-button oc suffix" (click)="clearValue()">
+    <span class="material-symbols-outlined">backspace</span>
+  </button>
+  }
+  <ng-content select="ocSuffix"></ng-content>
+
+  <div class="oc-options-div">
+    @if (isOptionsShown && !ocLoading) {
+    <ul #options class="oc-options" [ngStyle]="{
+          'max-height': ocOptionsMaxHeight,
+          width: ocOptionsWidth,
+        }">
+      @if (!filteredData.length) {
+      <li class="no-options">
+        {{ ocNoAvailableOptionsText || 'Nenhum resultado disponível' }}
+      </li>
+      } @else {
+      @for (data of filteredData; track data.value; let i = $index) {
+      @if (!ocMaxResults || i < ocMaxResults) { <li>
+        <button type="button" (click)="selectValue(data.value)">
+          {{ data.name }}
+        </button>
+        </li>
+        }
+        }
+        @if (ocMaxResults && filteredData.length > ocMaxResults) {
+        <li class="no-options">
+          {{ ocTypeForMoreResultsText || 'Digite para ver mais resultados' }}
+        </li>
+        }
+        }
+    </ul>
+    } @else if (isOptionsShown && ocLoading) {
+    <div class="oc-options loader">
+      <span class="material-symbols-outlined loading"> progress_activity </span>
+    </div>
+    }
+  </div>
+</div>

package/src/lib/components/oc-autocomplete/oc-autocomplete.component.scss

@@ -0,0 +1,157 @@
+@use '../../../styles/variables.scss';
+@import '../../../styles/components/inputs/inputs.scss';
+
+.oc-input-box {
+  position: relative;
+}
+
+.oc-options-div {
+  position: absolute;
+  width: 100%;
+}
+
+.oc-has-close-button-input {
+  padding-right: 60px; /* Espaço para o botão */
+}
+
+.oc-has-close-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  position: absolute;
+  right: 0.5rem !important;
+  top: 8%;
+  height: 84%;
+  width: 2.2rem;
+
+  border: 2px solid transparent;
+  border-radius: 0.5rem;
+  background-color: transparent;
+
+  padding: 0 !important;
+
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
+
+  &:hover {
+    border: 2px solid variables.$color-gray-3;
+    box-shadow: 0px 4px 8.7px 0px rgba(0, 0, 0, 0.13);
+    cursor: pointer;
+  }
+  span {
+    padding: 0 !important;
+    margin: 0.3rem;
+  }
+}
+
+.oc-options {
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+
+  max-height: 40vh;
+
+  background-color: variables.$color-gray-6;
+  border: 2px solid variables.$color-white;
+  box-shadow: 0px 4px 8.7px 0px rgba(0, 0, 0, 0.13);
+
+  padding: 0;
+  margin-block-start: 0;
+
+  border-radius: 0.5rem;
+  overflow: hidden;
+
+  width: 100%;
+  position: absolute;
+  top: 50%;
+
+  overflow-y: auto;
+  z-index: 15;
+
+  > li {
+    padding: 0;
+    margin: 0;
+
+    button {
+      width: 100%;
+      text-align: left;
+      padding: 0.6rem;
+
+      border: none;
+      background-color: variables.$color-gray-6;
+
+      cursor: pointer;
+      &:hover {
+        filter: brightness(0.9);
+      }
+    }
+  }
+}
+
+.no-options {
+  padding: 0.6rem !important;
+  color: variables.$color-gray-3;
+}
+
+.oc-options.loader {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  span {
+    width: 24px;
+    margin: 3rem;
+
+    color: variables.$color-brand-p-1;
+  }
+}
+
+.loading {
+  animation: spinLoad 0.5s linear infinite;
+}
+
+.semantic-input {
+  display: inline-block;
+  width: 100%;
+  padding: 10px 12px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #333;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-shadow: 0 1px 2px rgba(34, 36, 38, 0.15);
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+/* Estilo ao passar o mouse */
+.semantic-input:hover {
+  border-color: #b3b3b3;
+}
+
+/* Estilo ao focar */
+.semantic-input:focus {
+  border-color: #85b7d9;
+  box-shadow: 0 0 0 2px rgba(34, 36, 38, 0.15);
+  outline: none;
+}
+
+/* Estilo para inputs desabilitados */
+.semantic-input:disabled {
+  background-color: #f9f9f9;
+  color: #b3b3b3;
+  border-color: #ddd;
+  cursor: not-allowed;
+}
+
+@keyframes spinLoad {
+  from {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}