angular-techs-logos 0.0.9 → 0.0.11
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.
|
@@ -15,15 +15,6 @@ export class AngularTechsLogosComponent {
|
|
|
15
15
|
this.updateTechs();
|
|
16
16
|
}
|
|
17
17
|
}
|
|
18
|
-
// ngAfterViewInit(): void {
|
|
19
|
-
// if (this.name) {
|
|
20
|
-
// const tech = this.getTech(this.name);
|
|
21
|
-
// if (tech) {
|
|
22
|
-
// // this.loadIcon(tech.icon);
|
|
23
|
-
// }
|
|
24
|
-
// }
|
|
25
|
-
// this.cdr.detectChanges();
|
|
26
|
-
// }
|
|
27
18
|
updateTechs() {
|
|
28
19
|
if (this.list) {
|
|
29
20
|
this.techs = this.getTechs(this.list);
|
|
@@ -34,9 +25,11 @@ export class AngularTechsLogosComponent {
|
|
|
34
25
|
else {
|
|
35
26
|
this.techs = this.techs;
|
|
36
27
|
}
|
|
28
|
+
console.log('this.techs: ', this.techs);
|
|
37
29
|
}
|
|
38
30
|
techClass(name) {
|
|
39
|
-
|
|
31
|
+
const className = this.getTech(name)?.name?.toLowerCase() || '';
|
|
32
|
+
return [this.class || '', className];
|
|
40
33
|
}
|
|
41
34
|
getTech(name) {
|
|
42
35
|
return this.techs.find(item => item.name.toLowerCase() === name.toLowerCase());
|
|
@@ -47,15 +40,17 @@ export class AngularTechsLogosComponent {
|
|
|
47
40
|
hiddenTechs(items) {
|
|
48
41
|
return this.techs.filter(tech => !items.includes(tech.name.toLowerCase()));
|
|
49
42
|
}
|
|
50
|
-
getIcon(
|
|
51
|
-
|
|
43
|
+
getIcon(name) {
|
|
44
|
+
console.log("getIcon name icon: ", name);
|
|
45
|
+
const tech = this.getTech(name);
|
|
46
|
+
return tech ? tech.icon : null;
|
|
52
47
|
}
|
|
53
48
|
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 }); }
|
|
54
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.6", type: AngularTechsLogosComponent, selector: "lib-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(
|
|
49
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.6", type: AngularTechsLogosComponent, selector: "lib-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=\"list\">\n <figure\n class=\"tech-container\"\n *ngFor=\"let tech of techs\"\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"] }] }); }
|
|
55
50
|
}
|
|
56
51
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: AngularTechsLogosComponent, decorators: [{
|
|
57
52
|
type: Component,
|
|
58
|
-
args: [{ selector: 'lib-angular-techs-logos', 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(
|
|
53
|
+
args: [{ selector: 'lib-angular-techs-logos', 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=\"list\">\n <figure\n class=\"tech-container\"\n *ngFor=\"let tech of techs\"\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"] }]
|
|
59
54
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { list: [{
|
|
60
55
|
type: Input
|
|
61
56
|
}], name: [{
|
|
@@ -74,4 +69,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
|
|
|
74
69
|
type: ViewChild,
|
|
75
70
|
args: ['iconContainer', { read: ViewContainerRef }]
|
|
76
71
|
}] } });
|
|
77
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
72
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYW5ndWxhci10ZWNocy1sb2dvcy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyLXRlY2hzLWxvZ29zL3NyYy9saWIvYW5ndWxhci10ZWNocy1sb2dvcy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyLXRlY2hzLWxvZ29zL3NyYy9saWIvYW5ndWxhci10ZWNocy1sb2dvcy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsU0FBUyxFQUNULEtBQUssRUFJTCxTQUFTLEVBQ1QsZ0JBQWdCLEVBSWpCLE1BQU0sZUFBZSxDQUFDO0FBRXZCLE9BQU8sRUFBRSxLQUFLLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQzs7O0FBWS9DLE1BQU0sT0FBTywwQkFBMEI7SUFhckMsWUFDVSxHQUFzQjtRQUF0QixRQUFHLEdBQUgsR0FBRyxDQUFtQjtRQUhoQyxVQUFLLEdBQVcsS0FBSyxDQUFDO0lBSW5CLENBQUM7SUFFSixRQUFRO1FBQ04sSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDO0lBQ3JCLENBQUM7SUFFRCxXQUFXLENBQUMsT0FBc0I7UUFDaEMsSUFBSSxPQUFPLENBQUMsTUFBTSxDQUFDLElBQUksT0FBTyxDQUFDLGFBQWEsQ0FBQyxFQUFFLENBQUM7WUFDOUMsSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDO1FBQ3JCLENBQUM7SUFDSCxDQUFDO0lBRU8sV0FBVztRQUNqQixJQUFJLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQztZQUNkLElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDeEMsQ0FBQzthQUFNLElBQUksSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDO1lBQzVCLElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLENBQUM7UUFDbEQsQ0FBQzthQUFNLENBQUM7WUFDTixJQUFJLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUM7UUFDMUIsQ0FBQztRQUVELE9BQU8sQ0FBQyxHQUFHLENBQUMsY0FBYyxFQUFFLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQTtJQUN6QyxDQUFDO0lBRU0sU0FBUyxDQUFDLElBQVk7UUFDM0IsTUFBTSxTQUFTLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsRUFBRSxJQUFJLEVBQUUsV0FBVyxFQUFFLElBQUksRUFBRSxDQUFDO1FBQ2hFLE9BQU8sQ0FBQyxJQUFJLENBQUMsS0FBSyxJQUFJLEVBQUUsRUFBRSxTQUFTLENBQUMsQ0FBQztJQUN2QyxDQUFDO0lBRU0sT0FBTyxDQUFDLElBQVk7UUFDekIsT0FBTyxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsV0FBVyxFQUFFLEtBQUssSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDLENBQUM7SUFDakYsQ0FBQztJQUVPLFFBQVEsQ0FBQyxLQUFlO1FBQzlCLE9BQU8sSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxXQUFXLEVBQUUsS0FBSyxJQUFJLENBQUMsV0FBVyxFQUFFLENBQUMsQ0FBQyxDQUFDO0lBQ3ZHLENBQUM7SUFFTyxXQUFXLENBQUMsS0FBZTtRQUNqQyxPQUFPLElBQUksQ0FBQyxLQUFLLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsQ0FBQyxLQUFLLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsV0FBVyxFQUFFLENBQUMsQ0FBQyxDQUFDO0lBQzdFLENBQUM7SUFFTSxPQUFPLENBQUMsSUFBWTtRQUN6QixPQUFPLENBQUMsR0FBRyxDQUFDLHFCQUFxQixFQUFFLElBQUksQ0FBQyxDQUFBO1FBQ3hDLE1BQU0sSUFBSSxHQUFHLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDaEMsT0FBTyxJQUFJLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQztJQUNqQyxDQUFDOzhHQTVEVSwwQkFBMEI7a0dBQTFCLDBCQUEwQix3U0FTRCxnQkFBZ0Isa0RDbEN0RCw4NUJBNEJBOzsyRkRIYSwwQkFBMEI7a0JBTHRDLFNBQVM7K0JBQ0UseUJBQXlCO3NGQUsxQixJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFFa0QsYUFBYTtzQkFBcEUsU0FBUzt1QkFBQyxlQUFlLEVBQUUsRUFBRSxJQUFJLEVBQUUsZ0JBQWdCLEVBQUUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDb21wb25lbnQsXG4gIElucHV0LFxuICBPbkluaXQsXG4gIE9uQ2hhbmdlcyxcbiAgU2ltcGxlQ2hhbmdlcyxcbiAgVmlld0NoaWxkLFxuICBWaWV3Q29udGFpbmVyUmVmLFxuICBUeXBlLFxuICBBZnRlclZpZXdJbml0LFxuICBDaGFuZ2VEZXRlY3RvclJlZlxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgdGVjaHMgfSBmcm9tICcuL3RlY2hzLXN2Zy90ZWNocy1kYXRhJztcblxuaW50ZXJmYWNlIFRlY2gge1xuICBuYW1lOiBzdHJpbmc7XG4gIGljb246IFR5cGU8YW55Pjtcbn1cblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbGliLWFuZ3VsYXItdGVjaHMtbG9nb3MnLFxuICB0ZW1wbGF0ZVVybDogJy4vYW5ndWxhci10ZWNocy1sb2dvcy5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2FuZ3VsYXItdGVjaHMtbG9nb3MuY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBBbmd1bGFyVGVjaHNMb2dvc0NvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgT25DaGFuZ2VzIHtcbiAgQElucHV0KCkgbGlzdDogc3RyaW5nW10gfCB1bmRlZmluZWQ7XG4gIEBJbnB1dCgpIG5hbWU6IHN0cmluZyB8IHVuZGVmaW5lZDtcbiAgQElucHV0KCkgc2l6ZTogc3RyaW5nIHwgdW5kZWZpbmVkO1xuICBASW5wdXQoKSBsYWJlbDogc3RyaW5nIHwgdW5kZWZpbmVkO1xuICBASW5wdXQoKSBoaWRkZW5MYWJlbDogYm9vbGVhbiB8IHVuZGVmaW5lZDtcbiAgQElucHV0KCkgY2xhc3M6IHN0cmluZyB8IHVuZGVmaW5lZDtcbiAgQElucHV0KCkgaGlkZGVuTG9nb3M6IHN0cmluZ1tdIHwgdW5kZWZpbmVkO1xuXG4gIEBWaWV3Q2hpbGQoJ2ljb25Db250YWluZXInLCB7IHJlYWQ6IFZpZXdDb250YWluZXJSZWYgfSkgaWNvbkNvbnRhaW5lciE6IFZpZXdDb250YWluZXJSZWY7XG5cbiAgdGVjaHM6IFRlY2hbXSA9IHRlY2hzO1xuXG4gIGNvbnN0cnVjdG9yKFxuICAgIHByaXZhdGUgY2RyOiBDaGFuZ2VEZXRlY3RvclJlZlxuICApIHt9XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgdGhpcy51cGRhdGVUZWNocygpO1xuICB9XG5cbiAgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcyk6IHZvaWQge1xuICAgIGlmIChjaGFuZ2VzWydsaXN0J10gfHwgY2hhbmdlc1snaGlkZGVuTG9nb3MnXSkge1xuICAgICAgdGhpcy51cGRhdGVUZWNocygpO1xuICAgIH1cbiAgfVxuXG4gIHByaXZhdGUgdXBkYXRlVGVjaHMoKTogdm9pZCB7XG4gICAgaWYgKHRoaXMubGlzdCkge1xuICAgICAgdGhpcy50ZWNocyA9IHRoaXMuZ2V0VGVjaHModGhpcy5saXN0KTtcbiAgICB9IGVsc2UgaWYgKHRoaXMuaGlkZGVuTG9nb3MpIHtcbiAgICAgIHRoaXMudGVjaHMgPSB0aGlzLmhpZGRlblRlY2hzKHRoaXMuaGlkZGVuTG9nb3MpO1xuICAgIH0gZWxzZSB7XG4gICAgICB0aGlzLnRlY2hzID0gdGhpcy50ZWNocztcbiAgICB9XG5cbiAgICBjb25zb2xlLmxvZygndGhpcy50ZWNoczogJywgdGhpcy50ZWNocylcbiAgfVxuXG4gIHB1YmxpYyB0ZWNoQ2xhc3MobmFtZTogc3RyaW5nKSB7XG4gICAgY29uc3QgY2xhc3NOYW1lID0gdGhpcy5nZXRUZWNoKG5hbWUpPy5uYW1lPy50b0xvd2VyQ2FzZSgpIHx8ICcnO1xuICAgIHJldHVybiBbdGhpcy5jbGFzcyB8fCAnJywgY2xhc3NOYW1lXTtcbiAgfVxuXG4gIHB1YmxpYyBnZXRUZWNoKG5hbWU6IHN0cmluZyk6IFRlY2ggfCB1bmRlZmluZWQge1xuICAgIHJldHVybiB0aGlzLnRlY2hzLmZpbmQoaXRlbSA9PiBpdGVtLm5hbWUudG9Mb3dlckNhc2UoKSA9PT0gbmFtZS50b0xvd2VyQ2FzZSgpKTtcbiAgfVxuXG4gIHByaXZhdGUgZ2V0VGVjaHMoaXRlbXM6IHN0cmluZ1tdKTogVGVjaFtdIHtcbiAgICByZXR1cm4gdGhpcy50ZWNocy5maWx0ZXIodGVjaCA9PiBpdGVtcy5zb21lKGl0ZW0gPT4gdGVjaC5uYW1lLnRvTG93ZXJDYXNlKCkgPT09IGl0ZW0udG9Mb3dlckNhc2UoKSkpO1xuICB9XG5cbiAgcHJpdmF0ZSBoaWRkZW5UZWNocyhpdGVtczogc3RyaW5nW10pOiBUZWNoW10ge1xuICAgIHJldHVybiB0aGlzLnRlY2hzLmZpbHRlcih0ZWNoID0+ICFpdGVtcy5pbmNsdWRlcyh0ZWNoLm5hbWUudG9Mb3dlckNhc2UoKSkpO1xuICB9XG5cbiAgcHVibGljIGdldEljb24obmFtZTogc3RyaW5nKTogVHlwZTxhbnk+IHwgbnVsbCB7XG4gICAgY29uc29sZS5sb2coXCJnZXRJY29uIG5hbWUgaWNvbjogXCIsIG5hbWUpXG4gICAgY29uc3QgdGVjaCA9IHRoaXMuZ2V0VGVjaChuYW1lKTtcbiAgICByZXR1cm4gdGVjaCA/IHRlY2guaWNvbiA6IG51bGw7XG4gIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJ0ZWNoc1wiIFtuZ0NsYXNzXT1cImNsYXNzXCI+XG4gIDxuZy1jb250YWluZXIgKm5nSWY9XCJuYW1lICYmIGdldFRlY2gobmFtZSkgJiYgIWxpc3RcIj5cbiAgICA8ZmlndXJlXG4gICAgICBjbGFzcz1cInRlY2gtY29udGFpbmVyXCJcbiAgICAgIFtuZ0NsYXNzXT1cIlt0ZWNoQ2xhc3MobmFtZSldXCJcbiAgICAgIFtzdHlsZS53aWR0aF09XCJzaXplID8gc2l6ZSA6ICcxMDBweCdcIlxuICAgID5cbiAgICAgIDxuZy1jb250YWluZXIgKm5nQ29tcG9uZW50T3V0bGV0PVwiZ2V0SWNvbihuYW1lKVwiIC8+XG4gICAgICA8ZmlnY2FwdGlvbiBbbmdDbGFzc109XCJ7IHRvb2x0aXA6IGhpZGRlbkxhYmVsIH1cIj5cbiAgICAgICAge3sgbGFiZWwgPyBsYWJlbCA6IGdldFRlY2gobmFtZSk/Lm5hbWUgfX1cbiAgICAgIDwvZmlnY2FwdGlvbj5cbiAgICA8L2ZpZ3VyZT5cbiAgPC9uZy1jb250YWluZXI+XG4gIDxuZy1jb250YWluZXIgKm5nSWY9XCJsaXN0XCI+XG4gICAgPGZpZ3VyZVxuICAgICAgY2xhc3M9XCJ0ZWNoLWNvbnRhaW5lclwiXG4gICAgICAqbmdGb3I9XCJsZXQgdGVjaCBvZiB0ZWNoc1wiXG4gICAgICBbbmdDbGFzc109XCJbdGVjaC5uYW1lLnRvTG93ZXJDYXNlKCldXCJcbiAgICAgIFtzdHlsZS53aWR0aF09XCJzaXplID8gc2l6ZSA6ICcxMDBweCdcIlxuICAgICAgW2F0dHIua2V5XT1cInRlY2gubmFtZVwiXG4gICAgPlxuICAgIDxuZy1jb250YWluZXIgKm5nQ29tcG9uZW50T3V0bGV0PVwiZ2V0SWNvbih0ZWNoLm5hbWUpXCIgLz5cbiAgICAgIDxmaWdjYXB0aW9uIFtuZ0NsYXNzXT1cInsgdG9vbHRpcDogaGlkZGVuTGFiZWwgfVwiPlxuICAgICAgICB7eyB0ZWNoLm5hbWUgfX1cbiAgICAgIDwvZmlnY2FwdGlvbj5cbiAgICA8L2ZpZ3VyZT5cbiAgPC9uZy1jb250YWluZXI+XG48L2Rpdj5cbiJdfQ==
|
|
@@ -1431,15 +1431,6 @@ class AngularTechsLogosComponent {
|
|
|
1431
1431
|
this.updateTechs();
|
|
1432
1432
|
}
|
|
1433
1433
|
}
|
|
1434
|
-
// ngAfterViewInit(): void {
|
|
1435
|
-
// if (this.name) {
|
|
1436
|
-
// const tech = this.getTech(this.name);
|
|
1437
|
-
// if (tech) {
|
|
1438
|
-
// // this.loadIcon(tech.icon);
|
|
1439
|
-
// }
|
|
1440
|
-
// }
|
|
1441
|
-
// this.cdr.detectChanges();
|
|
1442
|
-
// }
|
|
1443
1434
|
updateTechs() {
|
|
1444
1435
|
if (this.list) {
|
|
1445
1436
|
this.techs = this.getTechs(this.list);
|
|
@@ -1450,9 +1441,11 @@ class AngularTechsLogosComponent {
|
|
|
1450
1441
|
else {
|
|
1451
1442
|
this.techs = this.techs;
|
|
1452
1443
|
}
|
|
1444
|
+
console.log('this.techs: ', this.techs);
|
|
1453
1445
|
}
|
|
1454
1446
|
techClass(name) {
|
|
1455
|
-
|
|
1447
|
+
const className = this.getTech(name)?.name?.toLowerCase() || '';
|
|
1448
|
+
return [this.class || '', className];
|
|
1456
1449
|
}
|
|
1457
1450
|
getTech(name) {
|
|
1458
1451
|
return this.techs.find(item => item.name.toLowerCase() === name.toLowerCase());
|
|
@@ -1463,15 +1456,17 @@ class AngularTechsLogosComponent {
|
|
|
1463
1456
|
hiddenTechs(items) {
|
|
1464
1457
|
return this.techs.filter(tech => !items.includes(tech.name.toLowerCase()));
|
|
1465
1458
|
}
|
|
1466
|
-
getIcon(
|
|
1467
|
-
|
|
1459
|
+
getIcon(name) {
|
|
1460
|
+
console.log("getIcon name icon: ", name);
|
|
1461
|
+
const tech = this.getTech(name);
|
|
1462
|
+
return tech ? tech.icon : null;
|
|
1468
1463
|
}
|
|
1469
1464
|
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 }); }
|
|
1470
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.6", type: AngularTechsLogosComponent, selector: "lib-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(
|
|
1465
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.6", type: AngularTechsLogosComponent, selector: "lib-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=\"list\">\n <figure\n class=\"tech-container\"\n *ngFor=\"let tech of techs\"\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"] }] }); }
|
|
1471
1466
|
}
|
|
1472
1467
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: AngularTechsLogosComponent, decorators: [{
|
|
1473
1468
|
type: Component,
|
|
1474
|
-
args: [{ selector: 'lib-angular-techs-logos', 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(
|
|
1469
|
+
args: [{ selector: 'lib-angular-techs-logos', 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=\"list\">\n <figure\n class=\"tech-container\"\n *ngFor=\"let tech of techs\"\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"] }]
|
|
1475
1470
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { list: [{
|
|
1476
1471
|
type: Input
|
|
1477
1472
|
}], name: [{
|