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

add componets

Browse Source
This commit is contained in:
Josep Piguillem
2026-07-30 11:56:10 +02:00
parent 24067ed2f6
commit c446aa2b04
12 changed files with 0 additions and 877 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
apps/playground/src/app/app.html → apps/playground/src/app/pages/catalog/catalog.page.html
View File

0
apps/playground/src/app/app.scss → apps/playground/src/app/pages/catalog/catalog.page.scss
View File

0
apps/playground/src/app/app.ts → apps/playground/src/app/pages/catalog/catalog.page.ts
View File

0
apps/playground/src/app/showcase-section.ts → apps/playground/src/app/pages/showcase-section.ts
View File

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

@@ -1,812 +0,0 @@
@mixin publicGhostButtonsColors(
$background-image: linear-gradient(
30deg,
var(--pi-color-primary),
var(--pi-color-primary-900)
),
$color: primary
) {
color: var(--pi-color-#{$color});
background-image: $background-image;
&:hover {
&:enabled {
text-decoration: underline;
}
}
}
@mixin publicButtonsBackgroundColors(
$color-disabled: var(--pi-color-primary-200),
$color-enabled: var(--pi-color-primary-900)
) {
background-size: 100%;
background-repeat: repeat;
color: var(--pi-color-white);
&:disabled {
background-color: $color-disabled;
}
&:hover {
&:enabled {
background-color: $color-enabled;
}
}
}
@mixin publicFillButtonsGradients($color) {
&: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);
// Light
&.pi-color__mode--light {
&:not(:disabled) {
background-image: var(--pi-gradient-#{$color}-light);
}
&:disabled {
color: var(--pi-color-grey-200);
background-image: var(--pi-gradient-light-disabled);
}
}
// Dark
&:not(.pi-color__mode--light) {
&:not(:disabled) {
background-image: var(--pi-gradient-#{$color}-dark);
}
&:disabled {
background-image: var(--pi-gradient-dark-disabled);
}
}
}
// Primary & White
&.pi-button__white {
color: var(--pi-color-#{$color});
&:hover {
&:enabled {
background-color: var(--pi-color-#{$color});
}
}
}
}
// 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) {
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) {
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) {
// 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) {
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) {
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-xxx-large);
}
}
}
}
// Shine hover effect
@mixin publicButtonsShineHoverEffect {
// Hover shine effect
&:not(.pi-button__appearance--ghost):not(.pi-button__type--menu-item):not(
.pi-color__black
) {
position: relative;
overflow: hidden;
&::after {
content: '';
position: absolute;
top: -50%;
right: 0;
bottom: -50%;
left: -50%;
transform: rotateZ(75deg) translate(-5rem, 7.5rem);
&:hover {
cursor: pointer;
}
}
&:hover,
&:focus {
&::after {
animation: sheen 0.75s forwards;
}
}
&:active {
transform: translate(0, -0.125rem);
}
// Mode Light
&.pi-color__mode--light {
&::after {
background: linear-gradient(
to bottom,
rgba(229, 172, 142, 0),
rgba(255, 255, 255, 0.25) 50%,
rgba(229, 172, 142, 0)
);
}
&: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);
}
}
// Mode Dark
&.pi-color__mode--dark {
&::after {
background: linear-gradient(
to bottom,
rgba(229, 172, 142, 0),
rgba(255, 255, 255, 0.125) 50%,
rgba(229, 172, 142, 0)
);
}
&: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);
}
}
&:focus {
outline: 0;
}
@keyframes sheen {
100% {
transform: rotateZ(30deg) translate(1rem, -9rem);
}
}
}
}
// Colors
@mixin publicButtonsColors {
position: relative;
overflow: hidden;
// Shine hover effect
&:not(:disabled) {
@include publicButtonsShineHoverEffect;
}
// Default
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(
.pi-button__toggle
):not(.pi-button__type--menu-item) {
font: {
weight: 600;
}
// Color
// White
// TODO: Add customized white 25 density color gradient for backgrounds
// TODO: Add text color gradients
&.pi-color__white {
background-image: var(--pi-gradient-white-rgba);
&:disabled {
background-color: rgba($color: white, $alpha: 0.6);
}
&:hover {
color: var(--pi-color-primary-900);
background-color: transparent;
border: 1px solid var(--pi-color-primary-100);
&:enabled {
background-color: transparent;
}
}
// White default
&.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);
}
}
}
// Primary
&.pi-color__primary {
@include publicFillButtonsGradients(primary);
}
// Accent
&.pi-color__accent {
@include publicFillButtonsGradients(accent);
}
// Highlighted
&.pi-color__highlighted {
@include publicFillButtonsGradients(highlighted);
}
// Black
&.pi-color__black {
background-image: linear-gradient(
300deg,
hsl(0deg 0% 62%) 0%,
hsl(344deg 0% 57%) 21%,
hsl(344deg 0% 53%) 30%,
hsl(344deg 0% 49%) 39%,
hsl(344deg 0% 44%) 46%,
hsl(344deg 0% 40%) 54%,
hsl(344deg 0% 36%) 61%,
hsl(344deg 0% 32%) 69%,
hsl(344deg 0% 28%) 79%,
hsl(0deg 0% 24%) 100%
);
color: var(--pi-color-white);
&:disabled {
background-color: rgba($color: #3d3d3d, $alpha: 0.6);
}
&:hover {
&:enabled {
background-color: var(--pi-color-black);
}
}
// White default
&.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);
}
}
}
// 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)
);
}
// Mode
// Default
&:not(.pi-color__mode--light) {
&:not(.pi-button__appearance--ghost):not(
.pi-button__appearance--outline
):not(.pi-color__white) {
background-image: linear-gradient(
300deg,
hsl(0deg 74% 71%) 0%,
hsl(0deg 71% 69%) 21%,
hsl(0deg 68% 66%) 30%,
hsl(1deg 65% 64%) 39%,
hsl(1deg 62% 61%) 46%,
hsl(1deg 60% 59%) 54%,
hsl(1deg 58% 56%) 61%,
hsl(1deg 56% 54%) 69%,
hsl(0deg 54% 51%) 79%,
hsl(0deg 56% 49%) 100%
);
}
}
// Light
&.pi-color__mode--light {
&:not(.pi-button__appearance--ghost):not(
.pi-button__appearance--outline
):not(.pi-color__white) {
background-image: linear-gradient(
300deg,
hsl(350deg 100% 93%) 0%,
hsl(351deg 95% 91%) 21%,
hsl(352deg 92% 89%) 30%,
hsl(353deg 89% 86%) 39%,
hsl(354deg 87% 84%) 46%,
hsl(356deg 84% 82%) 54%,
hsl(357deg 81% 79%) 61%,
hsl(358deg 79% 77%) 69%,
hsl(359deg 76% 74%) 79%,
hsl(0deg 74% 71%) 100%
);
}
}
// Warn & White
&.pi-color__white {
&:not(:hover) {
color: var(--pi-color-warn);
}
}
}
// Success
&.pi-color__success {
&: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)
);
}
// Mode
// Default
&:not(.pi-color__mode--light) {
&:not(.pi-button__appearance--ghost):not(
.pi-button__appearance--outline
):not(.pi-color__white) {
background-image: linear-gradient(
300deg,
hsl(155deg 48% 79%) 0%,
hsl(154deg 45% 74%) 21%,
hsl(153deg 43% 69%) 30%,
hsl(152deg 42% 64%) 39%,
hsl(151deg 40% 60%) 46%,
hsl(151deg 39% 55%) 54%,
hsl(150deg 39% 50%) 61%,
hsl(150deg 48% 45%) 69%,
hsl(151deg 61% 39%) 79%,
hsl(155deg 100% 30%) 100%
);
}
}
// Light
&.pi-color__mode--light {
&:not(.pi-button__appearance--ghost):not(
.pi-button__appearance--outline
):not(.pi-color__white) {
background-image: linear-gradient(
300deg,
hsl(155deg 62% 91%) 0%,
hsl(155deg 60% 88%) 21%,
hsl(155deg 59% 84%) 30%,
hsl(155deg 58% 81%) 39%,
hsl(155deg 57% 78%) 46%,
hsl(155deg 57% 75%) 54%,
hsl(155deg 56% 72%) 61%,
hsl(155deg 56% 68%) 69%,
hsl(155deg 56% 65%) 79%,
hsl(155deg 56% 61%) 100%
);
}
}
// Highlighted & White
&.pi-color__white {
&:not(:hover) {
color: var(--pi-color-success);
}
}
}
// Ghost
&.pi-button__appearance--ghost {
background-color: transparent;
text-decoration: underline;
background-size: 100%;
background-repeat: repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
// Ghost & Primary
&.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) {
@include publicGhostButtonsColors;
&:disabled {
@include publicGhostButtonsColors(
linear-gradient(
30deg,
var(--pi-color-primary-100),
var(--pi-color-primary-200)
),
primary-200
);
}
}
// Ghost & Accent
&.pi-color__accent {
@include publicGhostButtonsColors(
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)
),
accent-200
);
}
}
// Ghost & Warn
&.pi-color__warn {
@include publicGhostButtonsColors(
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)
),
warn-200
);
}
}
// Ghost & White
&.pi-color__white {
@include publicGhostButtonsColors;
&:disabled {
@include publicGhostButtonsColors(
linear-gradient(
30deg,
var(--pi-color-white),
rgba($color: white, $alpha: 0.6)
),
white
);
}
}
// Ghost & Black
&.pi-color__black {
@include publicGhostButtonsColors(
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)
),
grey-200
);
}
}
// Ghost & Highlighted
&.pi-color__highlighted {
@include publicGhostButtonsColors(
linear-gradient(
30deg,
var(--pi-color-highlighted),
var(--pi-color-highlighted-900)
),
highlighted
);
&:disabled {
@include publicGhostButtonsColors(
linear-gradient(
30deg,
var(--pi-color-highlighted-100),
var(--pi-color-highlighted-200)
),
highlighted-200
);
}
}
// Ghost & Grey
&.pi-color__grey {
@include publicGhostButtonsColors(
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)
),
grey-50
);
}
}
// Ghost & Success
&.pi-color__success {
@include publicGhostButtonsColors(
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)
),
success-200
);
}
}
}
// Outline
&.pi-button__appearance--outline {
background-color: transparent;
box-sizing: border-box;
transition: all 0.16s ease-in;
border: 1px solid;
// Outline & Primary
&.pi-color__primary,
&:not(.pi-color__primary):not(.pi-color__accent):not(.pi-color__warn):not(
.pi-color__white
):not(.pi-color__highlighted) {
color: var(--pi-color-primary);
&:hover {
&:enabled {
color: var(--pi-color-white);
border-color: var(--pi-color-primary);
background-color: var(--pi-color-primary);
}
}
&:disabled {
color: var(--pi-color-primary-200);
}
// Is Active
&.is-active {
color: var(--pi-color-white);
border-color: var(--pi-color-primary);
background-color: var(--pi-color-primary);
}
}
// Outline & Accent
&.pi-color__accent {
color: var(--pi-color-accent);
&:hover {
&:enabled {
color: var(--pi-color-white);
border-color: var(--pi-color-accent);
background-color: var(--pi-color-accent);
}
}
&:disabled {
color: var(--pi-color-accent-200);
border-color: var(--pi-color-accent-200);
}
// Is Active
&.is-active {
color: var(--pi-color-white);
background-color: var(--pi-color-accent);
border-color: var(--pi-color-accent);
}
}
// Outline & Warn
&.pi-color__warn {
color: var(--pi-color-warn);
&:hover {
&:enabled {
color: var(--pi-color-white);
background-color: var(--pi-color-warn);
border-color: var(--pi-color-warn);
}
}
&:disabled {
color: var(--pi-color-warn-200);
}
// Is Active
&.is-active {
color: var(--pi-color-white);
background-color: var(--pi-color-warn);
border-color: var(--pi-color-warn);
}
}
// Outline & Highlighted
&.pi-color__highlighted {
color: var(--pi-color-highlighted);
&:hover {
&:enabled {
color: var(--pi-color-white);
background-color: var(--pi-color-highlighted);
border-color: var(--pi-color-highlighted);
}
}
&:disabled {
color: var(--pi-color-highlighted-200);
}
// Is Active
&.is-active {
color: var(--pi-color-white);
background-color: var(--pi-color-highlighted);
border-color: var(--pi-color-highlighted);
}
}
// Outline & White
&.pi-color__white {
color: var(--pi-color-white);
&:hover {
&:enabled {
color: var(--pi-color-primary);
background-color: var(--pi-color-white);
border-color: var(--pi-color-white);
}
}
&:disabled {
color: rgba($color: #ffffff, $alpha: 0.6);
}
// Is Active
&.is-active {
color: var(--pi-color-primary);
background-color: var(--pi-color-white);
border-color: var(--pi-color-white);
}
}
}
}
}
@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)
)
) {
.pi-shell {
&.pi-shell__deale-website,
&.is-public {
// Fixed
button,
.pi-icon-button,
.pi-action-button {
&.is-fixed {
position: fixed;
z-index: 999;
&.is-fixed--top-left,
&.is-fixed--top-right {
top: $top-spacing;
right: $side-spacing;
}
&.is-fixed--bottom-left {
bottom: $bottom-left-spacing;
left: $side-spacing;
}
&.is-fixed--bottom-right {
bottom: $bottom-right-spacing;
right: $side-spacing;
}
}
}
}
}
}
.pi-shell {
&.pi-shell__deale-website,
.is-public {
button {
// Colors
@include publicButtonsColors;
// Sizes
@include publicButtonsSizes;
}
// Common
button {
&.pi-button {
// X Large
&.pi-button__x-large {
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-xxx-large);
border-radius: 1.4rem;
// Mobile
@media screen and (max-width: 40rem) {
height: 3.125rem;
min-width: 10.6875rem;
font: {
size: var(--pi-font-size-small);
}
}
// Tablet & Desktop
@media screen and (min-width: 40rem) {
height: 3.75rem;
min-width: 11.25rem;
font: {
size: var(--pi-font-size-medium);
}
}
}
}
}
}
}
html,
.cdk-overlay-container {
// Mobile
&.is-mobile {
@include publicFixedButtonSideSpacing(
calc(var(--pi-spacing-medium) + env(safe-area-inset-top)),
var(--pi-spacing-medium),
calc(var(--pi-spacing-medium) + env(safe-area-inset-bottom)),
calc(5.75rem + var(--pi-spacing-large) + env(safe-area-inset-bottom))
);
}
&.is-tablet {
&.is-tablet__small {
@include publicFixedButtonSideSpacing(
calc(var(--pi-spacing-x-large) + env(safe-area-inset-top)),
var(--pi-spacing-x-large),
calc(var(--pi-spacing-x-large) + env(safe-area-inset-bottom)),
calc(3.75rem + var(--pi-spacing-large) + env(safe-area-inset-bottom))
);
}
&.is-tablet__large {
@include publicFixedButtonSideSpacing(
calc(var(--pi-spacing-x-large) + env(safe-area-inset-top)),
var(--pi-spacing-x-large),
calc(var(--pi-spacing-x-large) + env(safe-area-inset-bottom)),
calc(5.75rem + var(--pi-spacing-large) + env(safe-area-inset-bottom))
);
}
}
// Tablet & Desktop
&.is-desktop {
@include publicFixedButtonSideSpacing(
calc(var(--pi-spacing-x-large) + env(safe-area-inset-top)),
var(--pi-spacing-x-large),
calc(var(--pi-spacing-x-large) + env(safe-area-inset-bottom)),
calc(5.75rem + var(--pi-spacing-large) + env(safe-area-inset-bottom))
);
}
}

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

1
libs/ui/src/lib/ui/slide-toggle/index.ts
View File

@@ -1 +0,0 @@
export * from './slide-toggle/slide-toggle.component';

1
libs/ui/src/lib/ui/slide-toggle/slide-toggle/slide-toggle.component.html
View File

@@ -1 +0,0 @@
<p>slide-toggle works!</p>

0
libs/ui/src/lib/ui/slide-toggle/slide-toggle/slide-toggle.component.scss
View File

10
libs/ui/src/lib/ui/slide-toggle/slide-toggle/slide-toggle.component.ts
View File

@@ -1,10 +0,0 @@
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { PiFormControl } from '../../../util/form-control';
@Component({
selector: 'pi-slide-toggle',
templateUrl: './slide-toggle.component.html',
styleUrls: ['./slide-toggle.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class PiSlideToggleComponent extends PiFormControl {}

52
libs/ui/src/lib/util/form-control/form-control.ts
View File

@@ -1,52 +0,0 @@
import { Injectable, Injector } from '@angular/core';
import { ControlContainer, ControlValueAccessor } from '@angular/forms';
@Injectable()
export class PiFormControl implements ControlValueAccessor {
value!: number | string | Array<string> | boolean;
onChange = (value: number | string | Array<string> | boolean) => {};
onTouched = () => {};
disabled = false;
focused = false;
touched = false;
constructor(protected injector: Injector) {}
get controlContainer(): any {
return this.injector.get(ControlContainer);
}
writeValue(value: number | string | Array<string> | boolean) {
this.value = value;
}
registerOnChange(onChange: any) {
this.onChange = onChange;
}
registerOnTouched(onTouched: any) {
this.onTouched = onTouched;
}
markAsTouched() {
if (!this.touched) {
this.onTouched();
this.touched = true;
}
}
setDisabledState(disabled: boolean) {
this.disabled = disabled;
}
onFocus(): void {
this.focused = true;
}
onBlur(): void {
this.focused = false;
}
}

1
libs/ui/src/lib/util/form-control/index.ts
View File

@@ -1 +0,0 @@
export * from './form-control';