angular-techs-logos 0.1.26 → 0.1.27

package/README.md

@@ -1,43 +1,43 @@
-# angular-techs-logos
-
-A list with logos company and techs
-
-
-<img alt="A list with logos company and techs screenshot" width="100%" src="https://raw.githubusercontent.com/criar-art/angular-techs-logos/master/public/screen-angular-techs-logos.png" />
-
-Install
-```bash
-npm install angular-techs-logos
-```
-
-Usage basic
-```ts
-import AngularTechsLogosModule from 'angular-techs-logos';
-
-// Example of imports within @NgModule or @Component
-imports: [ AngularTechsLogosModule ]
-```
-
-```html
-<!-- list all logos -->
-<angular-techs-logos />
-
-<!-- single icon -->
-<angular-techs-logos name="javascript" />
-
-<!-- list limited logos -->
-<angular-techs-logos [list]="['angular','javascript', 'react', 'angular']" />
-
-<!-- list all logos with hiddenLogos -->
-<angular-techs-logos [hiddenLogos]="['angular','javascript', 'react', 'angular', 'android']" />
-
-<!-- Hidden label -->
-<angular-techs-logos name="javascript" [hiddenLabel]="true" />
-<angular-techs-logos [hiddenLabel]="true" />
-
-<!-- single change label name -->
-<angular-techs-logos name="javascript" label="New JavaScript" />
-
-<!-- Modification of size component -->
-<angular-techs-logos name="javascript" size="220px" />
-```
+# angular-techs-logos
+
+A list with logos company and techs
+
+
+<img alt="A list with logos company and techs screenshot" width="100%" src="https://raw.githubusercontent.com/criar-art/angular-techs-logos/master/public/screen-angular-techs-logos.png" />
+
+Install
+```bash
+npm install angular-techs-logos
+```
+
+Usage basic
+```ts
+import AngularTechsLogosModule from 'angular-techs-logos';
+
+// Example of imports within @NgModule or @Component
+imports: [ AngularTechsLogosModule ]
+```
+
+```html
+<!-- list all logos -->
+<angular-techs-logos />
+
+<!-- single icon -->
+<angular-techs-logos name="javascript" />
+
+<!-- list limited logos -->
+<angular-techs-logos [list]="['angular','javascript', 'react', 'angular']" />
+
+<!-- list all logos with hiddenLogos -->
+<angular-techs-logos [hiddenLogos]="['angular','javascript', 'react', 'angular', 'android']" />
+
+<!-- Hidden label -->
+<angular-techs-logos name="javascript" [hiddenLabel]="true" />
+<angular-techs-logos [hiddenLabel]="true" />
+
+<!-- single change label name -->
+<angular-techs-logos name="javascript" label="New JavaScript" />
+
+<!-- Modification of size component -->
+<angular-techs-logos name="javascript" size="220px" />
+```

package/esm2022/angular-techs-logos.mjs

@@ -1,2 +1 @@
-export * from './public-api';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYW5ndWxhci10ZWNocy1sb2dvcy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL2FuZ3VsYXItdGVjaHMtbG9nb3Mvc3JjL2FuZ3VsYXItdGVjaHMtbG9nb3MudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSUEsY0FBYyxjQUFjLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEdlbmVyYXRlZCBidW5kbGUgaW5kZXguIERvIG5vdCBlZGl0LlxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vcHVibGljLWFwaSc7XG4iXX0=
+export*from"./public-api";

package/esm2022/lib/angular-techs-logos.component.mjs

@@ -1,90 +1 @@
-import { Component, Input, ViewChild, ViewContainerRef, ViewEncapsulation, signal } from '@angular/core';
-import { techs } from './techs/techs-data';
-import * as i0 from "@angular/core";
-import * as i1 from "@angular/common";
-export class AngularTechsLogosComponent {
-    constructor() {
-        this.techs = techs;
-        this.listSignal = signal([]);
-        this.hiddenLogosSignal = signal([]);
-        this.techsList = signal(this.techs);
-    }
-    ngOnInit() {
-        if (!this.name) {
-            this.updateTechs();
-        }
-    }
-    ngOnChanges(changes) {
-        if (changes['list']) {
-            this.listSignal.set(this.list);
-        }
-        if (changes['hiddenLogos']) {
-            this.hiddenLogosSignal.set(this.hiddenLogos);
-        }
-        if (!this.name) {
-            this.updateTechs();
-        }
-    }
-    updateTechs() {
-        const currentList = this.listSignal();
-        const currentHiddenLogos = this.hiddenLogosSignal();
-        if (currentList && this.list) {
-            this.techsList.set(this.getTechs(currentList));
-        }
-        else if (currentHiddenLogos && this.hiddenLogos) {
-            this.techsList.set(this.hiddenTechs(currentHiddenLogos));
-        }
-        else {
-            this.techsList.set(this.techs);
-        }
-    }
-    techClass(name) {
-        const className = name?.toLowerCase() || '';
-        return [this.class || '', className];
-    }
-    getTech(name) {
-        return this.techs.find((item) => item.name.toLowerCase() === name.toLowerCase());
-    }
-    getTechs(items) {
-        return this.techs.filter((tech) => {
-            if (typeof tech.name !== 'string')
-                return false;
-            return items.some((item) => {
-                if (typeof item !== 'string')
-                    return false;
-                return tech.name.toLowerCase() === item.toLowerCase();
-            });
-        });
-    }
-    hiddenTechs(items) {
-        return this.techs.filter((tech) => !items.includes(tech.name.toLowerCase()));
-    }
-    getIcon(name) {
-        const tech = this.getTech(name);
-        return tech ? tech.icon : null;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AngularTechsLogosComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", 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\">\r\n  @if (name && getTech(name) && !list) {\r\n    <figure\r\n      class=\"tech-container\"\r\n      [ngClass]=\"techClass(name)\"\r\n      [style.width]=\"size ? size : '100px'\"\r\n    >\r\n      <ng-container *ngComponentOutlet=\"getIcon(name)\" />\r\n      <figcaption [ngClass]=\"{ tooltip: hiddenLabel }\">\r\n        {{ label ? label : getTech(name)?.name }}\r\n      </figcaption>\r\n    </figure>\r\n  } @else if (!name && (list || hiddenLogos || techsList())) {\r\n    @for (tech of techsList(); track tech.name;) {\r\n      <figure\r\n        class=\"tech-container\"\r\n        [ngClass]=\"[tech.name.toLowerCase()]\"\r\n        [style.width]=\"size ? size : '100px'\"\r\n        [attr.key]=\"tech.name\"\r\n      >\r\n        <ng-container *ngComponentOutlet=\"getIcon(tech.name)\" />\r\n        <figcaption [ngClass]=\"{ tooltip: hiddenLabel }\">\r\n          {{ tech.name }}\r\n        </figcaption>\r\n      </figure>\r\n    }\r\n  }\r\n</div>\r\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"] }], encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AngularTechsLogosComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'angular-techs-logos', encapsulation: ViewEncapsulation.None, template: "<div class=\"techs\" [ngClass]=\"class\">\r\n  @if (name && getTech(name) && !list) {\r\n    <figure\r\n      class=\"tech-container\"\r\n      [ngClass]=\"techClass(name)\"\r\n      [style.width]=\"size ? size : '100px'\"\r\n    >\r\n      <ng-container *ngComponentOutlet=\"getIcon(name)\" />\r\n      <figcaption [ngClass]=\"{ tooltip: hiddenLabel }\">\r\n        {{ label ? label : getTech(name)?.name }}\r\n      </figcaption>\r\n    </figure>\r\n  } @else if (!name && (list || hiddenLogos || techsList())) {\r\n    @for (tech of techsList(); track tech.name;) {\r\n      <figure\r\n        class=\"tech-container\"\r\n        [ngClass]=\"[tech.name.toLowerCase()]\"\r\n        [style.width]=\"size ? size : '100px'\"\r\n        [attr.key]=\"tech.name\"\r\n      >\r\n        <ng-container *ngComponentOutlet=\"getIcon(tech.name)\" />\r\n        <figcaption [ngClass]=\"{ tooltip: hiddenLabel }\">\r\n          {{ tech.name }}\r\n        </figcaption>\r\n      </figure>\r\n    }\r\n  }\r\n</div>\r\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"] }]
-        }], propDecorators: { list: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], hiddenLabel: [{
-                type: Input
-            }], class: [{
-                type: Input
-            }], hiddenLogos: [{
-                type: Input
-            }], iconContainer: [{
-                type: ViewChild,
-                args: ['iconContainer', { read: ViewContainerRef }]
-            }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYW5ndWxhci10ZWNocy1sb2dvcy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyLXRlY2hzLWxvZ29zL3NyYy9saWIvYW5ndWxhci10ZWNocy1sb2dvcy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyLXRlY2hzLWxvZ29zL3NyYy9saWIvYW5ndWxhci10ZWNocy1sb2dvcy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsU0FBUyxFQUNULEtBQUssRUFJTCxTQUFTLEVBQ1QsZ0JBQWdCLEVBRWhCLGlCQUFpQixFQUNqQixNQUFNLEVBQ1AsTUFBTSxlQUFlLENBQUM7QUFFdkIsT0FBTyxFQUFFLEtBQUssRUFBUSxNQUFNLG9CQUFvQixDQUFDOzs7QUFRakQsTUFBTSxPQUFPLDBCQUEwQjtJQU52QztRQWtCRSxVQUFLLEdBQVcsS0FBSyxDQUFDO1FBQ3RCLGVBQVUsR0FBRyxNQUFNLENBQXVCLEVBQUUsQ0FBQyxDQUFDO1FBQzlDLHNCQUFpQixHQUFHLE1BQU0sQ0FBdUIsRUFBRSxDQUFDLENBQUM7UUFDckQsY0FBUyxHQUFHLE1BQU0sQ0FBUyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7S0FpRXhDO0lBL0RDLFFBQVE7UUFDTixJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksRUFBRSxDQUFDO1lBQ2YsSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDO1FBQ3JCLENBQUM7SUFDSCxDQUFDO0lBRUQsV0FBVyxDQUFDLE9BQXNCO1FBQ2hDLElBQUksT0FBTyxDQUFDLE1BQU0sQ0FBQyxFQUFFLENBQUM7WUFDcEIsSUFBSSxDQUFDLFVBQVUsQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQ2pDLENBQUM7UUFDRCxJQUFJLE9BQU8sQ0FBQyxhQUFhLENBQUMsRUFBRSxDQUFDO1lBQzNCLElB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LElBQUk7c0JBQVosS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFHTixhQUFhO3NCQURaLFNBQVM7dUJBQUMsZUFBZSxFQUFFLEVBQUUsSUFBSSxFQUFFLGdCQUFnQixFQUFFIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcclxuICBDb21wb25lbnQsXHJcbiAgSW5wdXQsXHJcbiAgT25Jbml0LFxyXG4gIE9uQ2hhbmdlcyxcclxuICBTaW1wbGVDaGFuZ2VzLFxyXG4gIFZpZXdDaGlsZCxcclxuICBWaWV3Q29udGFpbmVyUmVmLFxyXG4gIFR5cGUsXHJcbiAgVmlld0VuY2Fwc3VsYXRpb24sXHJcbiAgc2lnbmFsXHJcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5pbXBvcnQgeyB0ZWNocywgVGVjaCB9IGZyb20gJy4vdGVjaHMvdGVjaHMtZGF0YSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2FuZ3VsYXItdGVjaHMtbG9nb3MnLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9hbmd1bGFyLXRlY2hzLWxvZ29zLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi9hbmd1bGFyLXRlY2hzLWxvZ29zLmNvbXBvbmVudC5zY3NzJ10sXHJcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcclxufSlcclxuZXhwb3J0IGNsYXNzIEFuZ3VsYXJUZWNoc0xvZ29zQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBPbkNoYW5nZXMge1xyXG4gIEBJbnB1dCgpIGxpc3Q6IHN0cmluZ1tdIHwgdW5kZWZpbmVkO1xyXG4gIEBJbnB1dCgpIG5hbWU6IHN0cmluZyB8IHVuZGVmaW5lZDtcclxuICBASW5wdXQoKSBzaXplOiBzdHJpbmcgfCB1bmRlZmluZWQ7XHJcbiAgQElucHV0KCkgbGFiZWw6IHN0cmluZyB8IHVuZGVmaW5lZDtcclxuICBASW5wdXQoKSBoaWRkZW5MYWJlbDogYm9vbGVhbiB8IHVuZGVmaW5lZDtcclxuICBASW5wdXQoKSBjbGFzczogc3RyaW5nIHwgdW5kZWZpbmVkO1xyXG4gIEBJbnB1dCgpIGhpZGRlbkxvZ29zOiBzdHJpbmdbXSB8IHVuZGVmaW5lZDtcclxuXHJcbiAgQFZpZXdDaGlsZCgnaWNvbkNvbnRhaW5lcicsIHsgcmVhZDogVmlld0NvbnRhaW5lclJlZiB9KVxyXG4gIGljb25Db250YWluZXIhOiBWaWV3Q29udGFpbmVyUmVmO1xyXG5cclxuICB0ZWNoczogVGVjaFtdID0gdGVjaHM7XHJcbiAgbGlzdFNpZ25hbCA9IHNpZ25hbDxzdHJpbmdbXSB8IHVuZGVmaW5lZD4oW10pO1xyXG4gIGhpZGRlbkxvZ29zU2lnbmFsID0gc2lnbmFsPHN0cmluZ1tdIHwgdW5kZWZpbmVkPihbXSk7XHJcbiAgdGVjaHNMaXN0ID0gc2lnbmFsPFRlY2hbXT4odGhpcy50ZWNocyk7XHJcblxyXG4gIG5nT25Jbml0KCk6IHZvaWQge1xyXG4gICAgaWYgKCF0aGlzLm5hbWUpIHtcclxuICAgICAgdGhpcy51cGRhdGVUZWNocygpO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcyk6IHZvaWQge1xyXG4gICAgaWYgKGNoYW5nZXNbJ2xpc3QnXSkge1xyXG4gICAgICB0aGlzLmxpc3RTaWduYWwuc2V0KHRoaXMubGlzdCk7XHJcbiAgICB9XHJcbiAgICBpZiAoY2hhbmdlc1snaGlkZGVuTG9nb3MnXSkge1xyXG4gICAgICB0aGlzLmhpZGRlbkxvZ29zU2lnbmFsLnNldCh0aGlzLmhpZGRlbkxvZ29zKTtcclxuICAgIH1cclxuXHJcbiAgICBpZiAoIXRoaXMubmFtZSkge1xyXG4gICAgICB0aGlzLnVwZGF0ZVRlY2hzKCk7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICBwcml2YXRlIHVwZGF0ZVRlY2hzKCk6IHZvaWQge1xyXG4gICAgY29uc3QgY3VycmVudExpc3QgPSB0aGlzLmxpc3RTaWduYWwoKTtcclxuICAgIGNvbnN0IGN1cnJlbnRIaWRkZW5Mb2dvcyA9IHRoaXMuaGlkZGVuTG9nb3NTaWduYWwoKTtcclxuXHJcbiAgICBpZiAoY3VycmVudExpc3QgJiYgdGhpcy5saXN0KSB7XHJcbiAgICAgIHRoaXMudGVjaHNMaXN0LnNldCh0aGlzLmdldFRlY2hzKGN1cnJlbnRMaXN0KSk7XHJcbiAgICB9IGVsc2UgaWYgKGN1cnJlbnRIaWRkZW5Mb2dvcyAmJiB0aGlzLmhpZGRlbkxvZ29zKSB7XHJcbiAgICAgIHRoaXMudGVjaHNMaXN0LnNldCh0aGlzLmhpZGRlblRlY2hzKGN1cnJlbnRIaWRkZW5Mb2dvcykpO1xyXG4gICAgfSBlbHNlIHtcclxuICAgICAgdGhpcy50ZWNoc0xpc3Quc2V0KHRoaXMudGVjaHMpO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgcHVibGljIHRlY2hDbGFzcyhuYW1lOiBzdHJpbmcpOiBzdHJpbmdbXSB7XHJcbiAgICBjb25zdCBjbGFzc05hbWUgPSBuYW1lPy50b0xvd2VyQ2FzZSgpIHx8ICcnO1xyXG4gICAgcmV0dXJuIFt0aGlzLmNsYXNzIHx8ICcnLCBjbGFzc05hbWVdO1xyXG4gIH1cclxuXHJcbiAgcHVibGljIGdldFRlY2gobmFtZTogc3RyaW5nKTogVGVjaCB8IHVuZGVmaW5lZCB7XHJcbiAgICByZXR1cm4gdGhpcy50ZWNocy5maW5kKFxyXG4gICAgICAoaXRlbSkgPT4gaXRlbS5uYW1lLnRvTG93ZXJDYXNlKCkgPT09IG5hbWUudG9Mb3dlckNhc2UoKVxyXG4gICAgKTtcclxuICB9XHJcblxyXG4gIHByaXZhdGUgZ2V0VGVjaHMoaXRlbXM6IHN0cmluZ1tdKTogVGVjaFtdIHtcclxuICAgIHJldHVybiB0aGlzLnRlY2hzLmZpbHRlcigodGVjaCkgPT4ge1xyXG4gICAgICBpZiAodHlwZW9mIHRlY2gubmFtZSAhPT0gJ3N0cmluZycpIHJldHVybiBmYWxzZTtcclxuICAgICAgcmV0dXJuIGl0ZW1zLnNvbWUoKGl0ZW0pID0+IHtcclxuICAgICAgICBpZiAodHlwZW9mIGl0ZW0gIT09ICdzdHJpbmcnKSByZXR1cm4gZmFsc2U7XHJcbiAgICAgICAgcmV0dXJuIHRlY2gubmFtZS50b0xvd2VyQ2FzZSgpID09PSBpdGVtLnRvTG93ZXJDYXNlKCk7XHJcbiAgICAgIH0pO1xyXG4gICAgfSk7XHJcbiAgfVxyXG5cclxuICBwcml2YXRlIGhpZGRlblRlY2hzKGl0ZW1zOiBzdHJpbmdbXSk6IFRlY2hbXSB7XHJcbiAgICByZXR1cm4gdGhpcy50ZWNocy5maWx0ZXIoXHJcbiAgICAgICh0ZWNoKSA9PiAhaXRlbXMuaW5jbHVkZXModGVjaC5uYW1lLnRvTG93ZXJDYXNlKCkpXHJcbiAgICApO1xyXG4gIH1cclxuXHJcbiAgcHVibGljIGdldEljb24obmFtZTogc3RyaW5nKTogVHlwZTxhbnk+IHwgbnVsbCB7XHJcbiAgICBjb25zdCB0ZWNoID0gdGhpcy5nZXRUZWNoKG5hbWUpO1xyXG4gICAgcmV0dXJuIHRlY2ggPyB0ZWNoLmljb24gOiBudWxsO1xyXG4gIH1cclxufVxyXG4iLCI8ZGl2IGNsYXNzPVwidGVjaHNcIiBbbmdDbGFzc109XCJjbGFzc1wiPlxyXG4gIEBpZiAobmFtZSAmJiBnZXRUZWNoKG5hbWUpICYmICFsaXN0KSB7XHJcbiAgICA8ZmlndXJlXHJcbiAgICAgIGNsYXNzPVwidGVjaC1jb250YWluZXJcIlxyXG4gICAgICBbbmdDbGFzc109XCJ0ZWNoQ2xhc3MobmFtZSlcIlxyXG4gICAgICBbc3R5bGUud2lkdGhdPVwic2l6ZSA/IHNpemUgOiAnMTAwcHgnXCJcclxuICAgID5cclxuICAgICAgPG5nLWNvbnRhaW5lciAqbmdDb21wb25lbnRPdXRsZXQ9XCJnZXRJY29uKG5hbWUpXCIgLz5cclxuICAgICAgPGZpZ2NhcHRpb24gW25nQ2xhc3NdPVwieyB0b29sdGlwOiBoaWRkZW5MYWJlbCB9XCI+XHJcbiAgICAgICAge3sgbGFiZWwgPyBsYWJlbCA6IGdldFRlY2gobmFtZSk/Lm5hbWUgfX1cclxuICAgICAgPC9maWdjYXB0aW9uPlxyXG4gICAgPC9maWd1cmU+XHJcbiAgfSBAZWxzZSBpZiAoIW5hbWUgJiYgKGxpc3QgfHwgaGlkZGVuTG9nb3MgfHwgdGVjaHNMaXN0KCkpKSB7XHJcbiAgICBAZm9yICh0ZWNoIG9mIHRlY2hzTGlzdCgpOyB0cmFjayB0ZWNoLm5hbWU7KSB7XHJcbiAgICAgIDxmaWd1cmVcclxuICAgICAgICBjbGFzcz1cInRlY2gtY29udGFpbmVyXCJcclxuICAgICAgICBbbmdDbGFzc109XCJbdGVjaC5uYW1lLnRvTG93ZXJDYXNlKCldXCJcclxuICAgICAgICBbc3R5bGUud2lkdGhdPVwic2l6ZSA/IHNpemUgOiAnMTAwcHgnXCJcclxuICAgICAgICBbYXR0ci5rZXldPVwidGVjaC5uYW1lXCJcclxuICAgICAgPlxyXG4gICAgICAgIDxuZy1jb250YWluZXIgKm5nQ29tcG9uZW50T3V0bGV0PVwiZ2V0SWNvbih0ZWNoLm5hbWUpXCIgLz5cclxuICAgICAgICA8ZmlnY2FwdGlvbiBbbmdDbGFzc109XCJ7IHRvb2x0aXA6IGhpZGRlbkxhYmVsIH1cIj5cclxuICAgICAgICAgIHt7IHRlY2gubmFtZSB9fVxyXG4gICAgICAgIDwvZmlnY2FwdGlvbj5cclxuICAgICAgPC9maWd1cmU+XHJcbiAgICB9XHJcbiAgfVxyXG48L2Rpdj5cclxuIl19
+import{Component,Input,ViewChild,ViewContainerRef,ViewEncapsulation,signal}from"@angular/core";import{techs}from"./techs/techs-data";import*as i0 from"@angular/core";import*as i1 from"@angular/common";export class AngularTechsLogosComponent{constructor(){this.techs=techs,this.listSignal=signal([]),this.hiddenLogosSignal=signal([]),this.techsList=signal(this.techs)}ngOnInit(){this.name||this.updateTechs()}ngOnChanges(t){t.list&&this.listSignal.set(this.list),t.hiddenLogos&&this.hiddenLogosSignal.set(this.hiddenLogos),this.name||this.updateTechs()}updateTechs(){const t=this.listSignal(),e=this.hiddenLogosSignal();t&&this.list?this.techsList.set(this.getTechs(t)):e&&this.hiddenLogos?this.techsList.set(this.hiddenTechs(e)):this.techsList.set(this.techs)}techClass(t){const e=t?.toLowerCase()||"";return[this.class||"",e]}getTech(t){return this.techs.find((e=>e.name.toLowerCase()===t.toLowerCase()))}getTechs(t){return this.techs.filter((e=>"string"==typeof e.name&&t.some((t=>"string"==typeof t&&e.name.toLowerCase()===t.toLowerCase()))))}hiddenTechs(t){return this.techs.filter((e=>!t.includes(e.name.toLowerCase())))}getIcon(t){const e=this.getTech(t);return e?e.icon:null}static{this.ɵfac=i0.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"18.2.8",ngImport:i0,type:AngularTechsLogosComponent,deps:[],target:i0.ɵɵFactoryTarget.Component})}static{this.ɵcmp=i0.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"18.2.8",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:!0,predicate:["iconContainer"],descendants:!0,read:ViewContainerRef}],usesOnChanges:!0,ngImport:i0,template:'<div class="techs" [ngClass]="class">\n  @if (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  } @else if (!name && (list || hiddenLogos || techsList())) {\n    @for (tech of techsList(); track tech.name;) {\n      <figure\n        class="tech-container"\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    }\n  }\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"]}],encapsulation:i0.ViewEncapsulation.None})}}i0.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"18.2.8",ngImport:i0,type:AngularTechsLogosComponent,decorators:[{type:Component,args:[{selector:"angular-techs-logos",encapsulation:ViewEncapsulation.None,template:'<div class="techs" [ngClass]="class">\n  @if (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  } @else if (!name && (list || hiddenLogos || techsList())) {\n    @for (tech of techsList(); track tech.name;) {\n      <figure\n        class="tech-container"\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    }\n  }\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"]}]}],propDecorators:{list:[{type:Input}],name:[{type:Input}],size:[{type:Input}],label:[{type:Input}],hiddenLabel:[{type:Input}],class:[{type:Input}],hiddenLogos:[{type:Input}],iconContainer:[{type:ViewChild,args:["iconContainer",{read:ViewContainerRef}]}]}});