pigui/pireon-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: resuelve el type-checking estricto de plantillas y formatea con prettier

Browse Source
This commit is contained in:
Josep Piguillem
2026-07-28 00:06:55 +02:00
parent c15ccea103
commit 91a1c0ee4c
339 changed files with 4724 additions and 2236 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
libs/ui/src/index.ts
View File

@@ -13,7 +13,14 @@ export * from './lib/util/form-control';
export * from './lib/util/icon-registry';
export * from './lib/util/infinite-scroll';
// ./lib/util/list-configs: omitido(s) por colisión con otro módulo -> featureKey, getFeatureState, initialState
export { getListMode, ListConfigsFacade, listConfigsReducer, ListModeActionsType, resetListMode, setListMode } from './lib/util/list-configs';
export {
getListMode,
ListConfigsFacade,
listConfigsReducer,
ListModeActionsType,
resetListMode,
setListMode,
} from './lib/util/list-configs';
export type { ListConfigsState, ListMode } from './lib/util/list-configs';
export * from './lib/util/loaders';
export * from './lib/util/local-storage';
@@ -56,6 +63,31 @@ export * from './lib/ui/slider';
export * from './lib/ui/spinner';
export * from './lib/ui/tab';
// ./lib/ui/text: omitido(s) por colisión con otro módulo -> PiDisabledDirective
export { PiBaseTextViewerComponent, PiTextAreaExpansionComponent, PiTextCenteredDirective, PiTextColorDirective, PiTextCoveredDirective, PiTextGroupDirective, PiTextGroupIndicatorDirective, PiTextLargeDirective, PiTextLetterSpacingDirective, PiTextMediumDirective, PiTextSizeDirective, PiTextSmallDirective, PiTextViewerComponent, PiTextViewerLinkComponent, PiTextWeightBlackDirective, PiTextWeightBoldDirective, PiTextWeightLightDirective, PiTextWeightMediumDirective, PiTextWeightNormalDirective, PiTextXLargeDirective, PiTextXSmallDirective, PiTextXXLargeDirective, PiTextXXSmallDirective, PiTextXXXLargeDirective } from './lib/ui/text';
export {
PiBaseTextViewerComponent,
PiTextAreaExpansionComponent,
PiTextCenteredDirective,
PiTextColorDirective,
PiTextCoveredDirective,
PiTextGroupDirective,
PiTextGroupIndicatorDirective,
PiTextLargeDirective,
PiTextLetterSpacingDirective,
PiTextMediumDirective,
PiTextSizeDirective,
PiTextSmallDirective,
PiTextViewerComponent,
PiTextViewerLinkComponent,
PiTextWeightBlackDirective,
PiTextWeightBoldDirective,
PiTextWeightLightDirective,
PiTextWeightMediumDirective,
PiTextWeightNormalDirective,
PiTextXLargeDirective,
PiTextXSmallDirective,
PiTextXXLargeDirective,
PiTextXXSmallDirective,
PiTextXXXLargeDirective,
} from './lib/ui/text';
export * from './lib/ui/tooltip';
export * from './lib/ui/wrapper';

26
libs/ui/src/lib/styles/animations.ts
View File

@@ -1,4 +1,10 @@
import { animate, state, style, transition, trigger } from '@angular/animations';
import {
animate,
state,
style,
transition,
trigger,
} from '@angular/animations';
import { DURATION } from './configs';
export function transitionAnimation(duration: DURATION): any {
@@ -6,11 +12,21 @@ export function transitionAnimation(duration: DURATION): any {
trigger('collapse', [
state(
'off',
style({ transform: 'translateY(0%)', opacity: '0', visibility: 'hidden', height: '0' })
style({
transform: 'translateY(0%)',
opacity: '0',
visibility: 'hidden',
height: '0',
}),
),
state(
'on',
style({ transform: 'translateY(0%)', opacity: '1', visibility: 'visible', height: '100%' })
style({
transform: 'translateY(0%)',
opacity: '1',
visibility: 'visible',
height: '100%',
}),
),
transition('on <=> off', [animate('420ms ease-in-out')]),
]),
@@ -25,7 +41,7 @@ export const enterTransition = transition(':enter', [
'240ms 200ms ease-out',
style({
opacity: 1,
})
}),
),
]);
@@ -37,7 +53,7 @@ export const leaveTransition = transition(':leave', [
'180ms 120ms ease-out',
style({
opacity: 0,
})
}),
),
]);

6
libs/ui/src/lib/styles/common/abstracts/_pi-global-variables.scss
View File

@@ -46,9 +46,11 @@ $pi-border-radius-x-large: 1.375rem; // 22px
// Box shadow
$pi-box-shadow: rgba(#c5c5ce, 0.1) 3px 6px 6px 0px;
$pi-box-shadow-hover: rgba(#c3d5ff, 0.14) 2px 2px 5px 0px;
$pi-box-shadow-double: rgba(197, 197, 206, 0.1) 3px 6px 6px 0px,
$pi-box-shadow-double:
rgba(197, 197, 206, 0.1) 3px 6px 6px 0px,
-1px 4px 16px 2px rgba(197, 197, 206, 0.05);
$pi-box-shadow-panel-double: 7px 7px 12px 0px rgba(#c5c5ce, 0.12),
$pi-box-shadow-panel-double:
7px 7px 12px 0px rgba(#c5c5ce, 0.12),
-7px 7px 12 0px rgba(#c5c5ce, 0.06);
$pi-box-shadow-top: 0px -5px 5px 0px rgba(121, 158, 240, 0.02);
$pi-box-shadow-panel: 7px 7px 12px 0px rgba(#c5c5ce, 0.08);

4
libs/ui/src/lib/styles/common/base/_pi-reset.scss
View File

@@ -277,7 +277,9 @@ a:not([href]):not([tabindex]) {
code,
kbd,
samp {
font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
font-family:
SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
monospace;
font-size: 1em;
}

60
libs/ui/src/lib/styles/common/base/_pi-tipography.scss
View File

@@ -2,11 +2,15 @@
@font-face {
font-family: 'Soehne';
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht.eot');
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht.eot?#iefix')
src:
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht.eot?#iefix')
format('embedded-opentype'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht.woff2') format('woff2'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht.woff') format('woff'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht.ttf') format('truetype'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht.woff2')
format('woff2'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht.woff')
format('woff'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht.ttf')
format('truetype'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht.svg#soehne-leicht')
format('svg');
font-weight: 300;
@@ -18,7 +22,8 @@
@font-face {
font-family: 'Soehne';
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht-kursiv.eot');
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht-kursiv.eot?#iefix')
src:
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht-kursiv.eot?#iefix')
format('embedded-opentype'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht-kursiv.woff2')
format('woff2'),
@@ -37,11 +42,15 @@
@font-face {
font-family: 'Soehne';
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch.eot');
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch.eot?#iefix')
src:
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch.eot?#iefix')
format('embedded-opentype'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch.woff2') format('woff2'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch.woff') format('woff'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch.ttf') format('truetype'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch.woff2')
format('woff2'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch.woff')
format('woff'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch.ttf')
format('truetype'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch.svg#soehne-buch')
format('svg');
font-weight: 400;
@@ -53,11 +62,13 @@
@font-face {
font-family: 'Soehne';
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch-kursiv.eot');
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch-kursiv.eot?#iefix')
src:
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch-kursiv.eot?#iefix')
format('embedded-opentype'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch-kursiv.woff2')
format('woff2'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch-kursiv.woff') format('woff'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch-kursiv.woff')
format('woff'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch-kursiv.ttf')
format('truetype'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch-kursiv.svg#soehne-buch-kursiv')
@@ -71,11 +82,15 @@
@font-face {
font-family: 'Soehne';
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-kraftig.eot');
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-kraftig.eot?#iefix')
src:
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-kraftig.eot?#iefix')
format('embedded-opentype'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-kraftig.woff2') format('woff2'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-kraftig.woff') format('woff'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-kraftig.ttf') format('truetype'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-kraftig.woff2')
format('woff2'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-kraftig.woff')
format('woff'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-kraftig.ttf')
format('truetype'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-kraftig.svg#soehne-kraftig')
format('svg');
font-weight: 600;
@@ -87,11 +102,15 @@
@font-face {
font-family: 'Soehne';
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-halbfett.eot');
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-halbfett.eot?#iefix')
src:
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-halbfett.eot?#iefix')
format('embedded-opentype'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-halbfett.woff2') format('woff2'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-halbfett.woff') format('woff'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-halbfett.ttf') format('truetype'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-halbfett.woff2')
format('woff2'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-halbfett.woff')
format('woff'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-halbfett.ttf')
format('truetype'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-halbfett.svg#soehne-halbfett')
format('svg');
font-weight: 700;
@@ -103,7 +122,8 @@
@font-face {
font-family: 'Soehne';
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-dreiviertelfett.eot');
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-dreiviertelfett.eot?#iefix')
src:
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-dreiviertelfett.eot?#iefix')
format('embedded-opentype'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-dreiviertelfett.woff2')
format('woff2'),

3
libs/ui/src/lib/styles/common/components/_pi-accordion.scss
View File

@@ -75,7 +75,8 @@
&:not(.pi-accordion__appearance--outline) {
// Footer
& > .pi-accordion-footer {
padding: var(--pi-spacing-x-large) var(--pi-spacing-xx-small) var(--pi-spacing-medium);
padding: var(--pi-spacing-x-large) var(--pi-spacing-xx-small)
var(--pi-spacing-medium);
}
}
}

18
libs/ui/src/lib/styles/common/components/_pi-card.scss
View File

@@ -49,7 +49,8 @@
padding-left: var(--pi-spacing-#{$large-padding});
padding-bottom: var(--pi-spacing-#{$large-padding});
padding-right: var(--pi-spacing-#{$large-padding});
border-radius: var(--pi-border-radius-large) var(--pi-border-radius-large) 0 0;
border-radius: var(--pi-border-radius-large) var(--pi-border-radius-large)
0 0;
}
& > *:nth-child(2) {
@@ -64,11 +65,13 @@
& > *:last-child {
padding-top: var(--pi-spacing-#{$small-padding});
padding-bottom: var(--pi-spacing-#{$small-padding});
border-radius: 0 0 var(--pi-border-radius-large) var(--pi-border-radius-large);
border-radius: 0 0 var(--pi-border-radius-large)
var(--pi-border-radius-large);
}
& > * {
padding: 0 var(--pi-spacing-#{$large-padding}) var(--pi-spacing-#{$small-padding});
padding: 0 var(--pi-spacing-#{$large-padding})
var(--pi-spacing-#{$small-padding});
}
}
&.has-equal-inner-padding {
@@ -77,18 +80,21 @@
padding-top: var(--pi-spacing-#{$large-padding});
padding-bottom: var(--pi-spacing-#{$small-padding});
padding-right: var(--pi-spacing-#{$large-padding});
border-radius: var(--pi-border-radius-large) var(--pi-border-radius-large) 0 0;
border-radius: var(--pi-border-radius-large) var(--pi-border-radius-large)
0 0;
}
& > *:last-child {
padding-top: var(--pi-spacing-#{$large-padding});
padding-bottom: var(--pi-spacing-#{$large-padding});
border-radius: 0 0 var(--pi-border-radius-large) var(--pi-border-radius-large);
border-radius: 0 0 var(--pi-border-radius-large)
var(--pi-border-radius-large);
}
& > * {
&:not(:first-child) {
padding: var(--pi-spacing-#{$small-padding}) var(--pi-spacing-#{$large-padding})
padding: var(--pi-spacing-#{$small-padding})
var(--pi-spacing-#{$large-padding})
var(--pi-spacing-#{$small-padding});
}
}

8
libs/ui/src/lib/styles/common/components/_pi-list-item.scss
View File

@@ -93,8 +93,12 @@ html {
&.pi-list-item-icon__right {
background-color: var(--pi-color-primary-25);
border-top: 1px solid var(--pi-color-primary-50);
border-bottom-left-radius: calc(var(--pi-border-radius-large) - 1px);
border-bottom-right-radius: calc(var(--pi-border-radius-large) - 1px);
border-bottom-left-radius: calc(
var(--pi-border-radius-large) - 1px
);
border-bottom-right-radius: calc(
var(--pi-border-radius-large) - 1px
);
}
}
}

34
libs/ui/src/lib/styles/common/components/_pi-note.scss
View File

@@ -1,6 +1,9 @@
@mixin fixedBottomNote(
$left: 0,
$bottom: calc(var(--pi-height-footer) - var(--pi-spacing-large) + env(safe-area-inset-bottom)),
$bottom: calc(
var(--pi-height-footer) - var(--pi-spacing-large) +
env(safe-area-inset-bottom)
),
$width: calc(100% - var(--pi-spacing-medium) - var(--pi-spacing-medium)),
$min-width: auto
) {
@@ -48,9 +51,11 @@ html {
}
}
button {
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-close-button):not(.pi-hamburger):not(
.pi-button__xx-small
):not(.pi-button__x-large):not(.pi-button__toggle) {
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-close-button):not(
.pi-hamburger
):not(.pi-button__xx-small):not(.pi-button__x-large):not(
.pi-button__toggle
) {
height: var(--pi-spacing-xx-large);
padding-top: unset;
padding-bottom: unset;
@@ -78,7 +83,10 @@ html {
&.is-tablet__small {
@include fixedBottomNote(
0,
calc(env(safe-area-inset-bottom) + var(--pi-height-footer) - var(--pi-spacing-x-large)),
calc(
env(safe-area-inset-bottom) +
var(--pi-height-footer) - var(--pi-spacing-x-large)
),
calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large))
);
}
@@ -94,16 +102,20 @@ html {
height: var(--pi-spacing-xx-large);
width: var(--pi-spacing-xx-large);
}
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__icon--single):not(
.pi-button__xx-small
):not(.pi-button__trimmed):not(.pi-button__toggle) {
&:not(.pi-close-button):not(.pi-hamburger):not(
.pi-button__icon--single
):not(.pi-button__xx-small):not(.pi-button__trimmed):not(
.pi-button__toggle
) {
min-width: unset;
padding-left: var(--pi-spacing-small);
padding-right: var(--pi-spacing-small);
}
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-close-button):not(.pi-hamburger):not(
.pi-button__xx-small
):not(.pi-button__x-large):not(.pi-button__toggle) {
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-close-button):not(
.pi-hamburger
):not(.pi-button__xx-small):not(.pi-button__x-large):not(
.pi-button__toggle
) {
height: var(--pi-spacing-xx-large);
}
}

34
libs/ui/src/lib/styles/common/components/_pi-panel.scss
View File

@@ -10,11 +10,13 @@
padding-left: var(--pi-spacing-#{$padding});
padding-right: var(--pi-spacing-#{$padding});
&:first-child {
border-radius: var(--pi-border-radius-large) 0 0 var(--pi-border-radius-large);
border-radius: var(--pi-border-radius-large) 0 0
var(--pi-border-radius-large);
}
&:last-child {
border-radius: 0 var(--pi-border-radius-large) var(--pi-border-radius-large) 0;
border-radius: 0 var(--pi-border-radius-large)
var(--pi-border-radius-large) 0;
}
}
}
@@ -28,11 +30,13 @@
&:first-child {
padding-top: var(--pi-spacing-#{$padding});
border-radius: var(--pi-border-radius-large) var(--pi-border-radius-large) 0 0;
border-radius: var(--pi-border-radius-large)
var(--pi-border-radius-large) 0 0;
}
&:last-child {
padding-bottom: var(--pi-spacing-#{$padding});
border-radius: 0 0 var(--pi-border-radius-large) var(--pi-border-radius-large);
border-radius: 0 0 var(--pi-border-radius-large)
var(--pi-border-radius-large);
}
}
}
@@ -115,7 +119,9 @@
& > *:not(.pi-button):not(.pi-panel-content):not(.pi-chip) {
&:nth-child(n + 2) {
width: 100%;
& > .pi-text-viewer__flex-direction--row + .pi-text-viewer__flex-direction--row {
&
> .pi-text-viewer__flex-direction--row
+ .pi-text-viewer__flex-direction--row {
margin-top: var(--pi-spacing-xx-small);
}
}
@@ -376,15 +382,17 @@ html {
.pi-panel {
&.pi-panel__expansion {
.pi-panel-content__expandable {
button:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__icon--single):not(
.pi-button__xx-small
):not(.pi-button__trimmed):not(.pi-button__toggle) {
button:not(.pi-close-button):not(.pi-hamburger):not(
.pi-button__icon--single
):not(.pi-button__xx-small):not(.pi-button__trimmed):not(
.pi-button__toggle
) {
min-width: 100%;
}
}
}
.pi-saas-panel-subtitle {
.pi-panel-subtitle-content {
.pi-panel-subtitle-content {
width: 100%;
}
}
@@ -415,9 +423,11 @@ html {
.pi-panel {
&.pi-panel__expansion {
.pi-panel-content__expandable {
button:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__icon--single):not(
.pi-button__xx-small
):not(.pi-button__trimmed):not(.pi-button__toggle) {
button:not(.pi-close-button):not(.pi-hamburger):not(
.pi-button__icon--single
):not(.pi-button__xx-small):not(.pi-button__trimmed):not(
.pi-button__toggle
) {
min-width: 9.25rem;
}
}

653
libs/ui/src/lib/styles/common/components/_pi-text.scss
View File

@@ -178,70 +178,266 @@ mark {
}
@mixin textColor($color) {
&:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-#{$color});
}
&:not(button):not([class*='content'])
> *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
> *:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-#{$color});
}
// (50)
&.pi-color__density--50 {
&:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-#{$color}-50);
}
&:not(button):not([class*='content'])
> *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
> *:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-#{$color}-50);
}
}
// (100)
&.pi-color__density--100 {
&:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-#{$color}-100);
}
&:not(button):not([class*='content'])
> *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
> *:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-#{$color}-100);
}
}
// (200)
&.pi-color__density--200 {
&:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-#{$color}-200);
}
&:not(button):not([class*='content'])
> *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
> *:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-#{$color}-200);
}
}
// (300)
&.pi-color__density--300 {
&:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-#{$color}-300);
}
&:not(button):not([class*='content'])
> *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
> *:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-#{$color}-300);
}
}
// (400)
&.pi-color__density--400 {
&:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-#{$color}-400);
}
&:not(button):not([class*='content'])
> *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
> *:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-#{$color}-400);
}
}
// (900)
&.pi-color__density--900 {
&:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-#{$color}-900);
}
&:not(button):not([class*='content'])
> *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
> *:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-#{$color}-900);
}
}
@@ -274,63 +470,266 @@ mark {
// Grey
.pi-color__grey {
&:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-grey);
}
&:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:not(button)
> *:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-grey);
}
// Grey (50)
&.pi-color__density--50 {
&:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-grey-75);
}
&:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:not(button)
> *:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-grey-75);
}
}
// Grey (100)
&.pi-color__density--100 {
&:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-grey-100);
}
&:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:not(button)
> *:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-grey-100);
}
}
// Grey (200)
&.pi-color__density--200 {
&:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-grey-200);
}
&:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:not(button)
> *:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-grey-200);
}
}
// Grey (300)
&.pi-color__density--300 {
&:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-grey-300);
}
&:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:not(button)
> *:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-grey-300);
}
}
// Grey (400)
&.pi-color__density--400 {
&:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-grey-300);
}
&:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:not(button)
> *:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-grey-300);
}
}
// Grey (900)
&.pi-color__density--900 {
&:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-grey-900);
}
&:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:not(button)
> *:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-grey-900);
}
}
@@ -338,27 +737,114 @@ mark {
// White
.pi-color__white {
&:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-white);
}
&:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:not(button)
> *:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-white);
}
// White (200)
&.pi-color__density--200 {
&:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-white-rgba-06);
}
&:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:not(button)
> *:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-white-rgba-06);
}
}
// White (900)
&.pi-color__density--900 {
&:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-white);
}
&:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:not(button)
> *:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-white);
}
}
@@ -366,27 +852,114 @@ mark {
// Black
.pi-color__black {
&:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-grey-900);
}
&:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:not(button)
> *:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-grey-900);
}
// Black (200)
&.pi-color__density--200 {
&:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-grey-900);
}
&:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:not(button)
> *:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-grey-900);
}
}
// Black (900)
&.pi-color__density--900 {
&:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-grey-900);
}
&:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:not(button)
> *:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-grey-900);
}
}

50
libs/ui/src/lib/styles/common/components/pi-button/_pi-button-private.scss
View File

@@ -1,32 +1,34 @@
@mixin privateButtonsSizes {
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__xx-small):not(.pi-button__x-large):not(
.pi-button__toggle
):not(.pi-button__trimmed):not(.ch2-btn):not(.pi-button__icon--single) {
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__xx-small):not(
.pi-button__x-large
):not(.pi-button__toggle):not(.pi-button__trimmed):not(.ch2-btn):not(
.pi-button__icon--single
) {
&:not(.pi-button__x-small):not(.pi-button__xx-small) {
height: var(--pi-spacing-xxx-large);
}
}
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__toggle):not(.pi-button__trimmed):not(
.ch2-btn
):not(.pi-button__icon--single) {
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__toggle):not(
.pi-button__trimmed
):not(.ch2-btn):not(.pi-button__icon--single) {
&.pi-button__x-small {
height: var(--pi-spacing-xx-large);
}
}
// Default
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(.pi-button__toggle):not(
.pi-button__type--menu-item
) {
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(
.pi-button__toggle
):not(.pi-button__type--menu-item) {
// Sizes
// X small
&.pi-button {
&:not(.pi-button__icon):not(.pi-button__x-small):not(.pi-button__small):not(
.pi-button__large
):not(.pi-button__large):not(.pi-button__trimed):not(.pi-button__xx-small):not(
.pi-button__trimmed
) {
&:not(.pi-button__icon):not(.pi-button__x-small):not(
.pi-button__small
):not(.pi-button__large):not(.pi-button__large):not(
.pi-button__trimed
):not(.pi-button__xx-small):not(.pi-button__trimmed) {
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-xxx-large);
}
}
@@ -36,7 +38,9 @@
// Fill
@mixin privateButtonFillColor($color) {
// Default color
&:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not(.pi-color__white) {
&:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not(
.pi-color__white
) {
background-color: var(--pi-color-#{$color});
color: var(--pi-color-white);
&:disabled {
@@ -99,9 +103,9 @@
@mixin privateButtonsColors {
// Default
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(.pi-button__toggle):not(
.pi-button__type--menu-item
) {
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(
.pi-button__toggle
):not(.pi-button__type--menu-item) {
// Color
// White
&.pi-color__white {
@@ -118,9 +122,9 @@
}
}
// White default
&.pi-color__white:not(.pi-color__primary):not(.pi-color__accent):not(.pi-color__warn):not(
.pi-color__highlighted
):not(.pi-color__white) {
&.pi-color__white:not(.pi-color__primary):not(.pi-color__accent):not(
.pi-color__warn
):not(.pi-color__highlighted):not(.pi-color__white) {
&:not(:hover) {
color: var(--pi-color-primary);
}
@@ -154,7 +158,9 @@
&.pi-color__primary,
&:not(.pi-color__primary):not(.pi-color__accent):not(.pi-color__warn):not(
.pi-color__white
):not(.pi-color__black):not(.pi-color__highlighted):not(.pi-color__grey) {
):not(.pi-color__black):not(.pi-color__highlighted):not(
.pi-color__grey
) {
@include privateButtonGhostColor(primary);
}
// Ghost & Accent

223
libs/ui/src/lib/styles/common/components/pi-button/_pi-button-public.scss
View File

@@ -1,5 +1,9 @@
@mixin publicGhostButtonsColors(
$background-image: linear-gradient(30deg, var(--pi-color-primary), var(--pi-color-primary-900)),
$background-image: linear-gradient(
30deg,
var(--pi-color-primary),
var(--pi-color-primary-900)
),
$color: primary
) {
color: var(--pi-color-#{$color});
@@ -29,7 +33,9 @@
}
@mixin publicFillButtonsGradients($color) {
&:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not(.pi-color__white) {
&:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not(
.pi-color__white
) {
background-size: 100%;
background-repeat: repeat;
color: var(--pi-color-white);
@@ -66,42 +72,44 @@
// Sizes
@mixin publicButtonsSizes {
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__xx-small):not(.pi-button__x-large):not(
.pi-button__toggle
):not(.pi-button__trimmed):not(.ch2-btn):not(.pi-button__icon--single):not(
.pi-button__type--menu-item
) {
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__xx-small):not(
.pi-button__x-large
):not(.pi-button__toggle):not(.pi-button__trimmed):not(.ch2-btn):not(
.pi-button__icon--single
):not(.pi-button__type--menu-item) {
height: 2.875rem;
&.pi-button__icon--single {
width: var(--pi-spacing-xxxx-large);
}
}
&:not(.pi-button__toggle):not(.pi-button__x-large):not(.pi-button__trimmed):not(
.pi-button__type--menu-item
) {
&:not(.pi-button__toggle):not(.pi-button__x-large):not(
.pi-button__trimmed
):not(.pi-button__type--menu-item) {
height: 2.875rem;
&.pi-button__icon--single {
width: var(--pi-spacing-xxxx-large);
}
}
// Default
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(.pi-button__toggle):not(
.pi-button__type--menu-item
) {
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(
.pi-button__toggle
):not(.pi-button__type--menu-item) {
// Sizes
// X small
&.pi-button {
&:not(.pi-button__icon--single):not(.pi-button__x-small):not(.pi-button__small):not(
.pi-button__large
):not(.pi-button__trimed):not(.pi-button__xx-small):not(.pi-button__trimmed) {
&:not(.pi-button__icon--single):not(.pi-button__x-small):not(
.pi-button__small
):not(.pi-button__large):not(.pi-button__trimed):not(
.pi-button__xx-small
):not(.pi-button__trimmed) {
min-height: 2.875rem;
}
&:not(.pi-button__icon):not(.pi-button__x-small):not(.pi-button__small):not(
.pi-button__large
):not(.pi-button__large):not(.pi-button__trimed):not(.pi-button__xx-small):not(
.pi-button__trimmed
) {
&:not(.pi-button__icon):not(.pi-button__x-small):not(
.pi-button__small
):not(.pi-button__large):not(.pi-button__large):not(
.pi-button__trimed
):not(.pi-button__xx-small):not(.pi-button__trimmed) {
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-xxx-large);
}
}
@@ -111,7 +119,9 @@
// Shine hover effect
@mixin publicButtonsShineHoverEffect {
// Hover shine effect
&:not(.pi-button__appearance--ghost):not(.pi-button__type--menu-item):not(.pi-color__black) {
&:not(.pi-button__appearance--ghost):not(.pi-button__type--menu-item):not(
.pi-color__black
) {
position: relative;
overflow: hidden;
&::after {
@@ -149,9 +159,12 @@
}
&:active {
box-shadow: 0px 0px 0px white;
-webkit-box-shadow: inset -0.125rem -0.125rem -0.125rem rgba(255, 255, 255, 0.25);
-moz-box-shadow: inset -0.125rem -0.125rem -0.125rem rgba(255, 255, 255, 0.25);
box-shadow: inset -0.125rem -0.125rem -0.125rem rgba(255, 255, 255, 0.25);
-webkit-box-shadow: inset -0.125rem -0.125rem -0.125rem
rgba(255, 255, 255, 0.25);
-moz-box-shadow: inset -0.125rem -0.125rem -0.125rem
rgba(255, 255, 255, 0.25);
box-shadow: inset -0.125rem -0.125rem -0.125rem
rgba(255, 255, 255, 0.25);
}
}
// Mode Dark
@@ -166,9 +179,12 @@
}
&:active {
box-shadow: 0px 0px 0px white;
-webkit-box-shadow: inset -0.125rem -0.125rem -0.125rem rgba(255, 255, 255, 0.125);
-moz-box-shadow: inset -0.125rem -0.125rem -0.125rem rgba(255, 255, 255, 0.125);
box-shadow: inset -0.125rem -0.125rem -0.125rem rgba(255, 255, 255, 0.125);
-webkit-box-shadow: inset -0.125rem -0.125rem -0.125rem
rgba(255, 255, 255, 0.125);
-moz-box-shadow: inset -0.125rem -0.125rem -0.125rem
rgba(255, 255, 255, 0.125);
box-shadow: inset -0.125rem -0.125rem -0.125rem
rgba(255, 255, 255, 0.125);
}
}
&:focus {
@@ -193,9 +209,9 @@
@include publicButtonsShineHoverEffect;
}
// Default
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(.pi-button__toggle):not(
.pi-button__type--menu-item
) {
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(
.pi-button__toggle
):not(.pi-button__type--menu-item) {
font: {
weight: 600;
}
@@ -217,9 +233,9 @@
}
}
// White default
&.pi-color__white:not(.pi-color__primary):not(.pi-color__accent):not(.pi-color__warn):not(
.pi-color__highlighted
) {
&.pi-color__white:not(.pi-color__primary):not(.pi-color__accent):not(
.pi-color__warn
):not(.pi-color__highlighted) {
&:not(:hover) {
color: var(--pi-color-primary);
}
@@ -263,9 +279,9 @@
}
}
// White default
&.pi-color__white:not(.pi-color__primary):not(.pi-color__accent):not(.pi-color__warn):not(
.pi-color__highlighted
) {
&.pi-color__white:not(.pi-color__primary):not(.pi-color__accent):not(
.pi-color__warn
):not(.pi-color__highlighted) {
&:not(:hover) {
color: var(--pi-color-black);
}
@@ -274,17 +290,20 @@
// Warn
&.pi-color__warn {
&:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not(
.pi-color__white
) {
@include publicButtonsBackgroundColors(var(--pi-color-warn-200), var(--pi-color-warn-900));
&:not(.pi-button__appearance--ghost):not(
.pi-button__appearance--outline
):not(.pi-color__white) {
@include publicButtonsBackgroundColors(
var(--pi-color-warn-200),
var(--pi-color-warn-900)
);
}
// Mode
// Default
&:not(.pi-color__mode--light) {
&:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not(
.pi-color__white
) {
&:not(.pi-button__appearance--ghost):not(
.pi-button__appearance--outline
):not(.pi-color__white) {
background-image: linear-gradient(
300deg,
hsl(0deg 74% 71%) 0%,
@@ -302,9 +321,9 @@
}
// Light
&.pi-color__mode--light {
&:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not(
.pi-color__white
) {
&:not(.pi-button__appearance--ghost):not(
.pi-button__appearance--outline
):not(.pi-color__white) {
background-image: linear-gradient(
300deg,
hsl(350deg 100% 93%) 0%,
@@ -330,9 +349,9 @@
// Success
&.pi-color__success {
&:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not(
.pi-color__white
) {
&:not(.pi-button__appearance--ghost):not(
.pi-button__appearance--outline
):not(.pi-color__white) {
@include publicButtonsBackgroundColors(
var(--pi-color-success-200),
var(--pi-color-success-900)
@@ -341,9 +360,9 @@
// Mode
// Default
&:not(.pi-color__mode--light) {
&:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not(
.pi-color__white
) {
&:not(.pi-button__appearance--ghost):not(
.pi-button__appearance--outline
):not(.pi-color__white) {
background-image: linear-gradient(
300deg,
hsl(155deg 48% 79%) 0%,
@@ -361,9 +380,9 @@
}
// Light
&.pi-color__mode--light {
&:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not(
.pi-color__white
) {
&:not(.pi-button__appearance--ghost):not(
.pi-button__appearance--outline
):not(.pi-color__white) {
background-image: linear-gradient(
300deg,
hsl(155deg 62% 91%) 0%,
@@ -402,13 +421,17 @@
&.pi-color__primary,
&:not(.pi-color__primary):not(.pi-color__accent):not(.pi-color__warn):not(
.pi-color__white
):not(.pi-color__black):not(.pi-color__highlighted):not(.pi-color__grey):not(
.pi-color__success
) {
):not(.pi-color__black):not(.pi-color__highlighted):not(
.pi-color__grey
):not(.pi-color__success) {
@include publicGhostButtonsColors;
&:disabled {
@include publicGhostButtonsColors(
linear-gradient(30deg, var(--pi-color-primary-100), var(--pi-color-primary-200)),
linear-gradient(
30deg,
var(--pi-color-primary-100),
var(--pi-color-primary-200)
),
primary-200
);
}
@@ -416,12 +439,20 @@
// Ghost & Accent
&.pi-color__accent {
@include publicGhostButtonsColors(
linear-gradient(30deg, var(--pi-color-accent), var(--pi-color-accent-900)),
linear-gradient(
30deg,
var(--pi-color-accent),
var(--pi-color-accent-900)
),
accent
);
&:disabled {
@include publicGhostButtonsColors(
linear-gradient(30deg, var(--pi-color-accent-100), var(--pi-color-accent-100)),
linear-gradient(
30deg,
var(--pi-color-accent-100),
var(--pi-color-accent-100)
),
accent-200
);
}
@@ -429,12 +460,20 @@
// Ghost & Warn
&.pi-color__warn {
@include publicGhostButtonsColors(
linear-gradient(30deg, var(--pi-color-warn), var(--pi-color-warn-900)),
linear-gradient(
30deg,
var(--pi-color-warn),
var(--pi-color-warn-900)
),
warn
);
&:disabled {
@include publicGhostButtonsColors(
linear-gradient(30deg, var(--pi-color-warn-100), var(--pi-color-warn-200)),
linear-gradient(
30deg,
var(--pi-color-warn-100),
var(--pi-color-warn-200)
),
warn-200
);
}
@@ -444,7 +483,11 @@
@include publicGhostButtonsColors;
&:disabled {
@include publicGhostButtonsColors(
linear-gradient(30deg, var(--pi-color-white), rgba($color: white, $alpha: 0.6)),
linear-gradient(
30deg,
var(--pi-color-white),
rgba($color: white, $alpha: 0.6)
),
white
);
}
@@ -452,12 +495,20 @@
// Ghost & Black
&.pi-color__black {
@include publicGhostButtonsColors(
linear-gradient(30deg, var(--pi-color-black), var(--pi-color-grey-900)),
linear-gradient(
30deg,
var(--pi-color-black),
var(--pi-color-grey-900)
),
grey
);
&:disabled {
@include publicGhostButtonsColors(
linear-gradient(30deg, var(--pi-color-black), rgba($color: #3d3d3d, $alpha: 0.6)),
linear-gradient(
30deg,
var(--pi-color-black),
rgba($color: #3d3d3d, $alpha: 0.6)
),
grey-200
);
}
@@ -465,7 +516,11 @@
// Ghost & Highlighted
&.pi-color__highlighted {
@include publicGhostButtonsColors(
linear-gradient(30deg, var(--pi-color-highlighted), var(--pi-color-highlighted-900)),
linear-gradient(
30deg,
var(--pi-color-highlighted),
var(--pi-color-highlighted-900)
),
highlighted
);
&:disabled {
@@ -482,12 +537,20 @@
// Ghost & Grey
&.pi-color__grey {
@include publicGhostButtonsColors(
linear-gradient(30deg, var(--pi-color-grey-100), var(--pi-color-grey-400)),
linear-gradient(
30deg,
var(--pi-color-grey-100),
var(--pi-color-grey-400)
),
grey-400
);
&:disabled {
@include publicGhostButtonsColors(
linear-gradient(30deg, var(--pi-color-grey-25), var(--pi-color-grey-75)),
linear-gradient(
30deg,
var(--pi-color-grey-25),
var(--pi-color-grey-75)
),
grey-50
);
}
@@ -495,12 +558,20 @@
// Ghost & Success
&.pi-color__success {
@include publicGhostButtonsColors(
linear-gradient(30deg, var(--pi-color-success), var(--pi-color-success-900)),
linear-gradient(
30deg,
var(--pi-color-success),
var(--pi-color-success-900)
),
success
);
&:disabled {
@include publicGhostButtonsColors(
linear-gradient(30deg, var(--pi-color-success-100), var(--pi-color-success-200)),
linear-gradient(
30deg,
var(--pi-color-success-100),
var(--pi-color-success-200)
),
success-200
);
}
@@ -627,8 +698,12 @@
@mixin publicFixedButtonSideSpacing(
$top-spacing: calc(var(--pi-spacing-medium) + env(safe-area-inset-top)),
$side-spacing: var(--pi-spacing-medium),
$bottom-left-spacing: calc(var(--pi-spacing-medium) + env(safe-area-inset-bottom)),
$bottom-right-spacing: calc(5.75rem + var(--pi-spacing-large) + env(safe-area-inset-bottom))
$bottom-left-spacing: calc(
var(--pi-spacing-medium) + env(safe-area-inset-bottom)
),
$bottom-right-spacing: calc(
5.75rem + var(--pi-spacing-large) + env(safe-area-inset-bottom)
)
) {
.pi-shell {
&.pi-shell__deale-website,

22
libs/ui/src/lib/styles/common/components/pi-button/_pi-button.scss
View File

@@ -13,9 +13,9 @@
}
// Default
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(.pi-button__toggle):not(
.pi-button__type--menu-item
) {
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(
.pi-button__toggle
):not(.pi-button__type--menu-item) {
border: none;
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__xx-small):not(
@@ -26,7 +26,9 @@
padding-top: var(--pi-spacing-xx-small);
padding-bottom: var(--pi-spacing-xx-small);
}
&:not(.pi-button__x-large):not(.pi-button__trimmed):not(.pi-button__toggle) {
&:not(.pi-button__x-large):not(.pi-button__trimmed):not(
.pi-button__toggle
) {
&:not(.pi-button__x-small) {
border-radius: var(--pi-border-radius-medium);
-webkit-border-radius: var(--pi-border-radius-medium);
@@ -39,9 +41,9 @@
}
}
&:not(.pi-button__icon--single):not(.pi-button__xx-small):not(.pi-button__trimmed):not(
.pi-button__toggle
):not(.ch2-btn) {
&:not(.pi-button__icon--single):not(.pi-button__xx-small):not(
.pi-button__trimmed
):not(.pi-button__toggle):not(.ch2-btn) {
&:not(.pi-button__x-small) {
min-width: 5.5rem;
padding-left: var(--pi-spacing-x-large);
@@ -62,9 +64,9 @@
@mixin buttonsSizes {
// Default
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(.pi-button__toggle):not(
.pi-button__type--menu-item
) {
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(
.pi-button__toggle
):not(.pi-button__type--menu-item) {
&.pi-button__x-small {
font: {
size: 0.8125rem;

13
libs/ui/src/lib/styles/common/components/pi-data-grid/_base-data-grid.scss
View File

@@ -1,10 +1,15 @@
@mixin cellWidth($default-width, $action-width, $icon-width, $description-width) {
@mixin cellWidth(
$default-width,
$action-width,
$icon-width,
$description-width
) {
.pi-cell {
display: flex;
// Cell type default
&:not(.pi-cell__type--icon):not(.pi-cell__type--action):not(.pi-cell__type--checkbox):not(
.pi-cell__type--date
):not(.pi-cell__type--description) {
&:not(.pi-cell__type--icon):not(.pi-cell__type--action):not(
.pi-cell__type--checkbox
):not(.pi-cell__type--date):not(.pi-cell__type--description) {
width: $default-width;
flex-grow: 1;
}

5
libs/ui/src/lib/styles/common/components/pi-data-grid/_card-type.scss
View File

@@ -21,7 +21,10 @@
&.pi-card {
display: grid;
.pi-cell {
min-height: calc(var(--pi-spacing-xxxx-large) + var(--pi-spacing-xx-small) + 0.0625rem);
min-height: calc(
var(--pi-spacing-xxxx-large) + var(--pi-spacing-xx-small) +
0.0625rem
);
margin-top: var(--pi-spacing-xx-small);
& > .pi-text-viewer,

10
libs/ui/src/lib/styles/common/components/pi-data-grid/_data-direction.scss
View File

@@ -10,7 +10,10 @@
*
**/
@mixin dataGridDataDirectionColumn($key-cell-width: 15rem, $value-cell-width: 6rem) {
@mixin dataGridDataDirectionColumn(
$key-cell-width: 15rem,
$value-cell-width: 6rem
) {
// MODE List (Table)
.pi-data-grid {
@@ -24,7 +27,10 @@
// Cell
.pi-cell {
min-height: calc(var(--pi-spacing-xxxx-large) + var(--pi-spacing-xx-small) + 0.0625rem);
min-height: calc(
var(--pi-spacing-xxxx-large) + var(--pi-spacing-xx-small) +
0.0625rem
);
margin-top: var(--pi-spacing-xx-small);
// Vertival align
&.pi-cell__vertical-align--center {

4
libs/ui/src/lib/styles/common/components/pi-field/_pi-field-incremental.scss
View File

@@ -46,7 +46,9 @@
.mat-mdc-form-field-flex {
justify-content: space-between;
align-items: center;
height: calc(var(--pi-spacing-xxxx-large) + var(--pi-spacing-xx-small));
height: calc(
var(--pi-spacing-xxxx-large) + var(--pi-spacing-xx-small)
);
.mat-mdc-form-field-infix {
text-align: center;
}

3
libs/ui/src/lib/styles/common/components/pi-field/_pi-field-textarea.scss
View File

@@ -32,7 +32,8 @@
padding: var(--pi-spacing-small) 0;
textarea {
&.mat-mdc-input-element {
padding: var(--pi-spacing-xxx-small) 0 var(--pi-spacing-x-small) 0;
padding: var(--pi-spacing-xxx-small) 0 var(--pi-spacing-x-small)
0;
}
}
}

8
libs/ui/src/lib/styles/common/components/pi-field/_pi-field.scss
View File

@@ -56,7 +56,9 @@
// Fill
&.mat-form-field-appearance-fill {
.mat-mdc-form-field-underline {
transform: translateY(calc(var(--pi-spacing-medium) + var(--pi-spacing-xxx-small)));
transform: translateY(
calc(var(--pi-spacing-medium) + var(--pi-spacing-xxx-small))
);
}
input {
@@ -122,7 +124,9 @@ html {
&.mat-form-field-appearance-fill {
.mat-mdc-form-field-underline {
transform: translateY(
calc(var(--pi-spacing-medium) + var(--pi-spacing-xxx-small))
calc(
var(--pi-spacing-medium) + var(--pi-spacing-xxx-small)
)
);
}

61
libs/ui/src/lib/styles/common/layouts/_pi-09-pricing-layout.scss
View File

@@ -32,8 +32,10 @@
&:active {
transform: translate(0, -0.125rem);
box-shadow: 0px 0px 0px white;
-webkit-box-shadow: inset -0.125rem -0.125rem -0.125rem rgba(255, 255, 255, 0.25);
-moz-box-shadow: inset -0.125rem -0.125rem -0.125rem rgba(255, 255, 255, 0.25);
-webkit-box-shadow: inset -0.125rem -0.125rem -0.125rem
rgba(255, 255, 255, 0.25);
-moz-box-shadow: inset -0.125rem -0.125rem -0.125rem
rgba(255, 255, 255, 0.25);
box-shadow: inset -0.125rem -0.125rem -0.125rem rgba(255, 255, 255, 0.25);
}
}
@@ -49,7 +51,11 @@
}
}
@mixin billingCycleContentColor($text-color, $theming-color-light, $theming-color) {
@mixin billingCycleContentColor(
$text-color,
$theming-color-light,
$theming-color
) {
color: var(--pi-color-#{$text-color});
background-color: var(--pi-color-#{$theming-color});
border-color: var(--pi-color-#{$theming-color});
@@ -169,7 +175,11 @@
fieldset {
.pi-list-item {
&.is-active {
@include billingCycleContentColor(primary-900, primary, primary-100);
@include billingCycleContentColor(
primary-900,
primary,
primary-100
);
}
&:hover {
&:not(.is-active) {
@@ -237,7 +247,10 @@
}
}
@mixin pricingLayoutSpacings($bottom-blocks-top-spacing, $bottom-blocks-height) {
@mixin pricingLayoutSpacings(
$bottom-blocks-top-spacing,
$bottom-blocks-height
) {
.pi-layout {
&.pi-layout__09-pricing {
& > *:nth-child(4) {
@@ -253,10 +266,14 @@
.pi-card-content__center {
& > article {
&:nth-child(n + 2) {
margin-top: calc(#{$bottom-blocks-top-spacing} + 2 * var(--pi-spacing-xx-large));
margin-top: calc(
#{$bottom-blocks-top-spacing} + 2 * var(--pi-spacing-xx-large)
);
}
& > .pi-list-item {
height: calc(#{$bottom-blocks-height} + 2 * var(--pi-spacing-small));
height: calc(
#{$bottom-blocks-height} + 2 * var(--pi-spacing-small)
);
}
}
}
@@ -271,11 +288,19 @@
fieldset {
.pi-list-item {
&.is-active {
@include billingCycleContentColor(highlighted-900, highlighted, highlighted-100);
@include billingCycleContentColor(
highlighted-900,
highlighted,
highlighted-100
);
}
&:hover {
&:not(.is-active) {
@include billingCycleContentColor(highlighted, highlighted, highlighted-50);
@include billingCycleContentColor(
highlighted,
highlighted,
highlighted-50
);
}
}
}
@@ -285,7 +310,11 @@
&.pi-color__mode--light {
@include checkIconBackgroundColor(var(--pi-color-highlighted-50));
@include cardInternalBorders(var(--pi-color-highlighted-100));
@include pricingCardContentColor(highlighted, white, highlighted-dark);
@include pricingCardContentColor(
highlighted,
white,
highlighted-dark
);
}
}
}
@@ -293,7 +322,9 @@
}
}
@mixin pricingLayoutWidth($container-width: calc(100% - var(--pi-spacing-xx-large))) {
@mixin pricingLayoutWidth(
$container-width: calc(100% - var(--pi-spacing-xx-large))
) {
.pi-layout {
&.pi-layout__09-pricing {
max-width: $container-width;
@@ -720,9 +751,11 @@ html {
width: 100%;
font-weight: 300;
&:not(.mdc-switch):not(.pi-button__toggle) {
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__xx-small):not(
.pi-button__x-large
):not(.pi-button__toggle):not(.pi-button__trimmed) {
&:not(.pi-close-button):not(.pi-hamburger):not(
.pi-button__xx-small
):not(.pi-button__x-large):not(.pi-button__toggle):not(
.pi-button__trimmed
) {
height: var(--pi-spacing-xxxx-large);
}
}

10
libs/ui/src/lib/styles/common/layouts/_pi-container-layout.scss
View File

@@ -1,4 +1,7 @@
@mixin containerWidth($width: calc(100% - var(--pi-spacing-xx-large)), $no-padding-width: 100%) {
@mixin containerWidth(
$width: calc(100% - var(--pi-spacing-xx-large)),
$no-padding-width: 100%
) {
.pi-shell {
&.pi-shell__deale-website {
.pi-container-layout {
@@ -51,7 +54,10 @@ html {
&.is-desktop {
// Desktop S & M
&:not(.is-desktop__large) {
@include containerWidth(var(--pi-public-width-container), var(--pi-public-width-container));
@include containerWidth(
var(--pi-public-width-container),
var(--pi-public-width-container)
);
}
// Desktop L
&.is-desktop__large {

8
libs/ui/src/lib/styles/common/vendors/_ch2-button.scss vendored
View File

@@ -24,7 +24,9 @@
}
}
}
button:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__icon--single) {
button:not(.pi-close-button):not(.pi-hamburger):not(
.pi-button__icon--single
) {
&.ch2-btn {
min-height: var(--pi-spacing-xxx-large) !important;
&:not(.ch2-btn-primary) {
@@ -238,7 +240,9 @@
&:nth-child(1) {
button {
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__icon--single) {
&:not(.pi-close-button):not(.pi-hamburger):not(
.pi-button__icon--single
) {
min-width: unset;
width: 50%;
}

72
libs/ui/src/lib/styles/common/vendors/_mat-checkbox.scss vendored
View File

@@ -52,38 +52,76 @@
}
.mdc-checkbox {
padding: calc(
(var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) - 1.125rem) / 2
(
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) -
1.125rem
) /
2
);
margin: calc(
(
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) -
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large))
) / 2
var(
--mdc-checkbox-state-layer-size,
var(--pi-spacing-x-large)
) - var(
--mdc-checkbox-state-layer-size,
var(--pi-spacing-x-large)
)
) /
2
);
.mdc-checkbox__background {
top: calc((var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) - 1.125rem) / 2);
top: calc(
(
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) -
1.125rem
) /
2
);
left: calc(
(var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) - 1.125rem) / 2
(
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) -
1.125rem
) /
2
);
}
.mdc-checkbox__native-control {
top: calc(
(
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) -
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large))
) / 2
var(
--mdc-checkbox-state-layer-size,
var(--pi-spacing-x-large)
) - var(
--mdc-checkbox-state-layer-size,
var(--pi-spacing-x-large)
)
) /
2
);
right: calc(
(
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) -
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large))
) / 2
var(
--mdc-checkbox-state-layer-size,
var(--pi-spacing-x-large)
) - var(
--mdc-checkbox-state-layer-size,
var(--pi-spacing-x-large)
)
) /
2
);
left: calc(
(
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) -
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large))
) / 2
var(
--mdc-checkbox-state-layer-size,
var(--pi-spacing-x-large)
) - var(
--mdc-checkbox-state-layer-size,
var(--pi-spacing-x-large)
)
) /
2
);
width: var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large));
height: var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large));
@@ -115,7 +153,9 @@
&:hover {
.mdc-checkbox__native-control {
&:enabled {
&:not(:checked):not(:indeterminate):not([data-indeterminate='true']) {
&:not(:checked):not(:indeterminate):not(
[data-indeterminate='true']
) {
& ~ .mdc-checkbox__background {
border-color: var(--pi-color-primary);
}

10
libs/ui/src/lib/styles/common/vendors/_mat-chip.scss vendored
View File

@@ -2,8 +2,8 @@
.mat-mdc-chip {
&.mat-mdc-standard-chip {
color: var(--pi-color-primary);
padding: var(--pi-spacing-xx-small) var(--pi-spacing-xxx-small) var(--pi-spacing-xx-small)
var(--pi-spacing-medium);
padding: var(--pi-spacing-xx-small) var(--pi-spacing-xxx-small)
var(--pi-spacing-xx-small) var(--pi-spacing-medium);
gap: var(--pi-spacing-xxxx-small);
background-color: transparent;
border: 1px solid;
@@ -31,9 +31,9 @@
button {
&.pi-button {
&.pi-button__primary {
&:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not(
.pi-button__white
) {
&:not(.pi-button__appearance--ghost):not(
.pi-button__appearance--outline
):not(.pi-button__white) {
background-color: transparent;
}
}

9
libs/ui/src/lib/styles/common/vendors/_mat-progress-bar.scss vendored
View File

@@ -19,8 +19,13 @@
}
.mdc-linear-progress__bar-inner {
border-style: solid;
border-image: linear-gradient(45deg, var(--pi-color-primary), var(--pi-color-highlighted)) 1;
border-top-width: var(--mdc-linear-progress-track-height, .375rem);
border-image: linear-gradient(
45deg,
var(--pi-color-primary),
var(--pi-color-highlighted)
)
1;
border-top-width: var(--mdc-linear-progress-track-height, 0.375rem);
}
}
}

13
libs/ui/src/lib/styles/common/vendors/_mat-slider.scss vendored
View File

@@ -126,8 +126,9 @@ html {
&:not(.pi-slider__range) {
.mat-mdc-slider {
width: calc(
100vw - var(--pi-spacing-xxxx-large) - var(--pi-spacing-xx-large) -
var(--pi-spacing-xx-large)
100vw - var(--pi-spacing-xxxx-large) - var(
--pi-spacing-xx-large
) - var(--pi-spacing-xx-large)
);
}
}
@@ -137,9 +138,11 @@ html {
.pi-slider {
.mat-mdc-slider {
width: calc(
100vw - var(--pi-spacing-xxxx-large) - var(--pi-spacing-xx-large) -
var(--pi-spacing-x-large) - var(--pi-spacing-large) - var(--pi-spacing-medium) -
var(--pi-spacing-medium)
100vw - var(--pi-spacing-xxxx-large) - var(
--pi-spacing-xx-large
) - var(--pi-spacing-x-large) - var(--pi-spacing-large) - var(
--pi-spacing-medium
) - var(--pi-spacing-medium)
);
}
}

6
libs/ui/src/lib/styles/common/vendors/_typeform.scss vendored
View File

@@ -1,8 +1,8 @@
@media screen and (max-width: 77.5rem) {
.tf-v1-popup {
.tf-v1-close {
transform: translateX(2rem);
transform: translateY(-2rem);
transform: translateX(2rem);
transform: translateY(-2rem);
}
}
}
}

86
libs/ui/src/lib/styles/common/wrappers/_pi-action-wrapper.scss
View File

@@ -27,14 +27,21 @@
.pi-wrapper__action {
&.pi-wrapper__action--position-fixed-mobile {
left: var(--pi-spacing-#{$side-spacing});
width: calc(100% - var(--pi-spacing-#{$side-spacing}) - var(--pi-spacing-#{$side-spacing}));
width: calc(
100% - var(--pi-spacing-#{$side-spacing}) - var(
--pi-spacing-#{$side-spacing}
)
);
}
}
}
@mixin fixedActionWrapperMainBottom(
$position: fixed,
$bottom: calc(var(--pi-height-footer) + env(safe-area-inset-bottom) - var(--pi-spacing-x-large))
$bottom: calc(
var(--pi-height-footer) +
env(safe-area-inset-bottom) - var(--pi-spacing-x-large)
)
) {
.pi-layout {
&.pi-layout__main {
@@ -112,8 +119,9 @@ html {
.pi-wrapper__action {
&.pi-wrapper__action--position-fixed-mobile {
bottom: calc(
var(--pi-spacing-x-large) + var(--pi-spacing-x-large) + var(--pi-height-footer) +
var(--pi-spacing-x-large) + env(safe-area-inset-bottom)
var(--pi-spacing-x-large) + var(--pi-spacing-x-large) +
var(--pi-height-footer) + var(--pi-spacing-x-large) +
env(safe-area-inset-bottom)
);
}
}
@@ -130,7 +138,8 @@ html {
@include fixedActionWrapperMainBottom(
unset,
calc(
var(--pi-height-footer) + env(safe-area-inset-bottom) - var(--pi-spacing-x-large)
var(--pi-height-footer) +
env(safe-area-inset-bottom) - var(--pi-spacing-x-large)
)
);
}
@@ -139,14 +148,14 @@ html {
.pi-layout {
.pi-wrapper__action {
button {
&:not(.pi-close-button):not(.pi-hamburger).pi-button:not(.pi-button__icon):not(
.pi-button__x-small
):not(.pi-button__small):not(.pi-button__large):not(.pi-button__trimed):not(
.pi-button__xx-small
),
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__icon--single):not(
.pi-button__xx-small
) {
&:not(.pi-close-button):not(.pi-hamburger).pi-button:not(
.pi-button__icon
):not(.pi-button__x-small):not(.pi-button__small):not(
.pi-button__large
):not(.pi-button__trimed):not(.pi-button__xx-small),
&:not(.pi-close-button):not(.pi-hamburger):not(
.pi-button__icon--single
):not(.pi-button__xx-small) {
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-small);
padding-left: var(--pi-spacing-small);
padding-right: var(--pi-spacing-small);
@@ -169,7 +178,9 @@ html {
// Only fixed in small devices
&.pi-wrapper__action--position-fixed-mobile {
left: 0;
bottom: calc(var(--pi-spacing-x-large) + env(safe-area-inset-bottom));
bottom: calc(
var(--pi-spacing-x-large) + env(safe-area-inset-bottom)
);
width: 100%;
}
}
@@ -182,7 +193,8 @@ html {
// Only fixed in small devices
&.pi-wrapper__action--position-fixed-mobile {
bottom: calc(
var(--pi-height-footer) - var(--pi-spacing-large) + env(safe-area-inset-bottom)
var(--pi-height-footer) - var(--pi-spacing-large) +
env(safe-area-inset-bottom)
);
}
}
@@ -207,11 +219,13 @@ html {
&.is-tablet__large {
@include fixedActionWrapperMain(
calc(
var(--pi-width-navbar-collapsed) + var(--pi-spacing-x-large) + var(--pi-spacing-x-large)
var(--pi-width-navbar-collapsed) + var(--pi-spacing-x-large) +
var(--pi-spacing-x-large)
),
calc(
100% - var(--pi-width-navbar-collapsed) - var(--pi-spacing-x-large) -
var(--pi-spacing-x-large) - var(--pi-spacing-x-large)
100% - var(--pi-width-navbar-collapsed) - var(
--pi-spacing-x-large
) - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)
)
);
}
@@ -225,7 +239,10 @@ html {
& > div {
// Has Not Sticky Note
&:not(.has-bottom-sticky-note) {
@include fixedActionWrapperMainBottom(fixed, var(--pi-spacing-x-large));
@include fixedActionWrapperMainBottom(
fixed,
var(--pi-spacing-x-large)
);
}
// Sticky Note
&.has-bottom-sticky-note {
@@ -246,7 +263,10 @@ html {
var(--pi-width-navbar-collapsed) + var(--pi-spacing-x-large) +
var(--pi-spacing-x-large) + var(--pi-spacing-x-large)
),
calc(100% - var(--pi-width-navbar-collapsed) - var(--pi-width-aside) - 7.75rem)
calc(
100% - var(--pi-width-navbar-collapsed) - var(--pi-width-aside) -
7.75rem
)
);
}
&.aside-is-closed {
@@ -256,8 +276,9 @@ html {
var(--pi-spacing-x-large) + var(--pi-spacing-x-large)
),
calc(
90% - var(--pi-width-navbar-collapsed) - var(--pi-spacing-x-large) -
var(--pi-spacing-xxx-small)
90% - var(--pi-width-navbar-collapsed) - var(
--pi-spacing-x-large
) - var(--pi-spacing-xxx-small)
)
);
}
@@ -271,7 +292,10 @@ html {
var(--pi-width-navbar-expanded) + var(--pi-spacing-x-large) +
var(--pi-spacing-x-large) + var(--pi-spacing-x-large)
),
calc(100% - var(--pi-width-navbar-expanded) - var(--pi-width-aside) - 7.75rem)
calc(
100% - var(--pi-width-navbar-expanded) - var(--pi-width-aside) -
7.75rem
)
);
}
// Aside is closed
@@ -282,8 +306,10 @@ html {
var(--pi-spacing-x-large) + var(--pi-spacing-x-large)
),
calc(
90% - var(--pi-width-navbar-expanded) - var(--pi-spacing-x-large) -
var(--pi-spacing-x-large) - var(--pi-spacing-medium) - 0.0625rem
90% - var(--pi-width-navbar-expanded) - var(
--pi-spacing-x-large
) - var(--pi-spacing-x-large) - var(--pi-spacing-medium) -
0.0625rem
)
);
}
@@ -301,7 +327,10 @@ html {
var(--pi-width-navbar-collapsed) + var(--pi-spacing-x-large) +
var(--pi-spacing-x-large) + var(--pi-spacing-x-large)
),
calc(100% - var(--pi-width-navbar-collapsed) - var(--pi-width-aside) - 7.75rem)
calc(
100% - var(--pi-width-navbar-collapsed) - var(--pi-width-aside) -
7.75rem
)
);
}
// Aside is closed
@@ -324,7 +353,10 @@ html {
var(--pi-width-navbar-expanded) + var(--pi-spacing-x-large) +
var(--pi-spacing-x-large) + var(--pi-spacing-x-large)
),
calc(100% - var(--pi-width-navbar-expanded) - var(--pi-width-aside) - 7.75rem)
calc(
100% - var(--pi-width-navbar-expanded) - var(--pi-width-aside) -
7.75rem
)
);
}
// Aside is closed

5
libs/ui/src/lib/styles/common/wrappers/_pi-list-wrapper.scss
View File

@@ -7,7 +7,10 @@
& > section {
overflow-y: scroll;
height: calc(
100vh - var(--pi-height-header-#{$device}) - var(--pi-height-layout-header) - #{$extra-height}rem
100vh - var(--pi-height-header-#{$device}) - var(
--pi-height-layout-header
) -
#{$extra-height}rem
);
&::-webkit-scrollbar {
display: none;

8
libs/ui/src/lib/styles/common/wrappers/_pi-main-wrapper.scss
View File

@@ -1,4 +1,6 @@
@mixin mainWrapperCentered($height: calc(100% - var(--pi-height-header-mobile))) {
@mixin mainWrapperCentered(
$height: calc(100% - var(--pi-height-header-mobile))
) {
.pi-shell__deale-saas {
& > div {
// NOT Is fullscreen
@@ -54,7 +56,9 @@
}
// Type document
&.pi-wrapper__main--type-document {
padding-bottom: calc(var(--pi-height-action-bar) + var(--pi-spacing-x-large));
padding-bottom: calc(
var(--pi-height-action-bar) + var(--pi-spacing-x-large)
);
h1 {
text-align: center;
}

14
libs/ui/src/lib/styles/configs.ts
View File

@@ -1,5 +1,6 @@
// Shell level
export const shellTheming = (ShellClass: string) => `pi-shell pi-shell__${ShellClass}`;
export const shellTheming = (ShellClass: string) =>
`pi-shell pi-shell__${ShellClass}`;
export const ShellClass = {
// Deale Landings (Public)
@@ -29,7 +30,7 @@ export const height = (height: Height): string => `pi-layout__${height}`;
export const heights = (
mobileHeight: Height,
tabletHeight: Height,
desktopHeight: Height
desktopHeight: Height,
): string =>
`pi-layout__${mobileHeight}--mobile pi-layout__${tabletHeight}--tablet pi-layout__${desktopHeight}--desktop`;
@@ -121,7 +122,8 @@ export const LayoutTypeClass = {
// Splitted
Splitted: 'pi-layout pi-layout__05-splitted',
// SplittedPaywall
SplittedPaywall: 'pi-layout pi-layout__05-splitted pi-05a-splitted-paywall-layout',
SplittedPaywall:
'pi-layout pi-layout__05-splitted pi-05a-splitted-paywall-layout',
// Edge to Edge
EdgeToEdge: 'pi-layout pi-layout__06-edge-to-edge',
// List Left
@@ -141,7 +143,8 @@ export const WebsiteScreenTypeClass = {
};
// Wrappers
export const wrapperType = (wrapperClass: string) => `pi-wrapper pi-wrapper__${wrapperClass}`;
export const wrapperType = (wrapperClass: string) =>
`pi-wrapper pi-wrapper__${wrapperClass}`;
export const WrapperTypeClass = {
Action: wrapperType('action'),
@@ -153,7 +156,8 @@ export const WrapperTypeClass = {
};
// Components
export const componentFamily = (componentClass: string) => `pi-component pi-${componentClass}`;
export const componentFamily = (componentClass: string) =>
`pi-component pi-${componentClass}`;
export const ComponentFamilyClass = {
Button: componentFamily('button'),

75
libs/ui/src/lib/styles/deale-saas/layouts/_pi-00-authentication-layout.scss
View File

@@ -26,7 +26,9 @@
@mixin authenticationLayoutSpacings($spacing, $gap) {
.pi-layout__00-authentication {
&:not(.pi-layout__00-authentication--auth):not(.pi-layout__00-authentication--default-space) {
&:not(.pi-layout__00-authentication--auth):not(
.pi-layout__00-authentication--default-space
) {
.pi-panel {
.pi-panel-content__top,
.pi-panel-content__bottom {
@@ -88,8 +90,14 @@
justify-content: center;
align-items: center;
& > .pi-panel {
background: linear-gradient(rgba(255, 255, 255, 0.95), white) padding-box,
linear-gradient(to right, var(--pi-color-primary-50), var(--pi-color-primary-25)) border-box;
background:
linear-gradient(rgba(255, 255, 255, 0.95), white) padding-box,
linear-gradient(
to right,
var(--pi-color-primary-50),
var(--pi-color-primary-25)
)
border-box;
background-color: rgba(255, 255, 255, 0.66);
animation: gradient 0.5s linear infinite;
animation-direction: alternate-reverse;
@@ -164,7 +172,11 @@ html {
&.is-tablet__large {
.pi-layout__00-authentication {
&:not(.pi-layout__00-authentication--auth) {
@include authenticationLayoutSizes(calc(100% - 4rem), calc(100% - 4rem), 70vh);
@include authenticationLayoutSizes(
calc(100% - 4rem),
calc(100% - 4rem),
70vh
);
}
&.pi-layout__00-authentication--auth {
@include authenticationLayoutSizes(
@@ -272,24 +284,33 @@ html {
.pi-panel-content__top,
.pi-panel-content__bottom {
button {
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(
.pi-button__toggle
):not(.pi-button__type--menu-item):not(.pi-button__icon--single):not(
&:not(.pi-close-button):not(.pi-hamburger):not(
.mdc-switch
):not(.pi-button__toggle):not(
.pi-button__type--menu-item
):not(.pi-button__icon--single):not(
.pi-button__xx-small
):not(.pi-button__trimmed):not(.pi-button__toggle):not(.ch2-btn) {
):not(.pi-button__trimmed):not(.pi-button__toggle):not(
.ch2-btn
) {
min-width: 9.5rem;
}
}
button {
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(
.pi-button__toggle
):not(.pi-button__type--menu-item).pi-button:not(.pi-button__icon):not(
&:not(.pi-close-button):not(.pi-hamburger):not(
.mdc-switch
):not(.pi-button__toggle):not(
.pi-button__type--menu-item
).pi-button:not(.pi-button__icon):not(
.pi-button__x-small
):not(.pi-button__small):not(.pi-button__large):not(.pi-button__large):not(
.pi-button__trimed
):not(.pi-button__xx-small):not(.pi-button__trimmed) {
):not(.pi-button__small):not(.pi-button__large):not(
.pi-button__large
):not(.pi-button__trimed):not(.pi-button__xx-small):not(
.pi-button__trimmed
) {
min-width: 11.5rem;
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-x-large);
padding: var(--pi-spacing-xxxx-small)
var(--pi-spacing-x-large);
}
}
}
@@ -307,10 +328,18 @@ html {
&.is-desktop__small {
.pi-layout__00-authentication {
&:not(.pi-layout__00-authentication--auth) {
@include authenticationLayoutSizes(75%, var(--pi-public-width-container), 70vh);
@include authenticationLayoutSizes(
75%,
var(--pi-public-width-container),
70vh
);
}
&.pi-layout__00-authentication--auth {
@include authenticationLayoutSizes(72%, var(--pi-public-width-container), 76vh);
@include authenticationLayoutSizes(
72%,
var(--pi-public-width-container),
76vh
);
}
}
}
@@ -319,10 +348,18 @@ html {
&.is-desktop__large {
.pi-layout__00-authentication {
&:not(.pi-layout__00-authentication--auth) {
@include authenticationLayoutSizes(72%, var(--pi-public-width-container), 78vh);
@include authenticationLayoutSizes(
72%,
var(--pi-public-width-container),
78vh
);
}
&.pi-layout__00-authentication--auth {
@include authenticationLayoutSizes(66.66%, var(--pi-public-width-container), 78vh);
@include authenticationLayoutSizes(
66.66%,
var(--pi-public-width-container),
78vh
);
}
}
}

12
libs/ui/src/lib/styles/deale-saas/layouts/_pi-00b-authentication-layout-recover-password.scss
View File

@@ -10,11 +10,15 @@ html {
.pi-panel-content__top,
.pi-panel-content__bottom {
button {
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(
.pi-button__toggle
):not(.pi-button__type--menu-item):not(.pi-button__icon--single):not(
&:not(.pi-close-button):not(.pi-hamburger):not(
.mdc-switch
):not(.pi-button__toggle):not(
.pi-button__type--menu-item
):not(.pi-button__icon--single):not(
.pi-button__xx-small
):not(.pi-button__trimmed):not(.pi-button__toggle):not(.ch2-btn) {
):not(.pi-button__trimmed):not(.pi-button__toggle):not(
.ch2-btn
) {
min-width: 13.5rem;
}
}

5
libs/ui/src/lib/styles/deale-saas/layouts/_pi-00c-authentication-layout-user-profile.scss
View File

@@ -1,4 +1,7 @@
@mixin authenticationLayoutSelectMenuTypeCustom($columnsNum: 1, $card-height: unset) {
@mixin authenticationLayoutSelectMenuTypeCustom(
$columnsNum: 1,
$card-height: unset
) {
.pi-layout__00-authentication {
&.pi-layout__00-authentication--user-profile {
.pi-select {

10
libs/ui/src/lib/styles/deale-saas/layouts/_pi-00d-authentication-layout-default-space.scss
View File

@@ -25,11 +25,17 @@
html {
&.is-mobile {
@include authenticationDefaultSpaceLayoutSpacings(var(--pi-spacing-xxx-large), x-small);
@include authenticationDefaultSpaceLayoutSpacings(
var(--pi-spacing-xxx-large),
x-small
);
}
&.is-tablet {
&.is-tablet__small {
@include authenticationDefaultSpaceLayoutSpacings(var(--pi-spacing-xxxx-large), small);
@include authenticationDefaultSpaceLayoutSpacings(
var(--pi-spacing-xxxx-large),
small
);
}
&.is-tablet__large {
@include authenticationDefaultSpaceLayoutSpacings(8rem, x-large);

12
libs/ui/src/lib/styles/deale-saas/layouts/_pi-00e-authentication-layout-impersonation.scss
View File

@@ -9,11 +9,15 @@ html {
.pi-panel-content__top,
.pi-panel-content__bottom {
button {
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(
.pi-button__toggle
):not(.pi-button__type--menu-item):not(.pi-button__icon--single):not(
&:not(.pi-close-button):not(.pi-hamburger):not(
.mdc-switch
):not(.pi-button__toggle):not(
.pi-button__type--menu-item
):not(.pi-button__icon--single):not(
.pi-button__xx-small
):not(.pi-button__trimmed):not(.pi-button__toggle):not(.ch2-btn) {
):not(.pi-button__trimmed):not(.pi-button__toggle):not(
.ch2-btn
) {
min-width: 13.5rem;
}
}

6
libs/ui/src/lib/styles/deale-saas/layouts/_pi-01-dashboard-layout-old.scss
View File

@@ -165,9 +165,9 @@ html {
justify-content: space-between;
height: calc(100% - 4.6563rem);
button {
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-close-button):not(
.pi-hamburger
):not(.pi-button__xx-small) {
&:not(.pi-close-button):not(.pi-hamburger):not(
.pi-close-button
):not(.pi-hamburger):not(.pi-button__xx-small) {
height: 2.4rem;
min-height: unset;
padding-left: var(--pi-spacing-medium);

12
libs/ui/src/lib/styles/deale-saas/layouts/_pi-01-dashboard-layout.scss
View File

@@ -38,8 +38,16 @@ html {
// X Large device
@media screen and (min-width: 140rem) {
@include dashboardLayoutWidth(
calc(100% - var(--pi-spacing-x-large) - var(--pi-width-aside) - var(--pi-spacing-x-large)),
calc(100% - var(--pi-spacing-x-large) - var(--pi-width-aside) - var(--pi-spacing-x-large)),
calc(
100% - var(--pi-spacing-x-large) - var(--pi-width-aside) - var(
--pi-spacing-x-large
)
),
calc(
100% - var(--pi-spacing-x-large) - var(--pi-width-aside) - var(
--pi-spacing-x-large
)
),
unset
);
}

18
libs/ui/src/lib/styles/deale-saas/layouts/_pi-01a-dashboard-layout-company.scss
View File

@@ -33,7 +33,10 @@ $pi-seller-dashboard-overviews-height: 7.5rem; // 120px
justify-content: center;
align-items: center;
min-height: calc(
100vh - var(--pi-spacing-xxxx-large) - var(--pi-height-header) - 23.65rem
100vh - var(--pi-spacing-xxxx-large) - var(
--pi-height-header
) -
23.65rem
);
.pi-note {
width: $width;
@@ -79,7 +82,9 @@ $pi-seller-dashboard-overviews-height: 7.5rem; // 120px
& > *:nth-child(3) {
& > * {
min-height: calc(100vh - var(--pi-spacing-xxxx-large) - var(--pi-height-header));
min-height: calc(
100vh - var(--pi-spacing-xxxx-large) - var(--pi-height-header)
);
}
.pi-panel-content {
// Center
@@ -125,7 +130,9 @@ $pi-seller-dashboard-overviews-height: 7.5rem; // 120px
.pi-chip__large {
&:not(.pi-chip__single-icon) {
height: calc(
var(--pi-spacing-xxxx-large) - var(--pi-spacing-xxx-small)
var(--pi-spacing-xxxx-large) - var(
--pi-spacing-xxx-small
)
);
max-width: 100%;
width: 100%;
@@ -238,7 +245,10 @@ $pi-seller-dashboard-overviews-height: 7.5rem; // 120px
// Only scroll for desktop M & L
@media screen and (min-width: 90rem) {
max-height: calc(
100vh - var(--pi-spacing-xxxx-large) - var(--pi-height-header) - 24rem
100vh - var(--pi-spacing-xxxx-large) - var(
--pi-height-header
) -
24rem
);
max-width: calc(100% - var(--pi-spacing-xxx-small));
overflow-y: auto;

25
libs/ui/src/lib/styles/deale-saas/layouts/_pi-02-full-width-layout.scss
View File

@@ -1,8 +1,13 @@
@mixin fullWidthLayoutWidthLargeDevice(
$width: calc(100vw - var(--pi-width-aside) - var(--pi-width-navbar-collapsed) - 6.5rem),
$width: calc(
100vw - var(--pi-width-aside) - var(--pi-width-navbar-collapsed) - 6.5rem
),
$max-width-closed: var(--pi-width-container-s),
$max-width-open:
calc(100% - var(--pi-width-aside) - var(--pi-spacing-x-large) - var(--pi-spacing-x-large))
$max-width-open: calc(
100% - var(--pi-width-aside) - var(--pi-spacing-x-large) - var(
--pi-spacing-x-large
)
)
) {
.pi-shell__deale-saas {
& > div {
@@ -90,7 +95,8 @@ html {
&.is-desktop {
.pi-layout {
&.pi-layout__02-full-width {
padding: 0 0 calc(var(--pi-spacing-xxxx-large) + var(--pi-height-footer));
padding: 0 0
calc(var(--pi-spacing-xxxx-large) + var(--pi-height-footer));
}
}
@@ -105,9 +111,16 @@ html {
// Desktop M
&.is-desktop__medium {
@include fullWidthLayoutWidthLargeDevice(
calc(100vw - var(--pi-width-aside) - var(--pi-width-navbar-collapsed) - 6.5rem),
calc(
100vw - var(--pi-width-aside) - var(--pi-width-navbar-collapsed) -
6.5rem
),
var(--pi-width-container),
calc(100% - var(--pi-width-aside) - var(--pi-spacing-x-large) - var(--pi-spacing-x-large))
calc(
100% - var(--pi-width-aside) - var(--pi-spacing-x-large) - var(
--pi-spacing-x-large
)
)
);
}
// Desktop L

8
libs/ui/src/lib/styles/deale-saas/layouts/_pi-03-vertically-centered-layout.scss
View File

@@ -1,4 +1,6 @@
@mixin layoutVerticallyCenteredSpacings($padding-top: var(--pi-public-height-header-mobile)) {
@mixin layoutVerticallyCenteredSpacings(
$padding-top: var(--pi-public-height-header-mobile)
) {
.pi-container-layout {
& > .pi-layout__06-edge-to-edge {
& > .pi-wrapper__header {
@@ -96,7 +98,9 @@ html {
// Tablet & Desktop
&:not(.is-mobile) {
@media screen and (min-width: 62rem) {
@include layoutVerticallyCenteredSpacings(var(--pi-public-height-header-desktop));
@include layoutVerticallyCenteredSpacings(
var(--pi-public-height-header-desktop)
);
}
}
}

1
libs/ui/src/lib/styles/deale-saas/layouts/_pi-04-space-between-layout.scss
View File

@@ -5,4 +5,3 @@
justify-content: space-between;
}
}

42
libs/ui/src/lib/styles/deale-saas/layouts/_pi-05a-splitted-paywall-layout.scss
View File

@@ -78,8 +78,10 @@ html {
// Right
&.pi-main-wrapper-content__right {
height: calc(
100vh - var(--pi-spacing-x-large) - var(--pi-spacing-x-large) -
var(--pi-height-footer) - 8rem
100vh - var(--pi-spacing-x-large) - var(
--pi-spacing-x-large
) - var(--pi-height-footer) -
8rem
);
}
// Left
@@ -105,9 +107,9 @@ html {
}
.pi-button {
&:not(.pi-button__icon--single):not(.pi-button__x-small):not(.pi-button__small):not(
.pi-button__large
) {
&:not(.pi-button__icon--single):not(.pi-button__x-small):not(
.pi-button__small
):not(.pi-button__large) {
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-x-large);
}
}
@@ -130,16 +132,18 @@ html {
}
&.pi-main-wrapper-content__right {
min-height: calc(
100vh - var(--pi-spacing-xx-large) - var(--pi-spacing-xx-large) -
var(--pi-height-footer) - 20rem
100vh - var(--pi-spacing-xx-large) - var(
--pi-spacing-xx-large
) - var(--pi-height-footer) -
20rem
);
}
}
}
.pi-button {
&:not(.pi-button__icon--single):not(.pi-button__x-small):not(.pi-button__small):not(
.pi-button__large
) {
&:not(.pi-button__icon--single):not(.pi-button__x-small):not(
.pi-button__small
):not(.pi-button__large) {
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-x-large);
min-width: 11rem;
}
@@ -346,7 +350,11 @@ html {
padding: var(--pi-spacing-xxx-large);
gap: var(--pi-spacing-xx-large);
.pi-main-wrapper-content {
height: calc(100vh - var(--pi-spacing-xxx-large) - var(--pi-spacing-xxx-large));
height: calc(
100vh - var(--pi-spacing-xxx-large) - var(
--pi-spacing-xxx-large
)
);
// Left
&.pi-main-wrapper-content__left {
.mat-mdc-radio-group {
@@ -372,7 +380,11 @@ html {
.pi-main-wrapper-content {
// Left
&.pi-main-wrapper-content__left {
height: calc(100vh - var(--pi-spacing-xxx-large) - var(--pi-spacing-xxx-large));
height: calc(
100vh - var(--pi-spacing-xxx-large) - var(
--pi-spacing-xxx-large
)
);
.mat-mdc-radio-group {
max-width: 66.66%;
}
@@ -395,7 +407,11 @@ html {
gap: var(--pi-spacing-xxxx-large);
.pi-main-wrapper-content {
height: calc(100vh - var(--pi-spacing-xxxx-large) - var(--pi-spacing-xxxx-large));
height: calc(
100vh - var(--pi-spacing-xxxx-large) - var(
--pi-spacing-xxxx-large
)
);
// Left
&.pi-main-wrapper-content__left {
.mat-mdc-radio-group {

4
libs/ui/src/lib/styles/deale-saas/layouts/_pi-06-edge-to-edge-layout.scss
View File

@@ -1,4 +1,6 @@
@mixin saasContainerSpacings($padding-top: var(--pi-public-height-header-mobile)) {
@mixin saasContainerSpacings(
$padding-top: var(--pi-public-height-header-mobile)
) {
.pi-container-layout {
padding-bottom: var(--pi-spacing-xxxx-large);
& > .pi-layout__06-edge-to-edge {

25
libs/ui/src/lib/styles/deale-saas/layouts/_pi-07-list-layout.scss
View File

@@ -72,7 +72,9 @@
}
}
@mixin paginatorWidth($width: calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large))) {
@mixin paginatorWidth(
$width: calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large))
) {
.pi-shell__deale-saas {
& > div {
.pi-layout {
@@ -115,8 +117,8 @@ html {
position: absolute;
right: var(--pi-spacing-x-large);
bottom: calc(
var(--pi-height-footer) + env(safe-area-inset-bottom) + var(--pi-spacing-x-large) +
var(--pi-spacing-x-small)
var(--pi-height-footer) + env(safe-area-inset-bottom) +
var(--pi-spacing-x-large) + var(--pi-spacing-x-small)
);
z-index: 99;
}
@@ -176,8 +178,9 @@ html {
&.is-tablet__large {
@include listLayoutHeight(
calc(
100vh - var(--pi-height-header-tablet) - var(--pi-spacing-x-large) -
var(--pi-spacing-x-large) - var(--pi-spacing-xx-large)
100vh - var(--pi-height-header-tablet) - var(
--pi-spacing-x-large
) - var(--pi-spacing-x-large) - var(--pi-spacing-xx-large)
)
);
@include wrappersWidth(
@@ -193,8 +196,9 @@ html {
&.is-desktop {
@include listLayoutHeight(
calc(
100vh - var(--pi-height-header-desktop) - var(--pi-spacing-x-large) -
var(--pi-spacing-x-large) - var(--pi-spacing-medium)
100vh - var(--pi-height-header-desktop) - var(
--pi-spacing-x-large
) - var(--pi-spacing-x-large) - var(--pi-spacing-medium)
)
);
// Desktop S
@@ -209,7 +213,12 @@ html {
}
// Desktop M
&.is-desktop__medium {
@include wrappersWidth(calc(100% - var(--pi-spacing-x-large)), left, unset, unset);
@include wrappersWidth(
calc(100% - var(--pi-spacing-x-large)),
left,
unset,
unset
);
@include paginatorWidth(calc(100% - var(--pi-spacing-x-large)));
}
// Desktop L

38
libs/ui/src/lib/styles/deale-saas/layouts/_pi-layout.scss
View File

@@ -1,8 +1,8 @@
@mixin layoutHeight(
$height:
calc(
100vh - var(--pi-height-header-mobile) - var(--pi-height-footer) - var(--pi-spacing-x-large) -
var(--pi-spacing-x-large)
$height: calc(
100vh - var(--pi-height-header-mobile) - var(--pi-height-footer) - var(
--pi-spacing-x-large
) - var(--pi-spacing-x-large)
)
) {
.pi-layout {
@@ -32,8 +32,9 @@
}
// Default scroll
&:not(.pi-layout__07-list):not(.pi-layout__00-authentication):not(.pi-layout__05-splitted):not(.pi-layout__08-form
) {
&:not(.pi-layout__07-list):not(.pi-layout__00-authentication):not(
.pi-layout__05-splitted
):not(.pi-layout__08-form) {
overflow-y: scroll;
overflow-x: hidden;
}
@@ -82,7 +83,9 @@ html {
&:not(.pi-layout__07-list):not(.pi-layout__00-authentication):not(
.pi-layout__05-splitted
):not(.pi-layout__08-form) {
max-width: calc(100vw - var(--pi-spacing-medium) - var(--pi-spacing-medium));
max-width: calc(
100vw - var(--pi-spacing-medium) - var(--pi-spacing-medium)
);
}
&.pi-layout__main {
padding: 0 0 calc(var(--pi-spacing-medium) + var(--pi-height-footer));
@@ -99,7 +102,10 @@ html {
&.is-tablet__small {
.has-bottom-sticky-note {
@include layoutHeight(
calc(100vh - var(--pi-height-header-tablet) - var(--pi-height-footer) - 2rem)
calc(
100vh - var(--pi-height-header-tablet) - var(--pi-height-footer) -
2rem
)
);
.pi-layout {
&.pi-layout__main,
@@ -116,7 +122,9 @@ html {
}
}
@include layoutHeight(calc(100vh - var(--pi-height-header-tablet) - var(--pi-height-footer)));
@include layoutHeight(
calc(100vh - var(--pi-height-header-tablet) - var(--pi-height-footer))
);
@include layoutWidth(
calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)),
var(--pi-height-header-tablet) auto 0
@@ -126,7 +134,9 @@ html {
&:not(.pi-layout__07-list):not(.pi-layout__00-authentication):not(
.pi-layout__05-splitted
):not(.pi-layout__08-form) {
max-width: calc(100vw - var(--pi-spacing-x-large) - var(--pi-spacing-x-large));
max-width: calc(
100vw - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)
);
}
&.pi-layout__main {
padding: 0 0 calc(var(--pi-spacing-x-large) + var(--pi-height-footer));
@@ -153,7 +163,9 @@ html {
}
}
}
@include layoutHeight(calc(100vh - var(--pi-height-header-tablet) - 3.25rem));
@include layoutHeight(
calc(100vh - var(--pi-height-header-tablet) - 3.25rem)
);
@include layoutWidth(calc(100% - var(--pi-spacing-x-large)), unset);
}
}
@@ -195,7 +207,9 @@ html {
}
@include layoutHeight(
calc(
100vh - var(--pi-height-header-tablet) - var(--pi-spacing-x-large) - var(--pi-spacing-large)
100vh - var(--pi-height-header-tablet) - var(
--pi-spacing-x-large
) - var(--pi-spacing-large)
)
);
@include layoutWidth(calc(100% - var(--pi-spacing-x-large)), unset);

55
libs/ui/src/lib/styles/deale-saas/shell/_pi-aside.scss
View File

@@ -9,9 +9,11 @@
}
button {
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(.pi-button__toggle):not(
.pi-button__icon--single
):not(.pi-button__xx-small):not(.pi-button__trimmed):not(.pi-button__toggle) {
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(
.pi-button__toggle
):not(.pi-button__icon--single):not(.pi-button__xx-small):not(
.pi-button__trimmed
):not(.pi-button__toggle) {
min-width: unset;
padding-left: unset;
padding-right: unset;
@@ -19,9 +21,11 @@
}
.pi-button__w100 {
button {
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(.pi-button__toggle):not(
.pi-button__icon--single
):not(.pi-button__xx-small):not(.pi-button__trimmed):not(.pi-button__toggle) {
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(
.pi-button__toggle
):not(.pi-button__icon--single):not(.pi-button__xx-small):not(
.pi-button__trimmed
):not(.pi-button__toggle) {
min-width: 100%;
}
}
@@ -81,7 +85,9 @@
// Aside is closed
&.aside-is-closed {
.pi-saas-aside {
transform: translateX(calc(100vw + var(--pi-width-aside) + var(--pi-spacing-x-large)));
transform: translateX(
calc(100vw + var(--pi-width-aside) + var(--pi-spacing-x-large))
);
}
}
// Aside is closable
@@ -151,7 +157,9 @@
}
& > *:nth-child(3) {
flex-shrink: 0;
width: calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large));
width: calc(
100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)
);
margin: 0 auto;
.pi-icon-button {
margin-bottom: var(--pi-spacing-x-large);
@@ -217,7 +225,9 @@ html {
&:not(.is-fullscreen) {
.pi-saas-aside {
top: 0;
height: calc(100vh + env(safe-area-inset-top) + env(safe-area-inset-bottom));
height: calc(
100vh + env(safe-area-inset-top) + env(safe-area-inset-bottom)
);
width: 100%;
& > .pi-close-button {
margin-left: calc(100% - 0.9rem - var(--pi-spacing-large));
@@ -225,8 +235,11 @@ html {
& > *:nth-child(2) {
height: calc(
100% - env(safe-area-inset-top) - env(safe-area-inset-bottom) -
var(--pi-height-header-aside) - var(--pi-height-footer-aside)
100% - env(safe-area-inset-top) - env(
safe-area-inset-bottom
) - var(--pi-height-header-aside) - var(
--pi-height-footer-aside
)
);
}
}
@@ -260,7 +273,9 @@ html {
.pi-dynamic-menu {
& > *:nth-child(3) {
height: calc(var(--pi-height-footer-aside) + env(safe-area-inset-bottom));
height: calc(
var(--pi-height-footer-aside) + env(safe-area-inset-bottom)
);
margin: 0 auto var(--pi-spacing-xxx-large);
}
& > *:nth-child(n + 2) {
@@ -292,7 +307,9 @@ html {
&:not(.is-fullscreen) {
.pi-saas-aside {
top: var(--pi-spacing-x-large);
height: calc(100vh - var(--pi-spacing-x-large) - var(--pi-spacing-x-large));
height: calc(
100vh - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)
);
width: var(--pi-width-aside);
border-radius: var(--pi-border-radius-large);
box-shadow: var(--pi-box-shadow-panel-double);
@@ -302,14 +319,18 @@ html {
}
& > .pi-close-button {
margin-left: calc(var(--pi-width-aside) - 1.125rem - var(--pi-spacing-large));
margin-left: calc(
var(--pi-width-aside) - 1.125rem - var(--pi-spacing-large)
);
}
}
// Aside is open
&.aside-is-open {
.pi-saas-aside {
transform: translateX(
calc(100vw - var(--pi-width-aside) - var(--pi-spacing-x-large))
calc(
100vw - var(--pi-width-aside) - var(--pi-spacing-x-large)
)
);
}
}
@@ -325,7 +346,9 @@ html {
padding: var(--pi-spacing-x-large);
}
& > *:nth-child(3) {
height: calc(var(--pi-height-footer-aside) + env(safe-area-inset-bottom));
height: calc(
var(--pi-height-footer-aside) + env(safe-area-inset-bottom)
);
margin: 0 auto;
padding: var(--pi-spacing-x-large) 0 0;
}

23
libs/ui/src/lib/styles/deale-saas/shell/_pi-header.scss
View File

@@ -154,18 +154,24 @@ html {
}
}
button {
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__icon--single) {
&:not(.pi-close-button):not(.pi-hamburger):not(
.pi-button__icon--single
) {
min-width: var(--pi-spacing-xx-large);
}
&:not(.pi-close-button):not(.pi-hamburger).pi-button__medium {
padding: var(--pi-spacing-xxxx-small) unset;
}
&:not(.pi-close-button):not(.pi-hamburger).pi-button__appearance--outline {
&:not(.pi-close-button):not(
.pi-hamburger
).pi-button__appearance--outline {
background-color: var(--pi-color-accent-75);
transition: all 0.16s ease-in;
border: unset;
}
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__x-large) {
&:not(.pi-close-button):not(.pi-hamburger):not(
.pi-button__x-large
) {
border-radius: var(--pi-border-radius-medium);
-webkit-border-radius: var(--pi-border-radius-medium);
-moz-border-radius: var(--pi-border-radius-medium);
@@ -180,7 +186,8 @@ html {
&.pi-saas-header-content__right {
button {
&:not(.pi-close-button):not(.pi-hamburger).pi-button__medium {
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-x-small);
padding: var(--pi-spacing-xxxx-small)
var(--pi-spacing-x-small);
}
}
}
@@ -228,7 +235,9 @@ html {
&.is-tablet__small {
.pi-saas-header {
left: var(--pi-spacing-x-large);
width: calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large));
width: calc(
100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)
);
}
}
// Tablet L
@@ -336,7 +345,9 @@ html {
// Aside is open
&.aside-is-open {
.pi-saas-header {
width: calc(100% - var(--pi-width-aside) - var(--pi-spacing-x-large));
width: calc(
100% - var(--pi-width-aside) - var(--pi-spacing-x-large)
);
}
}
// Aside is closed

27
libs/ui/src/lib/styles/deale-saas/shell/_pi-main.scss
View File

@@ -49,7 +49,9 @@ html {
.pi-shell__deale-saas {
& > div {
& > section {
height: calc(100vh - var(--pi-spacing-x-large) - var(--pi-spacing-x-large));
height: calc(
100vh - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)
);
}
// Not is fullscreen
&:not(.is-fullscreen) {
@@ -59,8 +61,9 @@ html {
var(--pi-spacing-x-large)
);
width: calc(
100% - var(--pi-width-navbar-collapsed) - var(--pi-spacing-x-large) -
var(--pi-spacing-x-large) - var(--pi-spacing-xxx-small)
100% - var(--pi-width-navbar-collapsed) - var(
--pi-spacing-x-large
) - var(--pi-spacing-x-large) - var(--pi-spacing-xxx-small)
);
}
}
@@ -100,7 +103,9 @@ html {
&.aside-is-closed {
& > .pi-headline {
transform: var(--pi-animation);
transform: translateX(calc(var(--pi-width-aside) + var(--pi-spacing-x-large)));
transform: translateX(
calc(var(--pi-width-aside) + var(--pi-spacing-x-large))
);
}
}
}
@@ -115,7 +120,9 @@ html {
&:not(.is-fullscreen) {
// Layout container
& > section {
height: calc(100vh - var(--pi-spacing-x-large) - var(--pi-spacing-x-large));
height: calc(
100vh - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)
);
transition: var(--pi-animation);
& > *:nth-child(1) {
padding-right: var(--pi-spacing-x-large);
@@ -130,8 +137,9 @@ html {
);
width: calc(
100% - var(--pi-width-navbar-expanded) - var(--pi-spacing-x-large) -
var(--pi-spacing-xx-large) - var(--pi-spacing-xxxx-small)
100% - var(--pi-width-navbar-expanded) - var(
--pi-spacing-x-large
) - var(--pi-spacing-xx-large) - var(--pi-spacing-xxxx-small)
);
}
}
@@ -143,8 +151,9 @@ html {
var(--pi-spacing-x-large)
);
width: calc(
100% - var(--pi-width-navbar-collapsed) - var(--pi-spacing-x-large) -
var(--pi-spacing-xx-large) - var(--pi-spacing-xxxx-small)
100% - var(--pi-width-navbar-collapsed) - var(
--pi-spacing-x-large
) - var(--pi-spacing-xx-large) - var(--pi-spacing-xxxx-small)
);
}
}

78
libs/ui/src/lib/styles/deale-saas/shell/_pi-menu.scss
View File

@@ -23,7 +23,9 @@
.pi-menu-entry {
&.pi-menu-entry__context--parent-menu {
height: var(--pi-size-menu-item-expanded);
width: calc(100% - var(--pi-spacing-large) - var(--pi-spacing-large));
width: calc(
100% - var(--pi-spacing-large) - var(--pi-spacing-large)
);
margin-left: var(--pi-spacing-large);
padding: 0 var(--pi-spacing-large);
border-radius: var(--pi-border-radius-medium);
@@ -49,7 +51,11 @@
}
}
@mixin parentMenuItemCollapsed($size: var(--pi-spacing-xxxx-large), $radius: medium, $scale: 1) {
@mixin parentMenuItemCollapsed(
$size: var(--pi-spacing-xxxx-large),
$radius: medium,
$scale: 1
) {
.pi-saas-navbar {
.pi-menu {
.pi-menu-entry {
@@ -96,7 +102,9 @@
&.is-selected {
.pi-menu-entry {
&:not(.is-disabled) {
&:not([class*='pi-menu-entry__context--aside-menu']):not([class*='children']) {
&:not([class*='pi-menu-entry__context--aside-menu']):not(
[class*='children']
) {
background-color: var(--pi-color-primary-25);
color: var(--pi-color-primary);
.mat-icon {
@@ -276,8 +284,12 @@
&.pi-menu-entry__context--children-menu {
padding-bottom: var(--pi-spacing-xxx-small);
border-bottom: 1px solid;
margin-left: calc(var(--pi-spacing-x-large) + var(--pi-spacing-xxxx-small));
margin-right: calc(var(--pi-spacing-x-large) + var(--pi-spacing-xxxx-small));
margin-left: calc(
var(--pi-spacing-x-large) + var(--pi-spacing-xxxx-small)
);
margin-right: calc(
var(--pi-spacing-x-large) + var(--pi-spacing-xxxx-small)
);
&:nth-of-type(1) {
border-color: var(--pi-color-grey-100);
@@ -333,7 +345,8 @@
&.pi-menu__children {
left: 0;
bottom: calc(
env(safe-area-inset-bottom) + var(--pi-spacing-medium) + var(--pi-height-footer)
env(safe-area-inset-bottom) + var(--pi-spacing-medium) +
var(--pi-height-footer)
);
z-index: 99;
}
@@ -441,8 +454,15 @@ html {
&.is-tablet__large {
.pi-shell__deale-saas {
& > div {
@include parentMenuEntryAppearance(center, var(--pi-size-menu-item-collapsed));
@include parentMenuItemCollapsed(var(--pi-size-menu-item-collapsed), large, 1.2);
@include parentMenuEntryAppearance(
center,
var(--pi-size-menu-item-collapsed)
);
@include parentMenuItemCollapsed(
var(--pi-size-menu-item-collapsed),
large,
1.2
);
.pi-saas-navbar {
// Tablet L
.pi-menu {
@@ -459,9 +479,12 @@ html {
.pi-menu__children {
@include childrenMenuPosition(
calc(
var(--pi-width-navbar-collapsed) + var(--pi-spacing-x-large) +
var(--pi-spacing-x-large) + var(--pi-spacing-x-large) +
var(--pi-spacing-x-large) + var(--pi-spacing-xxx-small)
var(--pi-width-navbar-collapsed) +
var(--pi-spacing-x-large) +
var(--pi-spacing-x-large) +
var(--pi-spacing-x-large) +
var(--pi-spacing-x-large) +
var(--pi-spacing-xxx-small)
)
);
}
@@ -498,8 +521,9 @@ html {
&.pi-menu__parent {
& > nav {
width: calc(
var(--pi-width-navbar-expanded) - var(--pi-spacing-xxxx-large) -
var(--pi-spacing-xxxx-small)
var(--pi-width-navbar-expanded) - var(
--pi-spacing-xxxx-large
) - var(--pi-spacing-xxxx-small)
);
}
.pi-menu-event-item {
@@ -563,7 +587,10 @@ html {
}
// Expanded
&.navbar-is-expanded {
@include parentMenuEntryAppearance(flex-start, var(--pi-size-menu-item-expanded));
@include parentMenuEntryAppearance(
flex-start,
var(--pi-size-menu-item-expanded)
);
// Navbar
.pi-saas-navbar {
.pi-menu {
@@ -574,7 +601,10 @@ html {
&.has-children {
.pi-menu__children {
@include childrenMenuPosition(
calc(var(--pi-width-navbar-expanded) + var(--pi-spacing-xx-large))
calc(
var(--pi-width-navbar-expanded) +
var(--pi-spacing-xx-large)
)
);
}
}
@@ -585,8 +615,15 @@ html {
}
// Collapsed
&.navbar-is-collapsed {
@include parentMenuEntryAppearance(center, var(--pi-size-menu-item-collapsed));
@include parentMenuItemCollapsed(var(--pi-size-menu-item-collapsed), large, 1.2);
@include parentMenuEntryAppearance(
center,
var(--pi-size-menu-item-collapsed)
);
@include parentMenuItemCollapsed(
var(--pi-size-menu-item-collapsed),
large,
1.2
);
.pi-saas-navbar {
.pi-menu {
& > nav {
@@ -597,9 +634,10 @@ html {
.pi-menu__children {
@include childrenMenuPosition(
calc(
var(--pi-width-navbar-collapsed) + var(--pi-spacing-xx-large) +
var(--pi-spacing-xx-large) + var(--pi-spacing-large) +
var(--pi-spacing-x-large)
var(--pi-width-navbar-collapsed) +
var(--pi-spacing-xx-large) +
var(--pi-spacing-xx-large) +
var(--pi-spacing-large) + var(--pi-spacing-x-large)
)
);
}

12
libs/ui/src/lib/styles/deale-saas/shell/_pi-navbar.scss
View File

@@ -87,7 +87,9 @@ html {
.pi-saas-navbar {
left: var(--pi-spacing-medium);
bottom: var(--pi-spacing-medium);
width: calc(100% - var(--pi-spacing-medium) - var(--pi-spacing-medium));
width: calc(
100% - var(--pi-spacing-medium) - var(--pi-spacing-medium)
);
}
}
}
@@ -123,7 +125,9 @@ html {
.pi-saas-navbar {
left: var(--pi-spacing-x-large);
bottom: var(--pi-spacing-x-large);
width: calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large));
width: calc(
100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)
);
}
}
}
@@ -178,7 +182,9 @@ html {
display: flex;
flex-direction: column;
justify-content: space-between;
height: calc(100vh - var(--pi-spacing-x-large) - var(--pi-spacing-x-large));
height: calc(
100vh - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)
);
.pi-chip {
margin: auto;
}

17
libs/ui/src/lib/styles/deale-website/layouts/_pi-02-full-width-layout.scss
View File

@@ -2,7 +2,10 @@
&.pi-layout__02-full-width {
&:not(.pi-layout__02a-full-width--auto) {
& > *:nth-child(1) {
& > *:nth-child(n + 1):not(:is(h1, h2, h3, h4, h5, p, i, figcaption, small)) {
&
> *:nth-child(n + 1):not(
:is(h1, h2, h3, h4, h5, p, i, figcaption, small)
) {
margin: 0 auto;
}
& > *:nth-child(n + 1):is(h1, h2, h3, h4, h5, p, i, figcaption, small) {
@@ -13,7 +16,9 @@
}
}
@mixin layoutBasicPages(
$padding-top-1: calc(var(--pi-public-height-header-mobile) + var(--pi-spacing-xxx-large)),
$padding-top-1: calc(
var(--pi-public-height-header-mobile) + var(--pi-spacing-xxx-large)
),
$padding-top-2: var(--pi-spacing-xxx-large)
) {
.pi-shell__deale-website {
@@ -44,7 +49,9 @@ html {
}
&.is-tablet {
@include layoutBasicPages(
calc(var(--pi-public-height-header-mobile) + var(--pi-spacing-xxxx-large)),
calc(
var(--pi-public-height-header-mobile) + var(--pi-spacing-xxxx-large)
),
var(--pi-spacing-xxxx-large)
);
.pi-layout {
@@ -64,7 +71,9 @@ html {
// Desktop
&.is-desktop {
@include layoutBasicPages(
calc(var(--pi-public-height-header-desktop) + var(--pi-spacing-xxxx-large)),
calc(
var(--pi-public-height-header-desktop) + var(--pi-spacing-xxxx-large)
),
var(--pi-spacing-xxxx-large)
);
.pi-layout {

8
libs/ui/src/lib/styles/deale-website/layouts/_pi-06b-edge-to-edge-home-users-layout.scss
View File

@@ -42,7 +42,9 @@ html {
&.is-desktop {
// Desktop S & M
&:not(.is-desktop__large) {
@include edgeToEdgeLayoutCarouselBehavior(var(--pi-public-width-container));
@include edgeToEdgeLayoutCarouselBehavior(
var(--pi-public-width-container)
);
}
// Desktop M
&.is-desktop__medium {
@@ -50,7 +52,9 @@ html {
}
// Desktop L
&.is-desktop__large {
@include edgeToEdgeLayoutCarouselBehavior(var(--pi-public-width-container-l));
@include edgeToEdgeLayoutCarouselBehavior(
var(--pi-public-width-container-l)
);
@include websiteHomeUserSpacings(66.66%);
}
}

24
libs/ui/src/lib/styles/deale-website/layouts/_pi-07-list-layout.scss
View File

@@ -58,12 +58,16 @@ html {
}
}
& > section {
padding-top: calc(var(--pi-height-layout-header) - var(--pi-spacing-medium));
padding-top: calc(
var(--pi-height-layout-header) - var(--pi-spacing-medium)
);
.pi-wrapper {
&.pi-wrapper__list {
max-height: calc(
100vh - var(--pi-public-height-header-mobile) - var(--pi-height-layout-header) -
100vh - var(--pi-public-height-header-mobile) - var(
--pi-height-layout-header
) -
7.35rem
);
.pi-data-grid__mode--grid {
@@ -89,12 +93,16 @@ html {
}
}
& > section {
padding-top: calc(var(--pi-height-layout-header) - var(--pi-spacing-medium));
padding-top: calc(
var(--pi-height-layout-header) - var(--pi-spacing-medium)
);
.pi-wrapper {
&.pi-wrapper__list {
max-height: calc(
100vh - var(--pi-public-height-header-desktop) - var(--pi-height-layout-header) -
100vh - var(--pi-public-height-header-desktop) - var(
--pi-height-layout-header
) -
7.35rem
);
& > section {
@@ -146,12 +154,16 @@ html {
}
}
& > section {
padding-top: calc(var(--pi-height-layout-header) - var(--pi-spacing-medium));
padding-top: calc(
var(--pi-height-layout-header) - var(--pi-spacing-medium)
);
.pi-wrapper {
&.pi-wrapper__list {
max-height: calc(
100vh - var(--pi-public-height-header-desktop) - var(--pi-height-layout-header) -
100vh - var(--pi-public-height-header-desktop) - var(
--pi-height-layout-header
) -
7.35rem
);
}

12
libs/ui/src/lib/styles/deale-website/layouts/_pi-container-layout.scss
View File

@@ -1,6 +1,10 @@
@mixin containerSpacings(
$padding-top: calc(var(--pi-public-height-header-mobile) + var(--pi-spacing-xxx-large)),
$default-vertical-padding: calc(var(--pi-spacing-xxx-large) + var(--pi-spacing-xxx-large)),
$padding-top: calc(
var(--pi-public-height-header-mobile) + var(--pi-spacing-xxx-large)
),
$default-vertical-padding: calc(
var(--pi-spacing-xxx-large) + var(--pi-spacing-xxx-large)
),
$default-vertical-margin: var(--pi-spacing-xx-large)
) {
.pi-container-layout {
@@ -42,8 +46,8 @@ html {
@media screen and (min-width: 62rem) {
@include containerSpacings(
calc(
var(--pi-public-height-header-desktop) + var(--pi-spacing-xxxx-large) +
var(--pi-spacing-x-large)
var(--pi-public-height-header-desktop) +
var(--pi-spacing-xxxx-large) + var(--pi-spacing-x-large)
),
var(--pi-spacing-xxxx-large),
var(--pi-spacing-xx-large)

16
libs/ui/src/lib/styles/deale-website/screens/_pi-00-thank-you-screen.scss
View File

@@ -4,7 +4,9 @@
& > header {
display: block;
width: -webkit-fill-available;
padding-top: calc(var(--pi-spacing-x-large) + var(--pi-public-height-header-#{$device}));
padding-top: calc(
var(--pi-spacing-x-large) + var(--pi-public-height-header-#{$device})
);
}
}
}
@@ -36,8 +38,8 @@
@mixin thankYouScreenMain(
$cols: 4,
$rows: 6,
$areas: '. . . .' 'item1 item1 . .' 'item1 item1 . .' 'item1 item1 . .' '. . item2 item2'
'. . item2 item2',
$areas: '. . . .' 'item1 item1 . .' 'item1 item1 . .' 'item1 item1 . .'
'. . item2 item2' '. . item2 item2',
$min-height: 50
) {
.pi-website-screen {
@@ -72,8 +74,9 @@ html {
@include thankYouScreenMain(
6,
6,
'. . . . . .' '. item1 item1 . . .' '. item1 item1 . . .' '. item1 item1 . item2 item2'
'. item1 item1 . item2 item2' '. . . . . .',
'. . . . . .' '. item1 item1 . . .' '. item1 item1 . . .'
'. item1 item1 . item2 item2' '. item1 item1 . item2 item2'
'. . . . . .',
50
);
}
@@ -91,7 +94,8 @@ html {
12,
6,
'. . . . . . . . . . . .' '. . item1 item1 item1 . . . . . . .'
'. . item1 item1 item1 . . . . . . .' '. . item1 item1 item1 . . item2 item2 item2 . .'
'. . item1 item1 item1 . . . . . . .'
'. . item1 item1 item1 . . item2 item2 item2 . .'
'. . . . . . . item2 item2 item2 . .' '. . . . . . . . . . . .',
50
);

6
libs/ui/src/lib/styles/deale-website/shell/_pi-footer.scss
View File

@@ -14,7 +14,11 @@
}
}
@mixin websiteFooterTopLeft($flex-direction: column, $width: 100%, $justify-right: flex-start) {
@mixin websiteFooterTopLeft(
$flex-direction: column,
$width: 100%,
$justify-right: flex-start
) {
.pi-website-footer-content__top-left {
flex-direction: $flex-direction;
width: $width;

76
libs/ui/src/lib/styles/deale-website/shell/_pi-menu-theming.scss
View File

@@ -110,10 +110,18 @@
rgba($color: white, $alpha: 1)
)
padding-box,
linear-gradient(to right, var(--pi-color-primary-200), var(--pi-color-primary))
linear-gradient(
to right,
var(--pi-color-primary-200),
var(--pi-color-primary)
)
border-box
),
linear-gradient(30deg, var(--pi-color-primary), var(--pi-color-primary-900))
linear-gradient(
30deg,
var(--pi-color-primary),
var(--pi-color-primary-900)
)
);
}
// Investor
@@ -126,10 +134,18 @@
rgba($color: white, $alpha: 1)
)
padding-box,
linear-gradient(to right, var(--pi-color-accent-200), var(--pi-color-accent))
linear-gradient(
to right,
var(--pi-color-accent-200),
var(--pi-color-accent)
)
border-box
),
linear-gradient(30deg, var(--pi-color-accent), var(--pi-color-accent-900))
linear-gradient(
30deg,
var(--pi-color-accent),
var(--pi-color-accent-900)
)
);
}
// Advisor
@@ -202,12 +218,23 @@
@include parentMenuItemColorLargeDevice(
var(--pi-color-highlighted),
(
linear-gradient(rgba($color: white, $alpha: 0.95), rgba($color: white, $alpha: 1))
linear-gradient(
rgba($color: white, $alpha: 0.95),
rgba($color: white, $alpha: 1)
)
padding-box,
linear-gradient(to right, var(--pi-color-highlighted-200), var(--pi-color-highlighted))
linear-gradient(
to right,
var(--pi-color-highlighted-200),
var(--pi-color-highlighted)
)
border-box
),
linear-gradient(30deg, var(--pi-color-highlighted), var(--pi-color-highlighted-900))
linear-gradient(
30deg,
var(--pi-color-highlighted),
var(--pi-color-highlighted-900)
)
);
}
}
@@ -222,7 +249,11 @@
.pi-button__action {
box-shadow: 0 0 0 0 rgba($color: #0d2a6b, $alpha: 0.66);
& > span {
background-image: linear-gradient(30deg, var(--pi-color-white), var(--pi-color-white));
background-image: linear-gradient(
30deg,
var(--pi-color-white),
var(--pi-color-white)
);
& > span {
background-color: var(--pi-color-highlighted);
}
@@ -301,7 +332,11 @@
)
border-box
),
linear-gradient(30deg, var(--pi-color-primary), var(--pi-color-primary-900))
linear-gradient(
30deg,
var(--pi-color-primary),
var(--pi-color-primary-900)
)
);
}
// Investor
@@ -321,7 +356,11 @@
)
border-box
),
linear-gradient(30deg, var(--pi-color-accent), var(--pi-color-accent-900))
linear-gradient(
30deg,
var(--pi-color-accent),
var(--pi-color-accent-900)
)
);
}
// Advisor
@@ -394,12 +433,23 @@
@include parentMenuItemColorLargeDevice(
var(--pi-color-highlighted),
(
linear-gradient(rgba($color: white, $alpha: 0.95), rgba($color: white, $alpha: 1))
linear-gradient(
rgba($color: white, $alpha: 0.95),
rgba($color: white, $alpha: 1)
)
padding-box,
linear-gradient(to right, var(--pi-color-highlighted-200), var(--pi-color-highlighted))
linear-gradient(
to right,
var(--pi-color-highlighted-200),
var(--pi-color-highlighted)
)
border-box
),
linear-gradient(30deg, var(--pi-color-highlighted), var(--pi-color-highlighted-900))
linear-gradient(
30deg,
var(--pi-color-highlighted),
var(--pi-color-highlighted-900)
)
);
}
}

37
libs/ui/src/lib/styles/deale-website/shell/_pi-menu.scss
View File

@@ -358,7 +358,8 @@ html {
// Child menu
& > div {
padding: var(--pi-spacing-medium);
border-radius: var(--pi-border-radius-large) var(--pi-border-radius-large) 0 0;
border-radius: var(--pi-border-radius-large)
var(--pi-border-radius-large) 0 0;
// Child Menu items
& > div {
& > span {
@@ -376,7 +377,8 @@ html {
width: 100%;
padding: var(--pi-spacing-xx-small) var(--pi-spacing-x-large)
var(--pi-spacing-medium);
border-radius: 0 0 var(--pi-border-radius-large) var(--pi-border-radius-large);
border-radius: 0 0 var(--pi-border-radius-large)
var(--pi-border-radius-large);
// Aside Menu items
& > div {
& > span {
@@ -398,18 +400,33 @@ html {
& > .pi-menu-event-item {
// Company
&:nth-child(1) {
@include largeDeviceChildMenu(-18.75rem, var(--pi-color-primary-25));
@include largeDeviceChildMenuItemColor(var(--pi-color-primary-25));
@include largeDeviceChildMenu(
-18.75rem,
var(--pi-color-primary-25)
);
@include largeDeviceChildMenuItemColor(
var(--pi-color-primary-25)
);
}
// Investor
&:nth-child(2) {
@include largeDeviceChildMenu(-14.125rem, var(--pi-color-accent-25));
@include largeDeviceChildMenuItemColor(var(--pi-color-accent-25));
@include largeDeviceChildMenu(
-14.125rem,
var(--pi-color-accent-25)
);
@include largeDeviceChildMenuItemColor(
var(--pi-color-accent-25)
);
}
// Advisor
&:nth-child(3) {
@include largeDeviceChildMenu(-14.625rem, var(--pi-color-highlighted-25));
@include largeDeviceChildMenuItemColor(var(--pi-color-highlighted-25));
@include largeDeviceChildMenu(
-14.625rem,
var(--pi-color-highlighted-25)
);
@include largeDeviceChildMenuItemColor(
var(--pi-color-highlighted-25)
);
}
}
}
@@ -448,7 +465,9 @@ html {
// Advisor Pricing
&:nth-child(3) {
color: var(--pi-color-highlighted);
background-color: var(--pi-color-highlighted-25);
background-color: var(
--pi-color-highlighted-25
);
}
}
}

24
libs/ui/src/lib/styles/deale-website/shell/_pi-topbar.scss
View File

@@ -108,8 +108,12 @@
gap: var(--pi-spacing-xxxx-small);
}
.pi-website-topbar-content {
padding-left: calc(var(--pi-spacing-x-large) - var(--pi-spacing-xxx-small));
padding-right: calc(var(--pi-spacing-x-large) - var(--pi-spacing-xxx-small));
padding-left: calc(
var(--pi-spacing-x-large) - var(--pi-spacing-xxx-small)
);
padding-right: calc(
var(--pi-spacing-x-large) - var(--pi-spacing-xxx-small)
);
// Left (=== top)
&.pi-website-topbar-content__left {
padding-top: var(--pi-spacing-large);
@@ -210,7 +214,10 @@ html {
// Is Closed
&:not(.is-menu-open) {
@include logoSize(7.5rem);
@include topbarCommonSizes(var(--pi-public-height-header-mobile), calc(100% - 3rem));
@include topbarCommonSizes(
var(--pi-public-height-header-mobile),
calc(100% - 3rem)
);
}
// Is Open
@@ -227,7 +234,10 @@ html {
}
// Tablet L
&.is-tablet__large {
@include topbarCommonSizes(var(--pi-public-height-header-mobile), calc(100% - 3rem));
@include topbarCommonSizes(
var(--pi-public-height-header-mobile),
calc(100% - 3rem)
);
@include logoSize(8.4375rem);
}
}
@@ -248,9 +258,9 @@ html {
// Override right content buttons
button {
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(.pi-button__toggle):not(
.pi-button__type--menu-item
).pi-color__white {
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(
.pi-button__toggle
):not(.pi-button__type--menu-item).pi-color__white {
border-color: var(--pi-color-primary-100);
background-color: rgba(255, 255, 255, 0.7);
background-image: unset;

4
libs/ui/src/lib/styles/deale-website/wrappers/_pi-wrapper.scss
View File

@@ -1,4 +1,6 @@
@mixin dealeWebsiteWrapperMaxWidth($max-width: calc(100% - var(--pi-spacing-xx-large))) {
@mixin dealeWebsiteWrapperMaxWidth(
$max-width: calc(100% - var(--pi-spacing-xx-large))
) {
.pi-shell__deale-website {
.pi-wrapper {
// Max width

14
libs/ui/src/lib/styles/definitions.ts
View File

@@ -1,5 +1,11 @@
// Types
export type justify = 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
export type justify =
| 'flex-start'
| 'center'
| 'flex-end'
| 'space-between'
| 'space-around'
| 'space-evenly';
export type grid =
| 'quarter'
| 'third'
@@ -27,9 +33,11 @@ export type borderType = 'top' | 'bottom' | 'middle';
export type borderRadius = 'small' | 'medium' | 'large';
export type display = 'inline' | 'flex' | 'grid';
export type padding = 'xxxxl' | 'xxxl' | 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs' | 'xxs' | 'none';
export type padding =
'xxxxl' | 'xxxl' | 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs' | 'xxs' | 'none';
export type maxWidth = 'full-width' | 'full-width-auto' | 'edge-to-edge' | 'fit-content';
export type maxWidth =
'full-width' | 'full-width-auto' | 'edge-to-edge' | 'fit-content';
export type itemsWidth = 'quarter' | 'third' | 'half' | 'full';
// Fonts
export type fontSize =

42
libs/ui/src/lib/ui/accordion/accordion/accordion.component.html
View File

@@ -42,10 +42,16 @@
"
>
<ng-container
[ngTemplateOutlet]="item?.customHeader?.templateRef || defaultHeader"
[ngTemplateOutletContext]="{ $implicit: item, index: i, isExpanded: isItemExpanded(i) }"
[ngTemplateOutlet]="item?.customHeader()?.templateRef || defaultHeader"
[ngTemplateOutletContext]="{
$implicit: item,
index: i,
isExpanded: isItemExpanded(i),
}"
></ng-container>
<aside class="pi-accordion-item-header-content pi-accordion-item-header-content__right">
<aside
class="pi-accordion-item-header-content pi-accordion-item-header-content__right"
>
<pi-chip-status
*ngIf="item.status()"
[status]="item.status()"
@@ -82,14 +88,22 @@
class="pi-accordion-item-content pi-accordion-item-content__summary"
>
<ng-container
[ngTemplateOutlet]="item?.summaryContent?.templateRef"
[ngTemplateOutletContext]="{ $implicit: item, index: i, isExpanded: isItemExpanded(i) }"
[ngTemplateOutlet]="item?.summaryContent()?.templateRef"
[ngTemplateOutletContext]="{
$implicit: item,
index: i,
isExpanded: isItemExpanded(i),
}"
></ng-container>
</section>
<!-- MAIN -->
<main class="pi-accordion-item-content pi-accordion-item-content__expandable">
<ng-container *ngTemplateOutlet="item?.content?.templateRef"></ng-container>
<main
class="pi-accordion-item-content pi-accordion-item-content__expandable"
>
<ng-container
*ngTemplateOutlet="item?.content()?.templateRef"
></ng-container>
</main>
</section>
</ng-container>
@@ -121,8 +135,14 @@
(click)="toggleState(item, i)"
>
<ng-container
[ngTemplateOutlet]="item?.customHeader?.templateRef || defaultHeader"
[ngTemplateOutletContext]="{ $implicit: item, index: i, isExpanded: isItemExpanded(i) }"
[ngTemplateOutlet]="
item?.customHeader()?.templateRef || defaultHeader
"
[ngTemplateOutletContext]="{
$implicit: item,
index: i,
isExpanded: isItemExpanded(i),
}"
></ng-container>
<aside *ngIf="hasChevron()">
<pi-chip-status
@@ -150,7 +170,9 @@
'pi-accordion-item-content pi-accordion-item-content__expandable'
"
>
<ng-container *ngTemplateOutlet="item?.content?.templateRef"></ng-container>
<ng-container
*ngTemplateOutlet="item?.content()?.templateRef"
></ng-container>
</main>
</section>
</ng-template>

53
libs/ui/src/lib/ui/accordion/accordion/accordion.component.ts
View File

@@ -4,7 +4,7 @@ import {
HostBinding,
input,
model,
contentChildren
contentChildren,
} from '@angular/core';
import { padding, styleType, textColor } from '../../../styles';
import { PiAccordionItemDirective } from '../directives/accordion-content.directive';
@@ -17,21 +17,21 @@ import { PiIconComponent } from '../../icon/icon/icon.component';
import { TranslatePipe } from '@ngx-translate/core';
@Component({
selector: 'pi-accordion',
templateUrl: './accordion.component.html',
styleUrls: ['../styles/accordion.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [
NgIf,
NgFor,
PiDynamicColorDirective,
PiTextViewerComponent,
NgTemplateOutlet,
PiChipStatusComponent,
PiIconButtonComponent,
PiIconComponent,
TranslatePipe,
],
selector: 'pi-accordion',
templateUrl: './accordion.component.html',
styleUrls: ['../styles/accordion.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [
NgIf,
NgFor,
PiDynamicColorDirective,
PiTextViewerComponent,
NgTemplateOutlet,
PiChipStatusComponent,
PiIconButtonComponent,
PiIconComponent,
TranslatePipe,
],
})
export class PiAccordionComponent {
@HostBinding('class') get classes(): string {
@@ -43,7 +43,13 @@ export class PiAccordionComponent {
const directionClass =
direction !== 'default' && `pi-accordion__direction--${direction}`;
const paddingClass = `pi-accordion__padding--${this.padding()}`;
return ['pi-accordion', colorClass, appearanceClass, directionClass, paddingClass].join(' ');
return [
'pi-accordion',
colorClass,
appearanceClass,
directionClass,
paddingClass,
].join(' ');
}
/**
@@ -71,13 +77,20 @@ export class PiAccordionComponent {
toggleState = (item: PiAccordionItemDirective, index: number) => {
if (this.direction() === 'horizontal' && this.isItemExpanded(index)) return;
if (item.status() === 'disabled') return;
this.expandedItemIndex.set(this.expandedItemIndex() === index ? null : index);
this.expandedItemIndex.set(
this.expandedItemIndex() === index ? null : index,
);
};
isItemExpanded = (index: number) => this.expandedItemIndex() === index;
setAccordionItemClasses(item: PiAccordionItemDirective, index: number): string {
const expandedClass = this.isItemExpanded(index) ? 'is-expanded' : 'is-collapsed';
setAccordionItemClasses(
item: PiAccordionItemDirective,
index: number,
): string {
const expandedClass = this.isItemExpanded(index)
? 'is-expanded'
: 'is-collapsed';
const status = item.status();
const statusClass = status && 'has-status' + ' ' + `is-${status}`;
const isConfidentialClass = item.isConfidential() ? 'is-confidential' : '';

20
libs/ui/src/lib/ui/accordion/directives/accordion-content.directive.ts
View File

@@ -4,7 +4,7 @@ import {
HostBinding,
TemplateRef,
input,
contentChild
contentChild,
} from '@angular/core';
import { status } from '../../../util/status';
@@ -13,7 +13,7 @@ import { status } from '../../../util/status';
* If it is needed it must be used as a Header for the whole accordion.
*/
@Directive({ selector: 'pi-accordion-header', })
@Directive({ selector: 'pi-accordion-header' })
export class PiAccordionHeaderDirective {
@HostBinding('class') className = 'pi-accordion-header';
}
@@ -23,32 +23,32 @@ export class PiAccordionHeaderDirective {
*/
// Accordion Item Header Content
@Directive({ selector: '[pi-accordion-item-header-content]', })
@Directive({ selector: '[pi-accordion-item-header-content]' })
export class PiAccordionItemHeaderDirective {
constructor(public templateRef: TemplateRef<Element>) {}
constructor(public templateRef: TemplateRef<any>) {}
}
// Accordion Item Summary Content
@Directive({ selector: '[pi-accordion-item-summary-content]', })
@Directive({ selector: '[pi-accordion-item-summary-content]' })
export class PiAccordionSummaryContentDirective {
constructor(public templateRef: TemplateRef<Element>) {}
constructor(public templateRef: TemplateRef<any>) {}
}
// Accordion Item Expandable Content
@Directive({ selector: '[pi-accordion-item-expandable-content]', })
@Directive({ selector: '[pi-accordion-item-expandable-content]' })
export class PiAccordionItemContentDirective {
constructor(public templateRef: TemplateRef<Element>) {}
constructor(public templateRef: TemplateRef<any>) {}
}
/**
* The accordion footer is a separated content of the accordion items group.
* If it is needed it must be used as a Footer for the whole accordion.
*/
@Directive({ selector: 'pi-accordion-footer', })
@Directive({ selector: 'pi-accordion-footer' })
export class PiAccordionFooterDirective {
@HostBinding('class') className = 'pi-accordion-footer';
}
@Directive({ selector: 'pi-accordion-item', })
@Directive({ selector: 'pi-accordion-item' })
export class PiAccordionItemDirective {
readonly title = input('');
readonly subtitle = input('');

2
libs/ui/src/lib/ui/accordion/index.ts
View File

@@ -1,5 +1,3 @@
export * from './accordion/accordion.component';
export * from './directives/accordion-content.directive';

3
libs/ui/src/lib/ui/accordion/styles/_horizontal-accordion.scss
View File

@@ -19,7 +19,8 @@
& > section {
& > header {
gap: var(--pi-spacing-large);
padding: var(--pi-spacing-x-small) var(--pi-spacing-small) var(--pi-spacing-x-small);
padding: var(--pi-spacing-x-small) var(--pi-spacing-small)
var(--pi-spacing-x-small);
border-radius: var(--pi-border-radius-large);
&.is-expanded {
border: 1px solid;

12
libs/ui/src/lib/ui/accordion/styles/_vertical-accordion.scss
View File

@@ -6,7 +6,8 @@
transform: var(--pi-animation);
}
.pi-accordion-item-content__header + .pi-accordion-item-content__summary {
padding: var(--pi-spacing-#{$small-spacing}) var(--pi-spacing-#{$large-spacing})
padding: var(--pi-spacing-#{$small-spacing})
var(--pi-spacing-#{$large-spacing})
var(--pi-spacing-#{$large-spacing});
}
// Expanded [header + summary + main]
@@ -15,7 +16,8 @@
+ .pi-accordion-item-content__expandable,
// Expanded [header + main]
.pi-accordion-item-content__header.is-expanded + .pi-accordion-item-content__expandable {
padding: 0 var(--pi-spacing-#{$large-spacing}) var(--pi-spacing-#{$large-spacing});
padding: 0 var(--pi-spacing-#{$large-spacing})
var(--pi-spacing-#{$large-spacing});
}
// Collapsed [header + summary + main]
.pi-accordion-item-content__header:not(.is-expanded)
@@ -201,7 +203,8 @@
}
}
}
.pi-accordion-item-content__header.is-expanded + .pi-accordion-item-content__expandable,
.pi-accordion-item-content__header.is-expanded
+ .pi-accordion-item-content__expandable,
.pi-accordion-item-content__header.is-expanded
+ .pi-accordion-item-content__summary
+ .pi-accordion-item-content__expandable {
@@ -221,7 +224,8 @@
}
}
}
.pi-accordion-item-content__header.is-collapsed + .pi-accordion-item-content__expandable,
.pi-accordion-item-content__header.is-collapsed
+ .pi-accordion-item-content__expandable,
.pi-accordion-item-content__header.is-collapsed
+ .pi-accordion-item-content__summary
+ .pi-accordion-item-content__expandable {

7
libs/ui/src/lib/ui/accordion/styles/accordion.component.scss
View File

@@ -3,7 +3,9 @@
// Appearance Default
@mixin accordionAppearanceDefault {
&:not(.pi-accordion__appearance--outline):not(.pi-accordion__appearance--fill) {
&:not(.pi-accordion__appearance--outline):not(
.pi-accordion__appearance--fill
) {
// Not horizontal
&:not(.pi-accordion__direction--horizontal) {
& > section {
@@ -12,7 +14,8 @@
}
}
& > section {
padding: var(--pi-spacing-x-large) var(--pi-spacing-xx-small) var(--pi-spacing-medium);
padding: var(--pi-spacing-x-large) var(--pi-spacing-xx-small)
var(--pi-spacing-medium);
}
}
}

4
libs/ui/src/lib/ui/banner/banner/banner.component.html
View File

@@ -1,5 +1,5 @@
<main
(click)="execute.emit()"
(click)="execute.emit($event)"
pi-background-image
[isResponsive]="isImgResponsive()"
[image]="pathImg()"
@@ -15,7 +15,7 @@
<!-- Action -->
<pi-icon-button
*ngIf="buttonText()"
(execute)="execute.emit()"
(execute)="execute.emit($event)"
icon="chevron-forward"
iconColor="white"
iconSize="small"

12
libs/ui/src/lib/ui/banner/banner/banner.component.scss
View File

@@ -23,7 +23,11 @@
// Type
&.pi-banner__mode--dark {
background: linear-gradient(60deg, var(--pi-color-highlighted), var(--pi-color-primary));
background: linear-gradient(
60deg,
var(--pi-color-highlighted),
var(--pi-color-primary)
);
& > main {
& > section {
h3 {
@@ -36,7 +40,11 @@
}
}
&.pi-banner__mode--light {
background: linear-gradient(60deg, var(--pi-color-white), var(--pi-color-primary-100));
background: linear-gradient(
60deg,
var(--pi-color-white),
var(--pi-color-primary-100)
);
& > main {
& > section {
h3 {

26
libs/ui/src/lib/ui/banner/banner/banner.component.ts
View File

@@ -1,4 +1,10 @@
import { Component, HostBinding, input, output, ChangeDetectionStrategy } from '@angular/core';
import {
Component,
HostBinding,
input,
output,
ChangeDetectionStrategy,
} from '@angular/core';
import { PiBackgroundImageDirective } from '../../image/background-image.directive';
import { PiTextWeightBoldDirective } from '../../text/directives/text-weights.directive';
import { NgIf } from '@angular/common';
@@ -6,15 +12,15 @@ import { PiIconButtonComponent } from '../../button/icon-button/icon-button.comp
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'pi-banner',
templateUrl: './banner.component.html',
styleUrls: ['./banner.component.scss'],
imports: [
PiBackgroundImageDirective,
PiTextWeightBoldDirective,
NgIf,
PiIconButtonComponent,
],
selector: 'pi-banner',
templateUrl: './banner.component.html',
styleUrls: ['./banner.component.scss'],
imports: [
PiBackgroundImageDirective,
PiTextWeightBoldDirective,
NgIf,
PiIconButtonComponent,
],
})
export class PiBannerComponent {
@HostBinding('class') get classes(): string {

2
libs/ui/src/lib/ui/banner/index.ts
View File

@@ -1,3 +1 @@
export * from './banner/banner.component';

9
libs/ui/src/lib/ui/button/action-button/action-button.component.html
View File

@@ -11,12 +11,17 @@
modeClass,
hasPaddingClass,
buttonTypeClass,
appearanceClass
appearanceClass,
]"
>
<span *ngIf="text()">{{ text() }}</span>
<svg *ngIf="hasIcon()" viewBox="0 0 6 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg
*ngIf="hasIcon()"
viewBox="0 0 6 9"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<path
d="M1 1C4.5 4 5 4.38484 5 4.5C5 4.61516 4.5 5 1 8"

12
libs/ui/src/lib/ui/button/action-button/action-button.component.scss
View File

@@ -74,7 +74,9 @@
transition: all 100ms ease-in-out;
opacity: 1;
transform: scaleX(1);
transition: transform 100ms ease-in-out, opacity 100ms ease-in-out;
transition:
transform 100ms ease-in-out,
opacity 100ms ease-in-out;
& > g {
// Head
&:nth-child(1) {
@@ -85,7 +87,9 @@
&:nth-child(2) {
opacity: 0;
transform: scaleX(1);
transition: transform 100ms ease-in-out, opacity 100ms ease-in-out;
transition:
transform 100ms ease-in-out,
opacity 100ms ease-in-out;
}
}
}
@@ -96,7 +100,9 @@
transition: all 100ms ease-in-out;
opacity: 1;
transform: scaleX(1);
transition: transform 100ms ease-in-out, opacity 100ms ease-in-out;
transition:
transform 100ms ease-in-out,
opacity 100ms ease-in-out;
& > g {
// Head
&:nth-child(1) {

30
libs/ui/src/lib/ui/button/action-button/action-button.component.ts
View File

@@ -1,20 +1,28 @@
import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core';
import {
ChangeDetectionStrategy,
Component,
HostBinding,
input,
} from '@angular/core';
import { buttonSize, mode } from '../../../styles';
import { PiBaseButtonComponent } from '../base-button.component';
import { NgIf } from '@angular/common';
@Component({
selector: 'pi-action-button',
templateUrl: './action-button.component.html',
styleUrls: ['./action-button.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [NgIf],
selector: 'pi-action-button',
templateUrl: './action-button.component.html',
styleUrls: ['./action-button.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [NgIf],
})
export class PiActionButtonComponent extends PiBaseButtonComponent {
@HostBinding('class') get classes(): string {
return ['pi-action-button', this.sizeClass, this.directionClass, this.fontWeightClass].join(
' '
);
return [
'pi-action-button',
this.sizeClass,
this.directionClass,
this.fontWeightClass,
].join(' ');
}
readonly previous = input(false);
@@ -62,7 +70,9 @@ export class PiActionButtonComponent extends PiBaseButtonComponent {
override get appearanceClass(): string | null {
const appearance = this.appearance();
return appearance !== 'fill' ? `pi-button__appearance--${appearance}` : null;
return appearance !== 'fill'
? `pi-button__appearance--${appearance}`
: null;
}
get buttonTypeClass(): string | null {

11
libs/ui/src/lib/ui/button/base-button.component.ts
View File

@@ -1,6 +1,11 @@
// Angular
import { Directive, OnInit, input, output } from '@angular/core';
import { buttonSize, styleType, buttonStyle, flexDirection } from '../../styles';
import {
buttonSize,
styleType,
buttonStyle,
flexDirection,
} from '../../styles';
// Style definitions
@Directive()
@@ -9,8 +14,8 @@ export abstract class PiBaseButtonComponent implements OnInit {
readonly color = input<styleType>('primary');
readonly appearance = input<buttonStyle>('fill');
readonly disabled = input(false);
readonly allowPropagation = input.required<boolean>();
readonly flexDirection = input.required<flexDirection>();
readonly allowPropagation = input<boolean>();
readonly flexDirection = input<flexDirection>();
readonly execute = output<MouseEvent>();

22
libs/ui/src/lib/ui/button/button.directive.ts
View File

@@ -2,23 +2,25 @@ import { Directive, HostBinding, input } from '@angular/core';
import { buttonSize } from '../../styles';
// Style
@Directive({ selector: '[pi-ghost]', })
@Directive({ selector: '[pi-ghost]' })
export class PiGhostButtonDirective {
@HostBinding('class') get classes(): string {
const hasPaddingClass = this.hasPadding() ? '' : 'pi-button__trimmed';
return ['pi-button', 'pi-button__appearance--ghost', hasPaddingClass].join(' ');
return ['pi-button', 'pi-button__appearance--ghost', hasPaddingClass].join(
' ',
);
}
readonly hasPadding = input(true);
}
@Directive({ selector: '[pi-outline]', })
@Directive({ selector: '[pi-outline]' })
export class PiOutlineButtonDirective {
@HostBinding('class') get classes(): string {
return 'pi-button pi-button__appearance--outline';
}
}
@Directive({ selector: '[pi-button-size]', })
@Directive({ selector: '[pi-button-size]' })
export class PiButtonSizeDirective {
@HostBinding('class') get classes(): string {
return this.sizeClass;
@@ -33,7 +35,7 @@ export class PiButtonSizeDirective {
}
// Size
@Directive({ selector: '[xx-small]', })
@Directive({ selector: '[xx-small]' })
export class PiXXSmallButtonDirective {
@HostBinding('class') get classes(): string {
return 'pi-button pi-button__xx-small';
@@ -41,35 +43,35 @@ export class PiXXSmallButtonDirective {
}
// Size
@Directive({ selector: '[x-small]', })
@Directive({ selector: '[x-small]' })
export class PiXSmallButtonDirective {
@HostBinding('class') get classes(): string {
return 'pi-button pi-button__x-small';
}
}
@Directive({ selector: '[small]', })
@Directive({ selector: '[small]' })
export class PiSmallButtonDirective {
@HostBinding('class') get classes(): string {
return 'pi-button pi-button__small';
}
}
@Directive({ selector: '[medium]', })
@Directive({ selector: '[medium]' })
export class PiMediumButtonDirective {
@HostBinding('class') get classes(): string {
return 'pi-button pi-button__medium';
}
}
@Directive({ selector: '[large]', })
@Directive({ selector: '[large]' })
export class PiLargeButtonDirective {
@HostBinding('class') get classes(): string {
return 'pi-button pi-button__large';
}
}
@Directive({ selector: '[w100]', })
@Directive({ selector: '[w100]' })
export class PiW100ButtonDirective {
@HostBinding('class') get classes(): string {
return 'pi-button pi-button__w100';

6
libs/ui/src/lib/ui/button/chevron-button/chevron-button.component.html
View File

@@ -1 +1,5 @@
<mat-icon [svgIcon]="'chevron-forward'" (click)="toggle.emit()" color="black"></mat-icon>
<mat-icon
[svgIcon]="'chevron-forward'"
(click)="toggle.emit()"
color="black"
></mat-icon>

21
libs/ui/src/lib/ui/button/chevron-button/chevron-button.component.ts
View File

@@ -3,24 +3,27 @@ import {
Component,
HostBinding,
Input,
output
output,
} from '@angular/core';
import { ComponentFamilyClass } from '../../../styles';
import { PiBaseButtonComponent } from '../base-button.component';
import { MatIcon } from '@angular/material/icon';
@Component({
selector: 'pi-chevron-button',
templateUrl: './chevron-button.component.html',
styleUrls: ['./chevron-button.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [MatIcon],
selector: 'pi-chevron-button',
templateUrl: './chevron-button.component.html',
styleUrls: ['./chevron-button.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [MatIcon],
})
export class PiChevronButtonComponent extends PiBaseButtonComponent {
@HostBinding('class') get classes(): string {
return ['pi-chevron-button', ComponentFamilyClass.Button, this.colorClass, this.sizeClass].join(
' '
);
return [
'pi-chevron-button',
ComponentFamilyClass.Button,
this.colorClass,
this.sizeClass,
].join(' ');
}
readonly toggle = output<void>();

24
libs/ui/src/lib/ui/button/close-button/close-button.component.ts
View File

@@ -3,25 +3,29 @@ import {
Component,
HostBinding,
input,
output
output,
} from '@angular/core';
import { ComponentFamilyClass } from '../../../styles';
import { PiBaseButtonComponent } from '../base-button.component';
import { TranslatePipe } from '@ngx-translate/core';
@Component({
selector: 'pi-close-button',
templateUrl: './close-button.component.html',
styleUrls: ['./close-button.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [TranslatePipe],
selector: 'pi-close-button',
templateUrl: './close-button.component.html',
styleUrls: ['./close-button.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [TranslatePipe],
})
export class PiCloseButtonComponent extends PiBaseButtonComponent {
@HostBinding('class') get classes(): string {
const hasLabelClass = this.hasLabel() === false ? 'pi-close-button__single' : '';
return ['pi-close-button', ComponentFamilyClass.Button, this.sizeClass, hasLabelClass].join(
' '
);
const hasLabelClass =
this.hasLabel() === false ? 'pi-close-button__single' : '';
return [
'pi-close-button',
ComponentFamilyClass.Button,
this.sizeClass,
hasLabelClass,
].join(' ');
}
readonly hasLabel = input(true);

27
libs/ui/src/lib/ui/button/hamburger/hamburger.component.ts
View File

@@ -1,18 +1,25 @@
import { ChangeDetectionStrategy, Component, HostBinding, output } from '@angular/core';
import {
ChangeDetectionStrategy,
Component,
HostBinding,
output,
} from '@angular/core';
import { ComponentFamilyClass } from '../../../styles';
import { PiBaseButtonComponent } from '../base-button.component';
import { TranslatePipe } from '@ngx-translate/core';
@Component({
selector: 'pi-hamburger',
templateUrl: './hamburger.component.html',
styleUrls: ['./hamburger.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [TranslatePipe],
selector: 'pi-hamburger',
templateUrl: './hamburger.component.html',
styleUrls: ['./hamburger.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [TranslatePipe],
})
export class PiHamburgerComponent extends PiBaseButtonComponent {
@HostBinding('class') get classes(): string {
return ['pi-hamburger', ComponentFamilyClass.Button, this.colorClass].join(' ');
}
readonly toggle = output<void>();
@HostBinding('class') get classes(): string {
return ['pi-hamburger', ComponentFamilyClass.Button, this.colorClass].join(
' ',
);
}
readonly toggle = output<void>();
}

12
libs/ui/src/lib/ui/button/icon-button/icon-button.component.html
View File

@@ -17,7 +17,7 @@
textClass,
widthClass,
hasPaddingClass,
modeClass
modeClass,
]"
>
<span *ngIf="text()">{{ text() }}</span>
@@ -44,11 +44,15 @@
textClass,
widthClass,
hasPaddingClass,
modeClass
modeClass,
]"
>
<mat-icon *ngIf="previous()" [svgIcon]="icon()" alt="icon"></mat-icon>
<mat-icon *ngIf="previous()" [svgIcon]="icon()!" alt="icon"></mat-icon>
<span *ngIf="text()">{{ text() }}</span>
<ng-content></ng-content>
<mat-icon *ngIf="!previous()" [svgIcon]="icon()" alt="icon"></mat-icon></button
<mat-icon
*ngIf="!previous()"
[svgIcon]="icon()!"
alt="icon"
></mat-icon></button
></ng-template>

15
libs/ui/src/lib/ui/button/icon-button/icon-button.component.ts
View File

@@ -4,7 +4,7 @@ import {
ElementRef,
HostBinding,
input,
viewChild
viewChild,
} from '@angular/core';
import { buttonSize, mode } from '../../../styles';
import { PiBaseButtonComponent } from '../base-button.component';
@@ -12,15 +12,16 @@ import { NgIf } from '@angular/common';
import { MatIcon } from '@angular/material/icon';
@Component({
selector: 'pi-icon-button',
templateUrl: './icon-button.component.html',
styleUrls: ['./icon-button.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [NgIf, MatIcon],
selector: 'pi-icon-button',
templateUrl: './icon-button.component.html',
styleUrls: ['./icon-button.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [NgIf, MatIcon],
})
export class PiIconButtonComponent extends PiBaseButtonComponent {
@HostBinding('class') get classes(): string {
const customIconClass = this.iconType() === 'custom' && 'pi-icon-button__custom-icon';
const customIconClass =
this.iconType() === 'custom' && 'pi-icon-button__custom-icon';
const isResponsiveClass = this.isResponsive() ? 'is-responsive' : '';
return [
'pi-icon-button',

1
libs/ui/src/lib/ui/button/index.ts
View File

@@ -11,7 +11,6 @@ export * from './toggle-button/toggle-button.component';
// Export button's module
// Export button's directive
export * from './button.directive';
export * from './switch-button/switch-button.directive';

12
libs/ui/src/lib/ui/button/radio-button/radio-button.component.html
View File

@@ -1,5 +1,13 @@
<span *ngIf="icon() !== 'check'; else checkIconTemplate" (click)="execute.emit()"></span>
<span
*ngIf="icon() !== 'check'; else checkIconTemplate"
(click)="execute.emit($event)"
></span>
<ng-template #checkIconTemplate
><mat-icon size="size" svgIcon="check" color="color" (click)="execute.emit()"></mat-icon
><mat-icon
size="size"
svgIcon="check"
color="color"
(click)="execute.emit($event)"
></mat-icon
></ng-template>

17
libs/ui/src/lib/ui/button/radio-button/radio-button.component.ts
View File

@@ -1,14 +1,19 @@
import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core';
import {
ChangeDetectionStrategy,
Component,
HostBinding,
input,
} from '@angular/core';
import { PiBaseButtonComponent } from '../base-button.component';
import { NgIf } from '@angular/common';
import { MatIcon } from '@angular/material/icon';
@Component({
selector: 'pi-radio-button',
templateUrl: './radio-button.component.html',
styleUrls: ['./radio-button.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [NgIf, MatIcon],
selector: 'pi-radio-button',
templateUrl: './radio-button.component.html',
styleUrls: ['./radio-button.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [NgIf, MatIcon],
})
export class PiRadioButtonComponent extends PiBaseButtonComponent {
@HostBinding('class') get classes(): string {

17
libs/ui/src/lib/ui/button/switch-button/switch-button.component.ts
View File

@@ -4,7 +4,7 @@ import {
HostBinding,
input,
model,
output
output,
} from '@angular/core';
import { ComponentFamilyClass } from '../../../styles';
import { PiBaseButtonComponent } from '../base-button.component';
@@ -12,11 +12,11 @@ import { NgTemplateOutlet } from '@angular/common';
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],
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 {
@@ -34,10 +34,7 @@ export class PiSwitchButtonComponent extends PiBaseButtonComponent {
readonly toggledTo = output<'on' | 'off'>();
readonly contentType = input<'icon' | 'text'>('icon');
readonly content = input.required<[
string,
string
]>();
readonly content = input.required<[string, string]>();
toggleSelected(): void {
if (this.isActive()) {

22
libs/ui/src/lib/ui/button/switch-button/switch-button.directive.ts
View File

@@ -1,23 +1,21 @@
import { Directive, HostBinding } from '@angular/core';
@Directive({ selector: 'pi-prefix-left', })
@Directive({ selector: 'pi-prefix-left' })
export class PiSwitchButtonPrefixLeftDirective {
@HostBinding('class') className = 'pi-switch-button__prefix--left';
}
@Directive({ selector: 'pi-suffix-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';
}
@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';
}

8
libs/ui/src/lib/ui/button/toggle-button/toggle-button.component.html
View File

@@ -1,5 +1,9 @@
<button (click)="onClickHandler($event)" [disabled]="isDisabled()" class="pi-button__toggle">
<mat-icon *ngIf="icon()" [svgIcon]="icon()" [color]="color()"></mat-icon>
<button
(click)="onClickHandler($event)"
[disabled]="isDisabled()"
class="pi-button__toggle"
>
<mat-icon *ngIf="icon()" [svgIcon]="icon()!" [color]="color()"></mat-icon>
<span>{{ text() }}</span>
<ng-content></ng-content>
</button>

20
libs/ui/src/lib/ui/button/toggle-button/toggle-button.component.ts
View File

@@ -1,22 +1,28 @@
import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core';
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';
@Component({
selector: 'pi-toggle-button',
templateUrl: './toggle-button.component.html',
styleUrls: ['./toggle-button.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [NgIf, MatIcon],
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' : '';
const iconType = this.iconType();
const iconTypeClass = iconType !== 'default' && `pi-toggle-button__icon--${iconType}`;
const iconTypeClass =
iconType !== 'default' && `pi-toggle-button__icon--${iconType}`;
return [
'pi-toggle-button',
this.sizeClass,

4
libs/ui/src/lib/ui/card/base-card.component.ts
View File

@@ -9,7 +9,9 @@ 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 color = input<
'primary' | 'accent' | 'highlighted' | 'grey' | 'white'
>('white');
readonly mode = input<mode>('light');
readonly alignment = input.required<alignment>();
readonly gap = input.required<gap>();

8
libs/ui/src/lib/ui/card/card/card.component.ts
View File

@@ -7,10 +7,10 @@ import { NgIf } from '@angular/common';
import { PiIconComponent } from '../../icon/icon/icon.component';
@Component({
selector: 'pi-card',
templateUrl: './card.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [NgIf, PiIconComponent],
selector: 'pi-card',
templateUrl: './card.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [NgIf, PiIconComponent],
})
export class PiCardComponent extends PiBaseCardComponent {
@HostBinding('class') get classes(): string {

16
libs/ui/src/lib/ui/card/directives/card.directive.ts
View File

@@ -1,29 +1,29 @@
import { Directive, HostBinding, Input } from '@angular/core';
@Directive({
selector: 'pi-card-top-content',
host: {
class: 'pi-card-content pi-card-content__top',
},
selector: 'pi-card-top-content',
host: {
class: 'pi-card-content pi-card-content__top',
},
})
export class PiCardTopContentDirective {}
@Directive({ selector: 'pi-card-center-content', })
@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', })
@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', })
@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', })
@Directive({ selector: 'pi-card-right-content' })
export class PiCardRightContentDirective {
@HostBinding('class') className = 'pi-card-content pi-card-content__right';
}

2
libs/ui/src/lib/ui/card/index.ts
View File

@@ -1,5 +1,3 @@
export * from './card/card.component';
export * from './directives/card.directive';

9
libs/ui/src/lib/ui/carousel/carousel.directive.ts
View File

@@ -1,9 +1,12 @@
import { Directive, TemplateRef, ViewContainerRef } from '@angular/core';
@Directive({
selector: '[pi-carousel-item]',
host: { class: 'pi-carousel pi-carousel__item' },
selector: '[pi-carousel-item]',
host: { class: 'pi-carousel pi-carousel__item' },
})
export class PiCarouselItemDirective {
constructor(public templateRef: TemplateRef<Element>, public viewContainerRef: ViewContainerRef) {}
constructor(
public templateRef: TemplateRef<any>,
public viewContainerRef: ViewContainerRef,
) {}
}

4
libs/ui/src/lib/ui/carousel/carousel/carousel.component.html
View File

@@ -7,7 +7,9 @@
appearance="ghost"
></pi-icon-button>
<section [class]="hasOverflow ? 'has-overflow' : ''" #carouselContentWrapper>
<ng-container *ngFor="let item of carouselItems(); index as i; trackBy: trackByFn">
<ng-container
*ngFor="let item of carouselItems(); index as i; trackBy: trackByFn"
>
<section [class]="getItemClass(i)" (click)="selectItem(i)">
<ng-container *ngTemplateOutlet="item.templateRef"> </ng-container>
</section>

169
libs/ui/src/lib/ui/carousel/carousel/carousel.component.ts
View File

@@ -15,7 +15,7 @@ import {
input,
output,
viewChild,
contentChildren
contentChildren,
} from '@angular/core';
// Shared
@@ -27,16 +27,11 @@ 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,
],
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
@@ -51,7 +46,8 @@ export class PiCarouselComponent
const typeClass = `pi-carousel__${this.type()}`;
const isDraggableClass = this.isDraggable() ? 'is-draggable' : '';
const justifyValue = this.justify();
const justifyClass = justifyValue && `pi-carousel__justify-content--${justifyValue}`;
const justifyClass =
justifyValue && `pi-carousel__justify-content--${justifyValue}`;
return [
ComponentFamilyClass.Carousel,
itemsNumberClass,
@@ -69,9 +65,9 @@ export class PiCarouselComponent
readonly direction = input<'horizontal' | 'vertical'>('horizontal');
readonly color = input<theming>('primary');
readonly justify = input.required<justify>();
readonly justify = input<justify>();
readonly device = input.required<Device>();
readonly device = input<Device>();
/**
* If true, the carousel will not show the next and previous buttons.
@@ -83,7 +79,6 @@ export class PiCarouselComponent
*/
readonly hidePaginator = input(false);
// BEHAVIOUR
/**
* If a number of items per device (itemsDesktop, itemsTablet, itemsMobile) is provided,
@@ -108,7 +103,7 @@ export class PiCarouselComponent
* 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<number>();
readonly itemWidth = input<number>();
/**
* If true, the user will be able to drag the carousel to move across items.
@@ -131,12 +126,17 @@ export class PiCarouselComponent
/**
* carouselItems corresponds to the items that will be displayed in the carousel.
*/
readonly carouselItems = contentChildren(PiCarouselItemDirective, { descendants: true });
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 });
readonly carouselContentWrapper = viewChild.required(
'carouselContentWrapper',
{ read: ElementRef },
);
carouselItemsNativeElements: HTMLElement[] = [];
@@ -172,7 +172,7 @@ export class PiCarouselComponent
private cdr: ChangeDetectorRef,
private el: ElementRef,
private renderer: Renderer2,
private deviceConfig: DeviceConfigsFacade
private deviceConfig: DeviceConfigsFacade,
) {}
/**
@@ -186,7 +186,9 @@ export class PiCarouselComponent
* Icon displayed in the next control button.
*/
get nextIcon(): string {
return this.direction() === 'horizontal' ? 'chevron-forward' : 'chevron-down';
return this.direction() === 'horizontal'
? 'chevron-forward'
: 'chevron-down';
}
/**
@@ -207,7 +209,7 @@ export class PiCarouselComponent
return this.carouselItemsNativeElements.reduce(
(value, currentValue) =>
value > currentValue.offsetHeight ? value : currentValue.offsetHeight,
0
0,
);
}
@@ -225,7 +227,9 @@ export class PiCarouselComponent
}
get canSwipePrev(): boolean {
return this.movePerPage() ? this.currentItem - this.itemsPerPage >= 0 : this.currentItem > 0;
return this.movePerPage()
? this.currentItem - this.itemsPerPage >= 0
: this.currentItem > 0;
}
/**
@@ -305,20 +309,27 @@ export class PiCarouselComponent
setItemsPerPage(): void {
const itemWidth = this.itemWidth();
if (!!itemWidth) {
this.itemsPerPage = Math.floor(this.carouselContentElement.clientWidth / itemWidth) || 1;
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;
this.itemsPerPage = itemsDesktop
? itemsDesktop
: this.carouselItems().length;
break;
case 'TABLET':
this.itemsPerPage = itemsTablet ? itemsTablet : this.carouselItems().length;
this.itemsPerPage = itemsTablet
? itemsTablet
: this.carouselItems().length;
break;
case 'MOBILE':
this.itemsPerPage = itemsMobile ? itemsMobile : this.carouselItems().length;
this.itemsPerPage = itemsMobile
? itemsMobile
: this.carouselItems().length;
break;
}
}
@@ -375,7 +386,7 @@ export class PiCarouselComponent
'mousedown',
(event) => {
this.dragStart(event);
}
},
);
this.mousemoveListener = this.renderer.listen(
@@ -383,21 +394,25 @@ export class PiCarouselComponent
'mousemove',
(event) => {
if (this.isMouseDown) this.dragAction(event);
}
},
);
this.mouseupListener = this.renderer.listen(document.documentElement, 'mouseup', () => {
if (this.isDragging) {
this.dragEnd();
}
});
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(
@@ -405,12 +420,16 @@ export class PiCarouselComponent
'touchmove',
(event) => {
if (this.isMouseDown) this.dragAction(event);
}
},
);
this.touchendListener = this.renderer.listen(document.documentElement, 'touchend', () => {
if (this.isDragging) this.dragEnd();
});
this.touchendListener = this.renderer.listen(
document.documentElement,
'touchend',
() => {
if (this.isDragging) this.dragEnd();
},
);
}
private dragStart(event: MouseEvent | TouchEvent): void {
@@ -433,22 +452,31 @@ export class PiCarouselComponent
/**
* 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);
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 TouchEvent)
this.dragFinalPosition = event.touches[0].clientX;
if (event instanceof MouseEvent) this.dragFinalPosition = event.clientX;
if (this.dragInitPosition - this.dragFinalPosition > minDraggingWidth && this.canSwipeNext) {
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) {
if (
this.dragInitPosition - this.dragFinalPosition < -minDraggingWidth &&
this.canSwipePrev
) {
this.currentItem--;
this.carouselTranslation(this.currentItem);
this.dragInitPosition = this.dragFinalPosition;
@@ -463,31 +491,41 @@ export class PiCarouselComponent
private getCarouselItemsNativeElements(): void {
this.carouselItemsNativeElements = Array.from(
this.el.nativeElement.querySelectorAll('.pi-carousel__item')
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());
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) {
} 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()
this.direction(),
);
} else {
// If we are at the end of the carousel
this.carouselItemsTranslation(
currentItem,
`-${(this.carouselItems().length - this.itemsPerPage) * 100}%`,
this.direction()
this.direction(),
);
}
}
@@ -499,11 +537,18 @@ export class PiCarouselComponent
: this.setVerticalCarouselStyle();
}
private carouselItemsTranslation(currentItem: number, translation: string, axis: string) {
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 scale: number =
index === currentItem && this.type() === 'symmetric' ? 1.15 : 1;
const transform: string =
axis === 'horizontal' ? `translateX(${translation})` : `translateY(${translation})`;
axis === 'horizontal'
? `translateX(${translation})`
: `translateY(${translation})`;
this.renderer.setStyle(item, 'transform', `${transform} scale(${scale})`);
});
}
@@ -516,8 +561,16 @@ export class PiCarouselComponent
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,
'min-width',
`${100 / this.itemsPerPage}%`,
);
this.renderer.setStyle(
item,
'max-width',
`${100 / this.itemsPerPage}%`,
);
this.renderer.setStyle(item, 'width', `${100 / this.itemsPerPage}%`);
}
});
@@ -527,10 +580,14 @@ export class PiCarouselComponent
this.renderer.setStyle(
this.carouselContentElement,
'min-height',
`${this.itemsPerPage * this.tallestElementHeightPx}px`
`${this.itemsPerPage * this.tallestElementHeightPx}px`,
);
this.carouselItemsNativeElements.forEach((item) => {
this.renderer.setStyle(item, 'min-height', `${this.tallestElementHeightPx}px`);
this.renderer.setStyle(
item,
'min-height',
`${this.tallestElementHeightPx}px`,
);
});
}
}

2
libs/ui/src/lib/ui/carousel/index.ts
View File

@@ -1,5 +1,3 @@
export * from './carousel/carousel.component';
export * from './carousel.directive';

Some files were not shown because too many files have changed in this diff Show More