Deploying to gh-pages from @ 704b5bf 🚀

assets/stackblitzes/formly-filter/formly-filter-horizontal/stackblitz.html

@@ -356,7 +356,6 @@ <h3>Loading &laquo; formly-filter - formly-filter-horizontal &raquo; demo</h3>
       type: &#39;multicheckbox&#39;,
       props: {
         label: &#39;Status&#39;,
-        group: &#39;popover&#39;,
         options: [
           {
             value: &#39;active&#39;,
@@ -378,7 +377,6 @@ <h3>Loading &laquo; formly-filter - formly-filter-horizontal &raquo; demo</h3>
       type: &#39;multicheckbox&#39;,
       props: {
         label: &#39;Socio-Economic Status&#39;,
-        group: &#39;popover&#39;,
         options: [
           {
             value: &#39;vet&#39;,
@@ -399,7 +397,6 @@ <h3>Loading &laquo; formly-filter - formly-filter-horizontal &raquo; demo</h3>
       key: &#39;dateRange&#39;,
       props: {
         label: &#39;Date Range&#39;,
-        group: &#39;popover&#39;,
         autoClose: &#39;false&#39;,
       },
       fieldGroup: [
@@ -467,7 +464,6 @@ <h3>Loading &laquo; formly-filter - formly-filter-horizontal &raquo; demo</h3>
       type: &#39;daterangepickerv2&#39;,
       hide: true,
       props: {
-        group: &#39;popover&#39;,
         label: &#39;Expiration Date Range&#39;,
         minDate: new Date(2019, 9, 5),
         maxDate: new Date(2020, 11, 15),
@@ -486,7 +482,6 @@ <h3>Loading &laquo; formly-filter - formly-filter-horizontal &raquo; demo</h3>
       type: &#39;input&#39;,
       hide: true,
       props: {
-        group: &#39;popover&#39;,
         label: &#39;Entity Name&#39;,
         placeholder: &#39;eg: Acme Corporation&#39;,
         description: &#39;Enter the name of your entity.&#39;,

assets/stackblitzes/formly-filter/formly-filter-introduction/stackblitz.html

@@ -338,6 +338,7 @@ <h3>Loading &laquo; formly-filter - formly-filter-introduction &raquo; demo</h3>
 @Component({
   selector: &#39;sds-formly-filter-introduction&#39;,
   templateUrl: &#39;./formly-filter-introduction.component.html&#39;,
+  preserveWhitespaces: true,
 })
 export class FormlyFilterIntroductionComponent {
   constructor() {}
@@ -348,6 +349,50 @@ <h3>Loading &laquo; formly-filter - formly-filter-introduction &raquo; demo</h3>
   Formly filter provides an filter for text to formly forms. This filter supports a number of features to inform users
   what sort of filter is expected.
 &lt;/p&gt;
+
+&lt;h2&gt;Horizontal Filters 17.0.9&lt;/h2&gt;
+&lt;p&gt;Below are a couple of possible changes to check after updating to 17.0.9&lt;/p&gt;
+&lt;h3&gt;Field Labels Required&lt;/h3&gt;
+&lt;p&gt;
+  Going forward each element of the fields array that is passed into formly must have a label to be displayed. This
+  label will be used to label the dropdown in the horizontal filters toolbar. If a label is not provided, the field will
+  not be shown within horizontal filters.
+&lt;/p&gt;
+&lt;p&gt;
+  Below is a barebones example of the expected structure for a horizontal filter. Note that label &lt;i&gt;Status&lt;/i&gt; is
+  provided within the props field of this FormlyFieldConfig
+&lt;/p&gt;
+&lt;code&gt;
+  fields: FormlyFieldConfig&amp;#91;&amp;#93; = &amp;#91;&lt;br /&gt;
+  &amp;emsp;&amp;#123;&lt;br /&gt;
+  &amp;emsp;&amp;emsp;key: &#39;status&#39;,&lt;br /&gt;
+  &amp;emsp;&amp;emsp;type: &#39;multicheckbox&#39;,&lt;br /&gt;
+  &amp;emsp;&amp;emsp;props: &amp;#123;&lt;br /&gt;
+  &amp;emsp;&amp;emsp;&amp;emsp;label: &#39;Status&#39;,&lt;br /&gt;
+  &amp;emsp;&amp;emsp;&amp;emsp;options: &amp;#91;&lt;br /&gt;
+  &amp;emsp;&amp;emsp;&amp;emsp;&amp;emsp;&amp;#123;&lt;br /&gt;
+  &amp;emsp;&amp;emsp;&amp;emsp;&amp;emsp;&amp;emsp;value: &#39;active&#39;,&lt;br /&gt;
+  &amp;emsp;&amp;emsp;&amp;emsp;&amp;emsp;&amp;emsp;label: &#39;Active&#39;,&lt;br /&gt;
+  &amp;emsp;&amp;emsp;&amp;emsp;&amp;emsp;&amp;#125;,&lt;br /&gt;
+  &amp;emsp;&amp;emsp;&amp;emsp;&amp;emsp;&amp;#123;&lt;br /&gt;
+  &amp;emsp;&amp;emsp;&amp;emsp;&amp;emsp;&amp;emsp;value: &#39;inactive&#39;,&lt;br /&gt;
+  &amp;emsp;&amp;emsp;&amp;emsp;&amp;emsp;&amp;emsp;label: &#39;Inactive&#39;,&lt;br /&gt;
+  &amp;emsp;&amp;emsp;&amp;emsp;&amp;emsp;&amp;#125;,&lt;br /&gt;
+  &amp;emsp;&amp;emsp;&amp;emsp;&amp;emsp;&amp;#123;&lt;br /&gt;
+  &amp;emsp;&amp;emsp;&amp;emsp;&amp;emsp;&amp;emsp;value: &#39;all&#39;,&lt;br /&gt;
+  &amp;emsp;&amp;emsp;&amp;emsp;&amp;emsp;&amp;emsp;label: &#39;All&#39;,&lt;br /&gt;
+  &amp;emsp;&amp;emsp;&amp;emsp;&amp;emsp;&amp;#125;,&lt;br /&gt;
+  &amp;emsp;&amp;emsp;&amp;emsp;&amp;#93;,&lt;br /&gt;
+  &amp;emsp;&amp;emsp;&amp;#125;,&lt;br /&gt;
+  &amp;emsp;&amp;#125;&lt;br /&gt;
+  &amp;#93;
+&lt;/code&gt;
+&lt;h3&gt;OnInit Hook&lt;/h3&gt;
+&lt;p&gt;
+  Previously the onInit hook could be attached to a field and would trigger as the horizontal filters component loaded
+  in. This is not the case anymore. The onInit hook will now trigger when the popover containing the field is opened,
+  rather than on page load. If some action needs to be taken on page load, please use an Angular lifecycle hook.
+&lt;/p&gt;
 ">
 
   </form>

iframe.html

@@ -363,10 +363,10 @@
             window['TAGS_OPTIONS'] = {"dev-only":{"excludeFromDocsStories":true},"docs-only":{"excludeFromSidebar":true},"test-only":{"excludeFromSidebar":true,"excludeFromDocsStories":true}};</script><script type="module">import './sb-preview/runtime.js';
 
 
-      import './runtime~main.6db72ea5.iframe.bundle.js';
+      import './runtime~main.c36c9943.iframe.bundle.js';
 
       import './6438.d6920161.iframe.bundle.js';
 
-      import './main.3417f18c.iframe.bundle.js';
+      import './main.98db856f.iframe.bundle.js';
 
       import './scripts.js';</script></body></html>

project.json

@@ -1 +1 @@
-{"generatedAt":1725898331043,"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":true,"hasStorybookEslint":false,"refCount":0,"packageManager":{"type":"npm","version":"10.7.0"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/angular","options":{}},"builder":"@storybook/builder-webpack5","renderer":"@storybook/angular","storybookVersion":"8.0.9","storybookVersionSpecifier":"^8.0.0","language":"typescript","storybookPackages":{"@storybook/test":{"version":"8.0.9"},"@storybook/addon-actions":{"version":"8.0.9"},"@storybook/addon-interactions":{"version":"8.0.9"},"@storybook/angular":{"version":"8.0.9"},"@storybook/preset-scss":{"version":"1.0.3"},"storybook":{"version":"8.0.9"}},"addons":{"@storybook/addon-links":{"version":"8.0.9"},"@storybook/addon-essentials":{"version":"8.0.9"},"./source-code-addon":{"version":null}}}
+{"generatedAt":1725913808157,"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":true,"hasStorybookEslint":false,"refCount":0,"packageManager":{"type":"npm","version":"10.7.0"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/angular","options":{}},"builder":"@storybook/builder-webpack5","renderer":"@storybook/angular","storybookVersion":"8.0.9","storybookVersionSpecifier":"^8.0.0","language":"typescript","storybookPackages":{"@storybook/test":{"version":"8.0.9"},"@storybook/addon-actions":{"version":"8.0.9"},"@storybook/addon-interactions":{"version":"8.0.9"},"@storybook/angular":{"version":"8.0.9"},"@storybook/preset-scss":{"version":"1.0.3"},"storybook":{"version":"8.0.9"}},"addons":{"@storybook/addon-links":{"version":"8.0.9"},"@storybook/addon-essentials":{"version":"8.0.9"},"./source-code-addon":{"version":null}}}