@morozeckiy/dd-lib 0.7.62 → 0.7.64
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.
|
@@ -2104,13 +2104,133 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
|
|
|
2104
2104
|
type: Input
|
|
2105
2105
|
}] } });
|
|
2106
2106
|
|
|
2107
|
+
class LibSvgViewerComponent {
|
|
2108
|
+
constructor(http, elementRef) {
|
|
2109
|
+
this.http = http;
|
|
2110
|
+
this.elementRef = elementRef;
|
|
2111
|
+
this.path = 'assets/images/';
|
|
2112
|
+
this.pack = 'svg'; // директория внутри path
|
|
2113
|
+
this.icon = '';
|
|
2114
|
+
this.width = '';
|
|
2115
|
+
this.height = '';
|
|
2116
|
+
this.color = '';
|
|
2117
|
+
this.containerClass = '';
|
|
2118
|
+
this.colorRules = [];
|
|
2119
|
+
}
|
|
2120
|
+
ngOnChanges(changes) {
|
|
2121
|
+
this.loadSvg();
|
|
2122
|
+
}
|
|
2123
|
+
loadSvg() {
|
|
2124
|
+
if (!this.path || !this.icon)
|
|
2125
|
+
return;
|
|
2126
|
+
this.http.get(`${this.path}${this.pack}/${this.icon}.svg`, { responseType: 'text' })
|
|
2127
|
+
.pipe(catchError((error) => {
|
|
2128
|
+
const errorMessage = error.message || 'Неизвестная ошибка';
|
|
2129
|
+
const customError = new HttpErrorResponse({
|
|
2130
|
+
error: `SVG не найден: ${errorMessage}`,
|
|
2131
|
+
status: 404,
|
|
2132
|
+
statusText: 'Not Found'
|
|
2133
|
+
});
|
|
2134
|
+
console.error(`Ошибка загрузки SVG: ${errorMessage}`, {
|
|
2135
|
+
path: `${this.path}${this.pack}/${this.icon}.svg`,
|
|
2136
|
+
status: error.status
|
|
2137
|
+
});
|
|
2138
|
+
return throwError(() => customError);
|
|
2139
|
+
}))
|
|
2140
|
+
.subscribe({
|
|
2141
|
+
next: (svg) => {
|
|
2142
|
+
this.renderSvg(svg);
|
|
2143
|
+
}
|
|
2144
|
+
});
|
|
2145
|
+
}
|
|
2146
|
+
renderSvg(svgString) {
|
|
2147
|
+
const container = this.elementRef.nativeElement.querySelector('.svg-container');
|
|
2148
|
+
container.innerHTML = svgString;
|
|
2149
|
+
const svg = container.querySelector('svg');
|
|
2150
|
+
if (!svg)
|
|
2151
|
+
return;
|
|
2152
|
+
// Применяем параметры
|
|
2153
|
+
if (this.width) {
|
|
2154
|
+
svg.style.width = this.width;
|
|
2155
|
+
}
|
|
2156
|
+
if (this.height) {
|
|
2157
|
+
svg.style.height = this.height;
|
|
2158
|
+
}
|
|
2159
|
+
this.applyColorRules(svg);
|
|
2160
|
+
if (this.color) {
|
|
2161
|
+
this.applyColor(svg);
|
|
2162
|
+
}
|
|
2163
|
+
}
|
|
2164
|
+
applyColorRules(svg) {
|
|
2165
|
+
this.colorRules.forEach(rule => {
|
|
2166
|
+
const elements = svg.querySelectorAll(rule.selector);
|
|
2167
|
+
elements.forEach(el => {
|
|
2168
|
+
if (rule.attribute === 'fill' || rule.attribute === 'both') {
|
|
2169
|
+
el.setAttribute('fill', rule.color);
|
|
2170
|
+
}
|
|
2171
|
+
if (rule.attribute === 'stroke' || rule.attribute === 'both') {
|
|
2172
|
+
el.setAttribute('stroke', rule.color);
|
|
2173
|
+
}
|
|
2174
|
+
// Если атрибут не указан, меняем и fill и stroke
|
|
2175
|
+
if (!rule.attribute) {
|
|
2176
|
+
if (el.hasAttribute('fill')) {
|
|
2177
|
+
el.setAttribute('fill', rule.color);
|
|
2178
|
+
}
|
|
2179
|
+
if (el.hasAttribute('stroke')) {
|
|
2180
|
+
el.setAttribute('stroke', rule.color);
|
|
2181
|
+
}
|
|
2182
|
+
}
|
|
2183
|
+
});
|
|
2184
|
+
});
|
|
2185
|
+
}
|
|
2186
|
+
applyColor(svg) {
|
|
2187
|
+
const elements = svg.querySelectorAll('[stroke], [fill]');
|
|
2188
|
+
elements.forEach(el => {
|
|
2189
|
+
// Обрабатываем stroke
|
|
2190
|
+
if (el.hasAttribute('stroke') &&
|
|
2191
|
+
el.getAttribute('stroke') !== 'none' &&
|
|
2192
|
+
el.getAttribute('stroke') !== 'transparent') {
|
|
2193
|
+
el.setAttribute('stroke', this.color);
|
|
2194
|
+
}
|
|
2195
|
+
// Обрабатываем fill
|
|
2196
|
+
if (el.hasAttribute('fill') &&
|
|
2197
|
+
el.getAttribute('fill') !== 'none' &&
|
|
2198
|
+
el.getAttribute('fill') !== 'transparent') {
|
|
2199
|
+
el.setAttribute('fill', this.color);
|
|
2200
|
+
}
|
|
2201
|
+
});
|
|
2202
|
+
}
|
|
2203
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: LibSvgViewerComponent, deps: [{ token: i1.HttpClient }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2204
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: LibSvgViewerComponent, isStandalone: true, selector: "dd-lib-svg-viewer", inputs: { path: "path", pack: "pack", icon: "icon", width: "width", height: "height", color: "color", containerClass: "containerClass", colorRules: "colorRules" }, usesOnChanges: true, ngImport: i0, template: `<div #svgContainer class="svg-container"></div>`, isInline: true, styles: [":host{display:block}svg{width:100%;height:100%;display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2205
|
+
}
|
|
2206
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: LibSvgViewerComponent, decorators: [{
|
|
2207
|
+
type: Component,
|
|
2208
|
+
args: [{ selector: 'dd-lib-svg-viewer', imports: [], standalone: true, template: `<div #svgContainer class="svg-container"></div>`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}svg{width:100%;height:100%;display:block}\n"] }]
|
|
2209
|
+
}], ctorParameters: () => [{ type: i1.HttpClient }, { type: i0.ElementRef }], propDecorators: { path: [{
|
|
2210
|
+
type: Input
|
|
2211
|
+
}], pack: [{
|
|
2212
|
+
type: Input
|
|
2213
|
+
}], icon: [{
|
|
2214
|
+
type: Input
|
|
2215
|
+
}], width: [{
|
|
2216
|
+
type: Input
|
|
2217
|
+
}], height: [{
|
|
2218
|
+
type: Input
|
|
2219
|
+
}], color: [{
|
|
2220
|
+
type: Input
|
|
2221
|
+
}], containerClass: [{
|
|
2222
|
+
type: Input
|
|
2223
|
+
}], colorRules: [{
|
|
2224
|
+
type: Input
|
|
2225
|
+
}] } });
|
|
2226
|
+
|
|
2107
2227
|
class LibAccordionComponent {
|
|
2108
2228
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: LibAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2109
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: LibAccordionComponent, isStandalone: true, selector: "dd-lib-accordion", inputs: { accTitle: "accTitle" }, ngImport: i0, template: "<div class=\"accordion\">\r\n <div (click)=\"showAccordionContent = !showAccordionContent\" class=\"accordion__header\">\r\n @if (accTitle) {\r\n <div [innerHTML]=\"accTitle\" class=\"accordion__title\"></div>\r\n }\r\n <div>\r\n <dd-lib-svg-
|
|
2229
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: LibAccordionComponent, isStandalone: true, selector: "dd-lib-accordion", inputs: { accTitle: "accTitle" }, ngImport: i0, template: "<div class=\"accordion\">\r\n <div (click)=\"showAccordionContent = !showAccordionContent\" class=\"accordion__header\">\r\n @if (accTitle) {\r\n <div [innerHTML]=\"accTitle\" class=\"accordion__title\"></div>\r\n }\r\n <div>\r\n <dd-lib-svg-viewer class=\"cup\" icon=\"{{ showAccordionContent ? 'minus' : 'plus' }}\"></dd-lib-svg-viewer>\r\n </div>\r\n </div>\r\n @if (showAccordionContent) {\r\n <div class=\"mt-8\">\r\n <ng-content></ng-content>\r\n </div>\r\n }\r\n</div>\r\n", styles: [".accordion__header{display:flex;align-items:center;justify-content:space-between;cursor:pointer}.accordion__title{font-weight:500;font-size:20px;line-height:28px;color:var(--light-black-color)}@media screen and (max-width: 480px){.accordion__title{font-size:16px;line-height:24px}}\n"], dependencies: [{ kind: "component", type: LibSvgViewerComponent, selector: "dd-lib-svg-viewer", inputs: ["path", "pack", "icon", "width", "height", "color", "containerClass", "colorRules"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2110
2230
|
}
|
|
2111
2231
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: LibAccordionComponent, decorators: [{
|
|
2112
2232
|
type: Component,
|
|
2113
|
-
args: [{ selector: 'dd-lib-accordion', standalone: true, imports: [LibSvgIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"accordion\">\r\n <div (click)=\"showAccordionContent = !showAccordionContent\" class=\"accordion__header\">\r\n @if (accTitle) {\r\n <div [innerHTML]=\"accTitle\" class=\"accordion__title\"></div>\r\n }\r\n <div>\r\n <dd-lib-svg-
|
|
2233
|
+
args: [{ selector: 'dd-lib-accordion', standalone: true, imports: [LibSvgIconComponent, LibSvgViewerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"accordion\">\r\n <div (click)=\"showAccordionContent = !showAccordionContent\" class=\"accordion__header\">\r\n @if (accTitle) {\r\n <div [innerHTML]=\"accTitle\" class=\"accordion__title\"></div>\r\n }\r\n <div>\r\n <dd-lib-svg-viewer class=\"cup\" icon=\"{{ showAccordionContent ? 'minus' : 'plus' }}\"></dd-lib-svg-viewer>\r\n </div>\r\n </div>\r\n @if (showAccordionContent) {\r\n <div class=\"mt-8\">\r\n <ng-content></ng-content>\r\n </div>\r\n }\r\n</div>\r\n", styles: [".accordion__header{display:flex;align-items:center;justify-content:space-between;cursor:pointer}.accordion__title{font-weight:500;font-size:20px;line-height:28px;color:var(--light-black-color)}@media screen and (max-width: 480px){.accordion__title{font-size:16px;line-height:24px}}\n"] }]
|
|
2114
2234
|
}], propDecorators: { accTitle: [{
|
|
2115
2235
|
type: Input
|
|
2116
2236
|
}] } });
|
|
@@ -3806,126 +3926,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
|
|
|
3806
3926
|
type: Input
|
|
3807
3927
|
}] } });
|
|
3808
3928
|
|
|
3809
|
-
class LibSvgViewerComponent {
|
|
3810
|
-
constructor(http, elementRef) {
|
|
3811
|
-
this.http = http;
|
|
3812
|
-
this.elementRef = elementRef;
|
|
3813
|
-
this.path = 'assets/images/';
|
|
3814
|
-
this.pack = 'svg'; // директория внутри path
|
|
3815
|
-
this.icon = '';
|
|
3816
|
-
this.width = '';
|
|
3817
|
-
this.height = '';
|
|
3818
|
-
this.color = '';
|
|
3819
|
-
this.containerClass = '';
|
|
3820
|
-
this.colorRules = [];
|
|
3821
|
-
}
|
|
3822
|
-
ngOnChanges(changes) {
|
|
3823
|
-
this.loadSvg();
|
|
3824
|
-
}
|
|
3825
|
-
loadSvg() {
|
|
3826
|
-
if (!this.path || !this.icon)
|
|
3827
|
-
return;
|
|
3828
|
-
this.http.get(`${this.path}${this.pack}/${this.icon}.svg`, { responseType: 'text' })
|
|
3829
|
-
.pipe(catchError((error) => {
|
|
3830
|
-
const errorMessage = error.message || 'Неизвестная ошибка';
|
|
3831
|
-
const customError = new HttpErrorResponse({
|
|
3832
|
-
error: `SVG не найден: ${errorMessage}`,
|
|
3833
|
-
status: 404,
|
|
3834
|
-
statusText: 'Not Found'
|
|
3835
|
-
});
|
|
3836
|
-
console.error(`Ошибка загрузки SVG: ${errorMessage}`, {
|
|
3837
|
-
path: `${this.path}${this.pack}/${this.icon}.svg`,
|
|
3838
|
-
status: error.status
|
|
3839
|
-
});
|
|
3840
|
-
return throwError(() => customError);
|
|
3841
|
-
}))
|
|
3842
|
-
.subscribe({
|
|
3843
|
-
next: (svg) => {
|
|
3844
|
-
this.renderSvg(svg);
|
|
3845
|
-
}
|
|
3846
|
-
});
|
|
3847
|
-
}
|
|
3848
|
-
renderSvg(svgString) {
|
|
3849
|
-
const container = this.elementRef.nativeElement.querySelector('.svg-container');
|
|
3850
|
-
container.innerHTML = svgString;
|
|
3851
|
-
const svg = container.querySelector('svg');
|
|
3852
|
-
if (!svg)
|
|
3853
|
-
return;
|
|
3854
|
-
// Применяем параметры
|
|
3855
|
-
if (this.width) {
|
|
3856
|
-
svg.style.width = this.width;
|
|
3857
|
-
}
|
|
3858
|
-
if (this.height) {
|
|
3859
|
-
svg.style.height = this.height;
|
|
3860
|
-
}
|
|
3861
|
-
this.applyColorRules(svg);
|
|
3862
|
-
if (this.color) {
|
|
3863
|
-
this.applyColor(svg);
|
|
3864
|
-
}
|
|
3865
|
-
}
|
|
3866
|
-
applyColorRules(svg) {
|
|
3867
|
-
this.colorRules.forEach(rule => {
|
|
3868
|
-
const elements = svg.querySelectorAll(rule.selector);
|
|
3869
|
-
elements.forEach(el => {
|
|
3870
|
-
if (rule.attribute === 'fill' || rule.attribute === 'both') {
|
|
3871
|
-
el.setAttribute('fill', rule.color);
|
|
3872
|
-
}
|
|
3873
|
-
if (rule.attribute === 'stroke' || rule.attribute === 'both') {
|
|
3874
|
-
el.setAttribute('stroke', rule.color);
|
|
3875
|
-
}
|
|
3876
|
-
// Если атрибут не указан, меняем и fill и stroke
|
|
3877
|
-
if (!rule.attribute) {
|
|
3878
|
-
if (el.hasAttribute('fill')) {
|
|
3879
|
-
el.setAttribute('fill', rule.color);
|
|
3880
|
-
}
|
|
3881
|
-
if (el.hasAttribute('stroke')) {
|
|
3882
|
-
el.setAttribute('stroke', rule.color);
|
|
3883
|
-
}
|
|
3884
|
-
}
|
|
3885
|
-
});
|
|
3886
|
-
});
|
|
3887
|
-
}
|
|
3888
|
-
applyColor(svg) {
|
|
3889
|
-
const elements = svg.querySelectorAll('[stroke], [fill]');
|
|
3890
|
-
elements.forEach(el => {
|
|
3891
|
-
// Обрабатываем stroke
|
|
3892
|
-
if (el.hasAttribute('stroke') &&
|
|
3893
|
-
el.getAttribute('stroke') !== 'none' &&
|
|
3894
|
-
el.getAttribute('stroke') !== 'transparent') {
|
|
3895
|
-
el.setAttribute('stroke', this.color);
|
|
3896
|
-
}
|
|
3897
|
-
// Обрабатываем fill
|
|
3898
|
-
if (el.hasAttribute('fill') &&
|
|
3899
|
-
el.getAttribute('fill') !== 'none' &&
|
|
3900
|
-
el.getAttribute('fill') !== 'transparent') {
|
|
3901
|
-
el.setAttribute('fill', this.color);
|
|
3902
|
-
}
|
|
3903
|
-
});
|
|
3904
|
-
}
|
|
3905
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: LibSvgViewerComponent, deps: [{ token: i1.HttpClient }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3906
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: LibSvgViewerComponent, isStandalone: true, selector: "dd-lib-svg-viewer", inputs: { path: "path", pack: "pack", icon: "icon", width: "width", height: "height", color: "color", containerClass: "containerClass", colorRules: "colorRules" }, usesOnChanges: true, ngImport: i0, template: `<div #svgContainer class="svg-container"></div>`, isInline: true, styles: [":host{display:block}svg{width:100%;height:100%;display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3907
|
-
}
|
|
3908
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: LibSvgViewerComponent, decorators: [{
|
|
3909
|
-
type: Component,
|
|
3910
|
-
args: [{ selector: 'dd-lib-svg-viewer', imports: [], standalone: true, template: `<div #svgContainer class="svg-container"></div>`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}svg{width:100%;height:100%;display:block}\n"] }]
|
|
3911
|
-
}], ctorParameters: () => [{ type: i1.HttpClient }, { type: i0.ElementRef }], propDecorators: { path: [{
|
|
3912
|
-
type: Input
|
|
3913
|
-
}], pack: [{
|
|
3914
|
-
type: Input
|
|
3915
|
-
}], icon: [{
|
|
3916
|
-
type: Input
|
|
3917
|
-
}], width: [{
|
|
3918
|
-
type: Input
|
|
3919
|
-
}], height: [{
|
|
3920
|
-
type: Input
|
|
3921
|
-
}], color: [{
|
|
3922
|
-
type: Input
|
|
3923
|
-
}], containerClass: [{
|
|
3924
|
-
type: Input
|
|
3925
|
-
}], colorRules: [{
|
|
3926
|
-
type: Input
|
|
3927
|
-
}] } });
|
|
3928
|
-
|
|
3929
3929
|
class ITab {
|
|
3930
3930
|
constructor(body) {
|
|
3931
3931
|
this.id = body.id;
|