dynamic-theme-lib
Version:
A flexible and powerful theme management library for Angular applications that allows dynamic color management and theme switching.
340 lines (326 loc) • 18.3 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/common/http'), require('rxjs'), require('rxjs/operators')) :
typeof define === 'function' && define.amd ? define('dynamic-theme-lib', ['exports', '@angular/core', '@angular/common', '@angular/common/http', 'rxjs', 'rxjs/operators'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["dynamic-theme-lib"] = {}, global.ng.core, global.ng.common, global.ng.common.http, global.rxjs, global.rxjs.operators));
})(this, (function (exports, i0, common, i1, rxjs, operators) { 'use strict';
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
var DynamicThemeLibService = /** @class */ (function () {
function DynamicThemeLibService() {
}
return DynamicThemeLibService;
}());
DynamicThemeLibService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DynamicThemeLibService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
DynamicThemeLibService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DynamicThemeLibService, providedIn: 'root' });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DynamicThemeLibService, decorators: [{
type: i0.Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: function () { return []; } });
var DynamicThemeLibComponent = /** @class */ (function () {
function DynamicThemeLibComponent() {
}
DynamicThemeLibComponent.prototype.ngOnInit = function () {
};
return DynamicThemeLibComponent;
}());
DynamicThemeLibComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DynamicThemeLibComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
DynamicThemeLibComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicThemeLibComponent, selector: "lib-dynamic-theme-lib", ngImport: i0__namespace, template: "\n <p>\n dynamic-theme-lib works!\n </p>\n ", isInline: true });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DynamicThemeLibComponent, decorators: [{
type: i0.Component,
args: [{
selector: 'lib-dynamic-theme-lib',
template: "\n <p>\n dynamic-theme-lib works!\n </p>\n ",
styles: []
}]
}], ctorParameters: function () { return []; } });
var ColourService = /** @class */ (function () {
function ColourService(http, platformId) {
this.http = http;
this.platformId = platformId;
this.colorMap = {}; // Store color configurations
this.storageKey = 'colorConfig'; // Key for storing colors in sessionStorage
this.configUrl = 'assets/colors/color-config.json';
this.colorsSubject = new rxjs.BehaviorSubject({});
this.colors$ = this.colorsSubject.asObservable(); // Expose as observable for real-time updates
this.isBrowser = common.isPlatformBrowser(this.platformId); // Check if the platform is a browser
this.loadColorConfig();
console.log("Color service getting called");
}
/**
* Method to fetch the color configuration and load colors from sessionStorage or JSON.
*/
ColourService.prototype.loadColorConfig = function () {
var _this = this;
console.log("Load config getting called");
if (this.isBrowser) {
// Check if color config is stored in sessionStorage
var storedColors = sessionStorage.getItem(this.storageKey);
if (storedColors) {
console.log("From session...");
try {
this.colorMap = JSON.parse(storedColors);
this.colorsSubject.next(this.colorMap); // Emit new values
console.log('Colors loaded from session storage:', this.colorMap);
return;
}
catch (error) {
console.warn('Error parsing stored colors, falling back to config file:', error);
sessionStorage.removeItem(this.storageKey);
}
}
}
// If not found in storage or non-browser environment, fetch from JSON file
this.http.get(this.configUrl).pipe(operators.tap(function (data) {
console.log('Colors loaded from config file:', data);
}), operators.catchError(function (error) {
console.error('Error loading color config:', error);
// Return default colors if config file fails to load
return rxjs.of({
'primary-color': '#007bff',
'secondary-color': '#6c757d',
'background-color': '#ffffff',
'text-color': '#212529'
});
})).subscribe(function (data) {
_this.colorMap = data;
_this.colorsSubject.next(_this.colorMap); // Emit new values to subscribers
if (_this.isBrowser) {
try {
sessionStorage.setItem(_this.storageKey, JSON.stringify(data));
}
catch (error) {
console.warn('Error storing colors in session storage:', error);
}
}
});
};
/**
* Method to update color for a specific variable and store it.
* @param variableName The key for the color variable (e.g., 'primary-color')
* @param colorValue The new color value (e.g., '#ff5733')
*/
ColourService.prototype.setColor = function (variableName, colorValue) {
if (!variableName || !colorValue) {
console.warn('Invalid color update request:', { variableName: variableName, colorValue: colorValue });
return;
}
this.colorMap[variableName] = colorValue;
// Store updated colorMap in sessionStorage for persistence during the session
if (this.isBrowser) {
try {
sessionStorage.setItem(this.storageKey, JSON.stringify(this.colorMap));
}
catch (error) {
console.warn('Error storing updated colors:', error);
}
}
this.colorsSubject.next(Object.assign({}, this.colorMap));
console.log("Color updated: " + variableName + " = " + colorValue);
};
/**
* Method to get the color for a specific variable.
* @param variableName The key for the color variable (e.g., 'primary-color')
* @returns The color value for the given variable or an empty string if not found
*/
ColourService.prototype.getColor = function (variableName) {
var color = this.colorMap[variableName];
if (!color) {
console.warn("Color not found for: " + variableName);
return '';
}
return color;
};
/**
* Method to get all colors (useful for UI configuration or preview page).
* @returns All color configurations
*/
ColourService.prototype.getAllColors = function () {
return Object.assign({}, this.colorMap);
};
ColourService.prototype.reloadColors = function () {
this.loadColorConfig();
};
return ColourService;
}());
ColourService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ColourService, deps: [{ token: i1__namespace.HttpClient }, { token: i0.PLATFORM_ID }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
ColourService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ColourService, providedIn: 'root' });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ColourService, decorators: [{
type: i0.Injectable,
args: [{
providedIn: 'root',
}]
}], ctorParameters: function () {
return [{ type: i1__namespace.HttpClient }, { type: undefined, decorators: [{
type: i0.Inject,
args: [i0.PLATFORM_ID]
}] }];
} });
var BackgroundColorDirective = /** @class */ (function () {
function BackgroundColorDirective(el, colorService) {
this.el = el;
this.colorService = colorService;
this.libBackgroundColour = '';
this.currentColor = '';
}
BackgroundColorDirective.prototype.ngOnInit = function () {
var _this = this;
// Subscribe to color changes and update dynamically
this.colorSubscription = this.colorService.colors$.subscribe(function () {
_this.applyColor();
});
// Initial color application
this.applyColor();
};
BackgroundColorDirective.prototype.ngOnChanges = function (changes) {
if (changes['libBackgroundColour'] && !changes['libBackgroundColour'].firstChange) {
this.applyColor();
}
};
BackgroundColorDirective.prototype.applyColor = function () {
if (!this.libBackgroundColour) {
console.warn('No background color variable specified');
return;
}
var newColor = this.colorService.getColor(this.libBackgroundColour);
if (newColor && newColor !== this.currentColor) {
this.currentColor = newColor;
this.el.nativeElement.style.backgroundColor = newColor;
}
};
BackgroundColorDirective.prototype.ngOnDestroy = function () {
if (this.colorSubscription) {
this.colorSubscription.unsubscribe();
}
};
return BackgroundColorDirective;
}());
BackgroundColorDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BackgroundColorDirective, deps: [{ token: i0__namespace.ElementRef }, { token: ColourService }], target: i0__namespace.ɵɵFactoryTarget.Directive });
BackgroundColorDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: BackgroundColorDirective, selector: "[libBackgroundColour]", inputs: { libBackgroundColour: "libBackgroundColour" }, usesOnChanges: true, ngImport: i0__namespace });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BackgroundColorDirective, decorators: [{
type: i0.Directive,
args: [{
selector: '[libBackgroundColour]'
}]
}], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: ColourService }]; }, propDecorators: { libBackgroundColour: [{
type: i0.Input
}] } });
var TextColorDirective = /** @class */ (function () {
function TextColorDirective(el, colorService) {
this.el = el;
this.colorService = colorService;
this.libTextColour = ''; // The input property for text color name
this.currentColor = '';
}
TextColorDirective.prototype.ngOnInit = function () {
var _this = this;
// Subscribe to color changes and update dynamically
this.colorSubscription = this.colorService.colors$.subscribe(function () {
_this.applyColor();
});
// Initial color application
this.applyColor();
};
TextColorDirective.prototype.ngOnChanges = function (changes) {
if (changes['libTextColour'] && !changes['libTextColour'].firstChange) {
this.applyColor();
}
};
TextColorDirective.prototype.applyColor = function () {
if (!this.libTextColour) {
console.warn('No text color variable specified');
return;
}
var newColor = this.colorService.getColor(this.libTextColour);
if (newColor && newColor !== this.currentColor) {
this.currentColor = newColor;
this.el.nativeElement.style.color = newColor;
}
};
TextColorDirective.prototype.ngOnDestroy = function () {
// Unsubscribe to avoid memory leaks
if (this.colorSubscription) {
this.colorSubscription.unsubscribe();
}
};
return TextColorDirective;
}());
TextColorDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TextColorDirective, deps: [{ token: i0__namespace.ElementRef }, { token: ColourService }], target: i0__namespace.ɵɵFactoryTarget.Directive });
TextColorDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: TextColorDirective, selector: "[libTextColour]", inputs: { libTextColour: "libTextColour" }, usesOnChanges: true, ngImport: i0__namespace });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TextColorDirective, decorators: [{
type: i0.Directive,
args: [{
selector: '[libTextColour]'
}]
}], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: ColourService }]; }, propDecorators: { libTextColour: [{
type: i0.Input
}] } });
var DynamicThemeLibModule = /** @class */ (function () {
function DynamicThemeLibModule() {
}
return DynamicThemeLibModule;
}());
DynamicThemeLibModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DynamicThemeLibModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
DynamicThemeLibModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DynamicThemeLibModule, declarations: [DynamicThemeLibComponent,
BackgroundColorDirective,
TextColorDirective], imports: [common.CommonModule,
i1.HttpClientModule], exports: [DynamicThemeLibComponent,
BackgroundColorDirective,
TextColorDirective] });
DynamicThemeLibModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DynamicThemeLibModule, providers: [ColourService], imports: [[
common.CommonModule,
i1.HttpClientModule
]] });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DynamicThemeLibModule, decorators: [{
type: i0.NgModule,
args: [{
declarations: [
DynamicThemeLibComponent,
BackgroundColorDirective,
TextColorDirective
],
imports: [
common.CommonModule,
i1.HttpClientModule
],
exports: [
DynamicThemeLibComponent,
BackgroundColorDirective,
TextColorDirective,
],
providers: [ColourService]
}]
}] });
/*
* Public API Surface of dynamic-theme-lib
*/
/**
* Generated bundle index. Do not edit.
*/
exports.BackgroundColorDirective = BackgroundColorDirective;
exports.ColourService = ColourService;
exports.DynamicThemeLibComponent = DynamicThemeLibComponent;
exports.DynamicThemeLibModule = DynamicThemeLibModule;
exports.DynamicThemeLibService = DynamicThemeLibService;
exports.TextColorDirective = TextColorDirective;
Object.defineProperty(exports, '__esModule', { value: true });
}));
//# sourceMappingURL=dynamic-theme-lib.umd.js.map