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

package/cura/scss/mixins/forms.scss

@@ -1,298 +0,0 @@
-// 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

@@ -1,69 +0,0 @@
-/* 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

@@ -1,71 +0,0 @@
-/**
- * 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

@@ -1,33 +0,0 @@
-/**
- * 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

@@ -1,11 +0,0 @@
-/**
- * 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

@@ -1,41 +0,0 @@
-<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

@@ -1,91 +0,0 @@
-@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

@@ -1,85 +0,0 @@
-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

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

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

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

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

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