diff --git a/apps/playground/src/app/app.html b/apps/playground/src/app/pages/catalog/catalog.page.html
similarity index 100%
rename from apps/playground/src/app/app.html
rename to apps/playground/src/app/pages/catalog/catalog.page.html
diff --git a/apps/playground/src/app/app.scss b/apps/playground/src/app/pages/catalog/catalog.page.scss
similarity index 100%
rename from apps/playground/src/app/app.scss
rename to apps/playground/src/app/pages/catalog/catalog.page.scss
diff --git a/apps/playground/src/app/app.ts b/apps/playground/src/app/pages/catalog/catalog.page.ts
similarity index 100%
rename from apps/playground/src/app/app.ts
rename to apps/playground/src/app/pages/catalog/catalog.page.ts
diff --git a/apps/playground/src/app/showcase-section.ts b/apps/playground/src/app/pages/showcase-section.ts
similarity index 100%
rename from apps/playground/src/app/showcase-section.ts
rename to apps/playground/src/app/pages/showcase-section.ts
diff --git a/libs/ui/src/lib/styles/common/components/pi-button/_pi-button-public.scss b/libs/ui/src/lib/styles/common/components/pi-button/_pi-button-public.scss
deleted file mode 100644
index 6ba592f..0000000
--- a/libs/ui/src/lib/styles/common/components/pi-button/_pi-button-public.scss
+++ /dev/null
@@ -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))
- );
- }
-}
diff --git a/libs/ui/src/lib/styles/common/components/pi-button/_pi-button-private.scss b/libs/ui/src/lib/styles/common/components/pi-button/_pi-button-theme.scss
similarity index 100%
rename from libs/ui/src/lib/styles/common/components/pi-button/_pi-button-private.scss
rename to libs/ui/src/lib/styles/common/components/pi-button/_pi-button-theme.scss
diff --git a/libs/ui/src/lib/ui/slide-toggle/index.ts b/libs/ui/src/lib/ui/slide-toggle/index.ts
deleted file mode 100644
index 22d0695..0000000
--- a/libs/ui/src/lib/ui/slide-toggle/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './slide-toggle/slide-toggle.component';
diff --git a/libs/ui/src/lib/ui/slide-toggle/slide-toggle/slide-toggle.component.html b/libs/ui/src/lib/ui/slide-toggle/slide-toggle/slide-toggle.component.html
deleted file mode 100644
index 6627b58..0000000
--- a/libs/ui/src/lib/ui/slide-toggle/slide-toggle/slide-toggle.component.html
+++ /dev/null
@@ -1 +0,0 @@
-slide-toggle works!
diff --git a/libs/ui/src/lib/ui/slide-toggle/slide-toggle/slide-toggle.component.scss b/libs/ui/src/lib/ui/slide-toggle/slide-toggle/slide-toggle.component.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/libs/ui/src/lib/ui/slide-toggle/slide-toggle/slide-toggle.component.ts b/libs/ui/src/lib/ui/slide-toggle/slide-toggle/slide-toggle.component.ts
deleted file mode 100644
index 6c2c986..0000000
--- a/libs/ui/src/lib/ui/slide-toggle/slide-toggle/slide-toggle.component.ts
+++ /dev/null
@@ -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 {}
diff --git a/libs/ui/src/lib/util/form-control/form-control.ts b/libs/ui/src/lib/util/form-control/form-control.ts
deleted file mode 100644
index beb94a2..0000000
--- a/libs/ui/src/lib/util/form-control/form-control.ts
+++ /dev/null
@@ -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 | boolean;
-
- onChange = (value: number | string | Array | 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 | 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;
- }
-}
diff --git a/libs/ui/src/lib/util/form-control/index.ts b/libs/ui/src/lib/util/form-control/index.ts
deleted file mode 100644
index 75b8858..0000000
--- a/libs/ui/src/lib/util/form-control/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './form-control';