angular-techs-logos 0.1.3 → 0.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,11 +1,17 @@
|
|
|
1
1
|
import { Component, Input, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
|
|
2
2
|
import { techs } from './techs/techs-data';
|
|
3
|
+
import { signal } from '@angular/core'; // Importe signal do Angular Core
|
|
3
4
|
import * as i0 from "@angular/core";
|
|
4
5
|
import * as i1 from "@angular/common";
|
|
5
6
|
export class AngularTechsLogosComponent {
|
|
6
7
|
constructor(cdr) {
|
|
7
8
|
this.cdr = cdr;
|
|
8
9
|
this.techs = techs;
|
|
10
|
+
// Declare sinais reativos para list e hiddenLogos
|
|
11
|
+
this.listSignal = signal([]);
|
|
12
|
+
this.hiddenLogosSignal = signal([]);
|
|
13
|
+
// Sinal para a lista dinâmica de techs a ser exibida no template
|
|
14
|
+
this.techsList = signal(this.techs);
|
|
9
15
|
}
|
|
10
16
|
ngOnInit() {
|
|
11
17
|
if (!this.name) {
|
|
@@ -13,19 +19,26 @@ export class AngularTechsLogosComponent {
|
|
|
13
19
|
}
|
|
14
20
|
}
|
|
15
21
|
ngOnChanges(changes) {
|
|
16
|
-
|
|
17
|
-
|
|
22
|
+
// Atualize os sinais com os novos valores dos inputs
|
|
23
|
+
if (changes['list']) {
|
|
24
|
+
this.listSignal.set(this.list);
|
|
25
|
+
}
|
|
26
|
+
if (changes['hiddenLogos']) {
|
|
27
|
+
this.hiddenLogosSignal.set(this.hiddenLogos);
|
|
18
28
|
}
|
|
19
29
|
}
|
|
20
30
|
updateTechs() {
|
|
21
|
-
|
|
22
|
-
|
|
31
|
+
// Use os sinais para atualizar dinamicamente a lista de techs
|
|
32
|
+
const currentList = this.listSignal();
|
|
33
|
+
const currentHiddenLogos = this.hiddenLogosSignal();
|
|
34
|
+
if (currentList && currentList.length > 0) {
|
|
35
|
+
this.techsList.set(this.getTechs(currentList));
|
|
23
36
|
}
|
|
24
|
-
else if (
|
|
25
|
-
this.
|
|
37
|
+
else if (currentHiddenLogos && currentHiddenLogos.length > 0) {
|
|
38
|
+
this.techsList.set(this.hiddenTechs(currentHiddenLogos));
|
|
26
39
|
}
|
|
27
40
|
else {
|
|
28
|
-
this.techs
|
|
41
|
+
this.techsList.set(techs); // Volte para o valor inicial se nenhum sinal estiver definido
|
|
29
42
|
}
|
|
30
43
|
}
|
|
31
44
|
techClass(name) {
|
|
@@ -33,10 +46,10 @@ export class AngularTechsLogosComponent {
|
|
|
33
46
|
return [this.class || '', className];
|
|
34
47
|
}
|
|
35
48
|
getTech(name) {
|
|
36
|
-
return this.
|
|
49
|
+
return this.techsList().find(item => item.name.toLowerCase() === name.toLowerCase());
|
|
37
50
|
}
|
|
38
51
|
getTechs(items) {
|
|
39
|
-
return this.
|
|
52
|
+
return this.techsList().filter(tech => {
|
|
40
53
|
if (typeof tech.name !== 'string')
|
|
41
54
|
return false;
|
|
42
55
|
return items.some(item => {
|
|
@@ -47,18 +60,18 @@ export class AngularTechsLogosComponent {
|
|
|
47
60
|
});
|
|
48
61
|
}
|
|
49
62
|
hiddenTechs(items) {
|
|
50
|
-
return this.
|
|
63
|
+
return this.techsList().filter(tech => !items.includes(tech.name.toLowerCase()));
|
|
51
64
|
}
|
|
52
65
|
getIcon(name) {
|
|
53
66
|
const tech = this.getTech(name);
|
|
54
67
|
return tech ? tech.icon : null;
|
|
55
68
|
}
|
|
56
69
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: AngularTechsLogosComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
57
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.6", type: AngularTechsLogosComponent, selector: "angular-techs-logos", inputs: { list: "list", name: "name", size: "size", label: "label", hiddenLabel: "hiddenLabel", class: "class", hiddenLogos: "hiddenLogos" }, viewQueries: [{ propertyName: "iconContainer", first: true, predicate: ["iconContainer"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"techs\" [ngClass]=\"class\">\n <ng-container *ngIf=\"name && getTech(name) && !list\">\n <figure\n class=\"tech-container\"\n [ngClass]=\"techClass(name)\"\n [style.width]=\"size ? size : '100px'\"\n >\n <ng-container *ngComponentOutlet=\"getIcon(name)\" />\n <figcaption [ngClass]=\"{ tooltip: hiddenLabel }\">\n {{ label ? label : getTech(name)?.name }}\n </figcaption>\n </figure>\n </ng-container>\n <ng-container *ngIf=\"!name && (list ||
|
|
70
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.6", type: AngularTechsLogosComponent, selector: "angular-techs-logos", inputs: { list: "list", name: "name", size: "size", label: "label", hiddenLabel: "hiddenLabel", class: "class", hiddenLogos: "hiddenLogos" }, viewQueries: [{ propertyName: "iconContainer", first: true, predicate: ["iconContainer"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"techs\" [ngClass]=\"class\">\n <ng-container *ngIf=\"name && getTech(name) && !list\">\n <figure\n class=\"tech-container\"\n [ngClass]=\"techClass(name)\"\n [style.width]=\"size ? size : '100px'\"\n >\n <ng-container *ngComponentOutlet=\"getIcon(name)\" />\n <figcaption [ngClass]=\"{ tooltip: hiddenLabel }\">\n {{ label ? label : getTech(name)?.name }}\n </figcaption>\n </figure>\n </ng-container>\n <ng-container *ngIf=\"!name && (list || techsList)\">\n <figure\n class=\"tech-container\"\n *ngFor=\"let tech of techsList()\"\n [ngClass]=\"[tech.name.toLowerCase()]\"\n [style.width]=\"size ? size : '100px'\"\n [attr.key]=\"tech.name\"\n >\n <ng-container *ngComponentOutlet=\"getIcon(tech.name)\" />\n <figcaption [ngClass]=\"{ tooltip: hiddenLabel }\">\n {{ tech.name }}\n </figcaption>\n </figure>\n </ng-container>\n</div>\n", styles: [".techs{display:flex;flex-wrap:wrap;align-items:center;justify-content:center}.techs .title{width:100%;text-align:center;margin-top:2rem}figure.tech-container{background:transparent;border:1px solid var(--vtl-background);border-radius:100px;width:120px!important;height:120px;text-align:center;display:flex;align-items:center;justify-content:center;flex-direction:column;transition:.3s all}figure.tech-container:hover{background:var(--vtl-background);border-color:var(--vtl-background);transform:scale(1.1)}figure.tech-container svg{height:50px;margin-bottom:.2rem}figure{position:relative;text-align:center;margin:.2rem}figure figcaption{font-size:.7rem}figure figcaption.tooltip{position:absolute;bottom:2%;background:var(--vtl-background-tooltip);box-shadow:0 4px 10px var(--vtl-shadow-tooltip);padding:.2rem .5rem;border-radius:5px;pointer-events:none;opacity:0;transition:.3s all;color:#fff}figure:hover figcaption.tooltip{opacity:1;pointer-events:all}body{--vtl-background: rgba(0,0,0, .05);--vtl-background-tooltip: #444;--vtl-shadow-tooltip: rgba(0,0,0,.2);--vtl-text: #000;--vtl-background-svg: #000;--vtl-background-svg-invert: #fff;--vtl-background-gradient: linear-gradient(228deg, rgba(238,238,238,1) 0%, rgba(255,255,255,1) 60%)}body.darkmode{--vtl-background: rgba(0,0,0, .5);--vtl-background-tooltip: #444;--vtl-shadow-tooltip: rgba(0,0,0,.2);--vtl-text: #fff;--vtl-background-svg: #fff;--vtl-background-svg-invert: #000;--vtl-background-gradient: linear-gradient(228deg, rgb(24, 24, 24) 0%, rgb(38, 38, 38) 60%)}@media (prefers-color-scheme: light){:root{--vtl-background: rgba(0,0,0, .05);--vtl-background-tooltip: #444;--vtl-shadow-tooltip: rgba(0,0,0,.2);--vtl-text: #000;--vtl-background-svg: #000;--vtl-background-svg-invert: #fff;--vtl-background-gradient: linear-gradient(228deg, rgba(238,238,238,1) 0%, rgba(255,255,255,1) 60%)}}@media (prefers-color-scheme: dark){:root{--vtl-background: rgba(0,0,0, .5);--vtl-background-tooltip: #444;--vtl-shadow-tooltip: rgba(0,0,0,.2);--vtl-text: #fff;--vtl-background-svg: #fff;--vtl-background-svg-invert: #000;--vtl-background-gradient: linear-gradient(228deg, rgb(24, 24, 24) 0%, rgb(38, 38, 38) 60%)}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
58
71
|
}
|
|
59
72
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: AngularTechsLogosComponent, decorators: [{
|
|
60
73
|
type: Component,
|
|
61
|
-
args: [{ selector: 'angular-techs-logos', encapsulation: ViewEncapsulation.None, template: "<div class=\"techs\" [ngClass]=\"class\">\n <ng-container *ngIf=\"name && getTech(name) && !list\">\n <figure\n class=\"tech-container\"\n [ngClass]=\"techClass(name)\"\n [style.width]=\"size ? size : '100px'\"\n >\n <ng-container *ngComponentOutlet=\"getIcon(name)\" />\n <figcaption [ngClass]=\"{ tooltip: hiddenLabel }\">\n {{ label ? label : getTech(name)?.name }}\n </figcaption>\n </figure>\n </ng-container>\n <ng-container *ngIf=\"!name && (list ||
|
|
74
|
+
args: [{ selector: 'angular-techs-logos', encapsulation: ViewEncapsulation.None, template: "<div class=\"techs\" [ngClass]=\"class\">\n <ng-container *ngIf=\"name && getTech(name) && !list\">\n <figure\n class=\"tech-container\"\n [ngClass]=\"techClass(name)\"\n [style.width]=\"size ? size : '100px'\"\n >\n <ng-container *ngComponentOutlet=\"getIcon(name)\" />\n <figcaption [ngClass]=\"{ tooltip: hiddenLabel }\">\n {{ label ? label : getTech(name)?.name }}\n </figcaption>\n </figure>\n </ng-container>\n <ng-container *ngIf=\"!name && (list || techsList)\">\n <figure\n class=\"tech-container\"\n *ngFor=\"let tech of techsList()\"\n [ngClass]=\"[tech.name.toLowerCase()]\"\n [style.width]=\"size ? size : '100px'\"\n [attr.key]=\"tech.name\"\n >\n <ng-container *ngComponentOutlet=\"getIcon(tech.name)\" />\n <figcaption [ngClass]=\"{ tooltip: hiddenLabel }\">\n {{ tech.name }}\n </figcaption>\n </figure>\n </ng-container>\n</div>\n", styles: [".techs{display:flex;flex-wrap:wrap;align-items:center;justify-content:center}.techs .title{width:100%;text-align:center;margin-top:2rem}figure.tech-container{background:transparent;border:1px solid var(--vtl-background);border-radius:100px;width:120px!important;height:120px;text-align:center;display:flex;align-items:center;justify-content:center;flex-direction:column;transition:.3s all}figure.tech-container:hover{background:var(--vtl-background);border-color:var(--vtl-background);transform:scale(1.1)}figure.tech-container svg{height:50px;margin-bottom:.2rem}figure{position:relative;text-align:center;margin:.2rem}figure figcaption{font-size:.7rem}figure figcaption.tooltip{position:absolute;bottom:2%;background:var(--vtl-background-tooltip);box-shadow:0 4px 10px var(--vtl-shadow-tooltip);padding:.2rem .5rem;border-radius:5px;pointer-events:none;opacity:0;transition:.3s all;color:#fff}figure:hover figcaption.tooltip{opacity:1;pointer-events:all}body{--vtl-background: rgba(0,0,0, .05);--vtl-background-tooltip: #444;--vtl-shadow-tooltip: rgba(0,0,0,.2);--vtl-text: #000;--vtl-background-svg: #000;--vtl-background-svg-invert: #fff;--vtl-background-gradient: linear-gradient(228deg, rgba(238,238,238,1) 0%, rgba(255,255,255,1) 60%)}body.darkmode{--vtl-background: rgba(0,0,0, .5);--vtl-background-tooltip: #444;--vtl-shadow-tooltip: rgba(0,0,0,.2);--vtl-text: #fff;--vtl-background-svg: #fff;--vtl-background-svg-invert: #000;--vtl-background-gradient: linear-gradient(228deg, rgb(24, 24, 24) 0%, rgb(38, 38, 38) 60%)}@media (prefers-color-scheme: light){:root{--vtl-background: rgba(0,0,0, .05);--vtl-background-tooltip: #444;--vtl-shadow-tooltip: rgba(0,0,0,.2);--vtl-text: #000;--vtl-background-svg: #000;--vtl-background-svg-invert: #fff;--vtl-background-gradient: linear-gradient(228deg, rgba(238,238,238,1) 0%, rgba(255,255,255,1) 60%)}}@media (prefers-color-scheme: dark){:root{--vtl-background: rgba(0,0,0, .5);--vtl-background-tooltip: #444;--vtl-shadow-tooltip: rgba(0,0,0,.2);--vtl-text: #fff;--vtl-background-svg: #fff;--vtl-background-svg-invert: #000;--vtl-background-gradient: linear-gradient(228deg, rgb(24, 24, 24) 0%, rgb(38, 38, 38) 60%)}}\n"] }]
|
|
62
75
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { list: [{
|
|
63
76
|
type: Input
|
|
64
77
|
}], name: [{
|
|
@@ -77,4 +90,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
|
|
|
77
90
|
type: ViewChild,
|
|
78
91
|
args: ['iconContainer', { read: ViewContainerRef }]
|
|
79
92
|
}] } });
|
|
80
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
93
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYW5ndWxhci10ZWNocy1sb2dvcy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyLXRlY2hzLWxvZ29zL3NyYy9saWIvYW5ndWxhci10ZWNocy1sb2dvcy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyLXRlY2hzLWxvZ29zL3NyYy9saWIvYW5ndWxhci10ZWNocy1sb2dvcy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsU0FBUyxFQUNULEtBQUssRUFJTCxTQUFTLEVBQ1QsZ0JBQWdCLEVBRWhCLGlCQUFpQixFQUVsQixNQUFNLGVBQWUsQ0FBQztBQUV2QixPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFDM0MsT0FBTyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQyxDQUFDLGlDQUFpQzs7O0FBYXpFLE1BQU0sT0FBTywwQkFBMEI7SUFvQnJDLFlBQ1UsR0FBc0I7UUFBdEIsUUFBRyxHQUFILEdBQUcsQ0FBbUI7UUFWaEMsVUFBSyxHQUFXLEtBQUssQ0FBQztRQUV0QixrREFBa0Q7UUFDbEQsZUFBVSxHQUFHLE1BQU0sQ0FBdUIsRUFBRSxDQUFDLENBQUM7UUFDOUMsc0JBQWlCLEdBQUcsTUFBTSxDQUF1QixFQUFFLENBQUMsQ0FBQztRQUVyRCxpRUFBaUU7UUFDakUsY0FBUyxHQUFHLE1BQU0sQ0FBUyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFJcEMsQ0FBQztJQUVKLFFBQVE7UUFDTixJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksRUFBRSxDQUFDO1lBQ2YsSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDO1FBQ3JCLENBQUM7SUFDSCxDQUFDO0lBRUQsV0FBVyxDQUFDLE9BQXNCO1FBQ2hDLHFEQUFxRDtRQUNyRCxJQUFJLE9BQU8sQ0FBQyxNQUFNLENBQUMsRUFBRSxD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QkFHaEIsaUJBQWlCLENBQUMsSUFBSTtzRkFHNUIsSUFBSTtzQkFBWixLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBRWtELGFBQWE7c0JBQXBFLFNBQVM7dUJBQUMsZUFBZSxFQUFFLEVBQUUsSUFBSSxFQUFFLGdCQUFnQixFQUFFIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBJbnB1dCxcbiAgT25Jbml0LFxuICBPbkNoYW5nZXMsXG4gIFNpbXBsZUNoYW5nZXMsXG4gIFZpZXdDaGlsZCxcbiAgVmlld0NvbnRhaW5lclJlZixcbiAgVHlwZSxcbiAgVmlld0VuY2Fwc3VsYXRpb24sXG4gIENoYW5nZURldGVjdG9yUmVmXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5pbXBvcnQgeyB0ZWNocyB9IGZyb20gJy4vdGVjaHMvdGVjaHMtZGF0YSc7XG5pbXBvcnQgeyBzaWduYWwgfSBmcm9tICdAYW5ndWxhci9jb3JlJzsgLy8gSW1wb3J0ZSBzaWduYWwgZG8gQW5ndWxhciBDb3JlXG5cbmludGVyZmFjZSBUZWNoIHtcbiAgbmFtZTogc3RyaW5nO1xuICBpY29uOiBUeXBlPGFueT47XG59XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2FuZ3VsYXItdGVjaHMtbG9nb3MnLFxuICB0ZW1wbGF0ZVVybDogJy4vYW5ndWxhci10ZWNocy1sb2dvcy5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2FuZ3VsYXItdGVjaHMtbG9nb3MuY29tcG9uZW50LnNjc3MnXSxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbn0pXG5leHBvcnQgY2xhc3MgQW5ndWxhclRlY2hzTG9nb3NDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIE9uQ2hhbmdlcyB7XG4gIEBJbnB1dCgpIGxpc3Q6IHN0cmluZ1tdIHwgdW5kZWZpbmVkO1xuICBASW5wdXQoKSBuYW1lOiBzdHJpbmcgfCB1bmRlZmluZWQ7XG4gIEBJbnB1dCgpIHNpemU6IHN0cmluZyB8IHVuZGVmaW5lZDtcbiAgQElucHV0KCkgbGFiZWw6IHN0cmluZyB8IHVuZGVmaW5lZDtcbiAgQElucHV0KCkgaGlkZGVuTGFiZWw6IGJvb2xlYW4gfCB1bmRlZmluZWQ7XG4gIEBJbnB1dCgpIGNsYXNzOiBzdHJpbmcgfCB1bmRlZmluZWQ7XG4gIEBJbnB1dCgpIGhpZGRlbkxvZ29zOiBzdHJpbmdbXSB8IHVuZGVmaW5lZDtcblxuICBAVmlld0NoaWxkKCdpY29uQ29udGFpbmVyJywgeyByZWFkOiBWaWV3Q29udGFpbmVyUmVmIH0pIGljb25Db250YWluZXIhOiBWaWV3Q29udGFpbmVyUmVmO1xuXG4gIHRlY2hzOiBUZWNoW10gPSB0ZWNocztcblxuICAvLyBEZWNsYXJlIHNpbmFpcyByZWF0aXZvcyBwYXJhIGxpc3QgZSBoaWRkZW5Mb2dvc1xuICBsaXN0U2lnbmFsID0gc2lnbmFsPHN0cmluZ1tdIHwgdW5kZWZpbmVkPihbXSk7XG4gIGhpZGRlbkxvZ29zU2lnbmFsID0gc2lnbmFsPHN0cmluZ1tdIHwgdW5kZWZpbmVkPihbXSk7XG5cbiAgLy8gU2luYWwgcGFyYSBhIGxpc3RhIGRpbsOibWljYSBkZSB0ZWNocyBhIHNlciBleGliaWRhIG5vIHRlbXBsYXRlXG4gIHRlY2hzTGlzdCA9IHNpZ25hbDxUZWNoW10+KHRoaXMudGVjaHMpO1xuXG4gIGNvbnN0cnVjdG9yKFxuICAgIHByaXZhdGUgY2RyOiBDaGFuZ2VEZXRlY3RvclJlZlxuICApIHt9XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgaWYgKCF0aGlzLm5hbWUpIHtcbiAgICAgIHRoaXMudXBkYXRlVGVjaHMoKTtcbiAgICB9XG4gIH1cblxuICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKTogdm9pZCB7XG4gICAgLy8gQXR1YWxpemUgb3Mgc2luYWlzIGNvbSBvcyBub3ZvcyB2YWxvcmVzIGRvcyBpbnB1dHNcbiAgICBpZiAoY2hhbmdlc1snbGlzdCddKSB7XG4gICAgICB0aGlzLmxpc3RTaWduYWwuc2V0KHRoaXMubGlzdCk7XG4gICAgfVxuICAgIGlmIChjaGFuZ2VzWydoaWRkZW5Mb2dvcyddKSB7XG4gICAgICB0aGlzLmhpZGRlbkxvZ29zU2lnbmFsLnNldCh0aGlzLmhpZGRlbkxvZ29zKTtcbiAgICB9XG4gIH1cblxuICBwcml2YXRlIHVwZGF0ZVRlY2hzKCk6IHZvaWQge1xuICAgIC8vIFVzZSBvcyBzaW5haXMgcGFyYSBhdHVhbGl6YXIgZGluYW1pY2FtZW50ZSBhIGxpc3RhIGRlIHRlY2hzXG4gICAgY29uc3QgY3VycmVudExpc3QgPSB0aGlzLmxpc3RTaWduYWwoKTtcbiAgICBjb25zdCBjdXJyZW50SGlkZGVuTG9nb3MgPSB0aGlzLmhpZGRlbkxvZ29zU2lnbmFsKCk7XG5cbiAgICBpZiAoY3VycmVudExpc3QgJiYgY3VycmVudExpc3QubGVuZ3RoID4gMCkge1xuICAgICAgdGhpcy50ZWNoc0xpc3Quc2V0KHRoaXMuZ2V0VGVjaHMoY3VycmVudExpc3QpKTtcbiAgICB9IGVsc2UgaWYgKGN1cnJlbnRIaWRkZW5Mb2dvcyAmJiBjdXJyZW50SGlkZGVuTG9nb3MubGVuZ3RoID4gMCkge1xuICAgICAgdGhpcy50ZWNoc0xpc3Quc2V0KHRoaXMuaGlkZGVuVGVjaHMoY3VycmVudEhpZGRlbkxvZ29zKSk7XG4gICAgfSBlbHNlIHtcbiAgICAgIHRoaXMudGVjaHNMaXN0LnNldCh0ZWNocyk7IC8vIFZvbHRlIHBhcmEgbyB2YWxvciBpbmljaWFsIHNlIG5lbmh1bSBzaW5hbCBlc3RpdmVyIGRlZmluaWRvXG4gICAgfVxuICB9XG5cbiAgcHVibGljIHRlY2hDbGFzcyhuYW1lOiBzdHJpbmcpOiBzdHJpbmdbXSB7XG4gICAgY29uc3QgY2xhc3NOYW1lID0gbmFtZT8udG9Mb3dlckNhc2UoKSB8fCAnJztcbiAgICByZXR1cm4gW3RoaXMuY2xhc3MgfHwgJycsIGNsYXNzTmFtZV07XG4gIH1cblxuICBwdWJsaWMgZ2V0VGVjaChuYW1lOiBzdHJpbmcpOiBUZWNoIHwgdW5kZWZpbmVkIHtcbiAgICByZXR1cm4gdGhpcy50ZWNoc0xpc3QoKS5maW5kKGl0ZW0gPT4gaXRlbS5uYW1lLnRvTG93ZXJDYXNlKCkgPT09IG5hbWUudG9Mb3dlckNhc2UoKSk7XG4gIH1cblxuICBwcml2YXRlIGdldFRlY2hzKGl0ZW1zOiBzdHJpbmdbXSk6IFRlY2hbXSB7XG4gICAgcmV0dXJuIHRoaXMudGVjaHNMaXN0KCkuZmlsdGVyKHRlY2ggPT4ge1xuICAgICAgaWYgKHR5cGVvZiB0ZWNoLm5hbWUgIT09ICdzdHJpbmcnKSByZXR1cm4gZmFsc2U7XG4gICAgICByZXR1cm4gaXRlbXMuc29tZShpdGVtID0+IHtcbiAgICAgICAgaWYgKHR5cGVvZiBpdGVtICE9PSAnc3RyaW5nJykgcmV0dXJuIGZhbHNlO1xuICAgICAgICByZXR1cm4gdGVjaC5uYW1lLnRvTG93ZXJDYXNlKCkgPT09IGl0ZW0udG9Mb3dlckNhc2UoKTtcbiAgICAgIH0pO1xuICAgIH0pO1xuICB9XG5cbiAgcHJpdmF0ZSBoaWRkZW5UZWNocyhpdGVtczogc3RyaW5nW10pOiBUZWNoW10ge1xuICAgIHJldHVybiB0aGlzLnRlY2hzTGlzdCgpLmZpbHRlcih0ZWNoID0+ICFpdGVtcy5pbmNsdWRlcyh0ZWNoLm5hbWUudG9Mb3dlckNhc2UoKSkpO1xuICB9XG5cbiAgcHVibGljIGdldEljb24obmFtZTogc3RyaW5nKTogVHlwZTxhbnk+IHwgbnVsbCB7XG4gICAgY29uc3QgdGVjaCA9IHRoaXMuZ2V0VGVjaChuYW1lKTtcbiAgICByZXR1cm4gdGVjaCA/IHRlY2guaWNvbiA6IG51bGw7XG4gIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJ0ZWNoc1wiIFtuZ0NsYXNzXT1cImNsYXNzXCI+XG4gIDxuZy1jb250YWluZXIgKm5nSWY9XCJuYW1lICYmIGdldFRlY2gobmFtZSkgJiYgIWxpc3RcIj5cbiAgICA8ZmlndXJlXG4gICAgICBjbGFzcz1cInRlY2gtY29udGFpbmVyXCJcbiAgICAgIFtuZ0NsYXNzXT1cInRlY2hDbGFzcyhuYW1lKVwiXG4gICAgICBbc3R5bGUud2lkdGhdPVwic2l6ZSA/IHNpemUgOiAnMTAwcHgnXCJcbiAgICA+XG4gICAgICA8bmctY29udGFpbmVyICpuZ0NvbXBvbmVudE91dGxldD1cImdldEljb24obmFtZSlcIiAvPlxuICAgICAgPGZpZ2NhcHRpb24gW25nQ2xhc3NdPVwieyB0b29sdGlwOiBoaWRkZW5MYWJlbCB9XCI+XG4gICAgICAgIHt7IGxhYmVsID8gbGFiZWwgOiBnZXRUZWNoKG5hbWUpPy5uYW1lIH19XG4gICAgICA8L2ZpZ2NhcHRpb24+XG4gICAgPC9maWd1cmU+XG4gIDwvbmctY29udGFpbmVyPlxuICA8bmctY29udGFpbmVyICpuZ0lmPVwiIW5hbWUgJiYgKGxpc3QgfHwgdGVjaHNMaXN0KVwiPlxuICAgIDxmaWd1cmVcbiAgICAgIGNsYXNzPVwidGVjaC1jb250YWluZXJcIlxuICAgICAgKm5nRm9yPVwibGV0IHRlY2ggb2YgdGVjaHNMaXN0KClcIlxuICAgICAgW25nQ2xhc3NdPVwiW3RlY2gubmFtZS50b0xvd2VyQ2FzZSgpXVwiXG4gICAgICBbc3R5bGUud2lkdGhdPVwic2l6ZSA/IHNpemUgOiAnMTAwcHgnXCJcbiAgICAgIFthdHRyLmtleV09XCJ0ZWNoLm5hbWVcIlxuICAgID5cbiAgICAgIDxuZy1jb250YWluZXIgKm5nQ29tcG9uZW50T3V0bGV0PVwiZ2V0SWNvbih0ZWNoLm5hbWUpXCIgLz5cbiAgICAgIDxmaWdjYXB0aW9uIFtuZ0NsYXNzXT1cInsgdG9vbHRpcDogaGlkZGVuTGFiZWwgfVwiPlxuICAgICAgICB7eyB0ZWNoLm5hbWUgfX1cbiAgICAgIDwvZmlnY2FwdGlvbj5cbiAgICA8L2ZpZ3VyZT5cbiAgPC9uZy1jb250YWluZXI+XG48L2Rpdj5cbiJdfQ==
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, Component, ViewContainerRef, ViewEncapsulation, Input, ViewChild, NgModule } from '@angular/core';
|
|
2
|
+
import { Injectable, Component, signal, ViewContainerRef, ViewEncapsulation, Input, ViewChild, NgModule } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
|
|
@@ -1412,6 +1412,11 @@ class AngularTechsLogosComponent {
|
|
|
1412
1412
|
constructor(cdr) {
|
|
1413
1413
|
this.cdr = cdr;
|
|
1414
1414
|
this.techs = techs;
|
|
1415
|
+
// Declare sinais reativos para list e hiddenLogos
|
|
1416
|
+
this.listSignal = signal([]);
|
|
1417
|
+
this.hiddenLogosSignal = signal([]);
|
|
1418
|
+
// Sinal para a lista dinâmica de techs a ser exibida no template
|
|
1419
|
+
this.techsList = signal(this.techs);
|
|
1415
1420
|
}
|
|
1416
1421
|
ngOnInit() {
|
|
1417
1422
|
if (!this.name) {
|
|
@@ -1419,19 +1424,26 @@ class AngularTechsLogosComponent {
|
|
|
1419
1424
|
}
|
|
1420
1425
|
}
|
|
1421
1426
|
ngOnChanges(changes) {
|
|
1422
|
-
|
|
1423
|
-
|
|
1427
|
+
// Atualize os sinais com os novos valores dos inputs
|
|
1428
|
+
if (changes['list']) {
|
|
1429
|
+
this.listSignal.set(this.list);
|
|
1430
|
+
}
|
|
1431
|
+
if (changes['hiddenLogos']) {
|
|
1432
|
+
this.hiddenLogosSignal.set(this.hiddenLogos);
|
|
1424
1433
|
}
|
|
1425
1434
|
}
|
|
1426
1435
|
updateTechs() {
|
|
1427
|
-
|
|
1428
|
-
|
|
1436
|
+
// Use os sinais para atualizar dinamicamente a lista de techs
|
|
1437
|
+
const currentList = this.listSignal();
|
|
1438
|
+
const currentHiddenLogos = this.hiddenLogosSignal();
|
|
1439
|
+
if (currentList && currentList.length > 0) {
|
|
1440
|
+
this.techsList.set(this.getTechs(currentList));
|
|
1429
1441
|
}
|
|
1430
|
-
else if (
|
|
1431
|
-
this.
|
|
1442
|
+
else if (currentHiddenLogos && currentHiddenLogos.length > 0) {
|
|
1443
|
+
this.techsList.set(this.hiddenTechs(currentHiddenLogos));
|
|
1432
1444
|
}
|
|
1433
1445
|
else {
|
|
1434
|
-
this.techs
|
|
1446
|
+
this.techsList.set(techs); // Volte para o valor inicial se nenhum sinal estiver definido
|
|
1435
1447
|
}
|
|
1436
1448
|
}
|
|
1437
1449
|
techClass(name) {
|
|
@@ -1439,10 +1451,10 @@ class AngularTechsLogosComponent {
|
|
|
1439
1451
|
return [this.class || '', className];
|
|
1440
1452
|
}
|
|
1441
1453
|
getTech(name) {
|
|
1442
|
-
return this.
|
|
1454
|
+
return this.techsList().find(item => item.name.toLowerCase() === name.toLowerCase());
|
|
1443
1455
|
}
|
|
1444
1456
|
getTechs(items) {
|
|
1445
|
-
return this.
|
|
1457
|
+
return this.techsList().filter(tech => {
|
|
1446
1458
|
if (typeof tech.name !== 'string')
|
|
1447
1459
|
return false;
|
|
1448
1460
|
return items.some(item => {
|
|
@@ -1453,18 +1465,18 @@ class AngularTechsLogosComponent {
|
|
|
1453
1465
|
});
|
|
1454
1466
|
}
|
|
1455
1467
|
hiddenTechs(items) {
|
|
1456
|
-
return this.
|
|
1468
|
+
return this.techsList().filter(tech => !items.includes(tech.name.toLowerCase()));
|
|
1457
1469
|
}
|
|
1458
1470
|
getIcon(name) {
|
|
1459
1471
|
const tech = this.getTech(name);
|
|
1460
1472
|
return tech ? tech.icon : null;
|
|
1461
1473
|
}
|
|
1462
1474
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: AngularTechsLogosComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1463
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.6", type: AngularTechsLogosComponent, selector: "angular-techs-logos", inputs: { list: "list", name: "name", size: "size", label: "label", hiddenLabel: "hiddenLabel", class: "class", hiddenLogos: "hiddenLogos" }, viewQueries: [{ propertyName: "iconContainer", first: true, predicate: ["iconContainer"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"techs\" [ngClass]=\"class\">\n <ng-container *ngIf=\"name && getTech(name) && !list\">\n <figure\n class=\"tech-container\"\n [ngClass]=\"techClass(name)\"\n [style.width]=\"size ? size : '100px'\"\n >\n <ng-container *ngComponentOutlet=\"getIcon(name)\" />\n <figcaption [ngClass]=\"{ tooltip: hiddenLabel }\">\n {{ label ? label : getTech(name)?.name }}\n </figcaption>\n </figure>\n </ng-container>\n <ng-container *ngIf=\"!name && (list ||
|
|
1475
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.6", type: AngularTechsLogosComponent, selector: "angular-techs-logos", inputs: { list: "list", name: "name", size: "size", label: "label", hiddenLabel: "hiddenLabel", class: "class", hiddenLogos: "hiddenLogos" }, viewQueries: [{ propertyName: "iconContainer", first: true, predicate: ["iconContainer"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"techs\" [ngClass]=\"class\">\n <ng-container *ngIf=\"name && getTech(name) && !list\">\n <figure\n class=\"tech-container\"\n [ngClass]=\"techClass(name)\"\n [style.width]=\"size ? size : '100px'\"\n >\n <ng-container *ngComponentOutlet=\"getIcon(name)\" />\n <figcaption [ngClass]=\"{ tooltip: hiddenLabel }\">\n {{ label ? label : getTech(name)?.name }}\n </figcaption>\n </figure>\n </ng-container>\n <ng-container *ngIf=\"!name && (list || techsList)\">\n <figure\n class=\"tech-container\"\n *ngFor=\"let tech of techsList()\"\n [ngClass]=\"[tech.name.toLowerCase()]\"\n [style.width]=\"size ? size : '100px'\"\n [attr.key]=\"tech.name\"\n >\n <ng-container *ngComponentOutlet=\"getIcon(tech.name)\" />\n <figcaption [ngClass]=\"{ tooltip: hiddenLabel }\">\n {{ tech.name }}\n </figcaption>\n </figure>\n </ng-container>\n</div>\n", styles: [".techs{display:flex;flex-wrap:wrap;align-items:center;justify-content:center}.techs .title{width:100%;text-align:center;margin-top:2rem}figure.tech-container{background:transparent;border:1px solid var(--vtl-background);border-radius:100px;width:120px!important;height:120px;text-align:center;display:flex;align-items:center;justify-content:center;flex-direction:column;transition:.3s all}figure.tech-container:hover{background:var(--vtl-background);border-color:var(--vtl-background);transform:scale(1.1)}figure.tech-container svg{height:50px;margin-bottom:.2rem}figure{position:relative;text-align:center;margin:.2rem}figure figcaption{font-size:.7rem}figure figcaption.tooltip{position:absolute;bottom:2%;background:var(--vtl-background-tooltip);box-shadow:0 4px 10px var(--vtl-shadow-tooltip);padding:.2rem .5rem;border-radius:5px;pointer-events:none;opacity:0;transition:.3s all;color:#fff}figure:hover figcaption.tooltip{opacity:1;pointer-events:all}body{--vtl-background: rgba(0,0,0, .05);--vtl-background-tooltip: #444;--vtl-shadow-tooltip: rgba(0,0,0,.2);--vtl-text: #000;--vtl-background-svg: #000;--vtl-background-svg-invert: #fff;--vtl-background-gradient: linear-gradient(228deg, rgba(238,238,238,1) 0%, rgba(255,255,255,1) 60%)}body.darkmode{--vtl-background: rgba(0,0,0, .5);--vtl-background-tooltip: #444;--vtl-shadow-tooltip: rgba(0,0,0,.2);--vtl-text: #fff;--vtl-background-svg: #fff;--vtl-background-svg-invert: #000;--vtl-background-gradient: linear-gradient(228deg, rgb(24, 24, 24) 0%, rgb(38, 38, 38) 60%)}@media (prefers-color-scheme: light){:root{--vtl-background: rgba(0,0,0, .05);--vtl-background-tooltip: #444;--vtl-shadow-tooltip: rgba(0,0,0,.2);--vtl-text: #000;--vtl-background-svg: #000;--vtl-background-svg-invert: #fff;--vtl-background-gradient: linear-gradient(228deg, rgba(238,238,238,1) 0%, rgba(255,255,255,1) 60%)}}@media (prefers-color-scheme: dark){:root{--vtl-background: rgba(0,0,0, .5);--vtl-background-tooltip: #444;--vtl-shadow-tooltip: rgba(0,0,0,.2);--vtl-text: #fff;--vtl-background-svg: #fff;--vtl-background-svg-invert: #000;--vtl-background-gradient: linear-gradient(228deg, rgb(24, 24, 24) 0%, rgb(38, 38, 38) 60%)}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1464
1476
|
}
|
|
1465
1477
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: AngularTechsLogosComponent, decorators: [{
|
|
1466
1478
|
type: Component,
|
|
1467
|
-
args: [{ selector: 'angular-techs-logos', encapsulation: ViewEncapsulation.None, template: "<div class=\"techs\" [ngClass]=\"class\">\n <ng-container *ngIf=\"name && getTech(name) && !list\">\n <figure\n class=\"tech-container\"\n [ngClass]=\"techClass(name)\"\n [style.width]=\"size ? size : '100px'\"\n >\n <ng-container *ngComponentOutlet=\"getIcon(name)\" />\n <figcaption [ngClass]=\"{ tooltip: hiddenLabel }\">\n {{ label ? label : getTech(name)?.name }}\n </figcaption>\n </figure>\n </ng-container>\n <ng-container *ngIf=\"!name && (list ||
|
|
1479
|
+
args: [{ selector: 'angular-techs-logos', encapsulation: ViewEncapsulation.None, template: "<div class=\"techs\" [ngClass]=\"class\">\n <ng-container *ngIf=\"name && getTech(name) && !list\">\n <figure\n class=\"tech-container\"\n [ngClass]=\"techClass(name)\"\n [style.width]=\"size ? size : '100px'\"\n >\n <ng-container *ngComponentOutlet=\"getIcon(name)\" />\n <figcaption [ngClass]=\"{ tooltip: hiddenLabel }\">\n {{ label ? label : getTech(name)?.name }}\n </figcaption>\n </figure>\n </ng-container>\n <ng-container *ngIf=\"!name && (list || techsList)\">\n <figure\n class=\"tech-container\"\n *ngFor=\"let tech of techsList()\"\n [ngClass]=\"[tech.name.toLowerCase()]\"\n [style.width]=\"size ? size : '100px'\"\n [attr.key]=\"tech.name\"\n >\n <ng-container *ngComponentOutlet=\"getIcon(tech.name)\" />\n <figcaption [ngClass]=\"{ tooltip: hiddenLabel }\">\n {{ tech.name }}\n </figcaption>\n </figure>\n </ng-container>\n</div>\n", styles: [".techs{display:flex;flex-wrap:wrap;align-items:center;justify-content:center}.techs .title{width:100%;text-align:center;margin-top:2rem}figure.tech-container{background:transparent;border:1px solid var(--vtl-background);border-radius:100px;width:120px!important;height:120px;text-align:center;display:flex;align-items:center;justify-content:center;flex-direction:column;transition:.3s all}figure.tech-container:hover{background:var(--vtl-background);border-color:var(--vtl-background);transform:scale(1.1)}figure.tech-container svg{height:50px;margin-bottom:.2rem}figure{position:relative;text-align:center;margin:.2rem}figure figcaption{font-size:.7rem}figure figcaption.tooltip{position:absolute;bottom:2%;background:var(--vtl-background-tooltip);box-shadow:0 4px 10px var(--vtl-shadow-tooltip);padding:.2rem .5rem;border-radius:5px;pointer-events:none;opacity:0;transition:.3s all;color:#fff}figure:hover figcaption.tooltip{opacity:1;pointer-events:all}body{--vtl-background: rgba(0,0,0, .05);--vtl-background-tooltip: #444;--vtl-shadow-tooltip: rgba(0,0,0,.2);--vtl-text: #000;--vtl-background-svg: #000;--vtl-background-svg-invert: #fff;--vtl-background-gradient: linear-gradient(228deg, rgba(238,238,238,1) 0%, rgba(255,255,255,1) 60%)}body.darkmode{--vtl-background: rgba(0,0,0, .5);--vtl-background-tooltip: #444;--vtl-shadow-tooltip: rgba(0,0,0,.2);--vtl-text: #fff;--vtl-background-svg: #fff;--vtl-background-svg-invert: #000;--vtl-background-gradient: linear-gradient(228deg, rgb(24, 24, 24) 0%, rgb(38, 38, 38) 60%)}@media (prefers-color-scheme: light){:root{--vtl-background: rgba(0,0,0, .05);--vtl-background-tooltip: #444;--vtl-shadow-tooltip: rgba(0,0,0,.2);--vtl-text: #000;--vtl-background-svg: #000;--vtl-background-svg-invert: #fff;--vtl-background-gradient: linear-gradient(228deg, rgba(238,238,238,1) 0%, rgba(255,255,255,1) 60%)}}@media (prefers-color-scheme: dark){:root{--vtl-background: rgba(0,0,0, .5);--vtl-background-tooltip: #444;--vtl-shadow-tooltip: rgba(0,0,0,.2);--vtl-text: #fff;--vtl-background-svg: #fff;--vtl-background-svg-invert: #000;--vtl-background-gradient: linear-gradient(228deg, rgb(24, 24, 24) 0%, rgb(38, 38, 38) 60%)}}\n"] }]
|
|
1468
1480
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { list: [{
|
|
1469
1481
|
type: Input
|
|
1470
1482
|
}], name: [{
|