@cadriciel/ui 0.1.0 → 0.3.0
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/fesm2022/cadriciel-ui.mjs +672 -19
- package/fesm2022/cadriciel-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/types/cadriciel-ui.d.ts +266 -2
|
@@ -232,6 +232,10 @@ const CAD_ICONS_UI = {
|
|
|
232
232
|
'panel-right': '<rect width="18" height="18" x="3" y="3" rx="2"/><path d="M15 3v18"/>',
|
|
233
233
|
'panel-top': '<rect width="18" height="18" x="3" y="3" rx="2"/><path d="M3 9h18"/>',
|
|
234
234
|
'panel-bottom': '<rect width="18" height="18" x="3" y="3" rx="2"/><path d="M3 15h18"/>',
|
|
235
|
+
// Ajoutée le 19/08 : le jeu n'avait aucune icône d'appareil, alors que le showcase et les
|
|
236
|
+
// applications en ont besoin dès qu'elles parlent de mobile.
|
|
237
|
+
smartphone: '<rect width="14" height="20" x="5" y="2" rx="2.5"/><path d="M11 18.5h2"/>',
|
|
238
|
+
tablet: '<rect width="16" height="20" x="4" y="2" rx="2"/><path d="M10.5 18.5h3"/>',
|
|
235
239
|
'sidebar-open': '<rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18M14 9l3 3-3 3"/>',
|
|
236
240
|
'sidebar-close': '<rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18M16 15l-3-3 3-3"/>',
|
|
237
241
|
rows: '<rect width="18" height="18" x="3" y="3" rx="2"/><path d="M3 12h18"/>',
|
|
@@ -4077,14 +4081,14 @@ class CadDialogContainerComponent {
|
|
|
4077
4081
|
const c = this.config();
|
|
4078
4082
|
return ['cad-dialog-container', c.kind === 'drawer' ? `is-drawer pos-${c.drawerPosition ?? 'right'}` : '', c.styleClass ?? ''].join(' ');
|
|
4079
4083
|
}, ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
|
|
4080
|
-
static SIZES = { sm: '360px', md: '480px', lg: '640px', xl: '900px', full: '
|
|
4084
|
+
static SIZES = { sm: '360px', md: '480px', lg: '640px', xl: '900px', full: '100%' };
|
|
4081
4085
|
static DRAWER_SIZES = { sm: '320px', md: '420px', lg: '600px', full: '100%' };
|
|
4082
4086
|
width = computed(() => {
|
|
4083
4087
|
const c = this.config();
|
|
4084
4088
|
if (c.kind === 'drawer') {
|
|
4085
4089
|
const s = this.bp.isMobile() ? (c.drawerMobileSize ?? 'full') : (c.drawerSize ?? 'md');
|
|
4086
4090
|
const vertical = c.drawerPosition === 'top' || c.drawerPosition === 'bottom';
|
|
4087
|
-
return vertical ? '
|
|
4091
|
+
return vertical ? '100%' : (CadDialogContainerComponent.DRAWER_SIZES[s] ?? s);
|
|
4088
4092
|
}
|
|
4089
4093
|
return c.width ?? CadDialogContainerComponent.SIZES[c.size ?? 'md'] ?? '480px';
|
|
4090
4094
|
}, ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
|
|
@@ -4099,7 +4103,7 @@ class CadDialogContainerComponent {
|
|
|
4099
4103
|
}
|
|
4100
4104
|
return c.height ?? null;
|
|
4101
4105
|
}, ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
|
|
4102
|
-
maxWidth = computed(() => this.config().kind === 'drawer' ? '
|
|
4106
|
+
maxWidth = computed(() => this.config().kind === 'drawer' ? '100%' : (this.config().maxWidth ?? (this.config().size === 'full' ? '100%' : '92%')), ...(ngDevMode ? [{ debugName: "maxWidth" }] : /* istanbul ignore next */ []));
|
|
4103
4107
|
drag = signal(null, ...(ngDevMode ? [{ debugName: "drag" }] : /* istanbul ignore next */ []));
|
|
4104
4108
|
dragTransform = computed(() => { const d = this.drag(); return d ? `translate(${d.x}px, ${d.y}px)` : null; }, ...(ngDevMode ? [{ debugName: "dragTransform" }] : /* istanbul ignore next */ []));
|
|
4105
4109
|
toggleMaximize() { this.maximized.set(!this.maximized()); this.drag.set(null); this.maximizeChange.emit(this.maximized()); }
|
|
@@ -4144,7 +4148,7 @@ class CadDialogContainerComponent {
|
|
|
4144
4148
|
<footer class="cad-dialog__footer"><ng-container *ngTemplateOutlet="config().footer!" /></footer>
|
|
4145
4149
|
}
|
|
4146
4150
|
</div>
|
|
4147
|
-
`, isInline: true, styles: [".cdk-overlay-container{position:fixed;z-index:var(--cad-z-overlay, 100002);pointer-events:none;top:0;left:0;width:100%;height:100%}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000;width:100%;height:100%}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}.cdk-overlay-backdrop{position:absolute;inset:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:transparent;opacity:0;transition:opacity var(--cad-dur, .14s) var(--cad-ease, ease)}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{visibility:visible;opacity:0}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}.cad-overlay-backdrop{background:var(--cad-backdrop, rgba(2, 6, 23, .45))}.cad-overlay-backdrop.is-hidden{display:none}.cad-overlay-pane{pointer-events:auto}.cad-overlay-pane.is-drawer-pane{height:100%}.cad-dialog-container{display:flex;outline:none;font-family:var(--cad-font);font-size:var(--cad-font-size);color:var(--cad-fg);max-height:100%;max-width:100%}.cad-dialog-container.is-hidden{display:none}.cad-dialog{display:flex;flex-direction:column;background:var(--cad-surface);border:1px solid var(--cad-border);border-radius:var(--cad-radius-lg);box-shadow:var(--cad-shadow-lg);max-height:92vh;min-width:0;outline:none;box-sizing:border-box;opacity:0;transform:translateY(6px) scale(.98);transition:opacity var(--cad-dur) var(--cad-ease),transform var(--cad-dur) var(--cad-ease)}.cad-dialog-container.is-open .cad-dialog{opacity:1;transform:none}.cad-dialog-container.is-maximized .cad-dialog{width:
|
|
4151
|
+
`, isInline: true, styles: [".cdk-overlay-container{position:fixed;z-index:var(--cad-z-overlay, 100002);pointer-events:none;top:0;left:0;width:100%;height:100%}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000;width:100%;height:100%}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}.cdk-overlay-backdrop{position:absolute;inset:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:transparent;opacity:0;transition:opacity var(--cad-dur, .14s) var(--cad-ease, ease)}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{visibility:visible;opacity:0}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}.cad-overlay-backdrop{background:var(--cad-backdrop, rgba(2, 6, 23, .45))}.cad-overlay-backdrop.is-hidden{display:none}.cad-overlay-pane{pointer-events:auto}.cad-overlay-pane.is-drawer-pane{height:100%}.cad-dialog-container{display:flex;outline:none;font-family:var(--cad-font);font-size:var(--cad-font-size);color:var(--cad-fg);max-height:100%;max-width:100%}.cad-dialog-container.is-hidden{display:none}.cad-dialog{display:flex;flex-direction:column;background:var(--cad-surface);border:1px solid var(--cad-border);border-radius:var(--cad-radius-lg);box-shadow:var(--cad-shadow-lg);max-height:92vh;min-width:0;outline:none;box-sizing:border-box;opacity:0;transform:translateY(6px) scale(.98);transition:opacity var(--cad-dur) var(--cad-ease),transform var(--cad-dur) var(--cad-ease)}.cad-dialog-container.is-open .cad-dialog{opacity:1;transform:none}.cad-dialog-container.is-maximized .cad-dialog{width:100%!important;max-width:100%!important;height:100vh!important;max-height:100vh;border-radius:0}.cad-dialog__header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 16px 10px;flex:none}.cad-dialog__header.is-draggable{cursor:move;-webkit-user-select:none;user-select:none}.cad-dialog__title{margin:0;font-size:14.5px;font-weight:600;color:var(--cad-fg);min-width:0}.cad-dialog__actions{display:inline-flex;gap:2px;margin-left:auto;flex:none}.cad-dialog__icon-btn{display:grid;place-items:center;width:26px;height:26px;border:0;border-radius:var(--cad-radius-sm);background:transparent;color:var(--cad-fg-muted);cursor:pointer;padding:0;transition:background var(--cad-dur),color var(--cad-dur)}.cad-dialog__icon-btn:hover{background:var(--cad-hover);color:var(--cad-fg)}.cad-dialog__icon-btn:focus-visible{outline:2px solid var(--cad-ring);outline-offset:1px}.cad-dialog__body{padding:4px 16px 14px;color:var(--cad-fg-secondary);font-size:var(--cad-font-size);overflow:auto;flex:1;min-height:0}.cad-dialog__body:first-child{padding-top:16px}.cad-dialog__footer{display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:12px 16px;border-top:1px solid var(--cad-border);background:var(--cad-bg-subtle);border-radius:0 0 var(--cad-radius-lg) var(--cad-radius-lg);flex:none}.cad-dialog-container.is-drawer{height:100%}.cad-dialog-container.is-drawer .cad-dialog{max-height:none;height:100%;border-radius:0;opacity:1;transform:none;transition:transform .18s var(--cad-ease)}.cad-dialog-container.is-drawer .cad-dialog__footer{border-radius:0}.cad-dialog-container.is-drawer.pos-right .cad-dialog{transform:translate(100%);border-width:0 0 0 1px}.cad-dialog-container.is-drawer.pos-left .cad-dialog{transform:translate(-100%);border-width:0 1px 0 0}.cad-dialog-container.is-drawer.pos-top .cad-dialog{transform:translateY(-100%);border-width:0 0 1px 0}.cad-dialog-container.is-drawer.pos-bottom .cad-dialog{transform:translateY(100%);border-width:1px 0 0 0}.cad-dialog-container.is-drawer.is-open .cad-dialog{transform:none}.cad-dialog-container.is-drawer.pos-top,.cad-dialog-container.is-drawer.pos-bottom{width:100%}.cad-dialog-container.is-drawer.pos-top .cad-dialog,.cad-dialog-container.is-drawer.pos-bottom .cad-dialog{width:100%!important;max-width:100%!important}.cad-dialog-container.is-mobile-full{width:100%;height:100dvh;max-height:100dvh}.cad-dialog-container.is-mobile-full .cad-dialog{width:100%!important;max-width:100%!important;height:100dvh!important;max-height:100dvh;border-radius:0;border:0;box-shadow:none;padding-bottom:env(safe-area-inset-bottom)}.cad-dialog-container.is-mobile-full .cad-dialog__header{position:sticky;top:0;background:var(--cad-surface);z-index:1;padding-top:calc(14px + env(safe-area-inset-top))}.cad-dialog-container.is-mobile-full .cad-dialog__footer{border-radius:0}.cad-overlay-pane.is-mobile-sheet-pane{width:100%;max-width:100%}.cad-dialog-container.is-mobile-sheet{width:100%;align-items:flex-end}.cad-dialog-container.is-mobile-sheet .cad-dialog{position:relative;width:100%!important;max-width:100%!important;height:92dvh!important;max-height:92dvh;border-radius:16px 16px 0 0;border-bottom:0;box-shadow:0 -8px 32px #0000002e;padding-bottom:env(safe-area-inset-bottom);opacity:1;transform:translateY(100%);transition:transform .2s var(--cad-ease)}.cad-dialog-container.is-mobile-sheet.sheet-h-auto .cad-dialog{height:auto!important}.cad-dialog-container.is-mobile-sheet .cad-dialog:before{content:\"\";position:absolute;top:8px;left:50%;width:36px;height:4px;margin-left:-18px;border-radius:2px;background:var(--cad-border-strong)}.cad-dialog-container.is-mobile-sheet .cad-dialog__header{padding-top:20px}.cad-dialog-container.is-mobile-sheet .cad-dialog__body:first-child{padding-top:22px}.cad-dialog-container.is-mobile-sheet.is-open .cad-dialog{transform:none}.cad-dialog-container.is-mobile-sheet .cad-dialog__footer{border-radius:0}.cad-confirm-dialog.is-mobile-sheet .cad-dialog__footer{flex-direction:column-reverse;align-items:stretch;gap:8px}.cad-confirm-dialog.is-mobile-sheet .cad-dialog__footer>*{width:100%;height:44px}@media(prefers-reduced-motion:reduce){.cad-dialog,.cad-dialog-container.is-drawer .cad-dialog,.cad-dialog-container.is-mobile-sheet .cad-dialog,.cdk-overlay-backdrop{transition:none!important}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: CadIconComponent, selector: "cad-icon", inputs: ["name", "size", "strokeWidth", "label", "title", "spin", "filled", "flip", "rotate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
4148
4152
|
}
|
|
4149
4153
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: CadDialogContainerComponent, decorators: [{
|
|
4150
4154
|
type: Component,
|
|
@@ -4190,7 +4194,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
|
|
|
4190
4194
|
<footer class="cad-dialog__footer"><ng-container *ngTemplateOutlet="config().footer!" /></footer>
|
|
4191
4195
|
}
|
|
4192
4196
|
</div>
|
|
4193
|
-
`, styles: [".cdk-overlay-container{position:fixed;z-index:var(--cad-z-overlay, 100002);pointer-events:none;top:0;left:0;width:100%;height:100%}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000;width:100%;height:100%}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}.cdk-overlay-backdrop{position:absolute;inset:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:transparent;opacity:0;transition:opacity var(--cad-dur, .14s) var(--cad-ease, ease)}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{visibility:visible;opacity:0}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}.cad-overlay-backdrop{background:var(--cad-backdrop, rgba(2, 6, 23, .45))}.cad-overlay-backdrop.is-hidden{display:none}.cad-overlay-pane{pointer-events:auto}.cad-overlay-pane.is-drawer-pane{height:100%}.cad-dialog-container{display:flex;outline:none;font-family:var(--cad-font);font-size:var(--cad-font-size);color:var(--cad-fg);max-height:100%;max-width:100%}.cad-dialog-container.is-hidden{display:none}.cad-dialog{display:flex;flex-direction:column;background:var(--cad-surface);border:1px solid var(--cad-border);border-radius:var(--cad-radius-lg);box-shadow:var(--cad-shadow-lg);max-height:92vh;min-width:0;outline:none;box-sizing:border-box;opacity:0;transform:translateY(6px) scale(.98);transition:opacity var(--cad-dur) var(--cad-ease),transform var(--cad-dur) var(--cad-ease)}.cad-dialog-container.is-open .cad-dialog{opacity:1;transform:none}.cad-dialog-container.is-maximized .cad-dialog{width:
|
|
4197
|
+
`, styles: [".cdk-overlay-container{position:fixed;z-index:var(--cad-z-overlay, 100002);pointer-events:none;top:0;left:0;width:100%;height:100%}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000;width:100%;height:100%}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}.cdk-overlay-backdrop{position:absolute;inset:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:transparent;opacity:0;transition:opacity var(--cad-dur, .14s) var(--cad-ease, ease)}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{visibility:visible;opacity:0}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}.cad-overlay-backdrop{background:var(--cad-backdrop, rgba(2, 6, 23, .45))}.cad-overlay-backdrop.is-hidden{display:none}.cad-overlay-pane{pointer-events:auto}.cad-overlay-pane.is-drawer-pane{height:100%}.cad-dialog-container{display:flex;outline:none;font-family:var(--cad-font);font-size:var(--cad-font-size);color:var(--cad-fg);max-height:100%;max-width:100%}.cad-dialog-container.is-hidden{display:none}.cad-dialog{display:flex;flex-direction:column;background:var(--cad-surface);border:1px solid var(--cad-border);border-radius:var(--cad-radius-lg);box-shadow:var(--cad-shadow-lg);max-height:92vh;min-width:0;outline:none;box-sizing:border-box;opacity:0;transform:translateY(6px) scale(.98);transition:opacity var(--cad-dur) var(--cad-ease),transform var(--cad-dur) var(--cad-ease)}.cad-dialog-container.is-open .cad-dialog{opacity:1;transform:none}.cad-dialog-container.is-maximized .cad-dialog{width:100%!important;max-width:100%!important;height:100vh!important;max-height:100vh;border-radius:0}.cad-dialog__header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 16px 10px;flex:none}.cad-dialog__header.is-draggable{cursor:move;-webkit-user-select:none;user-select:none}.cad-dialog__title{margin:0;font-size:14.5px;font-weight:600;color:var(--cad-fg);min-width:0}.cad-dialog__actions{display:inline-flex;gap:2px;margin-left:auto;flex:none}.cad-dialog__icon-btn{display:grid;place-items:center;width:26px;height:26px;border:0;border-radius:var(--cad-radius-sm);background:transparent;color:var(--cad-fg-muted);cursor:pointer;padding:0;transition:background var(--cad-dur),color var(--cad-dur)}.cad-dialog__icon-btn:hover{background:var(--cad-hover);color:var(--cad-fg)}.cad-dialog__icon-btn:focus-visible{outline:2px solid var(--cad-ring);outline-offset:1px}.cad-dialog__body{padding:4px 16px 14px;color:var(--cad-fg-secondary);font-size:var(--cad-font-size);overflow:auto;flex:1;min-height:0}.cad-dialog__body:first-child{padding-top:16px}.cad-dialog__footer{display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:12px 16px;border-top:1px solid var(--cad-border);background:var(--cad-bg-subtle);border-radius:0 0 var(--cad-radius-lg) var(--cad-radius-lg);flex:none}.cad-dialog-container.is-drawer{height:100%}.cad-dialog-container.is-drawer .cad-dialog{max-height:none;height:100%;border-radius:0;opacity:1;transform:none;transition:transform .18s var(--cad-ease)}.cad-dialog-container.is-drawer .cad-dialog__footer{border-radius:0}.cad-dialog-container.is-drawer.pos-right .cad-dialog{transform:translate(100%);border-width:0 0 0 1px}.cad-dialog-container.is-drawer.pos-left .cad-dialog{transform:translate(-100%);border-width:0 1px 0 0}.cad-dialog-container.is-drawer.pos-top .cad-dialog{transform:translateY(-100%);border-width:0 0 1px 0}.cad-dialog-container.is-drawer.pos-bottom .cad-dialog{transform:translateY(100%);border-width:1px 0 0 0}.cad-dialog-container.is-drawer.is-open .cad-dialog{transform:none}.cad-dialog-container.is-drawer.pos-top,.cad-dialog-container.is-drawer.pos-bottom{width:100%}.cad-dialog-container.is-drawer.pos-top .cad-dialog,.cad-dialog-container.is-drawer.pos-bottom .cad-dialog{width:100%!important;max-width:100%!important}.cad-dialog-container.is-mobile-full{width:100%;height:100dvh;max-height:100dvh}.cad-dialog-container.is-mobile-full .cad-dialog{width:100%!important;max-width:100%!important;height:100dvh!important;max-height:100dvh;border-radius:0;border:0;box-shadow:none;padding-bottom:env(safe-area-inset-bottom)}.cad-dialog-container.is-mobile-full .cad-dialog__header{position:sticky;top:0;background:var(--cad-surface);z-index:1;padding-top:calc(14px + env(safe-area-inset-top))}.cad-dialog-container.is-mobile-full .cad-dialog__footer{border-radius:0}.cad-overlay-pane.is-mobile-sheet-pane{width:100%;max-width:100%}.cad-dialog-container.is-mobile-sheet{width:100%;align-items:flex-end}.cad-dialog-container.is-mobile-sheet .cad-dialog{position:relative;width:100%!important;max-width:100%!important;height:92dvh!important;max-height:92dvh;border-radius:16px 16px 0 0;border-bottom:0;box-shadow:0 -8px 32px #0000002e;padding-bottom:env(safe-area-inset-bottom);opacity:1;transform:translateY(100%);transition:transform .2s var(--cad-ease)}.cad-dialog-container.is-mobile-sheet.sheet-h-auto .cad-dialog{height:auto!important}.cad-dialog-container.is-mobile-sheet .cad-dialog:before{content:\"\";position:absolute;top:8px;left:50%;width:36px;height:4px;margin-left:-18px;border-radius:2px;background:var(--cad-border-strong)}.cad-dialog-container.is-mobile-sheet .cad-dialog__header{padding-top:20px}.cad-dialog-container.is-mobile-sheet .cad-dialog__body:first-child{padding-top:22px}.cad-dialog-container.is-mobile-sheet.is-open .cad-dialog{transform:none}.cad-dialog-container.is-mobile-sheet .cad-dialog__footer{border-radius:0}.cad-confirm-dialog.is-mobile-sheet .cad-dialog__footer{flex-direction:column-reverse;align-items:stretch;gap:8px}.cad-confirm-dialog.is-mobile-sheet .cad-dialog__footer>*{width:100%;height:44px}@media(prefers-reduced-motion:reduce){.cad-dialog,.cad-dialog-container.is-drawer .cad-dialog,.cad-dialog-container.is-mobile-sheet .cad-dialog,.cdk-overlay-backdrop{transition:none!important}}\n"] }]
|
|
4194
4198
|
}], propDecorators: { closeRequest: [{ type: i0.Output, args: ["closeRequest"] }], attached: [{ type: i0.Output, args: ["attached"] }], maximizeChange: [{ type: i0.Output, args: ["maximizeChange"] }] } });
|
|
4195
4199
|
|
|
4196
4200
|
const ANIM_MS = 180;
|
|
@@ -6277,6 +6281,108 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
|
|
|
6277
6281
|
`, styles: [":host{display:grid;width:100%;height:100%;min-height:0;min-width:0;--_g: 6px}:host ::ng-deep>cad-splitter-panel{grid-row:1}:host(.is-vertical) ::ng-deep>cad-splitter-panel{grid-row:auto;grid-column:1}:host(:not(.is-vertical)) ::ng-deep>cad-splitter-panel:nth-child(1){grid-column:1}:host(:not(.is-vertical)) ::ng-deep>cad-splitter-panel:nth-child(2){grid-column:3}:host(:not(.is-vertical)) ::ng-deep>cad-splitter-panel:nth-child(3){grid-column:5}:host(:not(.is-vertical)) ::ng-deep>cad-splitter-panel:nth-child(4){grid-column:7}:host(:not(.is-vertical)) ::ng-deep>cad-splitter-panel:nth-child(5){grid-column:9}:host(.is-vertical) ::ng-deep>cad-splitter-panel:nth-child(1){grid-row:1}:host(.is-vertical) ::ng-deep>cad-splitter-panel:nth-child(2){grid-row:3}:host(.is-vertical) ::ng-deep>cad-splitter-panel:nth-child(3){grid-row:5}:host(.is-vertical) ::ng-deep>cad-splitter-panel:nth-child(4){grid-row:7}:host(.is-vertical) ::ng-deep>cad-splitter-panel:nth-child(5){grid-row:9}.sp__gutter{grid-row:1;background:var(--cad-border);display:grid;place-items:center;cursor:col-resize;touch-action:none;-webkit-user-select:none;user-select:none;transition:background var(--cad-dur)}:host(.is-vertical) .sp__gutter{grid-column:1;cursor:row-resize}.sp__gutter i{width:2px;height:22px;border-radius:2px;background:var(--cad-border-strong)}:host(.is-vertical) .sp__gutter i{width:22px;height:2px}.sp__gutter:hover,.sp__gutter.is-active{background:var(--cad-accent-soft)}.sp__gutter:hover i,.sp__gutter.is-active i{background:var(--cad-accent)}.sp__gutter:focus-visible{outline:2px solid var(--cad-ring);outline-offset:-2px}\n"] }]
|
|
6278
6282
|
}], ctorParameters: () => [], propDecorators: { layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], panelSizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelSizes", required: false }] }], minSizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSizes", required: false }] }], gutterSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "gutterSize", required: false }] }], stateKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "stateKey", required: false }] }], resizeStart: [{ type: i0.Output, args: ["resizeStart"] }], resizeEnd: [{ type: i0.Output, args: ["resizeEnd"] }], panels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CadSplitterPanelComponent), { isSignal: true }] }] } });
|
|
6279
6283
|
|
|
6284
|
+
const CAD_SHELL = new InjectionToken('CAD_SHELL');
|
|
6285
|
+
/**
|
|
6286
|
+
* Coquille d'application : barre haute, menu, contenu, barre basse.
|
|
6287
|
+
*
|
|
6288
|
+
* POURQUOI ELLE EXISTE — la bibliothèque avait `cad-bottom-nav`, `cad-menubar`,
|
|
6289
|
+
* `cad-nav-drawer` et `cad-sidebar`, mais aucune coquille. Chaque application refaisait donc
|
|
6290
|
+
* sa mise en page, et retombait sur le même défaut, signalé par SZU le 21/08/2026 : la barre
|
|
6291
|
+
* du haut « défile au lieu de rester en place ». Ce n'était pas la barre qui bougeait, c'était
|
|
6292
|
+
* le DOCUMENT qui défilait.
|
|
6293
|
+
*
|
|
6294
|
+
* LE PARTI PRIS — on ne fixe pas les barres une par une (`position: fixed`), on rend la
|
|
6295
|
+
* coquille INCAPABLE de défiler : hauteur exacte du viewport, seul le contenu défile. Les
|
|
6296
|
+
* barres restent en place parce qu'elles ne peuvent pas bouger. Rien à réserver dans le
|
|
6297
|
+
* contenu, aucune zone sûre dupliquée, un seul seuil. `fixed` reste une porte de sortie pour
|
|
6298
|
+
* un cas particulier, pas le mécanisme.
|
|
6299
|
+
*
|
|
6300
|
+
* AGENCEMENT — barre haute sur TOUTE la largeur, menu dessous : c'est celui du template
|
|
6301
|
+
* CEREMA (`_topbar.scss` : `position: fixed; top: 0; width: 100%`), et une bibliothèque ne
|
|
6302
|
+
* doit pas imposer l'inverse de ce que font les applications maison.
|
|
6303
|
+
*
|
|
6304
|
+
* ELLE MESURE LE MENU, ELLE NE LE POSSÈDE PAS (arbitrage SZU : « le tiroir c'est le composant
|
|
6305
|
+
* menu lui-même »). Elle fonctionne donc sans menu (`--cad-shell-nav: 0`), n'exige aucun
|
|
6306
|
+
* enfant, et `openNav()` se contente d'émettre `navRequested` — c'est l'hôte qui ouvre son
|
|
6307
|
+
* `cad-nav-drawer`. Aucun couplage dans un sens ni dans l'autre.
|
|
6308
|
+
*
|
|
6309
|
+
* ```html
|
|
6310
|
+
* <cad-app-shell (navRequested)="menu.set(true)">
|
|
6311
|
+
* <header cadShellBar>…</header>
|
|
6312
|
+
* <cad-nav-drawer cadShellNav [items]="menu" [(open)]="ouvert"/>
|
|
6313
|
+
* <router-outlet />
|
|
6314
|
+
* <cad-bottom-nav cadShellBottom [items]="dest" [(value)]="page"/>
|
|
6315
|
+
* </cad-app-shell>
|
|
6316
|
+
* ```
|
|
6317
|
+
*/
|
|
6318
|
+
class CadAppShellComponent {
|
|
6319
|
+
bp = inject(CadBreakpointService);
|
|
6320
|
+
/** Surcharge locale du seuil. Par defaut : celui de la bibliotheque (CAD_MOBILE_BREAKPOINT). */
|
|
6321
|
+
compactAt = input(null, ...(ngDevMode ? [{ debugName: "compactAt" }] : /* istanbul ignore next */ []));
|
|
6322
|
+
/** Un enfant a demande le menu (bouton hamburger de la barre, par exemple). */
|
|
6323
|
+
navRequested = output();
|
|
6324
|
+
barRef = viewChild.required('bar');
|
|
6325
|
+
navRef = viewChild.required('nav');
|
|
6326
|
+
bottomRef = viewChild.required('bottom');
|
|
6327
|
+
_top = signal(0, ...(ngDevMode ? [{ debugName: "_top" }] : /* istanbul ignore next */ []));
|
|
6328
|
+
_bottom = signal(0, ...(ngDevMode ? [{ debugName: "_bottom" }] : /* istanbul ignore next */ []));
|
|
6329
|
+
_nav = signal(0, ...(ngDevMode ? [{ debugName: "_nav" }] : /* istanbul ignore next */ []));
|
|
6330
|
+
topHeight = this._top.asReadonly();
|
|
6331
|
+
bottomHeight = this._bottom.asReadonly();
|
|
6332
|
+
navWidth = this._nav.asReadonly();
|
|
6333
|
+
compact = computed(() => {
|
|
6334
|
+
const seuil = this.compactAt();
|
|
6335
|
+
return seuil == null ? this.bp.isMobile() : this.bp.width() < seuil;
|
|
6336
|
+
}, ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
|
|
6337
|
+
constructor() {
|
|
6338
|
+
// Les hauteurs sont MESURÉES, jamais déclarées : une barre dont le contenu grandit
|
|
6339
|
+
// (deux lignes de titre, un bandeau d'alerte) doit rester juste sans que personne
|
|
6340
|
+
// n'ait à mettre un chiffre à jour quelque part.
|
|
6341
|
+
effect((onCleanup) => {
|
|
6342
|
+
if (typeof ResizeObserver === 'undefined')
|
|
6343
|
+
return;
|
|
6344
|
+
const cibles = [
|
|
6345
|
+
[this.barRef().nativeElement, (n) => this._top.set(n), 'h'],
|
|
6346
|
+
[this.bottomRef().nativeElement, (n) => this._bottom.set(n), 'h'],
|
|
6347
|
+
[this.navRef().nativeElement, (n) => this._nav.set(n), 'w'],
|
|
6348
|
+
];
|
|
6349
|
+
const ro = new ResizeObserver(() => {
|
|
6350
|
+
for (const [el, set, axe] of cibles) {
|
|
6351
|
+
const r = el.getBoundingClientRect();
|
|
6352
|
+
set(Math.round(axe === 'h' ? r.height : r.width));
|
|
6353
|
+
}
|
|
6354
|
+
});
|
|
6355
|
+
for (const [el] of cibles)
|
|
6356
|
+
ro.observe(el);
|
|
6357
|
+
onCleanup(() => ro.disconnect());
|
|
6358
|
+
});
|
|
6359
|
+
inject(DestroyRef).onDestroy(() => { });
|
|
6360
|
+
}
|
|
6361
|
+
openNav() { this.navRequested.emit(); }
|
|
6362
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: CadAppShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6363
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.20", type: CadAppShellComponent, isStandalone: true, selector: "cad-app-shell", inputs: { compactAt: { classPropertyName: "compactAt", publicName: "compactAt", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navRequested: "navRequested" }, host: { properties: { "class.is-compact": "compact()", "style.--cad-shell-top.px": "topHeight()", "style.--cad-shell-bottom.px": "bottomHeight()", "style.--cad-shell-nav.px": "navWidth()" }, classAttribute: "cad-app-shell" }, providers: [{ provide: CAD_SHELL, useExisting: CadAppShellComponent }], viewQueries: [{ propertyName: "barRef", first: true, predicate: ["bar"], descendants: true, isSignal: true }, { propertyName: "navRef", first: true, predicate: ["nav"], descendants: true, isSignal: true }, { propertyName: "bottomRef", first: true, predicate: ["bottom"], descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
6364
|
+
<div class="cad-shell__bar" #bar><ng-content select="[cadShellBar]" /></div>
|
|
6365
|
+
<div class="cad-shell__nav" #nav><ng-content select="[cadShellNav]" /></div>
|
|
6366
|
+
<div class="cad-shell__main" #main><ng-content /></div>
|
|
6367
|
+
<div class="cad-shell__bottom" #bottom><ng-content select="[cadShellBottom]" /></div>
|
|
6368
|
+
`, isInline: true, styles: [":host{display:grid;height:100dvh;overflow:hidden;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;background:var(--cad-bg);color:var(--cad-fg);font-family:var(--cad-font);font-size:var(--cad-font-size)}.cad-shell__bar{grid-column:1 / -1;grid-row:1;min-width:0}.cad-shell__nav{grid-column:1;grid-row:2;min-height:0;display:flex}.cad-shell__main{grid-column:2;grid-row:2;min-width:0;min-height:0;overflow-y:auto;overscroll-behavior:contain}.cad-shell__bottom{grid-column:1 / -1;grid-row:3;min-width:0}.cad-shell__bar:empty,.cad-shell__nav:empty,.cad-shell__bottom:empty{display:none}:host(.is-compact) .cad-shell__nav{width:0;overflow:visible}:host(.is-compact) .cad-shell__main{grid-column:1 / -1}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6369
|
+
}
|
|
6370
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: CadAppShellComponent, decorators: [{
|
|
6371
|
+
type: Component,
|
|
6372
|
+
args: [{ selector: 'cad-app-shell', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: CAD_SHELL, useExisting: CadAppShellComponent }], host: {
|
|
6373
|
+
class: 'cad-app-shell',
|
|
6374
|
+
'[class.is-compact]': 'compact()',
|
|
6375
|
+
'[style.--cad-shell-top.px]': 'topHeight()',
|
|
6376
|
+
'[style.--cad-shell-bottom.px]': 'bottomHeight()',
|
|
6377
|
+
'[style.--cad-shell-nav.px]': 'navWidth()',
|
|
6378
|
+
}, template: `
|
|
6379
|
+
<div class="cad-shell__bar" #bar><ng-content select="[cadShellBar]" /></div>
|
|
6380
|
+
<div class="cad-shell__nav" #nav><ng-content select="[cadShellNav]" /></div>
|
|
6381
|
+
<div class="cad-shell__main" #main><ng-content /></div>
|
|
6382
|
+
<div class="cad-shell__bottom" #bottom><ng-content select="[cadShellBottom]" /></div>
|
|
6383
|
+
`, styles: [":host{display:grid;height:100dvh;overflow:hidden;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;background:var(--cad-bg);color:var(--cad-fg);font-family:var(--cad-font);font-size:var(--cad-font-size)}.cad-shell__bar{grid-column:1 / -1;grid-row:1;min-width:0}.cad-shell__nav{grid-column:1;grid-row:2;min-height:0;display:flex}.cad-shell__main{grid-column:2;grid-row:2;min-width:0;min-height:0;overflow-y:auto;overscroll-behavior:contain}.cad-shell__bottom{grid-column:1 / -1;grid-row:3;min-width:0}.cad-shell__bar:empty,.cad-shell__nav:empty,.cad-shell__bottom:empty{display:none}:host(.is-compact) .cad-shell__nav{width:0;overflow:visible}:host(.is-compact) .cad-shell__main{grid-column:1 / -1}\n"] }]
|
|
6384
|
+
}], ctorParameters: () => [], propDecorators: { compactAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "compactAt", required: false }] }], navRequested: [{ type: i0.Output, args: ["navRequested"] }], barRef: [{ type: i0.ViewChild, args: ['bar', { isSignal: true }] }], navRef: [{ type: i0.ViewChild, args: ['nav', { isSignal: true }] }], bottomRef: [{ type: i0.ViewChild, args: ['bottom', { isSignal: true }] }] } });
|
|
6385
|
+
|
|
6280
6386
|
/**
|
|
6281
6387
|
* Formulaire de modification d'une ligne (editMode="row") ouvert dans un cad-dialog par la table :
|
|
6282
6388
|
* un champ par colonne `editable` (éditeur natif de la colonne ou `cadEditorTemplate`), validation `validator`,
|
|
@@ -8164,12 +8270,29 @@ class CadAccordionPanelComponent {
|
|
|
8164
8270
|
constructor() {
|
|
8165
8271
|
effect(() => { if (this.isOpen())
|
|
8166
8272
|
this.rendered.set(true); });
|
|
8167
|
-
// expanded (local)
|
|
8168
|
-
|
|
8169
|
-
|
|
8170
|
-
//
|
|
8171
|
-
|
|
8172
|
-
|
|
8273
|
+
// DEUX MIROIRS ENTRE `expanded` (local) ET L'ACCORDÉON. Règle : un miroir ne
|
|
8274
|
+
// s'abonne QU'À SA SOURCE, jamais à sa destination — sinon les deux se réveillent
|
|
8275
|
+
// mutuellement et celui créé en premier écrase l'autre avec une valeur périmée.
|
|
8276
|
+
// C'est ce qui refermait le panneau 55 ms après son ouverture (corrigé le 21/08/2026).
|
|
8277
|
+
// accordéon → expanded : l'accordéon est la SOURCE DE VÉRITÉ, il passe en premier
|
|
8278
|
+
// pour que `expanded` soit aligné avant que le miroir inverse ne s'exécute.
|
|
8279
|
+
effect(() => {
|
|
8280
|
+
const o = this.isOpen();
|
|
8281
|
+
untracked(() => { if (o !== this.expanded())
|
|
8282
|
+
this.expanded.set(o); });
|
|
8283
|
+
});
|
|
8284
|
+
// expanded → accordéon : seulement sur un VRAI changement local. Au premier passage
|
|
8285
|
+
// `expanded` vaut son défaut (`false`), qui n'exprime aucune intention : le pousser
|
|
8286
|
+
// écraserait la valeur initiale déclarée sur l'accordéon.
|
|
8287
|
+
let precedent = untracked(() => this.expanded());
|
|
8288
|
+
effect(() => {
|
|
8289
|
+
const e = this.expanded();
|
|
8290
|
+
if (e === precedent)
|
|
8291
|
+
return;
|
|
8292
|
+
precedent = e;
|
|
8293
|
+
untracked(() => { if (e !== this.acc.isOpen(this.value()))
|
|
8294
|
+
this.acc.setOpen(this.value(), e, this); });
|
|
8295
|
+
});
|
|
8173
8296
|
}
|
|
8174
8297
|
toggle() { if (!this.disabled())
|
|
8175
8298
|
this.acc.setOpen(this.value(), !this.isOpen(), this); }
|
|
@@ -9040,6 +9163,483 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
|
|
|
9040
9163
|
`, styles: [":host{position:relative;display:inline-block;z-index:5}.cad-speed-dial__fab{width:48px;height:48px;border-radius:50%;border:0;background:var(--cad-accent);color:var(--cad-fg-on-accent);display:grid;place-items:center;cursor:pointer;box-shadow:var(--cad-shadow-md);transition:transform var(--cad-dur),background var(--cad-dur)}.cad-speed-dial__fab:hover{background:var(--cad-accent-hover)}.cad-speed-dial__fab:focus-visible{outline:2px solid var(--cad-ring);outline-offset:2px}:host(.is-open) .cad-speed-dial__fab cad-icon{transform:rotate(0)}.cad-speed-dial__items{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}.cad-speed-dial__item{position:absolute;left:-18px;top:-18px;width:36px;height:36px;border-radius:50%;border:1px solid var(--cad-border);background:var(--cad-surface);color:var(--cad-fg-secondary);display:grid;place-items:center;cursor:pointer;box-shadow:var(--cad-shadow-md);transition:transform .18s var(--cad-ease),opacity .15s;pointer-events:auto}.cad-speed-dial__item:hover{color:var(--cad-accent);border-color:var(--cad-accent)}.cad-speed-dial__item:focus-visible{outline:2px solid var(--cad-ring)}:host(:not(.is-open)) .cad-speed-dial__item{pointer-events:none}.cad-speed-dial__mask{position:fixed;inset:0;background:var(--cad-backdrop, rgba(2,6,23,.45));z-index:-1}@media(prefers-reduced-motion:reduce){.cad-speed-dial__item{transition:none}}\n"] }]
|
|
9041
9164
|
}], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], hideIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideIcon", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
|
|
9042
9165
|
|
|
9166
|
+
/**
|
|
9167
|
+
* <cad-bottom-nav [(value)]="page" [items]="items" labels="always|selected|never" (changed)/>
|
|
9168
|
+
*
|
|
9169
|
+
* Barre de navigation basse : 3 à 5 destinations à portée de pouce, sur mobile uniquement.
|
|
9170
|
+
*
|
|
9171
|
+
* POURQUOI UNE LISTE PROPRE, DISTINCTE DU TIROIR — la tentation est de reprendre les premières
|
|
9172
|
+
* entrées de `cad-nav-drawer`. On ne le fait pas : une barre basse ne supporte pas plus de cinq
|
|
9173
|
+
* destinations, et surtout on ne met pas en avant les mêmes choses au pouce que dans un menu
|
|
9174
|
+
* complet. Les deux listes pointent volontiers les mêmes routes, mais elles sont écrites
|
|
9175
|
+
* séparément — l'implicite se paierait en surprises au premier ajout d'entrée.
|
|
9176
|
+
*
|
|
9177
|
+
* ACCESSIBILITÉ — la destination courante est marquée par une pastille pleine EN PLUS de la
|
|
9178
|
+
* couleur : la couleur seule disparaît pour une personne daltonienne. Les cibles font 44 px de
|
|
9179
|
+
* haut au minimum, et la barre réserve la zone sûre des téléphones à encoche
|
|
9180
|
+
* (`env(safe-area-inset-bottom)`), sans quoi la dernière rangée passe sous la barre d'accueil.
|
|
9181
|
+
*/
|
|
9182
|
+
class CadBottomNavComponent {
|
|
9183
|
+
bp = inject(CadBreakpointService);
|
|
9184
|
+
items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
|
|
9185
|
+
/** Destination courante. Bidirectionnel. */
|
|
9186
|
+
value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
9187
|
+
/** Quand afficher le libellé sous l'icône. */
|
|
9188
|
+
labels = input('always', ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
|
|
9189
|
+
/**
|
|
9190
|
+
* Au-delà, les destinations en trop ne sont PAS affichées : cinq est la limite tenable
|
|
9191
|
+
* en largeur, et tronquer silencieusement vaut mieux que rendre la barre illisible.
|
|
9192
|
+
* Prévoir une destination « Plus » qui ouvre le reste en feuille.
|
|
9193
|
+
*/
|
|
9194
|
+
maxItems = input(5, { ...(ngDevMode ? { debugName: "maxItems" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
9195
|
+
/** Seuil au-delà duquel la barre disparaît : elle n'a de sens que sur petit écran. */
|
|
9196
|
+
breakpoint = input('md', ...(ngDevMode ? [{ debugName: "breakpoint" }] : /* istanbul ignore next */ []));
|
|
9197
|
+
/** Force l'affichage quel que soit le seuil — utile en démonstration. */
|
|
9198
|
+
alwaysShow = input(false, { ...(ngDevMode ? { debugName: "alwaysShow" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
9199
|
+
ariaLabel = input('Navigation principale', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
9200
|
+
changed = output();
|
|
9201
|
+
itemClick = output();
|
|
9202
|
+
/** Les entrées au-delà de `maxItems` sont écartées, jamais compressées. */
|
|
9203
|
+
shown = computed(() => this.items().slice(0, Math.max(1, this.maxItems())), ...(ngDevMode ? [{ debugName: "shown" }] : /* istanbul ignore next */ []));
|
|
9204
|
+
visible = computed(() => this.alwaysShow() || this.bp.down(this.breakpoint()), ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
|
|
9205
|
+
isActive(it) {
|
|
9206
|
+
return this.value() === it.value;
|
|
9207
|
+
}
|
|
9208
|
+
showLabel(it) {
|
|
9209
|
+
const mode = this.labels();
|
|
9210
|
+
return mode === 'always' || (mode === 'selected' && this.isActive(it));
|
|
9211
|
+
}
|
|
9212
|
+
/** « 99+ » plutôt qu'un nombre qui ferait déborder la pastille. */
|
|
9213
|
+
cap(badge) {
|
|
9214
|
+
if (typeof badge === 'number')
|
|
9215
|
+
return badge > 99 ? '99+' : String(badge);
|
|
9216
|
+
return String(badge);
|
|
9217
|
+
}
|
|
9218
|
+
pick(it, ev) {
|
|
9219
|
+
if (it.disabled) {
|
|
9220
|
+
ev.preventDefault();
|
|
9221
|
+
return;
|
|
9222
|
+
}
|
|
9223
|
+
this.itemClick.emit({ item: it, originalEvent: ev });
|
|
9224
|
+
if (this.value() === it.value)
|
|
9225
|
+
return;
|
|
9226
|
+
this.value.set(it.value);
|
|
9227
|
+
this.changed.emit(it);
|
|
9228
|
+
}
|
|
9229
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: CadBottomNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9230
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: CadBottomNavComponent, isStandalone: true, selector: "cad-bottom-nav", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, maxItems: { classPropertyName: "maxItems", publicName: "maxItems", isSignal: true, isRequired: false, transformFunction: null }, breakpoint: { classPropertyName: "breakpoint", publicName: "breakpoint", isSignal: true, isRequired: false, transformFunction: null }, alwaysShow: { classPropertyName: "alwaysShow", publicName: "alwaysShow", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed", itemClick: "itemClick" }, host: { properties: { "class.is-hidden": "!visible()", "attr.role": "\"navigation\"", "attr.aria-label": "ariaLabel()" }, classAttribute: "cad-bottom-nav" }, ngImport: i0, template: `
|
|
9231
|
+
@if (visible()) {
|
|
9232
|
+
<ul class="cad-bottom-nav__list" role="list">
|
|
9233
|
+
@for (it of shown(); track it.value) {
|
|
9234
|
+
<li>
|
|
9235
|
+
@if (it.routerLink) {
|
|
9236
|
+
<a
|
|
9237
|
+
class="cad-bottom-nav__item"
|
|
9238
|
+
[class.is-active]="isActive(it)"
|
|
9239
|
+
[class.is-disabled]="it.disabled"
|
|
9240
|
+
[routerLink]="it.routerLink"
|
|
9241
|
+
[queryParams]="it.queryParams"
|
|
9242
|
+
routerLinkActive="is-route-active"
|
|
9243
|
+
[attr.aria-current]="isActive(it) ? 'page' : null"
|
|
9244
|
+
[attr.aria-disabled]="it.disabled || null"
|
|
9245
|
+
[attr.aria-label]="it.ariaLabel || null"
|
|
9246
|
+
(click)="pick(it, $event)"
|
|
9247
|
+
>
|
|
9248
|
+
<ng-container *ngTemplateOutlet="body; context: { $implicit: it }"/>
|
|
9249
|
+
</a>
|
|
9250
|
+
} @else if (it.url) {
|
|
9251
|
+
<a class="cad-bottom-nav__item" [class.is-active]="isActive(it)" [class.is-disabled]="it.disabled"
|
|
9252
|
+
[href]="it.url" [attr.aria-current]="isActive(it) ? 'page' : null" [attr.aria-label]="it.ariaLabel || null"
|
|
9253
|
+
(click)="pick(it, $event)">
|
|
9254
|
+
<ng-container *ngTemplateOutlet="body; context: { $implicit: it }"/>
|
|
9255
|
+
</a>
|
|
9256
|
+
} @else {
|
|
9257
|
+
<button
|
|
9258
|
+
type="button"
|
|
9259
|
+
class="cad-bottom-nav__item"
|
|
9260
|
+
[class.is-active]="isActive(it)"
|
|
9261
|
+
[disabled]="it.disabled"
|
|
9262
|
+
[attr.aria-current]="isActive(it) ? 'page' : null"
|
|
9263
|
+
[attr.aria-label]="it.ariaLabel || null"
|
|
9264
|
+
(click)="pick(it, $event)"
|
|
9265
|
+
>
|
|
9266
|
+
<ng-container *ngTemplateOutlet="body; context: { $implicit: it }"/>
|
|
9267
|
+
</button>
|
|
9268
|
+
}
|
|
9269
|
+
</li>
|
|
9270
|
+
}
|
|
9271
|
+
</ul>
|
|
9272
|
+
}
|
|
9273
|
+
|
|
9274
|
+
<ng-template #body let-it>
|
|
9275
|
+
<span class="cad-bottom-nav__icon">
|
|
9276
|
+
<!-- La pastille est un élément à part : c'est elle qui porte l'état actif, pas la couleur. -->
|
|
9277
|
+
<span class="cad-bottom-nav__pill" aria-hidden="true"></span>
|
|
9278
|
+
<cad-icon [name]="(isActive(it) && it.activeIcon) || it.icon" [size]="22"/>
|
|
9279
|
+
@if (it.badge !== undefined && it.badge !== false && it.badge !== null) {
|
|
9280
|
+
<span class="cad-bottom-nav__badge" [class.is-dot]="it.badge === true">
|
|
9281
|
+
@if (it.badge !== true) {{{ cap(it.badge) }}}
|
|
9282
|
+
</span>
|
|
9283
|
+
}
|
|
9284
|
+
</span>
|
|
9285
|
+
@if (showLabel(it)) {<span class="cad-bottom-nav__label">{{ it.label }}</span>}
|
|
9286
|
+
</ng-template>
|
|
9287
|
+
`, isInline: true, styles: [":host{display:block;position:sticky;bottom:0;z-index:20;background:var(--cad-overlay);border-top:1px solid var(--cad-border);padding-bottom:var(--cad-safe-bottom, env(safe-area-inset-bottom, 0px))}:host(.is-hidden){display:none}.cad-bottom-nav__list{display:flex;margin:0;padding:4px 4px 2px;list-style:none}.cad-bottom-nav__list>li{flex:1;min-width:0;display:flex}.cad-bottom-nav__item{all:unset;box-sizing:border-box;flex:1;min-width:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:44px;padding:5px 2px 6px;color:var(--cad-fg-muted);font:10px var(--cad-font);text-align:center;text-decoration:none;border-radius:var(--cad-radius);position:relative}.cad-bottom-nav__item:hover{color:var(--cad-fg-secondary)}.cad-bottom-nav__item:focus-visible{outline:2px solid var(--cad-accent);outline-offset:-2px}.cad-bottom-nav__item.is-active{color:var(--cad-accent)}.cad-bottom-nav__item.is-disabled,.cad-bottom-nav__item:disabled{opacity:.45;cursor:not-allowed}.cad-bottom-nav__icon{position:relative;display:grid;place-items:center;width:100%;height:26px}.cad-bottom-nav__pill{position:absolute;width:38px;height:26px;border-radius:var(--cad-radius-pill);background:transparent;transition:background var(--cad-dur) var(--cad-ease)}.cad-bottom-nav__item.is-active .cad-bottom-nav__pill{background:var(--cad-accent-soft)}.cad-bottom-nav__icon cad-icon{position:relative;z-index:1}.cad-bottom-nav__label{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3;position:relative;z-index:1}.cad-bottom-nav__item.is-active .cad-bottom-nav__label{font-weight:500}.cad-bottom-nav__badge{position:absolute;top:-2px;left:50%;margin-left:6px;z-index:2;min-width:15px;height:15px;padding:0 4px;border-radius:var(--cad-radius-pill);background:var(--cad-danger, #f85149);color:#fff;font-size:9px;font-weight:600;line-height:15px;text-align:center;border:2px solid var(--cad-overlay);box-sizing:content-box}.cad-bottom-nav__badge.is-dot{min-width:8px;height:8px;padding:0;margin-left:8px}:host-context(.cad-touch) .cad-bottom-nav__item{min-height:52px}@media(prefers-reduced-motion:reduce){.cad-bottom-nav__pill{transition:none}}\n"], dependencies: [{ kind: "component", type: CadIconComponent, selector: "cad-icon", inputs: ["name", "size", "strokeWidth", "label", "title", "spin", "filled", "flip", "rotate"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9288
|
+
}
|
|
9289
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: CadBottomNavComponent, decorators: [{
|
|
9290
|
+
type: Component,
|
|
9291
|
+
args: [{ selector: 'cad-bottom-nav', standalone: true, imports: [CadIconComponent, RouterLink, RouterLinkActive, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
9292
|
+
class: 'cad-bottom-nav',
|
|
9293
|
+
'[class.is-hidden]': '!visible()',
|
|
9294
|
+
'[attr.role]': '"navigation"',
|
|
9295
|
+
'[attr.aria-label]': 'ariaLabel()',
|
|
9296
|
+
}, template: `
|
|
9297
|
+
@if (visible()) {
|
|
9298
|
+
<ul class="cad-bottom-nav__list" role="list">
|
|
9299
|
+
@for (it of shown(); track it.value) {
|
|
9300
|
+
<li>
|
|
9301
|
+
@if (it.routerLink) {
|
|
9302
|
+
<a
|
|
9303
|
+
class="cad-bottom-nav__item"
|
|
9304
|
+
[class.is-active]="isActive(it)"
|
|
9305
|
+
[class.is-disabled]="it.disabled"
|
|
9306
|
+
[routerLink]="it.routerLink"
|
|
9307
|
+
[queryParams]="it.queryParams"
|
|
9308
|
+
routerLinkActive="is-route-active"
|
|
9309
|
+
[attr.aria-current]="isActive(it) ? 'page' : null"
|
|
9310
|
+
[attr.aria-disabled]="it.disabled || null"
|
|
9311
|
+
[attr.aria-label]="it.ariaLabel || null"
|
|
9312
|
+
(click)="pick(it, $event)"
|
|
9313
|
+
>
|
|
9314
|
+
<ng-container *ngTemplateOutlet="body; context: { $implicit: it }"/>
|
|
9315
|
+
</a>
|
|
9316
|
+
} @else if (it.url) {
|
|
9317
|
+
<a class="cad-bottom-nav__item" [class.is-active]="isActive(it)" [class.is-disabled]="it.disabled"
|
|
9318
|
+
[href]="it.url" [attr.aria-current]="isActive(it) ? 'page' : null" [attr.aria-label]="it.ariaLabel || null"
|
|
9319
|
+
(click)="pick(it, $event)">
|
|
9320
|
+
<ng-container *ngTemplateOutlet="body; context: { $implicit: it }"/>
|
|
9321
|
+
</a>
|
|
9322
|
+
} @else {
|
|
9323
|
+
<button
|
|
9324
|
+
type="button"
|
|
9325
|
+
class="cad-bottom-nav__item"
|
|
9326
|
+
[class.is-active]="isActive(it)"
|
|
9327
|
+
[disabled]="it.disabled"
|
|
9328
|
+
[attr.aria-current]="isActive(it) ? 'page' : null"
|
|
9329
|
+
[attr.aria-label]="it.ariaLabel || null"
|
|
9330
|
+
(click)="pick(it, $event)"
|
|
9331
|
+
>
|
|
9332
|
+
<ng-container *ngTemplateOutlet="body; context: { $implicit: it }"/>
|
|
9333
|
+
</button>
|
|
9334
|
+
}
|
|
9335
|
+
</li>
|
|
9336
|
+
}
|
|
9337
|
+
</ul>
|
|
9338
|
+
}
|
|
9339
|
+
|
|
9340
|
+
<ng-template #body let-it>
|
|
9341
|
+
<span class="cad-bottom-nav__icon">
|
|
9342
|
+
<!-- La pastille est un élément à part : c'est elle qui porte l'état actif, pas la couleur. -->
|
|
9343
|
+
<span class="cad-bottom-nav__pill" aria-hidden="true"></span>
|
|
9344
|
+
<cad-icon [name]="(isActive(it) && it.activeIcon) || it.icon" [size]="22"/>
|
|
9345
|
+
@if (it.badge !== undefined && it.badge !== false && it.badge !== null) {
|
|
9346
|
+
<span class="cad-bottom-nav__badge" [class.is-dot]="it.badge === true">
|
|
9347
|
+
@if (it.badge !== true) {{{ cap(it.badge) }}}
|
|
9348
|
+
</span>
|
|
9349
|
+
}
|
|
9350
|
+
</span>
|
|
9351
|
+
@if (showLabel(it)) {<span class="cad-bottom-nav__label">{{ it.label }}</span>}
|
|
9352
|
+
</ng-template>
|
|
9353
|
+
`, styles: [":host{display:block;position:sticky;bottom:0;z-index:20;background:var(--cad-overlay);border-top:1px solid var(--cad-border);padding-bottom:var(--cad-safe-bottom, env(safe-area-inset-bottom, 0px))}:host(.is-hidden){display:none}.cad-bottom-nav__list{display:flex;margin:0;padding:4px 4px 2px;list-style:none}.cad-bottom-nav__list>li{flex:1;min-width:0;display:flex}.cad-bottom-nav__item{all:unset;box-sizing:border-box;flex:1;min-width:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:44px;padding:5px 2px 6px;color:var(--cad-fg-muted);font:10px var(--cad-font);text-align:center;text-decoration:none;border-radius:var(--cad-radius);position:relative}.cad-bottom-nav__item:hover{color:var(--cad-fg-secondary)}.cad-bottom-nav__item:focus-visible{outline:2px solid var(--cad-accent);outline-offset:-2px}.cad-bottom-nav__item.is-active{color:var(--cad-accent)}.cad-bottom-nav__item.is-disabled,.cad-bottom-nav__item:disabled{opacity:.45;cursor:not-allowed}.cad-bottom-nav__icon{position:relative;display:grid;place-items:center;width:100%;height:26px}.cad-bottom-nav__pill{position:absolute;width:38px;height:26px;border-radius:var(--cad-radius-pill);background:transparent;transition:background var(--cad-dur) var(--cad-ease)}.cad-bottom-nav__item.is-active .cad-bottom-nav__pill{background:var(--cad-accent-soft)}.cad-bottom-nav__icon cad-icon{position:relative;z-index:1}.cad-bottom-nav__label{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3;position:relative;z-index:1}.cad-bottom-nav__item.is-active .cad-bottom-nav__label{font-weight:500}.cad-bottom-nav__badge{position:absolute;top:-2px;left:50%;margin-left:6px;z-index:2;min-width:15px;height:15px;padding:0 4px;border-radius:var(--cad-radius-pill);background:var(--cad-danger, #f85149);color:#fff;font-size:9px;font-weight:600;line-height:15px;text-align:center;border:2px solid var(--cad-overlay);box-sizing:content-box}.cad-bottom-nav__badge.is-dot{min-width:8px;height:8px;padding:0;margin-left:8px}:host-context(.cad-touch) .cad-bottom-nav__item{min-height:52px}@media(prefers-reduced-motion:reduce){.cad-bottom-nav__pill{transition:none}}\n"] }]
|
|
9354
|
+
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], maxItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxItems", required: false }] }], breakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "breakpoint", required: false }] }], alwaysShow: [{ type: i0.Input, args: [{ isSignal: true, alias: "alwaysShow", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
|
|
9355
|
+
|
|
9356
|
+
/**
|
|
9357
|
+
* En-tête et pied sont des SLOTS, pas des gabarits : `<div cadNavDrawerFooter>` sur n'importe
|
|
9358
|
+
* quel élément, sans `<ng-template>` à écrire. Ces directives sont de simples marqueurs — elles
|
|
9359
|
+
* n'injectent surtout pas `TemplateRef`, qui n'existe que sur un `<ng-template>` et ferait
|
|
9360
|
+
* échouer l'injection sur un `<div>` (NG0201).
|
|
9361
|
+
*/
|
|
9362
|
+
class CadNavDrawerHeaderDirective {
|
|
9363
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: CadNavDrawerHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
9364
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.20", type: CadNavDrawerHeaderDirective, isStandalone: true, selector: "[cadNavDrawerHeader]", ngImport: i0 });
|
|
9365
|
+
}
|
|
9366
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: CadNavDrawerHeaderDirective, decorators: [{
|
|
9367
|
+
type: Directive,
|
|
9368
|
+
args: [{ selector: '[cadNavDrawerHeader]', standalone: true }]
|
|
9369
|
+
}] });
|
|
9370
|
+
class CadNavDrawerFooterDirective {
|
|
9371
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: CadNavDrawerFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
9372
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.20", type: CadNavDrawerFooterDirective, isStandalone: true, selector: "[cadNavDrawerFooter]", ngImport: i0 });
|
|
9373
|
+
}
|
|
9374
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: CadNavDrawerFooterDirective, decorators: [{
|
|
9375
|
+
type: Directive,
|
|
9376
|
+
args: [{ selector: '[cadNavDrawerFooter]', standalone: true }]
|
|
9377
|
+
}] });
|
|
9378
|
+
/**
|
|
9379
|
+
* <cad-nav-drawer [items]="items" [(open)]="open" [(value)]="page" mode="auto" (itemClick)/>
|
|
9380
|
+
*
|
|
9381
|
+
* Menu principal de l'application : UN composant pour les trois états, pas deux à tenir en
|
|
9382
|
+
* parallèle. En `auto` (défaut) il est permanent en colonne au-dessus du seuil, et bascule
|
|
9383
|
+
* en tiroir par-dessus le contenu en dessous, ouvert au hamburger. `rail` n'affiche que les
|
|
9384
|
+
* icônes, le libellé passant en `title`.
|
|
9385
|
+
*
|
|
9386
|
+
* POURQUOI PAS `cad-drawer` — celui-ci est un panneau générique : il ne connaît ni items, ni
|
|
9387
|
+
* route active, ni sections, et surtout il est toujours temporaire. Le mode permanent n'est
|
|
9388
|
+
* pas une surcouche cosmétique : le tiroir occupe alors une colonne dans le flux et pousse le
|
|
9389
|
+
* contenu, au lieu de le recouvrir.
|
|
9390
|
+
*
|
|
9391
|
+
* LA LISTE EST DISTINCTE DE CELLE DE `cad-bottom-nav`, volontairement — voir la note qui s'y
|
|
9392
|
+
* trouve : on ne met pas en avant les mêmes destinations au pouce que dans un menu complet.
|
|
9393
|
+
*/
|
|
9394
|
+
class CadNavDrawerComponent {
|
|
9395
|
+
bp = inject(CadBreakpointService);
|
|
9396
|
+
items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
|
|
9397
|
+
/** Ouverture du tiroir. Sans effet en mode permanent, où le panneau est toujours là. */
|
|
9398
|
+
open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
|
|
9399
|
+
/** Entrée courante, comparée à `item.value`. */
|
|
9400
|
+
value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
9401
|
+
mode = input('auto', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
|
|
9402
|
+
/** Seuil de bascule permanent → tiroir, en mode `auto`. */
|
|
9403
|
+
breakpoint = input('md', ...(ngDevMode ? [{ debugName: "breakpoint" }] : /* istanbul ignore next */ []));
|
|
9404
|
+
position = input('left', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
|
|
9405
|
+
title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
9406
|
+
icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
9407
|
+
ariaLabel = input('Menu principal', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
9408
|
+
/** Referme le tiroir après un clic sur une entrée. Sans objet en permanent. */
|
|
9409
|
+
closeOnNavigate = input(true, { ...(ngDevMode ? { debugName: "closeOnNavigate" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
9410
|
+
closeOnEscape = input(true, { ...(ngDevMode ? { debugName: "closeOnEscape" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
9411
|
+
/** Clic sur le voile. */
|
|
9412
|
+
dismissableScrim = input(true, { ...(ngDevMode ? { debugName: "dismissableScrim" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
9413
|
+
opened = output();
|
|
9414
|
+
closed = output();
|
|
9415
|
+
itemClick = output();
|
|
9416
|
+
changed = output();
|
|
9417
|
+
/** Présence des slots : sert à décider du repli sur l'en-tête par défaut et du cadre du pied. */
|
|
9418
|
+
headerSlot = contentChild(CadNavDrawerHeaderDirective, ...(ngDevMode ? [{ debugName: "headerSlot" }] : /* istanbul ignore next */ []));
|
|
9419
|
+
footerSlot = contentChild(CadNavDrawerFooterDirective, ...(ngDevMode ? [{ debugName: "footerSlot" }] : /* istanbul ignore next */ []));
|
|
9420
|
+
/** Mode effectif : `auto` se résout au seuil, les autres sont imposés. */
|
|
9421
|
+
effective = computed(() => {
|
|
9422
|
+
const m = this.mode();
|
|
9423
|
+
if (m !== 'auto')
|
|
9424
|
+
return m;
|
|
9425
|
+
return this.bp.down(this.breakpoint()) ? 'temporary' : 'permanent';
|
|
9426
|
+
}, ...(ngDevMode ? [{ debugName: "effective" }] : /* istanbul ignore next */ []));
|
|
9427
|
+
temporary = computed(() => this.effective() === 'temporary', ...(ngDevMode ? [{ debugName: "temporary" }] : /* istanbul ignore next */ []));
|
|
9428
|
+
rail = computed(() => this.effective() === 'rail', ...(ngDevMode ? [{ debugName: "rail" }] : /* istanbul ignore next */ []));
|
|
9429
|
+
wasOpen = signal(false, ...(ngDevMode ? [{ debugName: "wasOpen" }] : /* istanbul ignore next */ []));
|
|
9430
|
+
constructor() {
|
|
9431
|
+
effect(() => {
|
|
9432
|
+
const o = this.open() && this.temporary();
|
|
9433
|
+
if (o === this.wasOpen())
|
|
9434
|
+
return;
|
|
9435
|
+
this.wasOpen.set(o);
|
|
9436
|
+
(o ? this.opened : this.closed).emit();
|
|
9437
|
+
});
|
|
9438
|
+
// Repasser en permanent laisse un tiroir « ouvert » qui n'a plus de sens : on le solde,
|
|
9439
|
+
// sinon le retour en mode tiroir le rouvrirait tout seul.
|
|
9440
|
+
effect(() => {
|
|
9441
|
+
if (!this.temporary() && this.open())
|
|
9442
|
+
this.open.set(false);
|
|
9443
|
+
});
|
|
9444
|
+
}
|
|
9445
|
+
isActive(it) {
|
|
9446
|
+
return it.value !== undefined && this.value() === it.value;
|
|
9447
|
+
}
|
|
9448
|
+
toggle() { this.open.set(!this.open()); }
|
|
9449
|
+
show() { this.open.set(true); }
|
|
9450
|
+
hide() { this.open.set(false); }
|
|
9451
|
+
dismiss() {
|
|
9452
|
+
if (this.dismissableScrim())
|
|
9453
|
+
this.open.set(false);
|
|
9454
|
+
}
|
|
9455
|
+
onEscape() {
|
|
9456
|
+
if (this.closeOnEscape() && this.temporary() && this.open())
|
|
9457
|
+
this.open.set(false);
|
|
9458
|
+
}
|
|
9459
|
+
pick(it, ev) {
|
|
9460
|
+
if (it.disabled) {
|
|
9461
|
+
ev.preventDefault();
|
|
9462
|
+
return;
|
|
9463
|
+
}
|
|
9464
|
+
this.itemClick.emit({ item: it, originalEvent: ev });
|
|
9465
|
+
it.command?.({ item: it, originalEvent: ev });
|
|
9466
|
+
if (it.value !== undefined && this.value() !== it.value) {
|
|
9467
|
+
this.value.set(it.value);
|
|
9468
|
+
this.changed.emit(it);
|
|
9469
|
+
}
|
|
9470
|
+
if (this.temporary() && this.closeOnNavigate())
|
|
9471
|
+
this.open.set(false);
|
|
9472
|
+
}
|
|
9473
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: CadNavDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9474
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: CadNavDrawerComponent, isStandalone: true, selector: "cad-nav-drawer", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, breakpoint: { classPropertyName: "breakpoint", publicName: "breakpoint", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, closeOnNavigate: { classPropertyName: "closeOnNavigate", publicName: "closeOnNavigate", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, dismissableScrim: { classPropertyName: "dismissableScrim", publicName: "dismissableScrim", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", value: "valueChange", opened: "opened", closed: "closed", itemClick: "itemClick", changed: "changed" }, host: { listeners: { "document:keydown.escape": "onEscape()" }, properties: { "class.is-temporary": "temporary()", "class.is-permanent": "!temporary()", "class.is-rail": "rail()", "class.is-open": "open()", "class.is-right": "position() === \"right\"" }, classAttribute: "cad-nav-drawer" }, queries: [{ propertyName: "headerSlot", first: true, predicate: CadNavDrawerHeaderDirective, descendants: true, isSignal: true }, { propertyName: "footerSlot", first: true, predicate: CadNavDrawerFooterDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
9475
|
+
<!-- Le voile n'existe qu'en mode tiroir : en permanent il n'y a rien à recouvrir. -->
|
|
9476
|
+
@if (temporary() && open()) {
|
|
9477
|
+
<div class="cad-nav-drawer__scrim" (click)="dismiss()" aria-hidden="true"></div>
|
|
9478
|
+
}
|
|
9479
|
+
|
|
9480
|
+
<nav
|
|
9481
|
+
class="cad-nav-drawer__panel"
|
|
9482
|
+
[attr.aria-label]="ariaLabel()"
|
|
9483
|
+
[attr.aria-hidden]="temporary() && !open() ? 'true' : null"
|
|
9484
|
+
[attr.inert]="temporary() && !open() ? '' : null"
|
|
9485
|
+
>
|
|
9486
|
+
<div class="cad-nav-drawer__head">
|
|
9487
|
+
<ng-content select="[cadNavDrawerHeader]"/>
|
|
9488
|
+
@if (!headerSlot()) {
|
|
9489
|
+
@if (icon()) {<cad-icon [name]="icon()" [size]="18"/>}
|
|
9490
|
+
@if (!rail()) {<b>{{ title() }}</b>}
|
|
9491
|
+
}
|
|
9492
|
+
</div>
|
|
9493
|
+
|
|
9494
|
+
<ul class="cad-nav-drawer__list" role="list">
|
|
9495
|
+
@for (it of items(); track $index) {
|
|
9496
|
+
@if (it.section) {
|
|
9497
|
+
<!-- En rail, un intertitre n'a plus de place : un filet le remplace. -->
|
|
9498
|
+
@if (rail()) {
|
|
9499
|
+
<li class="cad-nav-drawer__rule" role="separator"></li>
|
|
9500
|
+
} @else {
|
|
9501
|
+
<li class="cad-nav-drawer__section">{{ it.label }}</li>
|
|
9502
|
+
}
|
|
9503
|
+
} @else {
|
|
9504
|
+
<li>
|
|
9505
|
+
@if (it.routerLink) {
|
|
9506
|
+
<a class="cad-nav-drawer__item" [class.is-active]="isActive(it)" [class.is-disabled]="it.disabled"
|
|
9507
|
+
[routerLink]="it.routerLink" [queryParams]="it.queryParams"
|
|
9508
|
+
[attr.aria-current]="isActive(it) ? 'page' : null" [attr.aria-disabled]="it.disabled || null"
|
|
9509
|
+
[attr.title]="rail() ? it.label : null" [attr.aria-label]="it.ariaLabel || (rail() ? it.label : null)"
|
|
9510
|
+
(click)="pick(it, $event)">
|
|
9511
|
+
<ng-container *ngTemplateOutlet="row; context: { $implicit: it }"/>
|
|
9512
|
+
</a>
|
|
9513
|
+
} @else if (it.url) {
|
|
9514
|
+
<a class="cad-nav-drawer__item" [class.is-active]="isActive(it)" [class.is-disabled]="it.disabled"
|
|
9515
|
+
[href]="it.url" [attr.target]="it.target || null"
|
|
9516
|
+
[attr.title]="rail() ? it.label : null" [attr.aria-label]="it.ariaLabel || (rail() ? it.label : null)"
|
|
9517
|
+
(click)="pick(it, $event)">
|
|
9518
|
+
<ng-container *ngTemplateOutlet="row; context: { $implicit: it }"/>
|
|
9519
|
+
</a>
|
|
9520
|
+
} @else {
|
|
9521
|
+
<button type="button" class="cad-nav-drawer__item" [class.is-active]="isActive(it)"
|
|
9522
|
+
[disabled]="it.disabled" [attr.title]="rail() ? it.label : null"
|
|
9523
|
+
[attr.aria-label]="it.ariaLabel || (rail() ? it.label : null)"
|
|
9524
|
+
[attr.aria-current]="isActive(it) ? 'page' : null" (click)="pick(it, $event)">
|
|
9525
|
+
<ng-container *ngTemplateOutlet="row; context: { $implicit: it }"/>
|
|
9526
|
+
</button>
|
|
9527
|
+
}
|
|
9528
|
+
</li>
|
|
9529
|
+
}
|
|
9530
|
+
}
|
|
9531
|
+
</ul>
|
|
9532
|
+
|
|
9533
|
+
<!-- Toujours rendu : la projection a lieu quoi qu'il arrive. Le cadre ne s'affiche
|
|
9534
|
+
que si un pied a bien été fourni, sinon on verrait un filet et un vide. -->
|
|
9535
|
+
<div class="cad-nav-drawer__foot" [class.is-empty]="!footerSlot()">
|
|
9536
|
+
<ng-content select="[cadNavDrawerFooter]"/>
|
|
9537
|
+
</div>
|
|
9538
|
+
</nav>
|
|
9539
|
+
|
|
9540
|
+
<ng-template #row let-it>
|
|
9541
|
+
@if (it.icon) {<cad-icon [name]="it.icon" [size]="17"/>}
|
|
9542
|
+
@if (!rail()) {
|
|
9543
|
+
<span class="cad-nav-drawer__label">{{ it.label }}</span>
|
|
9544
|
+
@if (it.badge !== undefined && it.badge !== null) {<span class="cad-nav-drawer__badge">{{ it.badge }}</span>}
|
|
9545
|
+
} @else if (it.badge !== undefined && it.badge !== null) {
|
|
9546
|
+
<!-- En rail le compte ne tient pas : il devient un point, le nombre reste en title. -->
|
|
9547
|
+
<span class="cad-nav-drawer__dot" [attr.title]="it.badge"></span>
|
|
9548
|
+
}
|
|
9549
|
+
</ng-template>
|
|
9550
|
+
`, isInline: true, styles: [":host{display:block}:host(.is-permanent){flex:none}.cad-nav-drawer__panel{display:flex;flex-direction:column;min-height:0;height:100%;width:var(--cad-nav-drawer-w, 240px);background:var(--cad-bg-subtle);border-right:1px solid var(--cad-border);transition:width var(--cad-dur) var(--cad-ease)}:host(.is-rail) .cad-nav-drawer__panel{width:var(--cad-nav-drawer-rail-w, 56px)}:host(.is-right) .cad-nav-drawer__panel{border-right:0;border-left:1px solid var(--cad-border)}:host(.is-temporary){position:fixed;inset:0 auto 0 0;z-index:var(--cad-z-overlay, 100002);pointer-events:none}:host(.is-temporary.is-right){inset:0 0 0 auto}:host(.is-temporary) .cad-nav-drawer__panel{pointer-events:auto;height:100%;box-shadow:var(--cad-shadow-lg, 0 12px 24px rgba(15,23,42,.18));transform:translate(-100%);transition:transform var(--cad-dur) var(--cad-ease)}:host(.is-temporary.is-right) .cad-nav-drawer__panel{transform:translate(100%)}:host(.is-temporary.is-open) .cad-nav-drawer__panel{transform:translate(0)}.cad-nav-drawer__scrim{position:fixed;inset:0;background:var(--cad-backdrop, rgba(2,6,23,.45));pointer-events:auto;z-index:-1}.cad-nav-drawer__head{display:flex;align-items:center;gap:9px;flex:none;padding:14px 14px 12px;border-bottom:1px solid var(--cad-border);min-height:48px;color:var(--cad-fg);font-size:13px}:host(.is-rail) .cad-nav-drawer__head{justify-content:center;padding:14px 0 12px}.cad-nav-drawer__head cad-icon{color:var(--cad-accent);flex:none}.cad-nav-drawer__list{list-style:none;margin:0;padding:8px 0;flex:1;min-height:0;overflow-y:auto}.cad-nav-drawer__section{padding:12px 14px 5px;font-size:10px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--cad-fg-muted)}.cad-nav-drawer__rule{height:1px;margin:8px 12px;background:var(--cad-border)}.cad-nav-drawer__item{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;width:100%;cursor:pointer;padding:8px 14px;min-height:38px;color:var(--cad-fg-secondary);font:12.5px var(--cad-font);text-decoration:none}:host(.is-rail) .cad-nav-drawer__item{justify-content:center;padding:10px 0}.cad-nav-drawer__item:hover{background:var(--cad-hover);color:var(--cad-fg)}.cad-nav-drawer__item:focus-visible{outline:2px solid var(--cad-accent);outline-offset:-2px}.cad-nav-drawer__item.is-active{background:var(--cad-accent-soft);color:var(--cad-accent);font-weight:500;box-shadow:inset 3px 0 0 var(--cad-accent)}:host(.is-right) .cad-nav-drawer__item.is-active{box-shadow:inset -3px 0 0 var(--cad-accent)}.cad-nav-drawer__item.is-disabled,.cad-nav-drawer__item:disabled{opacity:.45;cursor:not-allowed}.cad-nav-drawer__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cad-nav-drawer__badge{flex:none;font-size:10.5px;font-family:var(--cad-font-mono);border-radius:var(--cad-radius-pill);padding:1px 7px;background:var(--cad-elevated, var(--cad-border));color:var(--cad-fg-secondary)}.cad-nav-drawer__item.is-active .cad-nav-drawer__badge{background:var(--cad-accent);color:var(--cad-fg-on-accent)}.cad-nav-drawer__dot{position:absolute;margin:-14px 0 0 14px;width:7px;height:7px;border-radius:50%;background:var(--cad-danger, #f85149)}.cad-nav-drawer__foot{flex:none;border-top:1px solid var(--cad-border);padding:10px 14px}.cad-nav-drawer__foot.is-empty{display:none}:host(.is-rail) .cad-nav-drawer__foot{padding:10px 0;display:flex;justify-content:center}:host-context(.cad-touch) .cad-nav-drawer__item{min-height:44px}@media(prefers-reduced-motion:reduce){.cad-nav-drawer__panel{transition:none}}\n"], dependencies: [{ kind: "component", type: CadIconComponent, selector: "cad-icon", inputs: ["name", "size", "strokeWidth", "label", "title", "spin", "filled", "flip", "rotate"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9551
|
+
}
|
|
9552
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: CadNavDrawerComponent, decorators: [{
|
|
9553
|
+
type: Component,
|
|
9554
|
+
args: [{ selector: 'cad-nav-drawer', standalone: true, imports: [CadIconComponent, RouterLink, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
9555
|
+
class: 'cad-nav-drawer',
|
|
9556
|
+
'[class.is-temporary]': 'temporary()',
|
|
9557
|
+
'[class.is-permanent]': '!temporary()',
|
|
9558
|
+
'[class.is-rail]': 'rail()',
|
|
9559
|
+
'[class.is-open]': 'open()',
|
|
9560
|
+
'[class.is-right]': 'position() === "right"',
|
|
9561
|
+
}, template: `
|
|
9562
|
+
<!-- Le voile n'existe qu'en mode tiroir : en permanent il n'y a rien à recouvrir. -->
|
|
9563
|
+
@if (temporary() && open()) {
|
|
9564
|
+
<div class="cad-nav-drawer__scrim" (click)="dismiss()" aria-hidden="true"></div>
|
|
9565
|
+
}
|
|
9566
|
+
|
|
9567
|
+
<nav
|
|
9568
|
+
class="cad-nav-drawer__panel"
|
|
9569
|
+
[attr.aria-label]="ariaLabel()"
|
|
9570
|
+
[attr.aria-hidden]="temporary() && !open() ? 'true' : null"
|
|
9571
|
+
[attr.inert]="temporary() && !open() ? '' : null"
|
|
9572
|
+
>
|
|
9573
|
+
<div class="cad-nav-drawer__head">
|
|
9574
|
+
<ng-content select="[cadNavDrawerHeader]"/>
|
|
9575
|
+
@if (!headerSlot()) {
|
|
9576
|
+
@if (icon()) {<cad-icon [name]="icon()" [size]="18"/>}
|
|
9577
|
+
@if (!rail()) {<b>{{ title() }}</b>}
|
|
9578
|
+
}
|
|
9579
|
+
</div>
|
|
9580
|
+
|
|
9581
|
+
<ul class="cad-nav-drawer__list" role="list">
|
|
9582
|
+
@for (it of items(); track $index) {
|
|
9583
|
+
@if (it.section) {
|
|
9584
|
+
<!-- En rail, un intertitre n'a plus de place : un filet le remplace. -->
|
|
9585
|
+
@if (rail()) {
|
|
9586
|
+
<li class="cad-nav-drawer__rule" role="separator"></li>
|
|
9587
|
+
} @else {
|
|
9588
|
+
<li class="cad-nav-drawer__section">{{ it.label }}</li>
|
|
9589
|
+
}
|
|
9590
|
+
} @else {
|
|
9591
|
+
<li>
|
|
9592
|
+
@if (it.routerLink) {
|
|
9593
|
+
<a class="cad-nav-drawer__item" [class.is-active]="isActive(it)" [class.is-disabled]="it.disabled"
|
|
9594
|
+
[routerLink]="it.routerLink" [queryParams]="it.queryParams"
|
|
9595
|
+
[attr.aria-current]="isActive(it) ? 'page' : null" [attr.aria-disabled]="it.disabled || null"
|
|
9596
|
+
[attr.title]="rail() ? it.label : null" [attr.aria-label]="it.ariaLabel || (rail() ? it.label : null)"
|
|
9597
|
+
(click)="pick(it, $event)">
|
|
9598
|
+
<ng-container *ngTemplateOutlet="row; context: { $implicit: it }"/>
|
|
9599
|
+
</a>
|
|
9600
|
+
} @else if (it.url) {
|
|
9601
|
+
<a class="cad-nav-drawer__item" [class.is-active]="isActive(it)" [class.is-disabled]="it.disabled"
|
|
9602
|
+
[href]="it.url" [attr.target]="it.target || null"
|
|
9603
|
+
[attr.title]="rail() ? it.label : null" [attr.aria-label]="it.ariaLabel || (rail() ? it.label : null)"
|
|
9604
|
+
(click)="pick(it, $event)">
|
|
9605
|
+
<ng-container *ngTemplateOutlet="row; context: { $implicit: it }"/>
|
|
9606
|
+
</a>
|
|
9607
|
+
} @else {
|
|
9608
|
+
<button type="button" class="cad-nav-drawer__item" [class.is-active]="isActive(it)"
|
|
9609
|
+
[disabled]="it.disabled" [attr.title]="rail() ? it.label : null"
|
|
9610
|
+
[attr.aria-label]="it.ariaLabel || (rail() ? it.label : null)"
|
|
9611
|
+
[attr.aria-current]="isActive(it) ? 'page' : null" (click)="pick(it, $event)">
|
|
9612
|
+
<ng-container *ngTemplateOutlet="row; context: { $implicit: it }"/>
|
|
9613
|
+
</button>
|
|
9614
|
+
}
|
|
9615
|
+
</li>
|
|
9616
|
+
}
|
|
9617
|
+
}
|
|
9618
|
+
</ul>
|
|
9619
|
+
|
|
9620
|
+
<!-- Toujours rendu : la projection a lieu quoi qu'il arrive. Le cadre ne s'affiche
|
|
9621
|
+
que si un pied a bien été fourni, sinon on verrait un filet et un vide. -->
|
|
9622
|
+
<div class="cad-nav-drawer__foot" [class.is-empty]="!footerSlot()">
|
|
9623
|
+
<ng-content select="[cadNavDrawerFooter]"/>
|
|
9624
|
+
</div>
|
|
9625
|
+
</nav>
|
|
9626
|
+
|
|
9627
|
+
<ng-template #row let-it>
|
|
9628
|
+
@if (it.icon) {<cad-icon [name]="it.icon" [size]="17"/>}
|
|
9629
|
+
@if (!rail()) {
|
|
9630
|
+
<span class="cad-nav-drawer__label">{{ it.label }}</span>
|
|
9631
|
+
@if (it.badge !== undefined && it.badge !== null) {<span class="cad-nav-drawer__badge">{{ it.badge }}</span>}
|
|
9632
|
+
} @else if (it.badge !== undefined && it.badge !== null) {
|
|
9633
|
+
<!-- En rail le compte ne tient pas : il devient un point, le nombre reste en title. -->
|
|
9634
|
+
<span class="cad-nav-drawer__dot" [attr.title]="it.badge"></span>
|
|
9635
|
+
}
|
|
9636
|
+
</ng-template>
|
|
9637
|
+
`, styles: [":host{display:block}:host(.is-permanent){flex:none}.cad-nav-drawer__panel{display:flex;flex-direction:column;min-height:0;height:100%;width:var(--cad-nav-drawer-w, 240px);background:var(--cad-bg-subtle);border-right:1px solid var(--cad-border);transition:width var(--cad-dur) var(--cad-ease)}:host(.is-rail) .cad-nav-drawer__panel{width:var(--cad-nav-drawer-rail-w, 56px)}:host(.is-right) .cad-nav-drawer__panel{border-right:0;border-left:1px solid var(--cad-border)}:host(.is-temporary){position:fixed;inset:0 auto 0 0;z-index:var(--cad-z-overlay, 100002);pointer-events:none}:host(.is-temporary.is-right){inset:0 0 0 auto}:host(.is-temporary) .cad-nav-drawer__panel{pointer-events:auto;height:100%;box-shadow:var(--cad-shadow-lg, 0 12px 24px rgba(15,23,42,.18));transform:translate(-100%);transition:transform var(--cad-dur) var(--cad-ease)}:host(.is-temporary.is-right) .cad-nav-drawer__panel{transform:translate(100%)}:host(.is-temporary.is-open) .cad-nav-drawer__panel{transform:translate(0)}.cad-nav-drawer__scrim{position:fixed;inset:0;background:var(--cad-backdrop, rgba(2,6,23,.45));pointer-events:auto;z-index:-1}.cad-nav-drawer__head{display:flex;align-items:center;gap:9px;flex:none;padding:14px 14px 12px;border-bottom:1px solid var(--cad-border);min-height:48px;color:var(--cad-fg);font-size:13px}:host(.is-rail) .cad-nav-drawer__head{justify-content:center;padding:14px 0 12px}.cad-nav-drawer__head cad-icon{color:var(--cad-accent);flex:none}.cad-nav-drawer__list{list-style:none;margin:0;padding:8px 0;flex:1;min-height:0;overflow-y:auto}.cad-nav-drawer__section{padding:12px 14px 5px;font-size:10px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--cad-fg-muted)}.cad-nav-drawer__rule{height:1px;margin:8px 12px;background:var(--cad-border)}.cad-nav-drawer__item{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;width:100%;cursor:pointer;padding:8px 14px;min-height:38px;color:var(--cad-fg-secondary);font:12.5px var(--cad-font);text-decoration:none}:host(.is-rail) .cad-nav-drawer__item{justify-content:center;padding:10px 0}.cad-nav-drawer__item:hover{background:var(--cad-hover);color:var(--cad-fg)}.cad-nav-drawer__item:focus-visible{outline:2px solid var(--cad-accent);outline-offset:-2px}.cad-nav-drawer__item.is-active{background:var(--cad-accent-soft);color:var(--cad-accent);font-weight:500;box-shadow:inset 3px 0 0 var(--cad-accent)}:host(.is-right) .cad-nav-drawer__item.is-active{box-shadow:inset -3px 0 0 var(--cad-accent)}.cad-nav-drawer__item.is-disabled,.cad-nav-drawer__item:disabled{opacity:.45;cursor:not-allowed}.cad-nav-drawer__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cad-nav-drawer__badge{flex:none;font-size:10.5px;font-family:var(--cad-font-mono);border-radius:var(--cad-radius-pill);padding:1px 7px;background:var(--cad-elevated, var(--cad-border));color:var(--cad-fg-secondary)}.cad-nav-drawer__item.is-active .cad-nav-drawer__badge{background:var(--cad-accent);color:var(--cad-fg-on-accent)}.cad-nav-drawer__dot{position:absolute;margin:-14px 0 0 14px;width:7px;height:7px;border-radius:50%;background:var(--cad-danger, #f85149)}.cad-nav-drawer__foot{flex:none;border-top:1px solid var(--cad-border);padding:10px 14px}.cad-nav-drawer__foot.is-empty{display:none}:host(.is-rail) .cad-nav-drawer__foot{padding:10px 0;display:flex;justify-content:center}:host-context(.cad-touch) .cad-nav-drawer__item{min-height:44px}@media(prefers-reduced-motion:reduce){.cad-nav-drawer__panel{transition:none}}\n"] }]
|
|
9638
|
+
}], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], breakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "breakpoint", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], closeOnNavigate: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnNavigate", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], dismissableScrim: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissableScrim", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], changed: [{ type: i0.Output, args: ["changed"] }], headerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CadNavDrawerHeaderDirective), { isSignal: true }] }], footerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CadNavDrawerFooterDirective), { isSignal: true }] }], onEscape: [{
|
|
9639
|
+
type: HostListener,
|
|
9640
|
+
args: ['document:keydown.escape']
|
|
9641
|
+
}] } });
|
|
9642
|
+
|
|
9043
9643
|
/**
|
|
9044
9644
|
* Déclarations (inputs / outputs / models / contenu projeté) de cad-table — classe de base pour tenir la limite de taille du composant.
|
|
9045
9645
|
* Toute la logique reste dans CadTableComponent.
|
|
@@ -11776,7 +12376,7 @@ class CadToastComponent {
|
|
|
11776
12376
|
}
|
|
11777
12377
|
</div>
|
|
11778
12378
|
}
|
|
11779
|
-
`, isInline: true, styles: [":host{position:fixed;display:flex;flex-direction:column;gap:8px;width:340px;max-width:calc(
|
|
12379
|
+
`, isInline: true, styles: [":host{position:fixed;display:flex;flex-direction:column;gap:8px;width:340px;max-width:calc(100% - 32px);pointer-events:none;font-family:var(--cad-font)}:host(.pos-top-right){top:16px;right:16px}:host(.pos-top-left){top:16px;left:16px}:host(.pos-bottom-right){bottom:16px;right:16px;flex-direction:column-reverse}:host(.pos-bottom-left){bottom:16px;left:16px;flex-direction:column-reverse}:host(.pos-top-center){top:16px;left:50%;transform:translate(-50%)}:host(.pos-bottom-center){bottom:16px;left:50%;transform:translate(-50%);flex-direction:column-reverse}.cad-toast__item{--_c: var(--cad-accent);position:relative;overflow:hidden;pointer-events:auto;display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:10px;background:var(--cad-overlay);border:1px solid var(--cad-border);border-left:3px solid var(--_c);box-shadow:var(--cad-shadow-lg);color:var(--cad-fg);animation:cad-toast-in .18s var(--cad-ease)}.cad-toast__item.is-out{animation:cad-toast-out .16s var(--cad-ease) forwards}:host(.pos-top-left) .cad-toast__item,:host(.pos-bottom-left) .cad-toast__item{animation-name:cad-toast-in-l}.cad-toast__item.sev-success{--_c: var(--cad-success)}.cad-toast__item.sev-info{--_c: var(--cad-info)}.cad-toast__item.sev-warning{--_c: var(--cad-warning)}.cad-toast__item.sev-danger{--_c: var(--cad-danger)}.cad-toast__item.sev-secondary{--_c: var(--cad-fg-muted)}.cad-toast__item.sev-contrast{--_c: var(--cad-fg);background:var(--cad-fg);color:var(--cad-bg)}.cad-toast__icon{color:var(--_c);margin-top:1px;flex:none}.cad-toast__text{display:grid;gap:2px;flex:1;min-width:0}.cad-toast__text b{font-weight:600;font-size:13px}.cad-toast__text span{color:var(--cad-fg-secondary);font-size:12.5px;line-height:1.4}.sev-contrast .cad-toast__text span{color:inherit;opacity:.8}.cad-toast__actions{display:flex;gap:4px;margin-top:4px;margin-left:-8px}.cad-toast__close{border:0;background:transparent;color:var(--cad-fg-muted);cursor:pointer;padding:2px;border-radius:4px;display:grid;place-items:center;flex:none;margin:-2px -4px 0 0}.cad-toast__close:hover{color:var(--cad-fg);background:var(--cad-hover)}.cad-toast__progress{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--_c);opacity:.5;transform-origin:left;animation:cad-toast-life linear forwards}@keyframes cad-toast-in{0%{opacity:0;transform:translate(24px)}to{opacity:1;transform:none}}@keyframes cad-toast-in-l{0%{opacity:0;transform:translate(-24px)}to{opacity:1;transform:none}}@keyframes cad-toast-out{to{opacity:0;transform:scale(.96)}}@keyframes cad-toast-life{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@media(prefers-reduced-motion:reduce){.cad-toast__item,.cad-toast__item.is-out{animation-duration:1ms}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CadIconComponent, selector: "cad-icon", inputs: ["name", "size", "strokeWidth", "label", "title", "spin", "filled", "flip", "rotate"] }, { kind: "component", type: CadButtonComponent, selector: "button[cadButton], a[cadButton]", inputs: ["severity", "variant", "size", "loading", "disabled", "icon", "block", "value", "pressed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
11780
12380
|
}
|
|
11781
12381
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: CadToastComponent, decorators: [{
|
|
11782
12382
|
type: Component,
|
|
@@ -11809,7 +12409,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
|
|
|
11809
12409
|
}
|
|
11810
12410
|
</div>
|
|
11811
12411
|
}
|
|
11812
|
-
`, styles: [":host{position:fixed;display:flex;flex-direction:column;gap:8px;width:340px;max-width:calc(
|
|
12412
|
+
`, styles: [":host{position:fixed;display:flex;flex-direction:column;gap:8px;width:340px;max-width:calc(100% - 32px);pointer-events:none;font-family:var(--cad-font)}:host(.pos-top-right){top:16px;right:16px}:host(.pos-top-left){top:16px;left:16px}:host(.pos-bottom-right){bottom:16px;right:16px;flex-direction:column-reverse}:host(.pos-bottom-left){bottom:16px;left:16px;flex-direction:column-reverse}:host(.pos-top-center){top:16px;left:50%;transform:translate(-50%)}:host(.pos-bottom-center){bottom:16px;left:50%;transform:translate(-50%);flex-direction:column-reverse}.cad-toast__item{--_c: var(--cad-accent);position:relative;overflow:hidden;pointer-events:auto;display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:10px;background:var(--cad-overlay);border:1px solid var(--cad-border);border-left:3px solid var(--_c);box-shadow:var(--cad-shadow-lg);color:var(--cad-fg);animation:cad-toast-in .18s var(--cad-ease)}.cad-toast__item.is-out{animation:cad-toast-out .16s var(--cad-ease) forwards}:host(.pos-top-left) .cad-toast__item,:host(.pos-bottom-left) .cad-toast__item{animation-name:cad-toast-in-l}.cad-toast__item.sev-success{--_c: var(--cad-success)}.cad-toast__item.sev-info{--_c: var(--cad-info)}.cad-toast__item.sev-warning{--_c: var(--cad-warning)}.cad-toast__item.sev-danger{--_c: var(--cad-danger)}.cad-toast__item.sev-secondary{--_c: var(--cad-fg-muted)}.cad-toast__item.sev-contrast{--_c: var(--cad-fg);background:var(--cad-fg);color:var(--cad-bg)}.cad-toast__icon{color:var(--_c);margin-top:1px;flex:none}.cad-toast__text{display:grid;gap:2px;flex:1;min-width:0}.cad-toast__text b{font-weight:600;font-size:13px}.cad-toast__text span{color:var(--cad-fg-secondary);font-size:12.5px;line-height:1.4}.sev-contrast .cad-toast__text span{color:inherit;opacity:.8}.cad-toast__actions{display:flex;gap:4px;margin-top:4px;margin-left:-8px}.cad-toast__close{border:0;background:transparent;color:var(--cad-fg-muted);cursor:pointer;padding:2px;border-radius:4px;display:grid;place-items:center;flex:none;margin:-2px -4px 0 0}.cad-toast__close:hover{color:var(--cad-fg);background:var(--cad-hover)}.cad-toast__progress{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--_c);opacity:.5;transform-origin:left;animation:cad-toast-life linear forwards}@keyframes cad-toast-in{0%{opacity:0;transform:translate(24px)}to{opacity:1;transform:none}}@keyframes cad-toast-in-l{0%{opacity:0;transform:translate(-24px)}to{opacity:1;transform:none}}@keyframes cad-toast-out{to{opacity:0;transform:scale(.96)}}@keyframes cad-toast-life{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@media(prefers-reduced-motion:reduce){.cad-toast__item,.cad-toast__item.is-out{animation-duration:1ms}}\n"] }]
|
|
11813
12413
|
}], ctorParameters: () => [], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: false }] }], life: [{ type: i0.Input, args: [{ isSignal: true, alias: "life", required: false }] }], maxVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisible", required: false }] }], preventDuplicates: [{ type: i0.Input, args: [{ isSignal: true, alias: "preventDuplicates", required: false }] }], showProgress: [{ type: i0.Input, args: [{ isSignal: true, alias: "showProgress", required: false }] }], zIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "zIndex", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], clicked: [{ type: i0.Output, args: ["clicked"] }], itemTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CadToastItemDirective), { isSignal: true }] }] } });
|
|
11814
12414
|
|
|
11815
12415
|
/**
|
|
@@ -13645,7 +14245,11 @@ class CadMapComponent {
|
|
|
13645
14245
|
tm.jumpTo({ center: [c.lng, c.lat], zoom: this.map.getZoom(), bearing: this.map.getBearing(), pitch: this.map.getPitch() });
|
|
13646
14246
|
t.syncing = false;
|
|
13647
14247
|
}
|
|
13648
|
-
destroy() { this.chromeRef?.destroy(); this.ro?.disconnect(); this.roCorners?.disconnect(); this.themeObs?.disconnect();
|
|
14248
|
+
destroy() { this.chromeRef?.destroy(); this.ro?.disconnect(); this.roCorners?.disconnect(); this.themeObs?.disconnect(); try {
|
|
14249
|
+
this.closePopup();
|
|
14250
|
+
this.tooltip?.remove();
|
|
14251
|
+
}
|
|
14252
|
+
catch { /* carte déjà démontée */ } try {
|
|
13649
14253
|
this.map?.remove();
|
|
13650
14254
|
}
|
|
13651
14255
|
catch { /* déjà détruit */ } this.map = null; }
|
|
@@ -13686,6 +14290,14 @@ const FR_LOCALE = {
|
|
|
13686
14290
|
'ScaleControl.Meters': 'm', 'ScaleControl.Kilometers': 'km', 'CooperativeGesturesHandler.WindowsHelpText': 'Utilisez Ctrl + molette pour zoomer', 'CooperativeGesturesHandler.MacHelpText': 'Utilisez ⌘ + molette pour zoomer', 'CooperativeGesturesHandler.MobileHelpText': 'Utilisez deux doigts pour déplacer la carte',
|
|
13687
14291
|
};
|
|
13688
14292
|
|
|
14293
|
+
/**
|
|
14294
|
+
* Une carte MapLibre détruite garde son objet mais perd son `style`. Tout appel qui le
|
|
14295
|
+
* traverse — `getLayer`, `getSource`, `off` — lève alors un TypeError. C'est le seul signe
|
|
14296
|
+
* fiable qu'on puisse encore lui parler.
|
|
14297
|
+
*/
|
|
14298
|
+
function cadMapEstVivante(map) {
|
|
14299
|
+
return !!map && !!map.style;
|
|
14300
|
+
}
|
|
13689
14301
|
/**
|
|
13690
14302
|
* <cad-map-layer id="oa" label="Ouvrages d'art" type="geojson" [data]="geojson" [style]="{ color: { field:'etat', categories:{…} }, radius: 6 }" cluster [popupTemplate]="tpl" (featureClick)/>
|
|
13691
14303
|
* <cad-map-layer id="ppri" label="PPRI" type="wms" url="https://…/wms" layers="PPRI" [opacity]=".6"/>
|
|
@@ -13776,7 +14388,38 @@ class CadMapLayerComponent {
|
|
|
13776
14388
|
this.bindEvents(map);
|
|
13777
14389
|
this.loaded.emit();
|
|
13778
14390
|
}
|
|
13779
|
-
|
|
14391
|
+
/**
|
|
14392
|
+
* Chemin de DÉMONTAGE : il ne doit JAMAIS lever.
|
|
14393
|
+
*
|
|
14394
|
+
* Bug signalé par SZU le 21/08/2026 — « au clic sur un élément de menu, parfois, le
|
|
14395
|
+
* contenu est blanc, puis quelques secondes plus tard le menu redevient fonctionnel et
|
|
14396
|
+
* la page est la bonne ». En quittant une page portant une carte :
|
|
14397
|
+
*
|
|
14398
|
+
* TypeError: Cannot read properties of undefined (reading 'getLayer')
|
|
14399
|
+
* at removeAll -> detach -> ... -> ComponentRef.destroy
|
|
14400
|
+
*
|
|
14401
|
+
* `detach` était appelé DEUX fois à la destruction : une fois par `unregisterChild`
|
|
14402
|
+
* (protégé côté cad-map) et une fois directement, sans garde. Le second passage
|
|
14403
|
+
* s'exécutait sur une carte déjà démontée par MapLibre — `map.style` vaut alors
|
|
14404
|
+
* `undefined` et `map.getLayer()` lève. Une exception pendant la destruction interrompt
|
|
14405
|
+
* le démontage de la vue : d'où l'écran blanc et le menu figé.
|
|
14406
|
+
*
|
|
14407
|
+
* Deux verrous, parce qu'un seul ne suffit pas : on ne touche à la carte que si elle est
|
|
14408
|
+
* encore vivante, ET on avale ce qui pourrait malgré tout échapper. Un nettoyage qui lève
|
|
14409
|
+
* est toujours pire que le déchet qu'il aurait laissé.
|
|
14410
|
+
*/
|
|
14411
|
+
detach(map) {
|
|
14412
|
+
try {
|
|
14413
|
+
if (cadMapEstVivante(map)) {
|
|
14414
|
+
this.unbindEvents(map);
|
|
14415
|
+
this.removeAll(map);
|
|
14416
|
+
}
|
|
14417
|
+
}
|
|
14418
|
+
catch {
|
|
14419
|
+
/* carte déjà démontée : il n'y a plus rien à retirer */
|
|
14420
|
+
}
|
|
14421
|
+
this.attached = false;
|
|
14422
|
+
}
|
|
13780
14423
|
removeAll(map) {
|
|
13781
14424
|
for (const id of this.allLayerIds())
|
|
13782
14425
|
if (map.getLayer(id))
|
|
@@ -14136,7 +14779,17 @@ class CadMapSearchComponent {
|
|
|
14136
14779
|
timer = null;
|
|
14137
14780
|
ctrl = null;
|
|
14138
14781
|
mk = null;
|
|
14139
|
-
constructor() {
|
|
14782
|
+
constructor() {
|
|
14783
|
+
// Démontage : la carte peut déjà avoir été détruite par cad-map, auquel cas retirer le
|
|
14784
|
+
// marqueur lève et casse le reste du cycle (même défaut que cad-map-layer.detach, 21/08).
|
|
14785
|
+
inject(DestroyRef).onDestroy(() => {
|
|
14786
|
+
try {
|
|
14787
|
+
this.mk?.remove();
|
|
14788
|
+
}
|
|
14789
|
+
catch { /* carte déjà démontée */ }
|
|
14790
|
+
this.ctrl?.abort();
|
|
14791
|
+
});
|
|
14792
|
+
}
|
|
14140
14793
|
onInput(v) {
|
|
14141
14794
|
this.q.set(v);
|
|
14142
14795
|
this.searched.set(false);
|
|
@@ -14232,7 +14885,7 @@ class CadMapSearchComponent {
|
|
|
14232
14885
|
} @else if (open() && q().length >= 3 && !busy() && searched()) {
|
|
14233
14886
|
<ul class="list"><li class="empty">Aucun résultat</li></ul>
|
|
14234
14887
|
}
|
|
14235
|
-
`, isInline: true, styles: [":host{display:block;position:relative;width:300px;max-width:calc(
|
|
14888
|
+
`, isInline: true, styles: [":host{display:block;position:relative;width:300px;max-width:calc(100% - 80px);font:var(--cad-font-size) var(--cad-font);z-index:6}.box{display:flex;align-items:center;gap:8px;height:34px;padding:0 10px;background:var(--cad-surface);border:1px solid var(--cad-border);border-radius:8px;box-shadow:0 2px 6px #0000001f;color:var(--cad-fg-muted);transition:border-color var(--cad-dur),box-shadow var(--cad-dur)}.box.has-focus{border-color:var(--cad-accent);box-shadow:0 0 0 3px var(--cad-ring)}input{flex:1 1 0;width:0;min-width:0;border:0;outline:0;background:transparent;color:var(--cad-fg);font:inherit}input::placeholder{color:var(--cad-fg-muted)}input::-webkit-search-cancel-button{display:none}.clr{border:0;background:transparent;color:var(--cad-fg-muted);cursor:pointer;display:grid;place-items:center;width:20px;height:20px;border-radius:4px;padding:0}.clr:hover{background:var(--cad-hover);color:var(--cad-fg)}.spin{color:var(--cad-accent)}.list{position:absolute;left:0;right:0;top:calc(100% + 6px);margin:0;padding:4px;list-style:none;background:var(--cad-overlay);border:1px solid var(--cad-border);border-radius:9px;box-shadow:var(--cad-shadow-lg);max-height:280px;overflow:auto}li{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:6px;cursor:pointer;color:var(--cad-fg);font-size:12.5px}li .lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}li small{color:var(--cad-fg-muted);font-size:11px;white-space:nowrap}li cad-icon{color:var(--cad-fg-muted)}li.is-active{background:var(--cad-hover)}li.empty{color:var(--cad-fg-muted);cursor:default;font-style:italic}\n"], dependencies: [{ kind: "component", type: CadIconComponent, selector: "cad-icon", inputs: ["name", "size", "strokeWidth", "label", "title", "spin", "filled", "flip", "rotate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
14236
14889
|
}
|
|
14237
14890
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: CadMapSearchComponent, decorators: [{
|
|
14238
14891
|
type: Component,
|
|
@@ -14255,7 +14908,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
|
|
|
14255
14908
|
} @else if (open() && q().length >= 3 && !busy() && searched()) {
|
|
14256
14909
|
<ul class="list"><li class="empty">Aucun résultat</li></ul>
|
|
14257
14910
|
}
|
|
14258
|
-
`, styles: [":host{display:block;position:relative;width:300px;max-width:calc(
|
|
14911
|
+
`, styles: [":host{display:block;position:relative;width:300px;max-width:calc(100% - 80px);font:var(--cad-font-size) var(--cad-font);z-index:6}.box{display:flex;align-items:center;gap:8px;height:34px;padding:0 10px;background:var(--cad-surface);border:1px solid var(--cad-border);border-radius:8px;box-shadow:0 2px 6px #0000001f;color:var(--cad-fg-muted);transition:border-color var(--cad-dur),box-shadow var(--cad-dur)}.box.has-focus{border-color:var(--cad-accent);box-shadow:0 0 0 3px var(--cad-ring)}input{flex:1 1 0;width:0;min-width:0;border:0;outline:0;background:transparent;color:var(--cad-fg);font:inherit}input::placeholder{color:var(--cad-fg-muted)}input::-webkit-search-cancel-button{display:none}.clr{border:0;background:transparent;color:var(--cad-fg-muted);cursor:pointer;display:grid;place-items:center;width:20px;height:20px;border-radius:4px;padding:0}.clr:hover{background:var(--cad-hover);color:var(--cad-fg)}.spin{color:var(--cad-accent)}.list{position:absolute;left:0;right:0;top:calc(100% + 6px);margin:0;padding:4px;list-style:none;background:var(--cad-overlay);border:1px solid var(--cad-border);border-radius:9px;box-shadow:var(--cad-shadow-lg);max-height:280px;overflow:auto}li{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:6px;cursor:pointer;color:var(--cad-fg);font-size:12.5px}li .lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}li small{color:var(--cad-fg-muted);font-size:11px;white-space:nowrap}li cad-icon{color:var(--cad-fg-muted)}li.is-active{background:var(--cad-hover)}li.empty{color:var(--cad-fg-muted);cursor:default;font-style:italic}\n"] }]
|
|
14259
14912
|
}], ctorParameters: () => [], propDecorators: { inp: [{ type: i0.ViewChild, args: ['inp', { isSignal: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], limit: [{ type: i0.Input, args: [{ isSignal: true, alias: "limit", required: false }] }], debounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounce", required: false }] }], provider: [{ type: i0.Input, args: [{ isSignal: true, alias: "provider", required: false }] }], flyZoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "flyZoom", required: false }] }], marker: [{ type: i0.Input, args: [{ isSignal: true, alias: "marker", required: false }] }], nearMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "nearMap", required: false }] }], select: [{ type: i0.Output, args: ["select"] }], cleared: [{ type: i0.Output, args: ["cleared"] }] } });
|
|
14260
14913
|
const escapeHtml = (s) => s.replace(/[&<>"']/g, c => ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' })[c]);
|
|
14261
14914
|
|
|
@@ -17447,5 +18100,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
|
|
|
17447
18100
|
* Generated bundle index. Do not edit.
|
|
17448
18101
|
*/
|
|
17449
18102
|
|
|
17450
|
-
export { BanGeocoder, CAD_BREAKPOINTS, CAD_CHART_PALETTE, CAD_COLOR_PRESETS, CAD_DEFAULT_BASEMAPS, CAD_DEFAULT_PRIORITY_BREAKPOINTS, CAD_DIALOG_DATA, CAD_FILTER_OPERATORS, CAD_GEOCODER, CAD_ICONS, CAD_ICONS_CEREMA, CAD_ICONS_CORE, CAD_ICONS_DATA, CAD_ICONS_FILES, CAD_ICONS_GEO, CAD_ICONS_SUBSET, CAD_ICONS_TOKEN, CAD_ICONS_UI, CAD_ICON_ALIASES, CAD_ICON_CATEGORIES, CAD_MAPLIBRE_CSS_URL, CAD_MAP_CHILD, CAD_MAP_DEFAULTS, CAD_MAP_GLOBAL_STYLES, CAD_MAP_GLYPHS, CAD_MAP_PALETTE, CAD_MASK_PRESETS, CAD_MOBILE_BREAKPOINT, CAD_SELECT_POSITIONS, CAD_SELECT_TRIGGER_STYLES, CAD_SHEET_DATA, CAD_TOUCH_DENSITY, CadAccordionComponent, CadAccordionPanelComponent, CadAvatarComponent, CadAvatarGroupComponent, CadBadgeComponent, CadBadgeDirective, CadBlockDirective, CadBlockOverlayComponent, CadBlockUiComponent, CadBreadcrumbComponent, CadBreadcrumbItemDirective, CadBreakpointService, CadButtonComponent, CadButtonGroupComponent, CadCaptionDirective, CadCardComponent, CadCardDirective, CadCardHeaderDirective, CadCarouselComponent, CadCarouselItemDirective, CadCascadeSelectComponent, CadCellTemplateDirective, CadCenterComponent, CadChartComponent, CadCheckboxComponent, CadChipComponent, CadClusterComponent, CadColDirective, CadColorpickerComponent, CadColumnComponent, CadComboComponent, CadConfirmContentComponent, CadConfirmDialogComponent, CadConfirmService, CadContainerComponent, CadDataviewComponent, CadDataviewGridDirective, CadDataviewListDirective, CadDatepickerComponent, CadDialogComponent, CadDialogContainerComponent, CadDialogFooterDirective, CadDialogHeaderDirective, CadDialogRef, CadDialogService, CadDividerComponent, CadDrawerComponent, CadEditFocusDirective, CadEditorTemplateDirective, CadEmptyDirective, CadFieldComponent, CadFieldsetComponent, CadFieldsetLegendDirective, CadFilterChipComponent, CadFilterTemplateDirective, CadGeocodingService, CadGridComponent, CadGroupFooterDirective, CadGroupHeaderDirective, CadHeaderTemplateDirective, CadIconComponent, CadIconRegistry, CadIfDirective, CadImageComponent, CadInplaceComponent, CadInplaceContentDirective, CadInplaceDisplayDirective, CadInputDirective, CadJsonEditorComponent, CadKeyFilterDirective, CadListEmptyDirective, CadListFooterDirective, CadListHeaderDirective, CadListItemDirective, CadListboxComponent, CadMapBasemapRegistry, CadMapBasemapsComponent, CadMapCardComponent, CadMapChromeComponent, CadMapComponent, CadMapDrawEngine, CadMapLayerComponent, CadMapLayerGroupComponent, CadMapLayerToggleComponent, CadMapLegendComponent, CadMapMenuComponent, CadMapPanelComponent, CadMapPanels, CadMapRailComponent, CadMapRailItemComponent, CadMapSearchComponent, CadMapSectionComponent, CadMaskDirective, CadMenuComponent, CadMenubarComponent, CadMessageComponent, CadMeterComponent, CadMeterLabelDirective, CadMultiselectComponent, CadNumberComponent, CadOptionListComponent, CadOrderlistComponent, CadOrgNodeDirective, CadOrgchartComponent, CadOverlayBase, CadPaginatorComponent, CadPanelComponent, CadPanelContentDirective, CadPanelHeaderDirective, CadPanelHeadingDirective, CadPasswordComponent, CadPicklistComponent, CadPopoverComponent, CadProgressComponent, CadRadioComponent, CadRadioGroupComponent, CadRatingComponent, CadRowActionsDirective, CadRowCountDirective, CadRowExpansionDirective, CadScrollTopComponent, CadSegmentedComponent, CadSelectBase, CadSelectComponent, CadSelectEmptyDirective, CadSelectFooterDirective, CadSelectHeaderDirective, CadSelectItemDirective, CadSelectSelectedDirective, CadSheetContainerComponent, CadSheetRef, CadSheetService, CadSidebarComponent, CadSidebarPanelDirective, CadSkeletonComponent, CadSliderComponent, CadSpacerComponent, CadSpeedDialComponent, CadSpinnerComponent, CadSplitButtonComponent, CadSplitComponent, CadSplitterComponent, CadSplitterPanelComponent, CadStackComponent, CadStepComponent, CadStepperComponent, CadSwitchComponent, CadTabComponent, CadTabContentDirective, CadTabLabelDirective, CadTableBase, CadTableComponent, CadTableEdit, CadTableEditUi, CadTableFooterDirective, CadTablePanelComponent, CadTableResponsive, CadTableSelection, CadTableSticky, CadTableVirtual, CadTabsComponent, CadTagComponent, CadTimelineComponent, CadTimelineContentDirective, CadTimelineMarkerDirective, CadTimelineOppositeDirective, CadToastComponent, CadToastItemDirective, CadToastService, CadToggleButtonComponent, CadTooltipComponent, CadTooltipDirective, CadTreeAdapter, CadTreeComponent, CadTreeNodeDirective, CadTreeselectComponent, CadUploadComponent, CadUploadContentDirective, CadUploadEmptyDirective, CadUploadItemDirective, CadValueAccessor, MAPLIBRE_MIN_CSS, addDays, addMonths, addYears, cadAggregate, cadApplyColumnOrder, cadApplyMask, cadArea, cadAutosizeWidth, cadBasemapThumbnail, cadBoundsOf, cadCategories, cadCentroid, cadColorExpr, cadCompare, cadCurrentOperator, cadDefaultMatchMode, cadDistance, cadDownloadCsv, cadFilterData, cadFilterKindOf, cadFilterOperators, cadFilterRows, cadFmtArea, cadFmtLength, cadFormatCell, cadFormatColor, cadFormatSize, cadGap, cadGeoJSONStats, cadGeometryKinds, cadHeaderMenuItems, cadHighlightJson, cadHslToRgb, cadHsvToRgb, cadId, cadIsGroupKey, cadJsonErrorPos, cadLegendFromStyle, cadLength, cadMapLayerOf, cadMapLayersOf, cadMatch, cadMoveColumn, cadMoveItems, cadNormalize, cadNormalizeOptions, cadNumberExpr, cadPadBounds, cadParseColor, cadParseResponsive, cadPropsTable, cadResolve, cadResolveResponsive, cadResponsive, cadRgbToHsl, cadRgbToHsv, cadRingArea, cadRowKey, cadRowPredicate, cadSameValue, cadSortData, cadStartResize, cadStyleToExpressions, cadUnmask, cadValidateGeoJSON, cadValueForOperator, cadWriteField, compareDay, daysInMonth, endOfMonth, ensureMaplibreCss, formatDate, isBetweenDay, isSameDay, isSameMonth, isValidDate, isoOf, isoWeek, loadChartJs, loadMaplibre, monthNames, pad2, parseIso, parseWithFormat, provideCadIcons, startOfDay, startOfMonth, toDate, weekdayNames };
|
|
18103
|
+
export { BanGeocoder, CAD_BREAKPOINTS, CAD_CHART_PALETTE, CAD_COLOR_PRESETS, CAD_DEFAULT_BASEMAPS, CAD_DEFAULT_PRIORITY_BREAKPOINTS, CAD_DIALOG_DATA, CAD_FILTER_OPERATORS, CAD_GEOCODER, CAD_ICONS, CAD_ICONS_CEREMA, CAD_ICONS_CORE, CAD_ICONS_DATA, CAD_ICONS_FILES, CAD_ICONS_GEO, CAD_ICONS_SUBSET, CAD_ICONS_TOKEN, CAD_ICONS_UI, CAD_ICON_ALIASES, CAD_ICON_CATEGORIES, CAD_MAPLIBRE_CSS_URL, CAD_MAP_CHILD, CAD_MAP_DEFAULTS, CAD_MAP_GLOBAL_STYLES, CAD_MAP_GLYPHS, CAD_MAP_PALETTE, CAD_MASK_PRESETS, CAD_MOBILE_BREAKPOINT, CAD_SELECT_POSITIONS, CAD_SELECT_TRIGGER_STYLES, CAD_SHEET_DATA, CAD_SHELL, CAD_TOUCH_DENSITY, CadAccordionComponent, CadAccordionPanelComponent, CadAppShellComponent, CadAvatarComponent, CadAvatarGroupComponent, CadBadgeComponent, CadBadgeDirective, CadBlockDirective, CadBlockOverlayComponent, CadBlockUiComponent, CadBottomNavComponent, CadBreadcrumbComponent, CadBreadcrumbItemDirective, CadBreakpointService, CadButtonComponent, CadButtonGroupComponent, CadCaptionDirective, CadCardComponent, CadCardDirective, CadCardHeaderDirective, CadCarouselComponent, CadCarouselItemDirective, CadCascadeSelectComponent, CadCellTemplateDirective, CadCenterComponent, CadChartComponent, CadCheckboxComponent, CadChipComponent, CadClusterComponent, CadColDirective, CadColorpickerComponent, CadColumnComponent, CadComboComponent, CadConfirmContentComponent, CadConfirmDialogComponent, CadConfirmService, CadContainerComponent, CadDataviewComponent, CadDataviewGridDirective, CadDataviewListDirective, CadDatepickerComponent, CadDialogComponent, CadDialogContainerComponent, CadDialogFooterDirective, CadDialogHeaderDirective, CadDialogRef, CadDialogService, CadDividerComponent, CadDrawerComponent, CadEditFocusDirective, CadEditorTemplateDirective, CadEmptyDirective, CadFieldComponent, CadFieldsetComponent, CadFieldsetLegendDirective, CadFilterChipComponent, CadFilterTemplateDirective, CadGeocodingService, CadGridComponent, CadGroupFooterDirective, CadGroupHeaderDirective, CadHeaderTemplateDirective, CadIconComponent, CadIconRegistry, CadIfDirective, CadImageComponent, CadInplaceComponent, CadInplaceContentDirective, CadInplaceDisplayDirective, CadInputDirective, CadJsonEditorComponent, CadKeyFilterDirective, CadListEmptyDirective, CadListFooterDirective, CadListHeaderDirective, CadListItemDirective, CadListboxComponent, CadMapBasemapRegistry, CadMapBasemapsComponent, CadMapCardComponent, CadMapChromeComponent, CadMapComponent, CadMapDrawEngine, CadMapLayerComponent, CadMapLayerGroupComponent, CadMapLayerToggleComponent, CadMapLegendComponent, CadMapMenuComponent, CadMapPanelComponent, CadMapPanels, CadMapRailComponent, CadMapRailItemComponent, CadMapSearchComponent, CadMapSectionComponent, CadMaskDirective, CadMenuComponent, CadMenubarComponent, CadMessageComponent, CadMeterComponent, CadMeterLabelDirective, CadMultiselectComponent, CadNavDrawerComponent, CadNavDrawerFooterDirective, CadNavDrawerHeaderDirective, CadNumberComponent, CadOptionListComponent, CadOrderlistComponent, CadOrgNodeDirective, CadOrgchartComponent, CadOverlayBase, CadPaginatorComponent, CadPanelComponent, CadPanelContentDirective, CadPanelHeaderDirective, CadPanelHeadingDirective, CadPasswordComponent, CadPicklistComponent, CadPopoverComponent, CadProgressComponent, CadRadioComponent, CadRadioGroupComponent, CadRatingComponent, CadRowActionsDirective, CadRowCountDirective, CadRowExpansionDirective, CadScrollTopComponent, CadSegmentedComponent, CadSelectBase, CadSelectComponent, CadSelectEmptyDirective, CadSelectFooterDirective, CadSelectHeaderDirective, CadSelectItemDirective, CadSelectSelectedDirective, CadSheetContainerComponent, CadSheetRef, CadSheetService, CadSidebarComponent, CadSidebarPanelDirective, CadSkeletonComponent, CadSliderComponent, CadSpacerComponent, CadSpeedDialComponent, CadSpinnerComponent, CadSplitButtonComponent, CadSplitComponent, CadSplitterComponent, CadSplitterPanelComponent, CadStackComponent, CadStepComponent, CadStepperComponent, CadSwitchComponent, CadTabComponent, CadTabContentDirective, CadTabLabelDirective, CadTableBase, CadTableComponent, CadTableEdit, CadTableEditUi, CadTableFooterDirective, CadTablePanelComponent, CadTableResponsive, CadTableSelection, CadTableSticky, CadTableVirtual, CadTabsComponent, CadTagComponent, CadTimelineComponent, CadTimelineContentDirective, CadTimelineMarkerDirective, CadTimelineOppositeDirective, CadToastComponent, CadToastItemDirective, CadToastService, CadToggleButtonComponent, CadTooltipComponent, CadTooltipDirective, CadTreeAdapter, CadTreeComponent, CadTreeNodeDirective, CadTreeselectComponent, CadUploadComponent, CadUploadContentDirective, CadUploadEmptyDirective, CadUploadItemDirective, CadValueAccessor, MAPLIBRE_MIN_CSS, addDays, addMonths, addYears, cadAggregate, cadApplyColumnOrder, cadApplyMask, cadArea, cadAutosizeWidth, cadBasemapThumbnail, cadBoundsOf, cadCategories, cadCentroid, cadColorExpr, cadCompare, cadCurrentOperator, cadDefaultMatchMode, cadDistance, cadDownloadCsv, cadFilterData, cadFilterKindOf, cadFilterOperators, cadFilterRows, cadFmtArea, cadFmtLength, cadFormatCell, cadFormatColor, cadFormatSize, cadGap, cadGeoJSONStats, cadGeometryKinds, cadHeaderMenuItems, cadHighlightJson, cadHslToRgb, cadHsvToRgb, cadId, cadIsGroupKey, cadJsonErrorPos, cadLegendFromStyle, cadLength, cadMapEstVivante, cadMapLayerOf, cadMapLayersOf, cadMatch, cadMoveColumn, cadMoveItems, cadNormalize, cadNormalizeOptions, cadNumberExpr, cadPadBounds, cadParseColor, cadParseResponsive, cadPropsTable, cadResolve, cadResolveResponsive, cadResponsive, cadRgbToHsl, cadRgbToHsv, cadRingArea, cadRowKey, cadRowPredicate, cadSameValue, cadSortData, cadStartResize, cadStyleToExpressions, cadUnmask, cadValidateGeoJSON, cadValueForOperator, cadWriteField, compareDay, daysInMonth, endOfMonth, ensureMaplibreCss, formatDate, isBetweenDay, isSameDay, isSameMonth, isValidDate, isoOf, isoWeek, loadChartJs, loadMaplibre, monthNames, pad2, parseIso, parseWithFormat, provideCadIcons, startOfDay, startOfMonth, toDate, weekdayNames };
|
|
17451
18104
|
//# sourceMappingURL=cadriciel-ui.mjs.map
|