feat(style-bootstrap): slider style refactor + style-bootstrap package (

#218)

.gitignore

@@ -8,3 +8,4 @@ test-results/
 dist.tar.gz
 .nyc_output/
 .idea
+style-bootstrap/css/

.prettierignore

@@ -7,3 +7,4 @@ playwright-report/
 test-results/
 .svelte-kit/
 *-snapshots/
+style-bootstrap/css/

angular/angular.json

@@ -23,7 +23,7 @@
 						"polyfills": "demo/src/polyfills.ts",
 						"tsConfig": "demo/tsconfig.app.json",
 						"assets": ["demo/src/agnosui-logo.svg", "demo/src/assets"],
-						"styles": ["demo/src/styles.css", "../common/demo.scss"],
+						"styles": ["demo/src/styles.css", "../common/demo.scss", "@agnos-ui/style-bootstrap/scss/agnosui.scss"],
 						"scripts": [],
 						"inlineStyleLanguage": "scss",
 						"extraWebpackConfig": "./demo/webpack.js"

angular/lib/ng-package.json

@@ -1,7 +1,7 @@
 {
 	"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
 	"dest": "../dist/lib",
-	"allowedNonPeerDependencies": ["@agnos-ui/angular-headless", "@amadeus-it-group/tansu"],
+	"allowedNonPeerDependencies": ["@agnos-ui/angular-headless", "@amadeus-it-group/tansu", "@agnos-ui/style-bootstrap"],
 	"lib": {
 		"entryFile": "src/public-api.ts"
 	}

angular/lib/package.json

@@ -7,6 +7,7 @@
 	},
 	"dependencies": {
 		"@agnos-ui/angular-headless": "",
+		"@agnos-ui/style-bootstrap": "",
 		"@amadeus-it-group/tansu": "0.0.23",
 		"tslib": "^2.6.2"
 	},

angular/lib/src/lib/slider/slider.component.ts

@@ -24,14 +24,14 @@ import {take} from 'rxjs';
 	host: {
 		class: 'au-slider',
 		'[class]': 'state().vertical ? "au-slider-vertical" : "au-slider-horizontal"',
+		'[class.disabled]': 'state().disabled',
 		'(blur)': 'handleBlur()',
 	},
 	template: `
-		<div [class]="state().vertical ? 'au-clickable-slider-area-vertical' : 'au-clickable-slider-area'" (click)="sliderClick($event)"></div>
+		<div [class]="state().vertical ? 'au-slider-clickable-area-vertical' : 'au-slider-clickable-area'" (click)="sliderClick($event)"></div>
 		<div
 			*ngFor="let option of state().progressDisplayOptions"
 			class="au-slider-progress"
-			[attr.disabled]="state().disabled ? true : null"
 			[style.left.%]="option.left"
 			[style.bottom.%]="option.bottom"
 			[style.width.%]="option.width"
@@ -40,15 +40,13 @@ import {take} from 'rxjs';
 		<div
 			[class]="state().vertical ? 'au-slider-label-vertical au-slider-label-vertical-min' : 'au-slider-label au-slider-label-min'"
 			[style.visibility]="state().minValueLabelDisplay"
-			[attr.disabled]="state().disabled ? true : null"
 			[auUse]="widget.directives.minLabelDirective"
 		>
 			{{ state().min }}
 		</div>
 		<div
 			[class]="state().vertical ? 'au-slider-label-vertical au-slider-label-vertical-max' : 'au-slider-label au-slider-label-max'"
 			[style.visibility]="state().maxValueLabelDisplay"
-			[attr.disabled]="state().disabled ? true : null"
 			[auUse]="widget.directives.maxLabelDirective"
 		>
 			{{ state().max }}
@@ -58,7 +56,6 @@ import {take} from 'rxjs';
 			[style.visibility]="state().combinedLabelDisplay"
 			[style.left.%]="state().combinedLabelPositionLeft"
 			[style.top.%]="state().combinedLabelPositionTop"
-			[attr.disabled]="state().disabled ? true : null"
 		>
 			{{ state().sortedValues[0] }} - {{ state().sortedValues[1] }}
 		</div>
@@ -86,13 +83,11 @@ import {take} from 'rxjs';
 				[style.left.%]="state().handleDisplayOptions[i].left"
 				[style.top.%]="state().handleDisplayOptions[i].top"
 				[style.visibility]="state().combinedLabelDisplay === 'visible' ? 'hidden' : 'visible'"
-				[attr.disabled]="state().disabled ? true : null"
 			>
 				{{ state().values[i] }}
 			</div>
 		</ng-template>
 	`,
-	styles: ["@import '@agnos-ui/common/lib/slider.scss';"],
 })
 export class SliderComponent implements OnChanges {
 	private _zone = inject(NgZone);

demo/src/lib/stackblitz/angular/angular.json

@@ -24,7 +24,7 @@
 						"outputPath": "dist/demo",
 						"scripts": [],
 						"inlineStyleLanguage": "scss",
-						"styles": [],
+						"styles": ["@agnos-ui/style-bootstrap/css/agnosui.css"],
 						"tsConfig": "tsconfig.json"
 					}
 				},

demo/src/lib/stackblitz/index.ts

@@ -31,15 +31,17 @@ const frameworkCreateStackblitz: Record<Frameworks, StackblitzProcessor[]> = {
 	react: [
 		addAsyncFiles(import.meta.glob('./react/**', {as: 'raw', import: 'default'}) as any, '', './react/'),
 		async (project, sample) => {
-			project.files['src/main.tsx'] = `import {createRoot} from "react-dom/client";\nimport App from ${JSON.stringify(
+			project.files[
+				'src/main.tsx'
+			] = `import {createRoot} from "react-dom/client";\nimport "@agnos-ui/style-bootstrap/css/agnosui.css";\nimport App from ${JSON.stringify(
 				`./${sample.files.react.entryPoint.replace(/\.tsx?$/, '')}`
 			)};\nconst rootElement = document.getElementById('root');\nconst root = createRoot(rootElement);\nroot.render(<App />)`;
 		},
 	],
 	svelte: [
 		addAsyncFiles(import.meta.glob('./svelte/**', {as: 'raw', import: 'default'}) as any, '', './svelte/'),
 		async (project, sample) => {
-			project.files['src/main.ts'] = `import App from ${JSON.stringify(
+			project.files['src/main.ts'] = `import "@agnos-ui/style-bootstrap/css/agnosui.css";\nimport App from ${JSON.stringify(
 				`./${sample.files.svelte.entryPoint}`
 			)};\nconst app = new App({target: document.getElementById('root')});\nexport default app;`;
 			project.template = 'node';
@@ -65,7 +67,7 @@ if (isReleased) {
 			if (file.startsWith('packages/') && file.endsWith('/package.json')) {
 				const pkg = JSON.parse(files[file]);
 				packageJson.devDependencies[pkg.name] = `file:./packages/${pkg.name}`;
-				for (const key of Object.keys(pkg.dependencies)) {
+				for (const key of Object.keys(pkg.dependencies ?? {})) {
 					if (!files[`packages/${key}/package.json`]) {
 						packageJson.devDependencies[key] = pkg.dependencies[key];
 					}
@@ -83,8 +85,17 @@ if (isReleased) {
 		'packages/@agnos-ui/core/',
 		'../../../../core/dist/lib/'
 	);
+	const stylePackage = addAsyncFiles(
+		import.meta.glob(['../../../../style-bootstrap/**', '!**/*.map', '!**/*.scss'], {
+			as: 'raw',
+			import: 'default',
+		}) as any,
+		'packages/@agnos-ui/style-bootstrap/',
+		'../../../../style-bootstrap/'
+	);
 	frameworkCreateStackblitz.angular.push(
 		corePackage,
+		stylePackage,
 		addAsyncFiles(
 			import.meta.glob(['../../../../angular/dist/headless/**', '!**/*.map'], {
 				as: 'raw',
@@ -105,6 +116,7 @@ if (isReleased) {
 	);
 	frameworkCreateStackblitz.react.push(
 		corePackage,
+		stylePackage,
 		addAsyncFiles(
 			import.meta.glob(['../../../../react/dist/headless/**', '!**/*.map'], {
 				as: 'raw',
@@ -125,6 +137,7 @@ if (isReleased) {
 	);
 	frameworkCreateStackblitz.svelte.push(
 		corePackage,
+		stylePackage,
 		addAsyncFiles(
 			import.meta.glob(['../../../../svelte/dist/headless/**', '!**/*.map'], {
 				as: 'raw',

e2e/samplesMarkup.e2e-spec.ts-snapshots/slider-default.html

@@ -9,7 +9,7 @@ <h2>
 				"Slider with form control"
 			</h2>
 			<div
-			 class="au-clickable-slider-area"
+			 class="au-slider-clickable-area"
 			/>
 			<div
 			 class="au-slider-progress"
@@ -54,7 +54,7 @@ <h2>
 				"Slider with value"
 			</h2>
 			<div
-			 class="au-clickable-slider-area"
+			 class="au-slider-clickable-area"
 			/>
 			<div
 			 class="au-slider-progress"
@@ -99,30 +99,26 @@ <h2>
 				"Disabled slider"
 			</h2>
 			<div
-			 class="au-clickable-slider-area"
+			 class="au-slider-clickable-area"
 			/>
 			<div
 			 class="au-slider-progress"
-			 disabled="true"
 			 style="left: 0%; bottom: 0%; width: 60%; height: 100%;"
 			/>
 			<div
 			 class="au-slider-label au-slider-label-min"
-			 disabled="true"
 			 style="visibility: visible;"
 			>
 				"0"
 			</div>
 			<div
 			 class="au-slider-label au-slider-label-max"
-			 disabled="true"
 			 style="visibility: visible;"
 			>
 				"100"
 			</div>
 			<div
 			 class="au-slider-label au-slider-label-now"
-			 disabled="true"
 			 style="visibility: hidden; left: 0%; top: 0%;"
 			>
 				"60 -"
@@ -141,7 +137,6 @@ <h2>
 			/>
 			<div
 			 class="au-slider-label au-slider-label-now"
-			 disabled="true"
 			 style="left: 60%; top: 0%; visibility: visible;"
 			>
 				"60"

e2e/samplesMarkup.e2e-spec.ts-snapshots/slider-playground.html

@@ -6,7 +6,7 @@
 		 class="container p-3"
 		>
 			<div
-			 class="au-clickable-slider-area"
+			 class="au-slider-clickable-area"
 			/>
 			<div
 			 class="au-slider-progress"

e2e/samplesMarkup.e2e-spec.ts-snapshots/slider-range.html

@@ -9,7 +9,7 @@ <h2>
 				"Slider with form control"
 			</h2>
 			<div
-			 class="au-clickable-slider-area"
+			 class="au-slider-clickable-area"
 			/>
 			<div
 			 class="au-slider-progress"
@@ -126,7 +126,7 @@ <h2>
 				"Slider with values"
 			</h2>
 			<div
-			 class="au-clickable-slider-area"
+			 class="au-slider-clickable-area"
 			/>
 			<div
 			 class="au-slider-progress"

e2e/samplesMarkup.e2e-spec.ts-snapshots/slider-vertical.html

@@ -17,7 +17,7 @@ <h2>
 				 style="height: 300px;"
 				>
 					<div
-					 class="au-clickable-slider-area-vertical"
+					 class="au-slider-clickable-area-vertical"
 					/>
 					<div
 					 class="au-slider-progress"
@@ -78,7 +78,7 @@ <h2>
 				 style="height: 300px;"
 				>
 					<div
-					 class="au-clickable-slider-area-vertical"
+					 class="au-slider-clickable-area-vertical"
 					/>
 					<div
 					 class="au-slider-progress"