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

package/cura/forms/cura-input-text/index.ts

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

package/cura/forms/cura-input-text/ng-package.json

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

package/cura/forms/cura-input-text/public-api.ts

@@ -0,0 +1,2 @@
+export * from './cura-input-text.component';
+export * from './cura-input-text.definitions';

package/cura/forms/cura-label/cura-label.component.html

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

package/cura/forms/cura-label/cura-label.component.scss

@@ -0,0 +1,68 @@
+:host {
+  display: block;
+  font-size: var(--cura-font-size); // var(--font-size-base);
+
+  p {
+    font-family: var(--cura-font-body); // var(--font-family);
+    font-size: 1.143em;
+    font-weight: 500; // var(--font-weight-medium);
+    color: var(--color-body);
+    line-height: var(--line-height);
+    margin-block: 0px; // var(--margin-block);
+    letter-spacing: 0.32px;
+
+    &.bold-weight {
+      font-weight: 700; // var(--font-weight-bold);
+    }
+
+    &.large {
+      font-size: 1.357em;
+      line-height: calc(var(--line-height) - 4%);
+      letter-spacing: 0px;
+    }
+
+    &.small {
+      font-size: 1em;
+      line-height: calc(var(--line-height) - 4%);
+      letter-spacing: 0.56px;
+    }
+
+    &.xsmall {
+      font-size: 0.857em;
+      line-height: calc(var(--line-height) - 17%);
+      letter-spacing: 0.72px;
+    }
+
+    &.textoverflow-single {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    // Estilos para elementos dentro do ng-content
+    ::ng-deep {
+      b,
+      strong,
+      u {
+        font-weight: 700; // var(--font-weight-bold);
+      }
+
+      a {
+        font-weight: 700; // var(--font-weight-bold);
+        color: rgba(var(--cura-color-accent-700)); // var(--color-link);
+        text-underline-offset: 10%;
+      }
+
+      u {
+        text-underline-offset: 10%;
+      }
+
+      abbr {
+        color: rgba(var(--cura-color-accent-700)); // var(--color-link);
+        text-decoration: underline dashed 1px rgba(var(--cura-color-accent-700)); // var(--color-link);
+        text-underline-offset: 10%;
+        cursor: default;
+      }
+    }
+  }
+}

package/cura/forms/cura-label/cura-label.component.ts

@@ -0,0 +1,93 @@
+import { Component, inject, input, computed } from '@angular/core';
+import { CuraApiService } from '@rededor/site-front-end-lib/cura/api';
+import { LabelSize, LabelWeight, TextOverflow } from '@rededor/site-front-end-lib/cura/forms';
+
+@Component({
+  selector: 'cura-label',
+  templateUrl: './cura-label.component.html',
+  styleUrls: ['./cura-label.component.scss'],
+  host: {
+    '[style.--line-height]': 'lineHeight()',
+    '[style.--color-body]': 'bodyColor()',
+  },
+  // '[style.--margin-block]': 'marginBlock()',
+  // '[style.--font-weight-medium]': 'weights().medium',
+  // '[style.--font-weight-bold]': 'weights().bold',
+  // '[style.--font-size-base]': 'fontSizeBase()',
+  // '[style.--font-family]': 'fontFamily()',
+  // '[style.--color-link]': 'linkColor()',
+})
+export class CuraLabelComponent {
+  private curaApi = inject(CuraApiService);
+
+  /**
+   * Set size of body text.
+   * Values: medium (default) | large | small | xsmall.
+   */
+  size = input<LabelSize>('medium');
+
+  /**
+   * Label font weight. It is possible to use regular HTML tags like <b> or <strong> as well.
+   * Values: regular (default) | bold.
+   */
+  weight = input<LabelWeight>('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'); // Desativado em nosso projeto, mas funcional no projeto cura.
+
+  /**
+   * 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 '0'
+   */
+  marginBlock = input<string>('0');
+
+  /**
+   * CSS line-height property values.
+   * Default to '125%'
+   */
+  lineHeight = input<string>('125%');
+
+  /**
+   * Apply text-overflow ellipsis definitions.
+   * Default to 'none'
+   */
+  textOverflow = input<TextOverflow>('none');
+
+  // Computed signals
+  // weights = computed(() => this.curaApi.theme.fonts.getWeights());
+  // fontSizeBase = computed(() => this.curaApi.theme.fonts.getSize());
+  // fontFamily = computed(() => this.curaApi.theme.fonts.getFamily('body'));
+
+  // linkColor = computed(() => {
+  //   return this.curaApi.theme.colors.getColor(this.spotColor());
+  // });
+
+  bodyColor = computed(() => {
+    if (this.color()) {
+      return this.curaApi.theme.colors.getColor(this.color());
+    }
+    return this.curaApi.theme.fonts.getColor() || this.curaApi.theme.colors.getColor('neutral-darker');
+  });
+
+  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(' ');
+  });
+}

package/cura/forms/cura-label/index.ts

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

package/cura/forms/cura-label/ng-package.json

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

package/cura/forms/cura-label/public-api.ts

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

package/cura/forms/cura-radio/cura-radio.component.html

@@ -0,0 +1,28 @@
+<div [class]="containerClasses()" [style]="styles()" (click)="handleClick()">
+  <div class="info">
+    <div class="label-wrapper">
+      <cura-label [textOverflow]="overflowLabel()" [class]="labelClasses()" [size]="labelSize()" [color]="labelColor()">
+        {{ label() }}
+      </cura-label>
+
+      @if (required()) {
+        <cura-paragraph lineHeight="0%" marginBlock="0" color="error-base"> * </cura-paragraph>
+      }
+    </div>
+
+    <cura-label [textOverflow]="overflowHelper()" [color]="messageColor()" size="xsmall" [class]="messageClasses()">
+      <ng-content></ng-content>
+    </cura-label>
+  </div>
+
+  <input
+    type="radio"
+    [class]="'radio ' + size().toLowerCase()"
+    [name]="name()"
+    [value]="value()"
+    [required]="required()"
+    [tabIndex]="ontabindex()"
+    [disabled]="disabled()"
+    [checked]="checked()"
+  />
+</div>

package/cura/forms/cura-radio/cura-radio.component.scss

@@ -0,0 +1,232 @@
+:host {
+  display: block;
+  box-sizing: border-box;
+  min-width: 0;
+
+  .container {
+    display: flex;
+    align-items: center;
+    flex-direction: row-reverse;
+    justify-content: start;
+    gap: var(--gap);
+    cursor: pointer;
+  }
+
+  .position {
+    &.container {
+      flex-direction: row;
+    }
+
+    .label-wrapper {
+      justify-content: end;
+    }
+
+    .message {
+      text-align: right;
+    }
+
+    .label {
+      order: 1;
+    }
+  }
+
+  .info {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .label-wrapper {
+    display: flex;
+    justify-content: start;
+    align-items: center;
+    gap: 5px;
+  }
+
+  .control {
+    width: fit-content;
+    cursor: pointer;
+    position: relative;
+  }
+
+  .radio {
+    margin: 0;
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    border-radius: 50%;
+    border: 2px solid var(--primary-base-neutral-medium);
+    background: var(--neutral-purewhite);
+    box-sizing: border-box;
+    transition: border-color 0.3s;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    width: var(--size);
+    height: var(--size);
+    flex: 0 0 var(--size);
+
+    &::after {
+      content: '';
+      background: var(--color-base-light);
+      border-radius: 50%;
+      opacity: 0;
+      transition: opacity 0.3s;
+      width: var(--size-after);
+      height: var(--size-after);
+    }
+
+    &:focus {
+      border-color: var(--info-base) !important;
+    }
+  }
+
+  /* Estado Success */
+  .success .radio {
+    border-color: var(--success-base);
+    background: var(--success-lighter);
+
+    &:hover {
+      border-color: var(--success-base) !important;
+    }
+  }
+
+  .success.checked .radio {
+    border-color: var(--success-base);
+
+    &::after {
+      background: var(--success-base);
+    }
+
+    &:hover {
+      background: var(--success-lighter) !important;
+      border-color: var(--success-base) !important;
+
+      &::after {
+        background: var(--success-base) !important;
+      }
+    }
+  }
+
+  /* Estado Error */
+  .error .radio {
+    border-color: var(--error-base);
+    background: var(--error-lighter);
+
+    &:hover {
+      border-color: var(--error-base) !important;
+    }
+  }
+
+  .error.checked .radio {
+    border-color: var(--error-base);
+
+    &::after {
+      background: var(--error-base);
+    }
+
+    &:hover {
+      background: var(--error-lighter) !important;
+      border-color: var(--error-base) !important;
+
+      &::after {
+        background: var(--error-base) !important;
+      }
+    }
+  }
+
+  /* Estado checked */
+  .checked .radio::after {
+    opacity: 1;
+    background: var(--color-base);
+  }
+
+  .checked .radio {
+    border-color: var(--color-dark);
+  }
+
+  .checked .radio:hover {
+    border-color: var(--color-light) !important;
+  }
+
+  .checked .radio:hover::after {
+    background: var(--color-light);
+  }
+
+  /* Estado disabled */
+  .disabled .radio {
+    background: var(--primary-base-neutral-white);
+    border-color: var(--primary-darker-neutral-base);
+    cursor: not-allowed;
+  }
+
+  .disabled .radio::after {
+    background: var(--neutral-lighter);
+  }
+
+  .disabled.checked .radio {
+    border-color: var(--primary-base-neutral-base) !important;
+    background: var(--primary-darker-neutral-white) !important;
+  }
+
+  .disabled.checked .radio::after {
+    background: var(--primary-base-neutral-base) !important;
+  }
+
+  .label.textoverflow-single {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  .message.textoverflow-single {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  /* Estado hover para não disabled e não checked */
+  :not(.disabled):not(.checked) .radio:hover {
+    border-color: var(--primary-base-neutral-dark);
+  }
+
+  /* Square variant */
+  .square .radio {
+    border-radius: 0;
+
+    &::after {
+      border-radius: 0;
+      width: 70%;
+      height: 70%;
+    }
+  }
+
+  .square.error.checked .radio {
+    background: var(--error-base);
+    border-color: var(--error-base);
+
+    &:hover {
+      background: var(--error-base) !important;
+      border-color: var(--error-base) !important;
+
+      &::after {
+        opacity: 0;
+      }
+    }
+  }
+
+  .square.disabled.checked .radio {
+    background: var(--primary-base-neutral-base) !important;
+    border-color: var(--primary-base-neutral-base) !important;
+
+    &::after {
+      opacity: 0 !important;
+    }
+  }
+}