angular-techs-logos 0.0.14 → 0.0.15
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.
|
@@ -46,11 +46,11 @@ export class AngularTechsLogosComponent {
|
|
|
46
46
|
return tech ? tech.icon : null;
|
|
47
47
|
}
|
|
48
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 }); }
|
|
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 || techs\">\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"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
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=\"!name && list || techs\">\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"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
50
50
|
}
|
|
51
51
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: AngularTechsLogosComponent, decorators: [{
|
|
52
52
|
type: Component,
|
|
53
|
-
args: [{ selector: 'lib-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=\"list || techs\">\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"] }]
|
|
53
|
+
args: [{ selector: 'lib-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 || techs\">\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"] }]
|
|
54
54
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { list: [{
|
|
55
55
|
type: Input
|
|
56
56
|
}], name: [{
|
|
@@ -69,4 +69,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
|
|
|
69
69
|
type: ViewChild,
|
|
70
70
|
args: ['iconContainer', { read: ViewContainerRef }]
|
|
71
71
|
}] } });
|
|
72
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
72
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYW5ndWxhci10ZWNocy1sb2dvcy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyLXRlY2hzLWxvZ29zL3NyYy9saWIvYW5ndWxhci10ZWNocy1sb2dvcy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyLXRlY2hzLWxvZ29zL3NyYy9saWIvYW5ndWxhci10ZWNocy1sb2dvcy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsU0FBUyxFQUNULEtBQUssRUFJTCxTQUFTLEVBQ1QsZ0JBQWdCLEVBRWhCLGlCQUFpQixFQUVsQixNQUFNLGVBQWUsQ0FBQztBQUV2QixPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0sd0JBQXdCLENBQUM7OztBQWEvQyxNQUFNLE9BQU8sMEJBQTBCO0lBYXJDLFlBQ1UsR0FBc0I7UUFBdEIsUUFBRyxHQUFILEdBQUcsQ0FBbUI7UUFIaEMsVUFBSyxHQUFXLEtBQUssQ0FBQztJQUluQixDQUFDO0lBRUosUUFBUTtRQUNOLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQztJQUNyQixDQUFDO0lBRUQsV0FBVyxDQUFDLE9BQXNCO1FBQ2hDLElBQUksT0FBTyxDQUFDLE1BQU0sQ0FBQyxJQUFJLE9BQU8sQ0FBQyxhQUFhLENBQUMsRUFBRSxDQUFDO1lBQzlDLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQztRQUNyQixDQUFDO0lBQ0gsQ0FBQztJQUVPLFdBQVc7UUFDakIsSUFBSSxJQUFJLENBQUMsSUFBSSxFQUFFLENBQUM7WUFDZCxJQUFJLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQ3hDLENBQUM7YUFBTSxJQUFJLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQztZQUM1QixJQUFJLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxDQUFDO1FBQ2xELENBQUM7YUFBTSxDQUFDO1lBQ04sSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDO1FBQzFCLENBQUM7UUFFRCxPQUFPLENBQUMsR0FBRyxDQUFDLGNBQWMsRUFBRSxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUE7SUFDekMsQ0FBQztJQUVNLFNBQVMsQ0FBQyxJQUFZO1FBQzNCLE1BQU0sU0FBUyxHQUFHLElBQUksRUFBRSxXQUFXLEVBQUUsSUFBSSxFQUFFLENBQUM7UUFDNUMsT0FBTyxDQUFDLElBQUksQ0FBQyxLQUFLLElBQUksRUFBRSxFQUFFLFNBQVMsQ0FBQyxDQUFDO0lBQ3ZDLENBQUM7SUFFTSxPQUFPLENBQUMsSUFBWTtRQUN6QixPQUFPLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxXQUFXLEVBQUUsS0FBSyxJQUFJLENBQUMsV0FBVyxFQUFFLENBQUMsQ0FBQztJQUNqRixDQUFDO0lBRU8sUUFBUSxDQUFDLEtBQWU7UUFDOUIsT0FBTyxJQUFJLENBQUMsS0FBSyxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFdBQVcsRUFBRSxLQUFLLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQyxDQUFDLENBQUM7SUFDdkcsQ0FBQztJQUVPLFdBQVcsQ0FBQyxLQUFlO1FBQ2pDLE9BQU8sSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxDQUFDLEtBQUssQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQyxDQUFDLENBQUM7SUFDN0UsQ0FBQztJQUVNLE9BQU8sQ0FBQyxJQUFZO1FBQ3pCLE9BQU8sQ0FBQyxHQUFHLENBQUMscUJBQXFCLEVBQUUsSUFBSSxDQUFDLENBQUE7UUFDeEMsTUFBTSxJQUFJLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUNoQyxPQUFPLElBQUksQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDO0lBQ2pDLENBQUM7OEdBNURVLDBCQUEwQjtrR0FBMUIsMEJBQTBCLHdTQVNELGdCQUFnQixrRENuQ3RELDg2QkE0QkE7OzJGREZhLDBCQUEwQjtrQkFOdEMsU0FBUzsrQkFDRSx5QkFBeUIsaUJBR3BCLGlCQUFpQixDQUFDLElBQUk7c0ZBRzVCLElBQUk7c0JBQVosS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxXQUFXO3NCQUFuQixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxXQUFXO3NCQUFuQixLQUFLO2dCQUVrRCxhQUFhO3NCQUFwRSxTQUFTO3VCQUFDLGVBQWUsRUFBRSxFQUFFLElBQUksRUFBRSxnQkFBZ0IsRUFBRSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENvbXBvbmVudCxcbiAgSW5wdXQsXG4gIE9uSW5pdCxcbiAgT25DaGFuZ2VzLFxuICBTaW1wbGVDaGFuZ2VzLFxuICBWaWV3Q2hpbGQsXG4gIFZpZXdDb250YWluZXJSZWYsXG4gIFR5cGUsXG4gIFZpZXdFbmNhcHN1bGF0aW9uLFxuICBDaGFuZ2VEZXRlY3RvclJlZlxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgdGVjaHMgfSBmcm9tICcuL3RlY2hzLXN2Zy90ZWNocy1kYXRhJztcblxuaW50ZXJmYWNlIFRlY2gge1xuICBuYW1lOiBzdHJpbmc7XG4gIGljb246IFR5cGU8YW55Pjtcbn1cblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbGliLWFuZ3VsYXItdGVjaHMtbG9nb3MnLFxuICB0ZW1wbGF0ZVVybDogJy4vYW5ndWxhci10ZWNocy1sb2dvcy5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2FuZ3VsYXItdGVjaHMtbG9nb3MuY29tcG9uZW50LnNjc3MnXSxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbn0pXG5leHBvcnQgY2xhc3MgQW5ndWxhclRlY2hzTG9nb3NDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIE9uQ2hhbmdlcyB7XG4gIEBJbnB1dCgpIGxpc3Q6IHN0cmluZ1tdIHwgdW5kZWZpbmVkO1xuICBASW5wdXQoKSBuYW1lOiBzdHJpbmcgfCB1bmRlZmluZWQ7XG4gIEBJbnB1dCgpIHNpemU6IHN0cmluZyB8IHVuZGVmaW5lZDtcbiAgQElucHV0KCkgbGFiZWw6IHN0cmluZyB8IHVuZGVmaW5lZDtcbiAgQElucHV0KCkgaGlkZGVuTGFiZWw6IGJvb2xlYW4gfCB1bmRlZmluZWQ7XG4gIEBJbnB1dCgpIGNsYXNzOiBzdHJpbmcgfCB1bmRlZmluZWQ7XG4gIEBJbnB1dCgpIGhpZGRlbkxvZ29zOiBzdHJpbmdbXSB8IHVuZGVmaW5lZDtcblxuICBAVmlld0NoaWxkKCdpY29uQ29udGFpbmVyJywgeyByZWFkOiBWaWV3Q29udGFpbmVyUmVmIH0pIGljb25Db250YWluZXIhOiBWaWV3Q29udGFpbmVyUmVmO1xuXG4gIHRlY2hzOiBUZWNoW10gPSB0ZWNocztcblxuICBjb25zdHJ1Y3RvcihcbiAgICBwcml2YXRlIGNkcjogQ2hhbmdlRGV0ZWN0b3JSZWZcbiAgKSB7fVxuXG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIHRoaXMudXBkYXRlVGVjaHMoKTtcbiAgfVxuXG4gIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpOiB2b2lkIHtcbiAgICBpZiAoY2hhbmdlc1snbGlzdCddIHx8IGNoYW5nZXNbJ2hpZGRlbkxvZ29zJ10pIHtcbiAgICAgIHRoaXMudXBkYXRlVGVjaHMoKTtcbiAgICB9XG4gIH1cblxuICBwcml2YXRlIHVwZGF0ZVRlY2hzKCk6IHZvaWQge1xuICAgIGlmICh0aGlzLmxpc3QpIHtcbiAgICAgIHRoaXMudGVjaHMgPSB0aGlzLmdldFRlY2hzKHRoaXMubGlzdCk7XG4gICAgfSBlbHNlIGlmICh0aGlzLmhpZGRlbkxvZ29zKSB7XG4gICAgICB0aGlzLnRlY2hzID0gdGhpcy5oaWRkZW5UZWNocyh0aGlzLmhpZGRlbkxvZ29zKTtcbiAgICB9IGVsc2Uge1xuICAgICAgdGhpcy50ZWNocyA9IHRoaXMudGVjaHM7XG4gICAgfVxuXG4gICAgY29uc29sZS5sb2coJ3RoaXMudGVjaHM6ICcsIHRoaXMudGVjaHMpXG4gIH1cblxuICBwdWJsaWMgdGVjaENsYXNzKG5hbWU6IHN0cmluZykge1xuICAgIGNvbnN0IGNsYXNzTmFtZSA9IG5hbWU/LnRvTG93ZXJDYXNlKCkgfHwgJyc7XG4gICAgcmV0dXJuIFt0aGlzLmNsYXNzIHx8ICcnLCBjbGFzc05hbWVdO1xuICB9XG5cbiAgcHVibGljIGdldFRlY2gobmFtZTogc3RyaW5nKTogVGVjaCB8IHVuZGVmaW5lZCB7XG4gICAgcmV0dXJuIHRoaXMudGVjaHMuZmluZChpdGVtID0+IGl0ZW0ubmFtZS50b0xvd2VyQ2FzZSgpID09PSBuYW1lLnRvTG93ZXJDYXNlKCkpO1xuICB9XG5cbiAgcHJpdmF0ZSBnZXRUZWNocyhpdGVtczogc3RyaW5nW10pOiBUZWNoW10ge1xuICAgIHJldHVybiB0aGlzLnRlY2hzLmZpbHRlcih0ZWNoID0+IGl0ZW1zLnNvbWUoaXRlbSA9PiB0ZWNoLm5hbWUudG9Mb3dlckNhc2UoKSA9PT0gaXRlbS50b0xvd2VyQ2FzZSgpKSk7XG4gIH1cblxuICBwcml2YXRlIGhpZGRlblRlY2hzKGl0ZW1zOiBzdHJpbmdbXSk6IFRlY2hbXSB7XG4gICAgcmV0dXJuIHRoaXMudGVjaHMuZmlsdGVyKHRlY2ggPT4gIWl0ZW1zLmluY2x1ZGVzKHRlY2gubmFtZS50b0xvd2VyQ2FzZSgpKSk7XG4gIH1cblxuICBwdWJsaWMgZ2V0SWNvbihuYW1lOiBzdHJpbmcpOiBUeXBlPGFueT4gfCBudWxsIHtcbiAgICBjb25zb2xlLmxvZyhcImdldEljb24gbmFtZSBpY29uOiBcIiwgbmFtZSlcbiAgICBjb25zdCB0ZWNoID0gdGhpcy5nZXRUZWNoKG5hbWUpO1xuICAgIHJldHVybiB0ZWNoID8gdGVjaC5pY29uIDogbnVsbDtcbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cInRlY2hzXCIgW25nQ2xhc3NdPVwiY2xhc3NcIj5cbiAgPG5nLWNvbnRhaW5lciAqbmdJZj1cIm5hbWUgJiYgZ2V0VGVjaChuYW1lKSAmJiAhbGlzdFwiPlxuICAgIDxmaWd1cmVcbiAgICAgIGNsYXNzPVwidGVjaC1jb250YWluZXJcIlxuICAgICAgW25nQ2xhc3NdPVwidGVjaENsYXNzKG5hbWUpXCJcbiAgICAgIFtzdHlsZS53aWR0aF09XCJzaXplID8gc2l6ZSA6ICcxMDBweCdcIlxuICAgID5cbiAgICAgIDxuZy1jb250YWluZXIgKm5nQ29tcG9uZW50T3V0bGV0PVwiZ2V0SWNvbihuYW1lKVwiIC8+XG4gICAgICA8ZmlnY2FwdGlvbiBbbmdDbGFzc109XCJ7IHRvb2x0aXA6IGhpZGRlbkxhYmVsIH1cIj5cbiAgICAgICAge3sgbGFiZWwgPyBsYWJlbCA6IGdldFRlY2gobmFtZSk/Lm5hbWUgfX1cbiAgICAgIDwvZmlnY2FwdGlvbj5cbiAgICA8L2ZpZ3VyZT5cbiAgPC9uZy1jb250YWluZXI+XG4gIDxuZy1jb250YWluZXIgKm5nSWY9XCIhbmFtZSAmJiBsaXN0IHx8IHRlY2hzXCI+XG4gICAgPGZpZ3VyZVxuICAgICAgY2xhc3M9XCJ0ZWNoLWNvbnRhaW5lclwiXG4gICAgICAqbmdGb3I9XCJsZXQgdGVjaCBvZiB0ZWNoc1wiXG4gICAgICBbbmdDbGFzc109XCJbdGVjaC5uYW1lLnRvTG93ZXJDYXNlKCldXCJcbiAgICAgIFtzdHlsZS53aWR0aF09XCJzaXplID8gc2l6ZSA6ICcxMDBweCdcIlxuICAgICAgW2F0dHIua2V5XT1cInRlY2gubmFtZVwiXG4gICAgPlxuICAgIDxuZy1jb250YWluZXIgKm5nQ29tcG9uZW50T3V0bGV0PVwiZ2V0SWNvbih0ZWNoLm5hbWUpXCIgLz5cbiAgICAgIDxmaWdjYXB0aW9uIFtuZ0NsYXNzXT1cInsgdG9vbHRpcDogaGlkZGVuTGFiZWwgfVwiPlxuICAgICAgICB7eyB0ZWNoLm5hbWUgfX1cbiAgICAgIDwvZmlnY2FwdGlvbj5cbiAgICA8L2ZpZ3VyZT5cbiAgPC9uZy1jb250YWluZXI+XG48L2Rpdj5cbiJdfQ==
|
|
@@ -1462,11 +1462,11 @@ class AngularTechsLogosComponent {
|
|
|
1462
1462
|
return tech ? tech.icon : null;
|
|
1463
1463
|
}
|
|
1464
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 }); }
|
|
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 || techs\">\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"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
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=\"!name && list || techs\">\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"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1466
1466
|
}
|
|
1467
1467
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: AngularTechsLogosComponent, decorators: [{
|
|
1468
1468
|
type: Component,
|
|
1469
|
-
args: [{ selector: 'lib-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=\"list || techs\">\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"] }]
|
|
1469
|
+
args: [{ selector: 'lib-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 || techs\">\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"] }]
|
|
1470
1470
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { list: [{
|
|
1471
1471
|
type: Input
|
|
1472
1472
|
}], name: [{
|