New in {{ pkg.version }}
- +
diff --git a/web/projects/marketplace/src/pages/show/hero/hero.component.ts b/web/projects/marketplace/src/pages/show/hero/hero.component.ts
index 0cc9614c2..60c63c3a2 100644
--- a/web/projects/marketplace/src/pages/show/hero/hero.component.ts
+++ b/web/projects/marketplace/src/pages/show/hero/hero.component.ts
@@ -25,122 +25,119 @@ import { SharedPipesModule, TickerComponent } from '@start9labs/shared'
`,
- styles: [
- `
- .outer-container {
- display: flex;
- justify-content: center;
- margin-top: 2.5rem;
+ styles: `
+ .outer-container {
+ display: flex;
+ justify-content: center;
+ margin-top: 2.5rem;
+
+ @media (min-width: 768px) {
+ margin-top: 0;
+ }
+ }
+
+ .inner-container {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ min-height: 32vh;
+ position: relative;
+ border-radius: 1.5rem;
+ padding: 4rem 2rem 0 2rem;
+
+ @media (min-width: 376px) {
+ min-height: 20vh;
+ }
+
+ @media (min-width: 768px) {
+ min-height: 11rem;
+ }
+
+ img {
+ width: 6rem;
+ height: 6rem;
+ pointer-events: none;
+ border-radius: 9999px;
+ object-fit: cover;
+ position: absolute;
+ top: -2.25rem;
+ left: 1.75rem;
+ z-index: 1;
+ }
+
+ .inner-container-title {
+ margin: 1rem 0;
+ color: rgb(250 250 250);
+ mix-blend-mode: plus-lighter;
+ z-index: 1;
+ max-width: 17rem;
@media (min-width: 768px) {
- margin-top: 0;
+ min-width: 100%;
+ }
+
+ h2 {
+ font-size: 2rem;
+ line-height: 3rem;
+ font-weight: 400;
+ display: inline-block;
+ margin-left: -1px;
+ }
+
+ h3 {
+ font-size: 1.1rem;
+ font-weight: 400;
+ margin-bottom: 1rem;
+ pointer-events: none;
+ }
+
+ p {
+ font-size: 1rem;
+ line-height: 1.5rem;
+ font-weight: 300;
+ pointer-events: none;
+ overflow: hidden;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 2;
}
}
- .inner-container {
- display: flex;
- flex-direction: column;
+ .color-background {
+ overflow: hidden;
+ position: absolute;
width: 100%;
- min-height: 32vh;
- position: relative;
+ height: 100%;
+ top: 0;
+ left: 0;
+ z-index: -50;
border-radius: 1.5rem;
- padding: 4rem 2rem 0 2rem;
-
- @media (min-width: 376px) {
- min-height: 20vh;
- }
-
- @media (min-width: 768px) {
- min-height: 11rem;
- }
img {
- width: 6rem;
- height: 6rem;
- pointer-events: none;
- border-radius: 9999px;
+ position: absolute;
object-fit: cover;
- position: absolute;
- top: -2.25rem;
- left: 1.75rem;
- z-index: 1;
- }
-
- .inner-container-title {
- margin: 1rem 0;
- color: rgb(250 250 250);
- mix-blend-mode: plus-lighter;
- z-index: 1;
- max-width: 17rem;
-
- @media (min-width: 768px) {
- min-width: 100%;
- }
-
- h2 {
- font-size: 2rem;
- line-height: 3rem;
- font-weight: 400;
- display: inline-block;
- margin-left: -1px;
- }
-
- h3 {
- font-size: 1.1rem;
- font-weight: 400;
- margin-bottom: 1rem;
- pointer-events: none;
- }
-
- p {
- font-size: 1rem;
- line-height: 1.5rem;
- font-weight: 300;
- pointer-events: none;
- overflow: hidden;
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 2;
- }
- }
-
- .color-background {
- overflow: hidden;
- position: absolute;
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
- z-index: -50;
- border-radius: 1.5rem;
-
- img {
- position: absolute;
- object-fit: cover;
- pointer-events: none;
- width: 200%;
- height: 200%;
- max-width: 200%;
- filter: blur(100px);
- }
- }
-
- .dark-overlay {
- overflow: hidden;
- position: absolute;
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
- border-radius: 1.5rem;
- background-color: rgb(63 63 70);
- opacity: 0.7;
+ pointer-events: none;
+ width: 200%;
+ height: 200%;
+ max-width: 200%;
+ filter: blur(100px);
}
}
- `,
- ],
+
+ .dark-overlay {
+ overflow: hidden;
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ border-radius: 1.5rem;
+ background-color: rgb(63 63 70);
+ opacity: 0.7;
+ }
+ }
+ `,
changeDetection: ChangeDetectionStrategy.OnPush,
- standalone: true,
imports: [CommonModule, SharedPipesModule, TickerComponent],
})
export class MarketplacePackageHeroComponent {
diff --git a/web/projects/marketplace/src/pages/show/screenshots/screenshots.component.ts b/web/projects/marketplace/src/pages/show/screenshots/screenshots.component.ts
index d3b9e1760..cebe378a8 100644
--- a/web/projects/marketplace/src/pages/show/screenshots/screenshots.component.ts
+++ b/web/projects/marketplace/src/pages/show/screenshots/screenshots.component.ts
@@ -68,64 +68,61 @@ import { PolymorpheusContent } from '@taiga-ui/polymorpheus'
>
`,
- styles: [
- `
- .outer-container {
- display: flex;
- align-items: center;
- align-content: center;
- margin: 0px;
+ styles: `
+ .outer-container {
+ display: flex;
+ align-items: center;
+ align-content: center;
+ margin: 0px;
- @media (min-width: 1024px) {
- margin-left: -3.5rem;
- margin-right: -3.5rem;
- min-height: 20rem;
- height: 20rem;
- }
- @media (min-width: 1536px) {
- height: 100%;
- }
+ @media (min-width: 1024px) {
+ margin-left: -3.5rem;
+ margin-right: -3.5rem;
+ min-height: 20rem;
+ height: 20rem;
+ }
+ @media (min-width: 1536px) {
+ height: 100%;
+ }
+ }
+
+ .carousel {
+ overflow-y: hidden;
+ overflow-x: scroll;
+ overflow: hidden;
+ }
+
+ .screenshot-item {
+ object-fit: cover;
+ overflow: hidden;
+ border-radius: 0.5rem;
+ border-width: 1px;
+ border-color: rgb(161 161 170 / 0.3);
+
+ &:hover {
+ cursor: pointer;
}
- .carousel {
- overflow-y: hidden;
- overflow-x: scroll;
- overflow: hidden;
+ @media (min-width: 768px) {
+ border-radius: 0.75rem;
}
- .screenshot-item {
- object-fit: cover;
- overflow: hidden;
+ .screenshot-item-img {
+ width: 100%;
+ height: 100%;
border-radius: 0.5rem;
- border-width: 1px;
- border-color: rgb(161 161 170 / 0.3);
-
- &:hover {
- cursor: pointer;
- }
@media (min-width: 768px) {
border-radius: 0.75rem;
}
- .screenshot-item-img {
- width: 100%;
- height: 100%;
- border-radius: 0.5rem;
-
- @media (min-width: 768px) {
- border-radius: 0.75rem;
- }
-
- .screenshot-item-img-enlarged {
- border-radius: 0px;
- }
+ .screenshot-item-img-enlarged {
+ border-radius: 0;
}
}
- `,
- ],
+ }
+ `,
changeDetection: ChangeDetectionStrategy.OnPush,
- standalone: true,
imports: [CommonModule, TuiCarousel, TuiButton],
})
export class MarketplacePackageScreenshotComponent {
diff --git a/web/projects/marketplace/src/pipes/filter-packages.pipe.ts b/web/projects/marketplace/src/pipes/filter-packages.pipe.ts
index bd43a0c8c..06ea358c8 100644
--- a/web/projects/marketplace/src/pipes/filter-packages.pipe.ts
+++ b/web/projects/marketplace/src/pipes/filter-packages.pipe.ts
@@ -4,6 +4,7 @@ import Fuse from 'fuse.js'
@Pipe({
name: 'filterPackages',
+ standalone: false,
})
export class FilterPackagesPipe implements PipeTransform {
transform(
diff --git a/web/projects/setup-wizard/src/app/app.component.ts b/web/projects/setup-wizard/src/app/app.component.ts
index cd2ca9e6a..a26ea849c 100644
--- a/web/projects/setup-wizard/src/app/app.component.ts
+++ b/web/projects/setup-wizard/src/app/app.component.ts
@@ -8,6 +8,7 @@ import { DOCUMENT } from '@angular/common'
@Component({
selector: 'app-root',
template: '
@if (!loading) {
@@ -59,7 +58,7 @@ import { StateService } from 'src/app/services/state.service'
}
`,
styles: `
- @import '@taiga-ui/core/styles/taiga-ui-local';
+ @use '@taiga-ui/core/styles/taiga-ui-local' as taiga;
.logo {
width: 6rem;
@@ -88,7 +87,7 @@ import { StateService } from 'src/app/services/state.service'
}
.options {
- @include transition(margin);
+ @include taiga.transition(margin);
min-width: 100%;
display: flex;
diff --git a/web/projects/setup-wizard/src/app/pages/loading.page.ts b/web/projects/setup-wizard/src/app/pages/loading.page.ts
index f96d6afb1..a5c103578 100644
--- a/web/projects/setup-wizard/src/app/pages/loading.page.ts
+++ b/web/projects/setup-wizard/src/app/pages/loading.page.ts
@@ -23,9 +23,13 @@ import { ApiService } from 'src/app/services/api.service'
import { StateService } from 'src/app/services/state.service'
@Component({
- standalone: true,
template: '{{ options.message }}
{{ options.warning }}
@@ -60,22 +59,20 @@ import { i18nKey } from '../i18n/i18n.providers' > `, - styles: [ - ` - .warning { - color: var(--tui-status-warning); - } + styles: ` + .warning { + color: var(--tui-status-warning); + } - .button { - pointer-events: auto; - margin-left: 0.25rem; - } + .button { + pointer-events: auto; + margin-left: 0.25rem; + } - .masked { - -webkit-text-security: disc; - } - `, - ], + .masked { + -webkit-text-security: disc; + } + `, imports: [ CommonModule, FormsModule, diff --git a/web/projects/shared/src/components/server.component.ts b/web/projects/shared/src/components/server.component.ts index c1ffac257..735e9cb99 100644 --- a/web/projects/shared/src/components/server.component.ts +++ b/web/projects/shared/src/components/server.component.ts @@ -5,7 +5,6 @@ import { TuiCell } from '@taiga-ui/layout' import { StartOSDiskInfo } from '../types/api' @Component({ - standalone: true, selector: 'button[server]', template: `
diff --git a/web/projects/ui/src/app/routes/portal/components/interfaces/clearnet.component.ts b/web/projects/ui/src/app/routes/portal/components/interfaces/clearnet.component.ts
index d64293073..95b5dc791 100644
--- a/web/projects/ui/src/app/routes/portal/components/interfaces/clearnet.component.ts
+++ b/web/projects/ui/src/app/routes/portal/components/interfaces/clearnet.component.ts
@@ -47,7 +47,6 @@ type ClearnetForm = {
}
@Component({
- standalone: true,
selector: 'section[clearnet]',
template: `
diff --git a/web/projects/ui/src/app/routes/portal/components/interfaces/interface.component.ts b/web/projects/ui/src/app/routes/portal/components/interfaces/interface.component.ts
index 53a934fa7..7486bfea8 100644
--- a/web/projects/ui/src/app/routes/portal/components/interfaces/interface.component.ts
+++ b/web/projects/ui/src/app/routes/portal/components/interfaces/interface.component.ts
@@ -13,7 +13,6 @@ import { ApiService } from 'src/app/services/api/embassy-api.service'
import { MappedServiceInterface } from './interface.utils'
@Component({
- standalone: true,
selector: 'app-interface',
template: `