@starterlib/ui 0.7.2 → 0.9.0

package/fesm2022/starterlib-ui-onglets.mjs

@@ -0,0 +1,371 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Directive, ElementRef, afterRenderEffect, booleanAttribute, computed, effect, inject, input, isDevMode, model } from "@angular/core";
+import * as i1 from "@angular/aria/tabs";
+import { Tab, TabContent, TabList, TabPanel, Tabs } from "@angular/aria/tabs";
+import { ST_LOCALE, StIcon, StIdentifiants } from "@starterlib/ui";
+var StTabs = class StTabs {
+	hote = inject(ElementRef).nativeElement;
+	locale = inject(ST_LOCALE);
+	baseParDefaut = inject(StIdentifiants).prochain("st-tabs");
+	onglets = input.required(...ngDevMode ? [{ debugName: "onglets" }] : 	/* istanbul ignore next */ []);
+	etiquette = input.required(...ngDevMode ? [{ debugName: "etiquette" }] : 	/* istanbul ignore next */ []);
+	activation = input("manuelle", ...ngDevMode ? [{ debugName: "activation" }] : 	/* istanbul ignore next */ []);
+	orientation = input("horizontale", ...ngDevMode ? [{ debugName: "orientation" }] : 	/* istanbul ignore next */ []);
+	identifiant = input(void 0, ...ngDevMode ? [{ debugName: "identifiant" }] : 	/* istanbul ignore next */ []);
+	selection = model(void 0, ...ngDevMode ? [{ debugName: "selection" }] : 	/* istanbul ignore next */ []);
+	selectionEffective = computed(() => {
+		const onglets = this.onglets();
+		const demandee = this.selection();
+		return onglets.some((o) => o.valeur === demandee && o.desactive !== true) ? demandee : onglets.find((o) => o.desactive !== true)?.valeur;
+	}, ...ngDevMode ? [{ debugName: "selectionEffective" }] : 	/* istanbul ignore next */ []);
+	modeAria = computed(() => this.activation() === "automatique" ? "follow" : "explicit", ...ngDevMode ? [{ debugName: "modeAria" }] : 	/* istanbul ignore next */ []);
+	orientationAria = computed(() => this.orientation() === "verticale" ? "vertical" : "horizontal", ...ngDevMode ? [{ debugName: "orientationAria" }] : 	/* istanbul ignore next */ []);
+	formatDesComptes = computed(() => new Intl.NumberFormat(this.locale()), ...ngDevMode ? [{ debugName: "formatDesComptes" }] : 	/* istanbul ignore next */ []);
+	constructor() {
+		effect(() => {
+			const demandee = this.selection();
+			const effective = this.selectionEffective();
+			if (effective === demandee) return;
+			if (demandee !== void 0 && isDevMode()) console.warn(`[st-tabs] selection "${demandee}" : aucun onglet selectionnable de cette valeur (inconnue ou desactivee) ; ${effective === void 0 ? "aucun onglet disponible" : `repli sur "${effective}"`}.`);
+			this.selection.set(effective);
+		});
+		afterRenderEffect({
+			earlyRead: () => {
+				const valeur = this.selectionEffective();
+				if (valeur === void 0 || this.orientation() === "verticale") return 0;
+				const liste = this.hote.querySelector(".st-tabs__liste");
+				const onglet = this.hote.ownerDocument.getElementById(this.idDOnglet(valeur));
+				if (liste === null || onglet === null) return 0;
+				const cadre = liste.getBoundingClientRect();
+				const boite = onglet.getBoundingClientRect();
+				const calcule = this.hote.ownerDocument.defaultView?.getComputedStyle(liste);
+				const avant = cadre.left + (Number.parseFloat(calcule?.scrollPaddingLeft ?? "") || 0);
+				const apres = cadre.right - (Number.parseFloat(calcule?.scrollPaddingRight ?? "") || 0);
+				if (boite.left < avant) return boite.left - avant;
+				if (boite.right > apres) return Math.min(boite.right - apres, boite.left - avant);
+				return 0;
+			},
+			write: (ecart) => {
+				const decalage = ecart();
+				const liste = this.hote.querySelector(".st-tabs__liste");
+				if (decalage !== 0 && liste !== null) liste.scrollLeft += decalage;
+			}
+		});
+	}
+	idDOnglet(valeur) {
+		return `${this.identifiant() ?? this.baseParDefaut}-onglet-${valeur}`;
+	}
+	compteDe(compte) {
+		return this.formatDesComptes().format(compte);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: StTabs,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: StTabs,
+		isStandalone: true,
+		selector: "st-tabs",
+		inputs: {
+			onglets: {
+				classPropertyName: "onglets",
+				publicName: "onglets",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			etiquette: {
+				classPropertyName: "etiquette",
+				publicName: "etiquette",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			activation: {
+				classPropertyName: "activation",
+				publicName: "activation",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			orientation: {
+				classPropertyName: "orientation",
+				publicName: "orientation",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			identifiant: {
+				classPropertyName: "identifiant",
+				publicName: "identifiant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			selection: {
+				classPropertyName: "selection",
+				publicName: "selection",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { selection: "selectionChange" },
+		host: {
+			properties: { "attr.data-orientation": "orientation()" },
+			classAttribute: "st-tabs"
+		},
+		hostDirectives: [{ directive: i1.Tabs }],
+		ngImport: i0,
+		template: "<div\n  class=\"st-tabs__liste\"\n  ngTabList\n  [attr.aria-label]=\"etiquette()\"\n  [selectionMode]=\"modeAria()\"\n  [orientation]=\"orientationAria()\"\n  [selectedTab]=\"selectionEffective()\"\n  (selectedTabChange)=\"selection.set($event)\"\n>\n  @for (onglet of onglets(); track onglet.valeur) {\n    <button\n      class=\"st-tabs__onglet\"\n      type=\"button\"\n      ngTab\n      [id]=\"idDOnglet(onglet.valeur)\"\n      [value]=\"onglet.valeur\"\n      [disabled]=\"onglet.desactive === true\"\n    >\n      @if (onglet.icone; as icone) {\n        <st-icon [icone]=\"icone\" taille=\"18\" />\n      }\n      <span class=\"st-tabs__libelle\">{{ onglet.libelle }}</span>\n      <!-- Compte et complement entrent dans le NOM par un texte lecteur-seul (« Operations, 42 ») ;\n           ce que l'on voit est muet : lu tel quel, « Operations42 » colle au libelle. -->\n      @if (onglet.compte !== undefined) {\n        <span class=\"st-vh\">, {{ compteDe(onglet.compte) }}</span>\n        <span class=\"st-tabs__compte\" aria-hidden=\"true\">{{ compteDe(onglet.compte) }}</span>\n      }\n      @if (onglet.complement) {\n        <span class=\"st-vh\">, {{ onglet.complement }}</span>\n        <span class=\"st-tabs__complement\" aria-hidden=\"true\">{{ onglet.complement }}</span>\n      }\n      @if (onglet.valeur === selectionEffective()) {\n        <span class=\"st-tabs__marqueur\" aria-hidden=\"true\"></span>\n      }\n    </button>\n  }\n</div>\n\n<div class=\"st-tabs__panneaux\">\n  <ng-content />\n</div>\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}:host([data-orientation=verticale]){display:flex;gap:var(--st-espacement-4)}.st-tabs__liste{display:flex;gap:var(--st-espacement-4);align-items:center;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:var(--st-espacement-4);scrollbar-width:thin;background:linear-gradient(to right,var(--st-couleur-surface) 30%,transparent) left center/var(--st-espacement-10) 100% no-repeat local,linear-gradient(to left,var(--st-couleur-surface) 30%,transparent) right center/var(--st-espacement-10) 100% no-repeat local,radial-gradient(farthest-side at 0 50%,var(--st-couleur-ombre),transparent) left center/var(--st-espacement-3) 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,var(--st-couleur-ombre),transparent) right center/var(--st-espacement-3) 100% no-repeat scroll;box-shadow:inset 0 calc(-1 * var(--st-epaisseur-capillaire)) 0 0 var(--st-couleur-bordure)}:host([data-orientation=verticale]) .st-tabs__liste{flex-direction:column;gap:0;align-items:stretch;overflow:visible;scroll-snap-type:none;background:none;border-inline-end:var(--st-epaisseur-capillaire) solid var(--st-couleur-bordure);box-shadow:none}.st-tabs__panneaux{flex:1 1 auto;min-inline-size:0}.st-tabs__onglet:focus-visible{outline:var(--st-focus-epaisseur) solid var(--st-couleur-anneau-focus);outline-offset:calc(-1 * var(--st-focus-epaisseur))}.st-tabs__onglet{font-size:var(--st-taille-sm);line-height:var(--st-interligne-sm);font-weight:var(--st-graisse-moyenne);letter-spacing:var(--st-interlettrage-normal);position:relative;display:flex;flex:none;gap:var(--st-espacement-1);align-items:center;block-size:var(--st-hauteur-commande-defaut);min-inline-size:var(--st-cible-tactile-min);padding-block:0;padding-inline:var(--st-espacement-4);font-family:inherit;color:var(--st-couleur-texte-discret);white-space:nowrap;cursor:pointer;background-color:transparent;border:0;border-radius:0;scroll-snap-align:start;transition:color var(--st-duree-rapide) var(--st-courbe-standard),background-color var(--st-duree-rapide) var(--st-courbe-standard)}:host([data-orientation=verticale]) .st-tabs__onglet{gap:var(--st-espacement-2);text-align:start}.st-tabs__complement{margin-inline-start:auto;padding-inline-start:var(--st-espacement-2);font-size:var(--st-taille-2xs);line-height:var(--st-interligne-2xs);font-weight:var(--st-graisse-semi);font-variant-numeric:var(--st-chiffres-alignes);letter-spacing:var(--st-interlettrage-capitales);color:var(--st-couleur-texte-attenue)}.st-tabs__compte{margin-inline-start:var(--st-espacement-1-5);padding-block:var(--st-espacement-demi);padding-inline:var(--st-espacement-2);font-size:var(--st-taille-2xs);line-height:var(--st-interligne-2xs);font-weight:var(--st-graisse-semi);font-variant-numeric:var(--st-chiffres-alignes);letter-spacing:var(--st-interlettrage-capitales);color:var(--st-couleur-texte-discret);background-color:var(--st-couleur-surface-enfoncee);border-radius:var(--st-rayon-pleine)}.st-tabs__marqueur{position:absolute;inset-inline:0;inset-block-end:calc(-1 * var(--st-epaisseur-capillaire));block-size:var(--st-epaisseur-forte);background-color:var(--st-couleur-bordure-selection);forced-color-adjust:none;-webkit-print-color-adjust:exact;print-color-adjust:exact}:host([data-orientation=verticale]) .st-tabs__marqueur{inset-block:0;inset-inline:auto calc(-1 * var(--st-epaisseur-capillaire));inline-size:var(--st-epaisseur-forte);block-size:auto}.st-tabs__onglet:active:not([aria-disabled=true]){color:var(--st-couleur-texte);background-color:var(--st-couleur-surface-active);border-start-start-radius:var(--st-rayon-sm);border-start-end-radius:var(--st-rayon-sm)}@media(hover:hover){.st-tabs__onglet:hover:not([aria-selected=true],[aria-disabled=true],:active){color:var(--st-couleur-texte);background-color:color-mix(in srgb,var(--st-couleur-surface-conteneur-bas) 70%,transparent);border-start-start-radius:var(--st-rayon-sm);border-start-end-radius:var(--st-rayon-sm)}}.st-tabs__onglet[aria-selected=true]{font-weight:var(--st-graisse-semi);color:var(--st-couleur-texte-primaire);background-color:var(--st-couleur-surface-conteneur-bas);border-start-start-radius:var(--st-rayon-sm);border-start-end-radius:var(--st-rayon-sm)}:host([data-orientation=verticale]) .st-tabs__onglet{border-radius:0}.st-tabs__onglet[aria-disabled=true]{color:var(--st-couleur-texte-desactive);cursor:not-allowed}@media(forced-colors:active){:host(:not([data-orientation=verticale])) .st-tabs__liste{border-block-end:var(--st-epaisseur-capillaire) solid var(--st-couleur-bordure)}}@media print{.st-tabs__liste{flex-wrap:wrap;overflow:visible;background:none;border-block-end:var(--st-epaisseur-capillaire) solid var(--st-couleur-bordure);box-shadow:none}:host([data-orientation=verticale]) .st-tabs__liste{border-block-end:0}}\n"],
+		dependencies: [
+			{
+				kind: "directive",
+				type: TabList,
+				selector: "[ngTabList]",
+				inputs: [
+					"orientation",
+					"wrap",
+					"softDisabled",
+					"focusMode",
+					"selectionMode",
+					"selectedTab",
+					"disabled"
+				],
+				outputs: ["selectedTabChange"],
+				exportAs: ["ngTabList"]
+			},
+			{
+				kind: "directive",
+				type: Tab,
+				selector: "[ngTab]",
+				inputs: [
+					"id",
+					"disabled",
+					"value"
+				],
+				exportAs: ["ngTab"]
+			},
+			{
+				kind: "component",
+				type: StIcon,
+				selector: "st-icon",
+				inputs: [
+					"icone",
+					"nom",
+					"variante",
+					"sprite",
+					"nomMetier",
+					"taille",
+					"ton",
+					"etiquette",
+					"miroir"
+				]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: StTabs,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "st-tabs",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				TabList,
+				Tab,
+				StIcon
+			],
+			hostDirectives: [Tabs],
+			host: {
+				class: "st-tabs",
+				"[attr.data-orientation]": "orientation()"
+			},
+			template: "<div\n  class=\"st-tabs__liste\"\n  ngTabList\n  [attr.aria-label]=\"etiquette()\"\n  [selectionMode]=\"modeAria()\"\n  [orientation]=\"orientationAria()\"\n  [selectedTab]=\"selectionEffective()\"\n  (selectedTabChange)=\"selection.set($event)\"\n>\n  @for (onglet of onglets(); track onglet.valeur) {\n    <button\n      class=\"st-tabs__onglet\"\n      type=\"button\"\n      ngTab\n      [id]=\"idDOnglet(onglet.valeur)\"\n      [value]=\"onglet.valeur\"\n      [disabled]=\"onglet.desactive === true\"\n    >\n      @if (onglet.icone; as icone) {\n        <st-icon [icone]=\"icone\" taille=\"18\" />\n      }\n      <span class=\"st-tabs__libelle\">{{ onglet.libelle }}</span>\n      <!-- Compte et complement entrent dans le NOM par un texte lecteur-seul (« Operations, 42 ») ;\n           ce que l'on voit est muet : lu tel quel, « Operations42 » colle au libelle. -->\n      @if (onglet.compte !== undefined) {\n        <span class=\"st-vh\">, {{ compteDe(onglet.compte) }}</span>\n        <span class=\"st-tabs__compte\" aria-hidden=\"true\">{{ compteDe(onglet.compte) }}</span>\n      }\n      @if (onglet.complement) {\n        <span class=\"st-vh\">, {{ onglet.complement }}</span>\n        <span class=\"st-tabs__complement\" aria-hidden=\"true\">{{ onglet.complement }}</span>\n      }\n      @if (onglet.valeur === selectionEffective()) {\n        <span class=\"st-tabs__marqueur\" aria-hidden=\"true\"></span>\n      }\n    </button>\n  }\n</div>\n\n<div class=\"st-tabs__panneaux\">\n  <ng-content />\n</div>\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}:host([data-orientation=verticale]){display:flex;gap:var(--st-espacement-4)}.st-tabs__liste{display:flex;gap:var(--st-espacement-4);align-items:center;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:var(--st-espacement-4);scrollbar-width:thin;background:linear-gradient(to right,var(--st-couleur-surface) 30%,transparent) left center/var(--st-espacement-10) 100% no-repeat local,linear-gradient(to left,var(--st-couleur-surface) 30%,transparent) right center/var(--st-espacement-10) 100% no-repeat local,radial-gradient(farthest-side at 0 50%,var(--st-couleur-ombre),transparent) left center/var(--st-espacement-3) 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,var(--st-couleur-ombre),transparent) right center/var(--st-espacement-3) 100% no-repeat scroll;box-shadow:inset 0 calc(-1 * var(--st-epaisseur-capillaire)) 0 0 var(--st-couleur-bordure)}:host([data-orientation=verticale]) .st-tabs__liste{flex-direction:column;gap:0;align-items:stretch;overflow:visible;scroll-snap-type:none;background:none;border-inline-end:var(--st-epaisseur-capillaire) solid var(--st-couleur-bordure);box-shadow:none}.st-tabs__panneaux{flex:1 1 auto;min-inline-size:0}.st-tabs__onglet:focus-visible{outline:var(--st-focus-epaisseur) solid var(--st-couleur-anneau-focus);outline-offset:calc(-1 * var(--st-focus-epaisseur))}.st-tabs__onglet{font-size:var(--st-taille-sm);line-height:var(--st-interligne-sm);font-weight:var(--st-graisse-moyenne);letter-spacing:var(--st-interlettrage-normal);position:relative;display:flex;flex:none;gap:var(--st-espacement-1);align-items:center;block-size:var(--st-hauteur-commande-defaut);min-inline-size:var(--st-cible-tactile-min);padding-block:0;padding-inline:var(--st-espacement-4);font-family:inherit;color:var(--st-couleur-texte-discret);white-space:nowrap;cursor:pointer;background-color:transparent;border:0;border-radius:0;scroll-snap-align:start;transition:color var(--st-duree-rapide) var(--st-courbe-standard),background-color var(--st-duree-rapide) var(--st-courbe-standard)}:host([data-orientation=verticale]) .st-tabs__onglet{gap:var(--st-espacement-2);text-align:start}.st-tabs__complement{margin-inline-start:auto;padding-inline-start:var(--st-espacement-2);font-size:var(--st-taille-2xs);line-height:var(--st-interligne-2xs);font-weight:var(--st-graisse-semi);font-variant-numeric:var(--st-chiffres-alignes);letter-spacing:var(--st-interlettrage-capitales);color:var(--st-couleur-texte-attenue)}.st-tabs__compte{margin-inline-start:var(--st-espacement-1-5);padding-block:var(--st-espacement-demi);padding-inline:var(--st-espacement-2);font-size:var(--st-taille-2xs);line-height:var(--st-interligne-2xs);font-weight:var(--st-graisse-semi);font-variant-numeric:var(--st-chiffres-alignes);letter-spacing:var(--st-interlettrage-capitales);color:var(--st-couleur-texte-discret);background-color:var(--st-couleur-surface-enfoncee);border-radius:var(--st-rayon-pleine)}.st-tabs__marqueur{position:absolute;inset-inline:0;inset-block-end:calc(-1 * var(--st-epaisseur-capillaire));block-size:var(--st-epaisseur-forte);background-color:var(--st-couleur-bordure-selection);forced-color-adjust:none;-webkit-print-color-adjust:exact;print-color-adjust:exact}:host([data-orientation=verticale]) .st-tabs__marqueur{inset-block:0;inset-inline:auto calc(-1 * var(--st-epaisseur-capillaire));inline-size:var(--st-epaisseur-forte);block-size:auto}.st-tabs__onglet:active:not([aria-disabled=true]){color:var(--st-couleur-texte);background-color:var(--st-couleur-surface-active);border-start-start-radius:var(--st-rayon-sm);border-start-end-radius:var(--st-rayon-sm)}@media(hover:hover){.st-tabs__onglet:hover:not([aria-selected=true],[aria-disabled=true],:active){color:var(--st-couleur-texte);background-color:color-mix(in srgb,var(--st-couleur-surface-conteneur-bas) 70%,transparent);border-start-start-radius:var(--st-rayon-sm);border-start-end-radius:var(--st-rayon-sm)}}.st-tabs__onglet[aria-selected=true]{font-weight:var(--st-graisse-semi);color:var(--st-couleur-texte-primaire);background-color:var(--st-couleur-surface-conteneur-bas);border-start-start-radius:var(--st-rayon-sm);border-start-end-radius:var(--st-rayon-sm)}:host([data-orientation=verticale]) .st-tabs__onglet{border-radius:0}.st-tabs__onglet[aria-disabled=true]{color:var(--st-couleur-texte-desactive);cursor:not-allowed}@media(forced-colors:active){:host(:not([data-orientation=verticale])) .st-tabs__liste{border-block-end:var(--st-epaisseur-capillaire) solid var(--st-couleur-bordure)}}@media print{.st-tabs__liste{flex-wrap:wrap;overflow:visible;background:none;border-block-end:var(--st-epaisseur-capillaire) solid var(--st-couleur-bordure);box-shadow:none}:host([data-orientation=verticale]) .st-tabs__liste{border-block-end:0}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		onglets: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "onglets",
+				required: true
+			}]
+		}],
+		etiquette: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "etiquette",
+				required: true
+			}]
+		}],
+		activation: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "activation",
+				required: false
+			}]
+		}],
+		orientation: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "orientation",
+				required: false
+			}]
+		}],
+		identifiant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "identifiant",
+				required: false
+			}]
+		}],
+		selection: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selection",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["selectionChange"]
+		}]
+	}
+});
+var StTabPanel = class StTabPanel {
+	contenuConserve = input(false, {
+		...ngDevMode ? { debugName: "contenuConserve" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	onglets = inject(StTabs, { optional: true });
+	constructor() {
+		relayerLaConservation(this.contenuConserve);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: StTabPanel,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: StTabPanel,
+		isStandalone: true,
+		selector: "st-tab-panel",
+		inputs: { contenuConserve: {
+			classPropertyName: "contenuConserve",
+			publicName: "contenuConserve",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			properties: { "attr.data-orientation": "onglets?.orientation() ?? null" },
+			classAttribute: "st-tab-panel"
+		},
+		hostDirectives: [{
+			directive: i1.TabPanel,
+			inputs: ["value", "valeur"]
+		}],
+		ngImport: i0,
+		template: "<ng-content />\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: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)}:host{display:block;padding-block:var(--st-espacement-4)}:host([data-orientation=verticale]){padding-block:0}:host([inert]){display:none}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: StTabPanel,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "st-tab-panel",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			hostDirectives: [{
+				directive: TabPanel,
+				inputs: ["value: valeur"]
+			}],
+			host: {
+				class: "st-tab-panel",
+				"[attr.data-orientation]": "onglets?.orientation() ?? null"
+			},
+			template: "<ng-content />\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: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)}:host{display:block;padding-block:var(--st-espacement-4)}:host([data-orientation=verticale]){padding-block:0}:host([inert]){display:none}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: { contenuConserve: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "contenuConserve",
+			required: false
+		}]
+	}] }
+});
+function relayerLaConservation(conserve) {
+	const primitive = inject(i1["ɵɵDeferredContentAware"]);
+	effect(() => {
+		primitive.preserveContent.set(conserve());
+	});
+}
+var StTabContent = class StTabContent {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: StTabContent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		type: StTabContent,
+		isStandalone: true,
+		selector: "ng-template[stTabContent]",
+		hostDirectives: [{ directive: i1.TabContent }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: StTabContent,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "ng-template[stTabContent]",
+			hostDirectives: [TabContent]
+		}]
+	}]
+});
+export { StTabContent, StTabPanel, StTabs };
+
+//# sourceMappingURL=starterlib-ui-onglets.mjs.map

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

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