otimus-library 0.2.45 → 0.2.47

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

@@ -0,0 +1,73 @@
+@use '../../../styles/variables.scss';
+
+/* The switch - the box around the slider */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 33px;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* The slider */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  box-shadow: 0px 0px 20px 0px rgba(0, 221, 163, 0.17);
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+  border: 1px solid variables.$color-white;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 1.5px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+  bottom: 2.5px;
+}
+
+input:checked + .slider {
+  &.purple {
+    background-color: variables.$color-brand-p-1;
+  }
+
+  &.green {
+    background-color: variables.$color-brand-g-1;
+  }
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(25px);
+  -ms-transform: translateX(25px);
+  transform: translateX(25px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}

package/src/lib/components/oc-toggle/oc-toggle.component.spec.ts

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

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

@@ -0,0 +1,32 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'oc-toggle',
+  standalone: true,
+  imports: [ CommonModule ],
+  templateUrl: './oc-toggle.component.html',
+  styleUrl: './oc-toggle.component.scss'
+})
+export class OcToggleComponent {
+  _ocChecked: boolean = false;
+
+  @Input() set ocChecked(value: boolean) {
+    this._ocChecked = value
+    this.ocCheckedChange.emit(this._ocChecked)
+  }
+
+  get ocChecked() {
+    return this._ocChecked
+  }
+
+  @Input() ocColor: 'purple' | 'green' = 'green';
+
+  @Output() ocCheckedChange = new EventEmitter<boolean>();
+
+  toggleChecked() {
+    this.ocChecked = !this.ocChecked;
+  }
+}
+
+

package/src/lib/directives/oc-tooltip/oc-tooltip.directive.ts

@@ -0,0 +1,108 @@
+import { Directive, ElementRef, HostListener, Input, Renderer2 } from '@angular/core'
+
+@Directive({
+  selector: '[ocTooltip]',
+  standalone: true,
+})
+export class OcTooltipDirective {
+  constructor(
+    private elRef: ElementRef,
+    private renderer: Renderer2
+  ) {}
+
+  @Input() content: string = ''
+  @Input() side: 'bottom' | 'upon' | 'left' | 'right' | 'top' | 'mouse' = 'mouse'
+
+  private created: boolean = false
+  private tooltip: HTMLElement | null = null
+
+  createToolTip(): HTMLElement | null {
+    if (this.created) {
+      return this.tooltip!
+    }
+
+    this.tooltip = this.renderer.createElement('div')
+    const htmlRegex = /<([a-z][a-z0-9]*)\b[^>]*>(.*?)<\/\1>/is
+    if (htmlRegex.test(this.content)) {
+      this.content = this.content.replace('>', ' style="margin: 0">')
+      this.renderer.setProperty(this.tooltip, 'innerHTML', this.content)
+    } else {
+      const text = this.renderer.createText(this.content)
+      this.renderer.appendChild(this.tooltip, text)
+      this.renderer.setStyle(this.tooltip, 'color', '#7E8485')
+    }
+    this.renderer.addClass(this.tooltip, 'oc-tooltip')
+    if (this.side === 'mouse') {
+      this.renderer.addClass(this.tooltip, 'mouse-tracking')
+    }
+    this.renderer.setStyle(this.tooltip, 'position', 'absolute')
+    this.renderer.setStyle(this.tooltip, 'pointer-events', 'none')
+    this.renderer.setStyle(this.tooltip, 'z-index', '1000')
+
+    document.body.appendChild(this.tooltip as any)
+    this.created = true
+    return this.tooltip
+  }
+
+  @HostListener('mouseover', ['$event'])
+  onMouseOver(event: MouseEvent): void {
+    if (!this.content) {
+      return
+    }
+    this.tooltip = this.createToolTip()
+    this.updateTooltipPosition(event)
+  }
+
+  mouseingInterval: any | null = null
+  @HostListener('mousemove', ['$event'])
+  onMouseMove(event: MouseEvent): void {
+    if (this.tooltip) {
+      if (this.side === 'mouse') {
+        this.updateTooltipPosition(event)
+      } else {
+        this.positionTooltipFixed()
+      }
+    }
+  }
+
+  private updateTooltipPosition(event: MouseEvent): void {
+    if (this.tooltip) {
+      this.renderer.setStyle(this.tooltip, 'left', `${event.pageX + 12}px`)
+      this.renderer.setStyle(this.tooltip, 'top', `${event.pageY + 12}px`)
+    }
+  }
+
+  private positionTooltipFixed(): void {
+    if (!this.tooltip) {
+      return
+    }
+    const rect = this.elRef.nativeElement.getBoundingClientRect()
+    const width = this.elRef.nativeElement.offsetWidth
+    const height = this.elRef.nativeElement.offsetHeight
+
+    if (this.side === 'right') {
+      this.renderer.setStyle(this.tooltip, 'left', `${rect.right + 10}px`)
+      this.renderer.setStyle(this.tooltip, 'top', `${rect.top + height / 2}px`)
+    } else if (this.side === 'left') {
+      this.renderer.setStyle(this.tooltip, 'left', `${rect.left - this.tooltip.offsetWidth - 10}px`)
+      this.renderer.setStyle(this.tooltip, 'top', `${rect.top + height / 2}px`)
+    } else if (this.side === 'upon' || this.side === 'top') {
+      this.renderer.setStyle(this.tooltip, 'left', `${rect.left + width / 2}px`)
+      this.renderer.setStyle(this.tooltip, 'top', `${rect.top - this.tooltip.offsetHeight - 10}px`)
+    } else if (this.side === 'bottom') {
+      this.renderer.setStyle(this.tooltip, 'left', `${rect.left + width / 2}px`)
+      this.renderer.setStyle(this.tooltip, 'top', `${rect.bottom + 10}px`)
+    }
+  }
+
+  @HostListener('mouseout')
+  onMouseOut(): void {
+    if (this.tooltip) {
+      document.body.removeChild(this.tooltip)
+      this.created = false
+      this.tooltip = null
+    }
+
+    this.mouseingInterval = null
+  }
+}

package/src/lib/interfaces/internal/languages.ts

@@ -0,0 +1,16 @@
+interface LanguageType {
+  "id"?: number,
+  "code": string,
+  "ptbr": string,
+  "esch": string,
+  "enus": string,
+  "createdAt"?: string,
+  "updatedAt"?: string
+}
+
+type AvailableLanguagesType = 'ptbr' | 'esch' | 'enus'
+
+export type {
+  LanguageType,
+  AvailableLanguagesType
+}

package/src/lib/interfaces/oc-autocomplete.ts

@@ -0,0 +1,6 @@
+interface OcAutoCompleteType {
+  name: string,
+  value?: any
+}
+
+export {OcAutoCompleteType}

package/src/lib/interfaces/oc-menu.ts

@@ -0,0 +1,10 @@
+interface OcMenuType {
+  name: string
+  url?: string
+  callback?: any
+  targetBlank?: boolean
+  icon?: string
+  checked?: boolean
+}
+
+export { OcMenuType }

package/src/lib/interfaces/oc-style-theme.ts

@@ -0,0 +1,3 @@
+type OcStyleThemeType = 'otimus' | 'shui' | 'semantic'
+
+export { OcStyleThemeType }

package/src/lib/interfaces/oc-table.ts

@@ -0,0 +1,12 @@
+export interface OcTableType {
+  data: any
+  id?: string | number | null
+  selectable?: boolean
+  actions?: OcTableActionsType
+}
+
+interface OcTableActionsType {
+  edit: () => any
+  delete: () => any
+  print: () => any
+}

package/src/lib/interfaces/oc-toast.ts

@@ -0,0 +1,8 @@
+export interface ToastType {
+  id: number
+  status: string
+  message: string
+  counter: number
+  promiseKey?: string
+  hasAnimation?: boolean
+}

package/src/lib/otimus-library.component.ts

@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'lib-otimus-library',
+  standalone: true,
+  imports: [],
+  template: `
+    <p>
+      otimus-library works!
+    </p>
+  `,
+  styles: ``
+})
+export class OtimusLibraryComponent {
+
+}

package/src/lib/otimus-library.service.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class OtimusLibraryService {
+
+  constructor() { }
+}

package/src/lib/services/internationalization.service.ts

@@ -0,0 +1,73 @@
+import { HttpClient } from '@angular/common/http'
+import { Injectable } from '@angular/core'
+
+@Injectable({
+  providedIn: 'root'
+})
+export class InternationalizationService {
+  constructor(private http: HttpClient) { }
+  private queryLang: string | null = null
+
+  getTranslation(
+    code: string | number,
+    params?: { [key: string]: string | number } | null
+  ): string {
+    code = typeof code === 'number' ? `LIB${code}` : code
+    const translations = JSON.parse(localStorage.getItem('@oc-lib-lang_words') || '{}')
+    let translation = translations[code] || code
+
+    if (params) {
+      Object.keys(params).forEach((key) => {
+        translation = translation.replace(`%{${key}}`, params[key].toString())
+      })
+    }
+
+    return translation
+  }
+
+  getTranslationsByLanguage() {
+    const urlParams = new URLSearchParams(window.location.search)
+    this.queryLang = urlParams.get('lang')
+    if(!this.queryLang) return
+    if (!this.canUpdateStoredLanguages()) return
+
+    return this.http.get<Object>(`https://cms-backend.otimusclinic.com/translations/language?lang=${this.queryLang}`)
+      .subscribe(resp => {
+        if (!resp || !Object.keys(resp).length) return
+        this.setLanguages(resp)
+        this.setLanguage(this.queryLang as string)
+        this.setUpdatedLastTime()
+      })
+  }
+
+  canUpdateStoredLanguages(): boolean {
+    const storedLastTime = localStorage.getItem('@oc-lib-stored_at')
+    const storedLanguage = localStorage.getItem('language')
+    
+    if (!storedLastTime || !storedLanguage || !this.queryLang) return true
+
+    let yesterday = new Date()
+    yesterday.setDate(yesterday.getDate() - 1)
+
+    const storedDate = new Date(storedLastTime)
+
+    if (storedDate <= yesterday || (storedLanguage !== this.queryLang)) {
+      return true
+    }
+
+    return false
+  }
+
+  setLanguage(language: string): void {
+    localStorage.setItem('language', language)
+  }
+
+  setUpdatedLastTime(): void {
+    const updatedLastTime = new Date().toISOString()
+    localStorage.setItem('@oc-lib-stored_at', updatedLastTime)
+  }
+
+  setLanguages(translations: Object): void {
+    localStorage.setItem('@oc-lib-lang_words', JSON.stringify(translations))
+  }
+}

package/src/lib/services/oc-toast.service.ts

@@ -0,0 +1,107 @@
+import { ChangeDetectorRef, Injectable } from '@angular/core'
+import { ToastType } from '../interfaces/oc-toast'
+
+type ToastStatusType =
+  | 'erro'
+  | 'error'
+  | 'success'
+  | 'éxito'
+  | 'sucesso'
+  | 'carregando'
+  | 'cargando'
+  | 'loading'
+  | 'informação'
+  | 'información'
+  | 'information'
+
+@Injectable({
+  providedIn: 'root',
+})
+export class OcToastService {
+  toastList: ToastType[] = []
+  isRunning: boolean = false
+  currentToast!: ToastType
+
+  closeToast(id: number): void {
+    this.toastList = this.toastList.map((to) => {
+      if (to.id === id) {
+        return { ...to, counter: 0 }
+      }
+      return to
+    })
+
+    this.currentToast = this.toastList[0]
+  }
+
+  openToast = (
+    toastStatus: ToastStatusType,
+    toastMessage: string,
+    toastCounter?: number,
+    promiseKey?: string
+  ): void => {
+    const toast = {
+      id: this.toastList.length === 0 ? 1 : this.toastList[this.toastList.length - 1].id + 1,
+      counter: toastCounter || 5,
+      status: toastStatus,
+      message: toastMessage,
+      promiseKey,
+      hasAnimation: true,
+    }
+
+    const toastExists = this.toastList.some((to) => {
+      return to.status === toastStatus && to.message === toastMessage
+    })
+
+    if (toastExists) {
+      return
+    }
+
+    const keyExists = this.toastList.find((to) => to.promiseKey === toast.promiseKey)
+
+    if (keyExists) {
+      this.toastList = this.toastList.map((to) => {
+        if (to.promiseKey === promiseKey) {
+          return { ...toast, hasAnimation: false }
+        }
+        return to
+      })
+    }
+
+    this.toastList.push(toast)
+
+    if (!this.isRunning) {
+      this.renderToasts()
+    }
+  }
+
+  renderToasts(): void {
+    if (this.toastList.length === 0) {
+      this.isRunning = false
+      return
+    }
+
+    this.isRunning = true
+    this.currentToast = this.toastList[0]
+
+    const toastInterval = setInterval(() => {
+      if (this.toastList.length === 0) {
+        clearInterval(toastInterval)
+        this.isRunning = false
+        return
+      }
+
+      this.currentToast = this.toastList[0]
+      if (this.currentToast.status !== 'carregando') {
+        this.currentToast.counter--
+      }
+
+      if (this.currentToast.counter <= 0) {
+        this.toastList = this.toastList.filter((to) => {
+          return to.status !== this.currentToast.status && to.message !== this.currentToast.message
+        })
+        clearInterval(toastInterval)
+        this.renderToasts()
+      }
+    }, 1000)
+  }
+}

package/src/lib/services/style-theme.service.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core'
+import { OcStyleThemeType } from '../interfaces/oc-style-theme'
+
+@Injectable({
+  providedIn: 'root',
+})
+export class StyleThemeService {
+  constructor() {}
+
+  getStyleTheme(): OcStyleThemeType | undefined {
+    const localStorageTheme = localStorage.getItem('@oc-lib-style_theme')
+
+    if (!localStorageTheme || !['otimus', 'shui', 'semantic'].includes(localStorageTheme)) {
+      return undefined
+    }
+
+    return localStorageTheme as OcStyleThemeType
+  }
+}

package/src/public-api.ts

@@ -0,0 +1,30 @@
+/*
+ * Public API Surface of otimus-library
+ */
+
+export * from './lib/otimus-library.service'
+export * from './lib/otimus-library.component'
+export * from './lib/services/oc-toast.service'
+export * from './lib/components/oc-badge/oc-badge.component'
+export * from './lib/components/oc-filter/oc-filter.component'
+export * from './lib/directives/oc-tooltip/oc-tooltip.directive'
+export * from './lib/components/oc-input/oc-input.component'
+export * from './lib/components/oc-modal/oc-modal.component'
+export * from './lib/components/oc-key-value/oc-key-value.component'
+export * from './lib/components/oc-chip/oc-chip.component'
+export * from './lib/components/oc-modal-footer/oc-modal-footer.component'
+export * from './lib/components/oc-autocomplete/oc-autocomplete.component'
+export * from './lib/components/oc-profile/oc-profile.component'
+export * from './lib/components/oc-log/oc-log.component'
+export * from './lib/components/oc-pagination/oc-pagination.component'
+export * from './lib/components/oc-not-found/oc-not-found.component'
+export * from './lib/components/oc-menu/oc-menu.component'
+export * from './lib/components/oc-toast/oc-toast.component'
+export * from './lib/components/oc-checkbox/oc-checkbox.component'
+export * from './lib/components/oc-toggle/oc-toggle.component'
+export * from './lib/components/oc-stepper/oc-stepper.component'
+export * from './lib/components/oc-step/oc-step.component'
+export * from './lib/components/oc-tabs/oc-tabs.component'
+export * from './lib/components/oc-tab/oc-tab.component'
+export * from './lib/components/oc-accordion/oc-accordion.component'
+export * from './lib/components/oc-accordion-item/oc-accordion-item.component'