();
+
+ get iconClass(): string | null {
+ return this.icon() === 'check' ? 'pi-radio-button__icon--check' : null;
+ }
+
+ get isActiveClass(): string | null {
+ return this.isActive() ? 'is-active' : null;
+ }
+}
diff --git a/libs/ui/src/lib/ui/button/switch-button/switch-button.component.html b/libs/ui/src/lib/ui/button/switch-button/switch-button.component.html
index 71ac5d8..3652107 100644
--- a/libs/ui/src/lib/ui/button/switch-button/switch-button.component.html
+++ b/libs/ui/src/lib/ui/button/switch-button/switch-button.component.html
@@ -1,38 +1,38 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ content }}
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ content }}
+
diff --git a/libs/ui/src/lib/ui/button/switch-button/switch-button.component.scss b/libs/ui/src/lib/ui/button/switch-button/switch-button.component.scss
index c5a1733..bf1cc3b 100644
--- a/libs/ui/src/lib/ui/button/switch-button/switch-button.component.scss
+++ b/libs/ui/src/lib/ui/button/switch-button/switch-button.component.scss
@@ -1,133 +1,133 @@
-@mixin textColor($color: var(--pi-color-grey)) {
- div {
- span {
- color: $color;
- }
- }
-}
-
-:host {
- position: relative;
- &.has-icon {
- div {
- width: 6rem;
- border-radius: var(--pi-border-radius-large);
- span {
- width: 3rem;
- &::before {
- width: 3rem;
- border-radius: var(--pi-border-radius-large);
- }
- &.is-active {
- &::before {
- background-color: var(--pi-color-primary-200);
- }
- .mat-icon {
- color: var(--pi-color-white);
- opacity: 1;
- }
- }
- &:not(.is-active) {
- .mat-icon {
- color: var(--pi-color-primary);
- }
- }
- }
- .mat-icon {
- height: var(--pi-spacing-large);
- width: var(--pi-spacing-large);
- }
- }
- &.pi-button__large {
- .mat-icon {
- height: 1.75rem;
- width: 1.75rem;
- }
- }
- }
- &:not(.has-icon) {
- div {
- width: fit-content;
- padding: var(--pi-spacing-xxx-small);
- background-color: var(--pi-color-grey-25);
- border-radius: var(--pi-border-radius-medium);
-
- span {
- position: relative;
- padding: var(--pi-spacing-small) var(--pi-spacing-large);
- border-radius: var(--pi-border-radius-small);
- @include textColor();
- &::before {
- width: 100%;
- bottom: 0;
- left: 0;
- background-color: var(--pi-color-white);
- border-radius: var(--pi-border-radius-small);
- }
-
- &.is-active {
- span {
- font-weight: 400;
- }
- }
- &:not(.is-active) {
- span {
- font-weight: 300;
- }
- }
- }
- }
- // Text color
- // Primary
- &.pi-color__primary {
- @include textColor(var(--pi-color-primary));
- }
- // Highlighted
- &.pi-color__highlighted {
- @include textColor(var(--pi-color-highlighted));
- }
- // accent
- &.pi-color__accent {
- @include textColor(var(--pi-color-accent));
- }
- // Warn
- &.pi-color__warn {
- @include textColor(var(--pi-color-warn));
- }
- }
- div {
- display: flex;
- span {
- display: flex;
- justify-content: center;
- align-items: center;
- height: var(--pi-spacing-xxx-large);
- transition: all 0.3s cubic-bezier(0.77, 0, 0.125, 1) 0.0015s;
- will-change: opacity;
- &::before {
- content: '';
- position: absolute;
- z-index: -1;
- height: var(--pi-spacing-xxx-large);
- transition: all 0.3s cubic-bezier(0.77, 0, 0.125, 1) 0.0015s;
- box-shadow: var(--pi-box-shadow);
- }
-
- &.is-active {
- &::before {
- transform: translateX(0%);
- opacity: 1;
- }
- }
- &:not(.is-active) {
- &::before {
- transform: translateX(-100%);
- opacity: 0;
- }
- }
- &:hover {
- cursor: pointer;
- }
- }
- }
-}
+@mixin textColor($color: var(--pi-color-grey)) {
+ div {
+ span {
+ color: $color;
+ }
+ }
+}
+
+:host {
+ position: relative;
+ &.has-icon {
+ div {
+ width: 6rem;
+ border-radius: var(--pi-border-radius-large);
+ span {
+ width: 3rem;
+ &::before {
+ width: 3rem;
+ border-radius: var(--pi-border-radius-large);
+ }
+ &.is-active {
+ &::before {
+ background-color: var(--pi-color-primary-200);
+ }
+ .mat-icon {
+ color: var(--pi-color-white);
+ opacity: 1;
+ }
+ }
+ &:not(.is-active) {
+ .mat-icon {
+ color: var(--pi-color-primary);
+ }
+ }
+ }
+ .mat-icon {
+ height: var(--pi-spacing-large);
+ width: var(--pi-spacing-large);
+ }
+ }
+ &.pi-button__large {
+ .mat-icon {
+ height: 1.75rem;
+ width: 1.75rem;
+ }
+ }
+ }
+ &:not(.has-icon) {
+ div {
+ width: fit-content;
+ padding: var(--pi-spacing-xxx-small);
+ background-color: var(--pi-color-grey-25);
+ border-radius: var(--pi-border-radius-medium);
+
+ span {
+ position: relative;
+ padding: var(--pi-spacing-small) var(--pi-spacing-large);
+ border-radius: var(--pi-border-radius-small);
+ @include textColor();
+ &::before {
+ width: 100%;
+ bottom: 0;
+ left: 0;
+ background-color: var(--pi-color-white);
+ border-radius: var(--pi-border-radius-small);
+ }
+
+ &.is-active {
+ span {
+ font-weight: 400;
+ }
+ }
+ &:not(.is-active) {
+ span {
+ font-weight: 300;
+ }
+ }
+ }
+ }
+ // Text color
+ // Primary
+ &.pi-color__primary {
+ @include textColor(var(--pi-color-primary));
+ }
+ // Highlighted
+ &.pi-color__highlighted {
+ @include textColor(var(--pi-color-highlighted));
+ }
+ // accent
+ &.pi-color__accent {
+ @include textColor(var(--pi-color-accent));
+ }
+ // Warn
+ &.pi-color__warn {
+ @include textColor(var(--pi-color-warn));
+ }
+ }
+ div {
+ display: flex;
+ span {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: var(--pi-spacing-xxx-large);
+ transition: all 0.3s cubic-bezier(0.77, 0, 0.125, 1) 0.0015s;
+ will-change: opacity;
+ &::before {
+ content: '';
+ position: absolute;
+ z-index: -1;
+ height: var(--pi-spacing-xxx-large);
+ transition: all 0.3s cubic-bezier(0.77, 0, 0.125, 1) 0.0015s;
+ box-shadow: var(--pi-box-shadow);
+ }
+
+ &.is-active {
+ &::before {
+ transform: translateX(0%);
+ opacity: 1;
+ }
+ }
+ &:not(.is-active) {
+ &::before {
+ transform: translateX(-100%);
+ opacity: 0;
+ }
+ }
+ &:hover {
+ cursor: pointer;
+ }
+ }
+ }
+}
diff --git a/libs/ui/src/lib/ui/button/switch-button/switch-button.component.ts b/libs/ui/src/lib/ui/button/switch-button/switch-button.component.ts
index a1109a9..8d0487c 100644
--- a/libs/ui/src/lib/ui/button/switch-button/switch-button.component.ts
+++ b/libs/ui/src/lib/ui/button/switch-button/switch-button.component.ts
@@ -5,47 +5,47 @@ import {
input,
model,
output
-} from '@angular/core';
-import { ComponentFamilyClass } from '../../../styles';
+} from '@angular/core';
+import { ComponentFamilyClass } from '../../../styles';
import { PiBaseButtonComponent } from '../base-button.component';
import { NgTemplateOutlet } from '@angular/common';
-import { MatIcon } from '@angular/material/icon';
-
+import { MatIcon } from '@angular/material/icon';
+
@Component({
selector: 'pi-switch-button',
templateUrl: './switch-button.component.html',
styleUrls: ['./switch-button.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [NgTemplateOutlet, MatIcon],
-})
-export class PiSwitchButtonComponent extends PiBaseButtonComponent {
- @HostBinding('class') get classes(): string {
- const contentTypeClass = this.contentType() === 'icon' ? 'has-icon' : '';
- return [
- 'pi-switch-button',
- ComponentFamilyClass.Button,
- this.sizeClass,
- this.colorClass,
- contentTypeClass,
- ].join(' ');
- }
-
- readonly isActive = model(true);
- readonly toggledTo = output<'on' | 'off'>();
-
- readonly contentType = input<'icon' | 'text'>('icon');
+})
+export class PiSwitchButtonComponent extends PiBaseButtonComponent {
+ @HostBinding('class') get classes(): string {
+ const contentTypeClass = this.contentType() === 'icon' ? 'has-icon' : '';
+ return [
+ 'pi-switch-button',
+ ComponentFamilyClass.Button,
+ this.sizeClass,
+ this.colorClass,
+ contentTypeClass,
+ ].join(' ');
+ }
+
+ readonly isActive = model(true);
+ readonly toggledTo = output<'on' | 'off'>();
+
+ readonly contentType = input<'icon' | 'text'>('icon');
readonly content = input.required<[
string,
string
-]>();
-
- toggleSelected(): void {
- if (this.isActive()) {
- this.isActive.set(false);
- this.toggledTo.emit('off');
- } else {
- this.isActive.set(true);
- this.toggledTo.emit('on');
- }
- }
-}
+]>();
+
+ toggleSelected(): void {
+ if (this.isActive()) {
+ this.isActive.set(false);
+ this.toggledTo.emit('off');
+ } else {
+ this.isActive.set(true);
+ this.toggledTo.emit('on');
+ }
+ }
+}
diff --git a/libs/ui/src/lib/ui/button/switch-button/switch-button.directive.ts b/libs/ui/src/lib/ui/button/switch-button/switch-button.directive.ts
index 9a419c0..b2a62f8 100644
--- a/libs/ui/src/lib/ui/button/switch-button/switch-button.directive.ts
+++ b/libs/ui/src/lib/ui/button/switch-button/switch-button.directive.ts
@@ -1,23 +1,23 @@
-import { Directive, HostBinding } from '@angular/core';
-
-@Directive({ selector: 'pi-prefix-left', })
-export class PiSwitchButtonPrefixLeftDirective {
- @HostBinding('class') className = 'pi-switch-button__prefix--left';
-}
-
-@Directive({ selector: 'pi-suffix-left', })
-export class PiSwitchButtonSuffixLeftDirective {
- @HostBinding('class') className = 'pi-switch-button__suffix--left';
-}
-
-@Directive({ selector: 'pi-prefix-right', })
- export class PiSwitchButtonPrefixRightDirective {
- @HostBinding('class') className = 'pi-switch-button__prefix--right';
- }
-
- @Directive({ selector: 'pi-suffix-right', })
- export class PiSwitchButtonSuffixRightDirective {
- @HostBinding('class') className = 'pi-switch-button__suffix--right';
- }
-
-
+import { Directive, HostBinding } from '@angular/core';
+
+@Directive({ selector: 'pi-prefix-left', })
+export class PiSwitchButtonPrefixLeftDirective {
+ @HostBinding('class') className = 'pi-switch-button__prefix--left';
+}
+
+@Directive({ selector: 'pi-suffix-left', })
+export class PiSwitchButtonSuffixLeftDirective {
+ @HostBinding('class') className = 'pi-switch-button__suffix--left';
+}
+
+@Directive({ selector: 'pi-prefix-right', })
+ export class PiSwitchButtonPrefixRightDirective {
+ @HostBinding('class') className = 'pi-switch-button__prefix--right';
+ }
+
+ @Directive({ selector: 'pi-suffix-right', })
+ export class PiSwitchButtonSuffixRightDirective {
+ @HostBinding('class') className = 'pi-switch-button__suffix--right';
+ }
+
+
diff --git a/libs/ui/src/lib/ui/button/toggle-button/toggle-button.component.html b/libs/ui/src/lib/ui/button/toggle-button/toggle-button.component.html
index e04bcd4..243e8ff 100644
--- a/libs/ui/src/lib/ui/button/toggle-button/toggle-button.component.html
+++ b/libs/ui/src/lib/ui/button/toggle-button/toggle-button.component.html
@@ -1,9 +1,9 @@
-
-
-{{ amount() }}
+
+
+{{ amount() }}
diff --git a/libs/ui/src/lib/ui/button/toggle-button/toggle-button.component.scss b/libs/ui/src/lib/ui/button/toggle-button/toggle-button.component.scss
index de2c8ae..8717a25 100644
--- a/libs/ui/src/lib/ui/button/toggle-button/toggle-button.component.scss
+++ b/libs/ui/src/lib/ui/button/toggle-button/toggle-button.component.scss
@@ -1,166 +1,166 @@
-:host {
- display: flex;
- flex-direction: row-reverse;
- & > button {
- display: flex;
- justify-content: flex-start;
- align-items: center;
- height: 3.125rem;
- white-space: pre-line;
- text-align: left;
- color: var(--pi-color-primary);
- border-radius: var(--pi-border-radius-medium);
- -webkit-border-radius: var(--pi-border-radius-medium);
- -moz-border-radius: var(--pi-border-radius-medium);
- line-height: 125%;
- font: {
- weight: 300;
- }
- }
- & > span {
- position: absolute;
- display: flex;
- justify-content: center;
- align-items: center;
- height: 1.35rem;
- width: 1.35rem;
- transform: translateX(0.375rem);
- margin-top: -0.375rem;
- background-color: var(--pi-color-accent);
- border-radius: 50%;
- color: var(--pi-color-white);
- line-height: 1.35rem;
- small {
- font: {
- size: var(--pi-font-size-xx-small);
- }
- }
- }
- &:not(.is-active) {
- & > button {
- background-color: var(--pi-color-white);
- border: 1px solid var(--pi-color-primary-50);
- &:not(:disabled) {
- &:hover {
- cursor: pointer;
- transition: var(--pi-animation);
- .mat-icon {
- transform: scale(1.025);
- transition: var(--pi-animation);
- }
- }
- }
- }
- &:hover {
- & > button {
- &:not(:disabled) {
- background-color: var(--pi-color-primary-25);
- border: 1px solid var(--pi-color-primary-200);
- }
- }
- }
- }
- // Active
- &.is-active {
- & > button {
- background-color: var(--pi-color-primary-25);
- border: 1px solid var(--pi-color-primary-75);
- }
- }
- // Disabled
- &.is-disabled {
- & > button {
- opacity: 0.33;
- }
- }
-
- // Icon type
- // Stroke
- &.pi-toggle-button__icon--stroke {
- & > button {
- gap: var(--pi-spacing-xx-small);
- padding-left: var(--pi-spacing-x-small);
- padding-right: var(--pi-spacing-medium);
- font: {
- size: var(--pi-font-size-x-small);
- }
- & > .mat-icon {
- height: var(--pi-spacing-xx-large);
- width: var(--pi-spacing-xx-large);
- min-width: var(--pi-spacing-xx-large);
- padding: 0.3rem;
- border: 1px solid var(--pi-color-primary-200);
- border-radius: 50%;
- }
- }
- }
- // Icon type default
- &:not(.pi-toggle-button__icon--stroke) {
- & > button {
- gap: var(--pi-spacing-x-small);
- & > .mat-icon {
- height: var(--pi-spacing-large);
- width: var(--pi-spacing-large);
- }
- }
- }
-
- // Flex firection
- // Row reverse
- &.pi-button__flex-direction--row-reverse {
- & > button {
- flex-direction: row-reverse;
- justify-content: space-between;
- }
- }
-}
-
-html {
- // Mobile
- &.is-mobile {
- :host {
- // Stroke
- &.pi-toggle-button__icon--stroke {
- & > button {
- width: 10rem;
- }
- }
- }
- }
- // Mobile & Tablet
- &:not(.is-desktop) {
- :host {
- // Small device
- @media screen and (max-width: 62rem) {
- // Icon type default
- &:not(.pi-toggle-button__icon--stroke) {
- & > button {
- padding-left: var(--pi-spacing-small);
- padding-right: var(--pi-spacing-small);
- }
- }
- }
- }
- }
- // Tablet & Desktop
- &:not(.is-mobile) {
- :host {
- // Stroke
- &.pi-toggle-button__icon--stroke {
- & > button {
- width: 12rem;
- }
- }
- // Large device
- @media screen and (min-width: 62rem) {
- // Icon type default
- &:not(.pi-toggle-button__icon--stroke) {
- & > button {
- padding-left: var(--pi-spacing-large);
- padding-right: var(--pi-spacing-medium);
- }
- }
- }
- }
- }
-}
+:host {
+ display: flex;
+ flex-direction: row-reverse;
+ & > button {
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ height: 3.125rem;
+ white-space: pre-line;
+ text-align: left;
+ color: var(--pi-color-primary);
+ border-radius: var(--pi-border-radius-medium);
+ -webkit-border-radius: var(--pi-border-radius-medium);
+ -moz-border-radius: var(--pi-border-radius-medium);
+ line-height: 125%;
+ font: {
+ weight: 300;
+ }
+ }
+ & > span {
+ position: absolute;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 1.35rem;
+ width: 1.35rem;
+ transform: translateX(0.375rem);
+ margin-top: -0.375rem;
+ background-color: var(--pi-color-accent);
+ border-radius: 50%;
+ color: var(--pi-color-white);
+ line-height: 1.35rem;
+ small {
+ font: {
+ size: var(--pi-font-size-xx-small);
+ }
+ }
+ }
+ &:not(.is-active) {
+ & > button {
+ background-color: var(--pi-color-white);
+ border: 1px solid var(--pi-color-primary-50);
+ &:not(:disabled) {
+ &:hover {
+ cursor: pointer;
+ transition: var(--pi-animation);
+ .mat-icon {
+ transform: scale(1.025);
+ transition: var(--pi-animation);
+ }
+ }
+ }
+ }
+ &:hover {
+ & > button {
+ &:not(:disabled) {
+ background-color: var(--pi-color-primary-25);
+ border: 1px solid var(--pi-color-primary-200);
+ }
+ }
+ }
+ }
+ // Active
+ &.is-active {
+ & > button {
+ background-color: var(--pi-color-primary-25);
+ border: 1px solid var(--pi-color-primary-75);
+ }
+ }
+ // Disabled
+ &.is-disabled {
+ & > button {
+ opacity: 0.33;
+ }
+ }
+
+ // Icon type
+ // Stroke
+ &.pi-toggle-button__icon--stroke {
+ & > button {
+ gap: var(--pi-spacing-xx-small);
+ padding-left: var(--pi-spacing-x-small);
+ padding-right: var(--pi-spacing-medium);
+ font: {
+ size: var(--pi-font-size-x-small);
+ }
+ & > .mat-icon {
+ height: var(--pi-spacing-xx-large);
+ width: var(--pi-spacing-xx-large);
+ min-width: var(--pi-spacing-xx-large);
+ padding: 0.3rem;
+ border: 1px solid var(--pi-color-primary-200);
+ border-radius: 50%;
+ }
+ }
+ }
+ // Icon type default
+ &:not(.pi-toggle-button__icon--stroke) {
+ & > button {
+ gap: var(--pi-spacing-x-small);
+ & > .mat-icon {
+ height: var(--pi-spacing-large);
+ width: var(--pi-spacing-large);
+ }
+ }
+ }
+
+ // Flex firection
+ // Row reverse
+ &.pi-button__flex-direction--row-reverse {
+ & > button {
+ flex-direction: row-reverse;
+ justify-content: space-between;
+ }
+ }
+}
+
+html {
+ // Mobile
+ &.is-mobile {
+ :host {
+ // Stroke
+ &.pi-toggle-button__icon--stroke {
+ & > button {
+ width: 10rem;
+ }
+ }
+ }
+ }
+ // Mobile & Tablet
+ &:not(.is-desktop) {
+ :host {
+ // Small device
+ @media screen and (max-width: 62rem) {
+ // Icon type default
+ &:not(.pi-toggle-button__icon--stroke) {
+ & > button {
+ padding-left: var(--pi-spacing-small);
+ padding-right: var(--pi-spacing-small);
+ }
+ }
+ }
+ }
+ }
+ // Tablet & Desktop
+ &:not(.is-mobile) {
+ :host {
+ // Stroke
+ &.pi-toggle-button__icon--stroke {
+ & > button {
+ width: 12rem;
+ }
+ }
+ // Large device
+ @media screen and (min-width: 62rem) {
+ // Icon type default
+ &:not(.pi-toggle-button__icon--stroke) {
+ & > button {
+ padding-left: var(--pi-spacing-large);
+ padding-right: var(--pi-spacing-medium);
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/libs/ui/src/lib/ui/button/toggle-button/toggle-button.component.ts b/libs/ui/src/lib/ui/button/toggle-button/toggle-button.component.ts
index e8419a6..3a597f0 100644
--- a/libs/ui/src/lib/ui/button/toggle-button/toggle-button.component.ts
+++ b/libs/ui/src/lib/ui/button/toggle-button/toggle-button.component.ts
@@ -1,42 +1,42 @@
-import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core';
-import { buttonSize } from '../../../styles';
+import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core';
+import { buttonSize } from '../../../styles';
import { PiBaseButtonComponent } from '../base-button.component';
import { NgIf } from '@angular/common';
-import { MatIcon } from '@angular/material/icon';
-
+import { MatIcon } from '@angular/material/icon';
+
@Component({
selector: 'pi-toggle-button',
templateUrl: './toggle-button.component.html',
styleUrls: ['./toggle-button.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [NgIf, MatIcon],
-})
-export class PiToggleButtonComponent extends PiBaseButtonComponent {
- @HostBinding('class') get classes(): string {
- const isActiveClass = this.isActive() && 'is-active';
- const isDisabledClass = this.isDisabled() ? 'is-disabled' : '';
+})
+export class PiToggleButtonComponent extends PiBaseButtonComponent {
+ @HostBinding('class') get classes(): string {
+ const isActiveClass = this.isActive() && 'is-active';
+ const isDisabledClass = this.isDisabled() ? 'is-disabled' : '';
const iconType = this.iconType();
- const iconTypeClass = iconType !== 'default' && `pi-toggle-button__icon--${iconType}`;
- return [
- 'pi-toggle-button',
- this.sizeClass,
- this.flexDirectionClass,
- isActiveClass,
- isDisabledClass,
- iconTypeClass,
- ].join(' ');
- }
-
- // Content
- readonly icon = input();
- readonly text = input();
- readonly amount = input();
-
- // Skin
- readonly width = input('large');
- readonly iconType = input<'stroke' | 'default'>('stroke');
-
- // Status
- readonly isActive = input.required();
- readonly isDisabled = input.required();
-}
+ const iconTypeClass = iconType !== 'default' && `pi-toggle-button__icon--${iconType}`;
+ return [
+ 'pi-toggle-button',
+ this.sizeClass,
+ this.flexDirectionClass,
+ isActiveClass,
+ isDisabledClass,
+ iconTypeClass,
+ ].join(' ');
+ }
+
+ // Content
+ readonly icon = input();
+ readonly text = input();
+ readonly amount = input();
+
+ // Skin
+ readonly width = input('large');
+ readonly iconType = input<'stroke' | 'default'>('stroke');
+
+ // Status
+ readonly isActive = input.required();
+ readonly isDisabled = input.required();
+}
diff --git a/libs/ui/src/lib/ui/card/base-card.component.ts b/libs/ui/src/lib/ui/card/base-card.component.ts
index 5206a77..bea7ca7 100644
--- a/libs/ui/src/lib/ui/card/base-card.component.ts
+++ b/libs/ui/src/lib/ui/card/base-card.component.ts
@@ -1,106 +1,106 @@
-// Angular
-import { Directive, HostBinding, OnInit, input, output } from '@angular/core';
-
-// Style definitions
-import { alignment, context, gap, mode, opacity, padding } from '../../styles';
-
-@Directive()
-export abstract class PiBaseCardComponent implements OnInit {
- readonly hasShadow = input(true);
- readonly isClickable = input(false);
- readonly isStroked = input(false);
- readonly color = input<'primary' | 'accent' | 'highlighted' | 'grey' | 'white'>('white');
- readonly mode = input('light');
- readonly alignment = input.required();
- readonly gap = input.required();
- readonly padding = input('xxl');
- readonly linkLabel = input();
- readonly opacity = input();
- readonly innerPadding = input.required();
- readonly context = input.required();
- readonly hasEqualPadding = input(false);
- readonly hasPadding = input(true);
-
- readonly execute = output();
-
- ngOnInit(): void {
- this.colorClass;
- this.contextClass;
- this.gapClass;
- this.hasEqualPaddingClass;
- this.hasLinkLabelClass;
- this.hasShadowClass;
- this.isClickableClass;
- this.modeClass;
- this.opacityClass;
- this.isStrokedClass;
- }
-
- protected get hasShadowClass(): string | boolean | undefined {
- return this.hasShadow() && 'has-shadow';
- }
-
- protected get isClickableClass(): string | false | undefined {
- return this.isClickable() && 'is-clickable';
- }
-
- protected get colorClass(): string {
+// Angular
+import { Directive, HostBinding, OnInit, input, output } from '@angular/core';
+
+// Style definitions
+import { alignment, context, gap, mode, opacity, padding } from '../../styles';
+
+@Directive()
+export abstract class PiBaseCardComponent implements OnInit {
+ readonly hasShadow = input(true);
+ readonly isClickable = input(false);
+ readonly isStroked = input(false);
+ readonly color = input<'primary' | 'accent' | 'highlighted' | 'grey' | 'white'>('white');
+ readonly mode = input('light');
+ readonly alignment = input.required();
+ readonly gap = input.required();
+ readonly padding = input('xxl');
+ readonly linkLabel = input();
+ readonly opacity = input();
+ readonly innerPadding = input.required();
+ readonly context = input.required();
+ readonly hasEqualPadding = input(false);
+ readonly hasPadding = input(true);
+
+ readonly execute = output();
+
+ ngOnInit(): void {
+ this.colorClass;
+ this.contextClass;
+ this.gapClass;
+ this.hasEqualPaddingClass;
+ this.hasLinkLabelClass;
+ this.hasShadowClass;
+ this.isClickableClass;
+ this.modeClass;
+ this.opacityClass;
+ this.isStrokedClass;
+ }
+
+ protected get hasShadowClass(): string | boolean | undefined {
+ return this.hasShadow() && 'has-shadow';
+ }
+
+ protected get isClickableClass(): string | false | undefined {
+ return this.isClickable() && 'is-clickable';
+ }
+
+ protected get colorClass(): string {
const color = this.color();
- return color && `pi-color__${color}`;
- }
-
- protected get alignmentClass(): string | undefined {
+ return color && `pi-color__${color}`;
+ }
+
+ protected get alignmentClass(): string | undefined {
const alignmentValue = this.alignment();
- return alignmentValue && `pi-card__align-items--${alignmentValue}`;
- }
-
- protected get gapClass(): string | undefined {
+ return alignmentValue && `pi-card__align-items--${alignmentValue}`;
+ }
+
+ protected get gapClass(): string | undefined {
const gapValue = this.gap();
- return gapValue && `pi-card__gap--${gapValue}`;
- }
-
- protected get paddingClass(): string | undefined {
+ return gapValue && `pi-card__gap--${gapValue}`;
+ }
+
+ protected get paddingClass(): string | undefined {
const paddingValue = this.padding();
- return paddingValue && `pi-card__padding--${paddingValue}`;
- }
-
- protected get modeClass(): string | undefined {
+ return paddingValue && `pi-card__padding--${paddingValue}`;
+ }
+
+ protected get modeClass(): string | undefined {
const modeValue = this.mode();
- return modeValue ? `pi-color__mode--${modeValue}` : '';
- }
-
- protected get isStrokedClass(): string {
- return this.isStroked() ? 'is-stroked' : '';
- }
-
- protected get hasEqualPaddingClass(): string {
- return this.hasEqualPadding() ? 'has-equal-inner-padding' : '';
- }
-
- protected get hasLinkLabelClass(): string {
- return !!this.linkLabel() ? 'has-link-label' : '';
- }
-
- protected get opacityClass(): string {
+ return modeValue ? `pi-color__mode--${modeValue}` : '';
+ }
+
+ protected get isStrokedClass(): string {
+ return this.isStroked() ? 'is-stroked' : '';
+ }
+
+ protected get hasEqualPaddingClass(): string {
+ return this.hasEqualPadding() ? 'has-equal-inner-padding' : '';
+ }
+
+ protected get hasLinkLabelClass(): string {
+ return !!this.linkLabel() ? 'has-link-label' : '';
+ }
+
+ protected get opacityClass(): string {
const opacityValue = this.opacity();
- return opacityValue ? `pi-color__opacity--${opacityValue}` : '';
- }
-
- protected get innerPaddingClass(): string {
+ return opacityValue ? `pi-color__opacity--${opacityValue}` : '';
+ }
+
+ protected get innerPaddingClass(): string {
const innerPadding = this.innerPadding();
- return innerPadding ? `pi-card__inner-padding--${innerPadding}` : '';
- }
-
- protected get isContectPublicClass(): string | undefined {
- return this.context() === 'public' ? 'is-public' : '';
- }
-
- protected get hasPaddingClass(): string | undefined {
- return !this.padding() ? '' : 'has-padding';
- }
-
- protected get contextClass(): string | undefined {
+ return innerPadding ? `pi-card__inner-padding--${innerPadding}` : '';
+ }
+
+ protected get isContectPublicClass(): string | undefined {
+ return this.context() === 'public' ? 'is-public' : '';
+ }
+
+ protected get hasPaddingClass(): string | undefined {
+ return !this.padding() ? '' : 'has-padding';
+ }
+
+ protected get contextClass(): string | undefined {
const contextValue = this.context();
- return contextValue && `is-${contextValue}`;
- }
-}
+ return contextValue && `is-${contextValue}`;
+ }
+}
diff --git a/libs/ui/src/lib/ui/card/card/card.component.html b/libs/ui/src/lib/ui/card/card/card.component.html
index d75f529..6b1937e 100644
--- a/libs/ui/src/lib/ui/card/card/card.component.html
+++ b/libs/ui/src/lib/ui/card/card/card.component.html
@@ -1,13 +1,13 @@
-
-
-
-
-
-
-
-
-
- {{ linkLabel() }}
-
-
-
+
+
+
+
+
+
+
+
+
+ {{ linkLabel() }}
+
+
+
diff --git a/libs/ui/src/lib/ui/card/card/card.component.ts b/libs/ui/src/lib/ui/card/card/card.component.ts
index 7749c19..00b9760 100644
--- a/libs/ui/src/lib/ui/card/card/card.component.ts
+++ b/libs/ui/src/lib/ui/card/card/card.component.ts
@@ -1,35 +1,35 @@
-// Angular
-import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core';
-
-// Components
+// Angular
+import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core';
+
+// Components
import { PiBaseCardComponent } from '../base-card.component';
import { NgIf } from '@angular/common';
-import { PiIconComponent } from '../../icon/icon/icon.component';
-
+import { PiIconComponent } from '../../icon/icon/icon.component';
+
@Component({
selector: 'pi-card',
templateUrl: './card.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [NgIf, PiIconComponent],
-})
-export class PiCardComponent extends PiBaseCardComponent {
- @HostBinding('class') get classes(): string {
- return [
- 'pi-component',
- 'pi-card',
- this.isClickableClass,
- this.hasShadowClass,
- this.colorClass,
- this.alignmentClass,
- this.gapClass,
- this.modeClass,
- this.isStrokedClass,
- this.paddingClass,
- this.opacityClass,
- this.hasLinkLabelClass,
- this.innerPaddingClass,
- this.hasEqualPaddingClass,
- this.contextClass,
- ].join(' ');
- }
-}
+})
+export class PiCardComponent extends PiBaseCardComponent {
+ @HostBinding('class') get classes(): string {
+ return [
+ 'pi-component',
+ 'pi-card',
+ this.isClickableClass,
+ this.hasShadowClass,
+ this.colorClass,
+ this.alignmentClass,
+ this.gapClass,
+ this.modeClass,
+ this.isStrokedClass,
+ this.paddingClass,
+ this.opacityClass,
+ this.hasLinkLabelClass,
+ this.innerPaddingClass,
+ this.hasEqualPaddingClass,
+ this.contextClass,
+ ].join(' ');
+ }
+}
diff --git a/libs/ui/src/lib/ui/card/directives/card.directive.ts b/libs/ui/src/lib/ui/card/directives/card.directive.ts
index 32629b3..61f91ee 100644
--- a/libs/ui/src/lib/ui/card/directives/card.directive.ts
+++ b/libs/ui/src/lib/ui/card/directives/card.directive.ts
@@ -1,29 +1,29 @@
-import { Directive, HostBinding, Input } from '@angular/core';
-
+import { Directive, HostBinding, Input } from '@angular/core';
+
@Directive({
selector: 'pi-card-top-content',
host: {
class: 'pi-card-content pi-card-content__top',
},
-})
-export class PiCardTopContentDirective {}
-
-@Directive({ selector: 'pi-card-center-content', })
-export class PiCardCenterContentDirective {
- @HostBinding('class') className = 'pi-card-content pi-card-content__center';
-}
-
-@Directive({ selector: 'pi-card-bottom-content', })
-export class PiCardBottomContentDirective {
- @HostBinding('class') className = 'pi-card-content pi-card-content__bottom';
-}
-
-@Directive({ selector: 'pi-card-left-content', })
-export class PiCardLeftContentDirective {
- @HostBinding('class') className = 'pi-card-content pi-card-content__left';
-}
-
-@Directive({ selector: 'pi-card-right-content', })
-export class PiCardRightContentDirective {
- @HostBinding('class') className = 'pi-card-content pi-card-content__right';
-}
+})
+export class PiCardTopContentDirective {}
+
+@Directive({ selector: 'pi-card-center-content', })
+export class PiCardCenterContentDirective {
+ @HostBinding('class') className = 'pi-card-content pi-card-content__center';
+}
+
+@Directive({ selector: 'pi-card-bottom-content', })
+export class PiCardBottomContentDirective {
+ @HostBinding('class') className = 'pi-card-content pi-card-content__bottom';
+}
+
+@Directive({ selector: 'pi-card-left-content', })
+export class PiCardLeftContentDirective {
+ @HostBinding('class') className = 'pi-card-content pi-card-content__left';
+}
+
+@Directive({ selector: 'pi-card-right-content', })
+export class PiCardRightContentDirective {
+ @HostBinding('class') className = 'pi-card-content pi-card-content__right';
+}
diff --git a/libs/ui/src/lib/ui/card/index.ts b/libs/ui/src/lib/ui/card/index.ts
index e4b0a68..46f34db 100644
--- a/libs/ui/src/lib/ui/card/index.ts
+++ b/libs/ui/src/lib/ui/card/index.ts
@@ -1,5 +1,5 @@
-
-
-export * from './card/card.component';
-
-export * from './directives/card.directive';
+
+
+export * from './card/card.component';
+
+export * from './directives/card.directive';
diff --git a/libs/ui/src/lib/ui/carousel/carousel/carousel.component.html b/libs/ui/src/lib/ui/carousel/carousel/carousel.component.html
index 3d60d13..f739d05 100644
--- a/libs/ui/src/lib/ui/carousel/carousel/carousel.component.html
+++ b/libs/ui/src/lib/ui/carousel/carousel/carousel.component.html
@@ -1,31 +1,31 @@
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
diff --git a/libs/ui/src/lib/ui/carousel/carousel/carousel.component.scss b/libs/ui/src/lib/ui/carousel/carousel/carousel.component.scss
index 1fab24b..c79989f 100644
--- a/libs/ui/src/lib/ui/carousel/carousel/carousel.component.scss
+++ b/libs/ui/src/lib/ui/carousel/carousel/carousel.component.scss
@@ -1,144 +1,144 @@
-@mixin carouselFooter($color) {
- footer {
- display: flex;
- justify-content: center;
- gap: var(--pi-spacing-medium);
- margin-top: var(--pi-spacing-xxx-large);
-
- div {
- height: var(--pi-spacing-xx-small);
- width: var(--pi-spacing-xx-small);
- border-radius: var(--pi-border-radius-xx-small);
- &.is-active {
- background-color: var(--pi-color-#{$color}-200);
- }
- &:not(.is-active) {
- background-color: var(--pi-color-#{$color}-50);
- }
- }
- }
-}
-
-@mixin carouselJustifyContent($justify-content) {
- & > main {
- & > section {
- justify-content: $justify-content;
- }
- }
-}
-
-:host {
- // Common
- .pi-carousel__item {
- width: -webkit-fill-available;
- }
- // Type
- &.pi-carousel__linear,
- &.pi-carousel__symmetric {
- & > main {
- display: flex;
- align-items: center;
- justify-content: center;
- gap: var(--pi-spacing-small);
- &.pi-carousel__horizontal {
- flex-direction: row;
- & > section {
- flex-direction: row;
- padding: var(--pi-spacing-xx-large) var(--pi-spacing-large);
- }
- }
- &.pi-carousel__vertical {
- flex-direction: column;
- & > section {
- flex-direction: column;
- padding: 0 var(--pi-spacing-large);
- }
- }
-
- & > section {
- display: flex;
- align-items: stretch;
- flex: 1 1 0;
- overflow: hidden;
- transition: var(--pi-animation);
- .pi-carousel__item {
- user-select: none;
- transition: var(--pi-animation);
- overflow: hidden;
- &:not(:first-child):not(:last-child) {
- padding: 0 var(--pi-spacing-xx-small);
- }
- &:first-child {
- padding-right: var(--pi-spacing-xx-small);
- }
- &:last-child {
- padding-left: var(--pi-spacing-xx-small);
- }
- }
- }
- }
-
- &.is-draggable {
- .has-overflow {
- .pi-carousel__item {
- user-select: none;
- cursor: grab;
-
- &:active {
- cursor: grabbing;
- }
- }
- }
- &.pi-carousel__primary {
- @include carouselFooter(primary);
- }
- &.pi-carousel__accent {
- @include carouselFooter(accent);
- }
- &.pi-carousel__highlighted {
- @include carouselFooter(highlighted);
- }
- }
- }
- // Symetric
- &.pi-carousel__symmetric {
- .pi-carousel__item {
- &.is-active {
- z-index: 9;
- }
- &:not(.is-active) {
- opacity: 0.3;
- }
- }
- }
- // Justify
- // Center
- &.pi-carousel__justify-content--center {
- @include carouselJustifyContent(center);
- }
- // Flex Start
- &.pi-carousel__justify-content--flex-start {
- @include carouselJustifyContent(flex-start);
- }
- // Flex End
- &.pi-carousel__justify-content--flex-end {
- @include carouselJustifyContent(flex-end);
- }
- // Space Around
- &.pi-carousel__justify-content--space-around {
- @include carouselJustifyContent(space-around);
- }
- // Space Between
- &.pi-carousel__justify-content--space-between {
- @include carouselJustifyContent(space-between);
- }
- // Space Evenly
- &.pi-carousel__justify-content--space-evenly {
- & > main {
- justify-content: space-between;
- & > section {
- max-width: 80%;
- }
- }
- }
+@mixin carouselFooter($color) {
+ footer {
+ display: flex;
+ justify-content: center;
+ gap: var(--pi-spacing-medium);
+ margin-top: var(--pi-spacing-xxx-large);
+
+ div {
+ height: var(--pi-spacing-xx-small);
+ width: var(--pi-spacing-xx-small);
+ border-radius: var(--pi-border-radius-xx-small);
+ &.is-active {
+ background-color: var(--pi-color-#{$color}-200);
+ }
+ &:not(.is-active) {
+ background-color: var(--pi-color-#{$color}-50);
+ }
+ }
+ }
+}
+
+@mixin carouselJustifyContent($justify-content) {
+ & > main {
+ & > section {
+ justify-content: $justify-content;
+ }
+ }
+}
+
+:host {
+ // Common
+ .pi-carousel__item {
+ width: -webkit-fill-available;
+ }
+ // Type
+ &.pi-carousel__linear,
+ &.pi-carousel__symmetric {
+ & > main {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: var(--pi-spacing-small);
+ &.pi-carousel__horizontal {
+ flex-direction: row;
+ & > section {
+ flex-direction: row;
+ padding: var(--pi-spacing-xx-large) var(--pi-spacing-large);
+ }
+ }
+ &.pi-carousel__vertical {
+ flex-direction: column;
+ & > section {
+ flex-direction: column;
+ padding: 0 var(--pi-spacing-large);
+ }
+ }
+
+ & > section {
+ display: flex;
+ align-items: stretch;
+ flex: 1 1 0;
+ overflow: hidden;
+ transition: var(--pi-animation);
+ .pi-carousel__item {
+ user-select: none;
+ transition: var(--pi-animation);
+ overflow: hidden;
+ &:not(:first-child):not(:last-child) {
+ padding: 0 var(--pi-spacing-xx-small);
+ }
+ &:first-child {
+ padding-right: var(--pi-spacing-xx-small);
+ }
+ &:last-child {
+ padding-left: var(--pi-spacing-xx-small);
+ }
+ }
+ }
+ }
+
+ &.is-draggable {
+ .has-overflow {
+ .pi-carousel__item {
+ user-select: none;
+ cursor: grab;
+
+ &:active {
+ cursor: grabbing;
+ }
+ }
+ }
+ &.pi-carousel__primary {
+ @include carouselFooter(primary);
+ }
+ &.pi-carousel__accent {
+ @include carouselFooter(accent);
+ }
+ &.pi-carousel__highlighted {
+ @include carouselFooter(highlighted);
+ }
+ }
+ }
+ // Symetric
+ &.pi-carousel__symmetric {
+ .pi-carousel__item {
+ &.is-active {
+ z-index: 9;
+ }
+ &:not(.is-active) {
+ opacity: 0.3;
+ }
+ }
+ }
+ // Justify
+ // Center
+ &.pi-carousel__justify-content--center {
+ @include carouselJustifyContent(center);
+ }
+ // Flex Start
+ &.pi-carousel__justify-content--flex-start {
+ @include carouselJustifyContent(flex-start);
+ }
+ // Flex End
+ &.pi-carousel__justify-content--flex-end {
+ @include carouselJustifyContent(flex-end);
+ }
+ // Space Around
+ &.pi-carousel__justify-content--space-around {
+ @include carouselJustifyContent(space-around);
+ }
+ // Space Between
+ &.pi-carousel__justify-content--space-between {
+ @include carouselJustifyContent(space-between);
+ }
+ // Space Evenly
+ &.pi-carousel__justify-content--space-evenly {
+ & > main {
+ justify-content: space-between;
+ & > section {
+ max-width: 80%;
+ }
+ }
+ }
}
\ No newline at end of file
diff --git a/libs/ui/src/lib/ui/carousel/carousel/carousel.component.ts b/libs/ui/src/lib/ui/carousel/carousel/carousel.component.ts
index db215db..521abe0 100644
--- a/libs/ui/src/lib/ui/carousel/carousel/carousel.component.ts
+++ b/libs/ui/src/lib/ui/carousel/carousel/carousel.component.ts
@@ -1,536 +1,536 @@
-// Angular
-import {
- AfterViewChecked,
- AfterViewInit,
- ChangeDetectionStrategy,
- ChangeDetectorRef,
- Component,
- ElementRef,
- HostBinding,
- OnChanges,
- OnDestroy,
- OnInit,
- Renderer2,
- SimpleChanges,
- input,
- output,
- viewChild,
- contentChildren
-} from '@angular/core';
-
-// Shared
-import { ComponentFamilyClass, justify, theming } from '../../../styles';
-import { Device, DeviceConfigsFacade } from '../../../util/device-configs';
-import { PiCarouselItemDirective } from '../carousel.directive';
-import { Subject, combineLatest, skip, takeUntil } from 'rxjs';
-import { NgIf, NgFor, NgTemplateOutlet } from '@angular/common';
-import { PiIconButtonComponent } from '../../button/icon-button/icon-button.component';
-
-@Component({
- selector: 'pi-carousel',
- templateUrl: './carousel.component.html',
- styleUrls: ['./carousel.component.scss'],
- changeDetection: ChangeDetectionStrategy.OnPush,
- imports: [
- NgIf,
- PiIconButtonComponent,
- NgFor,
- NgTemplateOutlet,
- ],
-})
-export class PiCarouselComponent
- implements OnInit, OnChanges, AfterViewInit, AfterViewChecked, OnDestroy
-{
- @HostBinding('class') get classes(): string {
- const carouselItems = this.carouselItems();
- const itemsNumberClass =
- carouselItems && `pi-carousel__${carouselItems.length}-items`;
- const direction = this.direction();
- const directionTypeClass = direction && `pi-carousel__${direction}`;
- const colorClass = `pi-carousel__${this.color()}`;
- const typeClass = `pi-carousel__${this.type()}`;
- const isDraggableClass = this.isDraggable() ? 'is-draggable' : '';
- const justifyValue = this.justify();
- const justifyClass = justifyValue && `pi-carousel__justify-content--${justifyValue}`;
- return [
- ComponentFamilyClass.Carousel,
- itemsNumberClass,
- typeClass,
- directionTypeClass,
- isDraggableClass,
- colorClass,
- justifyClass,
- ].join(' ');
- }
-
- // Skin
- readonly type = input<'symmetric' | 'linear'>('linear');
-
- readonly direction = input<'horizontal' | 'vertical'>('horizontal');
-
- readonly color = input('primary');
- readonly justify = input.required();
-
- readonly device = input.required();
-
- /**
- * If true, the carousel will not show the next and previous buttons.
- */
- readonly hideSwipeButtons = input(true);
-
- /**
- * If true, the carousel will not show the pagination.
- */
- readonly hidePaginator = input(false);
-
-
- // BEHAVIOUR
- /**
- * If a number of items per device (itemsDesktop, itemsTablet, itemsMobile) is provided,
- * each item will take the total width of the carousel divided by the number of items.
- */
- readonly itemsDesktop = input.required();
-
- /**
- * If no number of items for tablet is provided,
- * the number of items for desktop will be used.
- */
- readonly itemsTablet = input();
-
- /**
- * If no number of items for mobile is provided,
- * the number of items for desktop will be used.
- */
- readonly itemsMobile = input();
-
- /**
- * If we want to set a custom width for each item,
- * we can provide the width in pixels and this will override the number of items per device.
- * The carousel will display per page the number of items that fit in the total width.
- */
- readonly itemWidth = input.required();
-
- /**
- * If true, the user will be able to drag the carousel to move across items.
- */
- readonly isDraggable = input(true);
-
- /**
- * If true, when the user clicks on the next or previous button,
- * the carousel will move to the next or previous page
- * ie. currentItem will be incremented/decremented by itemsPerPage.
- */
- readonly movePerPage = input(false);
-
- // OUTPUTS
- /**
- * Emits the index of the current item when it changes.
- */
- readonly itemChanged = output();
-
- /**
- * carouselItems corresponds to the items that will be displayed in the carousel.
- */
- readonly carouselItems = contentChildren(PiCarouselItemDirective, { descendants: true });
-
- /**
- * carouselContentWrapper corresponds to the section that contains the carousel items and excludes the control buttons
- */
- readonly carouselContentWrapper = viewChild.required('carouselContentWrapper', { read: ElementRef });
-
- carouselItemsNativeElements: HTMLElement[] = [];
-
- private destroyed$: Subject = new Subject();
-
- private _currentItemIndex = 0;
- set currentItem(index: number) {
- this._currentItemIndex = index;
- this.itemChanged.emit(index);
- }
- get currentItem(): number {
- return this._currentItemIndex;
- }
-
- itemsPerPage: number;
- pages: Array;
-
- // Drag variables
- isDragging = false;
- isMouseDown = false;
- dragInitPosition = 0;
- dragFinalPosition = 0;
-
- private mousedownListener: () => void;
- private mouseupListener: () => void;
- private mousemoveListener: () => void;
-
- private touchstartListener: () => void;
- private touchmoveListener: () => void;
- private touchendListener: () => void;
-
- constructor(
- private cdr: ChangeDetectorRef,
- private el: ElementRef,
- private renderer: Renderer2,
- private deviceConfig: DeviceConfigsFacade
- ) {}
-
- /**
- * Used for symmetric carousel to know how many items to show on each side of the current item.
- */
- get numberOfSideItems(): number {
- return Math.floor(this.itemsPerPage / 2);
- }
-
- /**
- * Icon displayed in the next control button.
- */
- get nextIcon(): string {
- return this.direction() === 'horizontal' ? 'chevron-forward' : 'chevron-down';
- }
-
- /**
- * Icon displayed in the prev control button.
- */
- get prevIcon(): string {
- return this.direction() === 'horizontal' ? 'chevron-back' : 'chevron-up';
- }
-
- /**
- * Returns the carousel content wrapper native element.
- */
- get carouselContentElement(): HTMLElement {
- return this.carouselContentWrapper().nativeElement;
- }
-
- get tallestElementHeightPx(): number {
- return this.carouselItemsNativeElements.reduce(
- (value, currentValue) =>
- value > currentValue.offsetHeight ? value : currentValue.offsetHeight,
- 0
- );
- }
-
- /**
- * Returns true if the number of items is greater than the number of items per page.
- */
- get hasOverflow(): boolean {
- return this.carouselItems().length > this.itemsPerPage;
- }
-
- get canSwipeNext(): boolean {
- return this.movePerPage()
- ? this.currentItem + this.itemsPerPage < this.carouselItems().length
- : this.currentItem < this.carouselItems().length - 1;
- }
-
- get canSwipePrev(): boolean {
- return this.movePerPage() ? this.currentItem - this.itemsPerPage >= 0 : this.currentItem > 0;
- }
-
- /**
- * Returns the index of the current page.
- */
- get currentPageIndex(): number {
- return Math.trunc(this.currentItem / this.itemsPerPage);
- }
-
- ngOnInit(): void {
- combineLatest([this.deviceConfig.device$, this.deviceConfig.size$])
- .pipe(skip(1), takeUntil(this.destroyed$))
- .subscribe(() => {
- this.reloadComponent();
- });
- }
-
- ngOnChanges(simpleChanges: SimpleChanges): void {
- if (simpleChanges['itemWidth'] && !!this.carouselContentWrapper()) {
- this.setItemsPerPage();
- }
- }
-
- ngAfterViewInit(): void {
- this.setItemsPerPage();
- this.setPages();
-
- if (this.isDraggable()) {
- this.setDragEventListeners();
- }
- // La suscripción a `carouselItems.changes` sólo hacía markForCheck();
- // al ser `carouselItems` una signal query, Angular ya lo hace solo.
- }
-
- ngAfterViewChecked(): void {
- this.getCarouselItemsNativeElements();
-
- this.setStyleOnInit();
- }
-
- ngOnDestroy(): void {
- this.stopDragEventListeners();
- this.destroyed$.next();
- this.destroyed$.complete();
- }
-
- reloadComponent(): void {
- this.ngOnDestroy();
- this.currentItem = 0;
- this.ngAfterViewInit();
- this.ngAfterViewChecked();
- this.cdr.markForCheck();
- }
-
- next(): void {
- if (this.movePerPage()) {
- this.currentPageIndex < this.pages.length - 1
- ? (this.currentItem = (this.currentPageIndex + 1) * this.itemsPerPage)
- : null;
- } else {
- this.currentItem = this.currentItem + 1;
- }
- this.carouselTranslation(this.currentItem);
- }
-
- prev(): void {
- if (this.movePerPage()) {
- this.currentPageIndex > 0
- ? (this.currentItem = (this.currentPageIndex - 1) * this.itemsPerPage)
- : null;
- } else {
- this.currentItem = this.currentItem - 1;
- }
- this.carouselTranslation(this.currentItem);
- }
-
- setItemsPerPage(): void {
- const itemWidth = this.itemWidth();
- if (!!itemWidth) {
- this.itemsPerPage = Math.floor(this.carouselContentElement.clientWidth / itemWidth) || 1;
- } else {
- const itemsDesktop = this.itemsDesktop();
- const itemsTablet = this.itemsTablet();
- const itemsMobile = this.itemsMobile();
- switch (this.device()) {
- case 'DESKTOP':
- this.itemsPerPage = itemsDesktop ? itemsDesktop : this.carouselItems().length;
- break;
- case 'TABLET':
- this.itemsPerPage = itemsTablet ? itemsTablet : this.carouselItems().length;
- break;
- case 'MOBILE':
- this.itemsPerPage = itemsMobile ? itemsMobile : this.carouselItems().length;
- break;
- }
- }
- }
-
- trackByFn(index: number, item: PiCarouselItemDirective): number {
- return index;
- }
-
- getItemClass(index: number): string {
- let itemClass: string = 'pi-carousel__item pi-carousel__item--' + index;
- if (index === this.currentItem) itemClass += ' ' + 'is-active';
- return itemClass;
- }
-
- selectItem(index: number): void {
- this.currentItem = index;
- if (this.hasOverflow && !this.movePerPage()) {
- this.carouselTranslation(index);
- }
- }
-
- setPages(): void {
- let totalPages: number;
- let pages: Array = [];
- totalPages = Math.ceil(this.carouselItems().length / this.itemsPerPage);
- for (let i = 0; i < totalPages; i++) {
- pages.push(i);
- }
- this.pages = pages;
- this.cdr.detectChanges();
- }
-
- private stopTouchDragEventListeners(): void {
- if (this.touchstartListener) this.touchstartListener();
- if (this.touchmoveListener) this.touchmoveListener();
- if (this.touchendListener) this.touchendListener();
- }
-
- private stopMouseDragEventListeners(): void {
- if (this.mousedownListener) this.mousedownListener();
- if (this.mouseupListener) this.mouseupListener();
- if (this.mousemoveListener) this.mousemoveListener();
- }
-
- private stopDragEventListeners(): void {
- this.stopMouseDragEventListeners();
- this.stopTouchDragEventListeners();
- }
-
- private setDragEventListeners(): void {
- this.mousedownListener = this.renderer.listen(
- this.carouselContentWrapper().nativeElement,
- 'mousedown',
- (event) => {
- this.dragStart(event);
- }
- );
-
- this.mousemoveListener = this.renderer.listen(
- document.documentElement,
- 'mousemove',
- (event) => {
- if (this.isMouseDown) this.dragAction(event);
- }
- );
-
- this.mouseupListener = this.renderer.listen(document.documentElement, 'mouseup', () => {
- if (this.isDragging) {
- this.dragEnd();
- }
- });
-
- this.touchstartListener = this.renderer.listen(
- this.carouselContentWrapper().nativeElement,
- 'touchstart',
- (event) => {
- this.dragStart(event);
- }
- );
-
- this.touchmoveListener = this.renderer.listen(
- document.documentElement,
- 'touchmove',
- (event) => {
- if (this.isMouseDown) this.dragAction(event);
- }
- );
-
- this.touchendListener = this.renderer.listen(document.documentElement, 'touchend', () => {
- if (this.isDragging) this.dragEnd();
- });
- }
-
- private dragStart(event: MouseEvent | TouchEvent): void {
- this.isMouseDown = true;
- if (event instanceof TouchEvent) {
- this.stopMouseDragEventListeners();
- this.dragInitPosition = event.touches[0].clientX;
- } else {
- this.stopTouchDragEventListeners();
- this.dragInitPosition = event.clientX;
- }
- }
-
- /**
- *
- * @param event
- * This function handles the logic for dragging the carousel, allowing the user to swipe to the next or previous item based on the drag direction and minimum dragging width.
- */
- private dragAction(event: MouseEvent | TouchEvent): void {
- /**
- * Sets a minimum dragging width based on either 80% of the item width if provided
- * Otherwise 80% of the width of one item in terms of the number of items displayed per page
- */
- const itemWidth = this.itemWidth();
- const minDraggingWidth = itemWidth ? 0.8 * itemWidth : 0.8 * (100 / this.itemsPerPage);
-
- this.isDragging = true;
-
- if (event instanceof TouchEvent) this.dragFinalPosition = event.touches[0].clientX;
- if (event instanceof MouseEvent) this.dragFinalPosition = event.clientX;
-
- if (this.dragInitPosition - this.dragFinalPosition > minDraggingWidth && this.canSwipeNext) {
- this.currentItem++;
- this.carouselTranslation(this.currentItem);
- this.dragInitPosition = this.dragFinalPosition;
- }
-
- if (this.dragInitPosition - this.dragFinalPosition < -minDraggingWidth && this.canSwipePrev) {
- this.currentItem--;
- this.carouselTranslation(this.currentItem);
- this.dragInitPosition = this.dragFinalPosition;
- }
- }
-
- private dragEnd(): void {
- this.isDragging = false;
- this.isMouseDown = false;
- this.cdr.detectChanges();
- }
-
- private getCarouselItemsNativeElements(): void {
- this.carouselItemsNativeElements = Array.from(
- this.el.nativeElement.querySelectorAll('.pi-carousel__item')
- );
- }
-
- private carouselTranslation(currentItem: number): void {
- const type = this.type();
- if (type === 'linear' && currentItem <= this.carouselItems().length - this.itemsPerPage) {
- this.carouselItemsTranslation(currentItem, `-${currentItem * 100}%`, this.direction());
- } else if (type === 'symmetric') {
- if (currentItem < this.numberOfSideItems) {
- // If we are at the beginning of the carousel
- this.carouselItemsTranslation(currentItem, '0', this.direction());
- } else if (this.carouselItems().length - currentItem > this.numberOfSideItems) {
- // If we are at the end of the carousel
- this.carouselItemsTranslation(
- currentItem,
- `-${(currentItem - this.numberOfSideItems) * 100}%`,
- this.direction()
- );
- } else {
- // If we are at the end of the carousel
- this.carouselItemsTranslation(
- currentItem,
- `-${(this.carouselItems().length - this.itemsPerPage) * 100}%`,
- this.direction()
- );
- }
- }
- }
-
- private setStyleOnInit(): void {
- this.direction() === 'horizontal'
- ? this.setHorizontalCarouselStyle()
- : this.setVerticalCarouselStyle();
- }
-
- private carouselItemsTranslation(currentItem: number, translation: string, axis: string) {
- this.carouselItemsNativeElements.forEach((item, index) => {
- const scale: number = index === currentItem && this.type() === 'symmetric' ? 1.15 : 1;
- const transform: string =
- axis === 'horizontal' ? `translateX(${translation})` : `translateY(${translation})`;
- this.renderer.setStyle(item, 'transform', `${transform} scale(${scale})`);
- });
- }
-
- private setHorizontalCarouselStyle(): void {
- this.carouselItemsNativeElements.forEach((item) => {
- const itemWidth = this.itemWidth();
- if (!!itemWidth) {
- this.renderer.setStyle(item, 'min-width', `${itemWidth}px`);
- this.renderer.setStyle(item, 'max-width', `${itemWidth}px`);
- this.renderer.setStyle(item, 'width', 'unset');
- } else {
- this.renderer.setStyle(item, 'min-width', `${100 / this.itemsPerPage}%`);
- this.renderer.setStyle(item, 'max-width', `${100 / this.itemsPerPage}%`);
- this.renderer.setStyle(item, 'width', `${100 / this.itemsPerPage}%`);
- }
- });
- }
-
- private setVerticalCarouselStyle(): void {
- this.renderer.setStyle(
- this.carouselContentElement,
- 'min-height',
- `${this.itemsPerPage * this.tallestElementHeightPx}px`
- );
- this.carouselItemsNativeElements.forEach((item) => {
- this.renderer.setStyle(item, 'min-height', `${this.tallestElementHeightPx}px`);
- });
- }
-}
+// Angular
+import {
+ AfterViewChecked,
+ AfterViewInit,
+ ChangeDetectionStrategy,
+ ChangeDetectorRef,
+ Component,
+ ElementRef,
+ HostBinding,
+ OnChanges,
+ OnDestroy,
+ OnInit,
+ Renderer2,
+ SimpleChanges,
+ input,
+ output,
+ viewChild,
+ contentChildren
+} from '@angular/core';
+
+// Shared
+import { ComponentFamilyClass, justify, theming } from '../../../styles';
+import { Device, DeviceConfigsFacade } from '../../../util/device-configs';
+import { PiCarouselItemDirective } from '../carousel.directive';
+import { Subject, combineLatest, skip, takeUntil } from 'rxjs';
+import { NgIf, NgFor, NgTemplateOutlet } from '@angular/common';
+import { PiIconButtonComponent } from '../../button/icon-button/icon-button.component';
+
+@Component({
+ selector: 'pi-carousel',
+ templateUrl: './carousel.component.html',
+ styleUrls: ['./carousel.component.scss'],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ imports: [
+ NgIf,
+ PiIconButtonComponent,
+ NgFor,
+ NgTemplateOutlet,
+ ],
+})
+export class PiCarouselComponent
+ implements OnInit, OnChanges, AfterViewInit, AfterViewChecked, OnDestroy
+{
+ @HostBinding('class') get classes(): string {
+ const carouselItems = this.carouselItems();
+ const itemsNumberClass =
+ carouselItems && `pi-carousel__${carouselItems.length}-items`;
+ const direction = this.direction();
+ const directionTypeClass = direction && `pi-carousel__${direction}`;
+ const colorClass = `pi-carousel__${this.color()}`;
+ const typeClass = `pi-carousel__${this.type()}`;
+ const isDraggableClass = this.isDraggable() ? 'is-draggable' : '';
+ const justifyValue = this.justify();
+ const justifyClass = justifyValue && `pi-carousel__justify-content--${justifyValue}`;
+ return [
+ ComponentFamilyClass.Carousel,
+ itemsNumberClass,
+ typeClass,
+ directionTypeClass,
+ isDraggableClass,
+ colorClass,
+ justifyClass,
+ ].join(' ');
+ }
+
+ // Skin
+ readonly type = input<'symmetric' | 'linear'>('linear');
+
+ readonly direction = input<'horizontal' | 'vertical'>('horizontal');
+
+ readonly color = input('primary');
+ readonly justify = input.required();
+
+ readonly device = input.required();
+
+ /**
+ * If true, the carousel will not show the next and previous buttons.
+ */
+ readonly hideSwipeButtons = input(true);
+
+ /**
+ * If true, the carousel will not show the pagination.
+ */
+ readonly hidePaginator = input(false);
+
+
+ // BEHAVIOUR
+ /**
+ * If a number of items per device (itemsDesktop, itemsTablet, itemsMobile) is provided,
+ * each item will take the total width of the carousel divided by the number of items.
+ */
+ readonly itemsDesktop = input.required();
+
+ /**
+ * If no number of items for tablet is provided,
+ * the number of items for desktop will be used.
+ */
+ readonly itemsTablet = input();
+
+ /**
+ * If no number of items for mobile is provided,
+ * the number of items for desktop will be used.
+ */
+ readonly itemsMobile = input();
+
+ /**
+ * If we want to set a custom width for each item,
+ * we can provide the width in pixels and this will override the number of items per device.
+ * The carousel will display per page the number of items that fit in the total width.
+ */
+ readonly itemWidth = input.required();
+
+ /**
+ * If true, the user will be able to drag the carousel to move across items.
+ */
+ readonly isDraggable = input(true);
+
+ /**
+ * If true, when the user clicks on the next or previous button,
+ * the carousel will move to the next or previous page
+ * ie. currentItem will be incremented/decremented by itemsPerPage.
+ */
+ readonly movePerPage = input(false);
+
+ // OUTPUTS
+ /**
+ * Emits the index of the current item when it changes.
+ */
+ readonly itemChanged = output();
+
+ /**
+ * carouselItems corresponds to the items that will be displayed in the carousel.
+ */
+ readonly carouselItems = contentChildren(PiCarouselItemDirective, { descendants: true });
+
+ /**
+ * carouselContentWrapper corresponds to the section that contains the carousel items and excludes the control buttons
+ */
+ readonly carouselContentWrapper = viewChild.required('carouselContentWrapper', { read: ElementRef });
+
+ carouselItemsNativeElements: HTMLElement[] = [];
+
+ private destroyed$: Subject = new Subject();
+
+ private _currentItemIndex = 0;
+ set currentItem(index: number) {
+ this._currentItemIndex = index;
+ this.itemChanged.emit(index);
+ }
+ get currentItem(): number {
+ return this._currentItemIndex;
+ }
+
+ itemsPerPage!: number;
+ pages!: Array;
+
+ // Drag variables
+ isDragging = false;
+ isMouseDown = false;
+ dragInitPosition = 0;
+ dragFinalPosition = 0;
+
+ private mousedownListener!: () => void;
+ private mouseupListener!: () => void;
+ private mousemoveListener!: () => void;
+
+ private touchstartListener!: () => void;
+ private touchmoveListener!: () => void;
+ private touchendListener!: () => void;
+
+ constructor(
+ private cdr: ChangeDetectorRef,
+ private el: ElementRef,
+ private renderer: Renderer2,
+ private deviceConfig: DeviceConfigsFacade
+ ) {}
+
+ /**
+ * Used for symmetric carousel to know how many items to show on each side of the current item.
+ */
+ get numberOfSideItems(): number {
+ return Math.floor(this.itemsPerPage / 2);
+ }
+
+ /**
+ * Icon displayed in the next control button.
+ */
+ get nextIcon(): string {
+ return this.direction() === 'horizontal' ? 'chevron-forward' : 'chevron-down';
+ }
+
+ /**
+ * Icon displayed in the prev control button.
+ */
+ get prevIcon(): string {
+ return this.direction() === 'horizontal' ? 'chevron-back' : 'chevron-up';
+ }
+
+ /**
+ * Returns the carousel content wrapper native element.
+ */
+ get carouselContentElement(): HTMLElement {
+ return this.carouselContentWrapper().nativeElement;
+ }
+
+ get tallestElementHeightPx(): number {
+ return this.carouselItemsNativeElements.reduce(
+ (value, currentValue) =>
+ value > currentValue.offsetHeight ? value : currentValue.offsetHeight,
+ 0
+ );
+ }
+
+ /**
+ * Returns true if the number of items is greater than the number of items per page.
+ */
+ get hasOverflow(): boolean {
+ return this.carouselItems().length > this.itemsPerPage;
+ }
+
+ get canSwipeNext(): boolean {
+ return this.movePerPage()
+ ? this.currentItem + this.itemsPerPage < this.carouselItems().length
+ : this.currentItem < this.carouselItems().length - 1;
+ }
+
+ get canSwipePrev(): boolean {
+ return this.movePerPage() ? this.currentItem - this.itemsPerPage >= 0 : this.currentItem > 0;
+ }
+
+ /**
+ * Returns the index of the current page.
+ */
+ get currentPageIndex(): number {
+ return Math.trunc(this.currentItem / this.itemsPerPage);
+ }
+
+ ngOnInit(): void {
+ combineLatest([this.deviceConfig.device$, this.deviceConfig.size$])
+ .pipe(skip(1), takeUntil(this.destroyed$))
+ .subscribe(() => {
+ this.reloadComponent();
+ });
+ }
+
+ ngOnChanges(simpleChanges: SimpleChanges): void {
+ if (simpleChanges['itemWidth'] && !!this.carouselContentWrapper()) {
+ this.setItemsPerPage();
+ }
+ }
+
+ ngAfterViewInit(): void {
+ this.setItemsPerPage();
+ this.setPages();
+
+ if (this.isDraggable()) {
+ this.setDragEventListeners();
+ }
+ // La suscripción a `carouselItems.changes` sólo hacía markForCheck();
+ // al ser `carouselItems` una signal query, Angular ya lo hace solo.
+ }
+
+ ngAfterViewChecked(): void {
+ this.getCarouselItemsNativeElements();
+
+ this.setStyleOnInit();
+ }
+
+ ngOnDestroy(): void {
+ this.stopDragEventListeners();
+ this.destroyed$.next();
+ this.destroyed$.complete();
+ }
+
+ reloadComponent(): void {
+ this.ngOnDestroy();
+ this.currentItem = 0;
+ this.ngAfterViewInit();
+ this.ngAfterViewChecked();
+ this.cdr.markForCheck();
+ }
+
+ next(): void {
+ if (this.movePerPage()) {
+ this.currentPageIndex < this.pages.length - 1
+ ? (this.currentItem = (this.currentPageIndex + 1) * this.itemsPerPage)
+ : null;
+ } else {
+ this.currentItem = this.currentItem + 1;
+ }
+ this.carouselTranslation(this.currentItem);
+ }
+
+ prev(): void {
+ if (this.movePerPage()) {
+ this.currentPageIndex > 0
+ ? (this.currentItem = (this.currentPageIndex - 1) * this.itemsPerPage)
+ : null;
+ } else {
+ this.currentItem = this.currentItem - 1;
+ }
+ this.carouselTranslation(this.currentItem);
+ }
+
+ setItemsPerPage(): void {
+ const itemWidth = this.itemWidth();
+ if (!!itemWidth) {
+ this.itemsPerPage = Math.floor(this.carouselContentElement.clientWidth / itemWidth) || 1;
+ } else {
+ const itemsDesktop = this.itemsDesktop();
+ const itemsTablet = this.itemsTablet();
+ const itemsMobile = this.itemsMobile();
+ switch (this.device()) {
+ case 'DESKTOP':
+ this.itemsPerPage = itemsDesktop ? itemsDesktop : this.carouselItems().length;
+ break;
+ case 'TABLET':
+ this.itemsPerPage = itemsTablet ? itemsTablet : this.carouselItems().length;
+ break;
+ case 'MOBILE':
+ this.itemsPerPage = itemsMobile ? itemsMobile : this.carouselItems().length;
+ break;
+ }
+ }
+ }
+
+ trackByFn(index: number, item: PiCarouselItemDirective): number {
+ return index;
+ }
+
+ getItemClass(index: number): string {
+ let itemClass: string = 'pi-carousel__item pi-carousel__item--' + index;
+ if (index === this.currentItem) itemClass += ' ' + 'is-active';
+ return itemClass;
+ }
+
+ selectItem(index: number): void {
+ this.currentItem = index;
+ if (this.hasOverflow && !this.movePerPage()) {
+ this.carouselTranslation(index);
+ }
+ }
+
+ setPages(): void {
+ let totalPages: number;
+ let pages: Array = [];
+ totalPages = Math.ceil(this.carouselItems().length / this.itemsPerPage);
+ for (let i = 0; i < totalPages; i++) {
+ pages.push(i);
+ }
+ this.pages = pages;
+ this.cdr.detectChanges();
+ }
+
+ private stopTouchDragEventListeners(): void {
+ if (this.touchstartListener) this.touchstartListener();
+ if (this.touchmoveListener) this.touchmoveListener();
+ if (this.touchendListener) this.touchendListener();
+ }
+
+ private stopMouseDragEventListeners(): void {
+ if (this.mousedownListener) this.mousedownListener();
+ if (this.mouseupListener) this.mouseupListener();
+ if (this.mousemoveListener) this.mousemoveListener();
+ }
+
+ private stopDragEventListeners(): void {
+ this.stopMouseDragEventListeners();
+ this.stopTouchDragEventListeners();
+ }
+
+ private setDragEventListeners(): void {
+ this.mousedownListener = this.renderer.listen(
+ this.carouselContentWrapper().nativeElement,
+ 'mousedown',
+ (event) => {
+ this.dragStart(event);
+ }
+ );
+
+ this.mousemoveListener = this.renderer.listen(
+ document.documentElement,
+ 'mousemove',
+ (event) => {
+ if (this.isMouseDown) this.dragAction(event);
+ }
+ );
+
+ this.mouseupListener = this.renderer.listen(document.documentElement, 'mouseup', () => {
+ if (this.isDragging) {
+ this.dragEnd();
+ }
+ });
+
+ this.touchstartListener = this.renderer.listen(
+ this.carouselContentWrapper().nativeElement,
+ 'touchstart',
+ (event) => {
+ this.dragStart(event);
+ }
+ );
+
+ this.touchmoveListener = this.renderer.listen(
+ document.documentElement,
+ 'touchmove',
+ (event) => {
+ if (this.isMouseDown) this.dragAction(event);
+ }
+ );
+
+ this.touchendListener = this.renderer.listen(document.documentElement, 'touchend', () => {
+ if (this.isDragging) this.dragEnd();
+ });
+ }
+
+ private dragStart(event: MouseEvent | TouchEvent): void {
+ this.isMouseDown = true;
+ if (event instanceof TouchEvent) {
+ this.stopMouseDragEventListeners();
+ this.dragInitPosition = event.touches[0].clientX;
+ } else {
+ this.stopTouchDragEventListeners();
+ this.dragInitPosition = event.clientX;
+ }
+ }
+
+ /**
+ *
+ * @param event
+ * This function handles the logic for dragging the carousel, allowing the user to swipe to the next or previous item based on the drag direction and minimum dragging width.
+ */
+ private dragAction(event: MouseEvent | TouchEvent): void {
+ /**
+ * Sets a minimum dragging width based on either 80% of the item width if provided
+ * Otherwise 80% of the width of one item in terms of the number of items displayed per page
+ */
+ const itemWidth = this.itemWidth();
+ const minDraggingWidth = itemWidth ? 0.8 * itemWidth : 0.8 * (100 / this.itemsPerPage);
+
+ this.isDragging = true;
+
+ if (event instanceof TouchEvent) this.dragFinalPosition = event.touches[0].clientX;
+ if (event instanceof MouseEvent) this.dragFinalPosition = event.clientX;
+
+ if (this.dragInitPosition - this.dragFinalPosition > minDraggingWidth && this.canSwipeNext) {
+ this.currentItem++;
+ this.carouselTranslation(this.currentItem);
+ this.dragInitPosition = this.dragFinalPosition;
+ }
+
+ if (this.dragInitPosition - this.dragFinalPosition < -minDraggingWidth && this.canSwipePrev) {
+ this.currentItem--;
+ this.carouselTranslation(this.currentItem);
+ this.dragInitPosition = this.dragFinalPosition;
+ }
+ }
+
+ private dragEnd(): void {
+ this.isDragging = false;
+ this.isMouseDown = false;
+ this.cdr.detectChanges();
+ }
+
+ private getCarouselItemsNativeElements(): void {
+ this.carouselItemsNativeElements = Array.from(
+ this.el.nativeElement.querySelectorAll('.pi-carousel__item')
+ );
+ }
+
+ private carouselTranslation(currentItem: number): void {
+ const type = this.type();
+ if (type === 'linear' && currentItem <= this.carouselItems().length - this.itemsPerPage) {
+ this.carouselItemsTranslation(currentItem, `-${currentItem * 100}%`, this.direction());
+ } else if (type === 'symmetric') {
+ if (currentItem < this.numberOfSideItems) {
+ // If we are at the beginning of the carousel
+ this.carouselItemsTranslation(currentItem, '0', this.direction());
+ } else if (this.carouselItems().length - currentItem > this.numberOfSideItems) {
+ // If we are at the end of the carousel
+ this.carouselItemsTranslation(
+ currentItem,
+ `-${(currentItem - this.numberOfSideItems) * 100}%`,
+ this.direction()
+ );
+ } else {
+ // If we are at the end of the carousel
+ this.carouselItemsTranslation(
+ currentItem,
+ `-${(this.carouselItems().length - this.itemsPerPage) * 100}%`,
+ this.direction()
+ );
+ }
+ }
+ }
+
+ private setStyleOnInit(): void {
+ this.direction() === 'horizontal'
+ ? this.setHorizontalCarouselStyle()
+ : this.setVerticalCarouselStyle();
+ }
+
+ private carouselItemsTranslation(currentItem: number, translation: string, axis: string) {
+ this.carouselItemsNativeElements.forEach((item, index) => {
+ const scale: number = index === currentItem && this.type() === 'symmetric' ? 1.15 : 1;
+ const transform: string =
+ axis === 'horizontal' ? `translateX(${translation})` : `translateY(${translation})`;
+ this.renderer.setStyle(item, 'transform', `${transform} scale(${scale})`);
+ });
+ }
+
+ private setHorizontalCarouselStyle(): void {
+ this.carouselItemsNativeElements.forEach((item) => {
+ const itemWidth = this.itemWidth();
+ if (!!itemWidth) {
+ this.renderer.setStyle(item, 'min-width', `${itemWidth}px`);
+ this.renderer.setStyle(item, 'max-width', `${itemWidth}px`);
+ this.renderer.setStyle(item, 'width', 'unset');
+ } else {
+ this.renderer.setStyle(item, 'min-width', `${100 / this.itemsPerPage}%`);
+ this.renderer.setStyle(item, 'max-width', `${100 / this.itemsPerPage}%`);
+ this.renderer.setStyle(item, 'width', `${100 / this.itemsPerPage}%`);
+ }
+ });
+ }
+
+ private setVerticalCarouselStyle(): void {
+ this.renderer.setStyle(
+ this.carouselContentElement,
+ 'min-height',
+ `${this.itemsPerPage * this.tallestElementHeightPx}px`
+ );
+ this.carouselItemsNativeElements.forEach((item) => {
+ this.renderer.setStyle(item, 'min-height', `${this.tallestElementHeightPx}px`);
+ });
+ }
+}
diff --git a/libs/ui/src/lib/ui/carousel/index.ts b/libs/ui/src/lib/ui/carousel/index.ts
index 20d8a05..48ea25a 100644
--- a/libs/ui/src/lib/ui/carousel/index.ts
+++ b/libs/ui/src/lib/ui/carousel/index.ts
@@ -1,5 +1,5 @@
-
-
-export * from './carousel/carousel.component';
-
-export * from './carousel.directive';
+
+
+export * from './carousel/carousel.component';
+
+export * from './carousel.directive';
diff --git a/libs/ui/src/lib/ui/chart/chart-legend/chart-legend.component.html b/libs/ui/src/lib/ui/chart/chart-legend/chart-legend.component.html
index 6bc6b56..196ddf9 100644
--- a/libs/ui/src/lib/ui/chart/chart-legend/chart-legend.component.html
+++ b/libs/ui/src/lib/ui/chart/chart-legend/chart-legend.component.html
@@ -1,10 +1,10 @@
-
-
-
-
-
-
-
+
+
+
+
+
+
+
{{ 'common.legend' | translate }}
\ No newline at end of file
diff --git a/libs/ui/src/lib/ui/chart/chart-legend/chart-legend.component.scss b/libs/ui/src/lib/ui/chart/chart-legend/chart-legend.component.scss
index 760dc6a..8bff0f8 100644
--- a/libs/ui/src/lib/ui/chart/chart-legend/chart-legend.component.scss
+++ b/libs/ui/src/lib/ui/chart/chart-legend/chart-legend.component.scss
@@ -1,123 +1,123 @@
-@mixin chartLegendsGrid($columns: 2, $rows: 2) {
- :host {
- grid-template-columns: repeat(#{$columns}, 1fr);
- grid-template-rows: repeat(#{$rows}, 1fr);
- & > section {
- justify-self: center;
- }
- }
-}
-
-:host {
- position: relative;
- display: grid;
- gap: var(--pi-spacing-small);
- padding: var(--pi-spacing-x-large) var(--pi-spacing-medium);
- background-color: var(--pi-color-grey-10);
- border-radius: var(--pi-border-radius-large);
-
- & > span {
- position: absolute;
- min-width: 8rem;
- padding: var(--pi-spacing-xxx-small) var(--pi-spacing-medium);
- text-align: center;
- color: var(--pi-color-grey-200);
- background-color: var(--pi-color-white);
- border: 1px solid var(--pi-color-grey-75);
- border-radius: var(--pi-border-radius-small);
- font: {
- size: var(--pi-font-size-x-small);
- }
- }
- & > section {
- display: flex;
- align-items: center;
- gap: var(--pi-spacing-xx-small);
-
- cursor: pointer;
- overflow: hidden;
-
- &.is-hovered {
- & > label {
- font-weight: 600;
- }
- }
-
- & > * {
- cursor: pointer;
- &:hover {
- font-weight: 600;
- }
- }
-
- & > div {
- min-width: var(--pi-spacing-small);
- min-height: var(--pi-spacing-small);
- border-radius: 50%;
- border: 1px solid;
- }
- & > label {
- padding-right: var(--pi-spacing-x-large);
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- transition: var(--pi-animation);
- }
- }
-}
-
-html {
- // Tablet & Mobile
- &:not(.is-desktop) {
- // Small device
- @media screen and (max-width: 62rem) {
- :host {
- & > span {
- top: -0.75rem;
- left: 50%;
- transform: translateX(-50%);
- }
- }
- }
- }
- // Tablet & Desktop
- &:not(.is-mobile) {
- // Large device
- @media screen and (min-width: 62rem) {
- :host {
- & > span {
- top: -1rem;
- margin-left: var(--pi-spacing-x-large);
- }
- & > section {
- justify-content: center;
- }
- // Comparative chart
- &.is-comparative {
- & > section {
- &:first-child {
- & > label {
- border-right: 1px solid var(--pi-color-grey-100);
- }
- }
- }
- }
- }
- }
- }
- &.is-mobile {
- @include chartLegendsGrid;
- }
-
- &.is-tablet {
- &.is-tablet__small {
- @include chartLegendsGrid;
- }
- &.is-tablet__large {
- @include chartLegendsGrid(3, 1);
- }
- }
- &.is-desktop {
- @include chartLegendsGrid(3, 1);
- }
-}
+@mixin chartLegendsGrid($columns: 2, $rows: 2) {
+ :host {
+ grid-template-columns: repeat(#{$columns}, 1fr);
+ grid-template-rows: repeat(#{$rows}, 1fr);
+ & > section {
+ justify-self: center;
+ }
+ }
+}
+
+:host {
+ position: relative;
+ display: grid;
+ gap: var(--pi-spacing-small);
+ padding: var(--pi-spacing-x-large) var(--pi-spacing-medium);
+ background-color: var(--pi-color-grey-10);
+ border-radius: var(--pi-border-radius-large);
+
+ & > span {
+ position: absolute;
+ min-width: 8rem;
+ padding: var(--pi-spacing-xxx-small) var(--pi-spacing-medium);
+ text-align: center;
+ color: var(--pi-color-grey-200);
+ background-color: var(--pi-color-white);
+ border: 1px solid var(--pi-color-grey-75);
+ border-radius: var(--pi-border-radius-small);
+ font: {
+ size: var(--pi-font-size-x-small);
+ }
+ }
+ & > section {
+ display: flex;
+ align-items: center;
+ gap: var(--pi-spacing-xx-small);
+
+ cursor: pointer;
+ overflow: hidden;
+
+ &.is-hovered {
+ & > label {
+ font-weight: 600;
+ }
+ }
+
+ & > * {
+ cursor: pointer;
+ &:hover {
+ font-weight: 600;
+ }
+ }
+
+ & > div {
+ min-width: var(--pi-spacing-small);
+ min-height: var(--pi-spacing-small);
+ border-radius: 50%;
+ border: 1px solid;
+ }
+ & > label {
+ padding-right: var(--pi-spacing-x-large);
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ transition: var(--pi-animation);
+ }
+ }
+}
+
+html {
+ // Tablet & Mobile
+ &:not(.is-desktop) {
+ // Small device
+ @media screen and (max-width: 62rem) {
+ :host {
+ & > span {
+ top: -0.75rem;
+ left: 50%;
+ transform: translateX(-50%);
+ }
+ }
+ }
+ }
+ // Tablet & Desktop
+ &:not(.is-mobile) {
+ // Large device
+ @media screen and (min-width: 62rem) {
+ :host {
+ & > span {
+ top: -1rem;
+ margin-left: var(--pi-spacing-x-large);
+ }
+ & > section {
+ justify-content: center;
+ }
+ // Comparative chart
+ &.is-comparative {
+ & > section {
+ &:first-child {
+ & > label {
+ border-right: 1px solid var(--pi-color-grey-100);
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ &.is-mobile {
+ @include chartLegendsGrid;
+ }
+
+ &.is-tablet {
+ &.is-tablet__small {
+ @include chartLegendsGrid;
+ }
+ &.is-tablet__large {
+ @include chartLegendsGrid(3, 1);
+ }
+ }
+ &.is-desktop {
+ @include chartLegendsGrid(3, 1);
+ }
+}
diff --git a/libs/ui/src/lib/ui/chart/chart-legend/chart-legend.component.ts b/libs/ui/src/lib/ui/chart/chart-legend/chart-legend.component.ts
index 3953b12..f0a4fa9 100644
--- a/libs/ui/src/lib/ui/chart/chart-legend/chart-legend.component.ts
+++ b/libs/ui/src/lib/ui/chart/chart-legend/chart-legend.component.ts
@@ -4,27 +4,27 @@ import {
HostBinding,
input,
output
-} from '@angular/core';
+} from '@angular/core';
import { Dataset } from '../../../util/models';
import { NgFor } from '@angular/common';
-import { TranslatePipe } from '@ngx-translate/core';
-
+import { TranslatePipe } from '@ngx-translate/core';
+
@Component({
selector: 'pi-chart-legend',
templateUrl: './chart-legend.component.html',
styleUrls: ['./chart-legend.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [NgFor, TranslatePipe],
-})
-export class PiChartLegendComponent {
- @HostBinding('class') get classes(): string {
- const comparativeClass = this.isComparativeChart() ? 'is-comparative' : '';
- return ['pi-chart-legend', comparativeClass].join(' ');
- }
-
- readonly datasets = input.required>();
- readonly isComparativeChart = input(true);
- readonly hoveredDatasetIndex = input();
-
- readonly triggerDatasetHover = output();
-}
+})
+export class PiChartLegendComponent {
+ @HostBinding('class') get classes(): string {
+ const comparativeClass = this.isComparativeChart() ? 'is-comparative' : '';
+ return ['pi-chart-legend', comparativeClass].join(' ');
+ }
+
+ readonly datasets = input.required>();
+ readonly isComparativeChart = input(true);
+ readonly hoveredDatasetIndex = input();
+
+ readonly triggerDatasetHover = output();
+}
diff --git a/libs/ui/src/lib/ui/chart/chart/chart.component.html b/libs/ui/src/lib/ui/chart/chart/chart.component.html
index d5a2ee1..30de0fa 100644
--- a/libs/ui/src/lib/ui/chart/chart/chart.component.html
+++ b/libs/ui/src/lib/ui/chart/chart/chart.component.html
@@ -1,9 +1,9 @@
-
-
-
-
+
+
+
+
diff --git a/libs/ui/src/lib/ui/chart/chart/chart.component.scss b/libs/ui/src/lib/ui/chart/chart/chart.component.scss
index bfef8c3..8ad3144 100644
--- a/libs/ui/src/lib/ui/chart/chart/chart.component.scss
+++ b/libs/ui/src/lib/ui/chart/chart/chart.component.scss
@@ -1,34 +1,34 @@
-:host {
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- height: 100%;
- max-width: 100%;
-
- & > div {
- position: relative;
- max-width: 100%;
- }
-}
-
-html {
- &:not(.is-desktop) {
- :host {
- & > div {
- aspect-ratio: 1;
- height: 100%;
- max-height: 40vh;
- }
- }
- }
- &.is-desktop {
- :host {
- & > div {
- & > canvas {
- aspect-ratio: 1;
- height: 100%;
- }
- }
- }
- }
-}
+:host {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ height: 100%;
+ max-width: 100%;
+
+ & > div {
+ position: relative;
+ max-width: 100%;
+ }
+}
+
+html {
+ &:not(.is-desktop) {
+ :host {
+ & > div {
+ aspect-ratio: 1;
+ height: 100%;
+ max-height: 40vh;
+ }
+ }
+ }
+ &.is-desktop {
+ :host {
+ & > div {
+ & > canvas {
+ aspect-ratio: 1;
+ height: 100%;
+ }
+ }
+ }
+ }
+}
diff --git a/libs/ui/src/lib/ui/chart/chart/chart.component.ts b/libs/ui/src/lib/ui/chart/chart/chart.component.ts
index 7cb53a1..32fb505 100644
--- a/libs/ui/src/lib/ui/chart/chart/chart.component.ts
+++ b/libs/ui/src/lib/ui/chart/chart/chart.component.ts
@@ -7,172 +7,171 @@ import {
OnInit,
input,
viewChild
-} from '@angular/core';
-import { Device } from '../../../util/device-configs';
-import { Dataset } from '../../../util/models';
-import { TranslateService } from '@ngx-translate/core';
-import {
- BarController,
- BarElement,
- CategoryScale,
- Chart,
- Legend,
- LineController,
- LineElement,
- LinearScale,
- PointElement,
- Title,
- Tooltip,
-} from 'chart.js';
+} from '@angular/core';
+import { Device } from '../../../util/device-configs';
+import { Dataset } from '../../../util/models';
+import { TranslateService } from '@ngx-translate/core';
+import {
+ BarController,
+ BarElement,
+ CategoryScale,
+ Chart,
+ Legend,
+ LineController,
+ LineElement,
+ LinearScale,
+ PointElement,
+ Title,
+ Tooltip,
+} from 'chart.js';
import { datasetConfig, scalesConfig, tooltipConfig } from '../chart.configs';
-import { PiChartLegendComponent } from '../chart-legend/chart-legend.component';
-
-function registerChartComponents() {
- Chart.register(CategoryScale);
- Chart.register(LinearScale);
- Chart.register(BarController);
- Chart.register(BarElement);
- Chart.register(LineController);
- Chart.register(LineElement);
- Chart.register(PointElement);
- Chart.register(Tooltip);
- Chart.register(Legend);
- Chart.register(Title);
-}
-
-registerChartComponents();
+import { PiChartLegendComponent } from '../chart-legend/chart-legend.component';
+
+function registerChartComponents() {
+ Chart.register(CategoryScale);
+ Chart.register(LinearScale);
+ Chart.register(BarController);
+ Chart.register(BarElement);
+ Chart.register(LineController);
+ Chart.register(LineElement);
+ Chart.register(PointElement);
+ Chart.register(Tooltip);
+ Chart.register(Legend);
+ Chart.register(Title);
+}
+
+registerChartComponents();
@Component({
selector: 'pi-chart',
templateUrl: './chart.component.html',
styleUrls: ['./chart.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [PiChartLegendComponent],
-})
-export class PiChartComponent implements OnInit, AfterViewInit {
- readonly type = input<'line' | 'bar'>('line');
- readonly datasets = input.required>();
- readonly device = input.required();
- readonly xAxisMarks = input>();
- readonly isComparativeChart = input(true);
-
- private _hoveredDatasetIndex: number;
- set hoveredDatasetIndex(index: number) {
- this._hoveredDatasetIndex = index;
- }
- get hoveredDatasetIndex(): number {
- return this._hoveredDatasetIndex;
- }
-
- readonly chartRef = viewChild.required('chart', { read: (ElementRef) });
-
- chart: Chart;
-
- constructor(
- private translate: TranslateService,
- private cdr: ChangeDetectorRef,
- ) {}
-
- get completedDatasets() {
- return this.datasets().map((dataset) => {
- const datasetWithTranslatedLabels = {
- ...dataset,
- label: this.translate.instant(dataset.label),
- };
- return {
- ...datasetWithTranslatedLabels,
- ...datasetConfig,
- };
- });
- }
-
- ngOnInit(): void {
- this.hoveredDatasetIndex = -1;
- }
-
- ngAfterViewInit(): void {
- this.getLineChartConfigs();
- }
-
- triggerHover(datasetIndex: number) {
- if (datasetIndex === -1 || this.chart.getActiveElements().length > 0) {
- this.chart.setActiveElements([]);
- } else {
- this.chart.setActiveElements([
- {
- datasetIndex,
- index: 0,
- },
- ]);
- }
- this.chart.update();
- }
-
- getLineChartConfigs(): void {
- const isComparativeChart = this.isComparativeChart();
-
- this.chart = new Chart(this.chartRef().nativeElement, {
- type: 'line',
- data: {
- labels: this.xAxisMarks(),
- datasets: this.completedDatasets,
- },
- options: {
- responsive: true,
- maintainAspectRatio: this.device() === 'DESKTOP' ? true : false,
- hover: {
- mode: 'dataset',
- },
- onHover: (e: any, activeElements: any) => {
- this.hoveredDatasetIndex = activeElements.length && activeElements[0].datasetIndex;
- this.cdr.detectChanges();
- },
- plugins: {
- legend: {
- display: false,
- },
- tooltip: {
- ...tooltipConfig,
- filter: function (tooltipItem): boolean {
- if (isComparativeChart) {
- return tooltipItem.datasetIndex === 0 || tooltipItem.element.active;
- } else {
- return tooltipItem.element.active;
- }
- },
- callbacks: {
- labelTextColor: function (context): string {
- return context.dataset.borderColor as string;
- },
- label: function (context) {
- const chartLabel =
- context.dataset.label.length > 12
- ? context.dataset.label.slice(0, 12) + '...'
- : context.dataset.label;
- let label: string;
- if ((context.dataset as any).unitPosition === 'before') {
- label =
- chartLabel + ': ' + (context.dataset as any).unit + context.formattedValue;
- } else {
- label =
- chartLabel + ': ' + context.formattedValue + (context.dataset as any).unit;
- }
- return label;
- },
- title: function () {},
- },
- },
- },
- interaction: {
- intersect: false,
- mode: 'index',
- },
- scales: scalesConfig,
- },
- });
- }
-
- datasetHoveredInLegend(index: number): void {
- this.hoveredDatasetIndex = index;
- this.triggerHover(this.hoveredDatasetIndex);
- }
-}
+})
+export class PiChartComponent implements OnInit, AfterViewInit {
+ readonly type = input<'line' | 'bar'>('line');
+ readonly datasets = input.required>();
+ readonly device = input.required();
+ readonly xAxisMarks = input>();
+ readonly isComparativeChart = input(true);
+
+ private _hoveredDatasetIndex!: number;
+ set hoveredDatasetIndex(index: number) {
+ this._hoveredDatasetIndex = index;
+ }
+ get hoveredDatasetIndex(): number {
+ return this._hoveredDatasetIndex;
+ }
+
+ readonly chartRef = viewChild.required('chart', { read: (ElementRef) });
+
+ chart!: Chart;
+
+ constructor(
+ private translate: TranslateService,
+ private cdr: ChangeDetectorRef,
+ ) {}
+
+ get completedDatasets() {
+ return this.datasets().map((dataset) => {
+ const datasetWithTranslatedLabels = {
+ ...dataset,
+ label: this.translate.instant(dataset.label),
+ };
+ return {
+ ...datasetWithTranslatedLabels,
+ ...datasetConfig,
+ };
+ });
+ }
+
+ ngOnInit(): void {
+ this.hoveredDatasetIndex = -1;
+ }
+
+ ngAfterViewInit(): void {
+ this.getLineChartConfigs();
+ }
+
+ triggerHover(datasetIndex: number) {
+ if (datasetIndex === -1 || this.chart.getActiveElements().length > 0) {
+ this.chart.setActiveElements([]);
+ } else {
+ this.chart.setActiveElements([
+ {
+ datasetIndex,
+ index: 0,
+ },
+ ]);
+ }
+ this.chart.update();
+ }
+
+ getLineChartConfigs(): void {
+ const isComparativeChart = this.isComparativeChart();
+
+ this.chart = new Chart(this.chartRef().nativeElement, {
+ type: 'line',
+ data: {
+ labels: this.xAxisMarks(),
+ datasets: this.completedDatasets,
+ },
+ options: {
+ responsive: true,
+ maintainAspectRatio: this.device() === 'DESKTOP' ? true : false,
+ hover: {
+ mode: 'dataset',
+ },
+ onHover: (e: any, activeElements: any) => {
+ this.hoveredDatasetIndex = activeElements.length && activeElements[0].datasetIndex;
+ this.cdr.detectChanges();
+ },
+ plugins: {
+ legend: {
+ display: false,
+ },
+ tooltip: {
+ ...tooltipConfig,
+ filter: function (tooltipItem): boolean {
+ if (isComparativeChart) {
+ return tooltipItem.datasetIndex === 0 || tooltipItem.element.active;
+ } else {
+ return tooltipItem.element.active;
+ }
+ },
+ callbacks: {
+ labelTextColor: function (context): string {
+ return context.dataset.borderColor as string;
+ },
+ label: function (context) {
+ const datasetLabel = context.dataset.label ?? '';
+ const chartLabel =
+ datasetLabel.length > 12 ? datasetLabel.slice(0, 12) + '...' : datasetLabel;
+ let label: string;
+ if ((context.dataset as any).unitPosition === 'before') {
+ label =
+ chartLabel + ': ' + (context.dataset as any).unit + context.formattedValue;
+ } else {
+ label =
+ chartLabel + ': ' + context.formattedValue + (context.dataset as any).unit;
+ }
+ return label;
+ },
+ title: function () {},
+ },
+ },
+ },
+ interaction: {
+ intersect: false,
+ mode: 'index',
+ },
+ scales: scalesConfig,
+ },
+ });
+ }
+
+ datasetHoveredInLegend(index: number): void {
+ this.hoveredDatasetIndex = index;
+ this.triggerHover(this.hoveredDatasetIndex);
+ }
+}
diff --git a/libs/ui/src/lib/ui/chart/index.ts b/libs/ui/src/lib/ui/chart/index.ts
index f4e7466..c14f677 100644
--- a/libs/ui/src/lib/ui/chart/index.ts
+++ b/libs/ui/src/lib/ui/chart/index.ts
@@ -1,7 +1,7 @@
-
-
-export * from './chart/chart.component';
-
-export * from './chart.configs';
-
-export * from './chart-legend/chart-legend.component';
+
+
+export * from './chart/chart.component';
+
+export * from './chart.configs';
+
+export * from './chart-legend/chart-legend.component';
diff --git a/libs/ui/src/lib/ui/chip/base-chip.component.ts b/libs/ui/src/lib/ui/chip/base-chip.component.ts
index 1c26206..3091d96 100644
--- a/libs/ui/src/lib/ui/chip/base-chip.component.ts
+++ b/libs/ui/src/lib/ui/chip/base-chip.component.ts
@@ -1,56 +1,56 @@
-// Angular
-import { Directive, HostBinding, input } from '@angular/core';
-
-// Style definitions
-import { ComponentFamilyClass, density, mode, styleType } from '../../styles';
-import { chipColor } from './entities/chip.model';
-@Directive()
-export abstract class PiBaseChipComponent {
- @HostBinding('class') get classes(): string {
+// Angular
+import { Directive, HostBinding, input } from '@angular/core';
+
+// Style definitions
+import { ComponentFamilyClass, density, mode, styleType } from '../../styles';
+import { chipColor } from './entities/chip.model';
+@Directive()
+export abstract class PiBaseChipComponent {
+ @HostBinding('class') get classes(): string {
const color = this.color();
- const colorClass = color && `pi-color__${color}`;
+ const colorClass = color && `pi-color__${color}`;
const size = this.size();
- const sizeClass = size && `pi-chip__size--${size}`;
- const affixClass = this.icon() || this.value() ? 'has-affix' : '';
+ const sizeClass = size && `pi-chip__size--${size}`;
+ const affixClass = this.icon() || this.value() ? 'has-affix' : '';
const affixAppearance = this.affixAppearance();
- const appearanceClass =
- affixAppearance && `pi-chip__affix-appearance--${affixAppearance}`;
+ const appearanceClass =
+ affixAppearance && `pi-chip__affix-appearance--${affixAppearance}`;
const modeValue = this.mode();
- const colorModeClass = modeValue && `pi-color__mode--${modeValue}`;
- const isDisabledClass = this.isDisabled() ? 'is-disabled' : '';
- const isClosableClass = this.isClosable() ? 'is-closable' : '';
- const fillClass = this.fill() !== 'fit-content' && 'pi-chip__fill--fill-available';
- return [
- ComponentFamilyClass.Chip,
- colorClass,
- sizeClass,
- isDisabledClass,
- appearanceClass,
- affixClass,
- colorModeClass,
- isClosableClass,
- fillClass,
- ].join(' ');
- }
- // Content
- readonly label = input();
- readonly value = input();
- readonly icon = input();
-
- // Skin
- readonly color = input();
-
- readonly mode = input('light');
- readonly size = input<'small' | 'medium' | 'large'>('small');
- readonly fill = input<'fit-content' | 'fill-available'>('fit-content');
-
- // Affix
- readonly affixAppearance = input<'fill' | 'ghost'>('ghost');
- readonly affixPosition = input<'previous' | 'after'>('after');
-
- // Behavior
- readonly isClosable = input(true);
-
- // Status
- readonly isDisabled = input(false);
-}
+ const colorModeClass = modeValue && `pi-color__mode--${modeValue}`;
+ const isDisabledClass = this.isDisabled() ? 'is-disabled' : '';
+ const isClosableClass = this.isClosable() ? 'is-closable' : '';
+ const fillClass = this.fill() !== 'fit-content' && 'pi-chip__fill--fill-available';
+ return [
+ ComponentFamilyClass.Chip,
+ colorClass,
+ sizeClass,
+ isDisabledClass,
+ appearanceClass,
+ affixClass,
+ colorModeClass,
+ isClosableClass,
+ fillClass,
+ ].join(' ');
+ }
+ // Content
+ readonly label = input();
+ readonly value = input();
+ readonly icon = input();
+
+ // Skin
+ readonly color = input();
+
+ readonly mode = input('light');
+ readonly size = input<'small' | 'medium' | 'large'>('small');
+ readonly fill = input<'fit-content' | 'fill-available'>('fit-content');
+
+ // Affix
+ readonly affixAppearance = input<'fill' | 'ghost'>('ghost');
+ readonly affixPosition = input<'previous' | 'after'>('after');
+
+ // Behavior
+ readonly isClosable = input(true);
+
+ // Status
+ readonly isDisabled = input(false);
+}
diff --git a/libs/ui/src/lib/ui/chip/chip-action/chip-action.component.html b/libs/ui/src/lib/ui/chip/chip-action/chip-action.component.html
index 9c74783..35e5ce8 100644
--- a/libs/ui/src/lib/ui/chip/chip-action/chip-action.component.html
+++ b/libs/ui/src/lib/ui/chip/chip-action/chip-action.component.html
@@ -1,21 +1,21 @@
-
-
- {{ label() }}
-
-
- {{ value() }}
-
-
-
-
-
+
+
+ {{ label() }}
+
+
+ {{ value() }}
+
+
+
+
+
diff --git a/libs/ui/src/lib/ui/chip/chip-action/chip-action.component.scss b/libs/ui/src/lib/ui/chip/chip-action/chip-action.component.scss
index 09cfada..e0dffbb 100644
--- a/libs/ui/src/lib/ui/chip/chip-action/chip-action.component.scss
+++ b/libs/ui/src/lib/ui/chip/chip-action/chip-action.component.scss
@@ -1,62 +1,62 @@
-@mixin chipActionColor($color) {
- border: 1px solid;
- transition: var(--pi-animation);
-
- // Is Active
- &.is-active {
- background-color: var(--pi-color-#{$color}-50);
- border-color: var(--pi-color-#{$color}-100);
- }
-
- &:not(.is-active):not(.is-disabled) {
- background-color: var(--pi-color-white);
- border-color: var(--pi-color-#{$color}-100);
- color: var(--pi-color-#{$color});
- }
- // Hover
- &:hover {
- cursor: pointer;
-
- &:not(.is-disabled) {
- background-color: var(--pi-color-#{$color}-50);
- border-color: var(--pi-color-#{$color}-75);
- color: var(--pi-color-#{$color}-900);
- }
- }
-}
-
-:host {
- & > span {
- gap: var(--pi-spacing-x-small);
- }
-
- &.pi-chip__affix-position--previous {
- &.has-affix {
- & > span {
- & > div {
- flex-direction: row-reverse;
- }
- }
- }
- }
- // Colors
- // Primary
- &.pi-color__primary {
- @include chipActionColor(primary);
- }
-
- // Accent
- &.pi-color__accent {
- @include chipActionColor(accent);
- }
-
- // Highlighted
- &.pi-color__highlighted {
- @include chipActionColor(highlighted);
- }
-
- // Grey
- &.pi-color__grey {
- @include chipActionColor(grey);
- }
-}
+@mixin chipActionColor($color) {
+ border: 1px solid;
+ transition: var(--pi-animation);
+
+ // Is Active
+ &.is-active {
+ background-color: var(--pi-color-#{$color}-50);
+ border-color: var(--pi-color-#{$color}-100);
+ }
+
+ &:not(.is-active):not(.is-disabled) {
+ background-color: var(--pi-color-white);
+ border-color: var(--pi-color-#{$color}-100);
+ color: var(--pi-color-#{$color});
+ }
+ // Hover
+ &:hover {
+ cursor: pointer;
+
+ &:not(.is-disabled) {
+ background-color: var(--pi-color-#{$color}-50);
+ border-color: var(--pi-color-#{$color}-75);
+ color: var(--pi-color-#{$color}-900);
+ }
+ }
+}
+
+:host {
+ & > span {
+ gap: var(--pi-spacing-x-small);
+ }
+
+ &.pi-chip__affix-position--previous {
+ &.has-affix {
+ & > span {
+ & > div {
+ flex-direction: row-reverse;
+ }
+ }
+ }
+ }
+ // Colors
+ // Primary
+ &.pi-color__primary {
+ @include chipActionColor(primary);
+ }
+
+ // Accent
+ &.pi-color__accent {
+ @include chipActionColor(accent);
+ }
+
+ // Highlighted
+ &.pi-color__highlighted {
+ @include chipActionColor(highlighted);
+ }
+
+ // Grey
+ &.pi-color__grey {
+ @include chipActionColor(grey);
+ }
+}
diff --git a/libs/ui/src/lib/ui/chip/chip-action/chip-action.component.ts b/libs/ui/src/lib/ui/chip/chip-action/chip-action.component.ts
index b0a5f69..976fabf 100644
--- a/libs/ui/src/lib/ui/chip/chip-action/chip-action.component.ts
+++ b/libs/ui/src/lib/ui/chip/chip-action/chip-action.component.ts
@@ -4,56 +4,56 @@ import {
HostBinding,
input,
output
-} from '@angular/core';
-import { ComponentFamilyClass, mode, styleType } from '../../../styles';
-import { PiBaseChipComponent } from '../base-chip.component';
+} from '@angular/core';
+import { ComponentFamilyClass, mode, styleType } from '../../../styles';
+import { PiBaseChipComponent } from '../base-chip.component';
import { chipColor } from '../entities/chip.model';
import { NgIf } from '@angular/common';
-import { MatIcon } from '@angular/material/icon';
-
+import { MatIcon } from '@angular/material/icon';
+
@Component({
selector: 'pi-chip-action',
templateUrl: './chip-action.component.html',
styleUrls: ['./chip-action.component.scss', '../styles/base-chip.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [NgIf, MatIcon],
-})
-export class PiChipActionComponent extends PiBaseChipComponent {
- @HostBinding('class') get actionClasses(): string {
- const hasActionIconClass = this.hasActionIcon() && 'has-action';
- const isActiveClass = this.isActive() ? 'is-active' : '';
- /**
- * When the chip action is dismissible, the affix position will be always previous,
- that's why we force the position--previous class binding
- */
+})
+export class PiChipActionComponent extends PiBaseChipComponent {
+ @HostBinding('class') get actionClasses(): string {
+ const hasActionIconClass = this.hasActionIcon() && 'has-action';
+ const isActiveClass = this.isActive() ? 'is-active' : '';
+ /**
+ * When the chip action is dismissible, the affix position will be always previous,
+ that's why we force the position--previous class binding
+ */
const affixPosition = this.affixPosition();
- const isClosableAffixPositionClass =
- this.isClosable() && affixPosition === 'after'
- ? 'pi-chip__affix-position--previous'
- : `pi-chip__affix-position--${affixPosition}`;
+ const isClosableAffixPositionClass =
+ this.isClosable() && affixPosition === 'after'
+ ? 'pi-chip__affix-position--previous'
+ : `pi-chip__affix-position--${affixPosition}`;
const affixPositionValue = this.affixPosition();
- const affixPositionClass =
- affixPositionValue && `pi-chip__affix-position--${affixPositionValue}`;
-
- return [
- 'pi-chip-action',
- ComponentFamilyClass.Chip,
- hasActionIconClass,
- isActiveClass,
- isClosableAffixPositionClass,
- affixPositionClass,
- ].join(' ');
- }
-
- readonly execute = output();
-
- // Content
- readonly hasActionIcon = input(true);
-
- // Skin
- override readonly size = input<'small' | 'medium' | 'large'>('small');
- override readonly color = input('primary');
-
- // Status
- readonly isActive = input.required();
-}
+ const affixPositionClass =
+ affixPositionValue && `pi-chip__affix-position--${affixPositionValue}`;
+
+ return [
+ 'pi-chip-action',
+ ComponentFamilyClass.Chip,
+ hasActionIconClass,
+ isActiveClass,
+ isClosableAffixPositionClass,
+ affixPositionClass,
+ ].join(' ');
+ }
+
+ readonly execute = output();
+
+ // Content
+ readonly hasActionIcon = input(true);
+
+ // Skin
+ override readonly size = input<'small' | 'medium' | 'large'>('small');
+ override readonly color = input('primary');
+
+ // Status
+ readonly isActive = input.required();
+}
diff --git a/libs/ui/src/lib/ui/chip/chip-date/chip-date.component.html b/libs/ui/src/lib/ui/chip/chip-date/chip-date.component.html
index 8be6d76..7c8c99b 100644
--- a/libs/ui/src/lib/ui/chip/chip-date/chip-date.component.html
+++ b/libs/ui/src/lib/ui/chip/chip-date/chip-date.component.html
@@ -1,5 +1,5 @@
-
- {{ dateValue?.weekDay }}
- {{ dateValue?.day }}
- {{ dateValue?.month.toUpperCase() }}
-
+
+ {{ dateValue?.weekDay }}
+ {{ dateValue?.day }}
+ {{ dateValue?.month.toUpperCase() }}
+
diff --git a/libs/ui/src/lib/ui/chip/chip-date/chip-date.component.scss b/libs/ui/src/lib/ui/chip/chip-date/chip-date.component.scss
index 841e47a..1291e22 100644
--- a/libs/ui/src/lib/ui/chip/chip-date/chip-date.component.scss
+++ b/libs/ui/src/lib/ui/chip/chip-date/chip-date.component.scss
@@ -1,169 +1,169 @@
-@mixin columnChipDateSize($size, $gap, $radius) {
- &.pi-chip-date__flex-direction--column,
- &.has-weekday.pi-chip-date__flex-direction--row {
- width: $size;
- height: $size;
- border-radius: $radius;
- -webkit-border-radius: $radius;
- -moz-border-radius: $radius;
- & > span {
- gap: $gap;
- }
- }
-}
-
-@mixin rowChipDateSize($height, $padding, $radius) {
- // Without Weekday
- &:not(.has-weekday) {
- // Flex direction
- // Column
- // Row
- &.pi-chip-date__flex-direction--row {
- height: $height;
- padding-left: $padding;
- padding-right: $padding;
- border-radius: $radius;
- -webkit-border-radius: $radius;
- -moz-border-radius: $radius;
- }
- }
-}
-
-@mixin chipDateFontSizes($day-size, $month-size) {
- // Day
- .pi-chip-date__day {
- font: {
- size: $day-size;
- }
- }
- // Month
- .pi-chip-date__month {
- font: {
- size: $month-size;
- }
- }
-}
-
-@mixin chipDateColor($color) {
- &.is-clickable {
- cursor: pointer;
- // Hover
- &:hover {
- &:not(.is-active):not(.is-disabled) {
- background-color: var(--pi-color-#{$color}-75);
- color: var(--pi-color-#{$color});
- }
- }
- // Is Active
- &.is-active {
- background-color: var(--pi-color-#{$color}-50);
- border: 1px solid;
- border-color: var(--pi-color-#{$color}-75);
- }
-
- &:not(.is-active):not(.is-disabled) {
- border: 1px solid;
- border-color: var(--pi-color-#{$color}-75);
- color: var(--pi-color-#{$color});
- background-color: var(--pi-color-white);
- }
- }
- &:not(.is-clickable) {
- background-color: var(--pi-color-#{$color}-25);
- color: var(--pi-color-#{$color});
- &.is-stroked {
- border: 1px solid;
- border-color: var(--pi-color-#{$color}-50);
- }
- }
-}
-
-@mixin chipDateFlexDirection {
- &.pi-chip-date__flex-direction--column,
- &.has-weekday.pi-chip-date__flex-direction--row {
- & > span {
- flex-direction: column;
- align-items: center;
- }
- }
- &:not(.has-weekday) {
- &.pi-chip-date__flex-direction--row {
- & > span {
- flex-direction: row;
- align-items: baseline;
- }
- }
- }
-}
-
-:host {
- justify-content: center;
- & > span {
- display: flex;
- justify-content: center;
- gap: var(--pi-spacing-xxxx-small);
- }
- // Day
- .pi-chip-date__day {
- margin-bottom: unset;
- font: {
- weight: 600;
- }
- }
- // Weekday
- .pi-chip-date__weekday {
- font: {
- size: var(--pi-font-size-x-small);
- }
- }
- // Colors
- // Primary
- &.pi-color__primary {
- @include chipDateColor(primary);
- }
- // Accent
- &.pi-color__accent {
- @include chipDateColor(accent);
- }
- // Highlighted
- &.pi-color__highlighted {
- @include chipDateColor(highlighted);
- }
- // Grey
- &.pi-color__grey {
- @include chipDateColor(grey);
- }
-
- // Flex direction
- @include chipDateFlexDirection;
-
- // Sizes
- // Small
- &.pi-chip__size--small {
- @include columnChipDateSize(
- var(--pi-spacing-xxx-large),
- var(--pi-spacing-xxxx-small),
- 0.875rem
- );
- @include rowChipDateSize(var(--pi-spacing-x-large), var(--pi-spacing-x-small), 0.5rem);
- @include chipDateFontSizes(var(--pi-font-size-x-small), var(--pi-font-size-xxx-small));
- }
-
- // Medium
- &.pi-chip__size--medium {
- @include columnChipDateSize(
- var(--pi-spacing-xxxx-large),
- var(--pi-spacing-xxxx-small),
- var(--pi-border-radius-medium)
- );
- @include rowChipDateSize(var(--pi-spacing-xx-large), var(--pi-spacing-small), 0.75rem);
- @include chipDateFontSizes(var(--pi-font-size-small), var(--pi-font-size-xx-small));
- }
-
- // Large (Has Weekday)
- &.pi-chip__size--large,
- &.has-weekday {
- @include columnChipDateSize(4.5rem, var(--pi-spacing-xxx-small), 1.25rem);
- @include chipDateFontSizes(var(--pi-font-size-large), var(--pi-font-size-xx-small));
- }
-}
+@mixin columnChipDateSize($size, $gap, $radius) {
+ &.pi-chip-date__flex-direction--column,
+ &.has-weekday.pi-chip-date__flex-direction--row {
+ width: $size;
+ height: $size;
+ border-radius: $radius;
+ -webkit-border-radius: $radius;
+ -moz-border-radius: $radius;
+ & > span {
+ gap: $gap;
+ }
+ }
+}
+
+@mixin rowChipDateSize($height, $padding, $radius) {
+ // Without Weekday
+ &:not(.has-weekday) {
+ // Flex direction
+ // Column
+ // Row
+ &.pi-chip-date__flex-direction--row {
+ height: $height;
+ padding-left: $padding;
+ padding-right: $padding;
+ border-radius: $radius;
+ -webkit-border-radius: $radius;
+ -moz-border-radius: $radius;
+ }
+ }
+}
+
+@mixin chipDateFontSizes($day-size, $month-size) {
+ // Day
+ .pi-chip-date__day {
+ font: {
+ size: $day-size;
+ }
+ }
+ // Month
+ .pi-chip-date__month {
+ font: {
+ size: $month-size;
+ }
+ }
+}
+
+@mixin chipDateColor($color) {
+ &.is-clickable {
+ cursor: pointer;
+ // Hover
+ &:hover {
+ &:not(.is-active):not(.is-disabled) {
+ background-color: var(--pi-color-#{$color}-75);
+ color: var(--pi-color-#{$color});
+ }
+ }
+ // Is Active
+ &.is-active {
+ background-color: var(--pi-color-#{$color}-50);
+ border: 1px solid;
+ border-color: var(--pi-color-#{$color}-75);
+ }
+
+ &:not(.is-active):not(.is-disabled) {
+ border: 1px solid;
+ border-color: var(--pi-color-#{$color}-75);
+ color: var(--pi-color-#{$color});
+ background-color: var(--pi-color-white);
+ }
+ }
+ &:not(.is-clickable) {
+ background-color: var(--pi-color-#{$color}-25);
+ color: var(--pi-color-#{$color});
+ &.is-stroked {
+ border: 1px solid;
+ border-color: var(--pi-color-#{$color}-50);
+ }
+ }
+}
+
+@mixin chipDateFlexDirection {
+ &.pi-chip-date__flex-direction--column,
+ &.has-weekday.pi-chip-date__flex-direction--row {
+ & > span {
+ flex-direction: column;
+ align-items: center;
+ }
+ }
+ &:not(.has-weekday) {
+ &.pi-chip-date__flex-direction--row {
+ & > span {
+ flex-direction: row;
+ align-items: baseline;
+ }
+ }
+ }
+}
+
+:host {
+ justify-content: center;
+ & > span {
+ display: flex;
+ justify-content: center;
+ gap: var(--pi-spacing-xxxx-small);
+ }
+ // Day
+ .pi-chip-date__day {
+ margin-bottom: unset;
+ font: {
+ weight: 600;
+ }
+ }
+ // Weekday
+ .pi-chip-date__weekday {
+ font: {
+ size: var(--pi-font-size-x-small);
+ }
+ }
+ // Colors
+ // Primary
+ &.pi-color__primary {
+ @include chipDateColor(primary);
+ }
+ // Accent
+ &.pi-color__accent {
+ @include chipDateColor(accent);
+ }
+ // Highlighted
+ &.pi-color__highlighted {
+ @include chipDateColor(highlighted);
+ }
+ // Grey
+ &.pi-color__grey {
+ @include chipDateColor(grey);
+ }
+
+ // Flex direction
+ @include chipDateFlexDirection;
+
+ // Sizes
+ // Small
+ &.pi-chip__size--small {
+ @include columnChipDateSize(
+ var(--pi-spacing-xxx-large),
+ var(--pi-spacing-xxxx-small),
+ 0.875rem
+ );
+ @include rowChipDateSize(var(--pi-spacing-x-large), var(--pi-spacing-x-small), 0.5rem);
+ @include chipDateFontSizes(var(--pi-font-size-x-small), var(--pi-font-size-xxx-small));
+ }
+
+ // Medium
+ &.pi-chip__size--medium {
+ @include columnChipDateSize(
+ var(--pi-spacing-xxxx-large),
+ var(--pi-spacing-xxxx-small),
+ var(--pi-border-radius-medium)
+ );
+ @include rowChipDateSize(var(--pi-spacing-xx-large), var(--pi-spacing-small), 0.75rem);
+ @include chipDateFontSizes(var(--pi-font-size-small), var(--pi-font-size-xx-small));
+ }
+
+ // Large (Has Weekday)
+ &.pi-chip__size--large,
+ &.has-weekday {
+ @include columnChipDateSize(4.5rem, var(--pi-spacing-xxx-small), 1.25rem);
+ @include chipDateFontSizes(var(--pi-font-size-large), var(--pi-font-size-xx-small));
+ }
+}
diff --git a/libs/ui/src/lib/ui/chip/chip-date/chip-date.component.ts b/libs/ui/src/lib/ui/chip/chip-date/chip-date.component.ts
index 4251992..2310a38 100644
--- a/libs/ui/src/lib/ui/chip/chip-date/chip-date.component.ts
+++ b/libs/ui/src/lib/ui/chip/chip-date/chip-date.component.ts
@@ -4,72 +4,72 @@ import {
HostBinding,
input,
output
-} from '@angular/core';
-import { chipColor } from '../entities/chip.model';
-import { ComponentFamilyClass, theming } from '../../../styles';
-import { Date } from '../../../util/models';
-import { PiBaseChipComponent } from '../base-chip.component';
-import { DateTime } from 'luxon';
+} from '@angular/core';
+import { chipColor } from '../entities/chip.model';
+import { ComponentFamilyClass, theming } from '../../../styles';
+import { Date } from '../../../util/models';
+import { PiBaseChipComponent } from '../base-chip.component';
+import { DateTime } from 'luxon';
import _ from 'lodash';
-import { NgIf } from '@angular/common';
-
+import { NgIf } from '@angular/common';
+
@Component({
selector: 'pi-chip-date',
templateUrl: './chip-date.component.html',
styleUrls: ['./chip-date.component.scss', '../styles/base-chip.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [NgIf],
-})
-export class PiChipDateComponent extends PiBaseChipComponent {
- @HostBinding('class') get dateClasses(): string {
+})
+export class PiChipDateComponent extends PiBaseChipComponent {
+ @HostBinding('class') get dateClasses(): string {
const color = this.color();
- const colorClass = color && `pi-color__${color}`;
- const isClickableClass = this.isClickable() ? 'is-clickable' : '';
- const isStrokeClass = !this.isClickable() && !!this.isStroked() && 'is-stroked';
- const isActiveClass = !!this.isActive() ? 'is-active' : '';
- const hasWeekDayClass = this.size() === 'large' ? 'has-weekday' : '';
+ const colorClass = color && `pi-color__${color}`;
+ const isClickableClass = this.isClickable() ? 'is-clickable' : '';
+ const isStrokeClass = !this.isClickable() && !!this.isStroked() && 'is-stroked';
+ const isActiveClass = !!this.isActive() ? 'is-active' : '';
+ const hasWeekDayClass = this.size() === 'large' ? 'has-weekday' : '';
const flexDirection = this.flexDirection();
- const flexDirectionClass =
- flexDirection && `pi-chip-date__flex-direction--${flexDirection}`;
- return [
- 'pi-chip-date',
- ComponentFamilyClass.Chip,
- colorClass,
- isClickableClass,
- isStrokeClass,
- isActiveClass,
- hasWeekDayClass,
- flexDirectionClass,
- ].join(' ');
- }
-
- readonly click = output();
-
- // Content
- readonly date = input.required(); // ISO format in UTC time zone
-
- // Skin
- override readonly color = input('primary');
- readonly isStroked = input(false);
-
- // Size - weekday only available in LARGE
- // No weekday - available in SMALL and MEDIUM
- // row direction only available in S and M
- override readonly size = input<'small' | 'medium' | 'large'>('small');
-
- readonly flexDirection = input<'row' | 'column'>('column');
-
- // Status
- readonly isClickable = input(true);
- readonly isActive = input.required();
-
- get dateValue(): Date {
- const dateObj = DateTime.fromISO(this.date()).setLocale('es');
- const isDateToday = dateObj.hasSame(DateTime.now(), 'day');
- return {
- day: dateObj.day.toString() || '',
- month: dateObj.monthShort || '',
- weekDay: isDateToday ? _.capitalize(dateObj.toRelativeCalendar()) : _.capitalize(dateObj.weekdayShort || ''),
- };
- }
-}
+ const flexDirectionClass =
+ flexDirection && `pi-chip-date__flex-direction--${flexDirection}`;
+ return [
+ 'pi-chip-date',
+ ComponentFamilyClass.Chip,
+ colorClass,
+ isClickableClass,
+ isStrokeClass,
+ isActiveClass,
+ hasWeekDayClass,
+ flexDirectionClass,
+ ].join(' ');
+ }
+
+ readonly click = output();
+
+ // Content
+ readonly date = input.required(); // ISO format in UTC time zone
+
+ // Skin
+ override readonly color = input('primary');
+ readonly isStroked = input(false);
+
+ // Size - weekday only available in LARGE
+ // No weekday - available in SMALL and MEDIUM
+ // row direction only available in S and M
+ override readonly size = input<'small' | 'medium' | 'large'>('small');
+
+ readonly flexDirection = input<'row' | 'column'>('column');
+
+ // Status
+ readonly isClickable = input(true);
+ readonly isActive = input.required();
+
+ get dateValue(): Date {
+ const dateObj = DateTime.fromISO(this.date()).setLocale('es');
+ const isDateToday = dateObj.hasSame(DateTime.now(), 'day');
+ return {
+ day: dateObj.day.toString() || '',
+ month: dateObj.monthShort || '',
+ weekDay: isDateToday ? _.capitalize(dateObj.toRelativeCalendar() ?? '') : _.capitalize(dateObj.weekdayShort || ''),
+ };
+ }
+}
diff --git a/libs/ui/src/lib/ui/chip/chip-status/chip-status.component.html b/libs/ui/src/lib/ui/chip/chip-status/chip-status.component.html
index 50ea27b..8394bb9 100644
--- a/libs/ui/src/lib/ui/chip/chip-status/chip-status.component.html
+++ b/libs/ui/src/lib/ui/chip/chip-status/chip-status.component.html
@@ -1,6 +1,6 @@
-
- {{ label() }}
-
-
-
-
+
+ {{ label() }}
+
+
+
+
diff --git a/libs/ui/src/lib/ui/chip/chip-status/chip-status.component.scss b/libs/ui/src/lib/ui/chip/chip-status/chip-status.component.scss
index ba12cb1..4ef25fb 100644
--- a/libs/ui/src/lib/ui/chip/chip-status/chip-status.component.scss
+++ b/libs/ui/src/lib/ui/chip/chip-status/chip-status.component.scss
@@ -1,28 +1,28 @@
-:host {
- // Affix position
- // Previous
- &.pi-chip__affix-position--previous {
- & > span {
- flex-direction: row-reverse;
- }
- }
- // Color
- $status-colors: (
- (success, success),
- (error, warn),
- (pending, accent),
- (info, primary),
- (disabled, grey)
- );
-
- @each $status, $color in $status-colors {
- &.is-#{$status} {
- color: var(--pi-color-#{$color});
-
- // Fill
- &.pi-chip-status__appearance--fill {
- background-color: var(--pi-color-#{$color}-50);
- }
- }
- }
-}
+:host {
+ // Affix position
+ // Previous
+ &.pi-chip__affix-position--previous {
+ & > span {
+ flex-direction: row-reverse;
+ }
+ }
+ // Color
+ $status-colors: (
+ (success, success),
+ (error, warn),
+ (pending, accent),
+ (info, primary),
+ (disabled, grey)
+ );
+
+ @each $status, $color in $status-colors {
+ &.is-#{$status} {
+ color: var(--pi-color-#{$color});
+
+ // Fill
+ &.pi-chip-status__appearance--fill {
+ background-color: var(--pi-color-#{$color}-50);
+ }
+ }
+ }
+}
diff --git a/libs/ui/src/lib/ui/chip/chip-status/chip-status.component.ts b/libs/ui/src/lib/ui/chip/chip-status/chip-status.component.ts
index a172dd1..209f94d 100644
--- a/libs/ui/src/lib/ui/chip/chip-status/chip-status.component.ts
+++ b/libs/ui/src/lib/ui/chip/chip-status/chip-status.component.ts
@@ -1,37 +1,37 @@
-import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core';
-
-// Shared
-import { status } from '../../../util/status';
+import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core';
+
+// Shared
+import { status } from '../../../util/status';
import { PiBaseChipComponent } from '../base-chip.component';
import { NgIf } from '@angular/common';
-import { MatIcon } from '@angular/material/icon';
-
+import { MatIcon } from '@angular/material/icon';
+
@Component({
selector: 'pi-chip-status',
templateUrl: './chip-status.component.html',
styleUrls: ['./chip-status.component.scss', '../styles/base-chip.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [NgIf, MatIcon],
-})
-export class PiChipStatusComponent extends PiBaseChipComponent {
- @HostBinding('class') get statusClasses(): string {
+})
+export class PiChipStatusComponent extends PiBaseChipComponent {
+ @HostBinding('class') get statusClasses(): string {
const statusValue = this.status();
- const statusClass = statusValue && `is-${statusValue}`;
- const appearanceClass = `pi-chip-status__appearance--${this.appearance()}`;
- const hasLabelClass = !this.label() ? 'pi-chip__single-icon' : '';
+ const statusClass = statusValue && `is-${statusValue}`;
+ const appearanceClass = `pi-chip-status__appearance--${this.appearance()}`;
+ const hasLabelClass = !this.label() ? 'pi-chip__single-icon' : '';
const affixPosition = this.affixPosition();
- const affixPositionClass =
- affixPosition && `pi-chip__affix-position--${affixPosition}`;
- return ['pi-chip-status', statusClass, appearanceClass, hasLabelClass, affixPositionClass].join(
- ' '
- );
- }
-
- // Skin
- readonly appearance = input<'ghost' | 'fill'>('fill');
- override readonly affixPosition = input<'previous' | 'after'>('previous');
- override readonly size = input<'small' | 'medium' | 'large'>('small');
-
- /* green | red | yellow | blue | opacity */
- readonly status = input.required();
-}
+ const affixPositionClass =
+ affixPosition && `pi-chip__affix-position--${affixPosition}`;
+ return ['pi-chip-status', statusClass, appearanceClass, hasLabelClass, affixPositionClass].join(
+ ' '
+ );
+ }
+
+ // Skin
+ readonly appearance = input<'ghost' | 'fill'>('fill');
+ override readonly affixPosition = input<'previous' | 'after'>('previous');
+ override readonly size = input<'small' | 'medium' | 'large'>('small');
+
+ /* green | red | yellow | blue | opacity */
+ readonly status = input.required();
+}
diff --git a/libs/ui/src/lib/ui/chip/chip-time/chip-time.component.html b/libs/ui/src/lib/ui/chip/chip-time/chip-time.component.html
index f117788..119fa53 100644
--- a/libs/ui/src/lib/ui/chip/chip-time/chip-time.component.html
+++ b/libs/ui/src/lib/ui/chip/chip-time/chip-time.component.html
@@ -1,28 +1,28 @@
-
-
-
- {{ timeValue }}h
-
- {{ dateValue }}
-
-
-
-
-
-
-
-
-
- {{ timeValue }}h
-
- {{ dateValue }}
-
-
-
-
-
+
+
+
+ {{ timeValue }}h
+
+ {{ dateValue }}
+
+
+
+
+
+
+
+
+
+ {{ timeValue }}h
+
+ {{ dateValue }}
+
+
+
+
+
diff --git a/libs/ui/src/lib/ui/chip/chip-time/chip-time.component.scss b/libs/ui/src/lib/ui/chip/chip-time/chip-time.component.scss
index d237174..59a1743 100644
--- a/libs/ui/src/lib/ui/chip/chip-time/chip-time.component.scss
+++ b/libs/ui/src/lib/ui/chip/chip-time/chip-time.component.scss
@@ -1,154 +1,154 @@
-@mixin chipTimeSizes($min-width, $side-padding, $ghost-padding-left, $font-size) {
- gap: var(--pi-spacing-x-small);
- &.has-affix {
- min-width: $min-width;
- padding-left: var(--pi-spacing-#{$side-padding});
- padding-right: var(--pi-spacing-#{$side-padding});
- & > span {
- gap: var(--pi-spacing-small);
-
- .pi-chip-affix__value {
- font: {
- size: var(--pi-font-size-#{$font-size});
- }
- }
- }
- &.pi-chip__affix-appearance--fill {
- padding-left: var(--pi-spacing-#{$side-padding});
- }
- &.is-closable {
- &.pi-chip__affix-appearance--ghost {
- & > span {
- padding-left: var(--pi-spacing-#{$ghost-padding-left});
- }
- }
- }
- }
-}
-
-@mixin chipTimeCommonColor($color) {
- &:not([class*='white']) {
- &:not(.is-active):not(.is-disabled) {
- color: var(--pi-color-#{$color});
- }
- // Hover
- &:hover {
- &:not(.is-disabled) {
- &.is-closable {
- cursor: pointer;
- color: var(--pi-color-#{$color}-900);
- background-color: var(--pi-color-#{$color}-50);
- border-color: var(--pi-color-#{$color}-75);
- }
- }
- }
- // Is Active
- &.is-active {
- background-color: var(--pi-color-#{$color}-50);
- border-color: var(--pi-color-#{$color}-100);
- }
-
- // NOT Has affix
- &:not(.has-affix) {
- background-color: var(--pi-color-#{$color}-50);
- }
-
- // Has affix
- &.has-affix {
- border: 1px solid;
- &:not(.is-active):not(.is-disabled) {
- border-color: var(--pi-color-#{$color}-100);
- }
- }
- }
-}
-
-@mixin chipTimeWhiteColor($color) {
- &[class*='white'] {
- background-color: var(--pi-color-white);
- &:not(.is-active):not(.is-disabled) {
- color: var(--pi-color-#{$color});
- }
- // Hover
- &:hover {
- &:not(.is-disabled) {
- &.is-closable {
- cursor: pointer;
- color: var(--pi-color-#{$color}-900);
- border-color: var(--pi-color-#{$color}-75);
- }
- }
- }
- // Is Active
- &.is-active {
- border-color: var(--pi-color-#{$color}-100);
- }
-
- // Has affix
- &.has-affix {
- border: 1px solid;
- &:not(.is-active):not(.is-disabled) {
- border-color: var(--pi-color-#{$color}-100);
- }
- }
- }
-}
-:host {
- justify-content: center;
-
- // Affix appearance
- // Fill
- &.pi-chip__affix-appearance--fill {
- & > span {
- justify-content: space-between;
- }
- .pi-chip-affix {
- min-width: var(--pi-spacing-xxxx-large);
- }
- }
-
- // Colors
- // Primary
- &.pi-color__primary {
- @include chipTimeCommonColor(primary);
- }
- &.pi-color__primary-white {
- @include chipTimeWhiteColor(primary);
- }
-
- // Accent
- &.pi-color__accent {
- @include chipTimeCommonColor(accent);
- }
- &.pi-color__accent-white {
- @include chipTimeWhiteColor(accent);
- }
-
- // Highlighted
- &.pi-color__highlighted {
- @include chipTimeCommonColor(highlighted);
- }
- // Highlighted
- &.pi-color__highlighted-white {
- @include chipTimeWhiteColor(highlighted);
- }
-
- // Grey
- &.pi-color__grey {
- @include chipTimeCommonColor(grey);
- }
- // Highlighted
- &.pi-color__highlighted-white {
- @include chipTimeWhiteColor(grey-white);
- }
-
- // Sizes
- // Small
- &.pi-chip__size--small {
- @include chipTimeSizes(10rem, xxxx-small, x-small, xx-smal);
- }
- // Medium
- &.pi-chip__size--medium {
- @include chipTimeSizes(12rem, xxx-small, small, x-small);
- }
-}
+@mixin chipTimeSizes($min-width, $side-padding, $ghost-padding-left, $font-size) {
+ gap: var(--pi-spacing-x-small);
+ &.has-affix {
+ min-width: $min-width;
+ padding-left: var(--pi-spacing-#{$side-padding});
+ padding-right: var(--pi-spacing-#{$side-padding});
+ & > span {
+ gap: var(--pi-spacing-small);
+
+ .pi-chip-affix__value {
+ font: {
+ size: var(--pi-font-size-#{$font-size});
+ }
+ }
+ }
+ &.pi-chip__affix-appearance--fill {
+ padding-left: var(--pi-spacing-#{$side-padding});
+ }
+ &.is-closable {
+ &.pi-chip__affix-appearance--ghost {
+ & > span {
+ padding-left: var(--pi-spacing-#{$ghost-padding-left});
+ }
+ }
+ }
+ }
+}
+
+@mixin chipTimeCommonColor($color) {
+ &:not([class*='white']) {
+ &:not(.is-active):not(.is-disabled) {
+ color: var(--pi-color-#{$color});
+ }
+ // Hover
+ &:hover {
+ &:not(.is-disabled) {
+ &.is-closable {
+ cursor: pointer;
+ color: var(--pi-color-#{$color}-900);
+ background-color: var(--pi-color-#{$color}-50);
+ border-color: var(--pi-color-#{$color}-75);
+ }
+ }
+ }
+ // Is Active
+ &.is-active {
+ background-color: var(--pi-color-#{$color}-50);
+ border-color: var(--pi-color-#{$color}-100);
+ }
+
+ // NOT Has affix
+ &:not(.has-affix) {
+ background-color: var(--pi-color-#{$color}-50);
+ }
+
+ // Has affix
+ &.has-affix {
+ border: 1px solid;
+ &:not(.is-active):not(.is-disabled) {
+ border-color: var(--pi-color-#{$color}-100);
+ }
+ }
+ }
+}
+
+@mixin chipTimeWhiteColor($color) {
+ &[class*='white'] {
+ background-color: var(--pi-color-white);
+ &:not(.is-active):not(.is-disabled) {
+ color: var(--pi-color-#{$color});
+ }
+ // Hover
+ &:hover {
+ &:not(.is-disabled) {
+ &.is-closable {
+ cursor: pointer;
+ color: var(--pi-color-#{$color}-900);
+ border-color: var(--pi-color-#{$color}-75);
+ }
+ }
+ }
+ // Is Active
+ &.is-active {
+ border-color: var(--pi-color-#{$color}-100);
+ }
+
+ // Has affix
+ &.has-affix {
+ border: 1px solid;
+ &:not(.is-active):not(.is-disabled) {
+ border-color: var(--pi-color-#{$color}-100);
+ }
+ }
+ }
+}
+:host {
+ justify-content: center;
+
+ // Affix appearance
+ // Fill
+ &.pi-chip__affix-appearance--fill {
+ & > span {
+ justify-content: space-between;
+ }
+ .pi-chip-affix {
+ min-width: var(--pi-spacing-xxxx-large);
+ }
+ }
+
+ // Colors
+ // Primary
+ &.pi-color__primary {
+ @include chipTimeCommonColor(primary);
+ }
+ &.pi-color__primary-white {
+ @include chipTimeWhiteColor(primary);
+ }
+
+ // Accent
+ &.pi-color__accent {
+ @include chipTimeCommonColor(accent);
+ }
+ &.pi-color__accent-white {
+ @include chipTimeWhiteColor(accent);
+ }
+
+ // Highlighted
+ &.pi-color__highlighted {
+ @include chipTimeCommonColor(highlighted);
+ }
+ // Highlighted
+ &.pi-color__highlighted-white {
+ @include chipTimeWhiteColor(highlighted);
+ }
+
+ // Grey
+ &.pi-color__grey {
+ @include chipTimeCommonColor(grey);
+ }
+ // Highlighted
+ &.pi-color__highlighted-white {
+ @include chipTimeWhiteColor(grey-white);
+ }
+
+ // Sizes
+ // Small
+ &.pi-chip__size--small {
+ @include chipTimeSizes(10rem, xxxx-small, x-small, xx-smal);
+ }
+ // Medium
+ &.pi-chip__size--medium {
+ @include chipTimeSizes(12rem, xxx-small, small, x-small);
+ }
+}
diff --git a/libs/ui/src/lib/ui/chip/chip-time/chip-time.component.ts b/libs/ui/src/lib/ui/chip/chip-time/chip-time.component.ts
index c9d21bd..fba92b0 100644
--- a/libs/ui/src/lib/ui/chip/chip-time/chip-time.component.ts
+++ b/libs/ui/src/lib/ui/chip/chip-time/chip-time.component.ts
@@ -4,66 +4,66 @@ import {
HostBinding,
input,
output
-} from '@angular/core';
-import { chipColor } from '../entities/chip.model';
-import { ComponentFamilyClass } from '../../../styles';
-import { DateTime } from 'luxon';
-import { PiBaseChipComponent } from '../base-chip.component';
+} from '@angular/core';
+import { chipColor } from '../entities/chip.model';
+import { ComponentFamilyClass } from '../../../styles';
+import { DateTime } from 'luxon';
+import { PiBaseChipComponent } from '../base-chip.component';
import { chipThemingColor } from '../entities/chip.model';
import { NgIf } from '@angular/common';
-import { MatIcon } from '@angular/material/icon';
-
+import { MatIcon } from '@angular/material/icon';
+
@Component({
selector: 'pi-chip-time',
templateUrl: './chip-time.component.html',
styleUrls: ['./chip-time.component.scss', '../styles/base-chip.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [NgIf, MatIcon],
-})
-export class PiChipTimeComponent extends PiBaseChipComponent {
- @HostBinding('class') get dateClasses(): string {
+})
+export class PiChipTimeComponent extends PiBaseChipComponent {
+ @HostBinding('class') get dateClasses(): string {
const color = this.color();
- const colorClass = color && `pi-color__${color}`;
- const isActiveClass = this.isActive() ? 'is-active' : '';
- const affixClass = this.time() && this.date() ? 'has-affix' : '';
-
- return ['pi-chip-time', ComponentFamilyClass.Chip, colorClass, isActiveClass, affixClass].join(
- ' '
- );
- }
-
- readonly execute = output();
-
- // Content
- readonly date = input.required(); // ISO format in UTC time zone
- readonly time = input.required(); // ISO format in UTC time zone
- readonly timezone = input('utc');
-
- // Skin
- override readonly color = input('primary');
-
- /**
- * On the chip time cases, we override the affix position property because
- it will be always used by the thime input and will be always previous
- */
- override readonly affixPosition = input<'previous' | 'after'>('previous');
-
- // time - available in S and M
- // time + date - available in S
- override readonly size = input<'small' | 'medium' | 'large'>('small');
-
- // Status
- readonly isActive = input.required();
-
- get dateObj(): DateTime {
- return DateTime.fromISO(this.date(), { zone: 'utc' });
- }
-
- get timeValue(): string {
- return this.dateObj.setZone(this.timezone()).toFormat('H:mm');
- }
-
- get dateValue(): string {
- return this.dateObj.setLocale('es').toLocaleString(DateTime.DATE_MED);
- }
-}
+ const colorClass = color && `pi-color__${color}`;
+ const isActiveClass = this.isActive() ? 'is-active' : '';
+ const affixClass = this.time() && this.date() ? 'has-affix' : '';
+
+ return ['pi-chip-time', ComponentFamilyClass.Chip, colorClass, isActiveClass, affixClass].join(
+ ' '
+ );
+ }
+
+ readonly execute = output();
+
+ // Content
+ readonly date = input.required(); // ISO format in UTC time zone
+ readonly time = input.required(); // ISO format in UTC time zone
+ readonly timezone = input('utc');
+
+ // Skin
+ override readonly color = input('primary');
+
+ /**
+ * On the chip time cases, we override the affix position property because
+ it will be always used by the thime input and will be always previous
+ */
+ override readonly affixPosition = input<'previous' | 'after'>('previous');
+
+ // time - available in S and M
+ // time + date - available in S
+ override readonly size = input<'small' | 'medium' | 'large'>('small');
+
+ // Status
+ readonly isActive = input.required();
+
+ get dateObj(): DateTime {
+ return DateTime.fromISO(this.date(), { zone: 'utc' });
+ }
+
+ get timeValue(): string {
+ return this.dateObj.setZone(this.timezone()).toFormat('H:mm');
+ }
+
+ get dateValue(): string {
+ return this.dateObj.setLocale('es').toLocaleString(DateTime.DATE_MED);
+ }
+}
diff --git a/libs/ui/src/lib/ui/chip/chip-value/chip-value.component.html b/libs/ui/src/lib/ui/chip/chip-value/chip-value.component.html
index e359fd7..43544d0 100644
--- a/libs/ui/src/lib/ui/chip/chip-value/chip-value.component.html
+++ b/libs/ui/src/lib/ui/chip/chip-value/chip-value.component.html
@@ -1,11 +1,11 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/libs/ui/src/lib/ui/chip/chip-value/chip-value.component.scss b/libs/ui/src/lib/ui/chip/chip-value/chip-value.component.scss
index d38f9aa..8d78745 100644
--- a/libs/ui/src/lib/ui/chip/chip-value/chip-value.component.scss
+++ b/libs/ui/src/lib/ui/chip/chip-value/chip-value.component.scss
@@ -1,208 +1,208 @@
-// Structure
-// Chip value body
-@mixin chipValue {
- // Has label
- &.has-label {
- display: flex;
- align-items: center;
- justify-content: flex-end;
- }
-}
-
-// Font size
-@mixin chipValueFontSizes($value-font-size, $label-font-size, $unit-font-size) {
- // NOT Has label
- &:not(.has-label) {
- // Affix
- .pi-chip-affix {
- font: {
- size: var(--pi-font-size-#{$value-font-size});
- }
- }
- }
- // Has label
- &.has-label {
- // Label
- .pi-chip-label {
- font: {
- size: var(--pi-font-size-#{$label-font-size});
- }
- }
- // Affix
- .pi-chip-affix {
- // Value
- & > .pi-chip-affix__value {
- font: {
- size: var(--pi-font-size-#{$value-font-size});
- }
- }
- // Unit
- & > .pi-chip-affix__unit {
- font: {
- size: var(--pi-font-size-#{$unit-font-size});
- }
- }
- }
- }
-}
-
-// Chip Size
-@mixin chipValueSize(
- $gap,
- $chip-has-label-height,
- $chip-height,
- $padding-left,
- $padding-right,
- $chip-border-radius,
- $affix-border-radius
-) {
- // Has label
- &.has-label {
- height: var(--pi-spacing-#{$chip-has-label-height});
- padding-left: var(--pi-spacing-#{$padding-left});
- padding-right: var(--pi-spacing-#{$padding-right});
- border-radius: $chip-border-radius;
- -webkit-border-radius: $chip-border-radius;
- -moz-border-radius: $chip-border-radius;
- & > span {
- gap: var(--pi-spacing-#{$gap});
- }
- // Label
- .pi-chip-label {
- margin-top: var(--pi-spacing-xxxxx-small);
- }
- }
- // NOT Has label
- &:not(.has-label) {
- height: var(--pi-spacing-#{$chip-height});
- border-radius: $affix-border-radius;
- -webkit-border-radius: $affix-border-radius;
- -moz-border-radius: $affix-border-radius;
- }
-}
-
-@mixin chipValueAffixSize($gap, $height, $min-width, $border-radius) {
- & > span {
- // Affix wrapper
- & > aside {
- height: $height;
- min-width: $min-width;
- border-radius: $border-radius;
-
- & > .pi-chip-affix {
- gap: var(--pi-spacing-#{$gap});
- }
- }
- }
-}
-
-@mixin chipValueAffixSideSpacings($side-spacing) {
- .pi-chip-affix {
- padding-left: var(--pi-spacing-#{$side-spacing});
- padding-right: var(--pi-spacing-#{$side-spacing});
- }
-}
-
-// Affix
-@mixin chipValueAffix {
- & > span {
- // Affix wrapper
- & > aside {
- display: flex;
- justify-content: center;
- align-items: center;
-
- & > .pi-chip-affix {
- align-items: baseline;
- }
- }
- }
- // NOT Has label
- &:not(.has-label) {
- .pi-chip-affix {
- font: {
- weight: 600;
- }
- }
- }
- // Has label
- &.has-label {
- .pi-chip-affix {
- & > .pi-chip-affix__value {
- font: {
- weight: 600;
- }
- }
- }
- }
-}
-
-@mixin chipValueUnitPosition {
- &.pi-chip-value__unit-position--previous {
- & > span {
- & > aside {
- & > .pi-chip-affix {
- flex-direction: row-reverse;
- }
- }
- }
- }
-}
-
-// Color
-@mixin chipValueColor($color) {
- // Affix
- & > span {
- & > aside {
- background-color: var(--pi-color-#{$color}-25);
- color: var(--pi-color-#{$color});
- }
- }
-
- // Has label
- &.has-label {
- background-color: var(--pi-color-#{$color}-10);
- color: var(--pi-color-#{$color});
-
- & > span {
- label {
- color: var(--pi-color-#{$color});
- }
- }
- }
-}
-
-:host {
- // Structure
- @include chipValue;
-
- // Affix
- @include chipValueAffix;
- // Affix unit
- @include chipValueUnitPosition;
-
- // Size
- // Medium
- &.pi-chip__size--medium {
- @include chipValueFontSizes(small, x-small, x-small);
- @include chipValueSize(xx-small, xxx-large, x-large, small, xxx-small, 0.875rem, 0.75rem);
- @include chipValueAffixSize(xxxxx-small, var(--pi-spacing-xx-large), 3.6rem, 0.75rem);
- @include chipValueAffixSideSpacings(xx-small);
- }
- // Large
- &.pi-chip__size--large {
- @include chipValueFontSizes(medium, small, small);
- @include chipValueSize(xx-small, xxxx-large, xxx-large, medium, xxx-small, 1.125rem, 0.875rem);
- @include chipValueAffixSize(xxxx-small, 2.5rem, 4.25rem, 0.875rem);
- @include chipValueAffixSideSpacings(x-small);
- }
- // Colors
- // Success
- &.pi-color__success {
- @include chipValueColor(success);
- }
- // Warn
- &.pi-color__warn {
- @include chipValueColor(warn);
- }
-}
+// Structure
+// Chip value body
+@mixin chipValue {
+ // Has label
+ &.has-label {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ }
+}
+
+// Font size
+@mixin chipValueFontSizes($value-font-size, $label-font-size, $unit-font-size) {
+ // NOT Has label
+ &:not(.has-label) {
+ // Affix
+ .pi-chip-affix {
+ font: {
+ size: var(--pi-font-size-#{$value-font-size});
+ }
+ }
+ }
+ // Has label
+ &.has-label {
+ // Label
+ .pi-chip-label {
+ font: {
+ size: var(--pi-font-size-#{$label-font-size});
+ }
+ }
+ // Affix
+ .pi-chip-affix {
+ // Value
+ & > .pi-chip-affix__value {
+ font: {
+ size: var(--pi-font-size-#{$value-font-size});
+ }
+ }
+ // Unit
+ & > .pi-chip-affix__unit {
+ font: {
+ size: var(--pi-font-size-#{$unit-font-size});
+ }
+ }
+ }
+ }
+}
+
+// Chip Size
+@mixin chipValueSize(
+ $gap,
+ $chip-has-label-height,
+ $chip-height,
+ $padding-left,
+ $padding-right,
+ $chip-border-radius,
+ $affix-border-radius
+) {
+ // Has label
+ &.has-label {
+ height: var(--pi-spacing-#{$chip-has-label-height});
+ padding-left: var(--pi-spacing-#{$padding-left});
+ padding-right: var(--pi-spacing-#{$padding-right});
+ border-radius: $chip-border-radius;
+ -webkit-border-radius: $chip-border-radius;
+ -moz-border-radius: $chip-border-radius;
+ & > span {
+ gap: var(--pi-spacing-#{$gap});
+ }
+ // Label
+ .pi-chip-label {
+ margin-top: var(--pi-spacing-xxxxx-small);
+ }
+ }
+ // NOT Has label
+ &:not(.has-label) {
+ height: var(--pi-spacing-#{$chip-height});
+ border-radius: $affix-border-radius;
+ -webkit-border-radius: $affix-border-radius;
+ -moz-border-radius: $affix-border-radius;
+ }
+}
+
+@mixin chipValueAffixSize($gap, $height, $min-width, $border-radius) {
+ & > span {
+ // Affix wrapper
+ & > aside {
+ height: $height;
+ min-width: $min-width;
+ border-radius: $border-radius;
+
+ & > .pi-chip-affix {
+ gap: var(--pi-spacing-#{$gap});
+ }
+ }
+ }
+}
+
+@mixin chipValueAffixSideSpacings($side-spacing) {
+ .pi-chip-affix {
+ padding-left: var(--pi-spacing-#{$side-spacing});
+ padding-right: var(--pi-spacing-#{$side-spacing});
+ }
+}
+
+// Affix
+@mixin chipValueAffix {
+ & > span {
+ // Affix wrapper
+ & > aside {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ & > .pi-chip-affix {
+ align-items: baseline;
+ }
+ }
+ }
+ // NOT Has label
+ &:not(.has-label) {
+ .pi-chip-affix {
+ font: {
+ weight: 600;
+ }
+ }
+ }
+ // Has label
+ &.has-label {
+ .pi-chip-affix {
+ & > .pi-chip-affix__value {
+ font: {
+ weight: 600;
+ }
+ }
+ }
+ }
+}
+
+@mixin chipValueUnitPosition {
+ &.pi-chip-value__unit-position--previous {
+ & > span {
+ & > aside {
+ & > .pi-chip-affix {
+ flex-direction: row-reverse;
+ }
+ }
+ }
+ }
+}
+
+// Color
+@mixin chipValueColor($color) {
+ // Affix
+ & > span {
+ & > aside {
+ background-color: var(--pi-color-#{$color}-25);
+ color: var(--pi-color-#{$color});
+ }
+ }
+
+ // Has label
+ &.has-label {
+ background-color: var(--pi-color-#{$color}-10);
+ color: var(--pi-color-#{$color});
+
+ & > span {
+ label {
+ color: var(--pi-color-#{$color});
+ }
+ }
+ }
+}
+
+:host {
+ // Structure
+ @include chipValue;
+
+ // Affix
+ @include chipValueAffix;
+ // Affix unit
+ @include chipValueUnitPosition;
+
+ // Size
+ // Medium
+ &.pi-chip__size--medium {
+ @include chipValueFontSizes(small, x-small, x-small);
+ @include chipValueSize(xx-small, xxx-large, x-large, small, xxx-small, 0.875rem, 0.75rem);
+ @include chipValueAffixSize(xxxxx-small, var(--pi-spacing-xx-large), 3.6rem, 0.75rem);
+ @include chipValueAffixSideSpacings(xx-small);
+ }
+ // Large
+ &.pi-chip__size--large {
+ @include chipValueFontSizes(medium, small, small);
+ @include chipValueSize(xx-small, xxxx-large, xxx-large, medium, xxx-small, 1.125rem, 0.875rem);
+ @include chipValueAffixSize(xxxx-small, 2.5rem, 4.25rem, 0.875rem);
+ @include chipValueAffixSideSpacings(x-small);
+ }
+ // Colors
+ // Success
+ &.pi-color__success {
+ @include chipValueColor(success);
+ }
+ // Warn
+ &.pi-color__warn {
+ @include chipValueColor(warn);
+ }
+}
diff --git a/libs/ui/src/lib/ui/chip/chip-value/chip-value.component.ts b/libs/ui/src/lib/ui/chip/chip-value/chip-value.component.ts
index d748ef3..643ce63 100644
--- a/libs/ui/src/lib/ui/chip/chip-value/chip-value.component.ts
+++ b/libs/ui/src/lib/ui/chip/chip-value/chip-value.component.ts
@@ -1,36 +1,36 @@
-import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core';
-import { PiBaseChipComponent } from '../base-chip.component';
+import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core';
+import { PiBaseChipComponent } from '../base-chip.component';
import { unit } from '../../../util/models';
-import { NgIf } from '@angular/common';
-
+import { NgIf } from '@angular/common';
+
@Component({
selector: 'pi-chip-value',
templateUrl: './chip-value.component.html',
styleUrls: ['./chip-value.component.scss', '../styles/base-chip.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [NgIf],
-})
-export class PiChipValueComponent extends PiBaseChipComponent {
- @HostBinding('class') get valueClasses(): string {
- const colorClass = Number(this.value()) > 0 ? 'pi-color__success' : 'pi-color__warn';
- const hasLabelClass = !!this.label() ? 'has-label' : '';
+})
+export class PiChipValueComponent extends PiBaseChipComponent {
+ @HostBinding('class') get valueClasses(): string {
+ const colorClass = Number(this.value()) > 0 ? 'pi-color__success' : 'pi-color__warn';
+ const hasLabelClass = !!this.label() ? 'has-label' : '';
const unitPosition = this.unitPosition();
- const unitPositionClass =
- unitPosition && `pi-chip-value__unit-position--${unitPosition}`;
+ const unitPositionClass =
+ unitPosition && `pi-chip-value__unit-position--${unitPosition}`;
const affixPosition = this.affixPosition();
- const affixPositionClass =
- affixPosition && `pi-chip__affix-position--${affixPosition}`;
- return ['pi-chip-value', colorClass, hasLabelClass, unitPositionClass, affixPositionClass].join(
- ' '
- );
- }
-
- // Content
- readonly unit = input.required();
-
- // Skin
- override readonly size = input<'small' | 'medium' | 'large'>('large');
-
- // Unit
- readonly unitPosition = input<'previous' | 'after'>('after');
-}
+ const affixPositionClass =
+ affixPosition && `pi-chip__affix-position--${affixPosition}`;
+ return ['pi-chip-value', colorClass, hasLabelClass, unitPositionClass, affixPositionClass].join(
+ ' '
+ );
+ }
+
+ // Content
+ readonly unit = input.required();
+
+ // Skin
+ override readonly size = input<'small' | 'medium' | 'large'>('large');
+
+ // Unit
+ readonly unitPosition = input<'previous' | 'after'>('after');
+}
diff --git a/libs/ui/src/lib/ui/chip/chip/chip.component.html b/libs/ui/src/lib/ui/chip/chip/chip.component.html
index 371e994..1803356 100644
--- a/libs/ui/src/lib/ui/chip/chip/chip.component.html
+++ b/libs/ui/src/lib/ui/chip/chip/chip.component.html
@@ -1,23 +1,23 @@
-
- {{ label() }}
-
-
-
-  }}.svg)
-
-
-
-
- {{ value() }}
-
-
+
+ {{ label() }}
+
+
+
+
+
+
+
+
+ {{ value() }}
+
+
diff --git a/libs/ui/src/lib/ui/chip/chip/chip.component.scss b/libs/ui/src/lib/ui/chip/chip/chip.component.scss
index d5f0dcc..bbd789b 100644
--- a/libs/ui/src/lib/ui/chip/chip/chip.component.scss
+++ b/libs/ui/src/lib/ui/chip/chip/chip.component.scss
@@ -1,37 +1,37 @@
-@mixin chipColor($color) {
- // Outline
- &.pi-chip__appearance--outline {
- border: 1px solid;
- background-color: var(--pi-color-white);
- color: var(--pi-color-#{$color});
- border-color: var(--pi-color-#{$color}-50);
- }
-}
-
-:host {
- // Colors
- // Primary
- &.pi-color__primary {
- @include chipColor(primary);
- }
-
- // Accent
- &.pi-color__accent {
- @include chipColor(accent);
- }
-
- // Warn
- &.pi-color__warn {
- @include chipColor(warn);
- }
-
- // Success
- &.pi-color__success {
- @include chipColor(success);
- }
-
- // Grey
- &.pi-color__grey {
- @include chipColor(grey);
- }
-}
+@mixin chipColor($color) {
+ // Outline
+ &.pi-chip__appearance--outline {
+ border: 1px solid;
+ background-color: var(--pi-color-white);
+ color: var(--pi-color-#{$color});
+ border-color: var(--pi-color-#{$color}-50);
+ }
+}
+
+:host {
+ // Colors
+ // Primary
+ &.pi-color__primary {
+ @include chipColor(primary);
+ }
+
+ // Accent
+ &.pi-color__accent {
+ @include chipColor(accent);
+ }
+
+ // Warn
+ &.pi-color__warn {
+ @include chipColor(warn);
+ }
+
+ // Success
+ &.pi-color__success {
+ @include chipColor(success);
+ }
+
+ // Grey
+ &.pi-color__grey {
+ @include chipColor(grey);
+ }
+}
diff --git a/libs/ui/src/lib/ui/chip/chip/chip.component.ts b/libs/ui/src/lib/ui/chip/chip/chip.component.ts
index 1869159..bd6730d 100644
--- a/libs/ui/src/lib/ui/chip/chip/chip.component.ts
+++ b/libs/ui/src/lib/ui/chip/chip/chip.component.ts
@@ -1,34 +1,34 @@
-import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core';
-import { theming } from '../../../styles';
-import { chipColor } from '../entities/chip.model';
+import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core';
+import { theming } from '../../../styles';
+import { chipColor } from '../entities/chip.model';
import { PiBaseChipComponent } from '../base-chip.component';
import { NgIf } from '@angular/common';
-import { MatIcon } from '@angular/material/icon';
-
+import { MatIcon } from '@angular/material/icon';
+
@Component({
selector: 'pi-chip',
templateUrl: './chip.component.html',
styleUrls: ['./chip.component.scss', '../styles/base-chip.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [NgIf, MatIcon],
-})
-export class PiChipComponent extends PiBaseChipComponent {
- @HostBinding('class') get chipClasses(): string {
+})
+export class PiChipComponent extends PiBaseChipComponent {
+ @HostBinding('class') get chipClasses(): string {
const appearance = this.appearance();
- const appearanceClass = appearance && `pi-chip__appearance--${appearance}`;
+ const appearanceClass = appearance && `pi-chip__appearance--${appearance}`;
const iconType = this.iconType();
- const iconTypeClass = iconType && `pi-chip__icon-type--${iconType}`;
- const hasLabelClass = !this.label() ? 'pi-chip__single-icon' : '';
+ const iconTypeClass = iconType && `pi-chip__icon-type--${iconType}`;
+ const hasLabelClass = !this.label() ? 'pi-chip__single-icon' : '';
const affixPosition = this.affixPosition();
- const affixPositionClass =
- affixPosition && `pi-chip__affix-position--${affixPosition}`;
- return [appearanceClass, iconTypeClass, hasLabelClass, affixPositionClass].join(' ');
- }
-
- // Content
- readonly iconType = input<'custom' | 'default'>('default');
-
- // Skin
- readonly appearance = input<'outline' | 'fill'>('outline');
- override readonly color = input('primary');
-}
+ const affixPositionClass =
+ affixPosition && `pi-chip__affix-position--${affixPosition}`;
+ return [appearanceClass, iconTypeClass, hasLabelClass, affixPositionClass].join(' ');
+ }
+
+ // Content
+ readonly iconType = input<'custom' | 'default'>('default');
+
+ // Skin
+ readonly appearance = input<'outline' | 'fill'>('outline');
+ override readonly color = input('primary');
+}
diff --git a/libs/ui/src/lib/ui/chip/entities/chip.model.ts b/libs/ui/src/lib/ui/chip/entities/chip.model.ts
index e99ae3e..911a3c8 100644
--- a/libs/ui/src/lib/ui/chip/entities/chip.model.ts
+++ b/libs/ui/src/lib/ui/chip/entities/chip.model.ts
@@ -1,25 +1,25 @@
-// Skin
-export type chipColor =
- | 'accent-white'
- | 'accent'
- | 'grey'
- | 'grey-white'
- | 'highlighted-white'
- | 'highlighted'
- | 'primary-white'
- | 'primary'
- | 'success-white'
- | 'success'
- | 'warn-white'
- | 'warn';
-
-// Skin
-export type chipThemingColor =
- | 'accent-white'
- | 'accent'
- | 'grey'
- | 'grey-white'
- | 'highlighted-white'
- | 'highlighted'
- | 'primary-white'
- | 'primary';
+// Skin
+export type chipColor =
+ | 'accent-white'
+ | 'accent'
+ | 'grey'
+ | 'grey-white'
+ | 'highlighted-white'
+ | 'highlighted'
+ | 'primary-white'
+ | 'primary'
+ | 'success-white'
+ | 'success'
+ | 'warn-white'
+ | 'warn';
+
+// Skin
+export type chipThemingColor =
+ | 'accent-white'
+ | 'accent'
+ | 'grey'
+ | 'grey-white'
+ | 'highlighted-white'
+ | 'highlighted'
+ | 'primary-white'
+ | 'primary';
diff --git a/libs/ui/src/lib/ui/chip/index.ts b/libs/ui/src/lib/ui/chip/index.ts
index 9766dcc..4cac96d 100644
--- a/libs/ui/src/lib/ui/chip/index.ts
+++ b/libs/ui/src/lib/ui/chip/index.ts
@@ -1,9 +1,9 @@
-
-
-export * from './chip/chip.component';
-export * from './chip-action/chip-action.component';
-export * from './chip-date/chip-date.component';
-export * from './chip-status/chip-status.component';
-export * from './chip-value/chip-value.component';
-export * from './chip-time/chip-time.component';
-export * from './tile/tile.component';
+
+
+export * from './chip/chip.component';
+export * from './chip-action/chip-action.component';
+export * from './chip-date/chip-date.component';
+export * from './chip-status/chip-status.component';
+export * from './chip-value/chip-value.component';
+export * from './chip-time/chip-time.component';
+export * from './tile/tile.component';
diff --git a/libs/ui/src/lib/ui/chip/styles/_color.scss b/libs/ui/src/lib/ui/chip/styles/_color.scss
index 040053c..3a479e7 100644
--- a/libs/ui/src/lib/ui/chip/styles/_color.scss
+++ b/libs/ui/src/lib/ui/chip/styles/_color.scss
@@ -1,117 +1,117 @@
-@mixin baseChipFontColor($color) {
- // Mode light, default
- &:not(.pi-color__mode--dark) {
- label,
- span {
- color: var(--pi-color-#{$color});
- }
- }
- // Mode dark
- &.pi-color__mode--dark {
- label,
- span {
- color: var(--pi-color-white);
- }
- }
-}
-
-@mixin baseChipBackgroundColor($color) {
- &:not(.pi-chip-value):not(.pi-chip-date) {
- // Mode light, default
- &:not(.pi-color__mode--dark) {
- // Fill
- &.pi-chip__appearance--fill {
- background-color: var(--pi-color-#{$color}-25);
- }
-
- // Outline
- &.pi-chip__appearance--outline {
- background-color: var(--pi-color-#{$color}-10);
- }
-
- // Has value
- &.has-affix {
- // NOT Density
- &.pi-chip__affix-appearance--fill {
- // Is clickable
- &:not(.pi-chip-action):not(.pi-chip-time) {
- // Affix
- .pi-chip-affix {
- background-color: var(--pi-color-#{$color}-50);
- }
- }
- // NOT Is clickable
- &.pi-chip-action,
- &.pi-chip-time {
- &:hover {
- transition: var(--pi-animation);
- // Affix
- .pi-chip-affix {
- background-color: var(--pi-color-#{$color}-75);
- }
- }
- &:not(:hover) {
- // Affix
- .pi-chip-affix {
- background-color: var(--pi-color-#{$color}-50);
- }
- }
- }
- }
- }
- }
-
- // Mode dark
- &.pi-color__mode--dark {
- background-color: var(--pi-color-#{$color}-300);
- // Has value
- &.has-affix {
- &.pi-chip__affix-appearance--fill {
- // Affix
- .pi-chip-affix {
- color: var(--pi-color-#{$color});
- background-color: var(--pi-color-white);
- }
- }
- }
- }
- }
-}
-
-:host {
- // Colors
- &.pi-color__primary {
- @include baseChipFontColor(primary);
- @include baseChipBackgroundColor(primary);
- }
-
- &.pi-color__accent {
- @include baseChipFontColor(accent);
- @include baseChipBackgroundColor(accent);
- }
-
- &.pi-color__success {
- @include baseChipFontColor(success);
- @include baseChipBackgroundColor(success);
- }
-
- &.pi-color__warn {
- @include baseChipFontColor(warn);
- @include baseChipBackgroundColor(warn);
- }
-
- &.pi-color__black {
- @include baseChipFontColor(grey-900);
- @include baseChipBackgroundColor(grey-900);
- }
-
- &.pi-color__grey {
- @include baseChipFontColor(grey);
- @include baseChipBackgroundColor(grey);
- }
-
- &.pi-color__highlighted {
- @include baseChipFontColor(highlighted);
- @include baseChipBackgroundColor(highlighted);
- }
-}
+@mixin baseChipFontColor($color) {
+ // Mode light, default
+ &:not(.pi-color__mode--dark) {
+ label,
+ span {
+ color: var(--pi-color-#{$color});
+ }
+ }
+ // Mode dark
+ &.pi-color__mode--dark {
+ label,
+ span {
+ color: var(--pi-color-white);
+ }
+ }
+}
+
+@mixin baseChipBackgroundColor($color) {
+ &:not(.pi-chip-value):not(.pi-chip-date) {
+ // Mode light, default
+ &:not(.pi-color__mode--dark) {
+ // Fill
+ &.pi-chip__appearance--fill {
+ background-color: var(--pi-color-#{$color}-25);
+ }
+
+ // Outline
+ &.pi-chip__appearance--outline {
+ background-color: var(--pi-color-#{$color}-10);
+ }
+
+ // Has value
+ &.has-affix {
+ // NOT Density
+ &.pi-chip__affix-appearance--fill {
+ // Is clickable
+ &:not(.pi-chip-action):not(.pi-chip-time) {
+ // Affix
+ .pi-chip-affix {
+ background-color: var(--pi-color-#{$color}-50);
+ }
+ }
+ // NOT Is clickable
+ &.pi-chip-action,
+ &.pi-chip-time {
+ &:hover {
+ transition: var(--pi-animation);
+ // Affix
+ .pi-chip-affix {
+ background-color: var(--pi-color-#{$color}-75);
+ }
+ }
+ &:not(:hover) {
+ // Affix
+ .pi-chip-affix {
+ background-color: var(--pi-color-#{$color}-50);
+ }
+ }
+ }
+ }
+ }
+ }
+
+ // Mode dark
+ &.pi-color__mode--dark {
+ background-color: var(--pi-color-#{$color}-300);
+ // Has value
+ &.has-affix {
+ &.pi-chip__affix-appearance--fill {
+ // Affix
+ .pi-chip-affix {
+ color: var(--pi-color-#{$color});
+ background-color: var(--pi-color-white);
+ }
+ }
+ }
+ }
+ }
+}
+
+:host {
+ // Colors
+ &.pi-color__primary {
+ @include baseChipFontColor(primary);
+ @include baseChipBackgroundColor(primary);
+ }
+
+ &.pi-color__accent {
+ @include baseChipFontColor(accent);
+ @include baseChipBackgroundColor(accent);
+ }
+
+ &.pi-color__success {
+ @include baseChipFontColor(success);
+ @include baseChipBackgroundColor(success);
+ }
+
+ &.pi-color__warn {
+ @include baseChipFontColor(warn);
+ @include baseChipBackgroundColor(warn);
+ }
+
+ &.pi-color__black {
+ @include baseChipFontColor(grey-900);
+ @include baseChipBackgroundColor(grey-900);
+ }
+
+ &.pi-color__grey {
+ @include baseChipFontColor(grey);
+ @include baseChipBackgroundColor(grey);
+ }
+
+ &.pi-color__highlighted {
+ @include baseChipFontColor(highlighted);
+ @include baseChipBackgroundColor(highlighted);
+ }
+}
diff --git a/libs/ui/src/lib/ui/chip/styles/_position.scss b/libs/ui/src/lib/ui/chip/styles/_position.scss
index 17e539e..396b336 100644
--- a/libs/ui/src/lib/ui/chip/styles/_position.scss
+++ b/libs/ui/src/lib/ui/chip/styles/_position.scss
@@ -1,34 +1,34 @@
-// Position
-@mixin chipAffixPosition {
- &:not(.pi-chip-date):not(.pi-chip-value):not(.pi-chip-status):not(.pi-chip-time):not(
- .pi-chip-action
- ) {
- // Has affix
- &.has-affix {
- // Affix position previous
- &.pi-chip__affix-position--previous {
- justify-content: flex-end;
- & > span {
- flex-direction: row-reverse;
- }
- }
- }
- }
-}
-
-// Position
-@mixin chipMatIconPosition {
- &:not(.pi-chip-date):not(.pi-chip-value) {
- .mat-icon {
- display: flex;
- justify-content: flex-start;
- align-items: center;
- }
- }
-}
-
-:host {
- // Position
- @include chipAffixPosition;
- @include chipMatIconPosition;
-}
+// Position
+@mixin chipAffixPosition {
+ &:not(.pi-chip-date):not(.pi-chip-value):not(.pi-chip-status):not(.pi-chip-time):not(
+ .pi-chip-action
+ ) {
+ // Has affix
+ &.has-affix {
+ // Affix position previous
+ &.pi-chip__affix-position--previous {
+ justify-content: flex-end;
+ & > span {
+ flex-direction: row-reverse;
+ }
+ }
+ }
+ }
+}
+
+// Position
+@mixin chipMatIconPosition {
+ &:not(.pi-chip-date):not(.pi-chip-value) {
+ .mat-icon {
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ }
+ }
+}
+
+:host {
+ // Position
+ @include chipAffixPosition;
+ @include chipMatIconPosition;
+}
diff --git a/libs/ui/src/lib/ui/chip/styles/_size.scss b/libs/ui/src/lib/ui/chip/styles/_size.scss
index 4411ca1..80b5918 100644
--- a/libs/ui/src/lib/ui/chip/styles/_size.scss
+++ b/libs/ui/src/lib/ui/chip/styles/_size.scss
@@ -1,281 +1,281 @@
-// Size
-@mixin chipSize($chip-height, $chip-border-radius) {
- &:not(.pi-chip-date):not(.pi-chip-value) {
- height: var(--pi-spacing-#{$chip-height});
- border-radius: $chip-border-radius;
- }
-}
-
-// Single Icon Size
-@mixin chipSingleIconSize($chip-size, $icon-size, $border-radius) {
- &:not(.pi-chip-date):not(.pi-chip-value):not(.pi-chip-time) {
- // Single Icon
- &.pi-chip__single-icon {
- height: var(--pi-spacing-#{$chip-size});
- width: var(--pi-spacing-#{$chip-size});
- border-radius: $border-radius;
-
- .pi-chip-affix {
- height: var(--pi-spacing-#{$chip-size});
- width: var(--pi-spacing-#{$chip-size});
- border-radius: $border-radius;
- // Icon
- & > .pi-chip-affix__icon {
- height: var(--pi-spacing-#{$icon-size});
- width: var(--pi-spacing-#{$icon-size});
- }
- }
- }
- }
-}
-
-/**
-* This mixin manages the left and right padding from the common content to the sides.
-*/
-@mixin chipSideSpacings($padding, $gap) {
- &:not(.pi-chip-date):not(.pi-chip-value):not(.pi-chip__single-icon) {
- &:not(.has-affix),
- &.pi-chip-action.has-affix {
- padding-left: var(--pi-spacing-#{$padding});
- padding-right: var(--pi-spacing-#{$padding});
- }
- &.pi-chip-action {
- &.has-affix {
- .pi-chip-close-icon {
- margin-left: var(--pi-spacing-#{$padding});
- }
- }
- }
-
- &.pi-chip-time {
- &.is-closable {
- padding-right: var(--pi-spacing-#{$padding});
- }
- }
-
- &:not(.has-action) {
- &.has-affix {
- // Previous
- &.pi-chip__affix-position--previous {
- padding-right: var(--pi-spacing-#{$padding});
- }
- // After
- &.pi-chip__affix-position--after {
- padding-left: var(--pi-spacing-#{$padding});
- }
-
- &.pi-chip__affix-appearance--ghost {
- // Previous
- &.pi-chip__affix-position--previous {
- padding-left: calc(
- var(--pi-spacing-#{$padding}) - var(--pi-spacing-#{$gap}) -
- var(--pi-spacing-xxxx-small)
- );
- }
- // After
- &.pi-chip__affix-position--after {
- padding-right: calc(
- var(--pi-spacing-#{$padding}) - var(--pi-spacing-#{$gap}) -
- var(--pi-spacing-xxxx-small)
- );
- }
- }
- }
- }
-
- &.has-affix {
- &.pi-chip__affix-appearance--fill {
- & > span {
- gap: var(--pi-spacing-#{$gap});
- }
- }
- &.pi-chip__affix-appearance--ghost {
- & > span {
- gap: calc(var(--pi-spacing-#{$gap}) - var(--pi-spacing-xxxxx-small));
- }
- }
- }
- }
-}
-
-// Font sizes
-@mixin chipFontSize($size) {
- &:not(.pi-chip-date):not(.pi-chip-value):not(.pi-chip__single-icon) {
- .pi-chip-label,
- span {
- font: {
- size: var(--pi-font-size-#{$size});
- }
- }
- // Has value
- .pi-chip-affix {
- text-align: center;
- font: {
- weight: 600;
- }
- }
- }
-}
-
-// Affix size
-@mixin chipAffixSize($size, $affix-border-radius, $icon-padding, $text-side-padding) {
- &:not(.pi-chip-date):not(.pi-chip-value) {
- .pi-chip-affix {
- // Icon, Value or Time
- & > [class*='pi-chip-affix__'] {
- display: flex;
- justify-content: center;
- align-items: center;
- }
-
- // Value or Time
- & > [class*='pi-chip-affix__']:not(.pi-chip-affix__icon) {
- height: $size;
- text-align: center;
- }
- }
-
- // NOT Chip Single Icon
- &:not(.pi-chip__single-icon) {
- .pi-chip-affix {
- height: $size;
- border-radius: $affix-border-radius;
- }
- }
-
- // NOT Chip time
- &:not(.pi-chip-time) {
- .pi-chip-affix {
- min-width: calc(#{$size} + var(--pi-spacing-xxxx-small));
- }
- }
- // NOT Chip time affix appearance ghost
- &:not(.pi-chip-time.pi-chip__affix-appearance--ghost) {
- .pi-chip-affix {
- // Value or Time
- & > [class*='pi-chip-affix__']:not(.pi-chip-affix__icon) {
- padding-left: var(--pi-spacing-#{$text-side-padding});
- padding-right: var(--pi-spacing-#{$text-side-padding});
- }
- }
- }
-
- // NOT Chip Single Icon & Chip Time
- &:not(.pi-chip__single-icon):not(.pi-chip-time) {
- .pi-chip-affix {
- min-width: calc(#{$size} + var(--pi-spacing-xxxx-small));
- // Icon
- & > .pi-chip-affix__icon {
- height: calc(#{$size} - var(--pi-spacing-#{$icon-padding}));
- width: calc(#{$size} - var(--pi-spacing-#{$icon-padding}));
- }
- }
- }
- }
-}
-
-/**
-* This mixin manages the left and right padding from the affix, fill and ghost, to the sides.
-*/
-@mixin chipAffixSideSpacings($affix-side-spacing) {
- &:not(.pi-chip-date):not(.pi-chip-value):not(.pi-chip__single-icon) {
- &.has-affix {
- // Previous
- &.pi-chip__affix-position--previous {
- padding-left: var(--pi-spacing-#{$affix-side-spacing});
- }
- /**
- * After position does not includes the chip time & the chip action when it's closable.
- */
- &:not(.pi-chip-time):not(.is-closable),
- &:not(.pi-chip-action.is-closable) {
- // After
- &.pi-chip__affix-position--after:not(.pi-chip__icon-type--custom) {
- padding-right: var(--pi-spacing-#{$affix-side-spacing});
- }
- }
- }
- }
-}
-
-// Close Action Sizes
-@mixin chipCloseIconSize($icon-size) {
- .pi-chip-close-icon {
- height: var(--pi-spacing-#{$icon-size});
- width: var(--pi-spacing-#{$icon-size});
- }
-}
-
-:host {
- // Chip Small
- &.pi-chip__size--small {
- // Small Chip size
- @include chipSize(x-large, 0.5rem);
-
- // Small Chip side spacings
- @include chipSideSpacings(x-small, xxx-small);
-
- // Small Chip Single Icon Size
- @include chipSingleIconSize(x-large, medium, 0.625rem);
-
- // Small Chip font size
- @include chipFontSize(x-small);
-
- // Small Chip Affix Size
- @include chipAffixSize(1.125rem, 0.375rem, xxxx-small, xx-small);
-
- // Small Chip Affix Side Spacings
- @include chipAffixSideSpacings(xxxx-small);
-
- // Small Chip Close Icon Size
- @include chipCloseIconSize(x-small);
- }
-
- // Chip Medium
- &.pi-chip__size--medium {
- // Medium Chip size
- @include chipSize(xx-large, 0.75rem);
-
- // Medium Chip side spacings
- @include chipSideSpacings(small, xxx-small);
-
- // Medium Chip Single Icon Size
- @include chipSingleIconSize(xx-large, large, 0.75rem);
-
- // Medium Chip font size
- @include chipFontSize(x-small);
-
- // Medium Chip Affix Size
- @include chipAffixSize(var(--pi-spacing-x-large), 0.5rem, xx-small, xx-small);
-
- // Medium Chip Affix Side Spacings
- @include chipAffixSideSpacings(xxx-small);
-
- // Medium Chip Close Icon Size
- @include chipCloseIconSize(small);
- }
-
- // Chip Large
- &.pi-chip__size--large {
- // Large Chip size
- @include chipSize(xxx-large, 0.875rem);
-
- // Large Chip side spacings
- @include chipSideSpacings(medium, xx-small);
-
- // Large Chip Single Icon Size
- @include chipSingleIconSize(xxx-large, x-large, 0.875rem);
-
- // Large Chip font size
- @include chipFontSize(medium);
-
- // Large Chip Affix Size
- @include chipAffixSize(1.875rem, 0.625rem, x-small, x-small);
-
- // Large Chip Affix Side Spacings
- @include chipAffixSideSpacings(xxx-small);
-
- // Large Chip Close Icon Size
- @include chipCloseIconSize(small);
- }
-}
+// Size
+@mixin chipSize($chip-height, $chip-border-radius) {
+ &:not(.pi-chip-date):not(.pi-chip-value) {
+ height: var(--pi-spacing-#{$chip-height});
+ border-radius: $chip-border-radius;
+ }
+}
+
+// Single Icon Size
+@mixin chipSingleIconSize($chip-size, $icon-size, $border-radius) {
+ &:not(.pi-chip-date):not(.pi-chip-value):not(.pi-chip-time) {
+ // Single Icon
+ &.pi-chip__single-icon {
+ height: var(--pi-spacing-#{$chip-size});
+ width: var(--pi-spacing-#{$chip-size});
+ border-radius: $border-radius;
+
+ .pi-chip-affix {
+ height: var(--pi-spacing-#{$chip-size});
+ width: var(--pi-spacing-#{$chip-size});
+ border-radius: $border-radius;
+ // Icon
+ & > .pi-chip-affix__icon {
+ height: var(--pi-spacing-#{$icon-size});
+ width: var(--pi-spacing-#{$icon-size});
+ }
+ }
+ }
+ }
+}
+
+/**
+* This mixin manages the left and right padding from the common content to the sides.
+*/
+@mixin chipSideSpacings($padding, $gap) {
+ &:not(.pi-chip-date):not(.pi-chip-value):not(.pi-chip__single-icon) {
+ &:not(.has-affix),
+ &.pi-chip-action.has-affix {
+ padding-left: var(--pi-spacing-#{$padding});
+ padding-right: var(--pi-spacing-#{$padding});
+ }
+ &.pi-chip-action {
+ &.has-affix {
+ .pi-chip-close-icon {
+ margin-left: var(--pi-spacing-#{$padding});
+ }
+ }
+ }
+
+ &.pi-chip-time {
+ &.is-closable {
+ padding-right: var(--pi-spacing-#{$padding});
+ }
+ }
+
+ &:not(.has-action) {
+ &.has-affix {
+ // Previous
+ &.pi-chip__affix-position--previous {
+ padding-right: var(--pi-spacing-#{$padding});
+ }
+ // After
+ &.pi-chip__affix-position--after {
+ padding-left: var(--pi-spacing-#{$padding});
+ }
+
+ &.pi-chip__affix-appearance--ghost {
+ // Previous
+ &.pi-chip__affix-position--previous {
+ padding-left: calc(
+ var(--pi-spacing-#{$padding}) - var(--pi-spacing-#{$gap}) -
+ var(--pi-spacing-xxxx-small)
+ );
+ }
+ // After
+ &.pi-chip__affix-position--after {
+ padding-right: calc(
+ var(--pi-spacing-#{$padding}) - var(--pi-spacing-#{$gap}) -
+ var(--pi-spacing-xxxx-small)
+ );
+ }
+ }
+ }
+ }
+
+ &.has-affix {
+ &.pi-chip__affix-appearance--fill {
+ & > span {
+ gap: var(--pi-spacing-#{$gap});
+ }
+ }
+ &.pi-chip__affix-appearance--ghost {
+ & > span {
+ gap: calc(var(--pi-spacing-#{$gap}) - var(--pi-spacing-xxxxx-small));
+ }
+ }
+ }
+ }
+}
+
+// Font sizes
+@mixin chipFontSize($size) {
+ &:not(.pi-chip-date):not(.pi-chip-value):not(.pi-chip__single-icon) {
+ .pi-chip-label,
+ span {
+ font: {
+ size: var(--pi-font-size-#{$size});
+ }
+ }
+ // Has value
+ .pi-chip-affix {
+ text-align: center;
+ font: {
+ weight: 600;
+ }
+ }
+ }
+}
+
+// Affix size
+@mixin chipAffixSize($size, $affix-border-radius, $icon-padding, $text-side-padding) {
+ &:not(.pi-chip-date):not(.pi-chip-value) {
+ .pi-chip-affix {
+ // Icon, Value or Time
+ & > [class*='pi-chip-affix__'] {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ // Value or Time
+ & > [class*='pi-chip-affix__']:not(.pi-chip-affix__icon) {
+ height: $size;
+ text-align: center;
+ }
+ }
+
+ // NOT Chip Single Icon
+ &:not(.pi-chip__single-icon) {
+ .pi-chip-affix {
+ height: $size;
+ border-radius: $affix-border-radius;
+ }
+ }
+
+ // NOT Chip time
+ &:not(.pi-chip-time) {
+ .pi-chip-affix {
+ min-width: calc(#{$size} + var(--pi-spacing-xxxx-small));
+ }
+ }
+ // NOT Chip time affix appearance ghost
+ &:not(.pi-chip-time.pi-chip__affix-appearance--ghost) {
+ .pi-chip-affix {
+ // Value or Time
+ & > [class*='pi-chip-affix__']:not(.pi-chip-affix__icon) {
+ padding-left: var(--pi-spacing-#{$text-side-padding});
+ padding-right: var(--pi-spacing-#{$text-side-padding});
+ }
+ }
+ }
+
+ // NOT Chip Single Icon & Chip Time
+ &:not(.pi-chip__single-icon):not(.pi-chip-time) {
+ .pi-chip-affix {
+ min-width: calc(#{$size} + var(--pi-spacing-xxxx-small));
+ // Icon
+ & > .pi-chip-affix__icon {
+ height: calc(#{$size} - var(--pi-spacing-#{$icon-padding}));
+ width: calc(#{$size} - var(--pi-spacing-#{$icon-padding}));
+ }
+ }
+ }
+ }
+}
+
+/**
+* This mixin manages the left and right padding from the affix, fill and ghost, to the sides.
+*/
+@mixin chipAffixSideSpacings($affix-side-spacing) {
+ &:not(.pi-chip-date):not(.pi-chip-value):not(.pi-chip__single-icon) {
+ &.has-affix {
+ // Previous
+ &.pi-chip__affix-position--previous {
+ padding-left: var(--pi-spacing-#{$affix-side-spacing});
+ }
+ /**
+ * After position does not includes the chip time & the chip action when it's closable.
+ */
+ &:not(.pi-chip-time):not(.is-closable),
+ &:not(.pi-chip-action.is-closable) {
+ // After
+ &.pi-chip__affix-position--after:not(.pi-chip__icon-type--custom) {
+ padding-right: var(--pi-spacing-#{$affix-side-spacing});
+ }
+ }
+ }
+ }
+}
+
+// Close Action Sizes
+@mixin chipCloseIconSize($icon-size) {
+ .pi-chip-close-icon {
+ height: var(--pi-spacing-#{$icon-size});
+ width: var(--pi-spacing-#{$icon-size});
+ }
+}
+
+:host {
+ // Chip Small
+ &.pi-chip__size--small {
+ // Small Chip size
+ @include chipSize(x-large, 0.5rem);
+
+ // Small Chip side spacings
+ @include chipSideSpacings(x-small, xxx-small);
+
+ // Small Chip Single Icon Size
+ @include chipSingleIconSize(x-large, medium, 0.625rem);
+
+ // Small Chip font size
+ @include chipFontSize(x-small);
+
+ // Small Chip Affix Size
+ @include chipAffixSize(1.125rem, 0.375rem, xxxx-small, xx-small);
+
+ // Small Chip Affix Side Spacings
+ @include chipAffixSideSpacings(xxxx-small);
+
+ // Small Chip Close Icon Size
+ @include chipCloseIconSize(x-small);
+ }
+
+ // Chip Medium
+ &.pi-chip__size--medium {
+ // Medium Chip size
+ @include chipSize(xx-large, 0.75rem);
+
+ // Medium Chip side spacings
+ @include chipSideSpacings(small, xxx-small);
+
+ // Medium Chip Single Icon Size
+ @include chipSingleIconSize(xx-large, large, 0.75rem);
+
+ // Medium Chip font size
+ @include chipFontSize(x-small);
+
+ // Medium Chip Affix Size
+ @include chipAffixSize(var(--pi-spacing-x-large), 0.5rem, xx-small, xx-small);
+
+ // Medium Chip Affix Side Spacings
+ @include chipAffixSideSpacings(xxx-small);
+
+ // Medium Chip Close Icon Size
+ @include chipCloseIconSize(small);
+ }
+
+ // Chip Large
+ &.pi-chip__size--large {
+ // Large Chip size
+ @include chipSize(xxx-large, 0.875rem);
+
+ // Large Chip side spacings
+ @include chipSideSpacings(medium, xx-small);
+
+ // Large Chip Single Icon Size
+ @include chipSingleIconSize(xxx-large, x-large, 0.875rem);
+
+ // Large Chip font size
+ @include chipFontSize(medium);
+
+ // Large Chip Affix Size
+ @include chipAffixSize(1.875rem, 0.625rem, x-small, x-small);
+
+ // Large Chip Affix Side Spacings
+ @include chipAffixSideSpacings(xxx-small);
+
+ // Large Chip Close Icon Size
+ @include chipCloseIconSize(small);
+ }
+}
diff --git a/libs/ui/src/lib/ui/chip/styles/base-chip.component.scss b/libs/ui/src/lib/ui/chip/styles/base-chip.component.scss
index 4b2df9f..e5bc2c5 100644
--- a/libs/ui/src/lib/ui/chip/styles/base-chip.component.scss
+++ b/libs/ui/src/lib/ui/chip/styles/base-chip.component.scss
@@ -1,75 +1,75 @@
-@use 'color';
-@use 'position';
-@use 'size';
-
-// Common Chip styles
-:host {
- display: flex;
- align-items: center;
- width: fit-content;
- & > span {
- display: flex;
- align-items: center;
- line-height: 1;
- }
-
- .pi-chip-affix {
- display: flex;
- justify-content: center;
- }
-
- &:not(.pi-chip-value) {
- .pi-chip-affix {
- align-items: center;
- }
- }
-
- // Status
- // Disabled
- &.is-disabled {
- opacity: 0.5;
- cursor: default;
- }
-
- .mat-icon,
- img {
- transition: var(--pi-animation);
- }
- &:hover {
- .pi-chip-close-icon {
- transform: rotate(90deg);
- }
- }
-
- &:not(.pi-chip__single-icon):not(.pi-chip-date__flex-direction--column) {
- &.pi-chip__fill--fill-available {
- width: -webkit-fill-available;
- }
- &:not(.pi-chip__fill--fill-available) {
- width: fit-content;
- }
- }
- &.pi-chip-action,
- &.pi-chip-time {
- & > span {
- width: -webkit-fill-available;
- & > div {
- display: flex;
- justify-content: center;
- align-items: center;
- gap: var(--pi-spacing-xx-small);
- }
- }
- // Ghost
- &.pi-chip__affix-appearance--ghost {
- & > span {
- & > div {
- flex: 1 1 auto;
- }
- & > .pi-chip-close-icon {
- flex: 0 0 auto;
- }
- }
- }
- }
-}
+@use 'color';
+@use 'position';
+@use 'size';
+
+// Common Chip styles
+:host {
+ display: flex;
+ align-items: center;
+ width: fit-content;
+ & > span {
+ display: flex;
+ align-items: center;
+ line-height: 1;
+ }
+
+ .pi-chip-affix {
+ display: flex;
+ justify-content: center;
+ }
+
+ &:not(.pi-chip-value) {
+ .pi-chip-affix {
+ align-items: center;
+ }
+ }
+
+ // Status
+ // Disabled
+ &.is-disabled {
+ opacity: 0.5;
+ cursor: default;
+ }
+
+ .mat-icon,
+ img {
+ transition: var(--pi-animation);
+ }
+ &:hover {
+ .pi-chip-close-icon {
+ transform: rotate(90deg);
+ }
+ }
+
+ &:not(.pi-chip__single-icon):not(.pi-chip-date__flex-direction--column) {
+ &.pi-chip__fill--fill-available {
+ width: -webkit-fill-available;
+ }
+ &:not(.pi-chip__fill--fill-available) {
+ width: fit-content;
+ }
+ }
+ &.pi-chip-action,
+ &.pi-chip-time {
+ & > span {
+ width: -webkit-fill-available;
+ & > div {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: var(--pi-spacing-xx-small);
+ }
+ }
+ // Ghost
+ &.pi-chip__affix-appearance--ghost {
+ & > span {
+ & > div {
+ flex: 1 1 auto;
+ }
+ & > .pi-chip-close-icon {
+ flex: 0 0 auto;
+ }
+ }
+ }
+ }
+}
diff --git a/libs/ui/src/lib/ui/chip/tile/tile.component.html b/libs/ui/src/lib/ui/chip/tile/tile.component.html
index fc53c72..8bd2159 100644
--- a/libs/ui/src/lib/ui/chip/tile/tile.component.html
+++ b/libs/ui/src/lib/ui/chip/tile/tile.component.html
@@ -1,11 +1,11 @@
-
-
-
-
- {{ value() }}
-
-
- {{ value() }}
-
-
-
+
+
+
+
+ {{ value() }}
+
+
+ {{ value() }}
+
+
+
diff --git a/libs/ui/src/lib/ui/chip/tile/tile.component.scss b/libs/ui/src/lib/ui/chip/tile/tile.component.scss
index 46d1cab..8a16d76 100644
--- a/libs/ui/src/lib/ui/chip/tile/tile.component.scss
+++ b/libs/ui/src/lib/ui/chip/tile/tile.component.scss
@@ -1,127 +1,127 @@
-@mixin tileColor($color) {
- color: var(--pi-color-#{$color});
- background-color: var(--pi-color-#{$color}-25);
- & > label {
- color: var(--pi-color-#{$color});
- }
- & > header {
- & > div {
- background-color: var(--pi-color-#{$color}-75);
- }
- }
-}
-
-@mixin tileSpacings($gap, $padding, $border-radius) {
- gap: var(--pi-spacing-#{$gap});
- padding: var(--pi-spacing-#{$padding});
- border-radius: $border-radius;
- -webkit-border-radius: $border-radius;
- -moz-border-radius: $border-radius;
-}
-
-@mixin tileSizes($height, $width) {
- height: $height;
- width: $width;
-}
-
-:host {
- display: flex;
- & > header {
- & > div {
- display: flex;
- justify-content: space-between;
- align-items: flex-start;
- width: -webkit-fill-available;
- & > span {
- display: flex;
- line-height: 1;
- font: {
- size: var(--pi-font-size-large);
- weight: 700;
- }
- }
- }
- }
- & > label {
- font: {
- size: var(--pi-font-size-x-small);
- }
- }
- & > header {
- & > div {
- display: flex;
- justify-content: center;
- align-items: center;
- padding: var(--pi-spacing-xx-small);
- border-radius: 0.875rem;
- -webkit-border-radius: 0.875rem;
- -moz-border-radius: 0.875rem;
- }
- }
-
- // Value
- &.has-value {
- span {
- display: flex;
- justify-content: center;
- align-items: center;
- height: var(--pi-spacing-x-large);
- width: var(--pi-spacing-x-large);
- font: {
- weight: 600;
- }
- }
- }
-
- &.has-icon-and-value {
- }
-
- // Flex Direction
- // Column
- &.pi-tile__flex-direction--column {
- flex-direction: column;
- align-items: flex-start;
- justify-content: space-between;
- @include tileSizes(6.375rem, 8.75rem);
- @include tileSpacings(xx-small, small, 1.1875rem);
- }
- // Row
- &.pi-tile__flex-direction--row {
- align-items: center;
-
- @include tileSpacings(xx-small, xx-small, var(--pi-border-radius-medium));
- }
-
- // Color
- // Primary
- &.pi-color__primary {
- @include tileColor(primary);
- }
- // Accent
- &.pi-color__accent {
- @include tileColor(accent);
- }
- // Highlighted
- &.pi-color__highlighted {
- @include tileColor(highlighted);
- }
-}
-
-html {
- &.is-mobile {
- :host {
- // Row
- &.pi-tile__flex-direction--row {
- @include tileSizes(auto, -webkit-fill-available);
- }
- }
- }
- &:not(.is-mobile) {
- :host {
- // Row
- &.pi-tile__flex-direction--row {
- @include tileSizes(auto, 12.125rem);
- }
- }
- }
-}
+@mixin tileColor($color) {
+ color: var(--pi-color-#{$color});
+ background-color: var(--pi-color-#{$color}-25);
+ & > label {
+ color: var(--pi-color-#{$color});
+ }
+ & > header {
+ & > div {
+ background-color: var(--pi-color-#{$color}-75);
+ }
+ }
+}
+
+@mixin tileSpacings($gap, $padding, $border-radius) {
+ gap: var(--pi-spacing-#{$gap});
+ padding: var(--pi-spacing-#{$padding});
+ border-radius: $border-radius;
+ -webkit-border-radius: $border-radius;
+ -moz-border-radius: $border-radius;
+}
+
+@mixin tileSizes($height, $width) {
+ height: $height;
+ width: $width;
+}
+
+:host {
+ display: flex;
+ & > header {
+ & > div {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ width: -webkit-fill-available;
+ & > span {
+ display: flex;
+ line-height: 1;
+ font: {
+ size: var(--pi-font-size-large);
+ weight: 700;
+ }
+ }
+ }
+ }
+ & > label {
+ font: {
+ size: var(--pi-font-size-x-small);
+ }
+ }
+ & > header {
+ & > div {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: var(--pi-spacing-xx-small);
+ border-radius: 0.875rem;
+ -webkit-border-radius: 0.875rem;
+ -moz-border-radius: 0.875rem;
+ }
+ }
+
+ // Value
+ &.has-value {
+ span {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: var(--pi-spacing-x-large);
+ width: var(--pi-spacing-x-large);
+ font: {
+ weight: 600;
+ }
+ }
+ }
+
+ &.has-icon-and-value {
+ }
+
+ // Flex Direction
+ // Column
+ &.pi-tile__flex-direction--column {
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: space-between;
+ @include tileSizes(6.375rem, 8.75rem);
+ @include tileSpacings(xx-small, small, 1.1875rem);
+ }
+ // Row
+ &.pi-tile__flex-direction--row {
+ align-items: center;
+
+ @include tileSpacings(xx-small, xx-small, var(--pi-border-radius-medium));
+ }
+
+ // Color
+ // Primary
+ &.pi-color__primary {
+ @include tileColor(primary);
+ }
+ // Accent
+ &.pi-color__accent {
+ @include tileColor(accent);
+ }
+ // Highlighted
+ &.pi-color__highlighted {
+ @include tileColor(highlighted);
+ }
+}
+
+html {
+ &.is-mobile {
+ :host {
+ // Row
+ &.pi-tile__flex-direction--row {
+ @include tileSizes(auto, -webkit-fill-available);
+ }
+ }
+ }
+ &:not(.is-mobile) {
+ :host {
+ // Row
+ &.pi-tile__flex-direction--row {
+ @include tileSizes(auto, 12.125rem);
+ }
+ }
+ }
+}
diff --git a/libs/ui/src/lib/ui/chip/tile/tile.component.ts b/libs/ui/src/lib/ui/chip/tile/tile.component.ts
index ceea78d..5e81919 100644
--- a/libs/ui/src/lib/ui/chip/tile/tile.component.ts
+++ b/libs/ui/src/lib/ui/chip/tile/tile.component.ts
@@ -1,34 +1,34 @@
-import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core';
import { ComponentFamilyClass, theming } from '../../../styles';
import { NgIf } from '@angular/common';
-import { MatIcon } from '@angular/material/icon';
-
+import { MatIcon } from '@angular/material/icon';
+
@Component({
selector: 'pi-tile',
templateUrl: './tile.component.html',
styleUrls: ['./tile.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [NgIf, MatIcon],
-})
-export class PiTileComponent {
- @HostBinding('class') get classes(): string {
+})
+export class PiTileComponent {
+ @HostBinding('class') get classes(): string {
const color = this.color();
- const colorClass = color && `pi-color__${color}`;
- const hasIconClass = !this.icon() ? 'has-value' : '';
- const hasIconAndValueClass = this.icon() && this.value() ? 'has-icon-and-value' : '';
+ const colorClass = color && `pi-color__${color}`;
+ const hasIconClass = !this.icon() ? 'has-value' : '';
+ const hasIconAndValueClass = this.icon() && this.value() ? 'has-icon-and-value' : '';
const flexDirectionValue = this.flexDirection();
- const flexDirection = flexDirectionValue && `pi-tile__flex-direction--${flexDirectionValue}`;
- return ['pi-tile', ComponentFamilyClass.Text, colorClass, flexDirection, hasIconClass].join(
- ' '
- );
- }
-
- // Content
- readonly label = input();
- readonly value = input();
- readonly icon = input();
-
- // Skin
- readonly color = input('primary');
- readonly flexDirection = input<'row' | 'column'>('column');
-}
+ const flexDirection = flexDirectionValue && `pi-tile__flex-direction--${flexDirectionValue}`;
+ return ['pi-tile', ComponentFamilyClass.Text, colorClass, flexDirection, hasIconClass].join(
+ ' '
+ );
+ }
+
+ // Content
+ readonly label = input();
+ readonly value = input();
+ readonly icon = input();
+
+ // Skin
+ readonly color = input('primary');
+ readonly flexDirection = input<'row' | 'column'>('column');
+}
diff --git a/libs/ui/src/lib/ui/data-grid/data-grid/data-grid.component.html b/libs/ui/src/lib/ui/data-grid/data-grid/data-grid.component.html
index 9c14915..e3b150f 100644
--- a/libs/ui/src/lib/ui/data-grid/data-grid/data-grid.component.html
+++ b/libs/ui/src/lib/ui/data-grid/data-grid/data-grid.component.html
@@ -1,92 +1,92 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Template Error
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Template Error
+
diff --git a/libs/ui/src/lib/ui/data-grid/data-grid/data-grid.component.ts b/libs/ui/src/lib/ui/data-grid/data-grid/data-grid.component.ts
index a063b52..4125d76 100644
--- a/libs/ui/src/lib/ui/data-grid/data-grid/data-grid.component.ts
+++ b/libs/ui/src/lib/ui/data-grid/data-grid/data-grid.component.ts
@@ -9,13 +9,13 @@ import {
output,
viewChild,
contentChild
-} from '@angular/core';
-import { justify } from '../../../styles';
-import { ListMode } from '../../../util/list-configs';
+} from '@angular/core';
+import { justify } from '../../../styles';
+import { ListMode } from '../../../util/list-configs';
import { cardType, columnsNumber, rowsNumber } from '../entities/data-grid.model';
import { NgIf, NgTemplateOutlet, NgFor } from '@angular/common';
-import { PiGridItemDirective } from '../directives/grid-item.directive';
-
+import { PiGridItemDirective } from '../directives/grid-item.directive';
+
@Component({
selector: 'pi-data-grid',
templateUrl: './data-grid.component.html',
@@ -26,196 +26,196 @@ import { PiGridItemDirective } from '../directives/grid-item.directive';
NgTemplateOutlet,
NgFor,
],
-})
-export class PiDataGridComponent {
- @HostBinding('class') get classes(): string {
- return [
- 'pi-data-grid',
- this.appearanceClass,
- this.cardTypeClass,
- this.columnsClass,
- this.dataDirectionClass,
- this.isEditableClass,
- this.isExpandableClass,
- this.justifyClass,
- this.modeClass,
- this.rowsClass,
- ].join(' ');
- }
-
- // Content
- readonly data = input | null>([]);
- readonly columns = input.required();
- readonly mode = input('list');
- readonly content = input<'key' | 'values'>('values');
- /**
- * dataDirection = colummn: 'headings will be dispplayed at left side'
- * dataDirection = row: 'headings will be dispplayed at top'
- **/
-
- readonly rows = input.required();
- readonly index = input.required();
- // Status
- readonly isActive = input.required();
- // Behavior
- readonly isExpandable = input(false);
- // Behavior
- readonly isEditable = input(false);
-
- // Skin
- readonly dataDirection = input<'row' | 'column'>('row');
- readonly cardType = input('vertical');
- readonly appearance = input<'outline' | 'ghost'>('outline');
- readonly hasPdding = input(true);
- readonly justify = input('space-between');
-
- readonly clickItem = output();
-
- readonly gridItemRef = viewChild>('gridItem');
-
- readonly keysTemplateRef = contentChild>('keysTemplate');
-
- readonly valuesTemplateRef = contentChild>('valuesTemplate');
-
- readonly expandableKeysTemplateRef = contentChild>('expandableKeysTemplate');
-
- readonly expandableValuesTemplateRef = contentChild>('expandableValuesTemplate');
-
- trackByFn(index: number): number | undefined {
- return index;
- }
-
- /**
- * Defines the appearance of the Data Grid in mode === 'List' of the data grid component
- *
- * A) FILL:
- * - The even rows in Data Direction === ROW will be displayed at color grey || theming color with density 10.
- * - The even columns in Data Direction === COLUMN will be displayed at color grey || theming color with density 10.
- *
- * B) OUTLINE:
- * - All rows, excepting the last one, in Data Direction === ROW will have a border bottom 1px solid grey || theming color with density 25 - 50, depending on the grid item state.
- * - All rows, excepting the last one, in Data Direction === COLUMN will have a border right 1px solid grey || theming color with density 25 - 50, depending on the grid item state.
- *
- * C) GHOST:
- * - The rows and the cols does not have any background color and stroked grid items.
- *
- */
- protected get appearanceClass(): string {
+})
+export class PiDataGridComponent {
+ @HostBinding('class') get classes(): string {
+ return [
+ 'pi-data-grid',
+ this.appearanceClass,
+ this.cardTypeClass,
+ this.columnsClass,
+ this.dataDirectionClass,
+ this.isEditableClass,
+ this.isExpandableClass,
+ this.justifyClass,
+ this.modeClass,
+ this.rowsClass,
+ ].join(' ');
+ }
+
+ // Content
+ readonly data = input | null>([]);
+ readonly columns = input.required();
+ readonly mode = input('list');
+ readonly content = input<'key' | 'values'>('values');
+ /**
+ * dataDirection = colummn: 'headings will be dispplayed at left side'
+ * dataDirection = row: 'headings will be dispplayed at top'
+ **/
+
+ readonly rows = input.required();
+ readonly index = input.required();
+ // Status
+ readonly isActive = input.required();
+ // Behavior
+ readonly isExpandable = input(false);
+ // Behavior
+ readonly isEditable = input(false);
+
+ // Skin
+ readonly dataDirection = input<'row' | 'column'>('row');
+ readonly cardType = input('vertical');
+ readonly appearance = input<'outline' | 'ghost'>('outline');
+ readonly hasPdding = input(true);
+ readonly justify = input('space-between');
+
+ readonly clickItem = output();
+
+ readonly gridItemRef = viewChild>('gridItem');
+
+ readonly keysTemplateRef = contentChild>('keysTemplate');
+
+ readonly valuesTemplateRef = contentChild>('valuesTemplate');
+
+ readonly expandableKeysTemplateRef = contentChild>('expandableKeysTemplate');
+
+ readonly expandableValuesTemplateRef = contentChild>('expandableValuesTemplate');
+
+ trackByFn(index: number): number | undefined {
+ return index;
+ }
+
+ /**
+ * Defines the appearance of the Data Grid in mode === 'List' of the data grid component
+ *
+ * A) FILL:
+ * - The even rows in Data Direction === ROW will be displayed at color grey || theming color with density 10.
+ * - The even columns in Data Direction === COLUMN will be displayed at color grey || theming color with density 10.
+ *
+ * B) OUTLINE:
+ * - All rows, excepting the last one, in Data Direction === ROW will have a border bottom 1px solid grey || theming color with density 25 - 50, depending on the grid item state.
+ * - All rows, excepting the last one, in Data Direction === COLUMN will have a border right 1px solid grey || theming color with density 25 - 50, depending on the grid item state.
+ *
+ * C) GHOST:
+ * - The rows and the cols does not have any background color and stroked grid items.
+ *
+ */
+ protected get appearanceClass(): string {
const appearance = this.appearance();
- return appearance ? `pi-data-grid__appearance--${appearance}` : '';
- }
-
- /**
- * Defines the appearance of the card (grid item) in mode === 'Grid'.
- *
- * A) HORIZONTAL:
- * - A card design with an horizontal orientation in order to allow to see more results in screen print the Aside or in Mobile Devices.
- *
- * B) SQUARED:
- * - A card design with an squared orientation in order show simplified items information.
- *
- * C) VERTICAL:
- * - A card with a vertical orientation to display items with the full information.
- *
- * D) LIST:
- * - This is not properly a card and it's only available in Data Direction === 'Column' cases.
- * - The list type emulates a table with for a single item, so, a single keys <> values combination.
- *
- */
- protected get cardTypeClass(): string {
+ return appearance ? `pi-data-grid__appearance--${appearance}` : '';
+ }
+
+ /**
+ * Defines the appearance of the card (grid item) in mode === 'Grid'.
+ *
+ * A) HORIZONTAL:
+ * - A card design with an horizontal orientation in order to allow to see more results in screen print the Aside or in Mobile Devices.
+ *
+ * B) SQUARED:
+ * - A card design with an squared orientation in order show simplified items information.
+ *
+ * C) VERTICAL:
+ * - A card with a vertical orientation to display items with the full information.
+ *
+ * D) LIST:
+ * - This is not properly a card and it's only available in Data Direction === 'Column' cases.
+ * - The list type emulates a table with for a single item, so, a single keys <> values combination.
+ *
+ */
+ protected get cardTypeClass(): string {
const cardTypeValue = this.cardType();
- return this.mode() === 'grid' && cardTypeValue ? `pi-data-grid__card-type--${cardTypeValue}` : '';
- }
-
- /**
- * Defines the number of columns of the data grid.
- *
- * - When de data data direction === ROW, 1 column = 1 column.
- * - When de data data direction === COLUMN, 1 column emulates a row.
- *
- */
- protected get columnsClass(): string {
+ return this.mode() === 'grid' && cardTypeValue ? `pi-data-grid__card-type--${cardTypeValue}` : '';
+ }
+
+ /**
+ * Defines the number of columns of the data grid.
+ *
+ * - When de data data direction === ROW, 1 column = 1 column.
+ * - When de data data direction === COLUMN, 1 column emulates a row.
+ *
+ */
+ protected get columnsClass() {
const columns = this.columns();
- return columns && `pi-data-grid__columns--${columns}`;
- }
-
- /**
- * Defines the data direction of the data grid component
- * If any item is displayed as
- *
- * - This property only applies in Data Direction === COLUMN cases:
- *
- */
- protected get dataDirectionClass(): string {
+ return columns && `pi-data-grid__columns--${columns}`;
+ }
+
+ /**
+ * Defines the data direction of the data grid component
+ * If any item is displayed as
+ *
+ * - This property only applies in Data Direction === COLUMN cases:
+ *
+ */
+ protected get dataDirectionClass(): string {
const dataDirection = this.dataDirection();
- return this.mode() === 'list' && dataDirection
- ? `pi-data-grid__data-direction--${dataDirection}`
- : '';
- }
-
- /**
- * Manage if the row can be Editable
- *
- * This property only applies in Data Direction === COLUMN cases:
- *
- */
- protected get isEditableClass(): string {
- return this.dataDirection() === 'column' && this.isEditable() ? 'is-editable' : '';
- }
-
- /**
- * Manage if the row can be Expandable
- *
- * - This property only applies in Data Direction === ROW cases:
- *
- */
- protected get isExpandableClass(): string {
- return this.dataDirection() === 'row' && this.isExpandable() ? 'is-expandable' : '';
- }
-
- /**
- * Defines the justify property between columns
- *
- * - This property only applies in Data Direction === COLUMN cases:
- *
- */
- protected get justifyClass(): string {
+ return this.mode() === 'list' && dataDirection
+ ? `pi-data-grid__data-direction--${dataDirection}`
+ : '';
+ }
+
+ /**
+ * Manage if the row can be Editable
+ *
+ * This property only applies in Data Direction === COLUMN cases:
+ *
+ */
+ protected get isEditableClass(): string {
+ return this.dataDirection() === 'column' && this.isEditable() ? 'is-editable' : '';
+ }
+
+ /**
+ * Manage if the row can be Expandable
+ *
+ * - This property only applies in Data Direction === ROW cases:
+ *
+ */
+ protected get isExpandableClass(): string {
+ return this.dataDirection() === 'row' && this.isExpandable() ? 'is-expandable' : '';
+ }
+
+ /**
+ * Defines the justify property between columns
+ *
+ * - This property only applies in Data Direction === COLUMN cases:
+ *
+ */
+ protected get justifyClass(): string {
const justifyValue = this.justify();
- return this.dataDirection() === 'column' && justifyValue
- ? `pi-data-grid__justify-content--${justifyValue}`
- : '';
- }
-
- /**
- * Defines the if the list is shown in:
- *
- * A) Mode LIST:
- * - The mode list emulates a Table component.
- * - It can be avaliable in Data Direction === 'Column' and Data Direction === 'Row'.
- * - The number of rows and cols must be defined.
- *
- *
- * B) Mode GRID:
- * - To display cards and 1 column lists in Data Direction Column.
- * - The mode Grid is available in small and large devices.
- * - The number of rows and cols must be defined to be combined
- * with the cardType in order to generate grid template area to implement a specific design.
- *
- */
- protected get modeClass(): string {
+ return this.dataDirection() === 'column' && justifyValue
+ ? `pi-data-grid__justify-content--${justifyValue}`
+ : '';
+ }
+
+ /**
+ * Defines the if the list is shown in:
+ *
+ * A) Mode LIST:
+ * - The mode list emulates a Table component.
+ * - It can be avaliable in Data Direction === 'Column' and Data Direction === 'Row'.
+ * - The number of rows and cols must be defined.
+ *
+ *
+ * B) Mode GRID:
+ * - To display cards and 1 column lists in Data Direction Column.
+ * - The mode Grid is available in small and large devices.
+ * - The number of rows and cols must be defined to be combined
+ * with the cardType in order to generate grid template area to implement a specific design.
+ *
+ */
+ protected get modeClass() {
const mode = this.mode();
- return mode && `pi-data-grid__mode--${mode}`;
- }
-
- /**
- * Defines the number of rows of the data grid.
- *
- * - When de data data direction === ROW, 1 row = 1 row.
- * - When de data data direction === COLUMN, 1 row emulates a column.
- *
- */
- protected get rowsClass(): string {
+ return mode && `pi-data-grid__mode--${mode}`;
+ }
+
+ /**
+ * Defines the number of rows of the data grid.
+ *
+ * - When de data data direction === ROW, 1 row = 1 row.
+ * - When de data data direction === COLUMN, 1 row emulates a column.
+ *
+ */
+ protected get rowsClass() {
const rows = this.rows();
- return rows && `pi-data-grid__rows--${rows}`;
- }
-}
+ return rows && `pi-data-grid__rows--${rows}`;
+ }
+}
diff --git a/libs/ui/src/lib/ui/data-grid/directives/cell.directive.ts b/libs/ui/src/lib/ui/data-grid/directives/cell.directive.ts
index 50fd440..4f85fa0 100644
--- a/libs/ui/src/lib/ui/data-grid/directives/cell.directive.ts
+++ b/libs/ui/src/lib/ui/data-grid/directives/cell.directive.ts
@@ -1,28 +1,28 @@
-import { AfterViewInit, Directive, ElementRef, HostBinding, input } from '@angular/core';
-import { itemType } from '../entities/data-grid.model';
-
-@Directive({ selector: '[pi-cell]', })
-export class PiCellDirective implements AfterViewInit {
- @HostBinding(`class`) get cellType(): string | undefined {
+import { AfterViewInit, Directive, ElementRef, HostBinding, input } from '@angular/core';
+import { itemType } from '../entities/data-grid.model';
+
+@Directive({ selector: '[pi-cell]', })
+export class PiCellDirective implements AfterViewInit {
+ @HostBinding(`class`) get cellType(): string | undefined {
const textAlign = this.textAlign();
- const textAlignClass = textAlign !== 'left' && `pi-cell__text-align--${textAlign}`;
- const indentClass = this.indent() ? 'pi-cell__indented' : '';
+ const textAlignClass = textAlign !== 'left' && `pi-cell__text-align--${textAlign}`;
+ const indentClass = this.indent() ? 'pi-cell__indented' : '';
const type = this.type();
- const typeClass = type !== 'default' && `pi-cell__type--${type}`;
- return ['pi-cell', textAlignClass, indentClass, typeClass].join(' ');
- }
-
- readonly type = input('default');
- readonly indent = input(false);
- readonly index = input.required();
- readonly textAlign = input<'left' | 'center' | 'right'>('left');
-
- constructor(private elRef: ElementRef) {}
-
- ngAfterViewInit(): void {
+ const typeClass = type !== 'default' && `pi-cell__type--${type}`;
+ return ['pi-cell', textAlignClass, indentClass, typeClass].join(' ');
+ }
+
+ readonly type = input('default');
+ readonly indent = input(false);
+ readonly index = input.required();
+ readonly textAlign = input<'left' | 'center' | 'right'>('left');
+
+ constructor(private elRef: ElementRef) {}
+
+ ngAfterViewInit(): void {
const index = this.index();
- if (index !== undefined) {
- this.elRef?.nativeElement?.classList.add(`pi-cell__${index}`);
- }
- }
-}
+ if (index !== undefined) {
+ this.elRef?.nativeElement?.classList.add(`pi-cell__${index}`);
+ }
+ }
+}
diff --git a/libs/ui/src/lib/ui/data-grid/directives/grid-item.directive.ts b/libs/ui/src/lib/ui/data-grid/directives/grid-item.directive.ts
index d29ceb6..d4f14f0 100644
--- a/libs/ui/src/lib/ui/data-grid/directives/grid-item.directive.ts
+++ b/libs/ui/src/lib/ui/data-grid/directives/grid-item.directive.ts
@@ -1,35 +1,35 @@
-import { Directive, ElementRef, HostBinding, HostListener, Renderer2, input } from '@angular/core';
-import { columnsNumber } from '../entities/data-grid.model';
-
-@Directive({ selector: '[pi-grid-item]', })
-export class PiGridItemDirective {
- @HostBinding(`class`) get gridItemType(): string {
- const isExpandableClass = this.isExpandable() ? 'is-expandable' : '';
- const isSelectedClass = this.isSelected() ? 'is-selected' : '';
+import { Directive, ElementRef, HostBinding, HostListener, Renderer2, input } from '@angular/core';
+import { columnsNumber } from '../entities/data-grid.model';
+
+@Directive({ selector: '[pi-grid-item]', })
+export class PiGridItemDirective {
+ @HostBinding(`class`) get gridItemType(): string {
+ const isExpandableClass = this.isExpandable() ? 'is-expandable' : '';
+ const isSelectedClass = this.isSelected() ? 'is-selected' : '';
const context = this.context();
- const contextClass = context && `pi-grid-item__context--${context}`;
- return ['pi-grid-item', isExpandableClass, isSelectedClass, contextClass].join(' ');
- }
-
- readonly isExpandable = input(false);
- readonly isSelected = input(false);
- readonly context = input.required<'keys' | 'values'>();
-
- readonly cells = input.required();
- readonly isActive = input.required();
-
- readonly isVisited = input(false);
-
- constructor(private elRef: ElementRef, private renderer: Renderer2) {}
-
- @HostListener('click') selectItem(): void {
- const gridItem = this.elRef.nativeElement;
- const isSelected = gridItem.classList.contains('is-selected');
-
- if (isSelected) {
- this.renderer.removeClass(gridItem, 'is-selected');
- } else {
- this.renderer.addClass(gridItem, 'is-selected');
- }
- }
-}
+ const contextClass = context && `pi-grid-item__context--${context}`;
+ return ['pi-grid-item', isExpandableClass, isSelectedClass, contextClass].join(' ');
+ }
+
+ readonly isExpandable = input(false);
+ readonly isSelected = input(false);
+ readonly context = input.required<'keys' | 'values'>();
+
+ readonly cells = input.required();
+ readonly isActive = input.required();
+
+ readonly isVisited = input(false);
+
+ constructor(private elRef: ElementRef, private renderer: Renderer2) {}
+
+ @HostListener('click') selectItem(): void {
+ const gridItem = this.elRef.nativeElement;
+ const isSelected = gridItem.classList.contains('is-selected');
+
+ if (isSelected) {
+ this.renderer.removeClass(gridItem, 'is-selected');
+ } else {
+ this.renderer.addClass(gridItem, 'is-selected');
+ }
+ }
+}
diff --git a/libs/ui/src/lib/ui/data-grid/entities/data-grid.model.ts b/libs/ui/src/lib/ui/data-grid/entities/data-grid.model.ts
index ff79026..b10f740 100644
--- a/libs/ui/src/lib/ui/data-grid/entities/data-grid.model.ts
+++ b/libs/ui/src/lib/ui/data-grid/entities/data-grid.model.ts
@@ -1,17 +1,17 @@
-export type itemType =
- | 'action'
- | 'amount'
- | 'checkbox'
- | 'date'
- | 'default'
- | 'sum'
- | 'icon'
- | 'description';
-
-export type columnsNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-
-export type rowsNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-
-export type cardStyle = 'primary' | 'secondary' | 'tertiary' | 'horizontal' | 'single-card';
-
-export type cardType = 'vertical' | 'squared' | 'horizontal' | 'list';
+export type itemType =
+ | 'action'
+ | 'amount'
+ | 'checkbox'
+ | 'date'
+ | 'default'
+ | 'sum'
+ | 'icon'
+ | 'description';
+
+export type columnsNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+
+export type rowsNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+
+export type cardStyle = 'primary' | 'secondary' | 'tertiary' | 'horizontal' | 'single-card';
+
+export type cardType = 'vertical' | 'squared' | 'horizontal' | 'list';
diff --git a/libs/ui/src/lib/ui/data-grid/index.ts b/libs/ui/src/lib/ui/data-grid/index.ts
index f515fe0..065b2ee 100644
--- a/libs/ui/src/lib/ui/data-grid/index.ts
+++ b/libs/ui/src/lib/ui/data-grid/index.ts
@@ -1,7 +1,7 @@
-
-
-export * from './data-grid/data-grid.component';
-
-export * from './directives/cell.directive';
-
-export * from './directives/grid-item.directive';
+
+
+export * from './data-grid/data-grid.component';
+
+export * from './directives/cell.directive';
+
+export * from './directives/grid-item.directive';
diff --git a/libs/ui/src/lib/ui/data-table/base-data-table/base-data-table.component.html b/libs/ui/src/lib/ui/data-table/base-data-table/base-data-table.component.html
index afabe8b..595473d 100644
--- a/libs/ui/src/lib/ui/data-table/base-data-table/base-data-table.component.html
+++ b/libs/ui/src/lib/ui/data-table/base-data-table/base-data-table.component.html
@@ -1,3 +1,3 @@
-
+
diff --git a/libs/ui/src/lib/ui/data-table/base-data-table/base-data-table.component.ts b/libs/ui/src/lib/ui/data-table/base-data-table/base-data-table.component.ts
index 79b9caf..cd70767 100644
--- a/libs/ui/src/lib/ui/data-table/base-data-table/base-data-table.component.ts
+++ b/libs/ui/src/lib/ui/data-table/base-data-table/base-data-table.component.ts
@@ -1,59 +1,59 @@
-import { ChangeDetectionStrategy, Component, HostBinding, OnInit, input } from '@angular/core';
-import { Store } from '@ngrx/store';
-
-import { DataTableItem } from '../entities/data-table-item.model';
-
-import { ComponentFamilyClass } from '../../../styles';
-import {
- DeviceConfigsState,
- DeviceTypeSelectors,
-} from '../../../util/device-configs';
-import { take } from 'rxjs/operators';
-
+import { ChangeDetectionStrategy, Component, HostBinding, OnInit, input } from '@angular/core';
+import { Store } from '@ngrx/store';
+
+import { DataTableItem } from '../entities/data-table-item.model';
+
+import { ComponentFamilyClass } from '../../../styles';
+import {
+ DeviceConfigsState,
+ DeviceTypeSelectors,
+} from '../../../util/device-configs';
+import { take } from 'rxjs/operators';
+
@Component({
selector: 'pi-base-data-table',
templateUrl: './base-data-table.component.html',
styleUrls: ['./base-data-table.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class PiBaseDataTableComponent implements OnInit {
- @HostBinding('class') get classes(): string {
- return [
- 'pi-base-data-table',
- ComponentFamilyClass.Table,
- this.dataDirectionClass,
- this.typeClass,
- ].join(' ');
- }
- readonly items = input>();
- readonly dataDirection = input<'row' | 'column'>('row');
- readonly type = input<'header' | 'data'>('data');
- readonly hideValues = input(false);
-
- constructor(private store: Store) {}
-
- ngOnInit(): void {
- this.dataDirectionClass;
- this.typeClass;
- this.hideHeader();
- }
-
- get dataDirectionClass(): string {
- return `pi-base-data-table__data-direction--${this.dataDirection()}`;
- }
-
- get typeClass(): string | void {
- return this.type() === 'header' && 'pi-base-data-table__type--header';
- }
-
- private hideHeader(): void {
- this.store
- .select(DeviceTypeSelectors.getDevice)
- .pipe(take(1))
- .subscribe((deviceType: string) => {
- if (deviceType !== 'DESKTOP' && this.hideValues()) {
- delete this.items()[0].values;
- }
- });
- }
-}
+})
+export class PiBaseDataTableComponent implements OnInit {
+ @HostBinding('class') get classes(): string {
+ return [
+ 'pi-base-data-table',
+ ComponentFamilyClass.Table,
+ this.dataDirectionClass,
+ this.typeClass,
+ ].join(' ');
+ }
+ readonly items = input>();
+ readonly dataDirection = input<'row' | 'column'>('row');
+ readonly type = input<'header' | 'data'>('data');
+ readonly hideValues = input(false);
+
+ constructor(private store: Store) {}
+
+ ngOnInit(): void {
+ this.dataDirectionClass;
+ this.typeClass;
+ this.hideHeader();
+ }
+
+ get dataDirectionClass(): string {
+ return `pi-base-data-table__data-direction--${this.dataDirection()}`;
+ }
+
+ get typeClass() {
+ return this.type() === 'header' && 'pi-base-data-table__type--header';
+ }
+
+ private hideHeader(): void {
+ this.store
+ .select(DeviceTypeSelectors.getDevice)
+ .pipe(take(1))
+ .subscribe((deviceType: string) => {
+ if (deviceType !== 'DESKTOP' && this.hideValues()) {
+ delete this.items()?.[0]?.values;
+ }
+ });
+ }
+}
diff --git a/libs/ui/src/lib/ui/data-table/cell-type/cell-type.component.html b/libs/ui/src/lib/ui/data-table/cell-type/cell-type.component.html
index ac089b3..fdcb2cd 100644
--- a/libs/ui/src/lib/ui/data-table/cell-type/cell-type.component.html
+++ b/libs/ui/src/lib/ui/data-table/cell-type/cell-type.component.html
@@ -1,45 +1,45 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ display() }}
-
-
-
-
-
- {{ display() }}
-
-
-
-
-
- {{ display() }}
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ display() }}
+
+
+
+
+
+ {{ display() }}
+
+
+
+
+
+ {{ display() }}
+
+
+
+
+
+
+
+
+
+
diff --git a/libs/ui/src/lib/ui/data-table/cell-type/cell-type.component.ts b/libs/ui/src/lib/ui/data-table/cell-type/cell-type.component.ts
index 546f1e5..03981e1 100644
--- a/libs/ui/src/lib/ui/data-table/cell-type/cell-type.component.ts
+++ b/libs/ui/src/lib/ui/data-table/cell-type/cell-type.component.ts
@@ -1,8 +1,8 @@
import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core';
import { NgSwitch, NgSwitchCase, NgTemplateOutlet } from '@angular/common';
-import { PiBaseDataTableComponent } from '../base-data-table/base-data-table.component';
-
-export type PiDropdownSelectorTemplateType = 'text' | 'date' | 'amount' | 'input' | 'action';
+import { PiBaseDataTableComponent } from '../base-data-table/base-data-table.component';
+
+export type PiDropdownSelectorTemplateType = 'text' | 'date' | 'amount' | 'input' | 'action';
@Component({
selector: 'pi-cell-type',
templateUrl: './cell-type.component.html',
@@ -14,30 +14,30 @@ export type PiDropdownSelectorTemplateType = 'text' | 'date' | 'amount' | 'input
NgTemplateOutlet,
PiBaseDataTableComponent,
],
-})
-export class PiCellTypeComponent {
- @HostBinding('class') className = 'pi-cell-type';
-
- @HostBinding('class.pi-cell-type__amount') get isAmount(): boolean {
- return this.type() === 'amount';
- }
- @HostBinding('class.pi-cell-type__text') get isText(): boolean {
- return this.type() === 'text';
- }
- @HostBinding('class.pi-cell-type__date') get isDate(): boolean {
- return this.type() === 'date';
- }
- @HostBinding('class.pi-cell-type__input') get isInput(): boolean {
- return this.type() === 'input';
- }
- @HostBinding('class.pi-cell-type__action') get isAction(): boolean {
- return this.type() === 'action';
- }
-
- readonly type = input('text');
-
- /**
- * Data to display
- */
- readonly display = input();
-}
+})
+export class PiCellTypeComponent {
+ @HostBinding('class') className = 'pi-cell-type';
+
+ @HostBinding('class.pi-cell-type__amount') get isAmount(): boolean {
+ return this.type() === 'amount';
+ }
+ @HostBinding('class.pi-cell-type__text') get isText(): boolean {
+ return this.type() === 'text';
+ }
+ @HostBinding('class.pi-cell-type__date') get isDate(): boolean {
+ return this.type() === 'date';
+ }
+ @HostBinding('class.pi-cell-type__input') get isInput(): boolean {
+ return this.type() === 'input';
+ }
+ @HostBinding('class.pi-cell-type__action') get isAction(): boolean {
+ return this.type() === 'action';
+ }
+
+ readonly type = input('text');
+
+ /**
+ * Data to display
+ */
+ readonly display = input();
+}
diff --git a/libs/ui/src/lib/ui/data-table/data-table-item/data-table-item.component.html b/libs/ui/src/lib/ui/data-table/data-table-item/data-table-item.component.html
index c965b98..5ee7ddb 100644
--- a/libs/ui/src/lib/ui/data-table/data-table-item/data-table-item.component.html
+++ b/libs/ui/src/lib/ui/data-table/data-table-item/data-table-item.component.html
@@ -1,9 +1,9 @@
-
-{{ heading() }}
-
-
-
-
-
+
+{{ heading() }}
+
+
+
+
+
diff --git a/libs/ui/src/lib/ui/data-table/data-table-item/data-table-item.component.scss b/libs/ui/src/lib/ui/data-table/data-table-item/data-table-item.component.scss
index 0f3019e..10607d2 100644
--- a/libs/ui/src/lib/ui/data-table/data-table-item/data-table-item.component.scss
+++ b/libs/ui/src/lib/ui/data-table/data-table-item/data-table-item.component.scss
@@ -1,64 +1,64 @@
-:host {
- display: flex;
- // Text style
- // Regular
- &.pi-data-table-item__text-style--regular {
- }
-
- // Bold
- &.pi-data-table-item__text-style--bold {
- font: {
- weight: 700;
- }
- }
-
- // Italic
- &.pi-data-table-item__text-style--italic {
- }
-
- // Indent
- &.pi-data-table-item__text-style--indent {
- h4 {
- padding-left: var(--pi-spacing-xxx-large);
- }
- }
-
- // Justify
- // Flex-start
- &.pi-data-table-item__justify--flex-start {
- & > article {
- & > .pi-cell-type {
- justify-content: flex-start;
- }
- }
- }
- // Center
- &.pi-data-table-item__justify--center {
- & > article {
- & > .pi-cell-type {
- justify-content: center;
- }
- }
- }
-
- // Flex-end
- &.pi-data-table-item__justify--flex-end {
- & > article {
- & > .pi-cell-type {
- justify-content: flex-end;
- }
- }
- }
-}
-
-//Mobile and tablet
-@media screen and (max-width: 62rem) {
- :host {
- // Indent
- &.pi-data-table-item__text-style--indent {
- h4 {
- padding-left: var(--pi-spacing-small);
- }
- }
- }
-}
+:host {
+ display: flex;
+ // Text style
+ // Regular
+ &.pi-data-table-item__text-style--regular {
+ }
+
+ // Bold
+ &.pi-data-table-item__text-style--bold {
+ font: {
+ weight: 700;
+ }
+ }
+
+ // Italic
+ &.pi-data-table-item__text-style--italic {
+ }
+
+ // Indent
+ &.pi-data-table-item__text-style--indent {
+ h4 {
+ padding-left: var(--pi-spacing-xxx-large);
+ }
+ }
+
+ // Justify
+ // Flex-start
+ &.pi-data-table-item__justify--flex-start {
+ & > article {
+ & > .pi-cell-type {
+ justify-content: flex-start;
+ }
+ }
+ }
+ // Center
+ &.pi-data-table-item__justify--center {
+ & > article {
+ & > .pi-cell-type {
+ justify-content: center;
+ }
+ }
+ }
+
+ // Flex-end
+ &.pi-data-table-item__justify--flex-end {
+ & > article {
+ & > .pi-cell-type {
+ justify-content: flex-end;
+ }
+ }
+ }
+}
+
+//Mobile and tablet
+@media screen and (max-width: 62rem) {
+ :host {
+ // Indent
+ &.pi-data-table-item__text-style--indent {
+ h4 {
+ padding-left: var(--pi-spacing-small);
+ }
+ }
+ }
+}
diff --git a/libs/ui/src/lib/ui/data-table/data-table-item/data-table-item.component.ts b/libs/ui/src/lib/ui/data-table/data-table-item/data-table-item.component.ts
index 895acb5..77f9020 100644
--- a/libs/ui/src/lib/ui/data-table/data-table-item/data-table-item.component.ts
+++ b/libs/ui/src/lib/ui/data-table/data-table-item/data-table-item.component.ts
@@ -8,57 +8,57 @@ import {
input,
contentChild,
viewChild
-} from '@angular/core';
-import { textStyle, justify, borderType } from '../../../styles';
-import { Store } from '@ngrx/store';
-
-// Store
-import {
- DeviceConfigsState,
- DeviceTypeSelectors,
-} from '../../../util/device-configs';
-
-// RxJS
+} from '@angular/core';
+import { textStyle, justify, borderType } from '../../../styles';
+import { Store } from '@ngrx/store';
+
+// Store
+import {
+ DeviceConfigsState,
+ DeviceTypeSelectors,
+} from '../../../util/device-configs';
+
+// RxJS
import { take } from 'rxjs/operators';
-import { NgFor, NgTemplateOutlet } from '@angular/common';
+import { NgFor, NgTemplateOutlet } from '@angular/common';
@Component({
selector: 'pi-data-table-item',
templateUrl: './data-table-item.component.html',
styleUrls: ['./data-table-item.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [NgFor, NgTemplateOutlet],
-})
-export class PiDataTableItemComponent implements AfterViewInit {
- @HostBinding('class') get classes(): string {
- return ['pi-data-table-item', this.textStyleClass, this.justifyClass].join(' ');
- }
-
- readonly heading = input();
- readonly values = input>();
- readonly textStyle = input('regular');
- readonly justify = input('flex-start');
- readonly borderType = input();
-
- readonly item = contentChild>('item');
- readonly componentItem = viewChild