@ng-vagabond-lab/ng-dsv 0.2.30 → 0.2.31
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.
- package/assets/global.scss +6 -17
- package/fesm2022/ng-vagabond-lab-ng-dsv-ds-img.mjs +2 -2
- package/fesm2022/ng-vagabond-lab-ng-dsv-ds-img.mjs.map +1 -1
- package/fesm2022/ng-vagabond-lab-ng-dsv-ds-theme.mjs +2 -2
- package/fesm2022/ng-vagabond-lab-ng-dsv-ds-theme.mjs.map +1 -1
- package/package.json +1 -1
package/assets/global.scss
CHANGED
|
@@ -131,31 +131,20 @@ hr {
|
|
|
131
131
|
}
|
|
132
132
|
}
|
|
133
133
|
|
|
134
|
-
#main-section:has(.scroll:not(.list-overflow .scroll)) app-footer {
|
|
135
|
-
display: none;
|
|
136
|
-
}
|
|
137
|
-
|
|
138
134
|
#main-section {
|
|
139
135
|
display: flex;
|
|
140
136
|
flex-direction: column;
|
|
141
137
|
height: calc(100%);
|
|
142
138
|
|
|
143
|
-
&>*>dsv-card,
|
|
144
|
-
&>*>div,
|
|
145
|
-
&>*>dsv-form-reactive-searchbar {
|
|
146
|
-
margin: 5px 5px 5px 5px !important;
|
|
147
|
-
width: calc(100% - 10px) !important;
|
|
148
|
-
|
|
149
|
-
& h2 {
|
|
150
|
-
padding-left: 3px !important;
|
|
151
|
-
}
|
|
152
|
-
}
|
|
153
|
-
|
|
154
139
|
&>*>dsv-scroll-infinite {
|
|
155
140
|
padding: 0 5px !important;
|
|
156
141
|
width: calc(100% - 10px) !important;
|
|
157
142
|
}
|
|
158
143
|
|
|
144
|
+
&:has(.scroll:not(.list-overflow .scroll)) app-footer {
|
|
145
|
+
display: none;
|
|
146
|
+
}
|
|
147
|
+
|
|
159
148
|
@media screen and (min-width: 900px) {
|
|
160
149
|
&>* {
|
|
161
150
|
max-width: 900px;
|
|
@@ -166,8 +155,8 @@ hr {
|
|
|
166
155
|
|
|
167
156
|
@media screen and (max-width: 900px) {
|
|
168
157
|
&>* {
|
|
169
|
-
margin: 0px 5px;
|
|
170
|
-
width: calc(100% -
|
|
158
|
+
margin: 0px 0 0 5px;
|
|
159
|
+
width: calc(100% - 5px);
|
|
171
160
|
}
|
|
172
161
|
}
|
|
173
162
|
}
|
|
@@ -26,11 +26,11 @@ class DsvImgComponent {
|
|
|
26
26
|
this.error.set(true);
|
|
27
27
|
}
|
|
28
28
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: DsvImgComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
29
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: DsvImgComponent, isStandalone: true, selector: "dsv-img", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: true, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, empty: { classPropertyName: "empty", publicName: "empty", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (!load() || src() === '') {\n <dsv-skeleton>\n <svg\n [attr.viewBox]=\"'0 0 ' + width() + ' ' + height()\"\n xmlns=\"http://www.w3.org/2000/svg\"\n ></svg>\n </dsv-skeleton>\n}\n@if (src() !== '' && !error()) {\n <img\n [src]=\"src()\"\n [alt]=\"alt()\"\n (load)=\"doLoad()\"\n (error)=\"onImageError()\"\n [style.aspect-ratio]=\"aspectRatio()\"\n [class.hidden]=\"!load()\"\n />\n} @else if (error()) {\n <img\n [src]=\"empty()\"\n [alt]=\"alt()\"\n (load)=\"doLoad()\"\n [style.aspect-ratio]=\"aspectRatio()\"\n />\n}\n", styles: [":host{--img-width: 100%;--img-height: 100%;--img-border-radius: 0px;display:flex;flex-direction:column}:host img{background-color:var(--background);border-radius:var(--img-border-radius);width:var(--img-width);height:var(--img-height)}:host svg{background-color:var(--background-card);opacity:.5;margin:0;padding:0;border-radius:10px}\n"], dependencies: [{ kind: "component", type: DsvSekeletonComponent, selector: "dsv-skeleton" }] });
|
|
29
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: DsvImgComponent, isStandalone: true, selector: "dsv-img", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: true, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, empty: { classPropertyName: "empty", publicName: "empty", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (!load() || src() === '') {\n <dsv-skeleton>\n <svg\n [attr.viewBox]=\"'0 0 ' + width() + ' ' + height()\"\n xmlns=\"http://www.w3.org/2000/svg\"\n ></svg>\n </dsv-skeleton>\n}\n@if (src() !== '' && !error()) {\n <img\n [src]=\"src()\"\n [alt]=\"alt()\"\n (load)=\"doLoad()\"\n (error)=\"onImageError()\"\n [style.aspect-ratio]=\"aspectRatio()\"\n [class.hidden]=\"!load()\"\n />\n} @else if (error()) {\n <img\n [src]=\"empty()\"\n [alt]=\"alt()\"\n (load)=\"doLoad()\"\n [style.aspect-ratio]=\"aspectRatio()\"\n />\n}\n", styles: [":host{--img-width: 100%;--img-height: 100%;--img-border-radius: 0px;display:flex;flex-direction:column}:host img{background-color:var(--background-card-light);border-radius:var(--img-border-radius);width:var(--img-width);height:var(--img-height)}:host svg{background-color:var(--background-card);opacity:.5;margin:0;padding:0;border-radius:10px}\n"], dependencies: [{ kind: "component", type: DsvSekeletonComponent, selector: "dsv-skeleton" }] });
|
|
30
30
|
}
|
|
31
31
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: DsvImgComponent, decorators: [{
|
|
32
32
|
type: Component,
|
|
33
|
-
args: [{ selector: 'dsv-img', imports: [DsvSekeletonComponent], template: "@if (!load() || src() === '') {\n <dsv-skeleton>\n <svg\n [attr.viewBox]=\"'0 0 ' + width() + ' ' + height()\"\n xmlns=\"http://www.w3.org/2000/svg\"\n ></svg>\n </dsv-skeleton>\n}\n@if (src() !== '' && !error()) {\n <img\n [src]=\"src()\"\n [alt]=\"alt()\"\n (load)=\"doLoad()\"\n (error)=\"onImageError()\"\n [style.aspect-ratio]=\"aspectRatio()\"\n [class.hidden]=\"!load()\"\n />\n} @else if (error()) {\n <img\n [src]=\"empty()\"\n [alt]=\"alt()\"\n (load)=\"doLoad()\"\n [style.aspect-ratio]=\"aspectRatio()\"\n />\n}\n", styles: [":host{--img-width: 100%;--img-height: 100%;--img-border-radius: 0px;display:flex;flex-direction:column}:host img{background-color:var(--background);border-radius:var(--img-border-radius);width:var(--img-width);height:var(--img-height)}:host svg{background-color:var(--background-card);opacity:.5;margin:0;padding:0;border-radius:10px}\n"] }]
|
|
33
|
+
args: [{ selector: 'dsv-img', imports: [DsvSekeletonComponent], template: "@if (!load() || src() === '') {\n <dsv-skeleton>\n <svg\n [attr.viewBox]=\"'0 0 ' + width() + ' ' + height()\"\n xmlns=\"http://www.w3.org/2000/svg\"\n ></svg>\n </dsv-skeleton>\n}\n@if (src() !== '' && !error()) {\n <img\n [src]=\"src()\"\n [alt]=\"alt()\"\n (load)=\"doLoad()\"\n (error)=\"onImageError()\"\n [style.aspect-ratio]=\"aspectRatio()\"\n [class.hidden]=\"!load()\"\n />\n} @else if (error()) {\n <img\n [src]=\"empty()\"\n [alt]=\"alt()\"\n (load)=\"doLoad()\"\n [style.aspect-ratio]=\"aspectRatio()\"\n />\n}\n", styles: [":host{--img-width: 100%;--img-height: 100%;--img-border-radius: 0px;display:flex;flex-direction:column}:host img{background-color:var(--background-card-light);border-radius:var(--img-border-radius);width:var(--img-width);height:var(--img-height)}:host svg{background-color:var(--background-card);opacity:.5;margin:0;padding:0;border-radius:10px}\n"] }]
|
|
34
34
|
}], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: true }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], empty: [{ type: i0.Input, args: [{ isSignal: true, alias: "empty", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }] } });
|
|
35
35
|
|
|
36
36
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ng-vagabond-lab-ng-dsv-ds-img.mjs","sources":["../../../projects/ng-dsv/ds/img/component/img.component.ts","../../../projects/ng-dsv/ds/img/component/img.component.html","../../../projects/ng-dsv/ds/img/ng-vagabond-lab-ng-dsv-ds-img.ts"],"sourcesContent":["import { Component, computed, input, signal } from '@angular/core';\nimport { DsvSekeletonComponent } from '@ng-vagabond-lab/ng-dsv/ds/skeleton';\n\n@Component({\n selector: 'dsv-img',\n imports: [DsvSekeletonComponent],\n templateUrl: './img.component.html',\n styleUrl: './img.component.scss',\n})\nexport class DsvImgComponent {\n readonly src = input.required<string>();\n readonly alt = input<string>('description');\n readonly empty = input<string>('images/empty.svg');\n\n readonly width = input<number>(500);\n readonly height = input<number>(750);\n\n readonly load = signal<boolean>(false);\n readonly error = signal<boolean>(false);\n\n readonly aspectRatio = computed<string>(() => this.width() + '/' + this.height());\n\n doLoad(): void {\n this.load.set(true);\n }\n\n onImageError(): void {\n this.error.set(true);\n }\n}\n","@if (!load() || src() === '') {\n <dsv-skeleton>\n <svg\n [attr.viewBox]=\"'0 0 ' + width() + ' ' + height()\"\n xmlns=\"http://www.w3.org/2000/svg\"\n ></svg>\n </dsv-skeleton>\n}\n@if (src() !== '' && !error()) {\n <img\n [src]=\"src()\"\n [alt]=\"alt()\"\n (load)=\"doLoad()\"\n (error)=\"onImageError()\"\n [style.aspect-ratio]=\"aspectRatio()\"\n [class.hidden]=\"!load()\"\n />\n} @else if (error()) {\n <img\n [src]=\"empty()\"\n [alt]=\"alt()\"\n (load)=\"doLoad()\"\n [style.aspect-ratio]=\"aspectRatio()\"\n />\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;MASa,eAAe,CAAA;IACf,GAAG,GAAG,KAAK,CAAC,QAAQ;4EAAU;IAC9B,GAAG,GAAG,KAAK,CAAS,aAAa;4EAAC;IAClC,KAAK,GAAG,KAAK,CAAS,kBAAkB;8EAAC;IAEzC,KAAK,GAAG,KAAK,CAAS,GAAG;8EAAC;IAC1B,MAAM,GAAG,KAAK,CAAS,GAAG;+EAAC;IAE3B,IAAI,GAAG,MAAM,CAAU,KAAK;6EAAC;IAC7B,KAAK,GAAG,MAAM,CAAU,KAAK;8EAAC;AAE9B,IAAA,WAAW,GAAG,QAAQ,CAAS,MAAM,IAAI,CAAC,KAAK,EAAE,GAAG,GAAG,GAAG,IAAI,CAAC,MAAM,EAAE;oFAAC;IAEjF,MAAM,GAAA;AACF,QAAA,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC;IACvB;IAEA,YAAY,GAAA;AACR,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC;IACxB;uGAnBS,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAf,eAAe,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,EAAA,GAAA,EAAA,EAAA,iBAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,GAAA,EAAA,EAAA,iBAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECT5B,2oBAyBA,EAAA,MAAA,EAAA,CAAA,
|
|
1
|
+
{"version":3,"file":"ng-vagabond-lab-ng-dsv-ds-img.mjs","sources":["../../../projects/ng-dsv/ds/img/component/img.component.ts","../../../projects/ng-dsv/ds/img/component/img.component.html","../../../projects/ng-dsv/ds/img/ng-vagabond-lab-ng-dsv-ds-img.ts"],"sourcesContent":["import { Component, computed, input, signal } from '@angular/core';\nimport { DsvSekeletonComponent } from '@ng-vagabond-lab/ng-dsv/ds/skeleton';\n\n@Component({\n selector: 'dsv-img',\n imports: [DsvSekeletonComponent],\n templateUrl: './img.component.html',\n styleUrl: './img.component.scss',\n})\nexport class DsvImgComponent {\n readonly src = input.required<string>();\n readonly alt = input<string>('description');\n readonly empty = input<string>('images/empty.svg');\n\n readonly width = input<number>(500);\n readonly height = input<number>(750);\n\n readonly load = signal<boolean>(false);\n readonly error = signal<boolean>(false);\n\n readonly aspectRatio = computed<string>(() => this.width() + '/' + this.height());\n\n doLoad(): void {\n this.load.set(true);\n }\n\n onImageError(): void {\n this.error.set(true);\n }\n}\n","@if (!load() || src() === '') {\n <dsv-skeleton>\n <svg\n [attr.viewBox]=\"'0 0 ' + width() + ' ' + height()\"\n xmlns=\"http://www.w3.org/2000/svg\"\n ></svg>\n </dsv-skeleton>\n}\n@if (src() !== '' && !error()) {\n <img\n [src]=\"src()\"\n [alt]=\"alt()\"\n (load)=\"doLoad()\"\n (error)=\"onImageError()\"\n [style.aspect-ratio]=\"aspectRatio()\"\n [class.hidden]=\"!load()\"\n />\n} @else if (error()) {\n <img\n [src]=\"empty()\"\n [alt]=\"alt()\"\n (load)=\"doLoad()\"\n [style.aspect-ratio]=\"aspectRatio()\"\n />\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;MASa,eAAe,CAAA;IACf,GAAG,GAAG,KAAK,CAAC,QAAQ;4EAAU;IAC9B,GAAG,GAAG,KAAK,CAAS,aAAa;4EAAC;IAClC,KAAK,GAAG,KAAK,CAAS,kBAAkB;8EAAC;IAEzC,KAAK,GAAG,KAAK,CAAS,GAAG;8EAAC;IAC1B,MAAM,GAAG,KAAK,CAAS,GAAG;+EAAC;IAE3B,IAAI,GAAG,MAAM,CAAU,KAAK;6EAAC;IAC7B,KAAK,GAAG,MAAM,CAAU,KAAK;8EAAC;AAE9B,IAAA,WAAW,GAAG,QAAQ,CAAS,MAAM,IAAI,CAAC,KAAK,EAAE,GAAG,GAAG,GAAG,IAAI,CAAC,MAAM,EAAE;oFAAC;IAEjF,MAAM,GAAA;AACF,QAAA,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC;IACvB;IAEA,YAAY,GAAA;AACR,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC;IACxB;uGAnBS,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAf,eAAe,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,EAAA,GAAA,EAAA,EAAA,iBAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,GAAA,EAAA,EAAA,iBAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECT5B,2oBAyBA,EAAA,MAAA,EAAA,CAAA,6VAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDpBc,qBAAqB,EAAA,QAAA,EAAA,cAAA,EAAA,CAAA,EAAA,CAAA;;2FAItB,eAAe,EAAA,UAAA,EAAA,CAAA;kBAN3B,SAAS;+BACI,SAAS,EAAA,OAAA,EACV,CAAC,qBAAqB,CAAC,EAAA,QAAA,EAAA,2oBAAA,EAAA,MAAA,EAAA,CAAA,6VAAA,CAAA,EAAA;;;AELpC;;AAEG;;;;"}
|
|
@@ -23,11 +23,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
|
|
|
23
23
|
|
|
24
24
|
class DsvThemeComponent {
|
|
25
25
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: DsvThemeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
26
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.3", type: DsvThemeComponent, isStandalone: true, selector: "dsv-theme", ngImport: i0, template: "<ng-content></ng-content>\n<div id=\"collapse\"></div>\n", styles: [":host{display:flex;flex:1;flex-direction:column;overflow:hidden;--scroll-gap: 15px;background-color:var(--background);color:var(--text)}:host #collapse{display:none;position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;background-color:#0009}:host #collapse.show{display:inline}:host-context(body.light){--button-text: #fcfbfb;--background: #ffffff;--background-card: #ffffff;--background-card-light: #e9e9e9;--background-header: #dcdcdc;--background-table-tr: #000000;--background-table-tr-text: var(--background-card);--scrollbar: #757575 #f5f5f5;--subtitle: #5a5959;--border: #cbcbcb;--text: #000000;--primary: #007bff;--secondary: #504f4f;--success: #0da12f;--info: #1c7fc1;--warning: #a2821f;--error: #ca2535}:host-context(body.dark){--button-text: #000000;--background: #151515;--background-card: #151515;--background-card-light: #2e2e2e;--background-header: #1f1f1f;--background-table-tr: #DCDCDC;--background-table-tr-text: var(--background-card);--scrollbar: #a9a9a9 #383838;--subtitle: #ffffffb3;--border: #606060;--text: #ffffff;--primary: #007bff;--secondary: #a9a9a9;--success: #48de6b;--info: #106694;--warning: #ac8a24;--error: #f45766}\n"] });
|
|
26
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.3", type: DsvThemeComponent, isStandalone: true, selector: "dsv-theme", ngImport: i0, template: "<ng-content></ng-content>\n<div id=\"collapse\"></div>\n", styles: [":host{display:flex;flex:1;flex-direction:column;overflow:hidden;--scroll-gap: 15px;background-color:var(--background);color:var(--text)}:host #collapse{display:none;position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;background-color:#0009}:host #collapse.show{display:inline}:host-context(body.light){--button-text: #fcfbfb;--background: #ffffff;--background-card: #ffffff;--background-card-light: #e9e9e9;--background-card-transparent: #ffffffbc;--background-header: #dcdcdc;--background-table-tr: #000000;--background-table-tr-text: var(--background-card);--scrollbar: #757575 #f5f5f5;--subtitle: #5a5959;--border: #cbcbcb;--text: #000000;--primary: #007bff;--secondary: #504f4f;--success: #0da12f;--info: #1c7fc1;--warning: #a2821f;--error: #ca2535}:host-context(body.dark){--button-text: #000000;--background: #151515;--background-card: #151515;--background-card-light: #2e2e2e;--background-card-transparent: #090909bc;--background-header: #1f1f1f;--background-table-tr: #DCDCDC;--background-table-tr-text: var(--background-card);--scrollbar: #a9a9a9 #383838;--subtitle: #ffffffb3;--border: #606060;--text: #ffffff;--primary: #007bff;--secondary: #a9a9a9;--success: #48de6b;--info: #106694;--warning: #ac8a24;--error: #f45766}\n"] });
|
|
27
27
|
}
|
|
28
28
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: DsvThemeComponent, decorators: [{
|
|
29
29
|
type: Component,
|
|
30
|
-
args: [{ selector: 'dsv-theme', template: "<ng-content></ng-content>\n<div id=\"collapse\"></div>\n", styles: [":host{display:flex;flex:1;flex-direction:column;overflow:hidden;--scroll-gap: 15px;background-color:var(--background);color:var(--text)}:host #collapse{display:none;position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;background-color:#0009}:host #collapse.show{display:inline}:host-context(body.light){--button-text: #fcfbfb;--background: #ffffff;--background-card: #ffffff;--background-card-light: #e9e9e9;--background-header: #dcdcdc;--background-table-tr: #000000;--background-table-tr-text: var(--background-card);--scrollbar: #757575 #f5f5f5;--subtitle: #5a5959;--border: #cbcbcb;--text: #000000;--primary: #007bff;--secondary: #504f4f;--success: #0da12f;--info: #1c7fc1;--warning: #a2821f;--error: #ca2535}:host-context(body.dark){--button-text: #000000;--background: #151515;--background-card: #151515;--background-card-light: #2e2e2e;--background-header: #1f1f1f;--background-table-tr: #DCDCDC;--background-table-tr-text: var(--background-card);--scrollbar: #a9a9a9 #383838;--subtitle: #ffffffb3;--border: #606060;--text: #ffffff;--primary: #007bff;--secondary: #a9a9a9;--success: #48de6b;--info: #106694;--warning: #ac8a24;--error: #f45766}\n"] }]
|
|
30
|
+
args: [{ selector: 'dsv-theme', template: "<ng-content></ng-content>\n<div id=\"collapse\"></div>\n", styles: [":host{display:flex;flex:1;flex-direction:column;overflow:hidden;--scroll-gap: 15px;background-color:var(--background);color:var(--text)}:host #collapse{display:none;position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;background-color:#0009}:host #collapse.show{display:inline}:host-context(body.light){--button-text: #fcfbfb;--background: #ffffff;--background-card: #ffffff;--background-card-light: #e9e9e9;--background-card-transparent: #ffffffbc;--background-header: #dcdcdc;--background-table-tr: #000000;--background-table-tr-text: var(--background-card);--scrollbar: #757575 #f5f5f5;--subtitle: #5a5959;--border: #cbcbcb;--text: #000000;--primary: #007bff;--secondary: #504f4f;--success: #0da12f;--info: #1c7fc1;--warning: #a2821f;--error: #ca2535}:host-context(body.dark){--button-text: #000000;--background: #151515;--background-card: #151515;--background-card-light: #2e2e2e;--background-card-transparent: #090909bc;--background-header: #1f1f1f;--background-table-tr: #DCDCDC;--background-table-tr-text: var(--background-card);--scrollbar: #a9a9a9 #383838;--subtitle: #ffffffb3;--border: #606060;--text: #ffffff;--primary: #007bff;--secondary: #a9a9a9;--success: #48de6b;--info: #106694;--warning: #ac8a24;--error: #f45766}\n"] }]
|
|
31
31
|
}] });
|
|
32
32
|
|
|
33
33
|
class ThemeService {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ng-vagabond-lab-ng-dsv-ds-theme.mjs","sources":["../../../projects/ng-dsv/ds/theme/component/switch/theme-switch.component.ts","../../../projects/ng-dsv/ds/theme/component/switch/theme-switch.component.html","../../../projects/ng-dsv/ds/theme/component/theme.component.ts","../../../projects/ng-dsv/ds/theme/component/theme.component.html","../../../projects/ng-dsv/ds/theme/service/theme.service.ts","../../../projects/ng-dsv/ds/theme/ng-vagabond-lab-ng-dsv-ds-theme.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { Component, inject } from '@angular/core';\nimport { DsvButtonComponent } from '@ng-vagabond-lab/ng-dsv/ds/button';\nimport { ThemeService } from '../../public-api';\n\nexport type Theme = {\n primary: string;\n text: string;\n};\n\n@Component({\n selector: 'dsv-theme-switch',\n imports: [CommonModule, DsvButtonComponent],\n templateUrl: `./theme-switch.component.html`,\n})\nexport class DsvThemeSwitchComponent {\n readonly themeService = inject(ThemeService);\n\n switchTheme(): void {\n this.themeService.switchTheme();\n }\n\n isLightMode(): boolean {\n return this.themeService.themeMode() === 'light';\n }\n}\n","<dsv-button\n width=\"large\"\n color=\"inherit\"\n size=\"small\"\n [noHover]=\"true\"\n (callback)=\"switchTheme()\"\n [icon]=\"isLightMode() ? 'ri-contrast-2-line' : 'ri-contrast-2-fill'\"\n>\n</dsv-button>\n","import { Component } from '@angular/core';\n\n@Component({\n selector: 'dsv-theme',\n templateUrl: './theme.component.html',\n styleUrls: ['./theme.component.scss'],\n})\nexport class DsvThemeComponent {}\n","<ng-content></ng-content>\n<div id=\"collapse\"></div>\n","import { inject, Injectable, signal } from '@angular/core';\nimport { PlatformService } from '@ng-vagabond-lab/ng-dsv/platform';\nimport { StorageService } from '@ng-vagabond-lab/ng-dsv/storage';\n\nexport type ThemeMode = 'dark' | 'light';\n\n@Injectable({\n providedIn: 'root',\n})\nexport class ThemeService {\n readonly platformService = inject(PlatformService);\n readonly storageService = inject(StorageService);\n\n readonly themeMode = signal<ThemeMode>((this.storageService.getItem('theme') as ThemeMode) ?? 'light');\n\n constructor() {\n if (this.platformService.isPlatformBrowser()) {\n let html = document.getElementsByTagName('body')[0];\n html.classList.add(this.themeMode());\n }\n }\n\n switchTheme(): void {\n if (this.platformService.isPlatformBrowser()) {\n let html = document.getElementsByTagName('body')[0];\n html.classList.remove(this.themeMode());\n\n let newMode: ThemeMode = this.themeMode() === 'dark' ? 'light' : 'dark';\n this.themeMode.set(newMode);\n this.storageService.setItem('theme', newMode);\n html.classList.add(newMode);\n }\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;MAea,uBAAuB,CAAA;AACvB,IAAA,YAAY,GAAG,MAAM,CAAC,YAAY,CAAC;IAE5C,WAAW,GAAA;AACP,QAAA,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE;IACnC;IAEA,WAAW,GAAA;QACP,OAAO,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,KAAK,OAAO;IACpD;uGATS,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAvB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,uBAAuB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECfpC,uOASA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDGc,YAAY,+BAAE,kBAAkB,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,YAAA,EAAA,MAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,MAAA,EAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,UAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAGjC,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBALnC,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,kBAAkB,EAAA,OAAA,EACnB,CAAC,YAAY,EAAE,kBAAkB,CAAC,EAAA,QAAA,EAAA,uOAAA,EAAA;;;MELlC,iBAAiB,CAAA;uGAAjB,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAjB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,qECP9B,0DAEA,EAAA,MAAA,EAAA,CAAA,
|
|
1
|
+
{"version":3,"file":"ng-vagabond-lab-ng-dsv-ds-theme.mjs","sources":["../../../projects/ng-dsv/ds/theme/component/switch/theme-switch.component.ts","../../../projects/ng-dsv/ds/theme/component/switch/theme-switch.component.html","../../../projects/ng-dsv/ds/theme/component/theme.component.ts","../../../projects/ng-dsv/ds/theme/component/theme.component.html","../../../projects/ng-dsv/ds/theme/service/theme.service.ts","../../../projects/ng-dsv/ds/theme/ng-vagabond-lab-ng-dsv-ds-theme.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { Component, inject } from '@angular/core';\nimport { DsvButtonComponent } from '@ng-vagabond-lab/ng-dsv/ds/button';\nimport { ThemeService } from '../../public-api';\n\nexport type Theme = {\n primary: string;\n text: string;\n};\n\n@Component({\n selector: 'dsv-theme-switch',\n imports: [CommonModule, DsvButtonComponent],\n templateUrl: `./theme-switch.component.html`,\n})\nexport class DsvThemeSwitchComponent {\n readonly themeService = inject(ThemeService);\n\n switchTheme(): void {\n this.themeService.switchTheme();\n }\n\n isLightMode(): boolean {\n return this.themeService.themeMode() === 'light';\n }\n}\n","<dsv-button\n width=\"large\"\n color=\"inherit\"\n size=\"small\"\n [noHover]=\"true\"\n (callback)=\"switchTheme()\"\n [icon]=\"isLightMode() ? 'ri-contrast-2-line' : 'ri-contrast-2-fill'\"\n>\n</dsv-button>\n","import { Component } from '@angular/core';\n\n@Component({\n selector: 'dsv-theme',\n templateUrl: './theme.component.html',\n styleUrls: ['./theme.component.scss'],\n})\nexport class DsvThemeComponent {}\n","<ng-content></ng-content>\n<div id=\"collapse\"></div>\n","import { inject, Injectable, signal } from '@angular/core';\nimport { PlatformService } from '@ng-vagabond-lab/ng-dsv/platform';\nimport { StorageService } from '@ng-vagabond-lab/ng-dsv/storage';\n\nexport type ThemeMode = 'dark' | 'light';\n\n@Injectable({\n providedIn: 'root',\n})\nexport class ThemeService {\n readonly platformService = inject(PlatformService);\n readonly storageService = inject(StorageService);\n\n readonly themeMode = signal<ThemeMode>((this.storageService.getItem('theme') as ThemeMode) ?? 'light');\n\n constructor() {\n if (this.platformService.isPlatformBrowser()) {\n let html = document.getElementsByTagName('body')[0];\n html.classList.add(this.themeMode());\n }\n }\n\n switchTheme(): void {\n if (this.platformService.isPlatformBrowser()) {\n let html = document.getElementsByTagName('body')[0];\n html.classList.remove(this.themeMode());\n\n let newMode: ThemeMode = this.themeMode() === 'dark' ? 'light' : 'dark';\n this.themeMode.set(newMode);\n this.storageService.setItem('theme', newMode);\n html.classList.add(newMode);\n }\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;MAea,uBAAuB,CAAA;AACvB,IAAA,YAAY,GAAG,MAAM,CAAC,YAAY,CAAC;IAE5C,WAAW,GAAA;AACP,QAAA,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE;IACnC;IAEA,WAAW,GAAA;QACP,OAAO,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,KAAK,OAAO;IACpD;uGATS,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAvB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,uBAAuB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECfpC,uOASA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDGc,YAAY,+BAAE,kBAAkB,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,YAAA,EAAA,MAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,MAAA,EAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,UAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAGjC,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBALnC,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,kBAAkB,EAAA,OAAA,EACnB,CAAC,YAAY,EAAE,kBAAkB,CAAC,EAAA,QAAA,EAAA,uOAAA,EAAA;;;MELlC,iBAAiB,CAAA;uGAAjB,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAjB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,qECP9B,0DAEA,EAAA,MAAA,EAAA,CAAA,guCAAA,CAAA,EAAA,CAAA;;2FDKa,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAL7B,SAAS;+BACI,WAAW,EAAA,QAAA,EAAA,0DAAA,EAAA,MAAA,EAAA,CAAA,guCAAA,CAAA,EAAA;;;MEMZ,YAAY,CAAA;AACZ,IAAA,eAAe,GAAG,MAAM,CAAC,eAAe,CAAC;AACzC,IAAA,cAAc,GAAG,MAAM,CAAC,cAAc,CAAC;AAEvC,IAAA,SAAS,GAAG,MAAM,CAAa,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,OAAO,CAAe,IAAI,OAAO;kFAAC;AAEtG,IAAA,WAAA,GAAA;AACI,QAAA,IAAI,IAAI,CAAC,eAAe,CAAC,iBAAiB,EAAE,EAAE;YAC1C,IAAI,IAAI,GAAG,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;YACnD,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;QACxC;IACJ;IAEA,WAAW,GAAA;AACP,QAAA,IAAI,IAAI,CAAC,eAAe,CAAC,iBAAiB,EAAE,EAAE;YAC1C,IAAI,IAAI,GAAG,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;YACnD,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;AAEvC,YAAA,IAAI,OAAO,GAAc,IAAI,CAAC,SAAS,EAAE,KAAK,MAAM,GAAG,OAAO,GAAG,MAAM;AACvE,YAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC;YAC3B,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC;AAC7C,YAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC;QAC/B;IACJ;uGAvBS,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA;AAAZ,IAAA,OAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,YAAY,cAFT,MAAM,EAAA,CAAA;;2FAET,YAAY,EAAA,UAAA,EAAA,CAAA;kBAHxB,UAAU;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,UAAU,EAAE,MAAM;AACrB,iBAAA;;;ACRD;;AAEG;;;;"}
|