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

package/cura/api/theme-presets/static.ts

@@ -0,0 +1,70 @@
+/**
+ * Static theme data
+ */
+export const Static = {
+  /* Colors */
+  color: {
+    success: {
+      '100': '223,246,233',
+      '300': '148,225,181',
+      '500': '95,210,144',
+      '700': '49,115,77',
+      '900': '19,42,29',
+    },
+    info: {
+      '100': '207,226,255',
+      '300': '149,191,255',
+      '500': '110,168,255',
+      '700': '66,100,153',
+      '900': '37,56,85',
+    },
+    error: {
+      '100': '251,221,221',
+      '300': '242,143,143',
+      '500': '235,87,87',
+      '700': '157,58,58',
+      '900': '47,17,17',
+    },
+    warning: {
+      '100': '252,250,196',
+      '300': '248,244,137',
+      '500': '245,239,78',
+      '700': '108,106,32',
+      '900': '49,48,16',
+    },
+    neutral: {
+      '0': '255,255,255',
+      '100': '246,246,246',
+      '200': '233,233,233',
+      '300': '226,226,226',
+      '400': '212,212,212',
+      '500': '183,183,183',
+      '600': '146,146,146',
+      '700': '110,110,110',
+      '800': '74,74,74',
+      '900': '38,38,38',
+    },
+  },
+  breakpoints: {
+    xsmall: {
+      min: 0,
+      max: 480,
+    },
+    small: {
+      min: 481,
+      max: 768,
+    },
+    medium: {
+      min: 769,
+      max: 992,
+    },
+    large: {
+      min: 993,
+      max: 1920,
+    },
+    xlarge: {
+      min: 1921,
+      max: 4096,
+    },
+  },
+};

package/cura/api/theme-presets/theme-default.ts

@@ -0,0 +1,49 @@
+/**
+ * Cura Default Theme
+ */
+export const ThemeDefault = {
+  /* Colors */
+  color: {
+    primary: {
+      '100': '113,197,232',
+      '300': '68,142,205',
+      '500': '0,61,165',
+      '700': '0,48,117',
+      '900': '0,40,85',
+    },
+    secondary: {
+      '100': '245,236,227',
+      '300': '221,192,162',
+      '500': '204,160,116',
+      '700': '136,107,77',
+      '900': '41,32,23',
+    },
+    accent: {
+      '100': '255,194,123',
+      '300': '255,168,74',
+      '500': '255,130,0',
+      '700': '215,114,10',
+      '900': '155,90,26',
+    },
+  },
+  /* Spacing */
+  spacing: {
+    base: 4,
+  },
+  /* Fonts */
+  font: {
+    size: '14px',
+    color: '#4A4A4A',
+    body: "'Gotham', Arial, Helvetica, sans-serif",
+    heading: "'Gotham', Arial, Helvetica, sans-serif",
+    display: "'Gotham', Arial, Helvetica, sans-serif",
+    weights: {
+      thin: 100,
+      light: 300,
+      regular: 400,
+      medium: 500,
+      bold: 700,
+      black: 900,
+    },
+  },
+};

package/cura/api/theme-presets/theme-maternidade-star.ts

@@ -0,0 +1,49 @@
+/**
+ * Cura MaternidadeStar Theme
+ */
+export const ThemeMaternidadeStar = {
+  /* Colors */
+  color: {
+    primary: {
+      '100': '283, 223, 210',
+      '300': '222, 192, 164',
+      '500': '205, 160, 119',
+      '700': '171, 133, 99',
+      '900': '103, 80, 60',
+    },
+    secondary: {
+      '100': '251, 239, 230',
+      '300': '247, 223, 205',
+      '500': '242, 208, 179',
+      '700': '202, 172, 149',
+      '900': '122, 104, 90',
+    },
+    accent: {
+      '100': '283, 223, 210',
+      '300': '222, 192, 164',
+      '500': '205, 160, 119',
+      '700': '171, 133, 99',
+      '900': '103, 80, 60',
+    },
+  },
+  /* Spacing */
+  spacing: {
+    base: 4,
+  },
+  /* Fonts */
+  font: {
+    size: '14px',
+    color: '#4A4A4A',
+    body: "'SkolaSans', Arial, Helvetica, sans-serif",
+    heading: "'SkolaSans', Arial, Helvetica, sans-serif",
+    display: "'SkolaSans', Arial, Helvetica, sans-serif",
+    weights: {
+      thin: 100,
+      light: 300,
+      regular: 400,
+      medium: 500,
+      bold: 700,
+      black: 900,
+    },
+  },
+};

package/cura/api/theme-presets/theme-presets.ts

@@ -0,0 +1,13 @@
+import { ThemeDefault } from './theme-default';
+import { ThemeMaternidadeStar } from './theme-maternidade-star';
+import { ThemeStar } from './theme-star';
+
+export const ThemePresets: { [key: string]: any } = {
+  default: ThemeDefault,
+  // 'maternidade': ThemeMaternity,
+  // 'oncologia': ThemeOncology,
+  // 'richet': ThemeRichet,
+  // 'legacyDefault': ThemeLegacyDefault
+  star: ThemeStar,
+  maternidadeStar: ThemeMaternidadeStar,
+};

package/cura/api/theme-presets/theme-star.ts

@@ -0,0 +1,49 @@
+/**
+ * Cura Star Theme
+ */
+export const ThemeStar = {
+  /* Colors */
+  color: {
+    primary: {
+      '100': '182, 141, 115',
+      '300': '142, 103, 79',
+      '500': '119, 77, 51',
+      '700': '78, 43, 28',
+      '900': '47, 22, 12',
+    },
+    secondary: {
+      '100': '219, 193, 178',
+      '300': '190, 159, 143',
+      '500': '175, 150, 138',
+      '700': '139, 112, 99',
+      '900': '80, 59, 49',
+    },
+    accent: {
+      '100': '229, 196, 158',
+      '300': '198, 162, 122',
+      '500': '145, 107, 59',
+      '700': '110, 72, 23',
+      '900': '83, 46, 6',
+    },
+  },
+  /* Spacing */
+  spacing: {
+    base: 4,
+  },
+  /* Fonts */
+  font: {
+    size: '14px',
+    color: '#4A4A4A',
+    body: "'SkolaSans', Arial, Helvetica, sans-serif",
+    heading: "'SkolaSans', Arial, Helvetica, sans-serif",
+    display: "'SkolaSans', Arial, Helvetica, sans-serif",
+    weights: {
+      thin: 100,
+      light: 300,
+      regular: 400,
+      medium: 500,
+      bold: 700,
+      black: 900,
+    },
+  },
+};

package/cura/badges/cura-badge-counter/cura-badge-counter.component.html

@@ -0,0 +1,7 @@
+@if (shouldShow()) {
+  <div [class]="containerClasses()">
+    <cura-label size="xsmall" lineHeight="none" [color]="labelColor()">
+      {{ displayText() }}
+    </cura-label>
+  </div>
+}

package/cura/badges/cura-badge-counter/cura-badge-counter.component.scss

@@ -0,0 +1,41 @@
+@use '../../scss/mixins/spacing.scss' as spacing;
+
+:host {
+  width: fit-content;
+  display: inline-block;
+  height: #{spacing.$spacing-xxs};
+  position: relative;
+
+  .container {
+    display: flex;
+    min-width: #{spacing.$spacing-xxs};
+    width: fit-content;
+    height: #{spacing.$spacing-xxs};
+    justify-content: center;
+    align-items: center;
+    border-radius: calc(#{spacing.$spacing-xxs} / 2);
+    background: var(--background-color);
+    box-sizing: border-box;
+    padding: 0 #{spacing.$spacing-tiny};
+    position: relative;
+
+    &.outline,
+    &.transparent {
+      background: transparent !important;
+    }
+
+    &.outline {
+      &::before {
+        content: '';
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        box-sizing: border-box;
+        border: 1px solid var(--background-color);
+        border-radius: calc(#{spacing.$spacing-xxs} / 2);
+      }
+    }
+  }
+}

package/cura/badges/cura-badge-counter/cura-badge-counter.component.ts

@@ -0,0 +1,94 @@
+import { Component, inject, input, computed } from '@angular/core';
+import { CuraApiService } from '@rededor/site-front-end-lib/cura/api';
+import { CuraLabelComponent } from '@rededor/site-front-end-lib/cura/forms/cura-label';
+import { BadgeType } from '@rededor/site-front-end-lib/cura/badges';
+
+@Component({
+  selector: 'cura-badge-counter',
+  imports: [CuraLabelComponent],
+  templateUrl: './cura-badge-counter.component.html',
+  styleUrls: ['./cura-badge-counter.component.scss'],
+  host: {
+    '[style.--base-spacing]': 'baseSpacing()',
+    '[style.--background-color]': 'colorStyles().backgroundColor',
+  },
+})
+export class CuraBadgeCounterComponent {
+  private curaApi = inject(CuraApiService);
+
+  /**
+   * Número a ser representado no badge.
+   * Apresentará 99+ para números acima desse valor.
+   */
+  number = input<number | null>(null);
+
+  /**
+   * Cor fundamental do design system sem profundidade.
+   * Ex.: primary (padrão)
+   */
+  color = input<string>('primary');
+
+  /**
+   * Define o estado do badge como desabilitado ou habilitado.
+   */
+  disabled = input<boolean>(false);
+
+  /**
+   * Define o estilo visual entre solid (default), outline ou transparent.
+   */
+  type = input<BadgeType>('solid');
+
+  // Computed properties para cores e estilos
+  baseSpacing = computed(() => {
+    return this.curaApi.theme.spacing.getSpacing();
+  });
+
+  colorStyles = computed(() => {
+    const color = this.color().toLowerCase();
+    const type = this.type();
+    const disabled = this.disabled();
+
+    let bgColorName: string;
+    let labelColor: string;
+
+    // type outline and transparent
+    if (type === 'outline' || type === 'transparent') {
+      bgColorName = disabled ? 'neutral-medium' : `${color}-dark`;
+      labelColor = bgColorName;
+      // type solid - default
+    } else {
+      bgColorName = color === 'neutral' || disabled ? 'neutral-pale' : `${color}-lighter`;
+      labelColor = disabled ? 'neutral-medium' : `${color}-dark`;
+    }
+
+    return {
+      backgroundColor: this.curaApi.theme.colors.getColor(bgColorName),
+      labelColor,
+    };
+  });
+
+  private displayNumber = computed(() => {
+    const num = this.number();
+    if (num === null || (num && num <= 0)) return '';
+    return num >= 100 ? '99+' : num.toString();
+  });
+
+  containerClasses = computed(() => {
+    const classes = [];
+    classes.push('container');
+    classes.push(this.type().toLowerCase());
+    return classes.join(' ');
+  });
+
+  shouldShow = computed(() => {
+    return this.displayNumber() !== null;
+  });
+
+  displayText = computed(() => {
+    return this.displayNumber() || '';
+  });
+
+  labelColor = computed(() => {
+    return this.colorStyles().labelColor;
+  });
+}

package/cura/badges/cura-badge-counter/index.ts

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

package/cura/badges/cura-badge-counter/ng-package.json

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

package/cura/badges/cura-badge-counter/public-api.ts

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

package/cura/badges/cura-badge-distance/cura-badge-distance.component.html

@@ -0,0 +1,8 @@
+<div class="container">
+  <cura-label size="xsmall" weight="bold" color="neutral-black">
+    {{ displayDistance() }}
+  </cura-label>
+  <cura-label size="xsmall" weight="bold" color="neutral-dark">
+    {{ label() }}
+  </cura-label>
+</div>

package/cura/badges/cura-badge-distance/cura-badge-distance.component.scss

@@ -0,0 +1,16 @@
+@use '../../scss/mixins/spacing.scss' as spacing;
+
+:host {
+  display: inline-block;
+
+  .container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: calc(#{spacing.$base-spacing} * 10px);
+    height: calc(#{spacing.$base-spacing} * 10px);
+    border-radius: calc(#{spacing.$base-spacing} * 1px);
+    background: var(--neutral-pale);
+  }
+}

package/cura/badges/cura-badge-distance/cura-badge-distance.component.ts

@@ -0,0 +1,53 @@
+import { Component, inject, input, computed } from '@angular/core';
+import { CuraApiService } from '@rededor/site-front-end-lib/cura/api';
+import { CuraLabelComponent } from '@rededor/site-front-end-lib/cura/forms/cura-label';
+
+@Component({
+  selector: 'cura-badge-distance',
+  imports: [CuraLabelComponent],
+  templateUrl: './cura-badge-distance.component.html',
+  styleUrls: ['./cura-badge-distance.component.scss'],
+  host: {
+    '[style.--neutral-pale]': 'neutralPale()',
+    '[style.--base-spacing]': 'baseSpacing()',
+  },
+})
+export class CuraBadgeDistanceComponent {
+  private curaApi = inject(CuraApiService);
+
+  /**
+   * Distance value to display
+   */
+  distance = input<number>(0);
+
+  /**
+   * Label for the distance unit
+   */
+  label = input<string>('km');
+
+  // Computed signals
+  private formattedDistance = computed(() => {
+    const distanceValue = this.distance();
+    const roundedDistance = distanceValue % 1 !== 0 ? parseFloat(distanceValue.toFixed(1)) : distanceValue;
+    const isThousandRounded = Math.abs(roundedDistance) >= 1000;
+    const displayDistance = isThousandRounded ? parseFloat((roundedDistance / 1000).toFixed(1)) : roundedDistance;
+
+    return {
+      value: displayDistance,
+      isThousandRounded,
+      displayText: `${displayDistance}${isThousandRounded ? 'K' : ''}`,
+    };
+  });
+
+  neutralPale = computed(() => {
+    return this.curaApi.theme.colors.getColor('neutral-pale');
+  });
+
+  baseSpacing = computed(() => {
+    return this.curaApi.theme.spacing.getSpacing();
+  });
+
+  displayDistance = computed(() => {
+    return this.formattedDistance().displayText;
+  });
+}

package/cura/badges/cura-badge-distance/index.ts

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

package/cura/badges/cura-badge-distance/ng-package.json

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

package/cura/badges/cura-badge-distance/public-api.ts

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

package/cura/badges/cura-badge-dot/cura-badge-dot.component.html

@@ -0,0 +1 @@
+<div [class]="containerClasses()"></div>

package/cura/badges/cura-badge-dot/cura-badge-dot.component.scss

@@ -0,0 +1,50 @@
+@use '../../scss/mixins/spacing.scss' as spacing;
+
+:host {
+  display: block;
+  position: relative;
+  width: fit-content;
+  height: fit-content;
+
+  .container {
+    width: #{spacing.$spacing-mini};
+    height: #{spacing.$spacing-mini};
+    position: relative;
+    box-sizing: border-box;
+
+    &::before {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      content: '';
+      box-sizing: border-box;
+      border-radius: 50%;
+      border: 1px solid var(--color-dark);
+      background: var(--color);
+    }
+
+    &.disabled::before {
+      background: var(--neutral-pale);
+      border: 1px solid var(--neutral-medium);
+    }
+
+    &.outline::before {
+      background: transparent;
+      border: 2px solid var(--color);
+    }
+    &.outline.disabled::before {
+      border: 2px solid var(--neutral-medium);
+    }
+
+    &.transparent::before {
+      background: var(--color-dark);
+      border: none;
+    }
+    &.transparent.disabled::before {
+      background: var(--neutral-medium);
+      border: none;
+    }
+  }
+}

package/cura/badges/cura-badge-dot/cura-badge-dot.component.ts

@@ -0,0 +1,69 @@
+import { Component, inject, input, computed } from '@angular/core';
+import { CuraApiService } from '@rededor/site-front-end-lib/cura/api';
+import { BadgeType } from '@rededor/site-front-end-lib/cura/badges';
+
+@Component({
+  selector: 'cura-badge-dot',
+  imports: [],
+  templateUrl: './cura-badge-dot.component.html',
+  styleUrls: ['./cura-badge-dot.component.scss'],
+  host: {
+    role: 'img',
+    '[style.--base-spacing]': 'baseSpacing()',
+    '[style.--neutral-medium]': 'neutralMedium()',
+    '[style.--neutral-pale]': 'neutralPale()',
+    '[style.--color]': 'colorValue()',
+    '[style.--color-dark]': 'colorDark()',
+  },
+})
+export class CuraBadgeDotComponent {
+  private curaApi = inject(CuraApiService);
+
+  /**
+   * Cor fundamental do design system sem profundidade.
+   * Ex.: primary (padrão)
+   */
+  color = input<string>('primary');
+
+  /**
+   * Define o estado do badge como desabilitado ou habilitado.
+   */
+  disabled = input<boolean>(false);
+
+  /**
+   * Define o estilo visual entre solid (default), outline ou transparent.
+   */
+  type = input<BadgeType>('solid');
+
+  // Computed signals
+  baseSpacing = computed(() => {
+    return this.curaApi.theme.spacing.getSpacing();
+  });
+
+  neutralMedium = computed(() => {
+    return this.curaApi.theme.colors.getColor('neutral-dark');
+  });
+
+  neutralPale = computed(() => {
+    return this.curaApi.theme.colors.getColor('neutral-pale');
+  });
+
+  colorValue = computed(() => {
+    return this.curaApi.theme.colors.getColor(this.color());
+  });
+
+  colorDark = computed(() => {
+    return this.curaApi.theme.colors.getColor(`${this.color()}-dark`);
+  });
+
+  containerClasses = computed(() => {
+    const classes = [];
+
+    classes.push('container');
+    classes.push(this.type());
+
+    if (this.disabled()) classes.push('disabled');
+
+    return classes.join(' ');
+  });
+}

package/cura/badges/cura-badge-dot/index.ts

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

package/cura/badges/cura-badge-dot/ng-package.json

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

package/cura/badges/cura-badge-dot/public-api.ts

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

package/cura/badges/cura-badge-pill/cura-badge-pill.component.html

@@ -0,0 +1,8 @@
+<div [class]="containerClasses()">
+  @if (iconName()) {
+    <cura-icon [name]="iconName()" [iconset]="iconset()" size="micro" [color]="symbolColor()"> </cura-icon>
+  }
+  <cura-label size="xsmall" lineHeight="117%" [color]="symbolColor()">
+    <ng-content></ng-content>
+  </cura-label>
+</div>