From 035e4aa059ef54f90644bfb533bc8a0229da0ebd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mehmet=20=C3=87etin?= <92744169+mehmetcetin01140@users.noreply.github.com> Date: Mon, 27 Nov 2023 17:53:46 +0300 Subject: [PATCH] sections divided into components --- .../pages/landing/blocksection.component.ts | 386 ++++++ .../landing/featuressection.component.ts | 89 ++ .../pages/landing/footersection.component.ts | 155 +++ .../pages/landing/herosection.component.ts | 224 ++++ .../pages/landing/landing.component.html | 1034 +---------------- .../pages/landing/landing.component.ts | 130 +-- .../landing/templatesection.component.ts | 145 +++ .../pages/landing/themesection.component.ts | 241 ++++ .../pages/landing/userssection.component.ts | 77 ++ 9 files changed, 1344 insertions(+), 1137 deletions(-) create mode 100644 src/app/showcase/pages/landing/blocksection.component.ts create mode 100644 src/app/showcase/pages/landing/featuressection.component.ts create mode 100644 src/app/showcase/pages/landing/footersection.component.ts create mode 100644 src/app/showcase/pages/landing/herosection.component.ts create mode 100644 src/app/showcase/pages/landing/templatesection.component.ts create mode 100644 src/app/showcase/pages/landing/themesection.component.ts create mode 100644 src/app/showcase/pages/landing/userssection.component.ts diff --git a/src/app/showcase/pages/landing/blocksection.component.ts b/src/app/showcase/pages/landing/blocksection.component.ts new file mode 100644 index 00000000000..3bad932e62c --- /dev/null +++ b/src/app/showcase/pages/landing/blocksection.component.ts @@ -0,0 +1,386 @@ +import { Component } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +@Component({ + selector: 'template-block', + standalone: true, + imports: [CommonModule], + template: ` +
+
PrimeBlocks
+

400+ ready to copy-paste UI blocks to build spectacular applications in no time.

+
+ + Explore All + + +
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 26 % +
+
+
+
+ 6 % +
+
+
+
+ 62 % +
+
+
+
+ 39 % +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ question mark +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ` +}) +export class BlockSectionComponent { + +} diff --git a/src/app/showcase/pages/landing/featuressection.component.ts b/src/app/showcase/pages/landing/featuressection.component.ts new file mode 100644 index 00000000000..55aa2229765 --- /dev/null +++ b/src/app/showcase/pages/landing/featuressection.component.ts @@ -0,0 +1,89 @@ +import { Component } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { AppConfigService } from '../../service/appconfigservice'; + +@Component({ + selector: 'template-features', + standalone: true, + imports: [CommonModule], + template: ` +
+
Features
+

PrimeNG is the most complete solution for your UI requirements.

+
+
+
+
+
+ components icon +
90+ UI Components
+

The ultimate set of UI Components to assist you with 90+ impressive Angular Components.

+
+
+
+
+ components icon +
Community
+

Connect with the other open source community members, collaborate and have a voice in the project roadmap.

+
+
+
+
+ components icon +
Productivity
+

Boost your productivity by achieving more in less time and accomplish amazing results.

+
+
+
+
+ components icon +
Accessibility
+

The ultimate set of UI Components to assist you with 90+ impressive Angular Components.

+
+
+
+
+ components icon +
Enterprise Support
+

Exceptional support service featuring response within 1 business day and option to request enhancements and new features for the library.

+
+
+
+
+ components icon +
Mobile
+

First class support for responsive design led by touch optimized elements.

+
+
+
+
+ components icon +
Themes
+

Built on a design-agnostic api, choose from a vast amount of themes such as Material, Bootstrap, custom or develop your own.

+
+
+
+
+ components icon +
Typescript
+

Top-notch support for Typescript with types and tooling assistance.

+
+
+
+
+
+
+ ` +}) +export class FeaturesSectionComponent { + constructor(private configService: AppConfigService) {} + + get isDarkMode() { + return this.configService.config.darkMode; + } + +} diff --git a/src/app/showcase/pages/landing/footersection.component.ts b/src/app/showcase/pages/landing/footersection.component.ts new file mode 100644 index 00000000000..11c3e93b215 --- /dev/null +++ b/src/app/showcase/pages/landing/footersection.component.ts @@ -0,0 +1,155 @@ +import { Component } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { RouterModule } from '@angular/router'; + +@Component({ + selector: 'template-footer', + standalone: true, + imports: [CommonModule, RouterModule], + template: ` +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + +
+
+
+
+ ` +}) +export class FooterSectionComponent { + +} diff --git a/src/app/showcase/pages/landing/herosection.component.ts b/src/app/showcase/pages/landing/herosection.component.ts new file mode 100644 index 00000000000..b585e52f760 --- /dev/null +++ b/src/app/showcase/pages/landing/herosection.component.ts @@ -0,0 +1,224 @@ +import { Component } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { InputNumberModule } from 'primeng/inputnumber'; +import { RouterModule } from '@angular/router'; +import { DropdownModule } from 'primeng/dropdown'; +import { RadioButtonModule } from 'primeng/radiobutton'; +import { CalendarModule } from 'primeng/calendar'; +import { ChartModule } from 'primeng/chart'; +import { ChipModule } from 'primeng/chip'; +import { InputSwitchModule } from 'primeng/inputswitch'; +import { SelectButtonModule } from 'primeng/selectbutton'; +import { SliderModule } from 'primeng/slider'; +import { BadgeModule } from 'primeng/badge'; +import { TabMenuModule } from 'primeng/tabmenu'; +import { FormsModule } from '@angular/forms'; +import { MenuItem, SelectItem } from 'primeng/api'; + +@Component({ + selector: 'template-hero', + standalone: true, + imports: [CommonModule, RouterModule, InputNumberModule, DropdownModule, RadioButtonModule, CalendarModule, ChartModule, ChipModule, InputSwitchModule, SelectButtonModule, SliderModule, BadgeModule, TabMenuModule, FormsModule], + template: ` +
+
+
+

The Most Complete UI Suite for Angular.js

+

+ Elevate your web applications with PrimeNG's comprehensive suite of customizable, feature-rich UI components. With PrimeNG, turning your development vision into reality has never been easier. +

+
+ + Get Started + + + + Give a Star + + +
+
+ +
+
+ ` +}) +export class HeroSectionComponent { + value1: number = 24; + + radioValue: string = 'S'; + + dateValue: Date; + + switchValue: boolean = true; + + chartData: any; + + chartOptions: any; + + selectButtonValue: SelectItem; + + selectButtonOptions: SelectItem[]; + + user: any = null; + + users: any[]; + + items: MenuItem[]; + + rangeValues = [20, 80]; + + ngOnInit() { + this.chartData = { + labels: ['Q1', 'Q2', 'Q3', 'Q4'], + datasets: [ + { + label: 'Annual Income', + data: [40, 59, 40, 50, 56], + fill: true, + borderColor: '#3b82f6', + tension: 0.4, + backgroundColor: 'rgba(59, 130, 246, .2)' + } + ] + }; + + this.chartOptions = { + plugins: { + legend: { + display: false + } + }, + scales: { + y: { + beginAtZero: true, + + min: 0, + max: 100 + } + } + }; + + (this.selectButtonValue = { label: 'Styled', value: 1 }), + (this.selectButtonOptions = [ + { label: 'Styled', value: 1 }, + { label: 'Unstyled', value: 2 } + ]); + + this.items = [ + { label: 'Home', icon: 'pi pi-fw pi-home' }, + { label: 'Calendar', icon: 'pi pi-fw pi-calendar' } + ]; + this.users = [ + { name: 'Amy Elsner', image: 'amyelsner.png' }, + { name: 'Bernardo Dominic', image: 'bernardodominic.png' }, + { name: 'Onyama Limba', image: 'onyamalimba.png' } + ] + + } + + +} diff --git a/src/app/showcase/pages/landing/landing.component.html b/src/app/showcase/pages/landing/landing.component.html index 5a3d7958037..3ea123afdea 100644 --- a/src/app/showcase/pages/landing/landing.component.html +++ b/src/app/showcase/pages/landing/landing.component.html @@ -2,1030 +2,12 @@ -
-
-
-

The Most Complete UI Suite for Angular.js

-

- Elevate your web applications with PrimeNG's comprehensive suite of customizable, feature-rich UI components. With PrimeNG, turning your development vision into reality has never been easier. -

-
- - Get Started - - - - Give a Star - - -
-
- -
-
- -
-
Features
-

PrimeNG is the most complete solution for your UI requirements.

-
-
-
-
-
- components icon -
90+ UI Components
-

The ultimate set of UI Components to assist you with 90+ impressive Angular Components.

-
-
-
-
- components icon -
Community
-

Connect with the other open source community members, collaborate and have a voice in the project roadmap.

-
-
-
-
- components icon -
Productivity
-

Boost your productivity by achieving more in less time and accomplish amazing results.

-
-
-
-
- components icon -
Accessibility
-

The ultimate set of UI Components to assist you with 90+ impressive Angular Components.

-
-
-
-
- components icon -
Enterprise Support
-

Exceptional support service featuring response within 1 business day and option to request enhancements and new features for the library.

-
-
-
-
- components icon -
Mobile
-

First class support for responsive design led by touch optimized elements.

-
-
-
-
- components icon -
Themes
-

Built on a design-agnostic api, choose from a vast amount of themes such as Material, Bootstrap, custom or develop your own.

-
-
-
-
- components icon -
Typescript
-

Top-notch support for Typescript with types and tooling assistance.

-
-
-
-
-
-
- -
-
Who Uses
-

- PrimeTek libraries have reached over150 Million Downloadson npm! Join the PrimeLand community and experience the difference yourself. -

-
-
-
-
-
- -
-
-
-
- -
-
-
-
- -
-
-
-
-
-
-
-
-
-
- -
-
-
-
- -
-
-
-
- -
-
-
-
-
-
- -
-
Themes
-

Crafted on a design-agnostic infrastructure, choose from a vast amount of themes such as Material, Bootstrap, Tailwind, PrimeOne or develop your own.

-
- - - - more... -
-
-
- - -
-
Customers
- - - - -
- - - - - - - -
- Name - -
- - -
- Country - -
- - -
- Agent - -
- - -
- Date - -
- - -
- Balance - -
- - -
- Status - -
- - -
- Activity - -
- - - - - - - - - - - Name - {{ customer.name }} - - - Country - country flag - {{ customer.country.name }} - - - Representative - representative - {{ customer.representative.name }} - - - Date - {{ customer.date | date : 'MM/dd/yyyy' }} - - - Balance - {{ customer.balance | currency : 'USD' : 'symbol' }} - - - - - - Activity - - - - - - - - - - No customers found. - - - -
-
-
- -
-
PrimeBlocks
-

400+ ready to copy-paste UI blocks to build spectacular applications in no time.

-
- - Explore All - - -
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 26 % -
-
-
-
- 6 % -
-
-
-
- 62 % -
-
-
-
- 39 % -
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- question mark -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
Templates
-

Professionally designed highly customizable application templates to get started in style.

-
- - Explore All - - -
-
-
-
- Verona Preview -
-
- Freya Preview -
-
-
-
- Atlantis Preview -
- -
- Apollo Preview -
-
-
-
- Diamond Preview -
-
- Ultima Preview -
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
-
- -
-
-
-
- -
-
- -
-
- -
-
- -
-
- -
- -
- - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - -
-
-
-
+ + + + + + + + diff --git a/src/app/showcase/pages/landing/landing.component.ts b/src/app/showcase/pages/landing/landing.component.ts index 6e7d462f29f..3a416955b5b 100644 --- a/src/app/showcase/pages/landing/landing.component.ts +++ b/src/app/showcase/pages/landing/landing.component.ts @@ -1,10 +1,8 @@ import { CommonModule, DOCUMENT, NgOptimizedImage, isPlatformBrowser } from '@angular/common'; import { ChangeDetectorRef, Component, ElementRef, Inject, OnInit, PLATFORM_ID, ViewChild } from '@angular/core'; -import { FormsModule } from '@angular/forms'; import { Meta, Title } from '@angular/platform-browser'; import { RouterModule } from '@angular/router'; import docsearch from '@docsearch/js'; -import { MenuItem, SelectItem } from 'primeng/api'; import { BadgeModule } from 'primeng/badge'; import { ButtonModule } from 'primeng/button'; import { CalendarModule } from 'primeng/calendar'; @@ -17,16 +15,22 @@ import { ProgressBarModule } from 'primeng/progressbar'; import { RadioButtonModule } from 'primeng/radiobutton'; import { SelectButtonModule } from 'primeng/selectbutton'; import { SliderModule } from 'primeng/slider'; -import { Table, TableModule } from 'primeng/table'; +import { TableModule } from 'primeng/table'; import { TabMenuModule } from 'primeng/tabmenu'; import Versions from '../../data/versions.json'; -import { Customer } from '../../domain/customer'; import { AppComponent } from '../../layout/app.component'; import { AppNewsComponent } from '../../layout/news/app.news.component'; import { AppTopBarComponent } from '../../layout/topbar/app.topbar.component'; import { AppConfigService } from '../../service/appconfigservice'; -import { CustomerService } from '../../service/customerservice'; import { DropdownModule } from 'primeng/dropdown'; +import { HeroSectionComponent } from './herosection.component'; +import { FeaturesSectionComponent } from './featuressection.component'; +import { UsersSectionComponent } from './userssection.component'; +import { ThemeSectionComponent } from './themesection.component'; +import { BlockSectionComponent } from './blocksection.component'; +import { TemplateSectionComponent } from './templatesection.component'; +import { FooterSectionComponent } from './footersection.component'; + @Component({ selector: 'landing', standalone: true, @@ -34,7 +38,6 @@ import { DropdownModule } from 'primeng/dropdown'; imports: [ CommonModule, NgOptimizedImage, - FormsModule, InputSwitchModule, ButtonModule, RadioButtonModule, @@ -52,50 +55,25 @@ import { DropdownModule } from 'primeng/dropdown'; CheckboxModule, DropdownModule, AppNewsComponent, - AppTopBarComponent - ] + AppTopBarComponent, + HeroSectionComponent, + FeaturesSectionComponent, + UsersSectionComponent, + ThemeSectionComponent, + BlockSectionComponent, + TemplateSectionComponent, + FooterSectionComponent + ], }) export class LandingComponent implements OnInit { @ViewChild('containerElement') containerElement: ElementRef; - @ViewChild('dt') table: Table; - @ViewChild('editor') editor: ElementRef; versions: any[] = Versions; scrollListener: any; - chartData: any; - - chartOptions: any; - - items: MenuItem[]; - - selectButtonValue: SelectItem; - - selectButtonOptions: SelectItem[]; - - value1: number = 24; - - value2: number = 356; - - radioValue: string = 'S'; - - switchValue: boolean = true; - - selectedVal: number = 1; - - rangeValues = [20, 80]; - - dateValue: Date; - - customers: Customer[]; - - selectedCustomers: Customer[]; - - loading: boolean = true; - tableTheme: string = 'lara-light-blue'; isNpmCopied: boolean = false; @@ -139,7 +117,6 @@ export class LandingComponent implements OnInit { constructor( @Inject(DOCUMENT) private document: Document, @Inject(PLATFORM_ID) private platformId: any, - private customerService: CustomerService, private configService: AppConfigService, private cd: ChangeDetectorRef, public app: AppComponent, @@ -154,58 +131,6 @@ export class LandingComponent implements OnInit { this.metaService.updateTag({ name: 'description', content: 'The ultimate collection of design-agnostic, flexible and accessible Angular UI Components.' }); this.changeTableTheme(this.configService.config.darkMode ? 'lara-dark-blue' : 'lara-light-blue'); - this.chartData = { - labels: ['Q1', 'Q2', 'Q3', 'Q4'], - datasets: [ - { - label: 'Annual Income', - data: [40, 59, 40, 50, 56], - fill: true, - borderColor: '#3b82f6', - tension: 0.4, - backgroundColor: 'rgba(59, 130, 246, .2)' - } - ] - }; - - this.chartOptions = { - plugins: { - legend: { - display: false - } - }, - scales: { - y: { - beginAtZero: true, - - min: 0, - max: 100 - } - } - }; - - (this.selectButtonValue = { label: 'Styled', value: 1 }), - (this.selectButtonOptions = [ - { label: 'Styled', value: 1 }, - { label: 'Unstyled', value: 2 } - ]); - - this.items = [ - { label: 'Home', icon: 'pi pi-fw pi-home' }, - { label: 'Calendar', icon: 'pi pi-fw pi-calendar' } - ]; - - this.customerService.getCustomersLarge().then((customers) => { - this.customers = customers; - this.loading = false; - }); - - this.users = [ - { name: 'Amy Elsner', image: 'amyelsner.png' }, - { name: 'Bernardo Dominic', image: 'bernardodominic.png' }, - { name: 'Onyama Limba', image: 'onyamalimba.png' } - ] - if (isPlatformBrowser(this.platformId)) { this.initDocSearch(); } @@ -286,22 +211,5 @@ export class LandingComponent implements OnInit { } } - getSeverity(status) { - switch (status) { - case 'unqualified': - return 'danger'; - - case 'qualified': - return 'success'; - - case 'new': - return 'info'; - - case 'negotiation': - return 'warning'; - - case 'renewal': - return null; - } - } + } diff --git a/src/app/showcase/pages/landing/templatesection.component.ts b/src/app/showcase/pages/landing/templatesection.component.ts new file mode 100644 index 00000000000..a0386e7362c --- /dev/null +++ b/src/app/showcase/pages/landing/templatesection.component.ts @@ -0,0 +1,145 @@ +import { Component } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { AppConfigService } from '../../service/appconfigservice'; + +@Component({ + selector: 'template-templates', + standalone: true, + imports: [CommonModule], + template: ` +
+
Templates
+

Professionally designed highly customizable application templates to get started in style.

+
+ + Explore All + + +
+
+
+
+ Verona Preview +
+
+ Freya Preview +
+
+
+
+ Atlantis Preview +
+ +
+ Apollo Preview +
+
+
+
+ Diamond Preview +
+
+ Ultima Preview +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+ ` +}) +export class TemplateSectionComponent { + constructor(private configService: AppConfigService) {} + + get isDarkMode() { + return this.configService.config.darkMode; + } +} diff --git a/src/app/showcase/pages/landing/themesection.component.ts b/src/app/showcase/pages/landing/themesection.component.ts new file mode 100644 index 00000000000..671d5041c1d --- /dev/null +++ b/src/app/showcase/pages/landing/themesection.component.ts @@ -0,0 +1,241 @@ +import { Component, Inject, PLATFORM_ID, ViewChild } from '@angular/core'; +import { CommonModule, isPlatformBrowser } from '@angular/common'; +import { Customer } from '../../domain/customer'; +import { CustomerService } from '../../service/customerservice'; +import { AppConfigService } from '../../service/appconfigservice'; +import { AppComponent } from '../../layout/app.component'; +import { TableModule } from 'primeng/table'; +import { Table } from 'primeng/table'; +import { ButtonModule } from 'primeng/button'; +import { TagModule } from 'primeng/tag'; +@Component({ + selector: 'template-theme', + standalone: true, + imports: [CommonModule, TableModule, ButtonModule, TagModule], + template: ` +
+
Themes
+

Crafted on a design-agnostic infrastructure, choose from a vast amount of themes such as Material, Bootstrap, Tailwind, PrimeOne or develop your own.

+
+ + + + more... +
+
+
+ + +
+
Customers
+ + + + +
+ + + + + + + +
+ Name + +
+ + +
+ Country + +
+ + +
+ Agent + +
+ + +
+ Date + +
+ + +
+ Balance + +
+ + +
+ Status + +
+ + +
+ Activity + +
+ + + + + + + + + + + Name + {{ customer.name }} + + + Country + country flag + {{ customer.country.name }} + + + Representative + representative + {{ customer.representative.name }} + + + Date + {{ customer.date | date : 'MM/dd/yyyy' }} + + + Balance + {{ customer.balance | currency : 'USD' : 'symbol' }} + + + + + + Activity + + + + + + + + + + No customers found. + + + +
+
+
+ ` +}) +export class ThemeSectionComponent { + constructor( @Inject(PLATFORM_ID) private platformId: any, private customerService: CustomerService, private configService: AppConfigService, public app: AppComponent) { + + } + + @ViewChild('dt') table: Table; + + tableTheme: string = 'lara-light-blue'; + + customers: Customer[]; + + selectedCustomers: Customer[]; + + loading: boolean = true; + + + + get isDarkMode() { + return this.configService.config.darkMode; + } + + changeTableTheme(value: string) { + if (isPlatformBrowser(this.platformId)) { + this.replaceTableTheme(value); + } + } + replaceTableTheme(newTheme: string) { + const elementId = 'home-table-link'; + const linkElement = document.getElementById(elementId); + const tableThemeTokens = linkElement?.getAttribute('href').split('/') || null; + const currentTableTheme = tableThemeTokens ? tableThemeTokens[tableThemeTokens.length - 2] : null; + + if (currentTableTheme !== newTheme && tableThemeTokens) { + const newThemeUrl = linkElement.getAttribute('href').replace(currentTableTheme, newTheme); + + const cloneLinkElement = linkElement.cloneNode(true); + + cloneLinkElement.setAttribute('id', elementId + '-clone'); + cloneLinkElement.setAttribute('href', newThemeUrl); + cloneLinkElement.addEventListener('load', () => { + linkElement.remove(); + cloneLinkElement.setAttribute('id', elementId); + }); + linkElement.parentNode?.insertBefore(cloneLinkElement, linkElement.nextSibling); + + this.tableTheme = newTheme; + } + } + + ngOnInit() { + this.changeTableTheme(this.configService.config.darkMode ? 'lara-dark-blue' : 'lara-light-blue'); + + this.customerService.getCustomersLarge().then((customers) => { + this.customers = customers; + this.loading = false; + }); + } + + getSeverity(status) { + switch (status) { + case 'unqualified': + return 'danger'; + + case 'qualified': + return 'success'; + + case 'new': + return 'info'; + + case 'negotiation': + return 'warning'; + + case 'renewal': + return null; + } + } +} diff --git a/src/app/showcase/pages/landing/userssection.component.ts b/src/app/showcase/pages/landing/userssection.component.ts new file mode 100644 index 00000000000..7411b43c8d0 --- /dev/null +++ b/src/app/showcase/pages/landing/userssection.component.ts @@ -0,0 +1,77 @@ +import { Component } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +@Component({ + selector: 'template-users', + standalone: true, + imports: [CommonModule], + template: ` +
+
Who Uses
+

+ PrimeTek libraries have reached over150 Million Downloadson npm! Join the PrimeLand community and experience the difference yourself. +

+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+ ` +}) +export class UsersSectionComponent { + + usersData = [ + { name: 'fox', width: '51', height: '22' }, + { name: 'airbus', width: '87', height: '16' }, + { name: 'mercedes', width: '34', height: '34' }, + { name: 'ford', width: '64', height: '26' }, + { name: 'vw', width: '35', height: '34' }, + { name: 'intel', width: '53', height: '34' }, + { name: 'unicredit', width: '79', height: '18' }, + { name: 'lufthansa', width: '97', height: '18' }, + { name: 'nvidia', width: '86', height: '16' }, + { name: 'verizon', width: '102', height: '18' }, + { name: 'amex', width: '81', height: '30' } +]; + + +}