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

package/cura/loaders/cura-loader-bar/cura-loader-bar.component.scss

@@ -1,23 +0,0 @@
-:host {
-  display: block;
-
-  .progress-bar {
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    width: 100%;
-    height: 4px;
-    background-color: var(--neutral-base);
-
-    .progress-bar-fill {
-      position: absolute;
-      left: 0;
-      bottom: 0;
-      width: var(--bar-width);
-      height: 100%;
-      border-radius: 0 2px 2px 0;
-      background-color: var(--color-base);
-      transition: width 0.2s linear;
-    }
-  }
-}

package/cura/loaders/cura-loader-bar/cura-loader-bar.component.ts

@@ -1,37 +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';
-
-@Component({
-  selector: 'cura-loader-bar',
-  imports: [CommonModule],
-  templateUrl: './cura-loader-bar.component.html',
-  styleUrls: ['./cura-loader-bar.component.scss'],
-  host: {
-    role: 'progressbar',
-    '[attr.aria-valuenow]': 'progress()',
-    '[attr.aria-valuemin]': '0',
-    '[attr.aria-valuemax]': '100',
-  },
-})
-export class CuraLoaderBarComponent {
-  private curaApi = inject(CuraApiService);
-
-  /**
-   * One from color scheme. Default: primary-base.
-   */
-  color = input<string>('primary-base');
-
-  /**
-   * Progress percentage (0-100).
-   */
-  progress = input<number>(0);
-
-  loaderStyles = computed(() => {
-    return {
-      '--neutral-base': this.curaApi.theme.colors.getColor('neutral-base', 0.2),
-      '--color-base': this.curaApi.theme.colors.getColor(this.color()),
-      '--bar-width': `${this.progress()}%`,
-    };
-  });
-}

package/cura/loaders/cura-loader-bar/index.ts

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

package/cura/loaders/cura-loader-bar/ng-package.json

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

package/cura/loaders/cura-loader-bar/public-api.ts

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

package/cura/loaders/cura-loader-circle/cura-loader-circle.component.html

@@ -1,12 +0,0 @@
-<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <g>
-    <circle cx="8" cy="8" r="7" stroke="url(#paint0_linear_13485_11488)" stroke-width="2" />
-    <path d="M1 8C1 4.13401 4.11877 1 7.96596 1C9.53445 1 10.9819 1.52093 12.1462 2.4C12.8959 2.96601 13.5282 3.68049 14 4.5" stroke-width="2" />
-  </g>
-  <defs>
-    <linearGradient id="paint0_linear_13485_11488" x1="15.7" y1="4.5" x2="4.15" y2="11.5" gradientUnits="userSpaceOnUse">
-      <stop />
-      <stop offset="1" />
-    </linearGradient>
-  </defs>
-</svg>

package/cura/loaders/cura-loader-circle/cura-loader-circle.component.scss

@@ -1,39 +0,0 @@
-:host {
-  display: inline-block;
-  width: var(--size);
-  height: var(--size);
-
-  svg {
-    width: var(--size);
-    height: var(--size);
-    animation: rotate 0.7s linear infinite;
-  }
-
-  circle,
-  path {
-    stroke-miterlimit: 10;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-  }
-
-  path {
-    stroke: var(--color);
-  }
-
-  stop {
-    stop-color: var(--color);
-  }
-
-  linearGradient stop:first-child {
-    stop-opacity: 0.14;
-  }
-}
-
-@keyframes rotate {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

package/cura/loaders/cura-loader-circle/cura-loader-circle.component.ts

@@ -1,45 +0,0 @@
-import { Component, inject, input, computed } from '@angular/core';
-import { CuraApiService } from '@rededor/site-front-end-lib/cura/api';
-
-export type LoaderSize = 'small' | 'medium' | 'large' | 'xlarge';
-
-@Component({
-  selector: 'cura-loader-circle',
-  templateUrl: './cura-loader-circle.component.html',
-  styleUrls: ['./cura-loader-circle.component.scss'],
-  host: {
-    role: 'progressbar',
-    '[style.--size]': 'loaderStyles().size',
-    '[style.--color]': 'loaderStyles().color',
-  },
-})
-export class CuraLoaderCircleComponent {
-  private curaApi = inject(CuraApiService);
-
-  /**
-   * Loader size. Values: small, medium, large or xlarge.
-   */
-  size = input<LoaderSize>('medium');
-
-  /**
-   * One from color scheme. Default: neutral-white.
-   */
-  color = input<string>('neutral-white');
-
-  private sizes = {
-    xlarge: 32,
-    large: 24,
-    medium: 20,
-    small: 16,
-    default: 16,
-  };
-
-  // Computed signal
-  loaderStyles = computed(() => {
-    const pxSize = this.sizes[this.size()] || this.sizes['default'];
-    return {
-      size: `${pxSize}px`,
-      color: this.curaApi.theme.colors.getColor(this.color()),
-    };
-  });
-}

package/cura/loaders/cura-loader-circle/index.ts

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

package/cura/loaders/cura-loader-circle/ng-package.json

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

package/cura/loaders/cura-loader-circle/public-api.ts

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

package/cura/scss/mixins/buttons.scss

@@ -1,244 +0,0 @@
-/**
- * Global Button Definitions.
- * Required CSS Properties:
- * --font-size
- * --base-spacing
- * --font-family
- * --font-weight-medium
- * --text-align
- */
-
-/**
- * Spacing sass vars
- */
-@use './spacing.scss' as spacing;
-
-/**
- * Buttons Host element definitions.
- * Use: @include button-host() { ... }
- */
-@mixin button-host {
-  --border-radius: 4px;
-  display: inline-block;
-  vertical-align: middle;
-  position: relative;
-  @content;
-}
-
-/**
- * Buttons base definitions.
- * Use: @include button-element() { ... }
- */
-@mixin button-element {
-  outline: none;
-  box-shadow: none;
-  box-sizing: border-box;
-  display: flex;
-  width: 100%;
-  align-items: center;
-  justify-content: center;
-  text-decoration: none !important;
-  font-size: var(--font-size);
-  cursor: pointer;
-  transition:
-    background-color 0.07s linear,
-    box-shadow 0.07s linear,
-    border-color 0.07s linear;
-  border-radius: var(--border-radius);
-
-  &:focus {
-    outline: 2px solid #6ea8ff;
-  }
-
-  position: relative;
-  @content;
-}
-
-/**
- * Button sizes definitions.
- * Use: @include button-sizes() { ... }
- */
-@mixin button-sizes {
-  &.large {
-    padding: #{spacing.$spacing-xxxs} #{spacing.$spacing-xxs};
-    min-height: calc(#{spacing.$base-spacing} * 11px);
-  }
-
-  &.medium {
-    padding: #{spacing.$spacing-xxxs};
-    min-height: calc(#{spacing.$base-spacing} * 10px);
-  }
-
-  &.small {
-    padding: #{spacing.$spacing-mini};
-    min-height: calc(#{spacing.$base-spacing} * 8px);
-  }
-
-  @content;
-}
-
-/**
- * Button container definitions.
- * Use: @include button-container() { ... }
- */
-@mixin button-container {
-  .button-container {
-    display: flex;
-    align-items: center;
-    opacity: 1;
-    transition: opacity 0.2s linear;
-    position: relative;
-    @content;
-  }
-
-  &.icon-right .button-container {
-    flex-direction: row-reverse;
-  }
-
-  &.justify .button-container {
-    width: 100%;
-  }
-}
-
-/**
- * Button label definitions.
- * Use: @include button-label() { ... }
- */
-@mixin button-label {
-  cura-label {
-    flex: 1;
-    text-align: var(--text-align, 'left');
-    @content;
-  }
-}
-
-/**
- * Button shadow definitions.
- * Use: @include button-label() { ... }
- */
-@mixin button-shadow-behavior {
-  $shadow-color: rgba(38, 38, 38, 0.16);
-
-  &:hover {
-    box-shadow: 0 4px 8px 0 #{$shadow-color};
-  }
-
-  &.medium:hover {
-    box-shadow: 0 3px 6px 0 #{$shadow-color};
-  }
-
-  &.small:hover {
-    box-shadow: 0 2px 5px 0 #{$shadow-color};
-  }
-
-  &:active,
-  &.disabled:hover,
-  &.isLoading:hover {
-    box-shadow: none !important;
-  }
-
-  @content;
-}
-
-/**
- * Button disabled state definitions
- * Use: @include button-disabled() { ... }
- */
-@mixin button-disabled {
-  &.disabled {
-    cursor: not-allowed;
-    @content;
-  }
-}
-
-/**
- * Button selected state definitions
- * Use: @include button-selected() { ... }
- */
-@mixin button-selected {
-  &.selected {
-    cursor: pointer;
-    @content;
-  }
-}
-
-/**
- * Button loading state definitions
- * Use: @include button-loading() { ... }
- */
-@mixin button-loading {
-  cura-loader-circle {
-    position: absolute;
-    display: none;
-  }
-
-  &.isLoading {
-    cursor: wait;
-
-    .button-container {
-      opacity: 0;
-    }
-
-    cura-loader-circle {
-      display: block;
-    }
-
-    @content;
-  }
-}
-
-/**
- * Button icon definitions
- * Use: @include button-icon() { ... }
- */
-@mixin button-icon {
-  &.icon-left cura-icon {
-    margin-right: #{spacing.$spacing-xxxs};
-  }
-
-  &.icon-right cura-icon {
-    margin-left: #{spacing.$spacing-xxxs};
-  }
-
-  &.medium,
-  &.small {
-    &.icon-left cura-icon {
-      margin-right: #{spacing.$spacing-mini};
-    }
-
-    &.icon-right cura-icon {
-      margin-left: #{spacing.$spacing-mini};
-    }
-  }
-
-  @content;
-}
-
-/**
- * Button icon only behavior definitions
- * Use: @include button-icon-only-behavior() { ... }
- */
-@mixin button-icon-only-behavior {
-  &.icon-only {
-    cura-label {
-      display: none;
-    }
-
-    cura-icon {
-      margin-left: 0 !important;
-      margin-right: 0 !important;
-    }
-
-    padding: #{spacing.$spacing-xxxs} #{spacing.$spacing-xxxs};
-
-    &.medium {
-      padding: #{spacing.$spacing-xxxs};
-    }
-
-    &.small {
-      padding: #{spacing.$spacing-mini};
-    }
-
-    @content;
-  }
-}