feat: organizando estilos da main

- Added new binary files for various classes in the agtemplate and poseidon packages.
- Updated web.xml to include a new MIME mapping for .otf files and added a context parameter for facelets refresh period.

nb-configuration.xml

@@ -15,5 +15,9 @@ Any value defined here will override the pom.xml file value but is only applicab
 -->
         <org-netbeans-modules-maven-j2ee.netbeans_2e_hint_2e_deploy_2e_server>Tomcat</org-netbeans-modules-maven-j2ee.netbeans_2e_hint_2e_deploy_2e_server>
         <netbeans.hint.jdkPlatform>JDK_21</netbeans.hint.jdkPlatform>
+        <org-netbeans-modules-css-prep.sass_2e_configured>true</org-netbeans-modules-css-prep.sass_2e_configured>
+        <org-netbeans-modules-css-prep.sass_2e_enabled>true</org-netbeans-modules-css-prep.sass_2e_enabled>
+        <org-netbeans-modules-css-prep.sass_2e_mappings>/scss:/css</org-netbeans-modules-css-prep.sass_2e_mappings>
+        <netbeans.compile.on.save>all</netbeans.compile.on.save>
     </properties>
 </project-shared-configuration>

src/main/webapp/WEB-INF/web.xml

@@ -55,6 +55,10 @@
     <welcome-file-list>
         <welcome-file>index.xhtml</welcome-file>
     </welcome-file-list>
+     <mime-mapping>
+        <extension>otf</extension>
+        <mime-type>application/font-otf</mime-type>
+    </mime-mapping>
     <mime-mapping>
         <extension>ttf</extension>
         <mime-type>application/font-sfnt</mime-type>
@@ -75,6 +79,10 @@
         <extension>eot?#iefix</extension>
         <mime-type>application/vnd.ms-fontobject</mime-type>
     </mime-mapping>
+    <context-param> 
+        <param-name>facelets.REFRESH_PERIOD</param-name> 
+        <param-value>0</param-value> 
+    </context-param>
     <mime-mapping>
         <extension>svg</extension>
         <mime-type>image/svg+xml</mime-type>

src/main/webapp/resources/demo/css/demo-light.css

@@ -1,5 +1,5 @@
 :root {
-  --content-alt-bg-color:#E8F1F8;
+  --content-alt-bg-color:#ffffff;
 }
 
 .order-badge {

src/main/webapp/resources/demo/images/dashboard/asset-deals.svg

@@ -3,7 +3,7 @@
         <circle cx="46.4" cy="142.78" r="14.22" fill="#FFF"/>
         <path stroke="#FFF" stroke-dasharray="6.32 9.48" stroke-width="1.264" d="M99.33 169.64c38.831 0 70.31-31.479 70.31-70.31s-31.479-70.31-70.31-70.31-70.31 31.479-70.31 70.31 31.479 70.31 70.31 70.31z" opacity=".2"/>
         <path stroke="#FFF" stroke-dasharray="285.98 1579998.463" stroke-linecap="round" stroke-width="6.32" d="M45.47 144.524c24.96 29.747 69.308 33.627 99.054 8.667 29.747-24.96 33.627-69.309 8.667-99.055-24.96-29.747-69.309-33.627-99.055-8.667-29.747 24.96-33.627 69.309-8.667 99.055z"/>
-        <text fill="#FFF" font-family="OpenSans, Open Sans" font-size="37.92">
+        <text fill="#FFF" font-family="OpenSans, DIN Next" font-size="37.92">
             <tspan x="62.2" y="114.26">72%</tspan>
         </text>
     </g>

src/main/webapp/resources/sass/_fonts.scss

@@ -1,52 +1,113 @@
-/* open-sans-300 - latin */
+
+/* din-next-ultra-light - latin */
 @font-face {
-  font-family: 'Open Sans';
+  font-family: 'DIN Next';
+  font-style: normal;
+  font-weight: 200;
+  src: url("#{resource['poseidon-layout:fonts/din-next-ultra-light.otf']}")
+    format('opentype');
+}
+/* din-next-ultra-light-italic - latin */
+@font-face {
+  font-family: 'DIN Next';
+  font-style: italic;
+  font-weight: 200;
+  src: url("#{resource['poseidon-layout:fonts/din-next-ultra-light-italic.otf']}")
+    format('opentype');
+}
+/* din-next-light - latin */
+@font-face {
+  font-family: 'DIN Next';
   font-style: normal;
   font-weight: 300;
-  src: url("\#{resource['poseidon-layout:fonts/open-sans-v18-latin-ext_latin-300.eot']}"); /* IE9 Compat Modes */
+  src: url("#{resource['poseidon-layout:fonts/din-next-light.otf']}")
-  src: local('Open Sans Light'), local('OpenSans-Light'),
+    format('opentype');
-       url("\#{resource['poseidon-layout:fonts/open-sans-v18-latin-ext_latin-300.eot']}?#iefix") format('embedded-opentype'), /* IE6-IE8 */
-       url("\#{resource['poseidon-layout:fonts/open-sans-v18-latin-ext_latin-300.woff2']}") format('woff2'), /* Super Modern Browsers */
-       url("\#{resource['poseidon-layout:fonts/open-sans-v18-latin-ext_latin-300.woff']}") format('woff'), /* Modern Browsers */
-       url("\#{resource['poseidon-layout:fonts/open-sans-v18-latin-ext_latin-300.ttf']}") format('truetype'), /* Safari, Android, iOS */
-       url("\#{resource['poseidon-layout:fonts/open-sans-v18-latin-ext_latin-300.svg']}#OpenSans") format('svg'); /* Legacy iOS */
 }
-/* open-sans-regular - latin */
+/* din-next-light-italic - latin */
 @font-face {
-  font-family: 'Open Sans';
+  font-family: 'DIN Next';
+  font-style: italic;
+  font-weight: 300;
+  src: url("#{resource['poseidon-layout:fonts/din-next-light-italic.otf']}")
+    format('opentype');
+}
+/* din-next-regular - latin */
+@font-face {
+  font-family: 'DIN Next';
   font-style: normal;
   font-weight: 400;
-  src: url("\#{resource['poseidon-layout:fonts/open-sans-v18-latin-ext_latin-regular.eot']}"); /* IE9 Compat Modes */
+  src: url("#{resource['poseidon-layout:fonts/din-next-regular.otf']}")
-  src: local('Open Sans'), local('OpenSans'),
+    format('opentype');
-       url("\#{resource['poseidon-layout:fonts/open-sans-v18-latin-ext_latin-regular.eot']}?#iefix") format('embedded-opentype'), /* IE6-IE8 */
-       url("\#{resource['poseidon-layout:fonts/open-sans-v18-latin-ext_latin-regular.woff2']}") format('woff2'), /* Super Modern Browsers */
-       url("\#{resource['poseidon-layout:fonts/open-sans-v18-latin-ext_latin-regular.woff']}") format('woff'), /* Modern Browsers */
-       url("\#{resource['poseidon-layout:fonts/open-sans-v18-latin-ext_latin-regular.ttf']}") format('truetype'), /* Safari, Android, iOS */
-       url("\#{resource['poseidon-layout:fonts/open-sans-v18-latin-ext_latin-regular.svg']}#OpenSans") format('svg'); /* Legacy iOS */
 }
-/* open-sans-600 - latin */
+/* din-next-italic - latin */
 @font-face {
-  font-family: 'Open Sans';
+  font-family: 'DIN Next';
+  font-style: italic;
+  font-weight: 400;
+  src: url("#{resource['poseidon-layout:fonts/din-next-italic.otf']}")
+    format('opentype');
+}
+/* din-next-medium - latin */
+@font-face {
+  font-family: 'DIN Next';
   font-style: normal;
-  font-weight: 600;
+  font-weight: 500;
-  src: url("\#{resource['poseidon-layout:fonts/open-sans-v18-latin-ext_latin-600.eot']}"); /* IE9 Compat Modes */
+  src: url("#{resource['poseidon-layout:fonts/din-next-medium.otf']}")
-  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
+    format('opentype');
-       url("\#{resource['poseidon-layout:fonts/open-sans-v18-latin-ext_latin-600.eot']}?#iefix") format('embedded-opentype'), /* IE6-IE8 */
-       url("\#{resource['poseidon-layout:fonts/open-sans-v18-latin-ext_latin-600.woff2']}") format('woff2'), /* Super Modern Browsers */
-       url("\#{resource['poseidon-layout:fonts/open-sans-v18-latin-ext_latin-600.woff']}") format('woff'), /* Modern Browsers */
-       url("\#{resource['poseidon-layout:fonts/open-sans-v18-latin-ext_latin-600.ttf']}") format('truetype'), /* Safari, Android, iOS */
-       url("\#{resource['poseidon-layout:fonts/open-sans-v18-latin-ext_latin-600.svg']}#OpenSans") format('svg'); /* Legacy iOS */
 }
-/* open-sans-700 - latin */
+/* din-next-medium-italic - latin */
 @font-face {
-  font-family: 'Open Sans';
+  font-family: 'DIN Next';
+  font-style: italic;
+  font-weight: 500;
+  src: url("#{resource['poseidon-layout:fonts/din-next-medium-italic.otf']}")
+    format('opentype');
+}
+/* din-next-bold - latin */
+@font-face {
+  font-family: 'DIN Next';
   font-style: normal;
   font-weight: 700;
-  src: url("\#{resource['poseidon-layout:fonts/open-sans-v18-latin-ext_latin-700.eot']}"); /* IE9 Compat Modes */
+  src: url("#{resource['poseidon-layout:fonts/din-next-bold.otf']}")
-  src: local('Open Sans Bold'), local('OpenSans-Bold'),
+    format('opentype');
-       url("\#{resource['poseidon-layout:fonts/open-sans-v18-latin-ext_latin-700.eot']}?#iefix") format('embedded-opentype'), /* IE6-IE8 */
+}
-       url("\#{resource['poseidon-layout:fonts/open-sans-v18-latin-ext_latin-700.woff2']}") format('woff2'), /* Super Modern Browsers */
+/* din-next-bold-italic - latin */
-       url("\#{resource['poseidon-layout:fonts/open-sans-v18-latin-ext_latin-700.woff']}") format('woff'), /* Modern Browsers */
+@font-face {
-       url("\#{resource['poseidon-layout:fonts/open-sans-v18-latin-ext_latin-700.ttf']}") format('truetype'), /* Safari, Android, iOS */
+  font-family: 'DIN Next';
-       url("\#{resource['poseidon-layout:fonts/open-sans-v18-latin-ext_latin-700.svg']}#OpenSans") format('svg'); /* Legacy iOS */
+  font-style: italic;
+  font-weight: 700;
+  src: url("#{resource['poseidon-layout:fonts/din-next-bold-italic.otf']}")
+    format('opentype');
+}
+/* din-next-heavy - latin */
+@font-face {
+  font-family: 'DIN Next';
+  font-style: normal;
+  font-weight: 800;
+  src: url("#{resource['poseidon-layout:fonts/din-next-heavy.otf']}")
+    format('opentype');
+}
+/* din-next-heavy-italic - latin */
+@font-face {
+  font-family: 'DIN Next';
+  font-style: italic;
+  font-weight: 800;
+  src: url("#{resource['poseidon-layout:fonts/din-next-heavy-italic.otf']}")
+    format('opentype');
+}
+/* din-next-black - latin */
+@font-face {
+  font-family: 'DIN Next';
+  font-style: normal;
+  font-weight: 900;
+  src: url("#{resource['poseidon-layout:fonts/din-next-black.otf']}")
+    format('opentype');
+}
+/* din-next-black-italic - latin */
+@font-face {
+  font-family: 'DIN Next';
+  font-style: italic;
+  font-weight: 900;
+  src: url("#{resource['poseidon-layout:fonts/din-next-black-italic.otf']}")
+    format('opentype');
 }

src/main/webapp/resources/sass/layout/_main.scss

@@ -4,7 +4,7 @@ html {
 }
  
 body {
-    font-family: 'Open Sans';
+    font-family: 'DIN Next';
     font-size: $fontSize;
     color: $textColor;
     -webkit-font-smoothing: antialiased;

src/main/webapp/resources/sass/layout/_typography.scss

@@ -38,7 +38,7 @@ mark {
     background: #FFF8E1;
     padding: .25rem .4rem;
     border-radius: $borderRadius;
-    font-family: 'Open Sans';
+    font-family: 'DIN Next';
 }
 
 blockquote {

src/main/webapp/resources/sass/variables/layout/_layout_common.scss

@@ -1,6 +1,6 @@
 //general
 $fontSize:14px !default;
-$fontFamily: 'Open Sans' !default;
+$fontFamily: 'DIN Next' !default;
 $mobileBreakpoint:991px !default;
 $borderRadius:5px !default;
 $animationDuration:.2s !default;

src/main/webapp/resources/sass/variables/layout/_layout_light.scss

@@ -3,7 +3,7 @@ $textColor:#515C66 !default;
 $textSecondaryColor:#657380 !default;
 
 $contentBgColor:#FDFEFF !default;
-$contentAltBgColor:#E8F1F8 !default;
+$contentAltBgColor:#ffffff !default;
 $dividerColor: #E8F1F8 !default;
 
 $menuTooltipBgColor:#1c202c !default;

src/main/webapp/resources/sass/variables/theme/_theme_dark.scss

@@ -29,7 +29,7 @@ $hoverBg:rgba(#4E565F,.7) !default;
 
 //global 
 $fontSize:1rem !default;
-$fontFamily:'Open Sans' !default;
+$fontFamily:'DIN Next' !default;
 $textColor:$shade000 !default;
 $transitionDuration:.2s !default;
 $transition:background-color $transitionDuration, color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration !default;

src/main/webapp/resources/sass/variables/theme/_theme_dim.scss

@@ -29,7 +29,7 @@ $hoverBg: rgba(#495771,.7) !default;
 
 //global 
 $fontSize:1rem !default;
-$fontFamily:'Open Sans' !default;
+$fontFamily:'DIN Next' !default;
 $textColor:$shade000 !default;
 $transitionDuration:.2s !default;
 $transition:background-color $transitionDuration, color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration !default;

src/main/webapp/resources/sass/variables/theme/_theme_light.scss

@@ -27,7 +27,7 @@ $shade900:#252F44 !default;    //unused
 
 //global 
 $fontSize:1rem !default;
-$fontFamily:'Open Sans' !default;
+$fontFamily:'DIN Next' !default;
 $textColor:$shade700 !default;
 $transitionDuration:.2s !default;
 $transition:background-color $transitionDuration, color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration !default;

src/main/webapp/template/config.xhtml

@@ -1,109 +1,210 @@
-<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core"
+<ui:composition
-    xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets"
+  xmlns="http://www.w3.org/1999/xhtml"
-    xmlns:p="http://primefaces.org/ui">
+  xmlns:f="http://java.sun.com/jsf/core"
-
+  xmlns:h="http://java.sun.com/jsf/html"
-    <div id="layout-config" class="layout-config">
+  xmlns:ui="http://java.sun.com/jsf/facelets"
-        <div class="layout-config-content">
+  xmlns:p="http://primefaces.org/ui"
-            <a href="#" id="layout-config-button" class="layout-config-button">
+>
-                <i class="pi pi-cog"/>
+  <div id="layout-config" class="layout-config">
-            </a>
+    <div class="layout-config-content">
-            <h:form id="config-form" styleClass="layout-config-form">
+      <a href="#" id="layout-config-button" class="layout-config-button">
-                <div class="layout-config-header">
+        <i class="pi pi-cog" />
-                    <h5>Theme Customization</h5>
+      </a>
-                    <span>Poseidon offers different themes for layout, topbar, menu etc.</span>
+      <h:form id="config-form" styleClass="layout-config-form">
-                </div>
+        <div class="layout-config-header">
-
+          <h5>Theme Customization</h5>
-                <p:outputPanel id="lightdark-panel" styleClass="layout-config-section options">
+          <span
-                    <span class="section-name">Layout Mode</span>
+            >Poseidon offers different themes for layout, topbar, menu
-                    <div class="grid layout-config-options">
+            etc.</span
-                        <p:selectOneRadio layout="responsive" columns="3" value="#{guestPreferences.darkMode}" onchange="PrimeFaces.PoseidonConfigurator.changeLayout('#{guestPreferences.componentTheme}', event.target.value)"   >
+          >
-                            <f:selectItem itemLabel="Light" itemValue="light" />
-                            <f:selectItem itemLabel="Dark" itemValue="dark" />
-                            <f:selectItem itemLabel="Dim" itemValue="dim" />
-                            <p:ajax onstart="PrimeFaces.PoseidonConfigurator.beforeResourceChange()" update="config-form logolink footerlogolink"/>
-                        </p:selectOneRadio>
-                    </div>
-                </p:outputPanel>
-
-                <p:outputPanel id="menumodes-panel" styleClass="layout-config-section options">
-                    <span class="section-name">Menu Mode</span>
-                    <div class="grid layout-config-options">
-                        <p:selectOneRadio layout="responsive" columns="2" value="#{guestPreferences.menuMode}" onchange="PrimeFaces.PoseidonConfigurator.changeMenuMode(event.target.value)" >
-                            <f:selectItem itemLabel="Static" itemValue="layout-static layout-static-active" />
-                            <f:selectItem itemLabel="Overlay" itemValue="layout-overlay" />
-                            <f:selectItem itemLabel="Horizontal" itemValue="layout-horizontal" />
-                            <p:ajax update="menumodes-panel" />
-                        </p:selectOneRadio>
-                    </div>
-                </p:outputPanel>
-
-                <p:outputPanel id="menuthemes-panel" styleClass="layout-config-section options">
-                    <span class="section-name">Menu Theme</span>
-                    <div class="grid layout-config-options">
-                        <p:selectOneRadio layout="responsive" columns="3" value="#{guestPreferences.menuTheme}" onchange="PrimeFaces.PoseidonConfigurator.changeSectionTheme(event.target.value , 'layout-menu')"   >
-                            <f:selectItem itemLabel="Light" itemValue="light" itemDisabled="#{guestPreferences.darkMode != 'light'}"  />
-                            <f:selectItem itemLabel="Dark" itemValue="dark" itemDisabled="#{guestPreferences.darkMode != 'light'}"  />
-                            <f:selectItem itemLabel="Dim" itemValue="dim" itemDisabled="#{guestPreferences.darkMode != 'light'}" />
-                            <p:ajax update="logolink menuthemes-panel"/>
-                        </p:selectOneRadio>
-                    </div>
-                </p:outputPanel>
-
-                <p:outputPanel id="topbarthemes-panel" styleClass="layout-config-section options">
-                    <span class="section-name">Topbar Mode</span>
-                    <div class="grid layout-config-options">
-                        <p:selectOneRadio layout="responsive" columns="3" value="#{guestPreferences.topbarTheme}" onchange="PrimeFaces.PoseidonConfigurator.changeSectionTheme(event.target.value , 'layout-topbar')"   >
-                            <f:selectItem itemLabel="Light" itemValue="light" itemDisabled="#{guestPreferences.darkMode != 'light'}"  />
-                            <f:selectItem itemLabel="Dark" itemValue="dark" itemDisabled="#{guestPreferences.darkMode != 'light'}" />
-                            <f:selectItem itemLabel="Dim" itemValue="dim" itemDisabled="#{guestPreferences.darkMode != 'light'}" />
-                            <p:ajax update="logolink config-form"/>
-                        </p:selectOneRadio>
-                    </div>
-                </p:outputPanel>
-
-                <p:outputPanel id="outlined-panel" styleClass="layout-config-section options">
-                    <span class="section-name">Form Type</span>
-                    <div class="grid layout-config-options">
-                        <p:selectOneRadio layout="responsive" columns="2" value="#{guestPreferences.inputStyle}"
-                                          onchange="PrimeFaces.PoseidonConfigurator.updateInputStyle(event.target.value)">
-                            <f:selectItem itemLabel="Outlined" itemValue="outlined" />
-                            <f:selectItem itemLabel="Filled" itemValue="filled" />
-                            <p:ajax />
-                        </p:selectOneRadio>
-                    </div>
-                </p:outputPanel>
-
-                <p:outputPanel id="orientation-panel" styleClass="layout-config-section dark">
-                    <span class="section-name">RTL Mode</span>
-                    <p:inputSwitch id="layout-switch-2" value="#{guestPreferences.orientationRTL}" onchange="PrimeFaces.PoseidonConfigurator.changeMenuToRTL()">
-                        <p:ajax onstart="PrimeFaces.PoseidonConfigurator.beforeResourceChange()" update="config-form" />
-                    </p:inputSwitch>
-                </p:outputPanel>
-
-                <p:outputPanel id="componentthemes-panel" styleClass="layout-config-section colors">
-                    <span class="section-name">Component Colors</span>
-                    <div class="grid layout-config-colors">
-                        <ui:repeat value="#{guestPreferences.componentThemes}" var="componentTheme">
-                            <div class="col col-fixed">
-                                <p:commandLink styleClass="layout-config-option" 
-                                    actionListener="#{guestPreferences.setComponentTheme(componentTheme.file)}" process="@this"
-                                    update=":config-form"
-                                    onstart="PrimeFaces.PoseidonConfigurator.beforeResourceChange()"
-                                    oncomplete="PrimeFaces.PoseidonConfigurator.changeComponentsTheme('#{componentTheme.file}', '#{guestPreferences.darkMode}')">
-                                    <span class="layout-config-option-color"
-                                        style="background-color: #{componentTheme.color};" title="#{componentTheme.name}"></span>
-                                    <ui:fragment rendered="#{componentTheme.file eq guestPreferences.componentTheme}">
-                                        <span class="layout-config-option-check-mask">
-                                            <i class="pi pi-check"></i>
-                                        </span>
-                                    </ui:fragment>
-                                </p:commandLink>
-                            </div>
-                        </ui:repeat>
-                    </div>
-                </p:outputPanel>
-
-            </h:form>
         </div>
+
+        <p:outputPanel
+          id="lightdark-panel"
+          styleClass="layout-config-section options"
+        >
+          <span class="section-name">Layout Mode</span>
+          <div class="grid layout-config-options">
+            <p:selectOneRadio
+              layout="responsive"
+              columns="3"
+              value="#{guestPreferences.darkMode}"
+              onchange="PrimeFaces.PoseidonConfigurator.changeLayout('#{guestPreferences.componentTheme}', event.target.value)"
+            >
+              <f:selectItem itemLabel="Light" itemValue="light" />
+              <f:selectItem itemLabel="Dark" itemValue="dark" />
+              <f:selectItem itemLabel="Dim" itemValue="dim" />
+              <p:ajax
+                onstart="PrimeFaces.PoseidonConfigurator.beforeResourceChange()"
+                update="config-form logolink"
+              />
+            </p:selectOneRadio>
+          </div>
+        </p:outputPanel>
+
+        <p:outputPanel
+          id="menumodes-panel"
+          styleClass="layout-config-section options"
+        >
+          <span class="section-name">Menu Mode</span>
+          <div class="grid layout-config-options">
+            <p:selectOneRadio
+              layout="responsive"
+              columns="2"
+              value="#{guestPreferences.menuMode}"
+              onchange="PrimeFaces.PoseidonConfigurator.changeMenuMode(event.target.value)"
+            >
+              <f:selectItem
+                itemLabel="Static"
+                itemValue="layout-static layout-static-active"
+              />
+              <f:selectItem itemLabel="Overlay" itemValue="layout-overlay" />
+              <f:selectItem
+                itemLabel="Horizontal"
+                itemValue="layout-horizontal"
+              />
+              <p:ajax update="menumodes-panel" />
+            </p:selectOneRadio>
+          </div>
+        </p:outputPanel>
+
+        <p:outputPanel
+          id="menuthemes-panel"
+          styleClass="layout-config-section options"
+        >
+          <span class="section-name">Menu Theme</span>
+          <div class="grid layout-config-options">
+            <p:selectOneRadio
+              layout="responsive"
+              columns="3"
+              value="#{guestPreferences.menuTheme}"
+              onchange="PrimeFaces.PoseidonConfigurator.changeSectionTheme(event.target.value , 'layout-menu')"
+            >
+              <f:selectItem
+                itemLabel="Light"
+                itemValue="light"
+                itemDisabled="#{guestPreferences.darkMode != 'light'}"
+              />
+              <f:selectItem
+                itemLabel="Dark"
+                itemValue="dark"
+                itemDisabled="#{guestPreferences.darkMode != 'light'}"
+              />
+              <f:selectItem
+                itemLabel="Dim"
+                itemValue="dim"
+                itemDisabled="#{guestPreferences.darkMode != 'light'}"
+              />
+              <p:ajax update="logolink menuthemes-panel" />
+            </p:selectOneRadio>
+          </div>
+        </p:outputPanel>
+
+        <p:outputPanel
+          id="topbarthemes-panel"
+          styleClass="layout-config-section options"
+        >
+          <span class="section-name">Topbar Mode</span>
+          <div class="grid layout-config-options">
+            <p:selectOneRadio
+              layout="responsive"
+              columns="3"
+              value="#{guestPreferences.topbarTheme}"
+              onchange="PrimeFaces.PoseidonConfigurator.changeSectionTheme(event.target.value , 'layout-topbar')"
+            >
+              <f:selectItem
+                itemLabel="Light"
+                itemValue="light"
+                itemDisabled="#{guestPreferences.darkMode != 'light'}"
+              />
+              <f:selectItem
+                itemLabel="Dark"
+                itemValue="dark"
+                itemDisabled="#{guestPreferences.darkMode != 'light'}"
+              />
+              <f:selectItem
+                itemLabel="Dim"
+                itemValue="dim"
+                itemDisabled="#{guestPreferences.darkMode != 'light'}"
+              />
+              <p:ajax update="logolink config-form" />
+            </p:selectOneRadio>
+          </div>
+        </p:outputPanel>
+
+        <p:outputPanel
+          id="outlined-panel"
+          styleClass="layout-config-section options"
+        >
+          <span class="section-name">Form Type</span>
+          <div class="grid layout-config-options">
+            <p:selectOneRadio
+              layout="responsive"
+              columns="2"
+              value="#{guestPreferences.inputStyle}"
+              onchange="PrimeFaces.PoseidonConfigurator.updateInputStyle(event.target.value)"
+            >
+              <f:selectItem itemLabel="Outlined" itemValue="outlined" />
+              <f:selectItem itemLabel="Filled" itemValue="filled" />
+              <p:ajax />
+            </p:selectOneRadio>
+          </div>
+        </p:outputPanel>
+
+        <p:outputPanel
+          id="orientation-panel"
+          styleClass="layout-config-section dark"
+        >
+          <span class="section-name">RTL Mode</span>
+          <p:inputSwitch
+            id="layout-switch-2"
+            value="#{guestPreferences.orientationRTL}"
+            onchange="PrimeFaces.PoseidonConfigurator.changeMenuToRTL()"
+          >
+            <p:ajax
+              onstart="PrimeFaces.PoseidonConfigurator.beforeResourceChange()"
+              update="config-form"
+            />
+          </p:inputSwitch>
+        </p:outputPanel>
+
+        <p:outputPanel
+          id="componentthemes-panel"
+          styleClass="layout-config-section colors"
+        >
+          <span class="section-name">Component Colors</span>
+          <div class="grid layout-config-colors">
+            <ui:repeat
+              value="#{guestPreferences.componentThemes}"
+              var="componentTheme"
+            >
+              <div class="col col-fixed">
+                <p:commandLink
+                  styleClass="layout-config-option"
+                  actionListener="#{guestPreferences.setComponentTheme(componentTheme.file)}"
+                  process="@this"
+                  update=":config-form"
+                  onstart="PrimeFaces.PoseidonConfigurator.beforeResourceChange()"
+                  oncomplete="PrimeFaces.PoseidonConfigurator.changeComponentsTheme('#{componentTheme.file}', '#{guestPreferences.darkMode}')"
+                >
+                  <span
+                    class="layout-config-option-color"
+                    style="background-color: #{componentTheme.color}"
+                    title="#{componentTheme.name}"
+                  ></span>
+                  <ui:fragment
+                    rendered="#{componentTheme.file eq guestPreferences.componentTheme}"
+                  >
+                    <span class="layout-config-option-check-mask">
+                      <i class="pi pi-check"></i>
+                    </span>
+                  </ui:fragment>
+                </p:commandLink>
+              </div>
+            </ui:repeat>
+          </div>
+        </p:outputPanel>
+      </h:form>
     </div>
+  </div>
 </ui:composition>

src/main/webapp/template/footer.xhtml

@@ -1,20 +0,0 @@
-<ui:composition 
-    xmlns="http://www.w3.org/1999/xhtml"
-    xmlns:f="http://java.sun.com/jsf/core"
-    xmlns:h="http://java.sun.com/jsf/html"
-    xmlns:ui="http://java.sun.com/jsf/facelets"
-    xmlns:p="http://primefaces.org/ui">
-
-    <h:form prependId="false">
-        <div class="layout-footer">
-            <h:link id="footerlogolink" >
-                <p:graphicImage name="images/#{ guestPreferences.darkMode == 'light' ? 'logo-poseidon.png' : 'logo-poseidon-dark.png'}" library="poseidon-layout" />
-            </h:link>
-            <div class="social-icons">
-                <a><i class="pi pi-github"/></a>
-                <a><i class="pi pi-facebook"/></a>
-                <a><i class="pi pi-twitter"/></a>
-            </div>
-        </div>
-    </h:form>
-</ui:composition>

src/main/webapp/template/template.xhtml

@@ -1,141 +1,210 @@
 <!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml"
+<html
-      xmlns:h="http://java.sun.com/jsf/html"
+  xmlns="http://www.w3.org/1999/xhtml"
-      xmlns:f="http://java.sun.com/jsf/core"
+  xmlns:h="http://java.sun.com/jsf/html"
-      xmlns:ui="http://java.sun.com/jsf/facelets"
+  xmlns:f="http://java.sun.com/jsf/core"
-      xmlns:p="http://primefaces.org/ui">
+  xmlns:ui="http://java.sun.com/jsf/facelets"
+  xmlns:p="http://primefaces.org/ui"
+>
+  <h:head>
+    <f:facet name="first">
+      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+      <meta
+        name="viewport"
+        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
+      />
+      <meta name="apple-mobile-web-app-capable" content="yes" />
+    </f:facet>
+    <title>
+      <ui:insert name="HEAD_TITULO_PAGINA">PrimeFaces Poseidon</ui:insert>
+    </title>
+    <h:outputScript name="js/layout.js" library="poseidon-layout" />
+    <h:outputScript name="js/prism.js" library="poseidon-layout" />
+    <ui:insert name="head" />
+    <script>
+      PrimeFaces.locales['pt_BR'] = {
+        monthNames: [
+          'Janeiro',
+          'Fevereiro',
+          'Março',
+          'Abril',
+          'Maio',
+          'Junho',
+          'Julho',
+          'Agosto',
+          'Setembro',
+          'Outubro',
+          'Novembro',
+          'Dezembro',
+        ],
+        monthNamesShort: [
+          'Jan',
+          'Fev',
+          'Mar',
+          'Abr',
+          'Mai',
+          'Jun',
+          'Jul',
+          'Ago',
+          'Set',
+          'Out',
+          'Nov',
+          'Dez',
+        ],
+        dayNames: [
+          'Domingo',
+          'Segunda-feira',
+          'Terça-feira',
+          'Quarta-feira',
+          'Quinta-feira',
+          'Sexta-feira',
+          'Sábado',
+        ],
+        dayNamesShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'],
+        dayNamesMin: ['D', 'S', 'T', 'Q', 'Q', 'S', 'S'],
+        weekHeader: 'Semana',
+        firstDay: 1,
+        isRTL: false,
+        showMonthAfterYear: false,
+        yearSuffix: '',
+        timeOnlyTitle: 'Somente Hora',
+        timeText: 'Tempo',
+        hourText: 'Hora',
+        minuteText: 'Minuto',
+        secondText: 'Segundo',
+        millisecondText: 'Milissegundo',
+        ampm: false,
+        month: 'Mês',
+        week: 'Semana',
+        day: 'Dia',
+        allDayText: 'Dia Todo',
+        today: 'Hoje',
+        now: 'Agora',
+        clear: 'Limpar',
+        aria: {
+          close: 'Fechar',
+          previous: 'Anterior',
+          next: 'Próximo',
+        },
+      };
+    </script>
+  </h:head>
 
-    <h:head>
+  <h:body styleClass="main-body #{guestPreferences.inputStyleClass}">
-        <f:facet name="first">
+    <div
-            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+      class="layout-wrapper layout-topbar-#{guestPreferences.topbarTheme} layout-static-active layout-menu-#{guestPreferences.menuTheme} #{guestPreferences.menuMode} #{guestPreferences.orientationRTL ? 'layout-rtl' : null}"
-            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    >
-            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
+      <ui:include src="./topbar.xhtml" />
-            <meta name="apple-mobile-web-app-capable" content="yes" />
+      <ui:include src="./menutemplate.xhtml" />
-        </f:facet>
-        <title><ui:insert name="HEAD_TITULO_PAGINA">PrimeFaces Poseidon</ui:insert></title>
-        <h:outputScript name="js/layout.js" library="poseidon-layout" />
-        <h:outputScript name="js/prism.js" library="poseidon-layout" />
-        <ui:insert name="head"/>
-		<script>
-			PrimeFaces.locales['pt_BR'] = {
-    monthNames: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
-    monthNamesShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
-    dayNames: ['Domingo', 'Segunda-feira', 'Terça-feira', 'Quarta-feira', 'Quinta-feira', 'Sexta-feira', 'Sábado'],
-    dayNamesShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'],
-    dayNamesMin: ['D', 'S', 'T', 'Q', 'Q', 'S', 'S'],
-    weekHeader: 'Semana',
-    firstDay: 1,
-    isRTL: false,
-    showMonthAfterYear: false,
-    yearSuffix: '',
-    timeOnlyTitle: 'Somente Hora',
-    timeText: 'Tempo',
-    hourText: 'Hora',
-    minuteText: 'Minuto',
-    secondText: 'Segundo',
-    millisecondText: 'Milissegundo',
-    ampm: false,
-    month: 'Mês',
-    week: 'Semana',
-    day: 'Dia',
-    allDayText: 'Dia Todo',
-    today: 'Hoje',
-    now: 'Agora',
-    clear: 'Limpar',
-    aria: {
-       close: 'Fechar',
-       previous: 'Anterior',
-       next: 'Próximo',
-   }
-};
 
-		</script>
+      <ui:include src="./rightpanel.xhtml" />
-    </h:head>
+      <ui:include src="./config.xhtml" />
 
-    <h:body styleClass="main-body #{guestPreferences.inputStyleClass}">
+      <div class="layout-main">
+        <ui:include src="./breadcrumb.xhtml" />
+        <div class="layout-content">
+          <h:form prependId="false">
+            <div class="grid crud-demo">
+              <div class="col-12">
+                <div class="card">
+                  <p:growl id="panelAlerta" showDetail="true" />
 
-        <div class="layout-wrapper layout-topbar-#{guestPreferences.topbarTheme} layout-static-active layout-menu-#{guestPreferences.menuTheme}  #{guestPreferences.menuMode} #{guestPreferences.orientationRTL ? 'layout-rtl' : null}">
+                  <p:toolbar styleClass="mb-4">
-            <ui:include src="./topbar.xhtml" />
+                    <p:toolbarGroup>
-            <ui:include src="./menutemplate.xhtml" />
+                      <ui:insert name="MENU_BOTOES"> </ui:insert>
-
+                    </p:toolbarGroup>
-            <ui:include src="./rightpanel.xhtml" />
+                    <p:toolbarGroup>
-            <ui:include src="./config.xhtml" />
+                      <ui:insert name="MENU_FILTRO"> </ui:insert>
-
+                    </p:toolbarGroup>
-            <div class="layout-main">
+                  </p:toolbar>
-                <ui:include src="./breadcrumb.xhtml" /> 
-                <div class="layout-content">
-
-
-                    <h:form prependId="false">
-                        <div class="grid crud-demo">
-                            <div class="col-12">
-                                <div class="card">
-                                    <p:growl id="panelAlerta" showDetail="true" />
-
-                                    <p:toolbar styleClass="mb-4">
-                                        <p:toolbarGroup>
-                                            <ui:insert name="MENU_BOTOES">
-
-                                            </ui:insert>
-
-                                        </p:toolbarGroup>
-                                        <p:toolbarGroup>
-                                            <ui:insert name="MENU_FILTRO">
-
-                                            </ui:insert>
-                                        </p:toolbarGroup>
-                                    </p:toolbar>
-
-
-                                    <!-- TABELA -->
-                                    <h:panelGroup layout="block" id="form_formulario">
-                                        <p:messages id="messages" showSummary="true" closable="true" />
-                                        <h:panelGroup layout="block" id="panel_formulario">
-                                            <ui:insert name="FORMULARIO" ></ui:insert>
-                                        </h:panelGroup>
-                                    </h:panelGroup>
-                                    <ui:insert name="LIVRE"></ui:insert>
-
-                                    <p:confirmDialog widgetVar="deleteDialog" showEffect="fade" width="300" message="Deseja excluir?" header="Confirmar" severity="warn">
-                                        <p:commandButton value="Sim" icon="pi pi-check" process="@this" oncomplete="PF('deleteDialog').hide()"/>
-                                        <p:commandButton value="Não" type="button" styleClass="ui-button-secondary" icon="pi pi-times" onclick="PF('deleteDialog').hide()" />
-                                    </p:confirmDialog>
-
-                                    <p:confirmDialog global="true" showEffect="fade" width="300">
-                                        <p:commandButton value="Sim" type="button" styleClass="ui-confirmdialog-yes" icon="pi pi-check" />
-                                        <p:commandButton value="Não" type="button" styleClass="ui-confirmdialog-no ui-button-secondary" icon="pi pi-times" />
-                                    </p:confirmDialog>
-                                </div>
-                            </div>
-                        </div>
-                    </h:form>
 
+                  <!-- TABELA -->
+                  <h:panelGroup layout="block" id="form_formulario">
+                    <p:messages
+                      id="messages"
+                      showSummary="true"
+                      closable="true"
+                    />
+                    <h:panelGroup layout="block" id="panel_formulario">
+                      <ui:insert name="FORMULARIO"></ui:insert>
+                    </h:panelGroup>
+                  </h:panelGroup>
+                  <ui:insert name="LIVRE"></ui:insert>
 
+                  <p:confirmDialog
+                    widgetVar="deleteDialog"
+                    showEffect="fade"
+                    width="300"
+                    message="Deseja excluir?"
+                    header="Confirmar"
+                    severity="warn"
+                  >
+                    <p:commandButton
+                      value="Sim"
+                      icon="pi pi-check"
+                      process="@this"
+                      oncomplete="PF('deleteDialog').hide()"
+                    />
+                    <p:commandButton
+                      value="Não"
+                      type="button"
+                      styleClass="ui-button-secondary"
+                      icon="pi pi-times"
+                      onclick="PF('deleteDialog').hide()"
+                    />
+                  </p:confirmDialog>
 
+                  <p:confirmDialog global="true" showEffect="fade" width="300">
+                    <p:commandButton
+                      value="Sim"
+                      type="button"
+                      styleClass="ui-confirmdialog-yes"
+                      icon="pi pi-check"
+                    />
+                    <p:commandButton
+                      value="Não"
+                      type="button"
+                      styleClass="ui-confirmdialog-no ui-button-secondary"
+                      icon="pi pi-times"
+                    />
+                  </p:confirmDialog>
                 </div>
-
+              </div>
-                <ui:include src="./footer.xhtml" />
             </div>
-            <div class="layout-mask modal-in"></div>
+          </h:form>
         </div>
+      </div>
+      <div class="layout-mask modal-in"></div>
+    </div>
 
+    <p:ajaxStatus styleClass="layout-ajax-loader">
+      <f:facet name="start">
+        <i
+          class="pi pi-spin pi-spinner layout-ajax-loader-icon"
+          aria-hidden="true"
+        />
+      </f:facet>
 
-        <p:ajaxStatus styleClass="layout-ajax-loader">
+      <f:facet name="complete">
-            <f:facet name="start">
+        <h:outputText value="" />
-                <i class="pi pi-spin pi-spinner layout-ajax-loader-icon" aria-hidden="true"/>
+      </f:facet>
-            </f:facet>
+    </p:ajaxStatus>
-
-            <f:facet name="complete">
-                <h:outputText value="" />
-            </f:facet>
-        </p:ajaxStatus>
-
-        <h:outputStylesheet name="css/primeflex.min.css" library="poseidon-layout" />
-        <h:outputStylesheet name="css/primeicons.css" library="poseidon-layout" />
-        <h:outputStylesheet name="css/demo-#{guestPreferences.darkMode}.css" library="demo" />
-        <h:outputStylesheet name="css/layout-#{guestPreferences.darkMode}.css" library="poseidon-layout" />
-		<h:outputStylesheet name="css/framework.css" library="framework" />
-        <p:log id="log" rendered="false"/>
-    </h:body>
 
+    <h:outputStylesheet
+      name="css/primeflex.min.css"
+      library="poseidon-layout"
+    />
+    <h:outputStylesheet name="css/primeicons.css" library="poseidon-layout" />
+    <h:outputStylesheet
+      name="css/demo-#{guestPreferences.darkMode}.css"
+      library="demo"
+    />
+    <h:outputStylesheet
+      name="css/layout-#{guestPreferences.darkMode}.css"
+      library="poseidon-layout"
+    />
+    <h:outputStylesheet name="css/framework.css" library="framework" />
+    <p:log id="log" rendered="false" />
+  </h:body>
 </html>

target/agtemplate-1.0.0/WEB-INF/web.xml

@@ -55,6 +55,10 @@
     <welcome-file-list>
         <welcome-file>index.xhtml</welcome-file>
     </welcome-file-list>
+     <mime-mapping>
+        <extension>otf</extension>
+        <mime-type>application/font-otf</mime-type>
+    </mime-mapping>
     <mime-mapping>
         <extension>ttf</extension>
         <mime-type>application/font-sfnt</mime-type>
@@ -75,6 +79,10 @@
         <extension>eot?#iefix</extension>
         <mime-type>application/vnd.ms-fontobject</mime-type>
     </mime-mapping>
+    <context-param> 
+        <param-name>facelets.REFRESH_PERIOD</param-name> 
+        <param-value>0</param-value> 
+    </context-param>
     <mime-mapping>
         <extension>svg</extension>
         <mime-type>image/svg+xml</mime-type>

target/agtemplate-1.0.0/resources/demo/css/demo-light.css

@@ -1,5 +1,5 @@
 :root {
-  --content-alt-bg-color:#E8F1F8;
+  --content-alt-bg-color:#ffffff;
 }
 
 .order-badge {

target/agtemplate-1.0.0/resources/demo/images/dashboard/asset-deals.svg

@@ -3,7 +3,7 @@
         <circle cx="46.4" cy="142.78" r="14.22" fill="#FFF"/>
         <path stroke="#FFF" stroke-dasharray="6.32 9.48" stroke-width="1.264" d="M99.33 169.64c38.831 0 70.31-31.479 70.31-70.31s-31.479-70.31-70.31-70.31-70.31 31.479-70.31 70.31 31.479 70.31 70.31 70.31z" opacity=".2"/>
         <path stroke="#FFF" stroke-dasharray="285.98 1579998.463" stroke-linecap="round" stroke-width="6.32" d="M45.47 144.524c24.96 29.747 69.308 33.627 99.054 8.667 29.747-24.96 33.627-69.309 8.667-99.055-24.96-29.747-69.309-33.627-99.055-8.667-29.747 24.96-33.627 69.309-8.667 99.055z"/>
-        <text fill="#FFF" font-family="OpenSans, Open Sans" font-size="37.92">
+        <text fill="#FFF" font-family="OpenSans, DIN Next" font-size="37.92">
             <tspan x="62.2" y="114.26">72%</tspan>
         </text>
     </g>