@omnedia/ngx-gridpattern
Version:
A simple component library to create a container with a pattern background.
68 lines (63 loc) • 6.07 kB
JavaScript
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { signal, computed, Input, ChangeDetectionStrategy, Component } from '@angular/core';
import * as i1 from '@angular/platform-browser';
class NgxGridpatternComponent {
sanitizer;
styleClass;
set smallGridValue(smallGrid) {
this.smallGrid$.set(smallGrid);
}
set gridColorValue(color) {
this.gridColor$.set(color);
}
set gradientColorValue(color) {
this.gradientColor$.set(color);
}
smallGrid$ = signal(false);
gridColor$ = signal("rgba(0, 0, 0, 0.2)");
gradientColor$ = signal("rgba(255, 255, 255, 0.8)");
backgroundImage = computed(() => {
const size = this.smallGrid$() ? 16 : 32;
const svg = `<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32" width="${size}" height="${size}"
fill="none" stroke="${this.gridColor$()}">
<path d="M0 .5H31.5V32"/>
</svg>`;
const uri = `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
return this.sanitizer.bypassSecurityTrustStyle(`url("${uri}")`);
});
gradientColor = computed(() => ({
'--om-gridpattern-gradient-color': this.gradientColor$(),
}));
constructor(sanitizer) {
this.sanitizer = sanitizer;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: NgxGridpatternComponent, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: NgxGridpatternComponent, isStandalone: true, selector: "om-gridpattern", inputs: { styleClass: "styleClass", smallGridValue: ["smallGrid", "smallGridValue"], gridColorValue: ["gridColor", "gridColorValue"], gradientColorValue: ["gradientColor", "gradientColorValue"] }, ngImport: i0, template: "<div class=\"om-gridpattern\" [ngClass]=\"styleClass\">\r\n <div\r\n class=\"om-gridpattern-background\"\r\n [style.background-image]=\"backgroundImage()\"\r\n [ngStyle]=\"gradientColor()\"\r\n [class.om-gridpattern-background-small]=\"smallGrid$()\">\r\n <div class=\"om-gridpattern-gradient\"></div>\r\n </div>\r\n <ng-content></ng-content>\r\n</div>\r\n", styles: [".om-gridpattern{position:relative;overflow:hidden;width:100%;height:100%}.om-gridpattern .om-gridpattern-background{--om-gridpattern-gradient-color: rgb(0, 0, 0);position:absolute;pointer-events:none;height:100%;width:100%;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgba(255, 255, 255, 0.2)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e\")}.om-gridpattern .om-gridpattern-background.om-gridpattern-background-small{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='16' height='16' fill='none' stroke='rgba(255, 255, 255, 0.2)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e\")}.om-gridpattern .om-gridpattern-background .om-gridpattern-gradient{position:absolute;inset:0;-webkit-mask-image:radial-gradient(ellipse at center,transparent 10%,#000);mask-image:radial-gradient(ellipse at center,transparent 10%,#000);background-color:var(--om-gridpattern-gradient-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: NgxGridpatternComponent, decorators: [{
type: Component,
args: [{ selector: "om-gridpattern", standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"om-gridpattern\" [ngClass]=\"styleClass\">\r\n <div\r\n class=\"om-gridpattern-background\"\r\n [style.background-image]=\"backgroundImage()\"\r\n [ngStyle]=\"gradientColor()\"\r\n [class.om-gridpattern-background-small]=\"smallGrid$()\">\r\n <div class=\"om-gridpattern-gradient\"></div>\r\n </div>\r\n <ng-content></ng-content>\r\n</div>\r\n", styles: [".om-gridpattern{position:relative;overflow:hidden;width:100%;height:100%}.om-gridpattern .om-gridpattern-background{--om-gridpattern-gradient-color: rgb(0, 0, 0);position:absolute;pointer-events:none;height:100%;width:100%;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgba(255, 255, 255, 0.2)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e\")}.om-gridpattern .om-gridpattern-background.om-gridpattern-background-small{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='16' height='16' fill='none' stroke='rgba(255, 255, 255, 0.2)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e\")}.om-gridpattern .om-gridpattern-background .om-gridpattern-gradient{position:absolute;inset:0;-webkit-mask-image:radial-gradient(ellipse at center,transparent 10%,#000);mask-image:radial-gradient(ellipse at center,transparent 10%,#000);background-color:var(--om-gridpattern-gradient-color)}\n"] }]
}], ctorParameters: () => [{ type: i1.DomSanitizer }], propDecorators: { styleClass: [{
type: Input,
args: ["styleClass"]
}], smallGridValue: [{
type: Input,
args: ["smallGrid"]
}], gridColorValue: [{
type: Input,
args: ["gridColor"]
}], gradientColorValue: [{
type: Input,
args: ["gradientColor"]
}] } });
/*
* Public API Surface of ngx-gridpattern
*/
/**
* Generated bundle index. Do not edit.
*/
export { NgxGridpatternComponent };
//# sourceMappingURL=omnedia-ngx-gridpattern.mjs.map