@starterlib/ui 0.10.13 → 0.11.0

package/fesm2022/starterlib-ui-virtuel.mjs

@@ -0,0 +1,272 @@
+import { CdkFixedSizeVirtualScroll, CdkVirtualForOf, CdkVirtualScrollViewport } from "@angular/cdk/scrolling";
+import { NgTemplateOutlet } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Directive, TemplateRef, computed, contentChild, inject, input, isDevMode, numberAttribute, viewChild } from "@angular/core";
+var StVirtualItem = class StVirtualItem {
+	typage = input("", {
+		...ngDevMode ? { debugName: "typage" } : /* istanbul ignore next */ {},
+		alias: "stVirtualItem"
+	});
+	gabarit = inject(TemplateRef);
+	static ngTemplateContextGuard(_directive, _contexte) {
+		return true;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: StVirtualItem,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: StVirtualItem,
+		isStandalone: true,
+		selector: "ng-template[stVirtualItem]",
+		inputs: { typage: {
+			classPropertyName: "typage",
+			publicName: "stVirtualItem",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: StVirtualItem,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "ng-template[stVirtualItem]" }]
+	}],
+	propDecorators: { typage: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "stVirtualItem",
+			required: false
+		}]
+	}] }
+});
+const SUIVI_PAR_RANG = (rang) => rang;
+const HAUTEUR_PAR_DEFAUT = 44;
+var StVirtualList = class StVirtualList {
+	elements = input.required(...ngDevMode ? [{ debugName: "elements" }] : /* istanbul ignore next */ []);
+	libelle = input.required(...ngDevMode ? [{ debugName: "libelle" }] : /* istanbul ignore next */ []);
+	hauteurDeLigne = input(HAUTEUR_PAR_DEFAUT, {
+		...ngDevMode ? { debugName: "hauteurDeLigne" } : /* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	hauteurDeFenetre = input("24rem", ...ngDevMode ? [{ debugName: "hauteurDeFenetre" }] : /* istanbul ignore next */ []);
+	suivi = input(SUIVI_PAR_RANG, ...ngDevMode ? [{ debugName: "suivi" }] : /* istanbul ignore next */ []);
+	ligne = contentChild.required(StVirtualItem, ...ngDevMode ? [{ debugName: "ligne" }] : /* istanbul ignore next */ []);
+	fenetre = viewChild.required(CdkVirtualScrollViewport, ...ngDevMode ? [{ debugName: "fenetre" }] : /* istanbul ignore next */ []);
+	hauteur = computed(() => {
+		const hauteur = this.hauteurDeLigne();
+		if (Number.isFinite(hauteur) && hauteur > 0) return hauteur;
+		if (isDevMode()) console.warn(`[st-virtual-list] hauteurDeLigne invalide (${String(hauteur)}) : ${String(HAUTEUR_PAR_DEFAUT)} px retenus.`);
+		return HAUTEUR_PAR_DEFAUT;
+	}, ...ngDevMode ? [{ debugName: "hauteur" }] : /* istanbul ignore next */ []);
+	margeMin = computed(() => this.hauteur() * 5, ...ngDevMode ? [{ debugName: "margeMin" }] : /* istanbul ignore next */ []);
+	margeMax = computed(() => this.hauteur() * 10, ...ngDevMode ? [{ debugName: "margeMax" }] : /* istanbul ignore next */ []);
+	allerA(rang, comportement = "auto") {
+		this.fenetre().scrollToIndex(rang, comportement);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: StVirtualList,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.2.0",
+		version: "22.2.1",
+		type: StVirtualList,
+		isStandalone: true,
+		selector: "st-virtual-list",
+		inputs: {
+			elements: {
+				classPropertyName: "elements",
+				publicName: "elements",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			libelle: {
+				classPropertyName: "libelle",
+				publicName: "libelle",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			hauteurDeLigne: {
+				classPropertyName: "hauteurDeLigne",
+				publicName: "hauteurDeLigne",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			hauteurDeFenetre: {
+				classPropertyName: "hauteurDeFenetre",
+				publicName: "hauteurDeFenetre",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			suivi: {
+				classPropertyName: "suivi",
+				publicName: "suivi",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			properties: { "style.--st-virtual-list-hauteur": "hauteurDeFenetre()" },
+			classAttribute: "st-virtual-list"
+		},
+		queries: [{
+			propertyName: "ligne",
+			first: true,
+			predicate: StVirtualItem,
+			descendants: true,
+			isSignal: true
+		}],
+		viewQueries: [{
+			propertyName: "fenetre",
+			first: true,
+			predicate: CdkVirtualScrollViewport,
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<!-- La fenetre est la region qui defile : focalisable et nommee, elle se parcourt au clavier. -->\n<cdk-virtual-scroll-viewport\n  class=\"st-virtual-list__fenetre\"\n  [itemSize]=\"hauteur()\"\n  [minBufferPx]=\"margeMin()\"\n  [maxBufferPx]=\"margeMax()\"\n  tabindex=\"0\"\n  role=\"region\"\n  [attr.aria-label]=\"libelle()\"\n>\n  <!-- role=\"list\" : Safari retire la semantique d'une liste sans puces. -->\n  <ul class=\"st-virtual-list__liste\" role=\"list\">\n    <li\n      *cdkVirtualFor=\"let element of elements(); let rang = index; trackBy: suivi()\"\n      class=\"st-virtual-list__ligne\"\n      [style.block-size.px]=\"hauteur()\"\n      [attr.aria-setsize]=\"elements().length\"\n      [attr.aria-posinset]=\"rang + 1\"\n    >\n      <ng-container\n        [ngTemplateOutlet]=\"ligne().gabarit\"\n        [ngTemplateOutletContext]=\"{ $implicit: element, index: rang }\"\n      />\n    </li>\n  </ul>\n</cdk-virtual-scroll-viewport>\n",
+		styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:block}.st-virtual-list__fenetre:focus-visible{outline:var(--st-focus-epaisseur) solid var(--st-couleur-anneau-focus);outline-offset:var(--st-focus-decalage);box-shadow:0 0 0 var(--st-focus-lisere) var(--st-couleur-lisere-focus)}.st-virtual-list__fenetre{box-sizing:border-box;block-size:var(--st-virtual-list-hauteur, 24rem);overscroll-behavior:contain;border:var(--st-epaisseur-fine) solid var(--st-couleur-bordure);border-radius:var(--st-rayon-md);background:var(--st-couleur-surface)}.st-virtual-list__liste{margin:0;padding:0;list-style:none}.st-virtual-list__ligne{display:flex;align-items:center;box-sizing:border-box;padding-inline:var(--st-espacement-4);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--st-couleur-texte);border-block-end:var(--st-epaisseur-fine) solid var(--st-couleur-bordure)}@media(forced-colors:active){.st-virtual-list__fenetre{border-color:CanvasText}}\n"],
+		dependencies: [
+			{
+				kind: "component",
+				type: CdkVirtualScrollViewport,
+				selector: "cdk-virtual-scroll-viewport",
+				inputs: ["orientation", "appendOnly"],
+				outputs: ["scrolledIndexChange"]
+			},
+			{
+				kind: "directive",
+				type: CdkFixedSizeVirtualScroll,
+				selector: "cdk-virtual-scroll-viewport[itemSize]",
+				inputs: [
+					"itemSize",
+					"minBufferPx",
+					"maxBufferPx"
+				]
+			},
+			{
+				kind: "directive",
+				type: CdkVirtualForOf,
+				selector: "[cdkVirtualFor][cdkVirtualForOf]",
+				inputs: [
+					"cdkVirtualForOf",
+					"cdkVirtualForTrackBy",
+					"cdkVirtualForTemplate",
+					"cdkVirtualForTemplateCacheSize"
+				]
+			},
+			{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: StVirtualList,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "st-virtual-list",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				CdkVirtualScrollViewport,
+				CdkFixedSizeVirtualScroll,
+				CdkVirtualForOf,
+				NgTemplateOutlet
+			],
+			host: {
+				class: "st-virtual-list",
+				"[style.--st-virtual-list-hauteur]": "hauteurDeFenetre()"
+			},
+			template: "<!-- La fenetre est la region qui defile : focalisable et nommee, elle se parcourt au clavier. -->\n<cdk-virtual-scroll-viewport\n  class=\"st-virtual-list__fenetre\"\n  [itemSize]=\"hauteur()\"\n  [minBufferPx]=\"margeMin()\"\n  [maxBufferPx]=\"margeMax()\"\n  tabindex=\"0\"\n  role=\"region\"\n  [attr.aria-label]=\"libelle()\"\n>\n  <!-- role=\"list\" : Safari retire la semantique d'une liste sans puces. -->\n  <ul class=\"st-virtual-list__liste\" role=\"list\">\n    <li\n      *cdkVirtualFor=\"let element of elements(); let rang = index; trackBy: suivi()\"\n      class=\"st-virtual-list__ligne\"\n      [style.block-size.px]=\"hauteur()\"\n      [attr.aria-setsize]=\"elements().length\"\n      [attr.aria-posinset]=\"rang + 1\"\n    >\n      <ng-container\n        [ngTemplateOutlet]=\"ligne().gabarit\"\n        [ngTemplateOutletContext]=\"{ $implicit: element, index: rang }\"\n      />\n    </li>\n  </ul>\n</cdk-virtual-scroll-viewport>\n",
+			styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:block}.st-virtual-list__fenetre:focus-visible{outline:var(--st-focus-epaisseur) solid var(--st-couleur-anneau-focus);outline-offset:var(--st-focus-decalage);box-shadow:0 0 0 var(--st-focus-lisere) var(--st-couleur-lisere-focus)}.st-virtual-list__fenetre{box-sizing:border-box;block-size:var(--st-virtual-list-hauteur, 24rem);overscroll-behavior:contain;border:var(--st-epaisseur-fine) solid var(--st-couleur-bordure);border-radius:var(--st-rayon-md);background:var(--st-couleur-surface)}.st-virtual-list__liste{margin:0;padding:0;list-style:none}.st-virtual-list__ligne{display:flex;align-items:center;box-sizing:border-box;padding-inline:var(--st-espacement-4);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--st-couleur-texte);border-block-end:var(--st-epaisseur-fine) solid var(--st-couleur-bordure)}@media(forced-colors:active){.st-virtual-list__fenetre{border-color:CanvasText}}\n"]
+		}]
+	}],
+	propDecorators: {
+		elements: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "elements",
+				required: true
+			}]
+		}],
+		libelle: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "libelle",
+				required: true
+			}]
+		}],
+		hauteurDeLigne: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hauteurDeLigne",
+				required: false
+			}]
+		}],
+		hauteurDeFenetre: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hauteurDeFenetre",
+				required: false
+			}]
+		}],
+		suivi: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "suivi",
+				required: false
+			}]
+		}],
+		ligne: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => StVirtualItem), { isSignal: true }]
+		}],
+		fenetre: [{
+			type: i0.ViewChild,
+			args: [i0.forwardRef(() => CdkVirtualScrollViewport), { isSignal: true }]
+		}]
+	}
+});
+export { StVirtualItem, StVirtualList };
+
+//# sourceMappingURL=starterlib-ui-virtuel.mjs.map

package/fesm2022/starterlib-ui-virtuel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"starterlib-ui-virtuel.mjs","names":[],"sources":["../../../../packages/ui/virtuel/src/lib/st-virtual-list.ts","../../../../packages/ui/virtuel/src/lib/st-virtual-list.html"],"mappings":"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"}