genesys-spark-components 4.5.0 → 4.6.0

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-dropdown/gux-form-field-dropdown.js

@@ -10,8 +10,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { h } from "@stencil/core";
 import { buildI18nForComponent } from "../../../../../i18n";
-import { calculateInputDisabledState } from "../../../../../utils/dom/calculate-input-disabled-state";
-import { onInputDisabledStateChange } from "../../../../../utils/dom/on-input-disabled-state-change";
 import { OnMutation } from "../../../../../utils/decorator/on-mutation";
 import { onRequiredChange } from "../../../../../utils/dom/on-attribute-change";
 import { hasSlot } from "../../../../../utils/dom/has-slot";
@@ -30,7 +28,6 @@ export class GuxFormFieldDropdown {
   constructor() {
     this.labelPosition = undefined;
     this.computedLabelPosition = 'above';
-    this.disabled = undefined;
     this.required = undefined;
     this.hasError = false;
     this.hasHelp = false;
@@ -55,9 +52,6 @@ export class GuxFormFieldDropdown {
     trackComponent(this.root, { variant: this.variant });
   }
   disconnectedCallback() {
-    if (this.disabledObserver) {
-      this.disabledObserver.disconnect();
-    }
     if (this.requiredObserver) {
       this.requiredObserver.disconnect();
     }
@@ -71,8 +65,7 @@ export class GuxFormFieldDropdown {
     var _a;
     return (h(GuxFormFieldFieldsetContainer, { labelPosition: this.computedLabelPosition }, h(GuxFormFieldLegendLabel, { position: this.computedLabelPosition, required: this.required, labelText: (_a = this.label) === null || _a === void 0 ? void 0 : _a.textContent }, h("slot", { name: "label", onSlotchange: () => this.setLabel() }), this.renderScreenReaderText(this.getI18nValue('required'), this.required), this.renderScreenReaderText(getSlotTextContent(this.root, 'error'), this.hasError), this.renderScreenReaderText(getSlotTextContent(this.root, 'help'), this.hasHelp)), h("div", { class: "gux-input-and-error-container" }, h("div", { class: {
         'gux-input': true,
-        'gux-input-error': this.hasError,
-        'gux-disabled': this.disabled
+        'gux-input-error': this.hasError
       } }, h("slot", null)), h(GuxFormFieldError, { show: this.hasError }, h("slot", { name: "error" })), h(GuxFormFieldHelp, { show: !this.hasError && this.hasHelp }, h("slot", { name: "help" })))));
   }
   get variant() {
@@ -89,11 +82,7 @@ export class GuxFormFieldDropdown {
     this.listboxElement =
       this.root.querySelector('gux-listbox') ||
         this.root.querySelector('gux-listbox-multi');
-    this.disabled = calculateInputDisabledState(this.dropdownElement);
     this.required = this.dropdownElement.required;
-    this.disabledObserver = onInputDisabledStateChange(this.dropdownElement, (disabled) => {
-      this.disabled = disabled;
-    });
     this.requiredObserver = onRequiredChange(this.dropdownElement, (required) => {
       this.required = required;
     });
@@ -147,7 +136,6 @@ export class GuxFormFieldDropdown {
   static get states() {
     return {
       "computedLabelPosition": {},
-      "disabled": {},
       "required": {},
       "hasError": {},
       "hasHelp": {}

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-dropdown/tests/gux-form-field-dropdown.e2e.js

@@ -17,7 +17,7 @@ describe('gux-form-field-dropdown', () => {
       <gux-form-field-dropdown>
       <gux-dropdown>
         <gux-listbox>
-          <gux-option value="a" disabled>Ant</gux-option>
+          <gux-option value="a" disabled>Ant<span slot="subtext">Small</span></gux-option>
           <gux-option value="b">Bat</gux-option>
           <gux-option value="c">Cat</gux-option>
         </gux-listbox>
@@ -52,7 +52,7 @@ describe('gux-form-field-dropdown', () => {
                 <gux-listbox>
                   <gux-option value="a" disabled>Ant</gux-option>
                   <gux-option value="b">Bat</gux-option>
-                  <gux-option value="c">Cat</gux-option>
+                  <gux-option value="c">Cat<span slot="subtext">Medium</span></gux-option>
                 </gux-listbox>
               </gux-dropdown>
               <label slot="label">Default</label>
@@ -88,7 +88,7 @@ describe('gux-form-field-dropdown', () => {
               <gux-listbox>
                 <gux-option value="a" disabled>Ant</gux-option>
                 <gux-option value="b">Bat</gux-option>
-                <gux-option value="c">Cat</gux-option>
+                <gux-option value="c">Cat<span slot="subtext">Medium</span></gux-option>
               </gux-listbox>
             </gux-dropdown>
             <label slot="label">This will be read by a screen reader</label>
@@ -130,7 +130,7 @@ describe('gux-form-field-dropdown', () => {
                 <gux-listbox-multi>
                   <gux-option-multi value="a" disabled>Ant</gux-option-multi>
                   <gux-option-multi value="b">Bat</gux-option-multi>
-                  <gux-option-multi value="c">Cat</gux-option-multi>
+                  <gux-option-multi value="c">Cat<span slot="subtext">Medium</span></gux-option-multi>
                 </gux-listbox-multi>
               </gux-dropdown-multi>
               <label slot="label">Default</label>
@@ -165,7 +165,7 @@ describe('gux-form-field-dropdown', () => {
               <gux-listbox-multi>
                 <gux-option-multi value="a" disabled>Ant</gux-option-multi>
                 <gux-option-multi value="b">Bat</gux-option-multi>
-                <gux-option-multi value="c">Cat</gux-option-multi>
+                <gux-option-multi value="c">Cat<span slot="subtext">Medium</span></gux-option-multi>
               </gux-listbox-multi>
             </gux-dropdown-multi>
             <label slot="label">Default</label>

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-dropdown/tests/gux-form-field-dropdown.spec.js

@@ -25,7 +25,7 @@ describe('gux-form-field-select', () => {
           <gux-listbox>
             <gux-option value="a" disabled>Ant</gux-option>
             <gux-option value="b">Bat</gux-option>
-            <gux-option value="c">Cat</gux-option>
+            <gux-option value="c">Cat<span slot="subtext">Medium</span></gux-option>
           </gux-listbox>
         </gux-dropdown>
         <label slot="label">Default</label>
@@ -49,7 +49,7 @@ describe('gux-form-field-select', () => {
                 <gux-listbox>
                   <gux-option value="a" disabled>Ant</gux-option>
                   <gux-option value="b">Bat</gux-option>
-                  <gux-option value="c">Cat</gux-option>
+                  <gux-option value="c">Cat<span slot="subtext">Medium</span></gux-option>
                 </gux-listbox>
               </gux-dropdown>
               <label slot="label">Default</label>
@@ -69,7 +69,7 @@ describe('gux-form-field-select', () => {
                 <gux-listbox>
                   <gux-option value="a" disabled>Ant</gux-option>
                   <gux-option value="b">Bat</gux-option>
-                  <gux-option value="c">Cat</gux-option>
+                  <gux-option value="c">Cat<span slot="subtext">Medium</span></gux-option>
                 </gux-listbox>
               </gux-dropdown>
               <label slot="label">Default</label>
@@ -90,7 +90,7 @@ describe('gux-form-field-select', () => {
           <gux-listbox-multi>
             <gux-option-multi value="a" disabled>Ant</gux-option-multi>
             <gux-option-multi value="b">Bat</gux-option-multi>
-            <gux-option-multi value="c">Cat</gux-option-multi>
+            <gux-option-multi value="c">Cat<span slot="subtext">Medium</span></gux-option-multi>
           </gux-listbox-multi>
         </gux-dropdown-multi>
         <label slot="label">Default</label>
@@ -114,7 +114,7 @@ describe('gux-form-field-select', () => {
                   <gux-listbox-multi>
                     <gux-option-multi value="a" disabled>Ant</gux-option-multi>
                     <gux-option-multi value="b">Bat</gux-option-multi>
-                    <gux-option-multi value="c">Cat</gux-option-multi>
+                    <gux-option-multi value="c">Cat<span slot="subtext">Medium</span></gux-option-multi>
                   </gux-listbox-multi>
                 </gux-dropdown-multi>
                 <label slot="label">Default</label>
@@ -134,7 +134,7 @@ describe('gux-form-field-select', () => {
                 <gux-listbox-multi>
                   <gux-option-multi value="a" disabled>Ant</gux-option-multi>
                   <gux-option-multi value="b">Bat</gux-option-multi>
-                  <gux-option-multi value="c">Cat</gux-option-multi>
+                  <gux-option-multi value="c">Cat<span slot="subtext">Medium</span></gux-option-multi>
                 </gux-listbox-multi>
               </gux-dropdown-multi>
               <label slot="label">Default</label>
@@ -153,7 +153,7 @@ describe('gux-form-field-select', () => {
             <gux-listbox>
               <gux-option value="a" disabled>Ant</gux-option>
               <gux-option value="b">Bat</gux-option>
-              <gux-option value="c">Cat</gux-option>
+              <gux-option value="c">Cat<span slot="subtext">Medium</span></gux-option>
             </gux-listbox>
           </gux-dropdown>
           <label slot="label">Default</label>
@@ -172,7 +172,7 @@ describe('gux-form-field-select', () => {
             <gux-listbox-multi>
               <gux-option-multi value="a" disabled>Ant</gux-option-multi>
               <gux-option-multi value="b">Bat</gux-option-multi>
-              <gux-option-multi value="c">Cat</gux-option-multi>
+              <gux-option-multi value="c">Cat<span slot="subtext">Medium</span></gux-option-multi>
             </gux-listbox-multi>
           </gux-dropdown-multi>
           <label slot="label">Default</label>

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-text-like/gux-form-field-text-like.js

@@ -30,6 +30,7 @@ export class GuxFormFieldTextLike {
   constructor() {
     this.clearable = undefined;
     this.labelPosition = undefined;
+    this.loading = false;
     this.hasPrefix = undefined;
     this.hasSuffix = undefined;
     this.computedLabelPosition = 'above';
@@ -50,6 +51,11 @@ export class GuxFormFieldTextLike {
     this.hasHelp = hasSlot(this.root, 'help');
     forceUpdate(this.root);
   }
+  renderRadialLoading() {
+    if (this.loading) {
+      return (h("gux-radial-loading", { context: "input" }));
+    }
+  }
   componentWillLoad() {
     this.setInput();
     this.setLabel();
@@ -82,7 +88,7 @@ export class GuxFormFieldTextLike {
         'gux-disabled': this.disabled,
         'gux-has-prefix': this.hasPrefix,
         'gux-has-suffix': this.hasSuffix
-      } }, h("slot", { name: "prefix" }), h("slot", { name: "input" }), h("slot", { name: "suffix" }), this.clearable && this.hasContent && !this.disabled && (h("gux-form-field-input-clear-button", { onClick: () => clearInput(this.input) })))), h(GuxFormFieldError, { show: this.hasError }, h("slot", { name: "error" })), h(GuxFormFieldHelp, { show: !this.hasError && this.hasHelp }, h("slot", { name: "help" })))));
+      } }, h("slot", { name: "prefix" }), h("slot", { name: "input" }), this.renderRadialLoading(), h("slot", { name: "suffix" }), this.clearable && this.hasContent && !this.disabled && (h("gux-form-field-input-clear-button", { onClick: () => clearInput(this.input) })))), h(GuxFormFieldError, { show: this.hasError }, h("slot", { name: "error" })), h(GuxFormFieldHelp, { show: !this.hasError && this.hasHelp }, h("slot", { name: "help" })))));
   }
   get variant() {
     const labelPositionVariant = this.labelPosition
@@ -166,6 +172,24 @@ export class GuxFormFieldTextLike {
         },
         "attribute": "label-position",
         "reflect": false
+      },
+      "loading": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "loading",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-text-like/tests/gux-form-field-text-like.e2e.js

@@ -105,6 +105,33 @@ describe('gux-form-field-text-like', () => {
         await a11yCheck(page, axeExclusions);
       });
     });
+    describe('loading', () => {
+      [
+        { componentAttribute: '', inputAttribute: '' },
+        { componentAttribute: 'loading', inputAttribute: '' },
+        { componentAttribute: 'loading="true"', inputAttribute: '' },
+        { componentAttribute: 'loading="false"', inputAttribute: '' },
+        { componentAttribute: 'loading', inputAttribute: 'disabled' }
+      ].forEach(({ componentAttribute, inputAttribute }, index) => {
+        const html = `
+          <gux-form-field-text-like lang="en" ${componentAttribute}>
+            <input slot="input" type="text" value="Sample text" ${inputAttribute}/>
+            <label slot="label">Label</label>
+          </gux-form-field-text-like>
+        `;
+        it(`should render component as expected (${index + 1})`, async () => {
+          const page = await newNonrandomE2EPage({ html });
+          const element = await page.find('gux-form-field-text-like');
+          const elementShadowDom = await element.find('pierce/.gux-form-field-container');
+          expect(element.outerHTML).toMatchSnapshot();
+          expect(elementShadowDom).toMatchSnapshot();
+        });
+        it(`should be accessible (${index + 1})`, async () => {
+          const page = await newSparkE2EPage({ html });
+          await a11yCheck(page, axeExclusions);
+        });
+      });
+    });
     describe('help', () => {
       const html = `
         <gux-form-field-text-like>

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-text-like/tests/gux-form-field-text-like.spec.js

@@ -61,6 +61,26 @@ describe('gux-form-field-text-like', () => {
         expect(page.root).toMatchSnapshot();
       });
     });
+    describe('loading', () => {
+      [
+        { componentAttribute: '', inputAttribute: '' },
+        { componentAttribute: 'loading', inputAttribute: '' },
+        { componentAttribute: 'loading="true"', inputAttribute: '' },
+        { componentAttribute: 'loading="false"', inputAttribute: '' },
+        { componentAttribute: 'loading', inputAttribute: 'disabled' }
+      ].forEach(({ componentAttribute, inputAttribute }, index) => {
+        it(`should render component as expected (${index + 1})`, async () => {
+          const html = `
+            <gux-form-field-text-like ${componentAttribute}>
+              <input slot="input" type="text" value="Sample text" ${inputAttribute}/>
+              <label slot="label">Label</label>
+            </gux-form-field-text-like>
+          `;
+          const page = await newSpecPage({ components, html, language });
+          expect(page.root).toMatchSnapshot();
+        });
+      });
+    });
     describe('help', () => {
       it('should render component as expected', async () => {
         const html = `

package/dist/collection/components/stable/gux-icon/gux-icon.js

@@ -78,7 +78,7 @@ export class GuxIcon {
         "mutable": false,
         "complexType": {
           "original": "GuxIconIconName",
-          "resolved": "\"reset\" | \"8x8\" | \"8x8-alt\" | \"add\" | \"add-circle\" | \"agent\" | \"agent-circle\" | \"agent-group\" | \"alert-info\" | \"alert-success\" | \"alert-warning-octogon\" | \"alert-warning-triangle\" | \"android\" | \"app-chart\" | \"app-generic\" | \"app-layout\" | \"app-table\" | \"apple\" | \"archive\" | \"arrow-down\" | \"arrow-down-left\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-right\" | \"arrow-solid-down\" | \"arrow-solid-left\" | \"arrow-solid-right\" | \"arrow-solid-up\" | \"arrow-up\" | \"arrow-up-left\" | \"arrow-up-right\" | \"at\" | \"attachment\" | \"backspace\" | \"badge-amount\" | \"badge-check\" | \"badge-edit\" | \"badge-file\" | \"badge-pause\" | \"badge-x\" | \"ban-outline\" | \"bell\" | \"bolt\" | \"bot\" | \"branch\" | \"bug\" | \"bus\" | \"calendar\" | \"calendar-add\" | \"calendar-clock\" | \"campaign\" | \"certificate\" | \"chat\" | \"chat-bell\" | \"chat-close\" | \"chat-disable\" | \"chat-multi\" | \"chat-notification-score\" | \"checkbox\" | \"checkbox-active\" | \"checkbox-partial\" | \"checkmark\" | \"chevron-double-down\" | \"chevron-double-left\" | \"chevron-double-right\" | \"chevron-double-up\" | \"chevron-left\" | \"chevron-right\" | \"chevron-small-down\" | \"chevron-small-left\" | \"chevron-small-right\" | \"chevron-small-up\" | \"chrome\" | \"cjv-badge-file\" | \"cjv-calendar-clock\" | \"cjv-custom-default\" | \"cjv-custom-event\" | \"cjv-custom-session\" | \"cjv-default-event\" | \"cjv-delivery\" | \"cjv-finance-invoice\" | \"cjv-form-abandoned\" | \"cjv-form-submitted\" | \"cjv-generic-application\" | \"cjv-offer-closed\" | \"cjv-offer-ignored\" | \"cjv-offer-offered\" | \"cjv-offer-opened\" | \"cjv-outcome-achieved\" | \"cjv-page-view\" | \"cjv-policy-contract\" | \"cjv-product-added\" | \"cjv-product-purchased\" | \"cjv-product-removed\" | \"cjv-search\" | \"cjv-segment\" | \"cjv-segment-assigned\" | \"cjv-web-session\" | \"cjv-webchat-accepted\" | \"cjv-webchat-error\" | \"cjv-webchat-ignored\" | \"cjv-webchat-offered\" | \"cjv-webchat-rejected\" | \"cjv-webchat-requested\" | \"cjv-webchat-submitted\" | \"cjv-webchat-timeout\" | \"clipboard\" | \"clipboard-error\" | \"clipboard-success\" | \"clock\" | \"clock-outline\" | \"clone\" | \"close\" | \"close-circle\" | \"cloud\" | \"cloud-outline\" | \"coaching\" | \"cobrowse\" | \"collapse\" | \"comments\" | \"comments-disable\" | \"configuration\" | \"control-end\" | \"control-pause\" | \"control-play\" | \"control-skip-left\" | \"control-skip-right\" | \"control-slide-back\" | \"control-slide-forward\" | \"control-start\" | \"control-stop\" | \"copy\" | \"custom/add-column-after\" | \"custom/add-column-before\" | \"custom/add-row-after\" | \"custom/add-row-before\" | \"custom/binoculars-slash-regular\" | \"custom/carousel\" | \"custom/clipboard-list-slash-regular\" | \"custom/co-browse\" | \"custom/delete-column\" | \"custom/delete-row\" | \"custom/delete-table\" | \"custom/face-smile-hearts-regular\" | \"custom/file-pen-question\" | \"custom/filter-notification\" | \"custom/font-regular-highlight\" | \"custom/gkn-logo\" | \"custom/list-alphabetical-regular\" | \"custom/list-roman-regular\" | \"custom/one-button\" | \"custom/person-running\" | \"custom/quick-reply\" | \"custom/three-button\" | \"custom/wrap-text-inline\" | \"custom/wrap-text-tight\" | \"custom/wrap-text-top-bottom\" | \"customer-journey\" | \"cut\" | \"dash\" | \"delete\" | \"device-camera\" | \"device-cellphone\" | \"device-headphones\" | \"device-laptop\" | \"device-pc\" | \"device-server\" | \"device-tablet\" | \"download\" | \"edge\" | \"edit\" | \"email-notification-score\" | \"expand\" | \"export\" | \"external-link\" | \"fa/00-solid\" | \"fa/1-regular\" | \"fa/alarm-clock-regular\" | \"fa/alarm-snooze-regular\" | \"fa/align-center-regular\" | \"fa/align-justify-regular\" | \"fa/align-left-regular\" | \"fa/align-right-regular\" | \"fa/arrow-down-wide-short-regular\" | \"fa/arrow-left-to-line-solid\" | \"fa/arrow-right-to-line-solid\" | \"fa/arrow-turn-down-right-regular\" | \"fa/arrows-rotate-solid\" | \"fa/arrows-to-circle-regular\" | \"fa/asterix-regular\" | \"fa/award-solid\" | \"fa/backward-step-regular\" | \"fa/ban-regular\" | \"fa/bell-on-regular\" | \"fa/bell-slash-regular\" | \"fa/binoculars-regular\" | \"fa/bold-regular\" | \"fa/book-regular\" | \"fa/bookmark-regular\" | \"fa/briefcase-regular\" | \"fa/bullseye-regular\" | \"fa/calculator-regular\" | \"fa/calendar-days-regular\" | \"fa/check-solid\" | \"fa/circle-check-regular\" | \"fa/circle-check-solid\" | \"fa/circle-info-solid\" | \"fa/circle-play-regular\" | \"fa/circle-plus-solid\" | \"fa/circle-xmark-regular\" | \"fa/clipboard-list-regular\" | \"fa/clock-nine-regular\" | \"fa/clock-rotate-left-regular\" | \"fa/code-branch-regular\" | \"fa/code-regular\" | \"fa/comment-dots-regular\" | \"fa/comments-regular\" | \"fa/credit-card-regular\" | \"fa/crop-simple-regular\" | \"fa/cube-regular\" | \"fa/database-regular\" | \"fa/diagram-nested-regular\" | \"fa/diagram-project-gear-regular\" | \"fa/diagram-project-regular\" | \"fa/diamond-regular\" | \"fa/draw-circle-solid\" | \"fa/eye-regular\" | \"fa/eye-slash-regular\" | \"fa/face-frown-regular\" | \"fa/face-frown-solid\" | \"fa/face-laugh-regular\" | \"fa/face-laugh-solid\" | \"fa/file-chart-pie-regular\" | \"fa/file-exclamation-regular\" | \"fa/file-zip-regular\" | \"fa/film-solid\" | \"fa/filter-solid\" | \"fa/font-regular\" | \"fa/forward-step-regular\" | \"fa/function-regular\" | \"fa/gears-regular\" | \"fa/gem-regular\" | \"fa/google\" | \"fa/hand-back-point-right-regular\" | \"fa/hand-pointer-regular\" | \"fa/hashtag-regular\" | \"fa/hexagon-exclamation-solid\" | \"fa/highlighter-line-regular\" | \"fa/hourglass-start-regular\" | \"fa/indent-regular\" | \"fa/infinity-regular\" | \"fa/italic-regular\" | \"fa/language-regular\" | \"fa/laptop-slash-regular\" | \"fa/life-ring-regular\" | \"fa/link-horizontal-slash-regular\" | \"fa/link-horizontal-solid\" | \"fa/list-ol-regular\" | \"fa/list-radio-clean-regular\" | \"fa/list-radio-regular\" | \"fa/list-regular\" | \"fa/list-ul-regular\" | \"fa/map-regular\" | \"fa/map-solid\" | \"fa/memo-circle-check-regular\" | \"fa/message-bot-regular\" | \"fa/message-regular\" | \"fa/microchip-solid\" | \"fa/microsoft\" | \"fa/money-bill-regular\" | \"fa/outdent-regular\" | \"fa/pause-regular\" | \"fa/pen-slash-regular\" | \"fa/play-regular\" | \"fa/puzzle-piece-regular\" | \"fa/question-solid\" | \"fa/ranking-star-regular\" | \"fa/rectangle-list-regular\" | \"fa/regular-user-circle-arrow-left\" | \"fa/reply-regular\" | \"fa/right-to-bracket-regular\" | \"fa/road-regular\" | \"fa/rocket-regular\" | \"fa/route-regular\" | \"fa/share-regular\" | \"fa/shuffle-regular\" | \"fa/sigma-regular\" | \"fa/signs-post-regular\" | \"fa/sitemap-regular\" | \"fa/sliders-solid\" | \"fa/square-dashed-regular\" | \"fa/stop-regular\" | \"fa/strikethrough-regular\" | \"fa/subscript-regular\" | \"fa/superscript-regular\" | \"fa/table-cells-regular\" | \"fa/table-columns-regular\" | \"fa/text-size-regular\" | \"fa/text-slash-regular\" | \"fa/ticket-regular\" | \"fa/triangle-exclamation-solid\" | \"fa/underline-regular\" | \"fa/user-group-solid\" | \"fa/volume-regular\" | \"fa/volume-xmark-regular\" | \"fa/wand-magic-sparkles-regular\" | \"fa/windows\" | \"face-empathy\" | \"face-happy\" | \"face-happy-solid\" | \"face-neutral\" | \"face-neutral-solid\" | \"face-sad\" | \"face-sad-solid\" | \"facebook\" | \"facebook-messenger\" | \"fax\" | \"file\" | \"file-all\" | \"file-audio\" | \"file-image-landscape\" | \"file-image-portrait\" | \"file-pdf\" | \"file-preview\" | \"file-report\" | \"file-text\" | \"file-video\" | \"filter\" | \"fire\" | \"firefox\" | \"flag\" | \"folder\" | \"folder-add\" | \"folder-open\" | \"follow\" | \"generic\" | \"globe\" | \"grab-horizontal\" | \"grab-vertical\" | \"graph-bar-horizontal\" | \"graph-bar-vertical\" | \"graph-bubble\" | \"graph-chart\" | \"graph-line\" | \"graph-pie\" | \"graph-spark\" | \"group-standard\" | \"help\" | \"home\" | \"hourglass\" | \"import\" | \"inbox\" | \"inspect\" | \"inspect-disable\" | \"instagram\" | \"internet-explorer\" | \"key\" | \"lightbulb\" | \"line-messenger\" | \"link\" | \"linkedin\" | \"linux\" | \"lock\" | \"lock-hold\" | \"logout\" | \"low-bandwidth\" | \"lunch\" | \"menu\" | \"menu-kebab-horizontal\" | \"menu-kebab-vertical\" | \"message-email\" | \"message-email-outbound\" | \"message-forward\" | \"message-reply\" | \"message-reply-all\" | \"microphone\" | \"microphone-disable\" | \"microphone-talking\" | \"microsoft\" | \"microsoft-teams\" | \"moon\" | \"music\" | \"notes\" | \"notification\" | \"opera\" | \"operator-pair\" | \"paint\" | \"palette\" | \"parking-sign-regular\" | \"paste\" | \"people\" | \"phone\" | \"phone-bell\" | \"phone-call-directory\" | \"phone-call-history\" | \"phone-callback\" | \"phone-close\" | \"phone-conference\" | \"phone-dialpad\" | \"phone-disable\" | \"phone-forward\" | \"phone-hangup\" | \"phone-hold\" | \"phone-inbound\" | \"phone-missed-call\" | \"phone-notification-score\" | \"phone-outbound\" | \"phone-success\" | \"phone-voice\" | \"pin\" | \"pin-location\" | \"post\" | \"product-logo-beyond\" | \"product-logo-g\" | \"quote-left\" | \"quote-right\" | \"radio\" | \"radio-active\" | \"rating\" | \"rating-active\" | \"rating-partial\" | \"record\" | \"refresh\" | \"resource\" | \"retweet\" | \"roster-chat\" | \"roster-chat-disable\" | \"roster-email\" | \"roster-email-disable\" | \"roster-instagram\" | \"roster-instagram-disable\" | \"roster-line\" | \"roster-line-disable\" | \"roster-message\" | \"roster-message-disable\" | \"roster-messenger\" | \"roster-messenger-disable\" | \"roster-phone\" | \"roster-phone-disable\" | \"roster-sms\" | \"roster-sms-disable\" | \"roster-twitter\" | \"roster-twitter-disable\" | \"roster-wechat\" | \"roster-wechat-disable\" | \"roster-whatsapp\" | \"roster-whatsapp-disable\" | \"rss\" | \"run\" | \"safari\" | \"save\" | \"screen-share-regular\" | \"screen-share-slash\" | \"scripter\" | \"search\" | \"send\" | \"server\" | \"settings\" | \"share\" | \"shield-lock\" | \"shield-outline\" | \"shield-solid\" | \"site\" | \"skills\" | \"slideshare\" | \"sms\" | \"sms-cancel\" | \"sms-close\" | \"stamp\" | \"subtract\" | \"subtract-circle\" | \"sun\" | \"tag\" | \"tag-add\" | \"tag-remove\" | \"telegram\" | \"tenant\" | \"thumbs-down\" | \"thumbs-up\" | \"timeline\" | \"toolbar-apps\" | \"toolbar-apps-disable\" | \"toolbar-assist\" | \"toolbar-assist-disable\" | \"toolbar-chat\" | \"toolbar-chat-disable\" | \"toolbar-favorite\" | \"toolbar-favourite\" | \"toolbar-help\" | \"toolbar-inbox\" | \"toolbar-interactions\" | \"toolbar-interactions-disable\" | \"toolbar-notification\" | \"toolbar-phone\" | \"toolbar-phone-active-1\" | \"toolbar-phone-active-2\" | \"toolbar-phone-active-3\" | \"toolbar-phone-disable\" | \"toolbar-video\" | \"toolbar-video-disable\" | \"trade\" | \"transfer\" | \"twitter\" | \"unknown\" | \"unlink\" | \"unlock\" | \"upload\" | \"user\" | \"user-add\" | \"user-circle\" | \"user-contact-id\" | \"user-directory\" | \"user-group\" | \"user-interactions\" | \"user-interactions-disable\" | \"viber\" | \"video\" | \"video-disable\" | \"view-all\" | \"view-cells\" | \"view-grid\" | \"view-list\" | \"view-lists\" | \"view-roster\" | \"view-stacked\" | \"voicemail\" | \"volume-disable\" | \"volume-down\" | \"volume-none\" | \"volume-up\" | \"web\" | \"webcam\" | \"webcam-disable\" | \"wechat\" | \"whatsapp\" | \"window-actual-size\" | \"window-contract\" | \"window-drag-out\" | \"window-expand\" | \"window-fullscreen\" | \"window-popout\" | \"wordpress\" | \"youtube\" | \"zoom-in\" | \"zoom-out\"",
+          "resolved": "\"reset\" | \"8x8\" | \"8x8-alt\" | \"add\" | \"add-circle\" | \"agent\" | \"agent-circle\" | \"agent-group\" | \"alert-info\" | \"alert-success\" | \"alert-warning-octogon\" | \"alert-warning-triangle\" | \"android\" | \"app-chart\" | \"app-generic\" | \"app-layout\" | \"app-table\" | \"apple\" | \"archive\" | \"arrow-down\" | \"arrow-down-left\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-right\" | \"arrow-solid-down\" | \"arrow-solid-left\" | \"arrow-solid-right\" | \"arrow-solid-up\" | \"arrow-up\" | \"arrow-up-left\" | \"arrow-up-right\" | \"at\" | \"attachment\" | \"backspace\" | \"badge-amount\" | \"badge-check\" | \"badge-edit\" | \"badge-file\" | \"badge-pause\" | \"badge-x\" | \"ban-outline\" | \"bell\" | \"bolt\" | \"bot\" | \"branch\" | \"bug\" | \"bus\" | \"calendar\" | \"calendar-add\" | \"calendar-clock\" | \"campaign\" | \"certificate\" | \"chat\" | \"chat-bell\" | \"chat-close\" | \"chat-disable\" | \"chat-multi\" | \"chat-notification-score\" | \"checkbox\" | \"checkbox-active\" | \"checkbox-partial\" | \"checkmark\" | \"chevron-double-down\" | \"chevron-double-left\" | \"chevron-double-right\" | \"chevron-double-up\" | \"chevron-left\" | \"chevron-right\" | \"chevron-small-down\" | \"chevron-small-left\" | \"chevron-small-right\" | \"chevron-small-up\" | \"chrome\" | \"cjv-badge-file\" | \"cjv-calendar-clock\" | \"cjv-custom-default\" | \"cjv-custom-event\" | \"cjv-custom-session\" | \"cjv-default-event\" | \"cjv-delivery\" | \"cjv-finance-invoice\" | \"cjv-form-abandoned\" | \"cjv-form-submitted\" | \"cjv-generic-application\" | \"cjv-offer-closed\" | \"cjv-offer-ignored\" | \"cjv-offer-offered\" | \"cjv-offer-opened\" | \"cjv-outcome-achieved\" | \"cjv-page-view\" | \"cjv-policy-contract\" | \"cjv-product-added\" | \"cjv-product-purchased\" | \"cjv-product-removed\" | \"cjv-search\" | \"cjv-segment\" | \"cjv-segment-assigned\" | \"cjv-web-session\" | \"cjv-webchat-accepted\" | \"cjv-webchat-error\" | \"cjv-webchat-ignored\" | \"cjv-webchat-offered\" | \"cjv-webchat-rejected\" | \"cjv-webchat-requested\" | \"cjv-webchat-submitted\" | \"cjv-webchat-timeout\" | \"clipboard\" | \"clipboard-error\" | \"clipboard-success\" | \"clock\" | \"clock-outline\" | \"clone\" | \"close\" | \"close-circle\" | \"cloud\" | \"cloud-outline\" | \"coaching\" | \"cobrowse\" | \"collapse\" | \"comments\" | \"comments-disable\" | \"configuration\" | \"control-end\" | \"control-pause\" | \"control-play\" | \"control-skip-left\" | \"control-skip-right\" | \"control-slide-back\" | \"control-slide-forward\" | \"control-start\" | \"control-stop\" | \"copy\" | \"custom/add-column-after\" | \"custom/add-column-before\" | \"custom/add-row-after\" | \"custom/add-row-before\" | \"custom/binoculars-slash-regular\" | \"custom/carousel\" | \"custom/clipboard-list-slash-regular\" | \"custom/co-browse\" | \"custom/delete-column\" | \"custom/delete-row\" | \"custom/delete-table\" | \"custom/face-smile-hearts-regular\" | \"custom/file-pen-question\" | \"custom/filter-notification\" | \"custom/font-regular-highlight\" | \"custom/gkn-logo\" | \"custom/list-alphabetical-regular\" | \"custom/list-roman-regular\" | \"custom/one-button\" | \"custom/person-running\" | \"custom/quick-reply\" | \"custom/three-button\" | \"custom/wrap-text-inline\" | \"custom/wrap-text-tight\" | \"custom/wrap-text-top-bottom\" | \"customer-journey\" | \"cut\" | \"dash\" | \"delete\" | \"device-camera\" | \"device-cellphone\" | \"device-headphones\" | \"device-laptop\" | \"device-pc\" | \"device-server\" | \"device-tablet\" | \"download\" | \"edge\" | \"edit\" | \"email-notification-score\" | \"expand\" | \"export\" | \"external-link\" | \"fa/00-solid\" | \"fa/1-regular\" | \"fa/alarm-clock-regular\" | \"fa/alarm-snooze-regular\" | \"fa/align-center-regular\" | \"fa/align-justify-regular\" | \"fa/align-left-regular\" | \"fa/align-right-regular\" | \"fa/arrow-down-left-and-arrow-up-right-to-center-regular\" | \"fa/arrow-down-wide-short-regular\" | \"fa/arrow-left-to-line-solid\" | \"fa/arrow-right-to-bracket-regular\" | \"fa/arrow-right-to-line-solid\" | \"fa/arrow-turn-down-right-regular\" | \"fa/arrow-up-right-and-arrow-down-left-from-center-regular\" | \"fa/arrows-down-to-people-regular\" | \"fa/arrows-rotate-regular\" | \"fa/arrows-rotate-solid\" | \"fa/arrows-to-circle-regular\" | \"fa/asterix-regular\" | \"fa/award-solid\" | \"fa/backward-step-regular\" | \"fa/ban-regular\" | \"fa/bell-on-regular\" | \"fa/bell-slash-regular\" | \"fa/binoculars-regular\" | \"fa/bold-regular\" | \"fa/book-regular\" | \"fa/bookmark-regular\" | \"fa/briefcase-regular\" | \"fa/bullseye-regular\" | \"fa/calculator-regular\" | \"fa/calendar-days-regular\" | \"fa/check-solid\" | \"fa/circle-check-regular\" | \"fa/circle-check-solid\" | \"fa/circle-info-solid\" | \"fa/circle-play-regular\" | \"fa/circle-plus-solid\" | \"fa/circle-xmark-regular\" | \"fa/clipboard-list-regular\" | \"fa/clock-nine-regular\" | \"fa/clock-rotate-left-regular\" | \"fa/code-branch-regular\" | \"fa/code-regular\" | \"fa/comment-dots-regular\" | \"fa/comments-regular\" | \"fa/credit-card-regular\" | \"fa/crop-simple-regular\" | \"fa/cube-regular\" | \"fa/database-regular\" | \"fa/diagram-nested-regular\" | \"fa/diagram-project-gear-regular\" | \"fa/diagram-project-regular\" | \"fa/diamond-regular\" | \"fa/display-regular\" | \"fa/draw-circle-solid\" | \"fa/eye-regular\" | \"fa/eye-slash-regular\" | \"fa/face-frown-regular\" | \"fa/face-frown-solid\" | \"fa/face-laugh-regular\" | \"fa/face-laugh-solid\" | \"fa/file-chart-pie-regular\" | \"fa/file-exclamation-regular\" | \"fa/file-regular\" | \"fa/file-zip-regular\" | \"fa/film-solid\" | \"fa/filter-solid\" | \"fa/font-regular\" | \"fa/forward-step-regular\" | \"fa/function-regular\" | \"fa/gears-regular\" | \"fa/gem-regular\" | \"fa/google\" | \"fa/hand-back-point-right-regular\" | \"fa/hand-pointer-regular\" | \"fa/hashtag-regular\" | \"fa/hexagon-exclamation-solid\" | \"fa/highlighter-line-regular\" | \"fa/hourglass-start-regular\" | \"fa/indent-regular\" | \"fa/infinity-regular\" | \"fa/italic-regular\" | \"fa/language-regular\" | \"fa/laptop-slash-regular\" | \"fa/life-ring-regular\" | \"fa/link-horizontal-slash-regular\" | \"fa/link-horizontal-solid\" | \"fa/list-ol-regular\" | \"fa/list-radio-clean-regular\" | \"fa/list-radio-regular\" | \"fa/list-regular\" | \"fa/list-ul-regular\" | \"fa/map-regular\" | \"fa/map-solid\" | \"fa/memo-circle-check-regular\" | \"fa/message-bot-regular\" | \"fa/message-regular\" | \"fa/microchip-solid\" | \"fa/microsoft\" | \"fa/money-bill-regular\" | \"fa/outdent-regular\" | \"fa/pause-regular\" | \"fa/pen-slash-regular\" | \"fa/play-regular\" | \"fa/puzzle-piece-regular\" | \"fa/question-solid\" | \"fa/ranking-star-regular\" | \"fa/rectangle-list-regular\" | \"fa/regular-display-slash\" | \"fa/regular-user-circle-arrow-left\" | \"fa/reply-regular\" | \"fa/right-to-bracket-regular\" | \"fa/road-regular\" | \"fa/rocket-regular\" | \"fa/route-regular\" | \"fa/share-regular\" | \"fa/shuffle-regular\" | \"fa/sigma-regular\" | \"fa/signs-post-regular\" | \"fa/sitemap-regular\" | \"fa/sliders-solid\" | \"fa/square-dashed-regular\" | \"fa/stop-regular\" | \"fa/strikethrough-regular\" | \"fa/subscript-regular\" | \"fa/superscript-regular\" | \"fa/table-cells-regular\" | \"fa/table-columns-regular\" | \"fa/text-size-regular\" | \"fa/text-slash-regular\" | \"fa/ticket-regular\" | \"fa/triangle-exclamation-solid\" | \"fa/underline-regular\" | \"fa/user-group-solid\" | \"fa/volume-regular\" | \"fa/volume-xmark-regular\" | \"fa/wand-magic-sparkles-regular\" | \"fa/windows\" | \"face-empathy\" | \"face-happy\" | \"face-happy-solid\" | \"face-neutral\" | \"face-neutral-solid\" | \"face-sad\" | \"face-sad-solid\" | \"facebook\" | \"facebook-messenger\" | \"fax\" | \"file\" | \"file-all\" | \"file-audio\" | \"file-image-landscape\" | \"file-image-portrait\" | \"file-pdf\" | \"file-preview\" | \"file-report\" | \"file-text\" | \"file-video\" | \"filter\" | \"fire\" | \"firefox\" | \"flag\" | \"folder\" | \"folder-add\" | \"folder-open\" | \"follow\" | \"generic\" | \"globe\" | \"grab-horizontal\" | \"grab-vertical\" | \"graph-bar-horizontal\" | \"graph-bar-vertical\" | \"graph-bubble\" | \"graph-chart\" | \"graph-line\" | \"graph-pie\" | \"graph-spark\" | \"group-standard\" | \"help\" | \"home\" | \"hourglass\" | \"import\" | \"inbox\" | \"inspect\" | \"inspect-disable\" | \"instagram\" | \"internet-explorer\" | \"key\" | \"lightbulb\" | \"line-messenger\" | \"link\" | \"linkedin\" | \"linux\" | \"lock\" | \"lock-hold\" | \"logout\" | \"low-bandwidth\" | \"lunch\" | \"menu\" | \"menu-kebab-horizontal\" | \"menu-kebab-vertical\" | \"message-email\" | \"message-email-outbound\" | \"message-forward\" | \"message-reply\" | \"message-reply-all\" | \"microphone\" | \"microphone-disable\" | \"microphone-talking\" | \"microsoft\" | \"microsoft-teams\" | \"moon\" | \"music\" | \"notes\" | \"notification\" | \"opera\" | \"operator-pair\" | \"paint\" | \"palette\" | \"parking-sign-regular\" | \"paste\" | \"people\" | \"phone\" | \"phone-bell\" | \"phone-call-directory\" | \"phone-call-history\" | \"phone-callback\" | \"phone-close\" | \"phone-conference\" | \"phone-dialpad\" | \"phone-disable\" | \"phone-forward\" | \"phone-hangup\" | \"phone-hold\" | \"phone-inbound\" | \"phone-missed-call\" | \"phone-notification-score\" | \"phone-outbound\" | \"phone-success\" | \"phone-voice\" | \"pin\" | \"pin-location\" | \"post\" | \"product-logo-beyond\" | \"product-logo-g\" | \"quote-left\" | \"quote-right\" | \"radio\" | \"radio-active\" | \"rating\" | \"rating-active\" | \"rating-partial\" | \"record\" | \"refresh\" | \"resource\" | \"retweet\" | \"roster-chat\" | \"roster-chat-disable\" | \"roster-email\" | \"roster-email-disable\" | \"roster-instagram\" | \"roster-instagram-disable\" | \"roster-line\" | \"roster-line-disable\" | \"roster-message\" | \"roster-message-disable\" | \"roster-messenger\" | \"roster-messenger-disable\" | \"roster-phone\" | \"roster-phone-disable\" | \"roster-sms\" | \"roster-sms-disable\" | \"roster-twitter\" | \"roster-twitter-disable\" | \"roster-wechat\" | \"roster-wechat-disable\" | \"roster-whatsapp\" | \"roster-whatsapp-disable\" | \"rss\" | \"run\" | \"safari\" | \"save\" | \"screen-share-regular\" | \"screen-share-slash\" | \"scripter\" | \"search\" | \"send\" | \"server\" | \"settings\" | \"share\" | \"shield-lock\" | \"shield-outline\" | \"shield-solid\" | \"site\" | \"skills\" | \"slideshare\" | \"sms\" | \"sms-cancel\" | \"sms-close\" | \"stamp\" | \"subtract\" | \"subtract-circle\" | \"sun\" | \"tag\" | \"tag-add\" | \"tag-remove\" | \"telegram\" | \"tenant\" | \"thumbs-down\" | \"thumbs-up\" | \"timeline\" | \"toolbar-apps\" | \"toolbar-apps-disable\" | \"toolbar-assist\" | \"toolbar-assist-disable\" | \"toolbar-chat\" | \"toolbar-chat-disable\" | \"toolbar-favorite\" | \"toolbar-favourite\" | \"toolbar-help\" | \"toolbar-inbox\" | \"toolbar-interactions\" | \"toolbar-interactions-disable\" | \"toolbar-notification\" | \"toolbar-phone\" | \"toolbar-phone-active-1\" | \"toolbar-phone-active-2\" | \"toolbar-phone-active-3\" | \"toolbar-phone-disable\" | \"toolbar-video\" | \"toolbar-video-disable\" | \"trade\" | \"transfer\" | \"twitter\" | \"unknown\" | \"unlink\" | \"unlock\" | \"upload\" | \"user\" | \"user-add\" | \"user-circle\" | \"user-contact-id\" | \"user-directory\" | \"user-group\" | \"user-interactions\" | \"user-interactions-disable\" | \"viber\" | \"video\" | \"video-disable\" | \"view-all\" | \"view-cells\" | \"view-grid\" | \"view-list\" | \"view-lists\" | \"view-roster\" | \"view-stacked\" | \"voicemail\" | \"volume-disable\" | \"volume-down\" | \"volume-none\" | \"volume-up\" | \"web\" | \"webcam\" | \"webcam-disable\" | \"wechat\" | \"whatsapp\" | \"window-actual-size\" | \"window-contract\" | \"window-drag-out\" | \"window-expand\" | \"window-fullscreen\" | \"window-popout\" | \"wordpress\" | \"youtube\" | \"zoom-in\" | \"zoom-out\"",
           "references": {
             "GuxIconIconName": {
               "location": "import",

package/dist/collection/components/stable/gux-icon/icons/fa/arrow-down-left-and-arrow-up-right-to-center-regular.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M15.2812 1.78125C15.575 1.4875 15.575 1.0125 15.2812 0.721874C14.9875 0.431249 14.5125 0.428124 14.2219 0.721874L10.0031 4.94062V2.25C10.0031 1.83437 9.66873 1.5 9.2531 1.5C8.83748 1.5 8.5031 1.83437 8.5031 2.25V6.75C8.5031 7.16562 8.83748 7.5 9.2531 7.5H13.75C14.1656 7.5 14.5 7.16562 14.5 6.75C14.5 6.33437 14.1656 6 13.75 6H11.0594L15.2812 1.78125ZM0.718726 14.2187C0.424976 14.5125 0.424976 14.9875 0.718726 15.2781C1.01248 15.5687 1.48748 15.5719 1.7781 15.2781L5.99685 11.0594V13.75C5.99685 14.1656 6.33123 14.5 6.74685 14.5C7.16248 14.5 7.49685 14.1656 7.49685 13.75V9.25C7.49685 8.83437 7.16248 8.5 6.74685 8.5H2.24998C1.83435 8.5 1.49998 8.83437 1.49998 9.25C1.49998 9.66562 1.83435 10 2.24998 10H4.9406L0.718726 14.2187Z"/></svg>

package/dist/collection/components/stable/gux-icon/icons/fa/arrow-right-to-bracket-regular.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M6.78125 12.5312L10.7812 8.53125C11.075 8.2375 11.075 7.7625 10.7812 7.47188L6.78125 3.46875C6.4875 3.175 6.0125 3.175 5.72188 3.46875C5.43125 3.7625 5.42813 4.2375 5.72188 4.52812L8.44063 7.24687L0.75 7.25C0.334375 7.25 0 7.58437 0 8C0 8.41563 0.334375 8.75 0.75 8.75H8.44063L5.72188 11.4688C5.42813 11.7625 5.42813 12.2375 5.72188 12.5281C6.01562 12.8187 6.49062 12.8219 6.78125 12.5281V12.5312ZM10.75 2.5H13.25C13.9406 2.5 14.5 3.05938 14.5 3.75V12.25C14.5 12.9406 13.9406 13.5 13.25 13.5H10.75C10.3344 13.5 10 13.8344 10 14.25C10 14.6656 10.3344 15 10.75 15H13.25C14.7688 15 16 13.7688 16 12.25V3.75C16 2.23125 14.7688 1 13.25 1H10.75C10.3344 1 10 1.33437 10 1.75C10 2.16562 10.3344 2.5 10.75 2.5Z"/></svg>

package/dist/collection/components/stable/gux-icon/icons/fa/arrow-up-right-and-arrow-down-left-from-center-regular.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M9.22034 5.71875C8.92659 6.0125 8.92659 6.4875 9.22034 6.77812C9.51409 7.06875 9.98909 7.07187 10.2797 6.77812L14.4985 2.55938V5.25C14.4985 5.66563 14.8328 6 15.2485 6C15.6641 6 15.9985 5.66563 15.9985 5.25V0.75C15.9985 0.334375 15.6641 0 15.2485 0H10.7516C10.336 0 10.0016 0.334375 10.0016 0.75C10.0016 1.16562 10.336 1.5 10.7516 1.5H13.4422L9.22034 5.71875ZM6.78284 10.2812C7.07659 9.9875 7.07659 9.5125 6.78284 9.22188C6.48909 8.93125 6.01409 8.92813 5.72346 9.22188L1.50159 13.4406V10.75C1.50159 10.3344 1.16721 10 0.751587 10C0.335962 10 0.00158691 10.3344 0.00158691 10.75V15.25C0.00158691 15.6656 0.335962 16 0.751587 16H5.25159C5.66721 16 6.00159 15.6656 6.00159 15.25C6.00159 14.8344 5.66721 14.5 5.25159 14.5H2.56096L6.78284 10.2812Z"/></svg>

package/dist/collection/components/stable/gux-icon/icons/fa/arrows-down-to-people-regular.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M3.00068 2.2C3.00068 1.8675 3.26818 1.6 3.60068 1.6C3.93318 1.6 4.20068 1.8675 4.20068 2.2V5.1525L4.77568 4.5775C5.01068 4.3425 5.39068 4.3425 5.62318 4.5775C5.85568 4.8125 5.85818 5.1925 5.62318 5.425L4.02318 7.025C3.78818 7.26 3.40818 7.26 3.17568 7.025L1.57568 5.425C1.34068 5.19 1.34068 4.81 1.57568 4.5775C1.81068 4.345 2.19068 4.3425 2.42318 4.5775L2.99818 5.1525V2.2H3.00068ZM10.3757 4.575C10.6107 4.34 10.9907 4.34 11.2232 4.575L11.7982 5.15V2.2C11.7982 1.8675 12.0657 1.6 12.3982 1.6C12.7307 1.6 12.9982 1.8675 12.9982 2.2V5.1525L13.5732 4.5775C13.8082 4.3425 14.1882 4.3425 14.4207 4.5775C14.6532 4.8125 14.6557 5.1925 14.4207 5.425L12.8207 7.025C12.5857 7.26 12.2057 7.26 11.9732 7.025L10.3732 5.425C10.1382 5.19 10.1382 4.81 10.3732 4.5775L10.3757 4.575ZM12.4007 8C12.6659 8 12.9203 8.10536 13.1078 8.29289C13.2953 8.48043 13.4007 8.73478 13.4007 9C13.4007 9.26521 13.2953 9.51957 13.1078 9.70711C12.9203 9.89464 12.6659 10 12.4007 10C12.1355 10 11.8811 9.89464 11.6936 9.70711C11.506 9.51957 11.4007 9.26521 11.4007 9C11.4007 8.73478 11.506 8.48043 11.6936 8.29289C11.8811 8.10536 12.1355 8 12.4007 8ZM12.0007 13.2H12.8007V11.6125C12.7507 11.605 12.6982 11.6 12.6457 11.6H12.1557C12.1032 11.6 12.0507 11.605 12.0007 11.6125V13.2ZM14.4732 13.885L14.0007 13.01V13.6C14.0007 14.0425 13.6432 14.4 13.2007 14.4H11.6007C11.1582 14.4 10.8007 14.0425 10.8007 13.6V13.0075L10.3282 13.8825C10.1707 14.175 9.80818 14.2825 9.51568 14.1275C9.22318 13.9725 9.11568 13.6075 9.27068 13.315L10.1782 11.6275C10.1357 11.585 10.0982 11.5375 10.0707 11.4825L9.59818 10.6075V11.6C9.59818 12.0425 9.24068 12.4 8.79818 12.4H7.20068C6.75818 12.4 6.40068 12.0425 6.40068 11.6V10.6075L5.92818 11.4825C5.89818 11.5375 5.86318 11.585 5.82068 11.6275L6.72818 13.315C6.88568 13.6075 6.77568 13.97 6.48318 14.1275C6.19068 14.285 5.82818 14.175 5.67068 13.8825L5.19818 13.0075V13.6C5.19818 14.0425 4.84068 14.4 4.39818 14.4H2.80068C2.35818 14.4 2.00068 14.0425 2.00068 13.6V13.0075L1.52818 13.8825C1.37068 14.175 1.00818 14.2825 0.715683 14.1275C0.423183 13.9725 0.315683 13.6075 0.470683 13.315L1.41818 11.5575C1.80068 10.845 2.54568 10.4 3.35568 10.4H3.84318C4.25068 10.4 4.64068 10.5125 4.97818 10.715L5.81818 9.1575C6.20068 8.445 6.94568 8 7.75568 8H8.24318C9.05318 8 9.79568 8.445 10.1807 9.1575L11.0207 10.715C11.3582 10.5125 11.7482 10.4 12.1557 10.4H12.6432C13.4532 10.4 14.1957 10.845 14.5807 11.5575L15.5282 13.315C15.6857 13.6075 15.5757 13.97 15.2832 14.1275C14.9907 14.285 14.6282 14.175 14.4707 13.8825L14.4732 13.885ZM7.00068 6.6C7.00068 6.33478 7.10604 6.08043 7.29358 5.89289C7.48111 5.70536 7.73547 5.6 8.00068 5.6C8.2659 5.6 8.52025 5.70536 8.70779 5.89289C8.89533 6.08043 9.00068 6.33478 9.00068 6.6C9.00068 6.86521 8.89533 7.11957 8.70779 7.30711C8.52025 7.49464 8.2659 7.6 8.00068 7.6C7.73547 7.6 7.48111 7.49464 7.29358 7.30711C7.10604 7.11957 7.00068 6.86521 7.00068 6.6ZM7.60068 9.2125V11.2H8.40068V9.2125C8.35068 9.205 8.29818 9.2 8.24568 9.2H7.75568C7.70318 9.2 7.65068 9.205 7.60068 9.2125ZM3.60068 8C3.8659 8 4.12025 8.10536 4.30779 8.29289C4.49533 8.48043 4.60068 8.73478 4.60068 9C4.60068 9.26521 4.49533 9.51957 4.30779 9.70711C4.12025 9.89464 3.8659 10 3.60068 10C3.33547 10 3.08111 9.89464 2.89358 9.70711C2.70604 9.51957 2.60068 9.26521 2.60068 9C2.60068 8.73478 2.70604 8.48043 2.89358 8.29289C3.08111 8.10536 3.33547 8 3.60068 8ZM3.20068 13.2H4.00068V11.6125C3.95068 11.605 3.89818 11.6 3.84568 11.6H3.35568C3.30318 11.6 3.25068 11.605 3.20068 11.6125V13.2Z"/></svg>

package/dist/collection/components/stable/gux-icon/icons/fa/arrows-rotate-regular.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M2.9375 5.84688C3.775 3.87813 5.72813 2.5 8 2.5C9.24063 2.5 10.4312 2.99375 11.3094 3.87188L12.9406 5.5H11.25C10.8344 5.5 10.5 5.83437 10.5 6.25C10.5 6.66563 10.8344 7 11.25 7H14.75C15.1656 7 15.5 6.66563 15.5 6.25V2.75C15.5 2.33438 15.1656 2 14.75 2C14.3344 2 14 2.33438 14 2.75V4.44063L12.3719 2.80938C11.2125 1.65 9.64062 1 8 1C5.10625 1 2.62187 2.75625 1.55625 5.25938C1.39375 5.64062 1.57187 6.08125 1.95312 6.24375C2.33438 6.40625 2.775 6.22813 2.9375 5.84688ZM14.4375 10.7531C14.6 10.3719 14.425 9.93125 14.0437 9.76875C13.6625 9.60625 13.2219 9.78125 13.0594 10.1625C12.2188 12.1281 10.2688 13.5 8 13.5C6.75938 13.5 5.56875 13.0063 4.69063 12.1281L3.05938 10.5H4.75C5.16563 10.5 5.5 10.1656 5.5 9.75C5.5 9.33438 5.16563 9 4.75 9H1.25C0.834375 9 0.5 9.33438 0.5 9.75V13.25C0.5 13.6656 0.834375 14 1.25 14C1.66562 14 2 13.6656 2 13.25V11.5594L3.62812 13.1875C4.7875 14.35 6.35938 15 8 15C10.8906 15 13.3687 13.25 14.4375 10.7531Z"/></svg>

package/dist/collection/components/stable/gux-icon/icons/fa/display-regular.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M1.77778 2.98301C1.53333 2.98301 1.33333 3.18296 1.33333 3.42735V11.4254C1.33333 11.6698 1.53333 11.8698 1.77778 11.8698H6.65278C6.66111 11.8698 6.66944 11.8698 6.675 11.8698H9.31944C9.32778 11.8698 9.33611 11.8698 9.34167 11.8698H14.2222C14.4667 11.8698 14.6667 11.6698 14.6667 11.4254V3.42735C14.6667 3.18296 14.4667 2.98301 14.2222 2.98301H1.77778ZM5.88056 13.2028H1.77778C0.797222 13.2028 0 12.4057 0 11.4254V3.42735C0 2.44703 0.797222 1.65 1.77778 1.65H14.2222C15.2028 1.65 16 2.44703 16 3.42735V11.4254C16 12.4057 15.2028 13.2028 14.2222 13.2028H10.1194L10.3417 14.5358H11.7778C12.1472 14.5358 12.4444 14.8329 12.4444 15.2023C12.4444 15.5716 12.1472 15.8688 11.7778 15.8688H4.22222C3.85278 15.8688 3.55556 15.5716 3.55556 15.2023C3.55556 14.8329 3.85278 14.5358 4.22222 14.5358H5.65833L5.88056 13.2028ZM7.23333 13.2028L7.01111 14.5358H8.99167L8.76944 13.2028H7.23056H7.23333Z"/></svg>

package/dist/collection/components/stable/gux-icon/icons/fa/file-regular.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M12 14.5C12.275 14.5 12.5 14.275 12.5 14V5H10C9.44688 5 9 4.55312 9 4V1.5H4C3.725 1.5 3.5 1.725 3.5 2V14C3.5 14.275 3.725 14.5 4 14.5H12ZM2 2C2 0.896875 2.89688 0 4 0H9.17188C9.70312 0 10.2125 0.209375 10.5875 0.584375L13.4156 3.4125C13.7906 3.7875 14 4.29688 14 4.82812V14C14 15.1031 13.1031 16 12 16H4C2.89688 16 2 15.1031 2 14V2Z"/></svg>

package/dist/collection/components/stable/gux-icon/icons/fa/regular-display-slash.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M0.127396 2.58029C0.332396 2.32035 0.709896 2.27286 0.969896 2.47781C1.0899 2.57279 1.2099 2.66527 1.3299 2.76025C1.6149 2.50531 1.9899 2.35034 2.3999 2.35034C6.1349 2.35034 9.8674 2.35034 13.5999 2.35034C14.4824 2.35034 15.1999 3.06767 15.1999 3.94996C15.1999 6.34938 15.1999 8.7488 15.1999 11.1482C15.1999 11.888 14.6949 12.5129 14.0099 12.6953C14.5974 13.1552 15.1849 13.6151 15.7699 14.075C16.0299 14.28 16.0774 14.6574 15.8724 14.9173C15.6674 15.1772 15.2899 15.2247 15.0299 15.0198C10.0949 11.1532 5.1624 7.28915 0.229896 3.42259C-0.0301036 3.21764 -0.0776036 2.84023 0.127396 2.58029ZM0.799896 5.37961L1.9999 6.32438C1.9999 7.9315 1.9999 9.53861 1.9999 11.1482C1.9999 11.3682 2.1799 11.5481 2.3999 11.5481C3.8624 11.5481 5.3249 11.5481 6.7874 11.5481C6.7949 11.5481 6.8024 11.5481 6.8074 11.5481C7.4149 11.5481 8.0224 11.5481 8.6299 11.5481L10.1524 12.7478C10.0699 12.7478 9.9874 12.7478 9.9049 12.7478C9.9724 13.1477 10.0374 13.5476 10.1049 13.9475C10.5349 13.9475 10.9674 13.9475 11.3974 13.9475C11.7299 13.9475 11.9974 14.215 11.9974 14.5474C11.9974 14.8798 11.7299 15.1473 11.3974 15.1473C10.7974 15.1473 10.1974 15.1473 9.5974 15.1473C8.5299 15.1473 7.4649 15.1473 6.3974 15.1473C5.7974 15.1473 5.1974 15.1473 4.5974 15.1473C4.2649 15.1473 3.9974 14.8798 3.9974 14.5474C3.9974 14.215 4.2649 13.9475 4.5974 13.9475C5.0274 13.9475 5.4599 13.9475 5.8899 13.9475C5.9574 13.5476 6.0224 13.1477 6.0899 12.7478C4.8599 12.7478 3.6274 12.7478 2.3974 12.7478C1.5149 12.7478 0.797396 12.0305 0.797396 11.1482C0.797396 9.22618 0.797396 7.30165 0.797396 5.37961H0.799896ZM2.3424 3.55505L12.5449 11.5481C12.8974 11.5481 13.2474 11.5481 13.5999 11.5481C13.8199 11.5481 13.9999 11.3682 13.9999 11.1482C13.9999 8.7488 13.9999 6.34938 13.9999 3.94996C13.9999 3.73001 13.8199 3.55006 13.5999 3.55006C9.8649 3.55006 6.1324 3.55006 2.3999 3.55006C2.3799 3.55006 2.3624 3.55255 2.3424 3.55505ZM7.1099 13.9475C7.7049 13.9475 8.2974 13.9475 8.8924 13.9475C8.8249 13.5476 8.7599 13.1477 8.6924 12.7478C8.2299 12.7478 7.7699 12.7478 7.3074 12.7478C7.3099 12.7478 7.3074 12.7478 7.3099 12.7478L7.1099 13.9475Z"/></svg>

package/dist/collection/components/stable/gux-listbox/gux-listbox.js

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { actOnActiveOption, clearActiveOptions, goToOption, hasActiveOption, hasPreviousOption, hasNextOption, onClickedOption, setFirstOptionActive, setInitialActiveOption, setLastOptionActive, setNextOptionActive, setPreviousOptionActive, matchOption } from "./gux-listbox.service";
+import { actOnActiveOption, clearActiveOptions, goToOption, hasActiveOption, hasPreviousOption, hasNextOption, getListOptions, onClickedOption, setFirstOptionActive, setInitialActiveOption, setLastOptionActive, setNextOptionActive, setPreviousOptionActive, matchOption } from "./gux-listbox.service";
 import { optionTagSelector } from "./options/option-types";
 import { buildI18nForComponent } from "../../../i18n";
 import { whenEventIsFrom } from "../../../utils/dom/when-event-is-from";
@@ -102,7 +102,7 @@ export class GuxListbox {
     if (this.value) {
       this.selectedValues = this.value.split(',');
     }
-    this.listboxOptions = Array.from(this.root.children);
+    this.listboxOptions = getListOptions(this.root);
     this.internallistboxoptionsupdated.emit();
   }
   updateValue(newValue) {
@@ -127,12 +127,6 @@ export class GuxListbox {
     this.allListboxOptionsFiltered =
       this.listboxOptions.filter(listboxOption => !listboxOption.filtered)
         .length === 0;
-    if (!this.allListboxOptionsFiltered && this.filter) {
-      setFirstOptionActive(this.root);
-    }
-    else {
-      clearActiveOptions(this.root);
-    }
   }
   // The slot must always be rendered so onSlotchange can be called
   renderHiddenSlot() {

package/dist/collection/components/stable/gux-listbox/gux-listbox.service.js

@@ -1,8 +1,28 @@
 export function getListOptions(list) {
-  return Array.from(list.children).filter(item => {
-    return item.value || item.value === '';
+  const listChildren = Array.from(list.children);
+  return listChildren.reduce((accumulator, child) => {
+    let childOptions = [];
+    if (isOptionGroup(child)) {
+      childOptions = Array.from(child.children).filter(item => isOption(item));
+    }
+    else if (isOption(child)) {
+      childOptions = [child];
+    }
+    return [...accumulator, ...childOptions];
+  }, []);
+}
+export function getAvailableListOptions(list) {
+  return getListOptions(list).filter(option => {
+    return !option.disabled && !option.filtered;
   });
 }
+export function isOptionGroup(item) {
+  return item.tagName === 'GUX-OPTION-GROUP-BETA';
+}
+export function isOption(item) {
+  const optionTypes = ['GUX-OPTION', 'GUX-OPTION-ICON', 'GUX-OPTION-MULTI'];
+  return optionTypes.includes(item.tagName);
+}
 function getFirstSelectedOption(list) {
   return getListOptions(list).find(option => option.selected && !option.disabled && !option.filtered);
 }
@@ -22,43 +42,31 @@ function setActiveOption(list, element) {
   }
 }
 function getFirstOption(list) {
-  let firstOption = getListOptions(list)[0];
-  while (firstOption && (firstOption.disabled || firstOption.filtered)) {
-    firstOption = firstOption.nextElementSibling;
-  }
-  return firstOption;
+  return getAvailableListOptions(list)[0];
 }
 function getNextOption(list) {
-  if (hasActiveOption(list)) {
-    let nextOption = getActiveOption(list)
-      .nextElementSibling;
-    while (nextOption && (nextOption.disabled || nextOption.filtered)) {
-      nextOption = nextOption.nextElementSibling;
-    }
-    return nextOption;
+  if (hasActiveOption(list) && getActiveOption(list) !== getLastOption(list)) {
+    const availableListOptions = getAvailableListOptions(list);
+    const activeOption = getActiveOption(list);
+    const activeOptionIndex = availableListOptions.indexOf(activeOption);
+    return availableListOptions[activeOptionIndex + 1];
   }
   return getFirstOption(list);
 }
 function getPreviousOption(list) {
   if (hasActiveOption(list)) {
-    let previousOption = getActiveOption(list)
-      .previousElementSibling;
-    while (previousOption &&
-      (previousOption.disabled || previousOption.filtered)) {
-      previousOption =
-        previousOption.previousElementSibling;
+    const availableOptionsList = getAvailableListOptions(list);
+    const activeOptionIndex = availableOptionsList.indexOf(getActiveOption(list));
+    if (getActiveOption(list) === getFirstOption(list)) {
+      return getLastOption(list);
     }
-    return previousOption;
+    return availableOptionsList[activeOptionIndex - 1];
   }
   return getFirstOption(list);
 }
 function getLastOption(list) {
-  const options = getListOptions(list);
-  let lastOption = options[options.length - 1];
-  while (lastOption && (lastOption.disabled || lastOption.filtered)) {
-    lastOption = lastOption.previousElementSibling;
-  }
-  return lastOption;
+  const availableOptions = getAvailableListOptions(list);
+  return availableOptions[availableOptions.length - 1];
 }
 export function hasActiveOption(list) {
   return Boolean(getActiveOption(list));
@@ -85,25 +93,13 @@ export function setInitialActiveOption(list) {
 }
 export function hasPreviousOption(list) {
   if (hasActiveOption(list)) {
-    let previousOption = getActiveOption(list)
-      .previousElementSibling;
-    while (previousOption &&
-      (previousOption.disabled || previousOption.filtered)) {
-      previousOption =
-        previousOption.previousElementSibling;
-    }
-    return Boolean(previousOption);
+    return Boolean(getPreviousOption(list));
   }
   return false;
 }
 export function hasNextOption(list) {
   if (hasActiveOption(list)) {
-    let nextOption = getActiveOption(list)
-      .nextElementSibling;
-    while (nextOption && (nextOption.disabled || nextOption.filtered)) {
-      nextOption = nextOption.nextElementSibling;
-    }
-    return Boolean(nextOption);
+    return Boolean(getNextOption(list));
   }
   return false;
 }

package/dist/collection/components/stable/gux-listbox/option-group/gux-option-group.css

@@ -0,0 +1,26 @@
+/*
+ * Typography styles and mixins.
+ */
+/* Headings */
+/* Body Copy */
+/* Anchor */
+.gux-option-group {
+  display: block;
+  flex: 1 1 auto;
+  align-self: auto;
+}
+.gux-option-group .gux-option-group-label {
+  display: block;
+  padding: var(--gse-ui-menu-groupedMenu-title-padding);
+  color: var(--gse-ui-menu-groupedMenu-title-foregroundColor);
+  font-family: var(--gse-core-typography-heading-overline-fontFamily), var(--gse-core-fontFamily-heading), sans-serif;
+  font-size: var(--gse-core-typography-heading-overline-fontSize);
+  line-height: var(--gse-core-typography-heading-overline-lineHeight);
+  text-transform: var(--gse-core-typography-heading-overline-textCase);
+  letter-spacing: var(--gse-core-typography-heading-overline-letterSpacing);
+  font-weight: var(--gse-core-fontWeight-regular);
+}
+
+:host(:last-of-type) .gux-option-group gux-list-divider {
+  display: none;
+}