@rededor/site-front-end-lib 20.0.26 → 20.0.27

package/cura/texts/cura-heading/cura-heading.component.html

@@ -0,0 +1,41 @@
+<ng-template #heading>
+  <ng-content></ng-content>
+</ng-template>
+
+@switch (level()) {
+  @case (1) {
+    <h1 [class]="containerClasses()" [ngStyle]="headingStyles()">
+      <ng-container *ngTemplateOutlet="heading"></ng-container>
+    </h1>
+  }
+  @case (2) {
+    <h2 [class]="containerClasses()" [ngStyle]="headingStyles()">
+      <ng-container *ngTemplateOutlet="heading"></ng-container>
+    </h2>
+  }
+  @case (3) {
+    <h3 [class]="containerClasses()" [ngStyle]="headingStyles()">
+      <ng-container *ngTemplateOutlet="heading"></ng-container>
+    </h3>
+  }
+  @case (4) {
+    <h4 [class]="containerClasses()" [ngStyle]="headingStyles()">
+      <ng-container *ngTemplateOutlet="heading"></ng-container>
+    </h4>
+  }
+  @case (5) {
+    <h5 [class]="containerClasses()" [ngStyle]="headingStyles()">
+      <ng-container *ngTemplateOutlet="heading"></ng-container>
+    </h5>
+  }
+  @case (6) {
+    <h6 [class]="containerClasses()" [ngStyle]="headingStyles()">
+      <ng-container *ngTemplateOutlet="heading"></ng-container>
+    </h6>
+  }
+  @default {
+    <h1 [class]="containerClasses()" [ngStyle]="headingStyles()">
+      <ng-container *ngTemplateOutlet="heading"></ng-container>
+    </h1>
+  }
+}

package/cura/texts/cura-heading/cura-heading.component.scss

@@ -0,0 +1,160 @@
+@use '../../scss/mixins/responsive.scss' as responsive;
+@use '../../scss/mixins/text.scss' as text;
+
+:host {
+  display: block;
+  font-size: var(--font-size-base);
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: var(--font-family);
+    font-size: 1.714em;
+    font-weight: var(--font-weight-regular);
+    color: var(--color-body);
+    line-height: var(--line-height);
+    margin-block: var(--margin-block);
+    letter-spacing: 0px;
+
+    &.bold-weight {
+      font-weight: var(--font-weight-medium);
+    }
+
+    &.large {
+      font-size: 2.071em;
+      letter-spacing: -0.58px;
+    }
+
+    &.small {
+      font-size: 1.214em;
+      line-height: calc(var(--line-height) + 20%);
+
+      &.bold-weight {
+        font-weight: var(--font-weight-bold);
+      }
+    }
+
+    &.xsmall {
+      font-size: 0.8571428571428571em;
+      font-weight: var(--font-weight-medium);
+      letter-spacing: 0.6px;
+
+      &.bold-weight {
+        font-weight: var(--font-weight-bold);
+      }
+    }
+
+    &.textoverflow-single {
+      @include text.truncate-single();
+    }
+
+    ::ng-deep {
+      b,
+      strong {
+        font-weight: var(--font-weight-medium);
+      }
+
+      a {
+        font-weight: var(--font-weight-bold);
+        color: var(--color-spot);
+        text-underline-offset: 10%;
+        cursor: pointer;
+      }
+
+      u {
+        text-underline-offset: 10%;
+      }
+
+      abbr {
+        color: var(--color-spot);
+        text-decoration: underline dashed 1px var(--color-spot);
+        text-underline-offset: 10%;
+        cursor: default;
+      }
+
+      i {
+        font-weight: var(--font-weight-medium);
+      }
+
+      em {
+        color: var(--color-spot);
+        font-weight: var(--font-weight-bold);
+        font-style: normal;
+      }
+    }
+
+    // Responsive para small - bold weight
+    &.small ::ng-deep {
+      b,
+      strong {
+        font-weight: var(--font-weight-bold);
+      }
+    }
+
+    // Responsive para xsmall - bold weight
+    &.xsmall ::ng-deep {
+      b,
+      strong {
+        font-weight: var(--font-weight-bold);
+      }
+    }
+  }
+
+  @include responsive.medium-large() {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      font-size: 2em;
+
+      &.large {
+        font-size: 2.357em;
+        letter-spacing: -0.66px;
+      }
+
+      &.small {
+        font-size: 1.357em;
+      }
+
+      &.xsmall {
+        font-size: 0.8571428571428571em;
+        line-height: calc(var(--line-height) + 3%);
+        letter-spacing: 0.72px;
+      }
+    }
+  }
+
+  @include responsive.xlarge-only() {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      font-size: 2.5em;
+      line-height: calc(var(--line-height) + 5%);
+      letter-spacing: -0.82px;
+
+      &.large {
+        font-size: 2.929em;
+      }
+
+      &.small {
+        font-size: 1.714em;
+        line-height: calc(var(--line-height) + 30%);
+        letter-spacing: 0%;
+      }
+
+      &.xsmall {
+        font-size: 1em;
+        line-height: calc(var(--line-height) + 12.857%);
+        letter-spacing: 0.28px;
+      }
+    }
+  }
+}

package/cura/texts/cura-heading/cura-heading.component.ts

@@ -0,0 +1,111 @@
+import { Component, inject, input, computed } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CuraApiService } from '@rededor/site-front-end-lib/cura/api';
+import { HeadingLevel, TextSize, TextWeight, TextOverflow } from '@rededor/site-front-end-lib/cura/texts';
+
+@Component({
+  selector: 'cura-heading',
+  imports: [CommonModule],
+  templateUrl: './cura-heading.component.html',
+  styleUrls: ['./cura-heading.component.scss'],
+  host: {
+    role: 'heading',
+    '[attr.aria-level]': 'level()',
+    '[style.--margin-block]': 'hostStyles().marginBlock',
+    '[style.--font-size-base]': 'hostStyles().fontSizeBase',
+    '[style.--line-height]': 'hostStyles().lineHeight',
+    '[style.--color-body]': 'hostStyles().colorBody',
+    '[style.--color-spot]': 'hostStyles().colorSpot',
+  },
+})
+export class CuraHeadingComponent {
+  private curaApi = inject(CuraApiService);
+
+  /**
+   * Heading level for semantics. Will render the related HTML tag <h1>, <h2>, ...
+   * Values: 1(default) to 6.
+   */
+  level = input<HeadingLevel>(1);
+
+  /**
+   * Heading style size.
+   * Values: regular (deprecated), medium (default) | large | small | caption (deprecated) | xsmall.
+   */
+  size = input<TextSize>('medium');
+
+  /**
+   * Heading font weight. It is possible to use regular HTML tags like <b> or <strong> as well.
+   * Values: regular (default) | bold.
+   */
+  weight = input<TextWeight>('regular');
+
+  /**
+   * Apply design system color to interactive elements like <a> and <abbr> inside the text.
+   * Values: Color from design system scheme. Default to 'accent-dark'.
+   */
+  spotColor = input<string>('accent-dark');
+
+  /**
+   * Text color.
+   * Values: Color from design system scheme. Default to the font color from the theme.
+   */
+  color = input<string>('');
+
+  /**
+   * CSS margin-block property values.
+   * Default to 1.25em
+   */
+  marginBlock = input<string>('1.25em');
+
+  /**
+   * CSS line-height property values.
+   * Default to 130%
+   */
+  lineHeight = input<string>('130%');
+
+  /**
+   * Apply text-overflow ellipsis definitions.
+   * Default to none
+   */
+  textOverflow = input<TextOverflow>('none');
+
+  // Computed signals
+  containerClasses = computed(() => {
+    const classes = [];
+
+    classes.push(this.size().toLowerCase());
+    classes.push(`${this.weight().toLowerCase()}-weight`);
+
+    if (this.textOverflow() === 'single') {
+      classes.push('textoverflow-single');
+    }
+
+    return classes.join(' ');
+  });
+
+  hostStyles = computed(() => {
+    const bodyColor = this.color()
+      ? this.curaApi.theme.colors.getColor(this.color())
+      : this.curaApi.theme.fonts.getColor() || this.curaApi.theme.colors.getColor('neutral-darker');
+
+    return {
+      marginBlock: this.marginBlock(),
+      fontSizeBase: this.curaApi.theme.fonts.getSize(),
+      lineHeight: this.lineHeight(),
+      colorBody: bodyColor,
+      colorSpot: this.curaApi.theme.colors.getColor(this.spotColor()),
+    };
+  });
+
+  headingStyles = computed(() => {
+    const weights = this.curaApi.theme.fonts.getWeights();
+
+    return {
+      '--font-family': this.curaApi.theme.fonts.getFamily('heading'),
+      '--font-weight-regular': weights.regular,
+      '--font-weight-medium': weights.medium,
+      '--font-weight-bold': weights.bold,
+      '--font-weight-black': weights.black,
+    };
+  });
+}

package/cura/texts/cura-heading/index.ts

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

package/cura/texts/cura-heading/ng-package.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../../../../../node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "public-api.ts"
+  }
+}

package/cura/texts/cura-heading/public-api.ts

@@ -0,0 +1 @@
+export * from './cura-heading.component';

package/cura/texts/cura-paragraph/cura-paragraph.component.html

@@ -0,0 +1,3 @@
+<p [class]="containerClasses()" [ngStyle]="paragraphStyles()">
+  <ng-content></ng-content>
+</p>

package/cura/texts/cura-paragraph/cura-paragraph.component.scss

@@ -0,0 +1,130 @@
+@use '../../scss/mixins/responsive.scss' as responsive;
+@use '../../scss/mixins/text.scss' as text;
+
+:host {
+  display: block;
+  font-size: var(--font-size-base);
+  min-width: 0;
+
+  p {
+    font-family: var(--font-family);
+    font-size: var(--font-size-base);
+    font-weight: var(--font-weight-regular);
+    color: var(--color-body);
+    line-height: var(--line-height);
+    margin-block: var(--margin-block);
+    letter-spacing: 0.28px;
+    width: 100%;
+
+    &.large {
+      font-size: 1.214em;
+      line-height: calc(var(--line-height) + 10%);
+      letter-spacing: 0px;
+    }
+
+    &.small {
+      font-size: 0.85em;
+      line-height: calc(var(--line-height) - 5%);
+      letter-spacing: 0.48px;
+    }
+
+    &.caption,
+    &.xsmall {
+      font-size: 0.8571428571428571em;
+      line-height: calc(var(--line-height) - 5%);
+      letter-spacing: 0.6px;
+    }
+
+    &.textoverflow-single {
+      @include text.truncate-single();
+    }
+
+    ::ng-deep {
+      b,
+      strong {
+        font-weight: var(--font-weight-bold);
+      }
+
+      a {
+        font-weight: var(--font-weight-medium);
+        color: var(--color-spot);
+        text-underline-offset: 10%;
+      }
+
+      u {
+        font-weight: var(--font-weight-medium);
+        text-underline-offset: 10%;
+      }
+
+      i {
+        font-style: italic;
+      }
+
+      em {
+        font-weight: var(--font-weight-bold);
+        color: var(--color-spot);
+        font-style: normal;
+      }
+
+      abbr {
+        color: var(--color-spot);
+        text-decoration: underline dashed 1px var(--color-spot);
+        text-underline-offset: 10%;
+        cursor: default;
+      }
+    }
+  }
+
+  @include responsive.medium-large() {
+    p {
+      font-size: 1.143em;
+      line-height: calc(var(--line-height) + 5%);
+      letter-spacing: 0.32px;
+
+      &.large {
+        font-size: 1.357em;
+        line-height: calc(var(--line-height) + 10%);
+        letter-spacing: 0px;
+      }
+
+      &.small {
+        font-size: 1em;
+        line-height: calc(var(--line-height) - 5%);
+        letter-spacing: 0.56px;
+      }
+
+      &.caption,
+      &.xsmall {
+        font-size: 0.8571428571428571em;
+        line-height: calc(var(--line-height) - 5%);
+        letter-spacing: 0.72px;
+      }
+    }
+  }
+
+  @include responsive.xlarge-only() {
+    p {
+      font-size: 1.429em;
+      line-height: calc(var(--line-height) + 10%);
+      letter-spacing: 0px;
+
+      &.large {
+        font-size: 1.714em;
+        line-height: calc(var(--line-height) + 20%);
+      }
+
+      &.small {
+        font-size: 1.21em;
+        line-height: calc(var(--line-height) + 5%);
+        letter-spacing: 0px;
+      }
+
+      &.caption,
+      &.xsmall {
+        font-size: 1em;
+        line-height: calc(var(--line-height) + 5%);
+        letter-spacing: 0.28px;
+      }
+    }
+  }
+}

package/cura/texts/cura-paragraph/cura-paragraph.component.ts

@@ -0,0 +1,94 @@
+import { Component, inject, input, computed } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CuraApiService } from '@rededor/site-front-end-lib/cura/api';
+import { TextSize, TextOverflow } from '@rededor/site-front-end-lib/cura/texts';
+
+@Component({
+  selector: 'cura-paragraph',
+  imports: [CommonModule],
+  templateUrl: './cura-paragraph.component.html',
+  styleUrls: ['./cura-paragraph.component.scss'],
+  host: {
+    '[style.--margin-block]': 'hostStyles().marginBlock',
+    '[style.--font-size-base]': 'hostStyles().fontSizeBase',
+    '[style.--line-height]': 'hostStyles().lineHeight',
+    '[style.--color-body]': 'hostStyles().colorBody',
+    '[style.--color-spot]': 'hostStyles().colorSpot',
+  },
+})
+export class CuraParagraphComponent {
+  private curaApi = inject(CuraApiService);
+
+  /**
+   * Set size of body text.
+   * Values: regular (deprecated), medium (default) | large | small | caption (deprecated) | xsmall.
+   */
+  size = input<TextSize>('medium');
+
+  /**
+   * Apply design system color to interactive elements like <a> and <abbr> inside the text.
+   * Values: Color from design system scheme. Default to 'accent-dark'.
+   */
+  spotColor = input<string>('accent-dark');
+
+  /**
+   * Text color.
+   * Values: Color from design system scheme. Default to the font color from the theme.
+   */
+  color = input<string>('');
+
+  /**
+   * CSS margin-block property values.
+   * Default to 1.25em
+   */
+  marginBlock = input<string>('1.25em');
+
+  /**
+   * CSS line-height property values.
+   * Default to 140%
+   */
+  lineHeight = input<string>('140%');
+
+  /**
+   * Apply text-overflow ellipsis definitions.
+   * Default to none
+   */
+  textOverflow = input<TextOverflow>('none');
+
+  containerClasses = computed(() => {
+    const classes = [];
+
+    classes.push(this.size().toLowerCase());
+
+    if (this.textOverflow() === 'single') {
+      classes.push('textoverflow-single');
+    }
+
+    return classes.join(' ');
+  });
+
+  hostStyles = computed(() => {
+    const bodyColor = this.color()
+      ? this.curaApi.theme.colors.getColor(this.color())
+      : this.curaApi.theme.fonts.getColor() || this.curaApi.theme.colors.getColor('neutral-darker');
+
+    return {
+      marginBlock: this.marginBlock(),
+      fontSizeBase: this.curaApi.theme.fonts.getSize(),
+      lineHeight: this.lineHeight(),
+      colorBody: bodyColor,
+      colorSpot: this.curaApi.theme.colors.getColor(this.spotColor()),
+    };
+  });
+
+  paragraphStyles = computed(() => {
+    const weights = this.curaApi.theme.fonts.getWeights();
+
+    return {
+      '--font-family': this.curaApi.theme.fonts.getFamily('body'),
+      '--font-weight-regular': weights.regular,
+      '--font-weight-medium': weights.medium,
+      '--font-weight-bold': weights.bold,
+    };
+  });
+}

package/cura/texts/cura-paragraph/index.ts

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

package/cura/texts/cura-paragraph/ng-package.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../../../../../node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "public-api.ts"
+  }
+}

package/cura/texts/cura-paragraph/public-api.ts

@@ -0,0 +1 @@
+export * from './cura-paragraph.component';

package/cura/texts/cura-texts.definitions.ts

@@ -0,0 +1,9 @@
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+
+export type TextSize = 'regular' | 'medium' | 'large' | 'small' | 'caption' | 'xsmall';
+
+export type TextWeight = 'regular' | 'bold';
+
+export type TextOverflow = 'none' | 'single';
+
+export type DisplaySize = 'large' | 'small';

package/cura/texts/index.ts

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

package/cura/texts/ng-package.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "public-api.ts"
+  }
+}

package/cura/texts/public-api.ts

@@ -0,0 +1 @@
+export * from './cura-texts.definitions';

package/enums/EnumError.enum.ts

@@ -0,0 +1,4 @@
+export enum Errors {
+  NOT_FOUND = 'not-found',
+  SERVER_RESPONSE = 'server-response',
+}

package/enums/EnumThemes.enum.ts

@@ -0,0 +1,8 @@
+export enum Themes {
+  REDE = 'default',
+  MATERNIDADE = 'maternidade',
+  ONCO = 'oncologia',
+  RICHET = 'richet',
+  STAR = 'star',
+  MATERNIDADESTAR = 'maternidade-star',
+}

package/enums/Estados.enum.ts

@@ -0,0 +1,29 @@
+export enum Estados {
+  AC = 'Acre',
+  AL = 'Alagoas',
+  AP = 'Amapá',
+  AM = 'Amazonas',
+  BA = 'Bahia',
+  CE = 'Ceará',
+  DF = 'Distrito Federal',
+  ES = 'Espírito Santo',
+  GO = 'Goías',
+  MA = 'Maranhão',
+  MT = 'Mato Grosso',
+  MS = 'Mato Grosso do Sul',
+  MG = 'Minas Gerais',
+  PA = 'Pará',
+  PB = 'Paraíba',
+  PR = 'Paraná',
+  PE = 'Pernambuco',
+  PI = 'Piauí',
+  RJ = 'Rio de Janeiro',
+  RN = 'Rio Grande do Norte',
+  RS = 'Rio Grande do Sul',
+  RO = 'Rondônia',
+  RR = 'Roraíma',
+  SC = 'Santa Catarina',
+  SP = 'São Paulo',
+  SE = 'Sergipe',
+  TO = 'Tocantins',
+}