@ng-vagabond-lab/ng-dsv 0.2.2 → 0.2.4
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 +1 -2
- package/fesm2022/ng-vagabond-lab-ng-dsv-api.mjs +6 -6
- package/fesm2022/ng-vagabond-lab-ng-dsv-base-service.mjs +12 -12
- package/fesm2022/ng-vagabond-lab-ng-dsv-base.mjs +21 -21
- package/fesm2022/ng-vagabond-lab-ng-dsv-date.mjs +3 -3
- package/fesm2022/ng-vagabond-lab-ng-dsv-ds-accordion.mjs +3 -3
- package/fesm2022/ng-vagabond-lab-ng-dsv-ds-avatar.mjs +3 -3
- package/fesm2022/ng-vagabond-lab-ng-dsv-ds-button.mjs +6 -6
- package/fesm2022/ng-vagabond-lab-ng-dsv-ds-card.mjs +12 -12
- package/fesm2022/ng-vagabond-lab-ng-dsv-ds-chip.mjs +3 -3
- package/fesm2022/ng-vagabond-lab-ng-dsv-ds-color.mjs +6 -6
- package/fesm2022/ng-vagabond-lab-ng-dsv-ds-container.mjs +3 -3
- package/fesm2022/ng-vagabond-lab-ng-dsv-ds-file.mjs +9 -9
- package/fesm2022/ng-vagabond-lab-ng-dsv-ds-form-reactive.mjs +24 -24
- package/fesm2022/ng-vagabond-lab-ng-dsv-ds-form-signal.mjs +27 -27
- package/fesm2022/ng-vagabond-lab-ng-dsv-ds-header.mjs +3 -3
- package/fesm2022/ng-vagabond-lab-ng-dsv-ds-img.mjs +3 -3
- package/fesm2022/ng-vagabond-lab-ng-dsv-ds-item.mjs +3 -3
- package/fesm2022/ng-vagabond-lab-ng-dsv-ds-linear-progress.mjs +3 -3
- package/fesm2022/ng-vagabond-lab-ng-dsv-ds-list.mjs +12 -12
- package/fesm2022/ng-vagabond-lab-ng-dsv-ds-menu.mjs +12 -12
- package/fesm2022/ng-vagabond-lab-ng-dsv-ds-modal.mjs +12 -12
- package/fesm2022/ng-vagabond-lab-ng-dsv-ds-paginate.mjs +3 -3
- package/fesm2022/ng-vagabond-lab-ng-dsv-ds-scroll.mjs +49 -58
- package/fesm2022/ng-vagabond-lab-ng-dsv-ds-scroll.mjs.map +1 -1
- package/fesm2022/ng-vagabond-lab-ng-dsv-ds-skeleton.mjs +3 -3
- package/fesm2022/ng-vagabond-lab-ng-dsv-ds-tab.mjs +6 -6
- package/fesm2022/ng-vagabond-lab-ng-dsv-ds-table.mjs +3 -3
- package/fesm2022/ng-vagabond-lab-ng-dsv-ds-theme.mjs +9 -9
- package/fesm2022/ng-vagabond-lab-ng-dsv-ds-toast.mjs +6 -6
- package/fesm2022/ng-vagabond-lab-ng-dsv-ds-tooltip.mjs +3 -3
- package/fesm2022/ng-vagabond-lab-ng-dsv-environment.mjs +3 -3
- package/fesm2022/ng-vagabond-lab-ng-dsv-module-admin.mjs +15 -15
- package/fesm2022/ng-vagabond-lab-ng-dsv-module-auth.mjs +9 -9
- package/fesm2022/ng-vagabond-lab-ng-dsv-module-contact.mjs +8 -7
- package/fesm2022/ng-vagabond-lab-ng-dsv-module-contact.mjs.map +1 -1
- package/fesm2022/ng-vagabond-lab-ng-dsv-pipe.mjs +6 -6
- package/fesm2022/ng-vagabond-lab-ng-dsv-platform.mjs +4 -4
- package/fesm2022/ng-vagabond-lab-ng-dsv-platform.mjs.map +1 -1
- package/fesm2022/ng-vagabond-lab-ng-dsv-router.mjs +9 -10
- package/fesm2022/ng-vagabond-lab-ng-dsv-router.mjs.map +1 -1
- package/fesm2022/ng-vagabond-lab-ng-dsv-storage.mjs +3 -3
- package/fesm2022/ng-vagabond-lab-ng-dsv-template.mjs +29 -17
- package/fesm2022/ng-vagabond-lab-ng-dsv-template.mjs.map +1 -1
- package/fesm2022/ng-vagabond-lab-ng-dsv.mjs +6 -6
- package/package.json +1 -1
- package/types/ng-vagabond-lab-ng-dsv-ds-scroll.d.ts +2 -1
- package/types/ng-vagabond-lab-ng-dsv-module-contact.d.ts +2 -1
- package/types/ng-vagabond-lab-ng-dsv-template.d.ts +11 -3
|
@@ -5,10 +5,10 @@ class LinearProgressComponent {
|
|
|
5
5
|
load = input(false, ...(ngDevMode ? [{ debugName: "load" }] : /* istanbul ignore next */ []));
|
|
6
6
|
value = input(0, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
7
7
|
indeterminate = input(true, ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
|
|
8
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
9
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
8
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: LinearProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: LinearProgressComponent, isStandalone: true, selector: "dsv-linear-progress", inputs: { load: { classPropertyName: "load", publicName: "load", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (load()) {\n <div class=\"progress-container\">\n <div\n class=\"progress-bar\"\n [style.width]=\"indeterminate() ? null : value + '%'\"\n [class.indeterminate]=\"indeterminate()\"\n ></div>\n </div>\n}\n", styles: [".progress-container{width:100%;height:3px;background-color:transparent;overflow:hidden;position:absolute;z-index:1}.progress-container .progress-bar{height:100%}.progress-container .indeterminate{width:100%;height:100%;background-color:var(--primary);animation:indeterminateAnimation .5s infinite linear;transform-origin:0% 50%}@keyframes indeterminateAnimation{0%{transform:translate(0) scaleX(0)}40%{transform:translate(0) scaleX(.4)}to{transform:translate(100%) scaleX(.5)}}\n"] });
|
|
10
10
|
}
|
|
11
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
11
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: LinearProgressComponent, decorators: [{
|
|
12
12
|
type: Component,
|
|
13
13
|
args: [{ selector: 'dsv-linear-progress', template: "@if (load()) {\n <div class=\"progress-container\">\n <div\n class=\"progress-bar\"\n [style.width]=\"indeterminate() ? null : value + '%'\"\n [class.indeterminate]=\"indeterminate()\"\n ></div>\n </div>\n}\n", styles: [".progress-container{width:100%;height:3px;background-color:transparent;overflow:hidden;position:absolute;z-index:1}.progress-container .progress-bar{height:100%}.progress-container .indeterminate{width:100%;height:100%;background-color:var(--primary);animation:indeterminateAnimation .5s infinite linear;transform-origin:0% 50%}@keyframes indeterminateAnimation{0%{transform:translate(0) scaleX(0)}40%{transform:translate(0) scaleX(.4)}to{transform:translate(100%) scaleX(.5)}}\n"] }]
|
|
14
14
|
}], propDecorators: { load: [{ type: i0.Input, args: [{ isSignal: true, alias: "load", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }] } });
|
|
@@ -14,10 +14,10 @@ class DsvListItemDragComponent {
|
|
|
14
14
|
onTouchStart() {
|
|
15
15
|
this.listDragService.touchDragging.set(true);
|
|
16
16
|
}
|
|
17
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
18
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.
|
|
17
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DsvListItemDragComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
18
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: DsvListItemDragComponent, isStandalone: true, selector: "dsv-list-item-drag", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<dsv-button\n class=\"drag-handle\"\n icon=\"ri-menu-line\"\n [variant]=\"variant()\"\n color=\"primary\"\n (mousedown)=\"onHandleMouseDown($event)\"\n (touchstart)=\"onTouchStart()\"\n/>\n", styles: [":host .drag-handle{cursor:grab;transition:opacity .15s}:host .drag-handle:active{cursor:grabbing}\n"], dependencies: [{ kind: "component", type: DsvButtonComponent, selector: "dsv-button", inputs: ["libelle", "routerLink", "icon", "iconEnd", "disabled", "noHover", "type", "prevent"], outputs: ["callback"] }] });
|
|
19
19
|
}
|
|
20
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
20
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DsvListItemDragComponent, decorators: [{
|
|
21
21
|
type: Component,
|
|
22
22
|
args: [{ selector: 'dsv-list-item-drag', imports: [DsvButtonComponent], template: "<dsv-button\n class=\"drag-handle\"\n icon=\"ri-menu-line\"\n [variant]=\"variant()\"\n color=\"primary\"\n (mousedown)=\"onHandleMouseDown($event)\"\n (touchstart)=\"onTouchStart()\"\n/>\n", styles: [":host .drag-handle{cursor:grab;transition:opacity .15s}:host .drag-handle:active{cursor:grabbing}\n"] }]
|
|
23
23
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
|
|
@@ -25,10 +25,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
25
25
|
class ListDragService {
|
|
26
26
|
dragSrcIndex = signal(null, ...(ngDevMode ? [{ debugName: "dragSrcIndex" }] : /* istanbul ignore next */ []));
|
|
27
27
|
touchDragging = signal(false, ...(ngDevMode ? [{ debugName: "touchDragging" }] : /* istanbul ignore next */ []));
|
|
28
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
29
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.
|
|
28
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ListDragService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
29
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ListDragService, providedIn: 'root' });
|
|
30
30
|
}
|
|
31
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
31
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ListDragService, decorators: [{
|
|
32
32
|
type: Injectable,
|
|
33
33
|
args: [{ providedIn: 'root' }]
|
|
34
34
|
}] });
|
|
@@ -132,19 +132,19 @@ class DsvListItemComponent {
|
|
|
132
132
|
this.listDragService.dragSrcIndex.set(null);
|
|
133
133
|
this.listDragService.touchDragging.set(false);
|
|
134
134
|
}
|
|
135
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
136
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.
|
|
135
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DsvListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
136
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.13", type: DsvListItemComponent, isStandalone: true, selector: "dsv-list-item", inputs: { index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { callbackOrder: "callbackOrder" }, viewQueries: [{ propertyName: "liRef", first: true, predicate: ["liRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<li\n #liRef\n [attr.data-index]=\"index()\"\n [attr.draggable]=\"false\"\n [class.dragging]=\"listDragService.dragSrcIndex() === index()\"\n [class.drag-over]=\"listDragService.dragSrcIndex() === index()\"\n (dragover)=\"onDragOver($event)\"\n (drop)=\"onDrop(index(), $event)\"\n (dragstart)=\"onDragStart(index(), $event)\"\n (dragend)=\"onDragEnd()\"\n (touchstart)=\"onTouchStart($event)\"\n (touchmove)=\"onTouchMove($event)\"\n (touchend)=\"onTouchEnd($event)\"\n>\n <ng-content></ng-content>\n</li>\n", styles: [":host li{display:flex;align-items:center;gap:10px;padding:10px 15px;border:1px solid var(--border);border-radius:5px;transition:opacity .2s,border-color .2s;-webkit-user-select:none;user-select:none}:host li.dragging{opacity:.4}.ghost-drag{display:flex;align-items:center;gap:10px;padding:10px 15px;border:1px solid var(--border);border-radius:5px;opacity:.3;pointer-events:none;z-index:1;position:fixed;transform:scale(.98)}\n"] });
|
|
137
137
|
}
|
|
138
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
138
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DsvListItemComponent, decorators: [{
|
|
139
139
|
type: Component,
|
|
140
140
|
args: [{ selector: 'dsv-list-item', imports: [], template: "<li\n #liRef\n [attr.data-index]=\"index()\"\n [attr.draggable]=\"false\"\n [class.dragging]=\"listDragService.dragSrcIndex() === index()\"\n [class.drag-over]=\"listDragService.dragSrcIndex() === index()\"\n (dragover)=\"onDragOver($event)\"\n (drop)=\"onDrop(index(), $event)\"\n (dragstart)=\"onDragStart(index(), $event)\"\n (dragend)=\"onDragEnd()\"\n (touchstart)=\"onTouchStart($event)\"\n (touchmove)=\"onTouchMove($event)\"\n (touchend)=\"onTouchEnd($event)\"\n>\n <ng-content></ng-content>\n</li>\n", styles: [":host li{display:flex;align-items:center;gap:10px;padding:10px 15px;border:1px solid var(--border);border-radius:5px;transition:opacity .2s,border-color .2s;-webkit-user-select:none;user-select:none}:host li.dragging{opacity:.4}.ghost-drag{display:flex;align-items:center;gap:10px;padding:10px 15px;border:1px solid var(--border);border-radius:5px;opacity:.3;pointer-events:none;z-index:1;position:fixed;transform:scale(.98)}\n"] }]
|
|
141
141
|
}], propDecorators: { index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: true }] }], callbackOrder: [{ type: i0.Output, args: ["callbackOrder"] }], liRef: [{ type: i0.ViewChild, args: ['liRef', { isSignal: true }] }] } });
|
|
142
142
|
|
|
143
143
|
class DsvListComponent {
|
|
144
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
145
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.
|
|
144
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DsvListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
145
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: DsvListComponent, isStandalone: true, selector: "dsv-list", ngImport: i0, template: "<ul>\n <ng-content></ng-content>\n</ul>\n", styles: [":host{width:100%;--ul-margin: 0;--ul-width: 100%}:host ul{list-style:none;padding:0;margin:var(--ul-margin);width:var(--ul-width);display:flex;flex-direction:column;gap:8px}\n"] });
|
|
146
146
|
}
|
|
147
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
147
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DsvListComponent, decorators: [{
|
|
148
148
|
type: Component,
|
|
149
149
|
args: [{ selector: 'dsv-list', imports: [], template: "<ul>\n <ng-content></ng-content>\n</ul>\n", styles: [":host{width:100%;--ul-margin: 0;--ul-width: 100%}:host ul{list-style:none;padding:0;margin:var(--ul-margin);width:var(--ul-width);display:flex;flex-direction:column;gap:8px}\n"] }]
|
|
150
150
|
}] });
|
|
@@ -11,10 +11,10 @@ class DsvMenuButtonComponent {
|
|
|
11
11
|
doToogleMenu() {
|
|
12
12
|
this.menuService.toogleMenu();
|
|
13
13
|
}
|
|
14
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
15
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.
|
|
14
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DsvMenuButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
15
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: DsvMenuButtonComponent, isStandalone: true, selector: "dsv-menu-button", ngImport: i0, template: "<dsv-button\n class=\"dsv-menu-button\"\n icon=\"ri-menu-line\"\n color=\"inherit\"\n (callback)=\"doToogleMenu()\"\n [noHover]=\"true\"\n></dsv-button>\n", styles: [":host{display:flex}@media only screen and (min-width:1001px){:host{display:none!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsvButtonComponent, selector: "dsv-button", inputs: ["libelle", "routerLink", "icon", "iconEnd", "disabled", "noHover", "type", "prevent"], outputs: ["callback"] }] });
|
|
16
16
|
}
|
|
17
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
17
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DsvMenuButtonComponent, decorators: [{
|
|
18
18
|
type: Component,
|
|
19
19
|
args: [{ selector: 'dsv-menu-button', imports: [CommonModule, DsvButtonComponent], template: "<dsv-button\n class=\"dsv-menu-button\"\n icon=\"ri-menu-line\"\n color=\"inherit\"\n (callback)=\"doToogleMenu()\"\n [noHover]=\"true\"\n></dsv-button>\n", styles: [":host{display:flex}@media only screen and (min-width:1001px){:host{display:none!important}}\n"] }]
|
|
20
20
|
}] });
|
|
@@ -60,10 +60,10 @@ class DsvMenuContextualComponent {
|
|
|
60
60
|
toogleMenu() {
|
|
61
61
|
this.visible.set(!this.visible());
|
|
62
62
|
}
|
|
63
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
64
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
63
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DsvMenuContextualComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
64
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: DsvMenuContextualComponent, isStandalone: true, selector: "dsv-menu-contextual", inputs: { buttonClick: { classPropertyName: "buttonClick", publicName: "buttonClick", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { callback: "callback", callbackClose: "callbackClose" }, host: { listeners: { "document:click": "onClick($event)", "document:contextmenu": "onContextMenu($event)" } }, ngImport: i0, template: "<ng-content></ng-content>\n<div\n class=\"context-menu\"\n [class.visible]=\"visible()\"\n>\n @if (options().length > 0) {\n <ul>\n @for (option of options(); track option.id) {\n @if (option.divider) {\n <hr />\n }\n <li\n [class]=\"'text ' + option.color\"\n (click)=\"onOptionClick($event, option.id)\"\n >\n @if (option.icon) {\n <i [class]=\"option.icon\"></i>\n }\n {{ option.text }}\n </li>\n }\n </ul>\n } @else {\n <ng-content select=\".contextual\" />\n }\n</div>\n", styles: [":host{position:relative;display:inline-block}.context-menu{position:absolute;background-color:var(--background-card);border:1px solid var(--border);box-shadow:2px 2px 10px #0000001a;z-index:1;margin-top:5px;opacity:0;max-height:0;overflow:hidden;transform:translateY(-10px);transition:max-height .3s ease,opacity .3s ease,visibility .3s ease,transform .3s ease}.context-menu.visible{max-height:1000px;opacity:1;transform:translateY(0)}.context-menu ul{list-style:none;margin:0;padding:0;white-space:nowrap}.context-menu ul>hr{margin:5px 0 3px;padding:0}.context-menu ul li{padding:8px 16px;cursor:pointer}.context-menu ul li>i{margin-right:5px}.context-menu ul li:hover{background-color:var(--background)}\n"] });
|
|
65
65
|
}
|
|
66
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
66
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DsvMenuContextualComponent, decorators: [{
|
|
67
67
|
type: Component,
|
|
68
68
|
args: [{ selector: 'dsv-menu-contextual', host: {
|
|
69
69
|
'(document:click)': 'onClick($event)',
|
|
@@ -101,10 +101,10 @@ class DsvMenuComponent {
|
|
|
101
101
|
this.menuService.toogleMenu();
|
|
102
102
|
}
|
|
103
103
|
}
|
|
104
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
105
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
104
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DsvMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
105
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: DsvMenuComponent, isStandalone: true, selector: "dsv-menu", inputs: { showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onClickOutside($event)" } }, ngImport: i0, template: "<dsv-container>\n <ng-content></ng-content>\n</dsv-container>\n@if (showFooter()) {\n <div class=\"footer\">\n <dsv-theme-switch></dsv-theme-switch>\n </div>\n}\n", styles: [":host{display:flex;flex-direction:column;overflow:auto;scrollbar-width:thin;background-color:var(--background-card);color:var(--text);width:240px;transform:translate(0)!important}:host.open{transform:translate(0)!important}:host .footer{display:flex;align-items:center;justify-content:center;padding:10px}@media only screen and (max-width:1000px){:host{position:fixed;height:-webkit-fill-available;z-index:11;transform:translate(-100%)!important;transition:transform .3s ease-in-out}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsvThemeSwitchComponent, selector: "dsv-theme-switch" }, { kind: "component", type: DsvContainerComponent, selector: "dsv-container", inputs: ["column"] }] });
|
|
106
106
|
}
|
|
107
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
107
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DsvMenuComponent, decorators: [{
|
|
108
108
|
type: Component,
|
|
109
109
|
args: [{ selector: 'dsv-menu', imports: [CommonModule, DsvThemeSwitchComponent, DsvContainerComponent], host: {
|
|
110
110
|
'(document:click)': 'onClickOutside($event)',
|
|
@@ -119,10 +119,10 @@ class MenuService {
|
|
|
119
119
|
closeMenu() {
|
|
120
120
|
this.isMenuOpen.set(false);
|
|
121
121
|
}
|
|
122
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
123
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.
|
|
122
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
123
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MenuService, providedIn: 'root' });
|
|
124
124
|
}
|
|
125
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
125
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MenuService, decorators: [{
|
|
126
126
|
type: Injectable,
|
|
127
127
|
args: [{
|
|
128
128
|
providedIn: 'root',
|
|
@@ -21,10 +21,10 @@ class ModalService {
|
|
|
21
21
|
closeAll() {
|
|
22
22
|
this.states.set(new Map());
|
|
23
23
|
}
|
|
24
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
25
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.
|
|
24
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
25
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ModalService, providedIn: 'root' });
|
|
26
26
|
}
|
|
27
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
27
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ModalService, decorators: [{
|
|
28
28
|
type: Injectable,
|
|
29
29
|
args: [{ providedIn: 'root' }]
|
|
30
30
|
}] });
|
|
@@ -53,10 +53,10 @@ class DsvModalComponent {
|
|
|
53
53
|
close() {
|
|
54
54
|
this.modalService.close(this.id());
|
|
55
55
|
}
|
|
56
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
57
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.
|
|
56
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DsvModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
57
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: DsvModalComponent, isStandalone: true, selector: "dsv-modal", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, titleText: { classPropertyName: "titleText", publicName: "titleText", isSignal: true, isRequired: true, transformFunction: null }, canEchap: { classPropertyName: "canEchap", publicName: "canEchap", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:keydown.escape": "onEscapeKey()" } }, ngImport: i0, template: "<div\n class=\"modal-overlay\"\n [class.open]=\"isOpen()\"\n></div>\n<div\n [class]=\"'modal ' + class()\"\n [class.open]=\"isOpen()\"\n>\n <div class=\"modal-header\">\n <b>{{ titleText() }}</b>\n <dsv-button\n (callback)=\"close()\"\n variant=\"text\"\n color=\"inherit\"\n >\n X\n </dsv-button>\n </div>\n <div class=\"modal-content\">\n <ng-content></ng-content>\n </div>\n <div class=\"modal-footer-wrapper\">\n <ng-content select=\".modal-footer\"></ng-content>\n </div>\n</div>\n", styles: [":host{--modal-top: 35%;--modal-left: 25%;--modal-width: 50%;--modal-height: auto;--modal-min-height: 150px;--modal-max-height: 50vh;--modal-overlay-z-index: 100;--modal-z-index: 101;--modal-content-padding: 25px 10px 20px;--modal-overflow: auto;position:absolute}:host .modal-overlay{position:fixed;z-index:-1;opacity:0;background-color:oklab(0% none none / .8);width:100%;height:100%;top:0;right:0}:host .modal-overlay.open{z-index:var(--modal-overlay-z-index);opacity:1}:host .modal{position:fixed;z-index:-1;opacity:0;top:var(--modal-top);left:var(--modal-left);width:var(--modal-width);height:var(--modal-height);min-height:var(--modal-min-height);background:var(--background);display:flex;flex-direction:column}:host .modal.open{z-index:var(--modal-z-index);opacity:1}:host .modal .modal-header{display:flex;align-items:center;justify-content:space-between;padding:10px;background:var(--background-header);border-bottom:1px outset var(--border)}:host .modal .modal-content{flex:1;overflow:var(--modal-overflow);scrollbar-width:thin;padding:var(--modal-content-padding);background:var(--background-card);max-height:var(--modal-max-height);position:relative}:host .modal .modal-footer-wrapper:not(:empty){padding:10px;background:var(--background-card)}@media screen and (min-width:1000px){:host{--modal-left: calc(25% + 120px) !important}}@media screen and (max-width:750px){:host{--modal-width: calc(100% - 16px) !important;--modal-left: 8px !important}}\n"], dependencies: [{ kind: "component", type: DsvButtonComponent, selector: "dsv-button", inputs: ["libelle", "routerLink", "icon", "iconEnd", "disabled", "noHover", "type", "prevent"], outputs: ["callback"] }] });
|
|
58
58
|
}
|
|
59
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
59
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DsvModalComponent, decorators: [{
|
|
60
60
|
type: Component,
|
|
61
61
|
args: [{ selector: 'dsv-modal', imports: [DsvButtonComponent], host: {
|
|
62
62
|
'(document:keydown.escape)': 'onEscapeKey()',
|
|
@@ -84,10 +84,10 @@ class DsvModalAlertComponent {
|
|
|
84
84
|
doClickClose() {
|
|
85
85
|
this.modalService.close(this.id());
|
|
86
86
|
}
|
|
87
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
88
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
87
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DsvModalAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
88
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: DsvModalAlertComponent, isStandalone: true, selector: "dsv-modal-alert", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, titleText: { classPropertyName: "titleText", publicName: "titleText", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, button: { classPropertyName: "button", publicName: "button", isSignal: true, isRequired: false, transformFunction: null }, buttonClose: { classPropertyName: "buttonClose", publicName: "buttonClose", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { callback: "callback" }, ngImport: i0, template: "<dsv-modal\n [id]=\"id()\"\n [titleText]=\"titleText()\"\n>\n {{ text() }}\n <div class=\"modal-footer\">\n @if (buttonClose()) {\n <dsv-button\n (callback)=\"doClickClose()\"\n color=\"error\"\n >\n {{ buttonClose()! | translate }}\n </dsv-button>\n }\n <dsv-button\n (callback)=\"doClick()\"\n color=\"success\"\n >\n {{ button() | translate }}\n </dsv-button>\n </div>\n</dsv-modal>\n", styles: [":host{position:absolute}:host .modal-footer{display:flex;gap:.5rem;justify-content:flex-end}:host dsv-modal{--modal-overlay-z-index: 110 !important;--modal-z-index: 111 !important}\n"], dependencies: [{ kind: "component", type: DsvModalComponent, selector: "dsv-modal", inputs: ["id", "class", "titleText", "canEchap"] }, { kind: "component", type: DsvButtonComponent, selector: "dsv-button", inputs: ["libelle", "routerLink", "icon", "iconEnd", "disabled", "noHover", "type", "prevent"], outputs: ["callback"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
|
|
89
89
|
}
|
|
90
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
90
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DsvModalAlertComponent, decorators: [{
|
|
91
91
|
type: Component,
|
|
92
92
|
args: [{ selector: 'dsv-modal-alert', imports: [DsvModalComponent, DsvButtonComponent, TranslatePipe], template: "<dsv-modal\n [id]=\"id()\"\n [titleText]=\"titleText()\"\n>\n {{ text() }}\n <div class=\"modal-footer\">\n @if (buttonClose()) {\n <dsv-button\n (callback)=\"doClickClose()\"\n color=\"error\"\n >\n {{ buttonClose()! | translate }}\n </dsv-button>\n }\n <dsv-button\n (callback)=\"doClick()\"\n color=\"success\"\n >\n {{ button() | translate }}\n </dsv-button>\n </div>\n</dsv-modal>\n", styles: [":host{position:absolute}:host .modal-footer{display:flex;gap:.5rem;justify-content:flex-end}:host dsv-modal{--modal-overlay-z-index: 110 !important;--modal-z-index: 111 !important}\n"] }]
|
|
93
93
|
}], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], titleText: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleText", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], button: [{ type: i0.Input, args: [{ isSignal: true, alias: "button", required: false }] }], buttonClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonClose", required: false }] }], callback: [{ type: i0.Output, args: ["callback"] }] } });
|
|
@@ -104,10 +104,10 @@ class DsvModalButtonComponent {
|
|
|
104
104
|
this.callback.emit();
|
|
105
105
|
this.modalService.toggle(this.modalName());
|
|
106
106
|
}
|
|
107
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
108
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.
|
|
107
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DsvModalButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
108
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: DsvModalButtonComponent, isStandalone: true, selector: "dsv-modal-button", inputs: { modalName: { classPropertyName: "modalName", publicName: "modalName", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { callback: "callback" }, ngImport: i0, template: "<dsv-button\n [color]=\"color()\"\n [libelle]=\"text()\"\n [icon]=\"icon()\"\n [variant]=\"variant()\"\n (callback)=\"doToogle()\"\n/>\n<ng-content></ng-content>\n", styles: [":host{--button-border-radius: 4px;--button-disabled-background: rgb(200, 200, 200);--button-disabled-color: rgba(0, 0, 0);--button-width: auto;--button-min-width: 10px;--button-min-height: 28px;--button-margin: 0px;--button-padding: 2px 4px;--button-font-size: 1rem;--button-icon-size: 1.4rem;--button-line-height: 1.5rem;--button-font-weight: 550;position:relative}:host button.dsv-button{position:relative;cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;box-sizing:border-box;vertical-align:middle;flex-direction:row;gap:5px;align-items:center;justify-content:center;font-weight:var(--button-font-weight);font-size:var(--button-font-size);letter-spacing:.02857em;text-transform:uppercase;outline:0px;margin:var(--button-margin);padding:var(--button-padding);min-width:var(--button-min-width);min-height:var(--button-min-height);width:var(--button-width);line-height:var(--button-line-height);text-decoration:none;border-width:0px;border-radius:var(--button-border-radius);transition:background-color .25s cubic-bezier(.4,0,.2,1),box-shadow .25s cubic-bezier(.4,0,.2,1),border-color .25s cubic-bezier(.4,0,.2,1)}:host button.dsv-button i{font-size:var(--button-icon-size)!important}:host button.dsv-button>span:not(.ripple):empty{display:none}:host button.dsv-button:has(span:not(:empty)){padding:3px 10px}:host button.dsv-button:has(span:not(:empty)) i{font-size:var(--button-font-size)!important}:host button.dsv-button:not(:disabled):not(.no-hover):hover{transform:scale(1);opacity:1.2}:host button.dsv-button:not(:disabled):not(.no-hover):hover:not(.text){box-shadow:#0003 0 2px 4px -1px,#00000024 0 4px 5px,#0000001f 0 1px 10px}:host button.dsv-button:not(:disabled):active{transform:scale(1);opacity:.8}:host button.dsv-button:disabled{cursor:auto;background:var(--button-disabled-background);color:var(--button-disabled-color)}\n", ":host{--button-modal-border-radius: 4px;--button-modal-disabled-background: rgb(200, 200, 200);--button-modal-disabled-color: rgba(0, 0, 0);--button-modal-width: auto;--button-modal-min-width: 10px;--button-modal-min-height: 28px;--button-modal-margin: 0px;--button-modal-padding: 2px 4px;--button-modal-font-size: 1rem;--button-modal-icon-size: 1.4rem;--button-modal-line-height: 1.5rem;--button-modal-font-weight: 550}:host dsv-button{--button-border-radius: var(--button-modal-border-radius);--button-disabled-background: var(--button-modal-disabled-background);--button-disabled-color: var(--button-modal-disabled-color);--button-width: var(--button-modal-width);--button-min-width: var(--button-modal-min-width);--button-min-height: var(--button-modal-min-height);--button-margin: var(--button-modal-margin);--button-padding: var(--button-modal-padding);--button-font-size: var(--button-modal-font-size);--button-icon-size: var(--button-modal-icon-size);--button-line-height: var(--button-modal-line-height);--button-font-weight: var(--button-modal-font-weight)}\n"], dependencies: [{ kind: "component", type: DsvButtonComponent, selector: "dsv-button", inputs: ["libelle", "routerLink", "icon", "iconEnd", "disabled", "noHover", "type", "prevent"], outputs: ["callback"] }] });
|
|
109
109
|
}
|
|
110
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
110
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DsvModalButtonComponent, decorators: [{
|
|
111
111
|
type: Component,
|
|
112
112
|
args: [{ selector: 'dsv-modal-button', imports: [DsvButtonComponent], template: "<dsv-button\n [color]=\"color()\"\n [libelle]=\"text()\"\n [icon]=\"icon()\"\n [variant]=\"variant()\"\n (callback)=\"doToogle()\"\n/>\n<ng-content></ng-content>\n", styles: [":host{--button-border-radius: 4px;--button-disabled-background: rgb(200, 200, 200);--button-disabled-color: rgba(0, 0, 0);--button-width: auto;--button-min-width: 10px;--button-min-height: 28px;--button-margin: 0px;--button-padding: 2px 4px;--button-font-size: 1rem;--button-icon-size: 1.4rem;--button-line-height: 1.5rem;--button-font-weight: 550;position:relative}:host button.dsv-button{position:relative;cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;box-sizing:border-box;vertical-align:middle;flex-direction:row;gap:5px;align-items:center;justify-content:center;font-weight:var(--button-font-weight);font-size:var(--button-font-size);letter-spacing:.02857em;text-transform:uppercase;outline:0px;margin:var(--button-margin);padding:var(--button-padding);min-width:var(--button-min-width);min-height:var(--button-min-height);width:var(--button-width);line-height:var(--button-line-height);text-decoration:none;border-width:0px;border-radius:var(--button-border-radius);transition:background-color .25s cubic-bezier(.4,0,.2,1),box-shadow .25s cubic-bezier(.4,0,.2,1),border-color .25s cubic-bezier(.4,0,.2,1)}:host button.dsv-button i{font-size:var(--button-icon-size)!important}:host button.dsv-button>span:not(.ripple):empty{display:none}:host button.dsv-button:has(span:not(:empty)){padding:3px 10px}:host button.dsv-button:has(span:not(:empty)) i{font-size:var(--button-font-size)!important}:host button.dsv-button:not(:disabled):not(.no-hover):hover{transform:scale(1);opacity:1.2}:host button.dsv-button:not(:disabled):not(.no-hover):hover:not(.text){box-shadow:#0003 0 2px 4px -1px,#00000024 0 4px 5px,#0000001f 0 1px 10px}:host button.dsv-button:not(:disabled):active{transform:scale(1);opacity:.8}:host button.dsv-button:disabled{cursor:auto;background:var(--button-disabled-background);color:var(--button-disabled-color)}\n", ":host{--button-modal-border-radius: 4px;--button-modal-disabled-background: rgb(200, 200, 200);--button-modal-disabled-color: rgba(0, 0, 0);--button-modal-width: auto;--button-modal-min-width: 10px;--button-modal-min-height: 28px;--button-modal-margin: 0px;--button-modal-padding: 2px 4px;--button-modal-font-size: 1rem;--button-modal-icon-size: 1.4rem;--button-modal-line-height: 1.5rem;--button-modal-font-weight: 550}:host dsv-button{--button-border-radius: var(--button-modal-border-radius);--button-disabled-background: var(--button-modal-disabled-background);--button-disabled-color: var(--button-modal-disabled-color);--button-width: var(--button-modal-width);--button-min-width: var(--button-modal-min-width);--button-min-height: var(--button-modal-min-height);--button-margin: var(--button-modal-margin);--button-padding: var(--button-modal-padding);--button-font-size: var(--button-modal-font-size);--button-icon-size: var(--button-modal-icon-size);--button-line-height: var(--button-modal-line-height);--button-font-weight: var(--button-modal-font-weight)}\n"] }]
|
|
113
113
|
}], propDecorators: { modalName: [{ type: i0.Input, args: [{ isSignal: true, alias: "modalName", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], callback: [{ type: i0.Output, args: ["callback"] }] } });
|
|
@@ -9,10 +9,10 @@ class DsvPaginateComponent {
|
|
|
9
9
|
gotoPage(page) {
|
|
10
10
|
this.callback.emit(page);
|
|
11
11
|
}
|
|
12
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
13
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.
|
|
12
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DsvPaginateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: DsvPaginateComponent, isStandalone: true, selector: "dsv-paginate", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { callback: "callback" }, ngImport: i0, template: "<div>{{ page() + 1 }} / {{ max() }}</div>\n<dsv-button\n color=\"inherit\"\n icon=\"ri-arrow-left-s-line\"\n [disabled]=\"page() === 0\"\n (callback)=\"gotoPage(page() - 1)\"\n/>\n<dsv-button\n color=\"inherit\"\n icon=\"ri-arrow-right-s-line\"\n [disabled]=\"page() + 1 >= max()\"\n (callback)=\"gotoPage(page() + 1)\"\n/>\n", styles: [":host{width:100%;display:flex;align-items:center;justify-content:center;gap:5px;padding:10px 5px;width:calc(100% - 10px)}:host dsv-button{--button-border-radius: 50% !important;--button-disabled-background: inherit !important;--button-disabled-color: rgba(0, 0, 0, .26) !important}:host-context(body.dark) dsv-button{--button-border-radius: 50% !important;--button-disabled-color: hsla(0, 0%, 100%, .3) !important}\n"], dependencies: [{ kind: "component", type: DsvButtonComponent, selector: "dsv-button", inputs: ["libelle", "routerLink", "icon", "iconEnd", "disabled", "noHover", "type", "prevent"], outputs: ["callback"] }] });
|
|
14
14
|
}
|
|
15
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
15
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DsvPaginateComponent, decorators: [{
|
|
16
16
|
type: Component,
|
|
17
17
|
args: [{ selector: 'dsv-paginate', imports: [DsvButtonComponent], template: "<div>{{ page() + 1 }} / {{ max() }}</div>\n<dsv-button\n color=\"inherit\"\n icon=\"ri-arrow-left-s-line\"\n [disabled]=\"page() === 0\"\n (callback)=\"gotoPage(page() - 1)\"\n/>\n<dsv-button\n color=\"inherit\"\n icon=\"ri-arrow-right-s-line\"\n [disabled]=\"page() + 1 >= max()\"\n (callback)=\"gotoPage(page() + 1)\"\n/>\n", styles: [":host{width:100%;display:flex;align-items:center;justify-content:center;gap:5px;padding:10px 5px;width:calc(100% - 10px)}:host dsv-button{--button-border-radius: 50% !important;--button-disabled-background: inherit !important;--button-disabled-color: rgba(0, 0, 0, .26) !important}:host-context(body.dark) dsv-button{--button-border-radius: 50% !important;--button-disabled-color: hsla(0, 0%, 100%, .3) !important}\n"] }]
|
|
18
18
|
}], propDecorators: { page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: true }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: true }] }], callback: [{ type: i0.Output, args: ["callback"] }] } });
|
|
@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
|
|
|
2
2
|
import { input, output, signal, effect, Component, inject, ElementRef, contentChild, Injectable } from '@angular/core';
|
|
3
3
|
import { DsvButtonComponent } from '@ng-vagabond-lab/ng-dsv/ds/button';
|
|
4
4
|
import { NgTemplateOutlet } from '@angular/common';
|
|
5
|
-
import { Scroll } from '@angular/router';
|
|
5
|
+
import { NavigationStart, Scroll } from '@angular/router';
|
|
6
6
|
import { RouterService } from '@ng-vagabond-lab/ng-dsv/router';
|
|
7
7
|
import { filter, map } from 'rxjs';
|
|
8
8
|
import { BaseApiService } from '@ng-vagabond-lab/ng-dsv/base/service';
|
|
@@ -16,10 +16,10 @@ class ButtonScrollTopComponent {
|
|
|
16
16
|
this.show.set(this.scroll() > 400);
|
|
17
17
|
});
|
|
18
18
|
}
|
|
19
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
20
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
19
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ButtonScrollTopComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
20
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: ButtonScrollTopComponent, isStandalone: true, selector: "dsv-scroll-top-button", inputs: { scroll: { classPropertyName: "scroll", publicName: "scroll", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { callback: "callback" }, ngImport: i0, template: "@if (show()) {\n <dsv-button\n icon=\"ri-arrow-up-line\"\n color=\"default\"\n (callback)=\"callback.emit()\"\n ></dsv-button>\n}\n", styles: [":host{position:absolute;bottom:10px;right:10px}:host dsv-button{--button-border-radius: 50px !important}\n"], dependencies: [{ kind: "component", type: DsvButtonComponent, selector: "dsv-button", inputs: ["libelle", "routerLink", "icon", "iconEnd", "disabled", "noHover", "type", "prevent"], outputs: ["callback"] }] });
|
|
21
21
|
}
|
|
22
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
22
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ButtonScrollTopComponent, decorators: [{
|
|
23
23
|
type: Component,
|
|
24
24
|
args: [{ selector: 'dsv-scroll-top-button', imports: [DsvButtonComponent], template: "@if (show()) {\n <dsv-button\n icon=\"ri-arrow-up-line\"\n color=\"default\"\n (callback)=\"callback.emit()\"\n ></dsv-button>\n}\n", styles: [":host{position:absolute;bottom:10px;right:10px}:host dsv-button{--button-border-radius: 50px !important}\n"] }]
|
|
25
25
|
}], ctorParameters: () => [], propDecorators: { scroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "scroll", required: false }] }], callback: [{ type: i0.Output, args: ["callback"] }] } });
|
|
@@ -31,7 +31,6 @@ class DsvScrollInfiniteContainer {
|
|
|
31
31
|
bottomOffset = input(100, ...(ngDevMode ? [{ debugName: "bottomOffset" }] : /* istanbul ignore next */ []));
|
|
32
32
|
loading = input(null, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
|
|
33
33
|
id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
|
|
34
|
-
//readonly skeletonCount = input<number>(10);
|
|
35
34
|
callback = output();
|
|
36
35
|
uuid = signal('', ...(ngDevMode ? [{ debugName: "uuid" }] : /* istanbul ignore next */ []));
|
|
37
36
|
top = signal(0, ...(ngDevMode ? [{ debugName: "top" }] : /* istanbul ignore next */ []));
|
|
@@ -40,25 +39,32 @@ class DsvScrollInfiniteContainer {
|
|
|
40
39
|
skeletonTemplate = contentChild('skeleton', ...(ngDevMode ? [{ debugName: "skeletonTemplate" }] : /* istanbul ignore next */ []));
|
|
41
40
|
skeletonArray = signal([], ...(ngDevMode ? [{ debugName: "skeletonArray" }] : /* istanbul ignore next */ []));
|
|
42
41
|
constructor() {
|
|
42
|
+
this.routerService.router.events.subscribe((event) => {
|
|
43
|
+
if (event instanceof NavigationStart) {
|
|
44
|
+
this.$loading.set(true);
|
|
45
|
+
}
|
|
46
|
+
});
|
|
43
47
|
this.routerService.router.events
|
|
44
48
|
.pipe(filter((event) => event instanceof Scroll), map((event) => event.position))
|
|
45
49
|
.subscribe(() => {
|
|
46
|
-
const
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
this.$loading.set(true);
|
|
54
|
-
}, i);
|
|
55
|
-
}
|
|
50
|
+
const url = this.routerService.currentUrl();
|
|
51
|
+
const value = this.scrollService.getScroll(this.uuid(), url);
|
|
52
|
+
this.restoreScroll(value?.top, value?.left);
|
|
53
|
+
setTimeout(() => {
|
|
54
|
+
this.restoreScroll(value?.top, value?.left);
|
|
55
|
+
this.$loading.set(false);
|
|
56
|
+
}, 100);
|
|
56
57
|
});
|
|
57
58
|
effect(() => {
|
|
58
|
-
if (this.scrollService.isPlatformBrowser()
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
59
|
+
if (this.scrollService.isPlatformBrowser()) {
|
|
60
|
+
if (this.id()) {
|
|
61
|
+
this.uuid.set(this.id());
|
|
62
|
+
}
|
|
63
|
+
else {
|
|
64
|
+
const all = Array.from(document.querySelectorAll('.scroll'));
|
|
65
|
+
const index = all.indexOf(this.elementRef.nativeElement);
|
|
66
|
+
this.uuid.set(this.scrollService.getRouteUuid(index));
|
|
67
|
+
}
|
|
62
68
|
}
|
|
63
69
|
});
|
|
64
70
|
effect(() => {
|
|
@@ -70,71 +76,43 @@ class DsvScrollInfiniteContainer {
|
|
|
70
76
|
this.skeletonArray.set(Array.from({ length: this.skeletonCount() }, (_, i) => i));
|
|
71
77
|
});
|
|
72
78
|
effect(() => {
|
|
73
|
-
let count = 0;
|
|
74
79
|
const small = this.elementRef.nativeElement.classList.contains('small');
|
|
75
|
-
|
|
76
|
-
count = small ? 16 : 14;
|
|
77
|
-
}
|
|
78
|
-
else if (this.scrollService.platformService.width() >= 1150) {
|
|
79
|
-
count = small ? 14 : 12;
|
|
80
|
-
}
|
|
81
|
-
else if (this.scrollService.platformService.width() >= 900) {
|
|
82
|
-
count = small ? 14 : 10;
|
|
83
|
-
}
|
|
84
|
-
else if (this.scrollService.platformService.width() >= 650) {
|
|
85
|
-
count = small ? 14 : 8;
|
|
86
|
-
}
|
|
87
|
-
else if (this.scrollService.platformService.width() >= 350) {
|
|
88
|
-
count = small ? 8 : 6;
|
|
89
|
-
}
|
|
90
|
-
else if (this.scrollService.platformService.width() >= 200) {
|
|
91
|
-
count = small ? 6 : 3;
|
|
92
|
-
}
|
|
93
|
-
else {
|
|
94
|
-
count = small ? 4 : 2;
|
|
95
|
-
}
|
|
80
|
+
const count = getVisibleCount(this.scrollService.platformService.width(), small);
|
|
96
81
|
this.skeletonCount.set(count);
|
|
97
82
|
});
|
|
98
83
|
}
|
|
99
84
|
restoreScroll(top, left) {
|
|
100
|
-
if (top === 0 && left === 0) {
|
|
101
|
-
return;
|
|
102
|
-
}
|
|
103
85
|
this.top.set(top);
|
|
104
86
|
this.elementRef.nativeElement.scrollTop = top;
|
|
105
87
|
this.elementRef.nativeElement.scrollLeft = left;
|
|
106
|
-
this.resetLoading();
|
|
107
88
|
}
|
|
108
89
|
resetLoading() {
|
|
109
90
|
setTimeout(() => {
|
|
110
91
|
this.$loading.set(false);
|
|
111
|
-
},
|
|
92
|
+
}, 10);
|
|
112
93
|
}
|
|
113
94
|
scrollToTop() {
|
|
114
95
|
this.elementRef.nativeElement.scrollTop = 0;
|
|
115
96
|
this.scrollService.saveScroll(this.uuid(), this.routerService.currentUrl(), 0, 0);
|
|
116
97
|
}
|
|
117
98
|
doScroll() {
|
|
118
|
-
|
|
119
|
-
const scrollTop = this.elementRef.nativeElement.scrollTop;
|
|
120
|
-
const scrollLeft = this.elementRef.nativeElement.scrollLeft;
|
|
121
|
-
if (scrollTop < value.top - 500 && scrollLeft < value.left - 500) {
|
|
99
|
+
if (this.$loading()) {
|
|
122
100
|
return;
|
|
123
101
|
}
|
|
124
102
|
const element = this.elementRef.nativeElement;
|
|
125
|
-
const distanceToBottom = element.scrollHeight - element.scrollTop - element.clientHeight;
|
|
126
103
|
this.scrollService.saveScroll(this.uuid(), this.routerService.currentUrl(), element.scrollTop, element.scrollLeft);
|
|
127
104
|
this.top.set(element.scrollTop);
|
|
105
|
+
const distanceToBottom = element.scrollHeight - element.scrollTop - element.clientHeight;
|
|
128
106
|
if (distanceToBottom < this.bottomOffset() && !this.$loading()) {
|
|
129
107
|
this.$loading.set(true);
|
|
130
108
|
this.callback.emit();
|
|
131
109
|
this.resetLoading();
|
|
132
110
|
}
|
|
133
111
|
}
|
|
134
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
135
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
112
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DsvScrollInfiniteContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
113
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: DsvScrollInfiniteContainer, isStandalone: true, selector: "dsv-scroll-infinite", inputs: { bottomOffset: { classPropertyName: "bottomOffset", publicName: "bottomOffset", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { callback: "callback" }, host: { listeners: { "scroll": "doScroll()" }, properties: { "id": "id() ?? uuid()" }, classAttribute: "scroll" }, queries: [{ propertyName: "skeletonTemplate", first: true, predicate: ["skeleton"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content></ng-content>\n\n@if (loading()) {\n <ng-container>\n @for (_ of skeletonArray(); track _) {\n <ng-container *ngTemplateOutlet=\"skeletonTemplate()\"></ng-container>\n }\n </ng-container>\n}\n\n<dsv-scroll-top-button [scroll]=\"top()\" (callback)=\"scrollToTop()\" />\n", styles: [":host{display:flex;overflow:auto;scrollbar-width:thin;width:100%;height:100%}\n"], dependencies: [{ kind: "component", type: ButtonScrollTopComponent, selector: "dsv-scroll-top-button", inputs: ["scroll"], outputs: ["callback"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
136
114
|
}
|
|
137
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
115
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DsvScrollInfiniteContainer, decorators: [{
|
|
138
116
|
type: Component,
|
|
139
117
|
args: [{ selector: 'dsv-scroll-infinite', imports: [ButtonScrollTopComponent, NgTemplateOutlet], host: {
|
|
140
118
|
'[id]': 'id() ?? uuid()',
|
|
@@ -173,10 +151,10 @@ class ScrollService extends BaseApiService {
|
|
|
173
151
|
return newMap;
|
|
174
152
|
});
|
|
175
153
|
}
|
|
176
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
177
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.
|
|
154
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ScrollService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
|
|
155
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ScrollService, providedIn: 'root' });
|
|
178
156
|
}
|
|
179
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
157
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ScrollService, decorators: [{
|
|
180
158
|
type: Injectable,
|
|
181
159
|
args: [{ providedIn: 'root' }]
|
|
182
160
|
}] });
|
|
@@ -189,10 +167,23 @@ const scrollToTop = (element, name = SCROLL_ID) => {
|
|
|
189
167
|
const scrollToClosestTop = (element, name = SCROLL_CLASS) => {
|
|
190
168
|
element.nativeElement.querySelector(name)?.closest(name)?.scrollTo(0, 0);
|
|
191
169
|
};
|
|
170
|
+
const BREAKPOINTS = [
|
|
171
|
+
{ min: 1500, small: 16, normal: 14 },
|
|
172
|
+
{ min: 1150, small: 14, normal: 12 },
|
|
173
|
+
{ min: 900, small: 14, normal: 10 },
|
|
174
|
+
{ min: 650, small: 14, normal: 8 },
|
|
175
|
+
{ min: 350, small: 8, normal: 6 },
|
|
176
|
+
{ min: 200, small: 6, normal: 3 },
|
|
177
|
+
{ min: 0, small: 4, normal: 2 },
|
|
178
|
+
];
|
|
179
|
+
function getVisibleCount(width, small) {
|
|
180
|
+
const config = BREAKPOINTS.find((bp) => width >= bp.min);
|
|
181
|
+
return small ? config.small : config.normal;
|
|
182
|
+
}
|
|
192
183
|
|
|
193
184
|
/**
|
|
194
185
|
* Generated bundle index. Do not edit.
|
|
195
186
|
*/
|
|
196
187
|
|
|
197
|
-
export { ButtonScrollTopComponent, DsvScrollInfiniteContainer, SCROLL_CLASS, SCROLL_ID, ScrollService, scrollToClosestTop, scrollToTop };
|
|
188
|
+
export { ButtonScrollTopComponent, DsvScrollInfiniteContainer, SCROLL_CLASS, SCROLL_ID, ScrollService, getVisibleCount, scrollToClosestTop, scrollToTop };
|
|
198
189
|
//# sourceMappingURL=ng-vagabond-lab-ng-dsv-ds-scroll.mjs.map
|