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

package/cura/scss/mixins/forms.scss

@@ -0,0 +1,298 @@
+// Label Styles
+@mixin cura-label {
+  cura-label {
+    margin-bottom: 8px;
+    @content;
+  }
+}
+
+// Helper Text Styles
+@mixin helper-text() {
+  .helper-text {
+    margin-top: 8px;
+    color: var(--neutral-dark);
+    @content;
+  }
+}
+
+// Input Field Styles
+@mixin cura-input-field($height: 40px, $font-size: 14px) {
+  .cura-input-field {
+    width: 100%;
+    height: $height;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    background-color: var(--neutral-purewhite);
+    border: 2px solid var(--neutral-medium);
+    border-radius: var(--border-radius, 4px);
+    color: var(--primary-base);
+    letter-spacing: 0.32px;
+    line-height: 20px;
+    overflow: hidden;
+    box-sizing: border-box;
+
+    input {
+      flex: 1;
+      width: 100%;
+      height: 100%;
+      background: transparent;
+      border: none;
+      outline: none;
+      color: var(--neutral-dark);
+      font-family: var(--font-family);
+      font-weight: var(--font-weight-medium);
+      font-size: $font-size;
+      box-sizing: border-box;
+      padding: 0px 12px 0px 8px;
+      &::placeholder {
+        color: var(--neutral-dark);
+      }
+    }
+
+    .feedback-icon {
+      padding-left: 12px;
+    }
+
+    @content;
+  }
+}
+
+// Input Hover State
+@mixin cura-forms-hover {
+  &:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) {
+    .cura-input-field {
+      border-color: var(--neutral-dark);
+
+      input {
+        color: var(--neutral-dark);
+
+        &::placeholder {
+          color: var(--neutral-dark);
+        }
+      }
+    }
+
+    @content;
+  }
+}
+
+// Focused State
+@mixin cura-forms-focused {
+  &:focus-within:not(.selection) {
+    .cura-input-field {
+      border: 2px solid var(--info-base) !important;
+      background-color: var(--neutral-purewhite);
+      outline: none;
+
+      input {
+        color: var(--neutral-black) !important;
+      }
+    }
+
+    @content;
+  }
+
+  &:focus-within.selection {
+    .cura-input-field {
+      border-radius: var(--border-radius) var(--border-radius) 0px 0px;
+    }
+
+    @content;
+  }
+}
+
+/// Success State
+@mixin cura-forms-success {
+  &.success {
+    @include cura-input-field() {
+      input {
+        color: var(--success-darker) !important;
+      }
+
+      input::placeholder {
+        color: var(--success-darker) !important;
+      }
+    }
+
+    &:not(.transparent) {
+      @include cura-input-field() {
+        border: 2px solid var(--success-dark) !important;
+        background-color: var(--success-lighter) !important;
+      }
+    }
+  }
+}
+
+// Error State
+@mixin cura-forms-error {
+  &.error {
+    @include cura-input-field() {
+      input {
+        color: var(--error-darker) !important;
+      }
+
+      input::placeholder {
+        color: var(--error-darker) !important;
+      }
+    }
+
+    &:not(.transparent) {
+      @include cura-input-field() {
+        border: 2px solid var(--error-dark) !important;
+        background-color: var(--error-lighter) !important;
+      }
+    }
+  }
+}
+
+// Loading State
+@mixin cura-forms-loading {
+  &.isLoading {
+    cursor: wait;
+
+    @include cura-input-field() {
+      background-color: var(--neutral-white) !important;
+      border: 2px solid var(--primary-base) !important;
+
+      input {
+        cursor: wait;
+        color: var(--primary-base) !important;
+      }
+
+      input::placeholder {
+        color: var(--primary-base) !important;
+      }
+    }
+
+    @content;
+  }
+}
+
+// Disabled State
+@mixin cura-forms-disabled {
+  &.disabled .cura-input-field {
+    background-color: var(--neutral-white);
+    border: 2px solid var(--neutral-base);
+
+    input {
+      color: var(--neutral-medium);
+    }
+
+    input::placeholder {
+      color: var(--neutral-medium);
+    }
+  }
+}
+
+// ReadOnly State
+@mixin cura-forms-readonly {
+  &.readOnly[read-only] {
+    .cura-input-field {
+      cursor: default;
+
+      input {
+        cursor: default;
+      }
+    }
+
+    @content;
+  }
+}
+
+// Transparent Mode
+@mixin cura-input-transparent {
+  &.transparent {
+    background-color: transparent;
+    padding: 0px;
+    max-height: 80px;
+
+    @include cura-input-field() {
+      background-color: transparent !important;
+      border: none !important;
+      border-radius: 0;
+      height: 27px;
+
+      input {
+        color: var(--neutral-black) !important;
+        font-size: 16px;
+        font-weight: var(--font-weight-bold) !important;
+        padding: 0;
+      }
+
+      input::placeholder {
+        color: var(--neutral-black);
+      }
+
+      .feedback-icon {
+        order: 3;
+        margin: 0 20px 0 0;
+      }
+    }
+
+    &:focus-within {
+      .cura-input-field {
+        border: none !important;
+        background-color: transparent !important;
+
+        input {
+          border: none !important;
+          outline: none;
+        }
+      }
+    }
+
+    .helper-text {
+      margin-top: 0px;
+    }
+
+    @content;
+  }
+}
+
+// Size Variants
+@mixin cura-forms-small {
+  &.small {
+    @include cura-input-field(32px, 12px) {
+      input {
+        line-height: 13px;
+        letter-spacing: 0.72px;
+      }
+    }
+
+    @include helper-text() {
+      font-weight: var(--font-weight-regular);
+    }
+
+    @content;
+  }
+}
+
+@mixin cura-forms-medium {
+  &.medium {
+    @include cura-input-field(40px, 14px) {
+      input {
+        line-height: 16px;
+        letter-spacing: 0.56px;
+      }
+    }
+
+    @include helper-text() {
+      font-weight: var(--font-weight-regular);
+    }
+
+    @content;
+  }
+}
+
+@mixin cura-forms-large {
+  &.large {
+    @include cura-input-field(44px, 16px);
+
+    @include helper-text() {
+      font-weight: var(--font-weight-bold);
+    }
+
+    @content;
+  }
+}

package/cura/scss/mixins/responsive.scss

@@ -0,0 +1,69 @@
+/* Breakpoints variables */
+$breakpoint-xsmall: 480px;
+$breakpoint-small-min: 481px;
+$breakpoint-small-max: 768px;
+$breakpoint-medium-min: 769px;
+$breakpoint-medium-max: 992px;
+$breakpoint-large-min: 993px;
+$breakpoint-large-max: 1920px;
+$breakpoint-xlarge-min: 1921px;
+
+/**
+* Responsive media for mobile (small) only.
+* Use: @include mobile-only() { ... }
+*/
+@mixin mobile-only {
+  @media (max-width: $breakpoint-small-max) {
+    @content;
+  }
+}
+
+/**
+* Responsive media for medium only.
+* Use: @include medium-only() { ... }
+*/
+@mixin medium-only {
+  @media (min-width: $breakpoint-medium-min) and (max-width: $breakpoint-medium-max) {
+    @content;
+  }
+}
+
+/**
+* Responsive media for large only.
+* Use: @include large-only() { ... }
+*/
+@mixin large-only {
+  @media (min-width: $breakpoint-large-min) and (max-width: $breakpoint-large-max) {
+    @content;
+  }
+}
+
+/**
+* Responsive media for xlarge only.
+* Use: @include xlarge-only() { ... }
+*/
+@mixin xlarge-only {
+  @media (min-width: $breakpoint-xlarge-min) {
+    @content;
+  }
+}
+
+/**
+* Responsive media for medium to large.
+* Use: @include medium-large() { ... }
+*/
+@mixin medium-large {
+  @media (min-width: $breakpoint-medium-min) and (max-width: $breakpoint-large-max) {
+    @content;
+  }
+}
+
+/**
+* Responsive media for large and up.
+* Use: @include large-up() { ... }
+*/
+@mixin large-up {
+  @media (min-width: ($breakpoint-large-min)) {
+    @content;
+  }
+}

package/cura/scss/mixins/shadows.scss

@@ -0,0 +1,71 @@
+/**
+ * Global Shadow Level Definitions.
+ * Required CSS Properties with respective opacities:
+ * --neutral-black,
+ * --neutral-purewhite,
+ * --accent-base
+ * --primary-base
+ */
+
+/**
+ * Shadow Level base definitions.
+ * Required CSS Properties: --neutral-purewhite opacity: 0.2
+ * Use: @include shadow-level1(){ ... }
+ */
+@mixin shadow-level1() {
+  box-shadow: 0px 0px 0px 0px var(--neutral-purewhite-shadow, rgba(255, 255, 255, 0.2));
+}
+
+/**
+ * Shadow Level base definitions.
+ * Required CSS Properties: --neutral-black opacity: 0.16
+ * Use: @include shadow-level2(--neutral-black-shadow){ ... }
+ */
+@mixin shadow-level2($neutral-black-shadow) {
+  box-shadow: 0px 1px 4px 0px var($neutral-black-shadow, rgba(38, 38, 38, 0.16));
+}
+
+/**
+ * Shadow Level base definitions.
+ * Required CSS Properties: --neutral-black opacity: 0.16
+ * Use: @include shadow-level3(--neutral-black-shadow){ ... }
+ */
+@mixin shadow-level3($neutral-black-shadow) {
+  box-shadow: 0px 4px 8px 0px var($neutral-black-shadow, rgba(38, 38, 38, 0.16));
+}
+
+/**
+ * Shadow Level base definitions.
+ * Required CSS Properties: --neutral-black opacity: 0.12
+ * Use: @include shadow-level4(){ ... }
+ */
+@mixin shadow-level4() {
+  box-shadow: 0px 8px 16px 0px var(--neutral-black-shadow-4, rgba(38, 38, 38, 0.12));
+}
+
+/**
+ * Shadow Level base definitions.
+ * Required CSS Properties: --neutral-black opacity: 0.8
+ * Use: @include shadow-level5(){ ... }
+ */
+@mixin shadow-level5() {
+  box-shadow: 0px 20px 32px 0px var(--neutral-black-shadow-5, rgba(38, 38, 38, 0.08));
+}
+
+/**
+ * Shadow Level base definitions.
+ * Required CSS Properties: --accent-base opacity: 0.2
+ * Use: @include shadow-level5-accent(){ ... }
+ */
+@mixin shadow-level5-accent() {
+  box-shadow: 0px 20px 32px 0px var(--accent-base-shadow, rgba(215, 114, 10, 0.2));
+}
+
+/**
+ * Shadow Level base definitions.
+ * Required CSS Properties: --primary-base opacity: 0.16
+ * Use: @include shadow-level3-primary(){ ... }
+ */
+@mixin shadow-level3-primary() {
+  box-shadow: 0px 4px 8px 0px var(--primary-base-shadow, rgba(0, 72, 144, 0.16));
+}

package/cura/scss/mixins/spacing.scss

@@ -0,0 +1,33 @@
+/**
+ * Global Spacing Definitions.
+ * Required CSS Properties from Cura:
+ * --cura-spacing-base
+ */
+
+$base-spacing: var(--cura-spacing-base);
+/* None: 0px */
+$spacing-none: 0px;
+/* Tiny default: 4px */
+$spacing-tiny: calc(#{$base-spacing} * 1px);
+/* Mini default: 8px */
+$spacing-mini: calc(#{$base-spacing} * 2px);
+/* XXXS default: 12px */
+$spacing-xxxs: calc(#{$base-spacing} * 3px);
+/* XXS default: 16px */
+$spacing-xxs: calc(#{$base-spacing} * 4px);
+/* XS default: 20px */
+$spacing-xs: calc(#{$base-spacing} * 5px);
+/* S default: 20px */
+$spacing-s: calc(#{$base-spacing} * 6px);
+/* M default: 32px */
+$spacing-m: calc(#{$base-spacing} * 8px);
+/* L default: 40px */
+$spacing-l: calc(#{$base-spacing} * 10px);
+/* XL default: 48px */
+$spacing-xl: calc(#{$base-spacing} * 12px);
+/* XXL default: 64px */
+$spacing-xxl: calc(#{$base-spacing} * 16px);
+/* XXXL default: 72px */
+$spacing-xxxl: calc(#{$base-spacing} * 18px);
+/* Huge default: 96px */
+$spacing-huge: calc(#{$base-spacing} * 24px);

package/cura/scss/mixins/text.scss

@@ -0,0 +1,11 @@
+/**
+ * Truncate text in single line
+ * Use: @include truncate-single() { ... }
+ */
+@mixin truncate-single {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  display: block;
+  @content;
+}

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

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

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

@@ -0,0 +1,91 @@
+@use '../../scss/mixins/responsive.scss' as responsive;
+
+:host {
+  display: block;
+  font-size: var(--font-size-base);
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: var(--font-family);
+    font-size: 3em;
+    font-weight: var(--font-weight-bold);
+    color: var(--color-body);
+    line-height: var(--line-height);
+    margin-block: var(--margin-block);
+    letter-spacing: 0px;
+
+    &.small {
+      font-size: 2.2857142857142856em;
+      letter-spacing: -1.68px;
+    }
+
+    // Equivalente ao ::slotted do Stencil
+    ::ng-deep {
+      b,
+      strong {
+        font-weight: var(--font-weight-bold);
+      }
+
+      a {
+        font-weight: var(--font-weight-bold);
+        color: var(--color-link);
+        text-underline-offset: 10%;
+        cursor: pointer;
+      }
+
+      u {
+        text-underline-offset: 10%;
+      }
+
+      i,
+      em {
+        font-style: italic;
+        font-weight: var(--font-weight-medium);
+      }
+
+      abbr {
+        color: var(--color-link);
+        text-decoration: underline dashed 1px var(--color-link);
+        text-underline-offset: 10%;
+        cursor: default;
+      }
+    }
+  }
+
+  @include responsive.medium-large() {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      font-size: 3.429em;
+
+      &.small {
+        font-size: 2.857142857142857em;
+        letter-spacing: -1.92px;
+      }
+    }
+  }
+
+  @include responsive.xlarge-only() {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      font-size: 4.286em;
+      line-height: calc(var(--line-height) + 5%);
+
+      &.small {
+        font-size: 3.5714285714285716em;
+        letter-spacing: -1.2px;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,85 @@
+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, DisplaySize } from '@rededor/site-front-end-lib/cura/texts';
+
+@Component({
+  selector: 'cura-display',
+  imports: [CommonModule],
+  templateUrl: './cura-display.component.html',
+  styleUrls: ['./cura-display.component.scss'],
+  host: {
+    role: 'heading',
+    '[attr.aria-level]': 'level()',
+    '[style.--margin-block]': 'displayStyles().marginBlock',
+    '[style.--font-size-base]': 'displayStyles().fontSizeBase',
+    '[style.--line-height]': 'displayStyles().lineHeight',
+  },
+})
+export class CuraDisplayComponent {
+  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);
+
+  /**
+   * Display size.
+   * Values: 'large' (default) | 'small'.
+   */
+  size = input<DisplaySize>('large');
+
+  /**
+   * 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 120%
+   */
+  lineHeight = input<string>('120%');
+
+  containerClasses = computed(() => {
+    return this.size().toLowerCase();
+  });
+
+  displayStyles = computed(() => {
+    return {
+      marginBlock: this.marginBlock(),
+      fontSizeBase: this.curaApi.theme.fonts.getSize(),
+      lineHeight: this.lineHeight(),
+    };
+  });
+
+  headingStyles = computed(() => {
+    const weights = this.curaApi.theme.fonts.getWeights();
+    const bodyColor = this.color()
+      ? this.curaApi.theme.colors.getColor(this.color())
+      : this.curaApi.theme.fonts.getColor() || this.curaApi.theme.colors.getColor('neutral-darker');
+
+    return {
+      '--font-family': this.curaApi.theme.fonts.getFamily('display'),
+      '--font-size': this.curaApi.theme.fonts.getSize(),
+      '--font-weight-bold': weights.bold,
+      '--font-weight-medium': weights.medium,
+      '--color-body': bodyColor,
+      '--color-link': this.curaApi.theme.colors.getColor(this.spotColor()),
+    };
+  });
+}

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

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

package/cura/texts/cura-display/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-display/public-api.ts

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