diff --git a/chunk-II6NSMPE.js b/chunk-4QVIIERY.js
similarity index 92%
rename from chunk-II6NSMPE.js
rename to chunk-4QVIIERY.js
index 9e889ab..51285cb 100644
--- a/chunk-II6NSMPE.js
+++ b/chunk-4QVIIERY.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 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-rs0lpwvp"]],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"})],G=v;export{a as PageComponent,G 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 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};
diff --git a/chunk-DM4GOGW6.js b/chunk-DM4GOGW6.js
new file mode 100644
index 0000000..b5c0eb0
--- /dev/null
+++ b/chunk-DM4GOGW6.js
@@ -0,0 +1 @@
+import{Ia as s,U as a,ha as n,hb as r,ib as m,ob as l}from"./chunk-FUUZABHH.js";var c=class i{name=n.required();size=n("1.5rem");static \u0275fac=function(e){return new(e||i)};static \u0275cmp=a({type:i,selectors:[["lib-icon-material"]],hostAttrs:[1,"material-symbols-outlined","inline-block"],hostVars:6,hostBindings:function(e,t){e&2&&s("width",t.size())("height",t.size())("font-size",t.size())},inputs:{name:[1,"name"],size:[1,"size"]},standalone:!0,features:[l],decls:1,vars:1,template:function(e,t){e&1&&r(0),e&2&&m(t.name())},encapsulation:2,changeDetection:0})};export{c as a};
diff --git a/chunk-DQPRVMO6.js b/chunk-DQPRVMO6.js
deleted file mode 100644
index 7c69dff..0000000
--- a/chunk-DQPRVMO6.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import{a as _}from"./chunk-23GHPQJ7.js";import{a as L}from"./chunk-L4YHDAK7.js";import"./chunk-WEP4G4BU.js";import{a as z,b as F}from"./chunk-NQCIMNAB.js";import{o as k,q as H}from"./chunk-ZCY2UNJH.js";import{S as Z,a as y}from"./chunk-FNBE65Q7.js";import{Ba as l,Ha as T,I as x,Ia as E,O as R,Qb as G,Ra as g,S as s,Tb as O,U as a,bb as u,cb as h,db as f,ha as c,ia as V,m as S,n as w,nb as q,ob as d,va as M,wa as A,x as I}from"./chunk-FUUZABHH.js";import{a as N,b,h as j}from"./chunk-TWZW5B45.js";var B=j(Z());var m=class t{http=s(O);getSVG(o){return this.http.get(o,{responseType:"text"}).pipe(I(()=>S(null)),w(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=R({token:t,factory:t.\u0275fac,providedIn:"root"})};var $="/icons",p=class t{name=c.required();alt=c("icon");size=c("1.5rem");aspectRatio=c("1 / 1");color=c("currentColor");triggerSubscription=F(this.name).pipe(x(o=>this.fileService.getSVG(`${$}/${o}.svg`)),z()).subscribe(o=>this.renderSvg(o));el=s(V);fileService=s(m);renderer=s(M);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"]],hostVars:4,hostBindings:function(e,n){e&2&&E("width",n.size())("aspect-ratio",n.aspectRatio())},inputs:{name:[1,"name"],alt:[1,"alt"],size:[1,"size"],aspectRatio:[1,"aspectRatio"],color:[1,"color"]},standalone:!0,features:[d],decls:0,vars:0,template:function(e,n){},styles:["[_nghost-%COMP%] svg[_ngcontent-%COMP%]{fill:currentColor;width:100%;height:100%}"],changeDetection:0})};var J={title:"Icon",mdFile:"./index.md",playgrounds:{IconPlayground:{target:p,template:""}},category:_},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,A)),e&2){let r;h(r=f())&&(n.playground=r.first),h(r=f())&&(n.viewContainerRef=r.first)}},standalone:!0,features:[l,d],decls:1,vars:5,consts:[[3,"name","alt","size","aspectRatio","color"]],template:function(e,n){e&1&&g(0,"lib-icon",0),e&2&&T("name",n.properties.name)("alt",n.properties.alt)("size",n.properties.size)("aspectRatio",n.properties.aspectRatio)("color",n.properties.color)},dependencies:[G,p],encapsulation:2,changeDetection:0})};var U=[k("IconPlayground",C)];var K={},Y=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":[]},"alt":{"inputName":"alt","type":"string","description":"<p>Alternative text to be displayed when the icon is not available</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":[]}}
{}
`,D=class t extends y{pageType="guide";pageContent=X;page=i;demoAssets=Y;constructor(){super()}static \u0275fac=function(e){return new(e||t)};static \u0275cmp=a({type:t,selectors:[["ng-doc-page-e08iqt0z"]],standalone:!0,features:[q([{provide:y,useExisting:t},U,i.providers??[]]),l,d],decls:1,vars:0,template:function(e,n){e&1&&g(0,"ng-doc-page")},dependencies:[L],encapsulation:2,changeDetection:0})},ee=[b(N({},(0,B.isRoute)(i.route)?i.route:{}),{path:"",component:D,title:"Icon"})],Ee=ee;export{D as PageComponent,Ee as default};
diff --git a/chunk-QQLNMRQQ.js b/chunk-ETFQRMPR.js
similarity index 59%
rename from chunk-QQLNMRQQ.js
rename to chunk-ETFQRMPR.js
index 2f9948e..15f10a7 100644
--- a/chunk-QQLNMRQQ.js
+++ b/chunk-ETFQRMPR.js
@@ -1,10 +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-P7EN3UH4.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 s 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||s)};static \u0275cmp=t({type:s,selectors:[["ng-doc-playground-1"]],viewQuery:function(e,o){if(e&1&&(p(n.playgrounds.IconMaterialPlayground.target,7),p(n.playgrounds.IconMaterialPlayground.target,7,D)),e&2){let i;g(i=m())&&(o.playground=i.first),g(i=m())&&(o.viewContainerRef=i.first)}},standalone:!0,features:[r,c],decls:1,vars:2,consts:[[3,"name","size"]],template:function(e,o){e&1&&l(0,"lib-icon-material",0),e&2&&C("name",o.properties.name)("size",o.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-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.
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":[]}}
{}
`,y=class s extends h{pageType="guide";pageContent=T;page=n;demoAssets=x;constructor(){super()}static \u0275fac=function(e){return new(e||s)};static \u0275cmp=t({type:s,selectors:[["ng-doc-page-fw40abc9"]],standalone:!0,features:[F([{provide:h,useExisting:s},N,n.providers??[]]),r,c],decls:1,vars:0,template:function(e,o){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-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};
diff --git a/chunk-JR3PXJ5G.js b/chunk-FF2YTKSU.js
similarity index 96%
rename from chunk-JR3PXJ5G.js
rename to chunk-FF2YTKSU.js
index 2a1651e..7a26e8a 100644
--- a/chunk-JR3PXJ5G.js
+++ b/chunk-FF2YTKSU.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-1tdwwv8b"]],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};
+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};
diff --git a/chunk-ZIKDT7NT.js b/chunk-GADTL7JO.js
similarity index 50%
rename from chunk-ZIKDT7NT.js
rename to chunk-GADTL7JO.js
index 772700d..1294bcd 100644
--- a/chunk-ZIKDT7NT.js
+++ b/chunk-GADTL7JO.js
@@ -1 +1 @@
-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
',o=class n{routes=s[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-7a87f8po"]],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:o,title:"Welcome",children:[{path:"",loadChildren:()=>import("./chunk-JR3PXJ5G.js"),title:"Welcome",data:{icon:""}}]}],u=s;export{o as PageWrapperComponent,u as default};
+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-3SCW6CY4.js b/chunk-HGZSDTIX.js
similarity index 62%
rename from chunk-3SCW6CY4.js
rename to chunk-HGZSDTIX.js
index 3fa4657..7fa9f78 100644
--- a/chunk-3SCW6CY4.js
+++ b/chunk-HGZSDTIX.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
',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-h8kthmhf"]],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-II6NSMPE.js"),title:"Todo",data:{icon:""}}]}],l=i;export{t 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
',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};
diff --git a/chunk-GJKZQXYY.js b/chunk-IC4X5WI6.js
similarity index 97%
rename from chunk-GJKZQXYY.js
rename to chunk-IC4X5WI6.js
index 8ef2703..c644ba9 100644
--- a/chunk-GJKZQXYY.js
+++ b/chunk-IC4X5WI6.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-fib4ke2b"]],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-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};
diff --git a/chunk-LXAA7SWV.js b/chunk-OYD6OKP6.js
similarity index 98%
rename from chunk-LXAA7SWV.js
rename to chunk-OYD6OKP6.js
index 3104b2b..c9b4e83 100644
--- a/chunk-LXAA7SWV.js
+++ b/chunk-OYD6OKP6.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-hjhanfwr"]],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 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};
diff --git a/chunk-P7EN3UH4.js b/chunk-P7EN3UH4.js
deleted file mode 100644
index 45b5e7e..0000000
--- a/chunk-P7EN3UH4.js
+++ /dev/null
@@ -1 +0,0 @@
-import{Ia as s,U as a,ha as n,hb as r,ib as m,ob as c}from"./chunk-FUUZABHH.js";var l=class i{name=n.required();size=n("1.5rem");static \u0275fac=function(e){return new(e||i)};static \u0275cmp=a({type:i,selectors:[["lib-icon-material"]],hostAttrs:[1,"material-symbols-outlined"],hostVars:4,hostBindings:function(e,t){e&2&&s("width",t.size())("height",t.size())},inputs:{name:[1,"name"],size:[1,"size"]},standalone:!0,features:[c],decls:1,vars:1,template:function(e,t){e&1&&r(0),e&2&&m(t.name())},encapsulation:2,changeDetection:0})};export{l as a};
diff --git a/chunk-JIL77Q4O.js b/chunk-Q5NNXNHJ.js
similarity index 87%
rename from chunk-JIL77Q4O.js
rename to chunk-Q5NNXNHJ.js
index 1f5d447..88a3a64 100644
--- a/chunk-JIL77Q4O.js
+++ b/chunk-Q5NNXNHJ.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-h6h83ufp"]],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-DQPRVMO6.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-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};
diff --git a/chunk-V3UBPXOJ.js b/chunk-QUI2RPBZ.js
similarity index 81%
rename from chunk-V3UBPXOJ.js
rename to chunk-QUI2RPBZ.js
index a469df6..b748995 100644
--- a/chunk-V3UBPXOJ.js
+++ b/chunk-QUI2RPBZ.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-f0q7wxmq"]],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-GJKZQXYY.js"),title:"Button",data:{icon:""}}]}],l=d;export{n as PageWrapperComponent,l as default};
+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};
diff --git a/chunk-PCO7EXPD.js b/chunk-THMXM634.js
similarity index 81%
rename from chunk-PCO7EXPD.js
rename to chunk-THMXM634.js
index 989ee9e..d50b452 100644
--- a/chunk-PCO7EXPD.js
+++ b/chunk-THMXM634.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-1rh2njgg"]],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-LXAA7SWV.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-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};
diff --git a/chunk-JD7L4IE2.js b/chunk-UC5OH4L5.js
similarity index 70%
rename from chunk-JD7L4IE2.js
rename to chunk-UC5OH4L5.js
index c618d75..ca4cf59 100644
--- a/chunk-JD7L4IE2.js
+++ b/chunk-UC5OH4L5.js
@@ -1 +1 @@
-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-wu95ht4j"]],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-QQLNMRQQ.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 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};
diff --git a/chunk-VIFDODQ2.js b/chunk-VIFDODQ2.js
new file mode 100644
index 0000000..5dca760
--- /dev/null
+++ b/chunk-VIFDODQ2.js
@@ -0,0 +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=`
+
+ `,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};
diff --git a/index.html b/index.html
index a6b9e09..a252ce4 100644
--- a/index.html
+++ b/index.html
@@ -17,8 +17,8 @@
-
+
-
+