diff --git a/assets/ng-doc/indexes.json b/assets/ng-doc/indexes.json
index 79291a7..785054e 100644
--- a/assets/ng-doc/indexes.json
+++ b/assets/ng-doc/indexes.json
@@ -1 +1 @@
-[{"breadcrumbs":["Components","Button"],"pageType":"guide","title":"Button","section":"","route":"components/button","content":"A button is an interface element that allows the user to perform a specific action when clicked."},{"breadcrumbs":["Components","Icon Material"],"pageType":"guide","title":"Icon Material","section":"","route":"components/icon-material","content":"Simple component to display an icon from material-symbols-outlined font."},{"breadcrumbs":["Components","Icon Material"],"pageType":"guide","title":"Icon Material","section":"","route":"components/icon-material","content":"Refer to the material-symbols-outlined font for the list of available icons.https://fonts.google.com/icons"},{"breadcrumbs":["Components","Icon Material"],"pageType":"guide","title":"Icon Material","section":"Pre requirements","route":"components/icon-material","fragment":"pre-requirements","content":"In order to use this component in your application, you must follow these steps:"},{"breadcrumbs":["Components","Icon Material"],"pageType":"guide","title":"Icon Material","section":"Adding Google font","route":"components/icon-material","fragment":"adding-google-font","content":"Insert the following script in your index.html or angular.json file."},{"breadcrumbs":["Components","Icon Material"],"pageType":"guide","title":"Icon Material","section":"Adding Font variation","route":"components/icon-material","fragment":"adding-font-variation","content":"Simply add this selector to your style.scss file. Adapt this settings to match desired styling. Check https://fonts.google.com/icons options for more information."},{"breadcrumbs":["Components","Icon Material"],"pageType":"guide","title":"Icon Material","section":"That's it 🎉","route":"components/icon-material","fragment":"thats-it-","content":"You can now start importing this component in your application !"},{"breadcrumbs":["Versions","Changelog"],"pageType":"guide","title":"Changelog","section":"Architecture","route":"versions/changelog","fragment":"architecture","content":" Generate angular app & link to github repository Set eslint/prettier configuration & workspace plugins Add deployment CI on github pages (available here) Configure tailwind (w/ custom colors & typography)"},{"breadcrumbs":["Versions","Changelog"],"pageType":"guide","title":"Changelog","section":"UI","route":"versions/changelog","fragment":"ui","content":" Adding Application layout (header, router, footer) Adding initial HomePage"},{"breadcrumbs":["Versions","Changelog"],"pageType":"guide","title":"Changelog","section":"Components","route":"versions/changelog","fragment":"components","content":" Icon component to render custom icon Icon Material component to display google icons Message component to display information with severity (info, warn, error ..) Notification center (display notification in the root component)"},{"breadcrumbs":["Versions","Changelog"],"pageType":"guide","title":"Changelog","section":"Core","route":"versions/changelog","fragment":"core","content":" LocalStorageService NotificationService"},{"breadcrumbs":["Versions","Changelog"],"pageType":"guide","title":"Changelog","section":"Core","route":"versions/changelog","fragment":"core","content":"Still in progress !"},{"breadcrumbs":["Components","Icon"],"pageType":"guide","title":"Icon","section":"","route":"components/icon","content":"Simple component to display an icon as SVG tag from an svg file located in your assets/icons folder."},{"breadcrumbs":["Components","Icon"],"pageType":"guide","title":"Icon","section":"Pre requirements","route":"components/icon","fragment":"pre-requirements","content":"In order to use this component in your application, you must follow these steps:"},{"breadcrumbs":["Components","Icon"],"pageType":"guide","title":"Icon","section":"Create assets/icons folder","route":"components/icon","fragment":"create-assetsicons-folder","content":"In this folder, you can add all SVG required for your UI. You can also creates sub-folders but be aware, you'll need to format name as folderName/fileName."},{"breadcrumbs":["Components","Icon"],"pageType":"guide","title":"Icon","section":"Create assets/icons folder","route":"components/icon","fragment":"create-assetsicons-folder","content":"Note: With this component, you can control the fill of the SVG by adding some color of the component (works by inheritance)."},{"breadcrumbs":["Components","Icon"],"pageType":"guide","title":"Icon","section":"Import FileService","route":"components/icon","fragment":"import-fileservice","content":"This service helps working with files in general but this component requires getSVG() method. Simply copy paste this service or get isolated method."},{"breadcrumbs":["Components","Icon"],"pageType":"guide","title":"Icon","section":"That's it 🎉","route":"components/icon","fragment":"thats-it-","content":"You can now start importing this component in your application !"},{"breadcrumbs":["Components","Icon"],"pageType":"guide","title":"Icon","section":"That's it 🎉","route":"components/icon","fragment":"thats-it-","content":"Ensure that the SVG files in the assets/icons folder are properly named and formatted.The name input should match the file name of the SVG without the .svg extension."},{"breadcrumbs":["Components","Icon"],"pageType":"guide","title":"Icon","section":"That's it 🎉","route":"components/icon","fragment":"thats-it-","content":"By following these guidelines, you can effectively use the lib-icon component in your Angular application."},{"breadcrumbs":["Versions","Todo"],"pageType":"guide","title":"Todo","section":"Current development ⏰","route":"versions/todo","fragment":"current-development-","content":"Tasks on development scope (more tasks can be found in this repository using TODO Tree -vscode extensions)"},{"breadcrumbs":["Versions","Todo"],"pageType":"guide","title":"Todo","section":"modules","route":"versions/todo","fragment":"modules","content":" Platform Dialog Http request"},{"breadcrumbs":["Versions","Todo"],"pageType":"guide","title":"Todo","section":"directives","route":"versions/todo","fragment":"directives","content":" Match Media File value accessor"},{"breadcrumbs":["Versions","Todo"],"pageType":"guide","title":"Todo","section":"guards","route":"versions/todo","fragment":"guards","content":" Can deactivate"},{"breadcrumbs":["Versions","Todo"],"pageType":"guide","title":"Todo","section":"functions","route":"versions/todo","fragment":"functions","content":" Capitalize Clean dash-to-camel-case"},{"breadcrumbs":["Versions","Todo"],"pageType":"guide","title":"Todo","section":"Pipes","route":"versions/todo","fragment":"pipes","content":" Trust Html Trust URL Since"},{"breadcrumbs":["Versions","Todo"],"pageType":"guide","title":"Todo","section":"UI","route":"versions/todo","fragment":"ui","content":" NotFoundPage ComponentsPage ServicesPage ModulesPage"},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Angular Web User Interface 🎨","route":"get-started","fragment":"angular-web-user-interface-","content":"Angular library of components, services & patterns easing development of user interfaces. This is not a framework, nor a cdk, nut simply a collection of components following best practices in angular web development."},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Angular Web User Interface 🎨","route":"get-started","fragment":"angular-web-user-interface-","content":"This repository was created as a model for creating actual application. Feel free to use take any components you want 🙌"},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Built with 🏗️","route":"get-started","fragment":"built-with-️","content":"Dependency"},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Built with 🏗️","route":"get-started","fragment":"built-with-️","content":"version"},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Built with 🏗️","route":"get-started","fragment":"built-with-️","content":"@angular/core"},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Built with 🏗️","route":"get-started","fragment":"built-with-️","content":"^18.2.0"},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Built with 🏗️","route":"get-started","fragment":"built-with-️","content":"eslint"},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Built with 🏗️","route":"get-started","fragment":"built-with-️","content":"8.57.0"},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Built with 🏗️","route":"get-started","fragment":"built-with-️","content":"jest"},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Built with 🏗️","route":"get-started","fragment":"built-with-️","content":"^29.7.0"},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Built with 🏗️","route":"get-started","fragment":"built-with-️","content":"rxjs"},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Built with 🏗️","route":"get-started","fragment":"built-with-️","content":"~7.8.0"},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Built with 🏗️","route":"get-started","fragment":"built-with-️","content":"tailwind"},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Built with 🏗️","route":"get-started","fragment":"built-with-️","content":"^3.4.13"},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Built with 🏗️","route":"get-started","fragment":"built-with-️","content":"typescript"},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Built with 🏗️","route":"get-started","fragment":"built-with-️","content":"~5.5.2"},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Built with 🏗️","route":"get-started","fragment":"built-with-️","content":"More dependencies can be found inside package.json."},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Get Started 🚀","route":"get-started","fragment":"get-started-","content":"This project contains multiple scripts. Remember to first run npm i in order to load required dependencies. Then you can run any of the scripts below:"},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Get Started 🚀","route":"get-started","fragment":"get-started-","content":"Script"},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Get Started 🚀","route":"get-started","fragment":"get-started-","content":"Description"},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Get Started 🚀","route":"get-started","fragment":"get-started-","content":"npm run start"},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Get Started 🚀","route":"get-started","fragment":"get-started-","content":"Serves application locally to "},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Get Started 🚀","route":"get-started","fragment":"get-started-","content":"https://localhost:4200"},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Get Started 🚀","route":"get-started","fragment":"get-started-","content":"npm run build"},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Get Started 🚀","route":"get-started","fragment":"get-started-","content":"Builds application in production mode to "},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Get Started 🚀","route":"get-started","fragment":"get-started-","content":"dist/ngx-lib/browser"},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Get Started 🚀","route":"get-started","fragment":"get-started-","content":"npm run watch"},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Get Started 🚀","route":"get-started","fragment":"get-started-","content":"Builds application in development mode and watch for file change"},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Get Started 🚀","route":"get-started","fragment":"get-started-","content":"npm run test"},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Get Started 🚀","route":"get-started","fragment":"get-started-","content":"Launch unit tests with Jest runner"},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Get Started 🚀","route":"get-started","fragment":"get-started-","content":"npm run test:watch"},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Get Started 🚀","route":"get-started","fragment":"get-started-","content":"Launch unit tests and watch for files change"},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Get Started 🚀","route":"get-started","fragment":"get-started-","content":"npm run lint"},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Get Started 🚀","route":"get-started","fragment":"get-started-","content":"Lint repository with eslint & prettier."},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Versions 🔖","route":"get-started","fragment":"versions-","content":"A complete changelog can be found in dedicated markdown. Which resume current progress. You can also found what is in the current development inside TODO markdown."}]
\ No newline at end of file
+[{"breadcrumbs":["Components","Button"],"pageType":"guide","title":"Button","section":"","route":"components/button","content":"A button is an interface element that allows the user to perform a specific action when clicked."},{"breadcrumbs":["Components","Message"],"pageType":"guide","title":"Message","section":"","route":"components/message","content":"Simple component to display inline container with colored messages depending on given severity."},{"breadcrumbs":["Versions","Changelog"],"pageType":"guide","title":"Changelog","section":"Architecture","route":"versions/changelog","fragment":"architecture","content":" Generate angular app & link to github repository Set eslint/prettier configuration & workspace plugins Add deployment CI on github pages (available here) Configure tailwind (w/ custom colors & typography)"},{"breadcrumbs":["Versions","Changelog"],"pageType":"guide","title":"Changelog","section":"UI","route":"versions/changelog","fragment":"ui","content":" Adding Application layout (header, router, footer) Adding initial HomePage"},{"breadcrumbs":["Versions","Changelog"],"pageType":"guide","title":"Changelog","section":"Components","route":"versions/changelog","fragment":"components","content":" Icon component to render custom icon Icon Material component to display google icons Message component to display information with severity (info, warn, error ..) Notification center (display notification in the root component)"},{"breadcrumbs":["Versions","Changelog"],"pageType":"guide","title":"Changelog","section":"Core","route":"versions/changelog","fragment":"core","content":" LocalStorageService NotificationService"},{"breadcrumbs":["Versions","Changelog"],"pageType":"guide","title":"Changelog","section":"Core","route":"versions/changelog","fragment":"core","content":"Still in progress !"},{"breadcrumbs":["Components","Icon Material"],"pageType":"guide","title":"Icon Material","section":"","route":"components/icon-material","content":"Simple component to display an icon from material-symbols-outlined font."},{"breadcrumbs":["Components","Icon Material"],"pageType":"guide","title":"Icon Material","section":"","route":"components/icon-material","content":"Refer to the material-symbols-outlined font for the list of available icons.https://fonts.google.com/icons"},{"breadcrumbs":["Components","Icon Material"],"pageType":"guide","title":"Icon Material","section":"Pre requirements","route":"components/icon-material","fragment":"pre-requirements","content":"In order to use this component in your application, you must follow these steps:"},{"breadcrumbs":["Components","Icon Material"],"pageType":"guide","title":"Icon Material","section":"Adding Google font","route":"components/icon-material","fragment":"adding-google-font","content":"Insert the following script in your index.html or angular.json file."},{"breadcrumbs":["Components","Icon Material"],"pageType":"guide","title":"Icon Material","section":"Adding Font variation","route":"components/icon-material","fragment":"adding-font-variation","content":"Simply add this selector to your style.scss file. Adapt this settings to match desired styling. Check https://fonts.google.com/icons options for more information."},{"breadcrumbs":["Components","Icon Material"],"pageType":"guide","title":"Icon Material","section":"That's it 🎉","route":"components/icon-material","fragment":"thats-it-","content":"You can now start importing this component in your application !"},{"breadcrumbs":["Components","Icon"],"pageType":"guide","title":"Icon","section":"","route":"components/icon","content":"Simple component to display an icon as SVG tag from an svg file located in your assets/icons folder."},{"breadcrumbs":["Components","Icon"],"pageType":"guide","title":"Icon","section":"Pre requirements","route":"components/icon","fragment":"pre-requirements","content":"In order to use this component in your application, you must follow these steps:"},{"breadcrumbs":["Components","Icon"],"pageType":"guide","title":"Icon","section":"Create assets/icons folder","route":"components/icon","fragment":"create-assetsicons-folder","content":"In this folder, you can add all SVG required for your UI. You can also creates sub-folders but be aware, you'll need to format name as folderName/fileName."},{"breadcrumbs":["Components","Icon"],"pageType":"guide","title":"Icon","section":"Create assets/icons folder","route":"components/icon","fragment":"create-assetsicons-folder","content":"Note: With this component, you can control the fill of the SVG by adding some color of the component (works by inheritance)."},{"breadcrumbs":["Components","Icon"],"pageType":"guide","title":"Icon","section":"Import FileService","route":"components/icon","fragment":"import-fileservice","content":"This service helps working with files in general but this component requires getSVG() method. Simply copy paste this service or get isolated method."},{"breadcrumbs":["Components","Icon"],"pageType":"guide","title":"Icon","section":"That's it 🎉","route":"components/icon","fragment":"thats-it-","content":"You can now start importing this component in your application !"},{"breadcrumbs":["Components","Icon"],"pageType":"guide","title":"Icon","section":"That's it 🎉","route":"components/icon","fragment":"thats-it-","content":"Ensure that the SVG files in the assets/icons folder are properly named and formatted.The name input should match the file name of the SVG without the .svg extension."},{"breadcrumbs":["Components","Icon"],"pageType":"guide","title":"Icon","section":"That's it 🎉","route":"components/icon","fragment":"thats-it-","content":"By following these guidelines, you can effectively use the lib-icon component in your Angular application."},{"breadcrumbs":["Versions","Todo"],"pageType":"guide","title":"Todo","section":"Current development ⏰","route":"versions/todo","fragment":"current-development-","content":"Tasks on development scope (more tasks can be found in this repository using TODO Tree -vscode extensions)"},{"breadcrumbs":["Versions","Todo"],"pageType":"guide","title":"Todo","section":"modules","route":"versions/todo","fragment":"modules","content":" Platform Dialog Http request"},{"breadcrumbs":["Versions","Todo"],"pageType":"guide","title":"Todo","section":"directives","route":"versions/todo","fragment":"directives","content":" Match Media File value accessor"},{"breadcrumbs":["Versions","Todo"],"pageType":"guide","title":"Todo","section":"guards","route":"versions/todo","fragment":"guards","content":" Can deactivate"},{"breadcrumbs":["Versions","Todo"],"pageType":"guide","title":"Todo","section":"functions","route":"versions/todo","fragment":"functions","content":" Capitalize Clean dash-to-camel-case"},{"breadcrumbs":["Versions","Todo"],"pageType":"guide","title":"Todo","section":"Pipes","route":"versions/todo","fragment":"pipes","content":" Trust Html Trust URL Since"},{"breadcrumbs":["Versions","Todo"],"pageType":"guide","title":"Todo","section":"UI","route":"versions/todo","fragment":"ui","content":" NotFoundPage ComponentsPage ServicesPage ModulesPage"},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Angular Web User Interface 🎨","route":"get-started","fragment":"angular-web-user-interface-","content":"Angular library of components, services & patterns easing development of user interfaces. This is not a framework, nor a cdk, nut simply a collection of components following best practices in angular web development."},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Angular Web User Interface 🎨","route":"get-started","fragment":"angular-web-user-interface-","content":"This repository was created as a model for creating actual application. Feel free to use take any components you want 🙌"},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Built with 🏗️","route":"get-started","fragment":"built-with-️","content":"Dependency"},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Built with 🏗️","route":"get-started","fragment":"built-with-️","content":"version"},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Built with 🏗️","route":"get-started","fragment":"built-with-️","content":"@angular/core"},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Built with 🏗️","route":"get-started","fragment":"built-with-️","content":"^18.2.0"},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Built with 🏗️","route":"get-started","fragment":"built-with-️","content":"eslint"},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Built with 🏗️","route":"get-started","fragment":"built-with-️","content":"8.57.0"},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Built with 🏗️","route":"get-started","fragment":"built-with-️","content":"jest"},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Built with 🏗️","route":"get-started","fragment":"built-with-️","content":"^29.7.0"},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Built with 🏗️","route":"get-started","fragment":"built-with-️","content":"rxjs"},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Built with 🏗️","route":"get-started","fragment":"built-with-️","content":"~7.8.0"},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Built with 🏗️","route":"get-started","fragment":"built-with-️","content":"tailwind"},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Built with 🏗️","route":"get-started","fragment":"built-with-️","content":"^3.4.13"},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Built with 🏗️","route":"get-started","fragment":"built-with-️","content":"typescript"},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Built with 🏗️","route":"get-started","fragment":"built-with-️","content":"~5.5.2"},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Built with 🏗️","route":"get-started","fragment":"built-with-️","content":"More dependencies can be found inside package.json."},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Get Started 🚀","route":"get-started","fragment":"get-started-","content":"This project contains multiple scripts. Remember to first run npm i in order to load required dependencies. Then you can run any of the scripts below:"},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Get Started 🚀","route":"get-started","fragment":"get-started-","content":"Script"},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Get Started 🚀","route":"get-started","fragment":"get-started-","content":"Description"},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Get Started 🚀","route":"get-started","fragment":"get-started-","content":"npm run start"},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Get Started 🚀","route":"get-started","fragment":"get-started-","content":"Serves application locally to "},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Get Started 🚀","route":"get-started","fragment":"get-started-","content":"https://localhost:4200"},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Get Started 🚀","route":"get-started","fragment":"get-started-","content":"npm run build"},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Get Started 🚀","route":"get-started","fragment":"get-started-","content":"Builds application in production mode to "},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Get Started 🚀","route":"get-started","fragment":"get-started-","content":"dist/ngx-lib/browser"},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Get Started 🚀","route":"get-started","fragment":"get-started-","content":"npm run watch"},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Get Started 🚀","route":"get-started","fragment":"get-started-","content":"Builds application in development mode and watch for file change"},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Get Started 🚀","route":"get-started","fragment":"get-started-","content":"npm run test"},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Get Started 🚀","route":"get-started","fragment":"get-started-","content":"Launch unit tests with Jest runner"},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Get Started 🚀","route":"get-started","fragment":"get-started-","content":"npm run test:watch"},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Get Started 🚀","route":"get-started","fragment":"get-started-","content":"Launch unit tests and watch for files change"},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Get Started 🚀","route":"get-started","fragment":"get-started-","content":"npm run lint"},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Get Started 🚀","route":"get-started","fragment":"get-started-","content":"Lint repository with eslint & prettier."},{"breadcrumbs":["Welcome"],"pageType":"guide","title":"Welcome","section":"Versions 🔖","route":"get-started","fragment":"versions-","content":"A complete changelog can be found in dedicated markdown. Which resume current progress. You can also found what is in the current development inside TODO markdown."}]
\ No newline at end of file
diff --git a/chunk-OYD6OKP6.js b/chunk-3TPC2CNY.js
similarity index 91%
rename from chunk-OYD6OKP6.js
rename to chunk-3TPC2CNY.js
index c9b4e83..6d02be7 100644
--- a/chunk-OYD6OKP6.js
+++ b/chunk-3TPC2CNY.js
@@ -1 +1 @@
-import{a as p}from"./chunk-DI2YX3EC.js";import{a as h}from"./chunk-L4YHDAK7.js";import"./chunk-WEP4G4BU.js";import{S as k,a as c}from"./chunk-FNBE65Q7.js";import{Ba as d,Ra as g,U as s,nb as r,ob as l}from"./chunk-FUUZABHH.js";import{a,b as t,h as b}from"./chunk-TWZW5B45.js";var f=b(k());var D={title:"Changelog",mdFile:"./index.md",category:p},e=D;var u=[];var x={},m=x;var C='
Versions \u{1F516}
V0.0.1 - Init application \u{1F389}
Architecture
Generate angular app & link to github repository
Set eslint/prettier configuration & workspace plugins
Add deployment CI on github pages (available here)
Message component to display information with severity (info, warn, error ..)
Notification center (display notification in the root component)
Core
LocalStorageService
NotificationService
Still in progress !
',i=class n extends c{pageType="guide";pageContent=C;page=e;demoAssets=m;constructor(){super()}static \u0275fac=function(o){return new(o||n)};static \u0275cmp=s({type:n,selectors:[["ng-doc-page-bckenwty"]],standalone:!0,features:[r([{provide:c,useExisting:n},u,e.providers??[]]),d,l],decls:1,vars:0,template:function(o,P){o&1&&g(0,"ng-doc-page")},dependencies:[h],encapsulation:2,changeDetection:0})},N=[t(a({},(0,f.isRoute)(e.route)?e.route:{}),{path:"",component:i,title:"Changelog"})],U=N;export{i as PageComponent,U as default};
+import{a as p}from"./chunk-DI2YX3EC.js";import{a as h}from"./chunk-L4YHDAK7.js";import"./chunk-WEP4G4BU.js";import{S as k,a as c}from"./chunk-FNBE65Q7.js";import{Ba as d,Ra as g,U as s,nb as r,ob as l}from"./chunk-FUUZABHH.js";import{a,b as t,h as b}from"./chunk-TWZW5B45.js";var f=b(k());var D={title:"Changelog",mdFile:"./index.md",category:p},e=D;var u=[];var x={},m=x;var C='
Versions \u{1F516}
V0.0.1 - Init application \u{1F389}
Architecture
Generate angular app & link to github repository
Set eslint/prettier configuration & workspace plugins
Add deployment CI on github pages (available here)
Message component to display information with severity (info, warn, error ..)
Notification center (display notification in the root component)
Core
LocalStorageService
NotificationService
Still in progress !
',i=class o extends c{pageType="guide";pageContent=C;page=e;demoAssets=m;constructor(){super()}static \u0275fac=function(n){return new(n||o)};static \u0275cmp=s({type:o,selectors:[["ng-doc-page-e25lz9pz"]],standalone:!0,features:[r([{provide:c,useExisting:o},u,e.providers??[]]),d,l],decls:1,vars:0,template:function(n,P){n&1&&g(0,"ng-doc-page")},dependencies:[h],encapsulation:2,changeDetection:0})},N=[t(a({},(0,f.isRoute)(e.route)?e.route:{}),{path:"",component:i,title:"Changelog"})],U=N;export{i as PageComponent,U as default};
diff --git a/chunk-4RJXS75P.js b/chunk-4RJXS75P.js
new file mode 100644
index 0000000..c4b2ffb
--- /dev/null
+++ b/chunk-4RJXS75P.js
@@ -0,0 +1 @@
+import{a as g}from"./chunk-WEP4G4BU.js";import{Ha as r,Ra as p,U as t,ob as s}from"./chunk-FUUZABHH.js";import"./chunk-TWZW5B45.js";var d='
Message
',a=class o{routes=c[0].children;headerContent=d;pageType="guide";hasBreadcrumb=!0;static \u0275fac=function(e){return new(e||o)};static \u0275cmp=t({type:o,selectors:[["ng-doc-page-wrapper-1p6z23hp"]],standalone:!0,features:[s],decls:1,vars:4,consts:[[3,"routes","headerContent","hasBreadcrumb","pageType"]],template:function(e,n){e&1&&p(0,"ng-doc-page-wrapper",0),e&2&&r("routes",n.routes)("headerContent",n.headerContent)("hasBreadcrumb",n.hasBreadcrumb)("pageType",n.pageType)},dependencies:[g],encapsulation:2,changeDetection:0})},c=[{path:"",component:a,title:"Message",children:[{path:"",loadChildren:()=>import("./chunk-UIYMNB2U.js"),title:"Message",data:{icon:""}}]}],l=c;export{a as PageWrapperComponent,l as default};
diff --git a/chunk-THMXM634.js b/chunk-6RW75R6K.js
similarity index 81%
rename from chunk-THMXM634.js
rename to chunk-6RW75R6K.js
index d50b452..d9def6b 100644
--- a/chunk-THMXM634.js
+++ b/chunk-6RW75R6K.js
@@ -1 +1 @@
-import{a as s}from"./chunk-WEP4G4BU.js";import{Ha as r,Ra as g,U as t,ob as p}from"./chunk-FUUZABHH.js";import"./chunk-TWZW5B45.js";var d='
Changelog
',o=class a{routes=c[0].children;headerContent=d;pageType="guide";hasBreadcrumb=!0;static \u0275fac=function(e){return new(e||a)};static \u0275cmp=t({type:a,selectors:[["ng-doc-page-wrapper-dzys5luo"]],standalone:!0,features:[p],decls:1,vars:4,consts:[[3,"routes","headerContent","hasBreadcrumb","pageType"]],template:function(e,n){e&1&&g(0,"ng-doc-page-wrapper",0),e&2&&r("routes",n.routes)("headerContent",n.headerContent)("hasBreadcrumb",n.hasBreadcrumb)("pageType",n.pageType)},dependencies:[s],encapsulation:2,changeDetection:0})},c=[{path:"",component:o,title:"Changelog",children:[{path:"",loadChildren:()=>import("./chunk-OYD6OKP6.js"),title:"Changelog",data:{icon:""}}]}],u=c;export{o as PageWrapperComponent,u as default};
+import{a as s}from"./chunk-WEP4G4BU.js";import{Ha as r,Ra as g,U as t,ob as p}from"./chunk-FUUZABHH.js";import"./chunk-TWZW5B45.js";var d='
Changelog
',o=class a{routes=c[0].children;headerContent=d;pageType="guide";hasBreadcrumb=!0;static \u0275fac=function(e){return new(e||a)};static \u0275cmp=t({type:a,selectors:[["ng-doc-page-wrapper-90ggaktl"]],standalone:!0,features:[p],decls:1,vars:4,consts:[[3,"routes","headerContent","hasBreadcrumb","pageType"]],template:function(e,n){e&1&&g(0,"ng-doc-page-wrapper",0),e&2&&r("routes",n.routes)("headerContent",n.headerContent)("hasBreadcrumb",n.hasBreadcrumb)("pageType",n.pageType)},dependencies:[s],encapsulation:2,changeDetection:0})},c=[{path:"",component:o,title:"Changelog",children:[{path:"",loadChildren:()=>import("./chunk-3TPC2CNY.js"),title:"Changelog",data:{icon:""}}]}],u=c;export{o as PageWrapperComponent,u as default};
diff --git a/chunk-HGZSDTIX.js b/chunk-AC2SEJL4.js
similarity index 62%
rename from chunk-HGZSDTIX.js
rename to chunk-AC2SEJL4.js
index 7fa9f78..df30672 100644
--- a/chunk-HGZSDTIX.js
+++ b/chunk-AC2SEJL4.js
@@ -1 +1 @@
-import{a as s}from"./chunk-WEP4G4BU.js";import{Ha as r,Ra as p,U as a,ob as d}from"./chunk-FUUZABHH.js";import"./chunk-TWZW5B45.js";var g='
Todo
',n=class t{routes=i[0].children;headerContent=g;pageType="guide";hasBreadcrumb=!0;static \u0275fac=function(e){return new(e||t)};static \u0275cmp=a({type:t,selectors:[["ng-doc-page-wrapper-qmbsmezo"]],standalone:!0,features:[d],decls:1,vars:4,consts:[[3,"routes","headerContent","hasBreadcrumb","pageType"]],template:function(e,o){e&1&&p(0,"ng-doc-page-wrapper",0),e&2&&r("routes",o.routes)("headerContent",o.headerContent)("hasBreadcrumb",o.hasBreadcrumb)("pageType",o.pageType)},dependencies:[s],encapsulation:2,changeDetection:0})},i=[{path:"",component:n,title:"Todo",children:[{path:"",loadChildren:()=>import("./chunk-4QVIIERY.js"),title:"Todo",data:{icon:""}}]}],l=i;export{n as PageWrapperComponent,l as default};
+import{a as s}from"./chunk-WEP4G4BU.js";import{Ha as r,Ra as p,U as a,ob as d}from"./chunk-FUUZABHH.js";import"./chunk-TWZW5B45.js";var g='
Todo
',t=class n{routes=i[0].children;headerContent=g;pageType="guide";hasBreadcrumb=!0;static \u0275fac=function(e){return new(e||n)};static \u0275cmp=a({type:n,selectors:[["ng-doc-page-wrapper-z97w9lte"]],standalone:!0,features:[d],decls:1,vars:4,consts:[[3,"routes","headerContent","hasBreadcrumb","pageType"]],template:function(e,o){e&1&&p(0,"ng-doc-page-wrapper",0),e&2&&r("routes",o.routes)("headerContent",o.headerContent)("hasBreadcrumb",o.hasBreadcrumb)("pageType",o.pageType)},dependencies:[s],encapsulation:2,changeDetection:0})},i=[{path:"",component:t,title:"Todo",children:[{path:"",loadChildren:()=>import("./chunk-J4JNOHER.js"),title:"Todo",data:{icon:""}}]}],l=i;export{t as PageWrapperComponent,l as default};
diff --git a/chunk-UC5OH4L5.js b/chunk-EWKUJ2SM.js
similarity index 70%
rename from chunk-UC5OH4L5.js
rename to chunk-EWKUJ2SM.js
index ca4cf59..38721d3 100644
--- a/chunk-UC5OH4L5.js
+++ b/chunk-EWKUJ2SM.js
@@ -1 +1 @@
-import{a as c}from"./chunk-WEP4G4BU.js";import{Ha as r,Ra as p,U as t,ob as i}from"./chunk-FUUZABHH.js";import"./chunk-TWZW5B45.js";var g='
Icon Material
',a=class o{routes=s[0].children;headerContent=g;pageType="guide";hasBreadcrumb=!0;static \u0275fac=function(e){return new(e||o)};static \u0275cmp=t({type:o,selectors:[["ng-doc-page-wrapper-xkd31r2o"]],standalone:!0,features:[i],decls:1,vars:4,consts:[[3,"routes","headerContent","hasBreadcrumb","pageType"]],template:function(e,n){e&1&&p(0,"ng-doc-page-wrapper",0),e&2&&r("routes",n.routes)("headerContent",n.headerContent)("hasBreadcrumb",n.hasBreadcrumb)("pageType",n.pageType)},dependencies:[c],encapsulation:2,changeDetection:0})},s=[{path:"",component:a,title:"Icon Material",children:[{path:"",loadChildren:()=>import("./chunk-ETFQRMPR.js"),title:"Icon Material",data:{icon:""}}]}],u=s;export{a as PageWrapperComponent,u as default};
+import{a as c}from"./chunk-WEP4G4BU.js";import{Ha as r,Ra as p,U as o,ob as i}from"./chunk-FUUZABHH.js";import"./chunk-TWZW5B45.js";var g='
Icon Material
',a=class t{routes=s[0].children;headerContent=g;pageType="guide";hasBreadcrumb=!0;static \u0275fac=function(e){return new(e||t)};static \u0275cmp=o({type:t,selectors:[["ng-doc-page-wrapper-k8sqwnf1"]],standalone:!0,features:[i],decls:1,vars:4,consts:[[3,"routes","headerContent","hasBreadcrumb","pageType"]],template:function(e,n){e&1&&p(0,"ng-doc-page-wrapper",0),e&2&&r("routes",n.routes)("headerContent",n.headerContent)("hasBreadcrumb",n.hasBreadcrumb)("pageType",n.pageType)},dependencies:[c],encapsulation:2,changeDetection:0})},s=[{path:"",component:a,title:"Icon Material",children:[{path:"",loadChildren:()=>import("./chunk-URI5QIV6.js"),title:"Icon Material",data:{icon:""}}]}],u=s;export{a as PageWrapperComponent,u as default};
diff --git a/chunk-GADTL7JO.js b/chunk-GADTL7JO.js
deleted file mode 100644
index 1294bcd..0000000
--- a/chunk-GADTL7JO.js
+++ /dev/null
@@ -1 +0,0 @@
-import{a as d}from"./chunk-WEP4G4BU.js";import{Ha as r,Ra as p,U as a,ob as c}from"./chunk-FUUZABHH.js";import"./chunk-TWZW5B45.js";var g='
Welcome
',n=class o{routes=s[0].children;headerContent=g;pageType="guide";hasBreadcrumb=!0;static \u0275fac=function(e){return new(e||o)};static \u0275cmp=a({type:o,selectors:[["ng-doc-page-wrapper-al86dwxn"]],standalone:!0,features:[c],decls:1,vars:4,consts:[[3,"routes","headerContent","hasBreadcrumb","pageType"]],template:function(e,t){e&1&&p(0,"ng-doc-page-wrapper",0),e&2&&r("routes",t.routes)("headerContent",t.headerContent)("hasBreadcrumb",t.hasBreadcrumb)("pageType",t.pageType)},dependencies:[d],encapsulation:2,changeDetection:0})},s=[{path:"",component:n,title:"Welcome",children:[{path:"",loadChildren:()=>import("./chunk-FF2YTKSU.js"),title:"Welcome",data:{icon:""}}]}],u=s;export{n as PageWrapperComponent,u as default};
diff --git a/chunk-23GHPQJ7.js b/chunk-GM4LL73H.js
similarity index 100%
rename from chunk-23GHPQJ7.js
rename to chunk-GM4LL73H.js
diff --git a/chunk-4QVIIERY.js b/chunk-J4JNOHER.js
similarity index 93%
rename from chunk-4QVIIERY.js
rename to chunk-J4JNOHER.js
index 51285cb..6a2cf6a 100644
--- a/chunk-4QVIIERY.js
+++ b/chunk-J4JNOHER.js
@@ -1 +1 @@
-import{a as p}from"./chunk-DI2YX3EC.js";import{a as h}from"./chunk-L4YHDAK7.js";import"./chunk-WEP4G4BU.js";import{S as D,a as s}from"./chunk-FNBE65Q7.js";import{Ba as t,Ra as g,U as i,nb as l,ob as r}from"./chunk-FUUZABHH.js";import{a as c,b as d,h as b}from"./chunk-TWZW5B45.js";var f=b(D());var x={title:"Todo",mdFile:"./index.md",category:p},e=x;var u=[];var P={},m=P;var k='
Current development \u23F0
Tasks on development scope (more tasks can be found in this repository using TODO Tree -vscode extensions)
Init application \u{1F389}
Core
modules
Platform
Dialog
Http request
directives
Match Media
File value accessor
guards
Can deactivate
functions
Capitalize
Clean
dash-to-camel-case
Pipes
Trust Html
Trust URL
Since
UI
NotFoundPage
ComponentsPage
ServicesPage
ModulesPage
',a=class n extends s{pageType="guide";pageContent=k;page=e;demoAssets=m;constructor(){super()}static \u0275fac=function(o){return new(o||n)};static \u0275cmp=i({type:n,selectors:[["ng-doc-page-y8zoagyj"]],standalone:!0,features:[l([{provide:s,useExisting:n},u,e.providers??[]]),t,r],decls:1,vars:0,template:function(o,C){o&1&&g(0,"ng-doc-page")},dependencies:[h],encapsulation:2,changeDetection:0})},v=[d(c({},(0,f.isRoute)(e.route)?e.route:{}),{path:"",component:a,title:"Todo"})],Y=v;export{a as PageComponent,Y as default};
+import{a as p}from"./chunk-DI2YX3EC.js";import{a as h}from"./chunk-L4YHDAK7.js";import"./chunk-WEP4G4BU.js";import{S as D,a as s}from"./chunk-FNBE65Q7.js";import{Ba as t,Ra as g,U as i,nb as l,ob as r}from"./chunk-FUUZABHH.js";import{a as c,b as d,h as y}from"./chunk-TWZW5B45.js";var f=y(D());var x={title:"Todo",mdFile:"./index.md",category:p},e=x;var u=[];var P={},m=P;var k='
Current development \u23F0
Tasks on development scope (more tasks can be found in this repository using TODO Tree -vscode extensions)
Init application \u{1F389}
Core
modules
Platform
Dialog
Http request
directives
Match Media
File value accessor
guards
Can deactivate
functions
Capitalize
Clean
dash-to-camel-case
Pipes
Trust Html
Trust URL
Since
UI
NotFoundPage
ComponentsPage
ServicesPage
ModulesPage
',a=class n extends s{pageType="guide";pageContent=k;page=e;demoAssets=m;constructor(){super()}static \u0275fac=function(o){return new(o||n)};static \u0275cmp=i({type:n,selectors:[["ng-doc-page-bj1h0x23"]],standalone:!0,features:[l([{provide:s,useExisting:n},u,e.providers??[]]),t,r],decls:1,vars:0,template:function(o,C){o&1&&g(0,"ng-doc-page")},dependencies:[h],encapsulation:2,changeDetection:0})},v=[d(c({},(0,f.isRoute)(e.route)?e.route:{}),{path:"",component:a,title:"Todo"})],Y=v;export{a as PageComponent,Y as default};
diff --git a/chunk-Q5NNXNHJ.js b/chunk-JO4N7766.js
similarity index 87%
rename from chunk-Q5NNXNHJ.js
rename to chunk-JO4N7766.js
index 88a3a64..6841ab0 100644
--- a/chunk-Q5NNXNHJ.js
+++ b/chunk-JO4N7766.js
@@ -1 +1 @@
-import{a as i}from"./chunk-WEP4G4BU.js";import{Ha as r,Ra as p,U as a,ob as c}from"./chunk-FUUZABHH.js";import"./chunk-TWZW5B45.js";var g='
Icon
',o=class t{routes=s[0].children;headerContent=g;pageType="guide";hasBreadcrumb=!0;static \u0275fac=function(e){return new(e||t)};static \u0275cmp=a({type:t,selectors:[["ng-doc-page-wrapper-55kp70do"]],standalone:!0,features:[c],decls:1,vars:4,consts:[[3,"routes","headerContent","hasBreadcrumb","pageType"]],template:function(e,n){e&1&&p(0,"ng-doc-page-wrapper",0),e&2&&r("routes",n.routes)("headerContent",n.headerContent)("hasBreadcrumb",n.hasBreadcrumb)("pageType",n.pageType)},dependencies:[i],encapsulation:2,changeDetection:0})},s=[{path:"",component:o,title:"Icon",children:[{path:"",loadChildren:()=>import("./chunk-VIFDODQ2.js"),title:"Icon",data:{icon:""}}]}],l=s;export{o as PageWrapperComponent,l as default};
+import{a as i}from"./chunk-WEP4G4BU.js";import{Ha as r,Ra as p,U as a,ob as c}from"./chunk-FUUZABHH.js";import"./chunk-TWZW5B45.js";var g='
Icon
',o=class t{routes=s[0].children;headerContent=g;pageType="guide";hasBreadcrumb=!0;static \u0275fac=function(e){return new(e||t)};static \u0275cmp=a({type:t,selectors:[["ng-doc-page-wrapper-0z7uoisf"]],standalone:!0,features:[c],decls:1,vars:4,consts:[[3,"routes","headerContent","hasBreadcrumb","pageType"]],template:function(e,n){e&1&&p(0,"ng-doc-page-wrapper",0),e&2&&r("routes",n.routes)("headerContent",n.headerContent)("hasBreadcrumb",n.hasBreadcrumb)("pageType",n.pageType)},dependencies:[i],encapsulation:2,changeDetection:0})},s=[{path:"",component:o,title:"Icon",children:[{path:"",loadChildren:()=>import("./chunk-RRSKFNN6.js"),title:"Icon",data:{icon:""}}]}],l=s;export{o as PageWrapperComponent,l as default};
diff --git a/chunk-QUI2RPBZ.js b/chunk-KX5AFKLF.js
similarity index 51%
rename from chunk-QUI2RPBZ.js
rename to chunk-KX5AFKLF.js
index b748995..953e2eb 100644
--- a/chunk-QUI2RPBZ.js
+++ b/chunk-KX5AFKLF.js
@@ -1 +1 @@
-import{a as c}from"./chunk-WEP4G4BU.js";import{Ha as r,Ra as p,U as a,ob as s}from"./chunk-FUUZABHH.js";import"./chunk-TWZW5B45.js";var g='
Button
',n=class o{routes=d[0].children;headerContent=g;pageType="guide";hasBreadcrumb=!0;static \u0275fac=function(e){return new(e||o)};static \u0275cmp=a({type:o,selectors:[["ng-doc-page-wrapper-au3l8uqm"]],standalone:!0,features:[s],decls:1,vars:4,consts:[[3,"routes","headerContent","hasBreadcrumb","pageType"]],template:function(e,t){e&1&&p(0,"ng-doc-page-wrapper",0),e&2&&r("routes",t.routes)("headerContent",t.headerContent)("hasBreadcrumb",t.hasBreadcrumb)("pageType",t.pageType)},dependencies:[c],encapsulation:2,changeDetection:0})},d=[{path:"",component:n,title:"Button",children:[{path:"",loadChildren:()=>import("./chunk-IC4X5WI6.js"),title:"Button",data:{icon:""}}]}],l=d;export{n as PageWrapperComponent,l as default};
+import{a as i}from"./chunk-WEP4G4BU.js";import{Ha as r,Ra as p,U as a,ob as s}from"./chunk-FUUZABHH.js";import"./chunk-TWZW5B45.js";var g='
Button
',n=class o{routes=c[0].children;headerContent=g;pageType="guide";hasBreadcrumb=!0;static \u0275fac=function(e){return new(e||o)};static \u0275cmp=a({type:o,selectors:[["ng-doc-page-wrapper-m6tg87ie"]],standalone:!0,features:[s],decls:1,vars:4,consts:[[3,"routes","headerContent","hasBreadcrumb","pageType"]],template:function(e,t){e&1&&p(0,"ng-doc-page-wrapper",0),e&2&&r("routes",t.routes)("headerContent",t.headerContent)("hasBreadcrumb",t.hasBreadcrumb)("pageType",t.pageType)},dependencies:[i],encapsulation:2,changeDetection:0})},c=[{path:"",component:n,title:"Button",children:[{path:"",loadChildren:()=>import("./chunk-LRIK52GB.js"),title:"Button",data:{icon:""}}]}],l=c;export{n as PageWrapperComponent,l as default};
diff --git a/chunk-IC4X5WI6.js b/chunk-LRIK52GB.js
similarity index 92%
rename from chunk-IC4X5WI6.js
rename to chunk-LRIK52GB.js
index c644ba9..c903bcb 100644
--- a/chunk-IC4X5WI6.js
+++ b/chunk-LRIK52GB.js
@@ -1 +1 @@
-import{a as A}from"./chunk-23GHPQJ7.js";import{a as z}from"./chunk-L4YHDAK7.js";import"./chunk-WEP4G4BU.js";import{o as B,q as R}from"./chunk-ZCY2UNJH.js";import{S as V,a as m}from"./chunk-FNBE65Q7.js";import{$a as x,Ba as l,Ga as P,Ha as D,Pa as v,Qa as N,Qb as k,Ra as M,U as i,_a as O,bb as c,cb as u,db as g,ha as r,hb as _,nb as w,ob as s,wa as C}from"./chunk-FUUZABHH.js";import{a as b,b as h,h as Q}from"./chunk-TWZW5B45.js";var I=Q(V());var q=["*"],d=class n{color=r("primary");size=r("medium");full=r(!1);rounded=r(!0);disabled=r(!1);appearance=r("flat");static \u0275fac=function(o){return new(o||n)};static \u0275cmp=i({type:n,selectors:[["lib-button"]],hostAttrs:[1,"inline-flex","justify-center","items-center","rounded-md","cursor-pointer","overflow-hidden","relative","border-transparent","border"],hostVars:6,hostBindings:function(o,e){o&2&&P("data-color",e.color())("data-size",e.size())("data-rounded",e.rounded())("data-disabled",e.disabled())("data-appearance",e.appearance())("data-full",e.full())},inputs:{color:[1,"color"],size:[1,"size"],full:[1,"full"],rounded:[1,"rounded"],disabled:[1,"disabled"],appearance:[1,"appearance"]},standalone:!0,features:[s],ngContentSelectors:q,decls:1,vars:0,template:function(o,e){o&1&&(O(),x(0))},styles:['[_nghost-%COMP%]{--button-color: #fff}[data-appearance=flat][_nghost-%COMP%]{background-color:var(--button-background);color:var(--button-color)}[data-appearance=basic][_nghost-%COMP%], [data-appearance=stroked][_nghost-%COMP%]{background-color:transparent;color:var(--button-background)}[data-appearance=basic][_nghost-%COMP%]:hover:before, [data-appearance=stroked][_nghost-%COMP%]:hover:before{position:absolute;left:0;top:0;height:100%;width:100%;opacity:.1;content:"";background-color:var(--button-background)}[data-appearance=stroked][_nghost-%COMP%]{border:1px solid currentColor}[data-color=primary][_nghost-%COMP%]{--button-background: var(--primary-color)}[data-color=accent][_nghost-%COMP%]{--button-background: var(--accent-color)}[data-color=warn][_nghost-%COMP%]{--button-background: var(--warn-color)}[data-size=small][_nghost-%COMP%]{padding:.25rem .75rem}[data-size=medium][_nghost-%COMP%]{padding:.75rem 1.5rem;font-size:1.125rem;line-height:1.75rem}[data-size=large][_nghost-%COMP%]{padding:1rem 1.75rem;font-size:1.25rem;line-height:1.75rem}[data-full=true][_nghost-%COMP%]{width:100%}[data-rounded=true][_nghost-%COMP%]{border-radius:24px}[data-disabled=true][_nghost-%COMP%]{opacity:.5;pointer-events:none}'],changeDetection:0})};var L={title:"Button",mdFile:"./index.md",playgrounds:{ButtonPlayground:{target:d,template:"My Button"}},category:A},t=L;var f=class n extends R{static selector="lib-button";playground;viewContainerRef;configData=t.playgrounds.ButtonPlayground.data;constructor(){super(t.playgrounds.ButtonPlayground.target)}static \u0275fac=function(o){return new(o||n)};static \u0275cmp=i({type:n,selectors:[["ng-doc-playground-1"]],viewQuery:function(o,e){if(o&1&&(c(t.playgrounds.ButtonPlayground.target,7),c(t.playgrounds.ButtonPlayground.target,7,C)),o&2){let p;u(p=g())&&(e.playground=p.first),u(p=g())&&(e.viewContainerRef=p.first)}},standalone:!0,features:[l,s],decls:2,vars:6,consts:[[3,"color","size","full","rounded","disabled","appearance"]],template:function(o,e){o&1&&(v(0,"lib-button",0),_(1,"My Button"),N()),o&2&&D("color",e.properties.color)("size",e.properties.size)("full",e.properties.full)("rounded",e.properties.rounded)("disabled",e.properties.disabled)("appearance",e.properties.appearance)},dependencies:[k,d],encapsulation:2,changeDetection:0})};var T=[B("ButtonPlayground",f)];var U={},E=U;var Y=`
A button is an interface element that allows the user to perform a specific action when clicked.
Playground \u{1F579}\uFE0F
lib-button
{"color":{"inputName":"color","type":"'primary' | 'accent' | 'warn'","description":"<p>Color of the button.</p>","options":["'primary'","'accent'","'warn'"]},"size":{"inputName":"size","type":"'small' | 'medium' | 'large'","description":"<p>Size of the button.</p>","options":["'small'","'medium'","'large'"]},"full":{"inputName":"full","type":"boolean","description":"<p>Whether the button should take the full width.</p>","options":["false","true"]},"rounded":{"inputName":"rounded","type":"boolean","description":"<p>Whether the button should have rounded corners.</p>","options":["false","true"]},"disabled":{"inputName":"disabled","type":"boolean","description":"<p>Whether the button should be disabled.</p>","options":["false","true"]},"appearance":{"inputName":"appearance","type":"'basic' | 'flat' | 'stroked'","description":"<p>Appearance of the button.</p>","options":["'basic'","'flat'","'stroked'"]}}
{}
`,y=class n extends m{pageType="guide";pageContent=Y;page=t;demoAssets=E;constructor(){super()}static \u0275fac=function(o){return new(o||n)};static \u0275cmp=i({type:n,selectors:[["ng-doc-page-cc79tkpc"]],standalone:!0,features:[w([{provide:m,useExisting:n},T,t.providers??[]]),l,s],decls:1,vars:0,template:function(o,e){o&1&&M(0,"ng-doc-page")},dependencies:[z],encapsulation:2,changeDetection:0})},j=[h(b({},(0,I.isRoute)(t.route)?t.route:{}),{path:"",component:y,title:"Button"})],be=j;export{y as PageComponent,be as default};
+import{a as A}from"./chunk-GM4LL73H.js";import{a as z}from"./chunk-L4YHDAK7.js";import"./chunk-WEP4G4BU.js";import{o as k,q as R}from"./chunk-ZCY2UNJH.js";import{S as V,a as m}from"./chunk-FNBE65Q7.js";import{$a as x,Ba as l,Ga as P,Ha as D,Pa as v,Qa as N,Qb as B,Ra as M,U as i,_a as O,bb as c,cb as u,db as g,ha as r,hb as _,nb as w,ob as s,wa as C}from"./chunk-FUUZABHH.js";import{a as b,b as h,h as Q}from"./chunk-TWZW5B45.js";var I=Q(V());var q=["*"],d=class n{color=r("primary");size=r("medium");full=r(!1);rounded=r(!0);disabled=r(!1);appearance=r("flat");static \u0275fac=function(o){return new(o||n)};static \u0275cmp=i({type:n,selectors:[["lib-button"]],hostAttrs:[1,"inline-flex","justify-center","items-center","rounded-md","cursor-pointer","overflow-hidden","relative","border-transparent","border"],hostVars:6,hostBindings:function(o,e){o&2&&P("data-color",e.color())("data-size",e.size())("data-rounded",e.rounded())("data-disabled",e.disabled())("data-appearance",e.appearance())("data-full",e.full())},inputs:{color:[1,"color"],size:[1,"size"],full:[1,"full"],rounded:[1,"rounded"],disabled:[1,"disabled"],appearance:[1,"appearance"]},standalone:!0,features:[s],ngContentSelectors:q,decls:1,vars:0,template:function(o,e){o&1&&(O(),x(0))},styles:['[_nghost-%COMP%]{--button-color: #fff}[data-appearance=flat][_nghost-%COMP%]{background-color:var(--button-background);color:var(--button-color)}[data-appearance=basic][_nghost-%COMP%], [data-appearance=stroked][_nghost-%COMP%]{background-color:transparent;color:var(--button-background)}[data-appearance=basic][_nghost-%COMP%]:hover:before, [data-appearance=stroked][_nghost-%COMP%]:hover:before{position:absolute;left:0;top:0;height:100%;width:100%;opacity:.1;content:"";background-color:var(--button-background)}[data-appearance=stroked][_nghost-%COMP%]{border:1px solid currentColor}[data-color=primary][_nghost-%COMP%]{--button-background: var(--primary-color)}[data-color=accent][_nghost-%COMP%]{--button-background: var(--accent-color)}[data-color=warn][_nghost-%COMP%]{--button-background: var(--warn-color)}[data-size=small][_nghost-%COMP%]{padding:.25rem .75rem}[data-size=medium][_nghost-%COMP%]{padding:.75rem 1.5rem;font-size:1.125rem;line-height:1.75rem}[data-size=large][_nghost-%COMP%]{padding:1rem 1.75rem;font-size:1.25rem;line-height:1.75rem}[data-full=true][_nghost-%COMP%]{width:100%}[data-rounded=true][_nghost-%COMP%]{border-radius:24px}[data-disabled=true][_nghost-%COMP%]{opacity:.5;pointer-events:none}'],changeDetection:0})};var L={title:"Button",mdFile:"./index.md",playgrounds:{ButtonPlayground:{target:d,template:"My Button"}},category:A},t=L;var f=class n extends R{static selector="lib-button";playground;viewContainerRef;configData=t.playgrounds.ButtonPlayground.data;constructor(){super(t.playgrounds.ButtonPlayground.target)}static \u0275fac=function(o){return new(o||n)};static \u0275cmp=i({type:n,selectors:[["ng-doc-playground-1"]],viewQuery:function(o,e){if(o&1&&(c(t.playgrounds.ButtonPlayground.target,7),c(t.playgrounds.ButtonPlayground.target,7,C)),o&2){let p;u(p=g())&&(e.playground=p.first),u(p=g())&&(e.viewContainerRef=p.first)}},standalone:!0,features:[l,s],decls:2,vars:6,consts:[[3,"color","size","full","rounded","disabled","appearance"]],template:function(o,e){o&1&&(v(0,"lib-button",0),_(1,"My Button"),N()),o&2&&D("color",e.properties.color)("size",e.properties.size)("full",e.properties.full)("rounded",e.properties.rounded)("disabled",e.properties.disabled)("appearance",e.properties.appearance)},dependencies:[B,d],encapsulation:2,changeDetection:0})};var T=[k("ButtonPlayground",f)];var U={},E=U;var Y=`
A button is an interface element that allows the user to perform a specific action when clicked.
Playground \u{1F579}\uFE0F
lib-button
{"color":{"inputName":"color","type":"'primary' | 'accent' | 'warn'","description":"<p>Color of the button.</p>","options":["'primary'","'accent'","'warn'"]},"size":{"inputName":"size","type":"'small' | 'medium' | 'large'","description":"<p>Size of the button.</p>","options":["'small'","'medium'","'large'"]},"full":{"inputName":"full","type":"boolean","description":"<p>Whether the button should take the full width.</p>","options":["false","true"]},"rounded":{"inputName":"rounded","type":"boolean","description":"<p>Whether the button should have rounded corners.</p>","options":["false","true"]},"disabled":{"inputName":"disabled","type":"boolean","description":"<p>Whether the button should be disabled.</p>","options":["false","true"]},"appearance":{"inputName":"appearance","type":"'basic' | 'flat' | 'stroked'","description":"<p>Appearance of the button.</p>","options":["'basic'","'flat'","'stroked'"]}}
{}
`,y=class n extends m{pageType="guide";pageContent=Y;page=t;demoAssets=E;constructor(){super()}static \u0275fac=function(o){return new(o||n)};static \u0275cmp=i({type:n,selectors:[["ng-doc-page-45f1yt7m"]],standalone:!0,features:[w([{provide:m,useExisting:n},T,t.providers??[]]),l,s],decls:1,vars:0,template:function(o,e){o&1&&M(0,"ng-doc-page")},dependencies:[z],encapsulation:2,changeDetection:0})},j=[h(b({},(0,I.isRoute)(t.route)?t.route:{}),{path:"",component:y,title:"Button"})],be=j;export{y as PageComponent,be as default};
diff --git a/chunk-PVTZQJPK.js b/chunk-PVTZQJPK.js
new file mode 100644
index 0000000..e8796d1
--- /dev/null
+++ b/chunk-PVTZQJPK.js
@@ -0,0 +1 @@
+import{a as s}from"./chunk-WEP4G4BU.js";import{Ha as r,Ra as p,U as a,ob as c}from"./chunk-FUUZABHH.js";import"./chunk-TWZW5B45.js";var g='
Welcome
',o=class n{routes=d[0].children;headerContent=g;pageType="guide";hasBreadcrumb=!0;static \u0275fac=function(e){return new(e||n)};static \u0275cmp=a({type:n,selectors:[["ng-doc-page-wrapper-9vs9hocj"]],standalone:!0,features:[c],decls:1,vars:4,consts:[[3,"routes","headerContent","hasBreadcrumb","pageType"]],template:function(e,t){e&1&&p(0,"ng-doc-page-wrapper",0),e&2&&r("routes",t.routes)("headerContent",t.headerContent)("hasBreadcrumb",t.hasBreadcrumb)("pageType",t.pageType)},dependencies:[s],encapsulation:2,changeDetection:0})},d=[{path:"",component:o,title:"Welcome",children:[{path:"",loadChildren:()=>import("./chunk-RTRNBHT5.js"),title:"Welcome",data:{icon:""}}]}],u=d;export{o as PageWrapperComponent,u as default};
diff --git a/chunk-VIFDODQ2.js b/chunk-RRSKFNN6.js
similarity index 92%
rename from chunk-VIFDODQ2.js
rename to chunk-RRSKFNN6.js
index 5dca760..d8c2b32 100644
--- a/chunk-VIFDODQ2.js
+++ b/chunk-RRSKFNN6.js
@@ -1,6 +1,6 @@
-import{a as Q}from"./chunk-23GHPQJ7.js";import{a as L}from"./chunk-L4YHDAK7.js";import"./chunk-WEP4G4BU.js";import{a as F,b as z}from"./chunk-NQCIMNAB.js";import{o as O,q as H}from"./chunk-ZCY2UNJH.js";import{S as Z,a as y}from"./chunk-FNBE65Q7.js";import{Ba as l,Ha as M,I as R,Ia as E,O as x,Qb as k,Ra as g,S as s,Tb as q,U as a,bb as u,cb as h,db as f,ha as p,ia as V,m as b,n as I,nb as G,ob as c,va as A,wa as T,x as w}from"./chunk-FUUZABHH.js";import{a as N,b as S,h as j}from"./chunk-TWZW5B45.js";var _=j(Z());var m=class t{http=s(q);getSVG(o){return this.http.get(o,{responseType:"text"}).pipe(w(()=>b(null)),I(e=>{if(!e){let r=`
+import{a as Q}from"./chunk-GM4LL73H.js";import{a as L}from"./chunk-L4YHDAK7.js";import"./chunk-WEP4G4BU.js";import{a as F,b as z}from"./chunk-NQCIMNAB.js";import{o as O,q as H}from"./chunk-ZCY2UNJH.js";import{S as Z,a as y}from"./chunk-FNBE65Q7.js";import{Ba as l,Ha as M,I as R,Ia as E,O as x,Qb as G,Ra as g,S as s,Tb as k,U as a,bb as u,cb as h,db as f,ha as p,ia as V,m as b,n as I,nb as q,ob as c,va as A,wa as T,x as w}from"./chunk-FUUZABHH.js";import{a as N,b as S,h as j}from"./chunk-TWZW5B45.js";var _=j(Z());var m=class t{http=s(k);getSVG(o){return this.http.get(o,{responseType:"text"}).pipe(w(()=>b(null)),I(e=>{if(!e){let r=`
- `,P=document.createElement("div");return P.innerHTML=r,P.querySelector("svg")}let n=document.createElement("div");return n.innerHTML=e,n.querySelector("svg")}))}static \u0275fac=function(e){return new(e||t)};static \u0275prov=x({token:t,factory:t.\u0275fac,providedIn:"root"})};var $="/icons",d=class t{name=p.required();size=p("1.5rem");aspectRatio=p("1 / 1");color=p("currentColor");triggerSubscription=z(this.name).pipe(R(o=>this.fileService.getSVG(`${$}/${o}.svg`)),F()).subscribe(o=>this.renderSvg(o));el=s(V);fileService=s(m);renderer=s(A);renderSvg(o){let e=o?.querySelector("svg");e&&(this.renderer.setAttribute(e,"width",this.size()),this.renderer.setAttribute(e,"height",this.size())),this.renderer.appendChild(this.el.nativeElement,o)}static \u0275fac=function(e){return new(e||t)};static \u0275cmp=a({type:t,selectors:[["lib-icon"]],hostAttrs:[1,"inline-block"],hostVars:6,hostBindings:function(e,n){e&2&&E("width",n.size())("aspect-ratio",n.aspectRatio())("color",n.color())},inputs:{name:[1,"name"],size:[1,"size"],aspectRatio:[1,"aspectRatio"],color:[1,"color"]},standalone:!0,features:[c],decls:0,vars:0,template:function(e,n){},encapsulation:2,changeDetection:0})};var J={title:"Icon",mdFile:"./index.md",playgrounds:{IconPlayground:{target:d,template:""}},category:Q},i=J;var C=class t extends H{static selector="lib-icon";playground;viewContainerRef;configData=i.playgrounds.IconPlayground.data;constructor(){super(i.playgrounds.IconPlayground.target)}static \u0275fac=function(e){return new(e||t)};static \u0275cmp=a({type:t,selectors:[["ng-doc-playground-1"]],viewQuery:function(e,n){if(e&1&&(u(i.playgrounds.IconPlayground.target,7),u(i.playgrounds.IconPlayground.target,7,T)),e&2){let r;h(r=f())&&(n.playground=r.first),h(r=f())&&(n.viewContainerRef=r.first)}},standalone:!0,features:[l,c],decls:1,vars:4,consts:[[3,"name","size","aspectRatio","color"]],template:function(e,n){e&1&&g(0,"lib-icon",0),e&2&&M("name",n.properties.name)("size",n.properties.size)("aspectRatio",n.properties.aspectRatio)("color",n.properties.color)},dependencies:[k,d],encapsulation:2,changeDetection:0})};var Y=[O("IconPlayground",C)];var K={},B=K;var X=`
Simple component to display an icon as SVG tag from an svg file located in your assets/icons folder.
Pre requirements
In order to use this component in your application, you must follow these steps:
Create assets/icons folder
In this folder, you can add all SVG required for your UI. You can also creates sub-folders but be aware, you'll need to format name as folderName/fileName.
Note: With this component, you can control the fill of the SVG by adding some color of the component (works by inheritance).
Import FileService
This service helps working with files in general but this component requires getSVG() method. Simply copy paste this service or get isolated method.
That's it \u{1F389}
You can now start importing this component in your application !
Ensure that the SVG files in the assets/icons folder are properly named and formatted.
The name input should match the file name of the SVG without the .svg extension.
By following these guidelines, you can effectively use the lib-icon component in your Angular application.
Playground \u{1F579}\uFE0F
lib-icon
{"name":{"inputName":"name","type":"string","description":"<p>Name of the icon.
-(must match the filename located in assets/icons folder, without extension .svg)</p>","options":[]},"size":{"inputName":"size","type":"string","description":"<p>Size of the icon (must include css unit)</p>","options":[]},"aspectRatio":{"inputName":"aspectRatio","type":"string","description":"<p>Aspect ratio of the icon (must match css aspect-ratio property)</p>","options":[]},"color":{"inputName":"color","type":"string","description":"<p>Color of the icon (must match css aspect-ratio property)</p>","options":[]}}
{"inputs":{"name":"logo"}}
`,D=class t extends y{pageType="guide";pageContent=X;page=i;demoAssets=B;constructor(){super()}static \u0275fac=function(e){return new(e||t)};static \u0275cmp=a({type:t,selectors:[["ng-doc-page-gmipamhm"]],standalone:!0,features:[G([{provide:y,useExisting:t},Y,i.providers??[]]),l,c],decls:1,vars:0,template:function(e,n){e&1&&g(0,"ng-doc-page")},dependencies:[L],encapsulation:2,changeDetection:0})},ee=[S(N({},(0,_.isRoute)(i.route)?i.route:{}),{path:"",component:D,title:"Icon"})],Ee=ee;export{D as PageComponent,Ee as default};
+ `,P=document.createElement("div");return P.innerHTML=r,P.querySelector("svg")}let n=document.createElement("div");return n.innerHTML=e,n.querySelector("svg")}))}static \u0275fac=function(e){return new(e||t)};static \u0275prov=x({token:t,factory:t.\u0275fac,providedIn:"root"})};var $="/icons",d=class t{name=p.required();size=p("1.5rem");aspectRatio=p("1 / 1");color=p("currentColor");triggerSubscription=z(this.name).pipe(R(o=>this.fileService.getSVG(`${$}/${o}.svg`)),F()).subscribe(o=>this.renderSvg(o));el=s(V);fileService=s(m);renderer=s(A);renderSvg(o){let e=o?.querySelector("svg");e&&(this.renderer.setAttribute(e,"width",this.size()),this.renderer.setAttribute(e,"height",this.size())),this.renderer.appendChild(this.el.nativeElement,o)}static \u0275fac=function(e){return new(e||t)};static \u0275cmp=a({type:t,selectors:[["lib-icon"]],hostAttrs:[1,"inline-block"],hostVars:6,hostBindings:function(e,n){e&2&&E("width",n.size())("aspect-ratio",n.aspectRatio())("color",n.color())},inputs:{name:[1,"name"],size:[1,"size"],aspectRatio:[1,"aspectRatio"],color:[1,"color"]},standalone:!0,features:[c],decls:0,vars:0,template:function(e,n){},encapsulation:2,changeDetection:0})};var J={title:"Icon",mdFile:"./index.md",playgrounds:{IconPlayground:{target:d,template:""}},category:Q},i=J;var C=class t extends H{static selector="lib-icon";playground;viewContainerRef;configData=i.playgrounds.IconPlayground.data;constructor(){super(i.playgrounds.IconPlayground.target)}static \u0275fac=function(e){return new(e||t)};static \u0275cmp=a({type:t,selectors:[["ng-doc-playground-1"]],viewQuery:function(e,n){if(e&1&&(u(i.playgrounds.IconPlayground.target,7),u(i.playgrounds.IconPlayground.target,7,T)),e&2){let r;h(r=f())&&(n.playground=r.first),h(r=f())&&(n.viewContainerRef=r.first)}},standalone:!0,features:[l,c],decls:1,vars:4,consts:[[3,"name","size","aspectRatio","color"]],template:function(e,n){e&1&&g(0,"lib-icon",0),e&2&&M("name",n.properties.name)("size",n.properties.size)("aspectRatio",n.properties.aspectRatio)("color",n.properties.color)},dependencies:[G,d],encapsulation:2,changeDetection:0})};var Y=[O("IconPlayground",C)];var K={},B=K;var X=`
Simple component to display an icon as SVG tag from an svg file located in your assets/icons folder.
Pre requirements
In order to use this component in your application, you must follow these steps:
Create assets/icons folder
In this folder, you can add all SVG required for your UI. You can also creates sub-folders but be aware, you'll need to format name as folderName/fileName.
Note: With this component, you can control the fill of the SVG by adding some color of the component (works by inheritance).
Import FileService
This service helps working with files in general but this component requires getSVG() method. Simply copy paste this service or get isolated method.
That's it \u{1F389}
You can now start importing this component in your application !
Ensure that the SVG files in the assets/icons folder are properly named and formatted.
The name input should match the file name of the SVG without the .svg extension.
By following these guidelines, you can effectively use the lib-icon component in your Angular application.
Playground \u{1F579}\uFE0F
lib-icon
{"name":{"inputName":"name","type":"string","description":"<p>Name of the icon.
+(must match the filename located in assets/icons folder, without extension .svg)</p>","options":[]},"size":{"inputName":"size","type":"string","description":"<p>Size of the icon (must include css unit)</p>","options":[]},"aspectRatio":{"inputName":"aspectRatio","type":"string","description":"<p>Aspect ratio of the icon (must match css aspect-ratio property)</p>","options":[]},"color":{"inputName":"color","type":"string","description":"<p>Color of the icon (must match css aspect-ratio property)</p>","options":[]}}
{"inputs":{"name":"logo"}}
`,D=class t extends y{pageType="guide";pageContent=X;page=i;demoAssets=B;constructor(){super()}static \u0275fac=function(e){return new(e||t)};static \u0275cmp=a({type:t,selectors:[["ng-doc-page-3v29e2aq"]],standalone:!0,features:[q([{provide:y,useExisting:t},Y,i.providers??[]]),l,c],decls:1,vars:0,template:function(e,n){e&1&&g(0,"ng-doc-page")},dependencies:[L],encapsulation:2,changeDetection:0})},ee=[S(N({},(0,_.isRoute)(i.route)?i.route:{}),{path:"",component:D,title:"Icon"})],Ee=ee;export{D as PageComponent,Ee as default};
diff --git a/chunk-FF2YTKSU.js b/chunk-RTRNBHT5.js
similarity index 96%
rename from chunk-FF2YTKSU.js
rename to chunk-RTRNBHT5.js
index 7a26e8a..f88e349 100644
--- a/chunk-FF2YTKSU.js
+++ b/chunk-RTRNBHT5.js
@@ -1 +1 @@
-import{a as p}from"./chunk-L4YHDAK7.js";import"./chunk-WEP4G4BU.js";import{S as w,a as s}from"./chunk-FNBE65Q7.js";import{Ba as l,Ra as g,U as c,nb as r,ob as i}from"./chunk-FUUZABHH.js";import{a as o,b as d,h as b}from"./chunk-TWZW5B45.js";var m=b(w());var y={title:"Welcome",mdFile:"../../../README.md"},e=y;var h=[];var D={},u=D;var N='
Angular Web User Interface \u{1F3A8}
Angular library of components, services & patterns easing development of user interfaces. This is not a framework, nor a cdk, nut simply a collection of components following best practices in angular web development.
This repository was created as a model for creating actual application. Feel free to use take any components you want \u{1F64C}
Builds application in production mode to dist/ngx-lib/browser
npm run watch
Builds application in development mode and watch for file change
npm run test
Launch unit tests with Jest runner
npm run test:watch
Launch unit tests and watch for files change
npm run lint
Lint repository with eslint & prettier.
Versions \u{1F516}
A complete changelog can be found in dedicated markdown. Which resume current progress. You can also found what is in the current development inside TODO markdown.
',a=class t extends s{pageType="guide";pageContent=N;page=e;demoAssets=u;constructor(){super()}static \u0275fac=function(n){return new(n||t)};static \u0275cmp=c({type:t,selectors:[["ng-doc-page-xau9wq2u"]],standalone:!0,features:[r([{provide:s,useExisting:t},h,e.providers??[]]),l,i],decls:1,vars:0,template:function(n,x){n&1&&g(0,"ng-doc-page")},dependencies:[p],encapsulation:2,changeDetection:0})},P=[d(o({},(0,m.isRoute)(e.route)?e.route:{}),{path:"",component:a,title:"Welcome"})],M=P;export{a as PageComponent,M as default};
+import{a as p}from"./chunk-L4YHDAK7.js";import"./chunk-WEP4G4BU.js";import{S as w,a as s}from"./chunk-FNBE65Q7.js";import{Ba as l,Ra as g,U as c,nb as r,ob as i}from"./chunk-FUUZABHH.js";import{a as o,b as d,h as b}from"./chunk-TWZW5B45.js";var m=b(w());var y={title:"Welcome",mdFile:"../../../README.md"},e=y;var h=[];var D={},u=D;var N='
Angular Web User Interface \u{1F3A8}
Angular library of components, services & patterns easing development of user interfaces. This is not a framework, nor a cdk, nut simply a collection of components following best practices in angular web development.
This repository was created as a model for creating actual application. Feel free to use take any components you want \u{1F64C}
Builds application in production mode to dist/ngx-lib/browser
npm run watch
Builds application in development mode and watch for file change
npm run test
Launch unit tests with Jest runner
npm run test:watch
Launch unit tests and watch for files change
npm run lint
Lint repository with eslint & prettier.
Versions \u{1F516}
A complete changelog can be found in dedicated markdown. Which resume current progress. You can also found what is in the current development inside TODO markdown.
',a=class t extends s{pageType="guide";pageContent=N;page=e;demoAssets=u;constructor(){super()}static \u0275fac=function(n){return new(n||t)};static \u0275cmp=c({type:t,selectors:[["ng-doc-page-loew8h4v"]],standalone:!0,features:[r([{provide:s,useExisting:t},h,e.providers??[]]),l,i],decls:1,vars:0,template:function(n,v){n&1&&g(0,"ng-doc-page")},dependencies:[p],encapsulation:2,changeDetection:0})},P=[d(o({},(0,m.isRoute)(e.route)?e.route:{}),{path:"",component:a,title:"Welcome"})],M=P;export{a as PageComponent,M as default};
diff --git a/chunk-UIYMNB2U.js b/chunk-UIYMNB2U.js
new file mode 100644
index 0000000..a6cd481
--- /dev/null
+++ b/chunk-UIYMNB2U.js
@@ -0,0 +1 @@
+import{a as Q}from"./chunk-GM4LL73H.js";import{a as H}from"./chunk-L4YHDAK7.js";import"./chunk-WEP4G4BU.js";import{a as G}from"./chunk-DM4GOGW6.js";import{o as F,q as L}from"./chunk-ZCY2UNJH.js";import{S as B,a as N}from"./chunk-FNBE65Q7.js";import{Ba as l,Da as y,Eb as b,Ha as p,Ka as f,La as C,Pa as R,Qa as T,Qb as E,Ra as s,U as r,Za as _,bb as v,cb as h,db as D,ha as g,na as m,nb as A,ob as d,pa as u,qb as O,wa as S}from"./chunk-FUUZABHH.js";import{a as w,b as I,h as j}from"./chunk-TWZW5B45.js";var U=j(B());var P={info:{icon:"info",color:"bg-blue-100 border-blue-500 text-blue-900"},note:{icon:"lightbulb",color:"bg-indigo-100 border-indigo-500 text-indigo-900"},warn:{icon:"warning",color:"bg-orange-100 border-orange-500 text-orange-900"},error:{icon:"error",color:"bg-red-100 border-red-500 text-red-900"},success:{icon:"done",color:"bg-teal-100 border-teal-500 text-teal-900"}};var z=o=>({"font-bold":o});function W(o,n){if(o&1&&s(0,"lib-icon-material",0),o&2){let e=_();p("name",e.messageIcon())}}function J(o,n){o&1&&s(0,"span",3),o&2&&p("innerHTML",n,m)}var c=class o{summary=g.required();severity=g("info");details=g();showIcon=g(!0);messageIcon=b(()=>P[this.severity()].icon);messageColor=b(()=>P[this.severity()].color);static \u0275fac=function(e){return new(e||o)};static \u0275cmp=r({type:o,selectors:[["lib-message"]],hostAttrs:[1,"flex","items-center","justify-start","gap-3","border","rounded-lg","px-4","py-2","shadow-md"],hostVars:2,hostBindings:function(e,t){e&2&&f(t.messageColor())},inputs:{summary:[1,"summary"],severity:[1,"severity"],details:[1,"details"],showIcon:[1,"showIcon"]},standalone:!0,features:[d],decls:4,vars:7,consts:[[1,"my-1","!mx-0",3,"name"],[1,"p-1","flex","flex-col"],[3,"innerHTML"],[1,"text-sm","break-all",3,"innerHTML"]],template:function(e,t){if(e&1&&(y(0,W,1,1,"lib-icon-material",0),R(1,"div",1),s(2,"span",2),y(3,J,1,1,"span",3),T()),e&2){let a;C(t.showIcon()?0:-1),u(2),f(O(5,z,!!t.details)),p("innerHTML",t.summary(),m),u(),C((a=t.details())?3:-1,a)}},dependencies:[G],encapsulation:2,changeDetection:0})};var X={title:"Message",mdFile:"./index.md",playgrounds:{MessagePlayground:{target:c,template:""}},category:Q},i=X;var x=class o extends L{static selector="lib-message";playground;viewContainerRef;configData=i.playgrounds.MessagePlayground.data;constructor(){super(i.playgrounds.MessagePlayground.target)}static \u0275fac=function(e){return new(e||o)};static \u0275cmp=r({type:o,selectors:[["ng-doc-playground-1"]],viewQuery:function(e,t){if(e&1&&(v(i.playgrounds.MessagePlayground.target,7),v(i.playgrounds.MessagePlayground.target,7,S)),e&2){let a;h(a=D())&&(t.playground=a.first),h(a=D())&&(t.viewContainerRef=a.first)}},standalone:!0,features:[l,d],decls:1,vars:4,consts:[[3,"summary","severity","details","showIcon"]],template:function(e,t){e&1&&s(0,"lib-message",0),e&2&&p("summary",t.properties.summary)("severity",t.properties.severity)("details",t.properties.details)("showIcon",t.properties.showIcon)},dependencies:[E,c],encapsulation:2,changeDetection:0})};var k=[F("MessagePlayground",x)];var Z={},q=Z;var $=`
Simple component to display inline container with colored messages depending on given severity.
Playground \u{1F579}\uFE0F
lib-message
{"summary":{"inputName":"summary","type":"string","description":"<p>Primary message of the notification</p>","options":[]},"severity":{"inputName":"severity","type":"NotificationSeverity","description":"<p>Severity of the message, Defines the type of Notification to be displayed</p>","options":["'warn'","'error'","'info'","'note'","'success'"]},"details":{"inputName":"details","type":"string | undefined","description":"<p>Secondary message, provide more context (can be omitted)</p>","options":["undefined","string"]},"showIcon":{"inputName":"showIcon","type":"boolean","description":"<p>Whether to display an icon before the message</p>","options":["false","true"]}}
{"inputs":{"summary":"Some message to display"}}
`,M=class o extends N{pageType="guide";pageContent=$;page=i;demoAssets=q;constructor(){super()}static \u0275fac=function(e){return new(e||o)};static \u0275cmp=r({type:o,selectors:[["ng-doc-page-jmuxkvjg"]],standalone:!0,features:[A([{provide:N,useExisting:o},k,i.providers??[]]),l,d],decls:1,vars:0,template:function(e,t){e&1&&s(0,"ng-doc-page")},dependencies:[H],encapsulation:2,changeDetection:0})},ee=[I(w({},(0,U.isRoute)(i.route)?i.route:{}),{path:"",component:M,title:"Message"})],Se=ee;export{M as PageComponent,Se as default};
diff --git a/chunk-ETFQRMPR.js b/chunk-URI5QIV6.js
similarity index 94%
rename from chunk-ETFQRMPR.js
rename to chunk-URI5QIV6.js
index 15f10a7..21c6b77 100644
--- a/chunk-ETFQRMPR.js
+++ b/chunk-URI5QIV6.js
@@ -1,7 +1,7 @@
-import{a as v}from"./chunk-23GHPQJ7.js";import{a as b}from"./chunk-L4YHDAK7.js";import"./chunk-WEP4G4BU.js";import{a as d}from"./chunk-DM4GOGW6.js";import{o as P,q as A}from"./chunk-ZCY2UNJH.js";import{S as R,a as h}from"./chunk-FNBE65Q7.js";import{Ba as r,Ha as C,Qb as B,Ra as l,U as t,bb as g,cb as p,db as m,nb as F,ob as c,wa as D}from"./chunk-FUUZABHH.js";import{a as f,b as k,h as E}from"./chunk-TWZW5B45.js";var I=E(R());var M={title:"Icon Material",mdFile:"./index.md",playgrounds:{IconMaterialPlayground:{target:d,template:""}},category:v},n=M;var u=class o extends A{static selector="lib-icon-material";playground;viewContainerRef;configData=n.playgrounds.IconMaterialPlayground.data;constructor(){super(n.playgrounds.IconMaterialPlayground.target)}static \u0275fac=function(e){return new(e||o)};static \u0275cmp=t({type:o,selectors:[["ng-doc-playground-1"]],viewQuery:function(e,s){if(e&1&&(g(n.playgrounds.IconMaterialPlayground.target,7),g(n.playgrounds.IconMaterialPlayground.target,7,D)),e&2){let i;p(i=m())&&(s.playground=i.first),p(i=m())&&(s.viewContainerRef=i.first)}},standalone:!0,features:[r,c],decls:1,vars:2,consts:[[3,"name","size"]],template:function(e,s){e&1&&l(0,"lib-icon-material",0),e&2&&C("name",s.properties.name)("size",s.properties.size)},dependencies:[B,d],encapsulation:2,changeDetection:0})};var N=[P("IconMaterialPlayground",u)];var O={},x=O;var T=`
Simple component to display an icon from material-symbols-outlined font.
Refer to the material-symbols-outlined font for the list of available icons.
Simply add this selector to your style.scss file. Adapt this settings to match desired styling. Check https://fonts.google.com/icons options for more information.
.material-symbols-outlined {
+import{a as v}from"./chunk-GM4LL73H.js";import{a as b}from"./chunk-L4YHDAK7.js";import"./chunk-WEP4G4BU.js";import{a as d}from"./chunk-DM4GOGW6.js";import{o as P,q as A}from"./chunk-ZCY2UNJH.js";import{S as R,a as h}from"./chunk-FNBE65Q7.js";import{Ba as r,Ha as C,Qb as B,Ra as l,U as t,bb as p,cb as g,db as m,nb as F,ob as c,wa as D}from"./chunk-FUUZABHH.js";import{a as f,b as k,h as E}from"./chunk-TWZW5B45.js";var I=E(R());var M={title:"Icon Material",mdFile:"./index.md",playgrounds:{IconMaterialPlayground:{target:d,template:""}},category:v},n=M;var u=class o extends A{static selector="lib-icon-material";playground;viewContainerRef;configData=n.playgrounds.IconMaterialPlayground.data;constructor(){super(n.playgrounds.IconMaterialPlayground.target)}static \u0275fac=function(e){return new(e||o)};static \u0275cmp=t({type:o,selectors:[["ng-doc-playground-1"]],viewQuery:function(e,s){if(e&1&&(p(n.playgrounds.IconMaterialPlayground.target,7),p(n.playgrounds.IconMaterialPlayground.target,7,D)),e&2){let i;g(i=m())&&(s.playground=i.first),g(i=m())&&(s.viewContainerRef=i.first)}},standalone:!0,features:[r,c],decls:1,vars:2,consts:[[3,"name","size"]],template:function(e,s){e&1&&l(0,"lib-icon-material",0),e&2&&C("name",s.properties.name)("size",s.properties.size)},dependencies:[B,d],encapsulation:2,changeDetection:0})};var N=[P("IconMaterialPlayground",u)];var O={},x=O;var T=`
Simple component to display an icon from material-symbols-outlined font.
Refer to the material-symbols-outlined font for the list of available icons.
Simply add this selector to your style.scss file. Adapt this settings to match desired styling. Check https://fonts.google.com/icons options for more information.
You can now start importing this component in your application !
Playground \u{1F579}\uFE0F
lib-icon-material
{"name":{"inputName":"name","type":"string","description":"<p>Name of the material icon (check google material icon website for the list of available icons)</p>","options":[]},"size":{"inputName":"size","type":"string","description":"<p>Size of the icon (must include css unit)</p>","options":[]}}
{"inputs":{"name":"home"}}
`,y=class o extends h{pageType="guide";pageContent=T;page=n;demoAssets=x;constructor(){super()}static \u0275fac=function(e){return new(e||o)};static \u0275cmp=t({type:o,selectors:[["ng-doc-page-bt6k7w6v"]],standalone:!0,features:[F([{provide:h,useExisting:o},N,n.providers??[]]),r,c],decls:1,vars:0,template:function(e,s){e&1&&l(0,"ng-doc-page")},dependencies:[b],encapsulation:2,changeDetection:0})},z=[k(f({},(0,I.isRoute)(n.route)?n.route:{}),{path:"",component:y,title:"Icon Material"})],te=z;export{y as PageComponent,te as default};
+}
That's it \u{1F389}
You can now start importing this component in your application !
Playground \u{1F579}\uFE0F
lib-icon-material
{"name":{"inputName":"name","type":"string","description":"<p>Name of the material icon (check google material icon website for the list of available icons)</p>","options":[]},"size":{"inputName":"size","type":"string","description":"<p>Size of the icon (must include css unit)</p>","options":[]}}
{"inputs":{"name":"home"}}
`,y=class o extends h{pageType="guide";pageContent=T;page=n;demoAssets=x;constructor(){super()}static \u0275fac=function(e){return new(e||o)};static \u0275cmp=t({type:o,selectors:[["ng-doc-page-tn6nurfu"]],standalone:!0,features:[F([{provide:h,useExisting:o},N,n.providers??[]]),r,c],decls:1,vars:0,template:function(e,s){e&1&&l(0,"ng-doc-page")},dependencies:[b],encapsulation:2,changeDetection:0})},z=[k(f({},(0,I.isRoute)(n.route)?n.route:{}),{path:"",component:y,title:"Icon Material"})],te=z;export{y as PageComponent,te as default};
diff --git a/index.html b/index.html
index a252ce4..60be5d8 100644
--- a/index.html
+++ b/index.html
@@ -17,8 +17,8 @@
-
+
-
+