angular-techs-logos 0.1.4 → 0.1.6
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.
|
@@ -10,6 +10,8 @@ export class AngularTechsLogosComponent {
|
|
|
10
10
|
// Declare sinais reativos para list e hiddenLogos
|
|
11
11
|
this.listSignal = signal([]);
|
|
12
12
|
this.hiddenLogosSignal = signal([]);
|
|
13
|
+
// Sinal para a lista dinâmica de techs a ser exibida no template
|
|
14
|
+
this.techsList = signal(this.techs);
|
|
13
15
|
}
|
|
14
16
|
ngOnInit() {
|
|
15
17
|
if (!this.name) {
|
|
@@ -18,25 +20,29 @@ export class AngularTechsLogosComponent {
|
|
|
18
20
|
}
|
|
19
21
|
ngOnChanges(changes) {
|
|
20
22
|
// Atualize os sinais com os novos valores dos inputs
|
|
23
|
+
console.log('changes: ', changes);
|
|
21
24
|
if (changes['list']) {
|
|
22
25
|
this.listSignal.set(this.list);
|
|
23
26
|
}
|
|
24
27
|
if (changes['hiddenLogos']) {
|
|
25
28
|
this.hiddenLogosSignal.set(this.hiddenLogos);
|
|
26
29
|
}
|
|
30
|
+
if (!this.name) {
|
|
31
|
+
this.updateTechs();
|
|
32
|
+
}
|
|
27
33
|
}
|
|
28
34
|
updateTechs() {
|
|
29
35
|
// Use os sinais para atualizar dinamicamente a lista de techs
|
|
30
36
|
const currentList = this.listSignal();
|
|
31
37
|
const currentHiddenLogos = this.hiddenLogosSignal();
|
|
32
38
|
if (currentList && currentList.length > 0) {
|
|
33
|
-
this.
|
|
39
|
+
this.techsList.set(this.getTechs(currentList));
|
|
34
40
|
}
|
|
35
41
|
else if (currentHiddenLogos && currentHiddenLogos.length > 0) {
|
|
36
|
-
this.
|
|
42
|
+
this.techsList.set(this.hiddenTechs(currentHiddenLogos));
|
|
37
43
|
}
|
|
38
44
|
else {
|
|
39
|
-
this.techs
|
|
45
|
+
this.techsList.set(techs); // Volte para o valor inicial se nenhum sinal estiver definido
|
|
40
46
|
}
|
|
41
47
|
}
|
|
42
48
|
techClass(name) {
|
|
@@ -44,10 +50,10 @@ export class AngularTechsLogosComponent {
|
|
|
44
50
|
return [this.class || '', className];
|
|
45
51
|
}
|
|
46
52
|
getTech(name) {
|
|
47
|
-
return this.
|
|
53
|
+
return this.techsList().find(item => item.name.toLowerCase() === name.toLowerCase());
|
|
48
54
|
}
|
|
49
55
|
getTechs(items) {
|
|
50
|
-
return this.
|
|
56
|
+
return this.techsList().filter(tech => {
|
|
51
57
|
if (typeof tech.name !== 'string')
|
|
52
58
|
return false;
|
|
53
59
|
return items.some(item => {
|
|
@@ -58,18 +64,18 @@ export class AngularTechsLogosComponent {
|
|
|
58
64
|
});
|
|
59
65
|
}
|
|
60
66
|
hiddenTechs(items) {
|
|
61
|
-
return this.
|
|
67
|
+
return this.techsList().filter(tech => !items.includes(tech.name.toLowerCase()));
|
|
62
68
|
}
|
|
63
69
|
getIcon(name) {
|
|
64
70
|
const tech = this.getTech(name);
|
|
65
71
|
return tech ? tech.icon : null;
|
|
66
72
|
}
|
|
67
73
|
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 }); }
|
|
68
|
-
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 ||
|
|
74
|
+
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 }); }
|
|
69
75
|
}
|
|
70
76
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: AngularTechsLogosComponent, decorators: [{
|
|
71
77
|
type: Component,
|
|
72
|
-
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 ||
|
|
78
|
+
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"] }]
|
|
73
79
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { list: [{
|
|
74
80
|
type: Input
|
|
75
81
|
}], name: [{
|
|
@@ -88,4 +94,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
|
|
|
88
94
|
type: ViewChild,
|
|
89
95
|
args: ['iconContainer', { read: ViewContainerRef }]
|
|
90
96
|
}] } });
|
|
91
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
97
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYW5ndWxhci10ZWNocy1sb2dvcy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyLXRlY2hzLWxvZ29zL3NyYy9saWIvYW5ndWxhci10ZWNocy1sb2dvcy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyLXRlY2hzLWxvZ29zL3NyYy9saWIvYW5ndWxhci10ZWNocy1sb2dvcy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsU0FBUyxFQUNULEtBQUssRUFJTCxTQUFTLEVBQ1QsZ0JBQWdCLEVBRWhCLGlCQUFpQixFQUVsQixNQUFNLGVBQWUsQ0FBQztBQUV2QixPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFDM0MsT0FBTyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQyxDQUFDLGlDQUFpQzs7O0FBYXpFLE1BQU0sT0FBTywwQkFBMEI7SUFvQnJDLFlBQ1UsR0FBc0I7UUFBdEIsUUFBRyxHQUFILEdBQUcsQ0FBbUI7UUFWaEMsVUFBSyxHQUFXLEtBQUssQ0FBQztRQUV0QixrREFBa0Q7UUFDbEQsZUFBVSxHQUFHLE1BQU0sQ0FBdUIsRUFBRSxDQUFDLENBQUM7UUFDOUMsc0JBQWlCLEdBQUcsTUFBTSxDQUF1QixFQUFFLENBQUMsQ0FBQztRQUVyRCxpRUFBaUU7UUFDakUsY0FBUyxHQUFHLE1BQU0sQ0FBUyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFJcEMsQ0FBQztJQUVKLFFBQVE7UUFDTixJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksRUFBRSxDQUFDO1lBQ2YsSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDO1FBQ3JCLENBQUM7SUFDSCxDQUFDO0lBRUQsV0FBVyxDQUFDLE9BQXNCO1FBQ2hDLHFEQUFxRDtRQUNyRCxPQUFPLENBQUMsR0FBRyxDQUFDLFdBQVcsRUFBRSxP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QUFDLENBQUMsQ0FBQyxJQUFJLENBQUM7SUFDakMsQ0FBQzs4R0F0RlUsMEJBQTBCO2tHQUExQiwwQkFBMEIsb1NBU0QsZ0JBQWdCLGtEQ3BDdEQsNDdCQTRCQTs7MkZERGEsMEJBQTBCO2tCQU50QyxTQUFTOytCQUNFLHFCQUFxQixpQkFHaEIsaUJBQWlCLENBQUMsSUFBSTtzRkFHNUIsSUFBSTtzQkFBWixLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBRWtELGFBQWE7c0JBQXBFLFNBQVM7dUJBQUMsZUFBZSxFQUFFLEVBQUUsSUFBSSxFQUFFLGdCQUFnQixFQUFFIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBJbnB1dCxcbiAgT25Jbml0LFxuICBPbkNoYW5nZXMsXG4gIFNpbXBsZUNoYW5nZXMsXG4gIFZpZXdDaGlsZCxcbiAgVmlld0NvbnRhaW5lclJlZixcbiAgVHlwZSxcbiAgVmlld0VuY2Fwc3VsYXRpb24sXG4gIENoYW5nZURldGVjdG9yUmVmXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5pbXBvcnQgeyB0ZWNocyB9IGZyb20gJy4vdGVjaHMvdGVjaHMtZGF0YSc7XG5pbXBvcnQgeyBzaWduYWwgfSBmcm9tICdAYW5ndWxhci9jb3JlJzsgLy8gSW1wb3J0ZSBzaWduYWwgZG8gQW5ndWxhciBDb3JlXG5cbmludGVyZmFjZSBUZWNoIHtcbiAgbmFtZTogc3RyaW5nO1xuICBpY29uOiBUeXBlPGFueT47XG59XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2FuZ3VsYXItdGVjaHMtbG9nb3MnLFxuICB0ZW1wbGF0ZVVybDogJy4vYW5ndWxhci10ZWNocy1sb2dvcy5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2FuZ3VsYXItdGVjaHMtbG9nb3MuY29tcG9uZW50LnNjc3MnXSxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbn0pXG5leHBvcnQgY2xhc3MgQW5ndWxhclRlY2hzTG9nb3NDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIE9uQ2hhbmdlcyB7XG4gIEBJbnB1dCgpIGxpc3Q6IHN0cmluZ1tdIHwgdW5kZWZpbmVkO1xuICBASW5wdXQoKSBuYW1lOiBzdHJpbmcgfCB1bmRlZmluZWQ7XG4gIEBJbnB1dCgpIHNpemU6IHN0cmluZyB8IHVuZGVmaW5lZDtcbiAgQElucHV0KCkgbGFiZWw6IHN0cmluZyB8IHVuZGVmaW5lZDtcbiAgQElucHV0KCkgaGlkZGVuTGFiZWw6IGJvb2xlYW4gfCB1bmRlZmluZWQ7XG4gIEBJbnB1dCgpIGNsYXNzOiBzdHJpbmcgfCB1bmRlZmluZWQ7XG4gIEBJbnB1dCgpIGhpZGRlbkxvZ29zOiBzdHJpbmdbXSB8IHVuZGVmaW5lZDtcblxuICBAVmlld0NoaWxkKCdpY29uQ29udGFpbmVyJywgeyByZWFkOiBWaWV3Q29udGFpbmVyUmVmIH0pIGljb25Db250YWluZXIhOiBWaWV3Q29udGFpbmVyUmVmO1xuXG4gIHRlY2hzOiBUZWNoW10gPSB0ZWNocztcblxuICAvLyBEZWNsYXJlIHNpbmFpcyByZWF0aXZvcyBwYXJhIGxpc3QgZSBoaWRkZW5Mb2dvc1xuICBsaXN0U2lnbmFsID0gc2lnbmFsPHN0cmluZ1tdIHwgdW5kZWZpbmVkPihbXSk7XG4gIGhpZGRlbkxvZ29zU2lnbmFsID0gc2lnbmFsPHN0cmluZ1tdIHwgdW5kZWZpbmVkPihbXSk7XG5cbiAgLy8gU2luYWwgcGFyYSBhIGxpc3RhIGRpbsOibWljYSBkZSB0ZWNocyBhIHNlciBleGliaWRhIG5vIHRlbXBsYXRlXG4gIHRlY2hzTGlzdCA9IHNpZ25hbDxUZWNoW10+KHRoaXMudGVjaHMpO1xuXG4gIGNvbnN0cnVjdG9yKFxuICAgIHByaXZhdGUgY2RyOiBDaGFuZ2VEZXRlY3RvclJlZlxuICApIHt9XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgaWYgKCF0aGlzLm5hbWUpIHtcbiAgICAgIHRoaXMudXBkYXRlVGVjaHMoKTtcbiAgICB9XG4gIH1cblxuICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKTogdm9pZCB7XG4gICAgLy8gQXR1YWxpemUgb3Mgc2luYWlzIGNvbSBvcyBub3ZvcyB2YWxvcmVzIGRvcyBpbnB1dHNcbiAgICBjb25zb2xlLmxvZygnY2hhbmdlczogJywgY2hhbmdlcylcblxuICAgIGlmIChjaGFuZ2VzWydsaXN0J10pIHtcbiAgICAgIHRoaXMubGlzdFNpZ25hbC5zZXQodGhpcy5saXN0KTtcbiAgICB9XG4gICAgaWYgKGNoYW5nZXNbJ2hpZGRlbkxvZ29zJ10pIHtcbiAgICAgIHRoaXMuaGlkZGVuTG9nb3NTaWduYWwuc2V0KHRoaXMuaGlkZGVuTG9nb3MpO1xuICAgIH1cblxuICAgIGlmICghdGhpcy5uYW1lKSB7XG4gICAgICB0aGlzLnVwZGF0ZVRlY2hzKCk7XG4gICAgfVxuICB9XG5cbiAgcHJpdmF0ZSB1cGRhdGVUZWNocygpOiB2b2lkIHtcbiAgICAvLyBVc2Ugb3Mgc2luYWlzIHBhcmEgYXR1YWxpemFyIGRpbmFtaWNhbWVudGUgYSBsaXN0YSBkZSB0ZWNoc1xuICAgIGNvbnN0IGN1cnJlbnRMaXN0ID0gdGhpcy5saXN0U2lnbmFsKCk7XG4gICAgY29uc3QgY3VycmVudEhpZGRlbkxvZ29zID0gdGhpcy5oaWRkZW5Mb2dvc1NpZ25hbCgpO1xuXG4gICAgaWYgKGN1cnJlbnRMaXN0ICYmIGN1cnJlbnRMaXN0Lmxlbmd0aCA+IDApIHtcbiAgICAgIHRoaXMudGVjaHNMaXN0LnNldCh0aGlzLmdldFRlY2hzKGN1cnJlbnRMaXN0KSk7XG4gICAgfSBlbHNlIGlmIChjdXJyZW50SGlkZGVuTG9nb3MgJiYgY3VycmVudEhpZGRlbkxvZ29zLmxlbmd0aCA+IDApIHtcbiAgICAgIHRoaXMudGVjaHNMaXN0LnNldCh0aGlzLmhpZGRlblRlY2hzKGN1cnJlbnRIaWRkZW5Mb2dvcykpO1xuICAgIH0gZWxzZSB7XG4gICAgICB0aGlzLnRlY2hzTGlzdC5zZXQodGVjaHMpOyAvLyBWb2x0ZSBwYXJhIG8gdmFsb3IgaW5pY2lhbCBzZSBuZW5odW0gc2luYWwgZXN0aXZlciBkZWZpbmlkb1xuICAgIH1cbiAgfVxuXG4gIHB1YmxpYyB0ZWNoQ2xhc3MobmFtZTogc3RyaW5nKTogc3RyaW5nW10ge1xuICAgIGNvbnN0IGNsYXNzTmFtZSA9IG5hbWU/LnRvTG93ZXJDYXNlKCkgfHwgJyc7XG4gICAgcmV0dXJuIFt0aGlzLmNsYXNzIHx8ICcnLCBjbGFzc05hbWVdO1xuICB9XG5cbiAgcHVibGljIGdldFRlY2gobmFtZTogc3RyaW5nKTogVGVjaCB8IHVuZGVmaW5lZCB7XG4gICAgcmV0dXJuIHRoaXMudGVjaHNMaXN0KCkuZmluZChpdGVtID0+IGl0ZW0ubmFtZS50b0xvd2VyQ2FzZSgpID09PSBuYW1lLnRvTG93ZXJDYXNlKCkpO1xuICB9XG5cbiAgcHJpdmF0ZSBnZXRUZWNocyhpdGVtczogc3RyaW5nW10pOiBUZWNoW10ge1xuICAgIHJldHVybiB0aGlzLnRlY2hzTGlzdCgpLmZpbHRlcih0ZWNoID0+IHtcbiAgICAgIGlmICh0eXBlb2YgdGVjaC5uYW1lICE9PSAnc3RyaW5nJykgcmV0dXJuIGZhbHNlO1xuICAgICAgcmV0dXJuIGl0ZW1zLnNvbWUoaXRlbSA9PiB7XG4gICAgICAgIGlmICh0eXBlb2YgaXRlbSAhPT0gJ3N0cmluZycpIHJldHVybiBmYWxzZTtcbiAgICAgICAgcmV0dXJuIHRlY2gubmFtZS50b0xvd2VyQ2FzZSgpID09PSBpdGVtLnRvTG93ZXJDYXNlKCk7XG4gICAgICB9KTtcbiAgICB9KTtcbiAgfVxuXG4gIHByaXZhdGUgaGlkZGVuVGVjaHMoaXRlbXM6IHN0cmluZ1tdKTogVGVjaFtdIHtcbiAgICByZXR1cm4gdGhpcy50ZWNoc0xpc3QoKS5maWx0ZXIodGVjaCA9PiAhaXRlbXMuaW5jbHVkZXModGVjaC5uYW1lLnRvTG93ZXJDYXNlKCkpKTtcbiAgfVxuXG4gIHB1YmxpYyBnZXRJY29uKG5hbWU6IHN0cmluZyk6IFR5cGU8YW55PiB8IG51bGwge1xuICAgIGNvbnN0IHRlY2ggPSB0aGlzLmdldFRlY2gobmFtZSk7XG4gICAgcmV0dXJuIHRlY2ggPyB0ZWNoLmljb24gOiBudWxsO1xuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwidGVjaHNcIiBbbmdDbGFzc109XCJjbGFzc1wiPlxuICA8bmctY29udGFpbmVyICpuZ0lmPVwibmFtZSAmJiBnZXRUZWNoKG5hbWUpICYmICFsaXN0XCI+XG4gICAgPGZpZ3VyZVxuICAgICAgY2xhc3M9XCJ0ZWNoLWNvbnRhaW5lclwiXG4gICAgICBbbmdDbGFzc109XCJ0ZWNoQ2xhc3MobmFtZSlcIlxuICAgICAgW3N0eWxlLndpZHRoXT1cInNpemUgPyBzaXplIDogJzEwMHB4J1wiXG4gICAgPlxuICAgICAgPG5nLWNvbnRhaW5lciAqbmdDb21wb25lbnRPdXRsZXQ9XCJnZXRJY29uKG5hbWUpXCIgLz5cbiAgICAgIDxmaWdjYXB0aW9uIFtuZ0NsYXNzXT1cInsgdG9vbHRpcDogaGlkZGVuTGFiZWwgfVwiPlxuICAgICAgICB7eyBsYWJlbCA/IGxhYmVsIDogZ2V0VGVjaChuYW1lKT8ubmFtZSB9fVxuICAgICAgPC9maWdjYXB0aW9uPlxuICAgIDwvZmlndXJlPlxuICA8L25nLWNvbnRhaW5lcj5cbiAgPG5nLWNvbnRhaW5lciAqbmdJZj1cIiFuYW1lICYmIChsaXN0IHx8IHRlY2hzTGlzdClcIj5cbiAgICA8ZmlndXJlXG4gICAgICBjbGFzcz1cInRlY2gtY29udGFpbmVyXCJcbiAgICAgICpuZ0Zvcj1cImxldCB0ZWNoIG9mIHRlY2hzTGlzdCgpXCJcbiAgICAgIFtuZ0NsYXNzXT1cIlt0ZWNoLm5hbWUudG9Mb3dlckNhc2UoKV1cIlxuICAgICAgW3N0eWxlLndpZHRoXT1cInNpemUgPyBzaXplIDogJzEwMHB4J1wiXG4gICAgICBbYXR0ci5rZXldPVwidGVjaC5uYW1lXCJcbiAgICA+XG4gICAgICA8bmctY29udGFpbmVyICpuZ0NvbXBvbmVudE91dGxldD1cImdldEljb24odGVjaC5uYW1lKVwiIC8+XG4gICAgICA8ZmlnY2FwdGlvbiBbbmdDbGFzc109XCJ7IHRvb2x0aXA6IGhpZGRlbkxhYmVsIH1cIj5cbiAgICAgICAge3sgdGVjaC5uYW1lIH19XG4gICAgICA8L2ZpZ2NhcHRpb24+XG4gICAgPC9maWd1cmU+XG4gIDwvbmctY29udGFpbmVyPlxuPC9kaXY+XG4iXX0=
|
|
@@ -1415,6 +1415,8 @@ class AngularTechsLogosComponent {
|
|
|
1415
1415
|
// Declare sinais reativos para list e hiddenLogos
|
|
1416
1416
|
this.listSignal = signal([]);
|
|
1417
1417
|
this.hiddenLogosSignal = signal([]);
|
|
1418
|
+
// Sinal para a lista dinâmica de techs a ser exibida no template
|
|
1419
|
+
this.techsList = signal(this.techs);
|
|
1418
1420
|
}
|
|
1419
1421
|
ngOnInit() {
|
|
1420
1422
|
if (!this.name) {
|
|
@@ -1423,25 +1425,29 @@ class AngularTechsLogosComponent {
|
|
|
1423
1425
|
}
|
|
1424
1426
|
ngOnChanges(changes) {
|
|
1425
1427
|
// Atualize os sinais com os novos valores dos inputs
|
|
1428
|
+
console.log('changes: ', changes);
|
|
1426
1429
|
if (changes['list']) {
|
|
1427
1430
|
this.listSignal.set(this.list);
|
|
1428
1431
|
}
|
|
1429
1432
|
if (changes['hiddenLogos']) {
|
|
1430
1433
|
this.hiddenLogosSignal.set(this.hiddenLogos);
|
|
1431
1434
|
}
|
|
1435
|
+
if (!this.name) {
|
|
1436
|
+
this.updateTechs();
|
|
1437
|
+
}
|
|
1432
1438
|
}
|
|
1433
1439
|
updateTechs() {
|
|
1434
1440
|
// Use os sinais para atualizar dinamicamente a lista de techs
|
|
1435
1441
|
const currentList = this.listSignal();
|
|
1436
1442
|
const currentHiddenLogos = this.hiddenLogosSignal();
|
|
1437
1443
|
if (currentList && currentList.length > 0) {
|
|
1438
|
-
this.
|
|
1444
|
+
this.techsList.set(this.getTechs(currentList));
|
|
1439
1445
|
}
|
|
1440
1446
|
else if (currentHiddenLogos && currentHiddenLogos.length > 0) {
|
|
1441
|
-
this.
|
|
1447
|
+
this.techsList.set(this.hiddenTechs(currentHiddenLogos));
|
|
1442
1448
|
}
|
|
1443
1449
|
else {
|
|
1444
|
-
this.techs
|
|
1450
|
+
this.techsList.set(techs); // Volte para o valor inicial se nenhum sinal estiver definido
|
|
1445
1451
|
}
|
|
1446
1452
|
}
|
|
1447
1453
|
techClass(name) {
|
|
@@ -1449,10 +1455,10 @@ class AngularTechsLogosComponent {
|
|
|
1449
1455
|
return [this.class || '', className];
|
|
1450
1456
|
}
|
|
1451
1457
|
getTech(name) {
|
|
1452
|
-
return this.
|
|
1458
|
+
return this.techsList().find(item => item.name.toLowerCase() === name.toLowerCase());
|
|
1453
1459
|
}
|
|
1454
1460
|
getTechs(items) {
|
|
1455
|
-
return this.
|
|
1461
|
+
return this.techsList().filter(tech => {
|
|
1456
1462
|
if (typeof tech.name !== 'string')
|
|
1457
1463
|
return false;
|
|
1458
1464
|
return items.some(item => {
|
|
@@ -1463,18 +1469,18 @@ class AngularTechsLogosComponent {
|
|
|
1463
1469
|
});
|
|
1464
1470
|
}
|
|
1465
1471
|
hiddenTechs(items) {
|
|
1466
|
-
return this.
|
|
1472
|
+
return this.techsList().filter(tech => !items.includes(tech.name.toLowerCase()));
|
|
1467
1473
|
}
|
|
1468
1474
|
getIcon(name) {
|
|
1469
1475
|
const tech = this.getTech(name);
|
|
1470
1476
|
return tech ? tech.icon : null;
|
|
1471
1477
|
}
|
|
1472
1478
|
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 }); }
|
|
1473
|
-
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 ||
|
|
1479
|
+
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 }); }
|
|
1474
1480
|
}
|
|
1475
1481
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: AngularTechsLogosComponent, decorators: [{
|
|
1476
1482
|
type: Component,
|
|
1477
|
-
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 ||
|
|
1483
|
+
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"] }]
|
|
1478
1484
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { list: [{
|
|
1479
1485
|
type: Input
|
|
1480
1486
|
}], name: [{
|