sas-ui 0.8.210 → 0.8.211

package/dist/cjs/sas-alert_26.cjs.entry.js

@@ -4293,7 +4293,7 @@ let SasListItem = class {
 };
 SasListItem.style = sasListItemCss;
 
-const sasMultiselectCss = ":host{display:block;--checkbox-padding:8px}:host sas-form-input-template{--input-height:var(--multiselect-height, 40px)}:host .input-container{position:absolute;top:50%;transform:translateY(-50%);left:10px;right:30px;white-space:nowrap;display:flex;align-items:center;height:100%}:host .input-container:focus{outline:none}:host sas-chip{margin-right:10px;--chip-padding:2px 10px;box-sizing:border-box}:host #text-chip{color:var(--primary)}:host .clear-button-container{display:flex;justify-content:flex-end}:host .clear-button{color:var(--primary);border:none;background-color:transparent;cursor:pointer;text-decoration:underline}:host .filter{border:none;border-bottom:1px solid var(--s-300);box-sizing:border-box;color:var(--s-500);font-size:14px;width:100%;padding:10px}:host .filter:focus{outline:none;background-color:white}:host ::-webkit-input-placeholder{color:var(--s-400)}:host :-ms-input-placeholder{color:var(--s-400)}:host ::placeholder{color:var(--s-400)}:host .clear-icon{--icon-color:white;--icon-background-color:var(--s-300);--icon-background-width:14px;--icon-background-height:14px;--icon-size:9px;margin-left:auto;box-shadow:none}:host sas-checkbox-group{max-height:200px;overflow-y:auto;position:relative}:host sas-checkbox{box-sizing:border-box;width:100%;outline:none}:host #no-match-tip:not(.hide){display:grid;grid-template-columns:max-content auto;grid-gap:10px;padding:10px 15px}:host .no-match-add-new-option-button{margin:0;color:#0D76B4;font-family:roboto;font-weight:500;cursor:pointer;margin-right:auto}:host .hide{display:none}";
+const sasMultiselectCss = ":host{display:block;--checkbox-padding:8px}:host sas-form-input-template{--input-height:var(--multiselect-height, 40px)}:host .input-container{position:absolute;top:50%;transform:translateY(-50%);left:10px;right:30px;white-space:nowrap;display:flex;align-items:center;height:100%}:host .input-container:focus{outline:none}:host sas-chip{margin-right:10px;--chip-padding:2px 10px;box-sizing:border-box}:host #text-chip{color:var(--primary)}:host .clear-button-container{display:flex;justify-content:flex-end;text-wrap:nowrap;padding:10px}:host .clear-button{color:var(--primary);border:none;background-color:transparent;cursor:pointer;text-decoration:underline}:host .filter{border:none;box-sizing:border-box;color:var(--s-500);font-size:14px;width:100%;padding:10px}:host .filter:focus{outline:none;background-color:white}:host ::-webkit-input-placeholder{color:var(--s-400)}:host :-ms-input-placeholder{color:var(--s-400)}:host ::placeholder{color:var(--s-400)}:host .clear-icon{--icon-color:white;--icon-background-color:var(--s-300);--icon-background-width:14px;--icon-background-height:14px;--icon-size:9px;margin-left:auto;box-shadow:none}:host sas-checkbox-group{max-height:200px;overflow-y:auto;position:relative}:host sas-checkbox{box-sizing:border-box;width:100%;outline:none}:host #no-match-tip:not(.hide){display:grid;grid-template-columns:max-content auto;grid-gap:10px;padding:10px 15px}:host .no-match-add-new-option-button{margin:0;color:#0D76B4;font-family:roboto;font-weight:500;cursor:pointer;margin-right:auto}:host .hide{display:none}:host .inline{display:flex;border-bottom:1px solid var(--s-300);flex-direction:row-reverse}";
 
 let SasMultiselect = class {
   constructor(hostRef) {
@@ -4940,14 +4940,34 @@ let SasMultiselect = class {
     this.filterText = "";
     this.filter();
   }
+  getSelectedDisabledOptionValues() {
+    const disabledOptions = this.options.filter(option => {
+      return option.disabled === true;
+    });
+    const disabledSubOptions = this.options
+      .filter(option => { var _a; return ((_a = option.sub) === null || _a === void 0 ? void 0 : _a.length) > 0; })
+      .map(option => option.sub)
+      .reduce((acc, curVal) => acc.concat(curVal), [])
+      .filter(subOption => subOption.disabled === true);
+    const selectedOptions = this.values;
+    const selectedDisabledOptionValues = selectedOptions.filter(selectedOption => {
+      return disabledOptions.some(disabledOption => disabledOption.value === selectedOption)
+        || disabledSubOptions.some(disabledSubOption => disabledSubOption.value === selectedOption);
+    });
+    return selectedDisabledOptionValues;
+  }
   clearSelection() {
-    this.values = [];
+    // When selection is cleared by user, don't clear any disabled options
+    this.values = this.getSelectedDisabledOptionValues();
     this.update();
   }
   getClearText() {
     const inputFilter = this.el.shadowRoot.querySelector('#inputFilter');
     if (inputFilter === null) {
-      if (this.chipArray.length === 0) {
+      if (this.chipArray.length === 0 && !this.search) {
+        this.buttonFilterText = 'Clear Selection';
+      }
+      else if (this.chipArray.length === 0) {
         this.buttonFilterText = 'Clear';
       }
       else {
@@ -4970,11 +4990,11 @@ let SasMultiselect = class {
   render() {
     return (index.h(index.Host, { tabindex: "0" }, index.h("sas-form-input-template", { label: this.label, outside: this.outside, placeholder: this.placeholder, "icon-right": "far fa-chevron-down", required: this.required, readonly: true, value: this.value, disabled: this.disabled, "data-message": this.message, position: this.position, minimumPixelsAboveComponentRequired: 250 }, this.type === 'chip'
       ? index.h("div", { class: "input-container", tabindex: -1, slot: "input" }, this.getChipElement(), index.h("sas-chip", { class: this.getChipClass(this.chipArray.length > this.maxChip), id: "text-chip", text: `+${this.chipArray.length - this.maxChip}`, uppercase: false, bold: false, onMouseDown: this.chipMouseDownEvent }))
-      : null, this.clear
-      ? index.h("div", { slot: "container", class: "clear-button-container" }, index.h("button", { class: "clear-button", onClick: this.clearAll }, this.getClearText()))
+      : null, index.h("div", { class: this.clear || this.search ? 'inline' : null, slot: 'container' }, this.clear
+      ? index.h("div", { class: "clear-button-container" }, index.h("button", { class: "clear-button", onClick: this.clearAll }, this.getClearText()))
       : null, this.search
-      ? index.h("input", { id: "inputFilter", slot: "container", class: "filter", placeholder: "filter", onInput: this.inputEvent })
-      : null, this.formatOptions.length > 0
+      ? index.h("input", { id: "inputFilter", class: "filter", placeholder: "filter", onInput: this.inputEvent })
+      : null), this.formatOptions.length > 0
       ? index.h("sas-checkbox-group", { slot: "container", max: this.max, options: this.formatOptions, values: this.values, selectAll: this.selectAll, selectAllText: this.selectAllText })
       : index.h("slot", { slot: "container" }), index.h("div", { slot: "container", class: "hide", id: "no-match-tip" }, this.getNoMatchTipTextContent(), this.noMatchAction === 'show_no_match_add_new_option'
       ? index.h("p", { onClick: this.addNewOptionClickEvent, class: "no-match-add-new-option-button" }, "Add")

package/dist/collection/components/sas-multiselect/sas-multiselect.css

@@ -33,6 +33,8 @@
 :host .clear-button-container {
   display: flex;
   justify-content: flex-end;
+  text-wrap: nowrap;
+  padding: 10px;
 }
 :host .clear-button {
   color: var(--primary);
@@ -43,7 +45,6 @@
 }
 :host .filter {
   border: none;
-  border-bottom: 1px solid var(--s-300);
   box-sizing: border-box;
   color: var(--s-500);
   font-size: 14px;
@@ -100,4 +101,9 @@
 }
 :host .hide {
   display: none;
+}
+:host .inline {
+  display: flex;
+  border-bottom: 1px solid var(--s-300);
+  flex-direction: row-reverse;
 }

package/dist/collection/components/sas-multiselect/sas-multiselect.js

@@ -1,6 +1,4 @@
-import { 
-// eslint-disable-next-line no-unused-vars
-Component, Host, Prop, h, Element, Listen, Watch, Event, State, Method, } from '@stencil/core';
+import { Component, Element, Event, Host, Listen, Method, Prop, State, Watch, h, } from '@stencil/core';
 import { HTMLDecodeString } from '../../global/global';
 export class SasMultiselect {
   constructor() {
@@ -643,14 +641,34 @@ export class SasMultiselect {
     this.filterText = "";
     this.filter();
   }
+  getSelectedDisabledOptionValues() {
+    const disabledOptions = this.options.filter(option => {
+      return option.disabled === true;
+    });
+    const disabledSubOptions = this.options
+      .filter(option => { var _a; return ((_a = option.sub) === null || _a === void 0 ? void 0 : _a.length) > 0; })
+      .map(option => option.sub)
+      .reduce((acc, curVal) => acc.concat(curVal), [])
+      .filter(subOption => subOption.disabled === true);
+    const selectedOptions = this.values;
+    const selectedDisabledOptionValues = selectedOptions.filter(selectedOption => {
+      return disabledOptions.some(disabledOption => disabledOption.value === selectedOption)
+        || disabledSubOptions.some(disabledSubOption => disabledSubOption.value === selectedOption);
+    });
+    return selectedDisabledOptionValues;
+  }
   clearSelection() {
-    this.values = [];
+    // When selection is cleared by user, don't clear any disabled options
+    this.values = this.getSelectedDisabledOptionValues();
     this.update();
   }
   getClearText() {
     const inputFilter = this.el.shadowRoot.querySelector('#inputFilter');
     if (inputFilter === null) {
-      if (this.chipArray.length === 0) {
+      if (this.chipArray.length === 0 && !this.search) {
+        this.buttonFilterText = 'Clear Selection';
+      }
+      else if (this.chipArray.length === 0) {
         this.buttonFilterText = 'Clear';
       }
       else {
@@ -678,13 +696,14 @@ export class SasMultiselect {
             this.getChipElement(),
             h("sas-chip", { class: this.getChipClass(this.chipArray.length > this.maxChip), id: "text-chip", text: `+${this.chipArray.length - this.maxChip}`, uppercase: false, bold: false, onMouseDown: this.chipMouseDownEvent }))
           : null,
-        this.clear
-          ? h("div", { slot: "container", class: "clear-button-container" },
-            h("button", { class: "clear-button", onClick: this.clearAll }, this.getClearText()))
-          : null,
-        this.search
-          ? h("input", { id: "inputFilter", slot: "container", class: "filter", placeholder: "filter", onInput: this.inputEvent })
-          : null,
+        h("div", { class: this.clear || this.search ? 'inline' : null, slot: 'container' },
+          this.clear
+            ? h("div", { class: "clear-button-container" },
+              h("button", { class: "clear-button", onClick: this.clearAll }, this.getClearText()))
+            : null,
+          this.search
+            ? h("input", { id: "inputFilter", class: "filter", placeholder: "filter", onInput: this.inputEvent })
+            : null),
         this.formatOptions.length > 0
           ? h("sas-checkbox-group", { slot: "container", max: this.max, options: this.formatOptions, values: this.values, selectAll: this.selectAll, selectAllText: this.selectAllText })
           : h("slot", { slot: "container" }),

package/dist/custom-elements/index.js

@@ -11250,7 +11250,7 @@ let SasMenuBar$1 = class extends H {
   static get style() { return sasMenuBarCss; }
 };
 
-const sasMultiselectCss = ":host{display:block;--checkbox-padding:8px}:host sas-form-input-template{--input-height:var(--multiselect-height, 40px)}:host .input-container{position:absolute;top:50%;transform:translateY(-50%);left:10px;right:30px;white-space:nowrap;display:flex;align-items:center;height:100%}:host .input-container:focus{outline:none}:host sas-chip{margin-right:10px;--chip-padding:2px 10px;box-sizing:border-box}:host #text-chip{color:var(--primary)}:host .clear-button-container{display:flex;justify-content:flex-end}:host .clear-button{color:var(--primary);border:none;background-color:transparent;cursor:pointer;text-decoration:underline}:host .filter{border:none;border-bottom:1px solid var(--s-300);box-sizing:border-box;color:var(--s-500);font-size:14px;width:100%;padding:10px}:host .filter:focus{outline:none;background-color:white}:host ::-webkit-input-placeholder{color:var(--s-400)}:host :-ms-input-placeholder{color:var(--s-400)}:host ::placeholder{color:var(--s-400)}:host .clear-icon{--icon-color:white;--icon-background-color:var(--s-300);--icon-background-width:14px;--icon-background-height:14px;--icon-size:9px;margin-left:auto;box-shadow:none}:host sas-checkbox-group{max-height:200px;overflow-y:auto;position:relative}:host sas-checkbox{box-sizing:border-box;width:100%;outline:none}:host #no-match-tip:not(.hide){display:grid;grid-template-columns:max-content auto;grid-gap:10px;padding:10px 15px}:host .no-match-add-new-option-button{margin:0;color:#0D76B4;font-family:roboto;font-weight:500;cursor:pointer;margin-right:auto}:host .hide{display:none}";
+const sasMultiselectCss = ":host{display:block;--checkbox-padding:8px}:host sas-form-input-template{--input-height:var(--multiselect-height, 40px)}:host .input-container{position:absolute;top:50%;transform:translateY(-50%);left:10px;right:30px;white-space:nowrap;display:flex;align-items:center;height:100%}:host .input-container:focus{outline:none}:host sas-chip{margin-right:10px;--chip-padding:2px 10px;box-sizing:border-box}:host #text-chip{color:var(--primary)}:host .clear-button-container{display:flex;justify-content:flex-end;text-wrap:nowrap;padding:10px}:host .clear-button{color:var(--primary);border:none;background-color:transparent;cursor:pointer;text-decoration:underline}:host .filter{border:none;box-sizing:border-box;color:var(--s-500);font-size:14px;width:100%;padding:10px}:host .filter:focus{outline:none;background-color:white}:host ::-webkit-input-placeholder{color:var(--s-400)}:host :-ms-input-placeholder{color:var(--s-400)}:host ::placeholder{color:var(--s-400)}:host .clear-icon{--icon-color:white;--icon-background-color:var(--s-300);--icon-background-width:14px;--icon-background-height:14px;--icon-size:9px;margin-left:auto;box-shadow:none}:host sas-checkbox-group{max-height:200px;overflow-y:auto;position:relative}:host sas-checkbox{box-sizing:border-box;width:100%;outline:none}:host #no-match-tip:not(.hide){display:grid;grid-template-columns:max-content auto;grid-gap:10px;padding:10px 15px}:host .no-match-add-new-option-button{margin:0;color:#0D76B4;font-family:roboto;font-weight:500;cursor:pointer;margin-right:auto}:host .hide{display:none}:host .inline{display:flex;border-bottom:1px solid var(--s-300);flex-direction:row-reverse}";
 
 let SasMultiselect$1 = class extends H {
   constructor() {
@@ -11899,14 +11899,34 @@ let SasMultiselect$1 = class extends H {
     this.filterText = "";
     this.filter();
   }
+  getSelectedDisabledOptionValues() {
+    const disabledOptions = this.options.filter(option => {
+      return option.disabled === true;
+    });
+    const disabledSubOptions = this.options
+      .filter(option => { var _a; return ((_a = option.sub) === null || _a === void 0 ? void 0 : _a.length) > 0; })
+      .map(option => option.sub)
+      .reduce((acc, curVal) => acc.concat(curVal), [])
+      .filter(subOption => subOption.disabled === true);
+    const selectedOptions = this.values;
+    const selectedDisabledOptionValues = selectedOptions.filter(selectedOption => {
+      return disabledOptions.some(disabledOption => disabledOption.value === selectedOption)
+        || disabledSubOptions.some(disabledSubOption => disabledSubOption.value === selectedOption);
+    });
+    return selectedDisabledOptionValues;
+  }
   clearSelection() {
-    this.values = [];
+    // When selection is cleared by user, don't clear any disabled options
+    this.values = this.getSelectedDisabledOptionValues();
     this.update();
   }
   getClearText() {
     const inputFilter = this.el.shadowRoot.querySelector('#inputFilter');
     if (inputFilter === null) {
-      if (this.chipArray.length === 0) {
+      if (this.chipArray.length === 0 && !this.search) {
+        this.buttonFilterText = 'Clear Selection';
+      }
+      else if (this.chipArray.length === 0) {
         this.buttonFilterText = 'Clear';
       }
       else {
@@ -11929,11 +11949,11 @@ let SasMultiselect$1 = class extends H {
   render() {
     return (h(Host, { tabindex: "0" }, h("sas-form-input-template", { label: this.label, outside: this.outside, placeholder: this.placeholder, "icon-right": "far fa-chevron-down", required: this.required, readonly: true, value: this.value, disabled: this.disabled, "data-message": this.message, position: this.position, minimumPixelsAboveComponentRequired: 250 }, this.type === 'chip'
       ? h("div", { class: "input-container", tabindex: -1, slot: "input" }, this.getChipElement(), h("sas-chip", { class: this.getChipClass(this.chipArray.length > this.maxChip), id: "text-chip", text: `+${this.chipArray.length - this.maxChip}`, uppercase: false, bold: false, onMouseDown: this.chipMouseDownEvent }))
-      : null, this.clear
-      ? h("div", { slot: "container", class: "clear-button-container" }, h("button", { class: "clear-button", onClick: this.clearAll }, this.getClearText()))
+      : null, h("div", { class: this.clear || this.search ? 'inline' : null, slot: 'container' }, this.clear
+      ? h("div", { class: "clear-button-container" }, h("button", { class: "clear-button", onClick: this.clearAll }, this.getClearText()))
       : null, this.search
-      ? h("input", { id: "inputFilter", slot: "container", class: "filter", placeholder: "filter", onInput: this.inputEvent })
-      : null, this.formatOptions.length > 0
+      ? h("input", { id: "inputFilter", class: "filter", placeholder: "filter", onInput: this.inputEvent })
+      : null), this.formatOptions.length > 0
       ? h("sas-checkbox-group", { slot: "container", max: this.max, options: this.formatOptions, values: this.values, selectAll: this.selectAll, selectAllText: this.selectAllText })
       : h("slot", { slot: "container" }), h("div", { slot: "container", class: "hide", id: "no-match-tip" }, this.getNoMatchTipTextContent(), this.noMatchAction === 'show_no_match_add_new_option'
       ? h("p", { onClick: this.addNewOptionClickEvent, class: "no-match-add-new-option-button" }, "Add")

package/dist/esm/sas-alert_26.entry.js

@@ -4289,7 +4289,7 @@ let SasListItem = class {
 };
 SasListItem.style = sasListItemCss;
 
-const sasMultiselectCss = ":host{display:block;--checkbox-padding:8px}:host sas-form-input-template{--input-height:var(--multiselect-height, 40px)}:host .input-container{position:absolute;top:50%;transform:translateY(-50%);left:10px;right:30px;white-space:nowrap;display:flex;align-items:center;height:100%}:host .input-container:focus{outline:none}:host sas-chip{margin-right:10px;--chip-padding:2px 10px;box-sizing:border-box}:host #text-chip{color:var(--primary)}:host .clear-button-container{display:flex;justify-content:flex-end}:host .clear-button{color:var(--primary);border:none;background-color:transparent;cursor:pointer;text-decoration:underline}:host .filter{border:none;border-bottom:1px solid var(--s-300);box-sizing:border-box;color:var(--s-500);font-size:14px;width:100%;padding:10px}:host .filter:focus{outline:none;background-color:white}:host ::-webkit-input-placeholder{color:var(--s-400)}:host :-ms-input-placeholder{color:var(--s-400)}:host ::placeholder{color:var(--s-400)}:host .clear-icon{--icon-color:white;--icon-background-color:var(--s-300);--icon-background-width:14px;--icon-background-height:14px;--icon-size:9px;margin-left:auto;box-shadow:none}:host sas-checkbox-group{max-height:200px;overflow-y:auto;position:relative}:host sas-checkbox{box-sizing:border-box;width:100%;outline:none}:host #no-match-tip:not(.hide){display:grid;grid-template-columns:max-content auto;grid-gap:10px;padding:10px 15px}:host .no-match-add-new-option-button{margin:0;color:#0D76B4;font-family:roboto;font-weight:500;cursor:pointer;margin-right:auto}:host .hide{display:none}";
+const sasMultiselectCss = ":host{display:block;--checkbox-padding:8px}:host sas-form-input-template{--input-height:var(--multiselect-height, 40px)}:host .input-container{position:absolute;top:50%;transform:translateY(-50%);left:10px;right:30px;white-space:nowrap;display:flex;align-items:center;height:100%}:host .input-container:focus{outline:none}:host sas-chip{margin-right:10px;--chip-padding:2px 10px;box-sizing:border-box}:host #text-chip{color:var(--primary)}:host .clear-button-container{display:flex;justify-content:flex-end;text-wrap:nowrap;padding:10px}:host .clear-button{color:var(--primary);border:none;background-color:transparent;cursor:pointer;text-decoration:underline}:host .filter{border:none;box-sizing:border-box;color:var(--s-500);font-size:14px;width:100%;padding:10px}:host .filter:focus{outline:none;background-color:white}:host ::-webkit-input-placeholder{color:var(--s-400)}:host :-ms-input-placeholder{color:var(--s-400)}:host ::placeholder{color:var(--s-400)}:host .clear-icon{--icon-color:white;--icon-background-color:var(--s-300);--icon-background-width:14px;--icon-background-height:14px;--icon-size:9px;margin-left:auto;box-shadow:none}:host sas-checkbox-group{max-height:200px;overflow-y:auto;position:relative}:host sas-checkbox{box-sizing:border-box;width:100%;outline:none}:host #no-match-tip:not(.hide){display:grid;grid-template-columns:max-content auto;grid-gap:10px;padding:10px 15px}:host .no-match-add-new-option-button{margin:0;color:#0D76B4;font-family:roboto;font-weight:500;cursor:pointer;margin-right:auto}:host .hide{display:none}:host .inline{display:flex;border-bottom:1px solid var(--s-300);flex-direction:row-reverse}";
 
 let SasMultiselect = class {
   constructor(hostRef) {
@@ -4936,14 +4936,34 @@ let SasMultiselect = class {
     this.filterText = "";
     this.filter();
   }
+  getSelectedDisabledOptionValues() {
+    const disabledOptions = this.options.filter(option => {
+      return option.disabled === true;
+    });
+    const disabledSubOptions = this.options
+      .filter(option => { var _a; return ((_a = option.sub) === null || _a === void 0 ? void 0 : _a.length) > 0; })
+      .map(option => option.sub)
+      .reduce((acc, curVal) => acc.concat(curVal), [])
+      .filter(subOption => subOption.disabled === true);
+    const selectedOptions = this.values;
+    const selectedDisabledOptionValues = selectedOptions.filter(selectedOption => {
+      return disabledOptions.some(disabledOption => disabledOption.value === selectedOption)
+        || disabledSubOptions.some(disabledSubOption => disabledSubOption.value === selectedOption);
+    });
+    return selectedDisabledOptionValues;
+  }
   clearSelection() {
-    this.values = [];
+    // When selection is cleared by user, don't clear any disabled options
+    this.values = this.getSelectedDisabledOptionValues();
     this.update();
   }
   getClearText() {
     const inputFilter = this.el.shadowRoot.querySelector('#inputFilter');
     if (inputFilter === null) {
-      if (this.chipArray.length === 0) {
+      if (this.chipArray.length === 0 && !this.search) {
+        this.buttonFilterText = 'Clear Selection';
+      }
+      else if (this.chipArray.length === 0) {
         this.buttonFilterText = 'Clear';
       }
       else {
@@ -4966,11 +4986,11 @@ let SasMultiselect = class {
   render() {
     return (h(Host, { tabindex: "0" }, h("sas-form-input-template", { label: this.label, outside: this.outside, placeholder: this.placeholder, "icon-right": "far fa-chevron-down", required: this.required, readonly: true, value: this.value, disabled: this.disabled, "data-message": this.message, position: this.position, minimumPixelsAboveComponentRequired: 250 }, this.type === 'chip'
       ? h("div", { class: "input-container", tabindex: -1, slot: "input" }, this.getChipElement(), h("sas-chip", { class: this.getChipClass(this.chipArray.length > this.maxChip), id: "text-chip", text: `+${this.chipArray.length - this.maxChip}`, uppercase: false, bold: false, onMouseDown: this.chipMouseDownEvent }))
-      : null, this.clear
-      ? h("div", { slot: "container", class: "clear-button-container" }, h("button", { class: "clear-button", onClick: this.clearAll }, this.getClearText()))
+      : null, h("div", { class: this.clear || this.search ? 'inline' : null, slot: 'container' }, this.clear
+      ? h("div", { class: "clear-button-container" }, h("button", { class: "clear-button", onClick: this.clearAll }, this.getClearText()))
       : null, this.search
-      ? h("input", { id: "inputFilter", slot: "container", class: "filter", placeholder: "filter", onInput: this.inputEvent })
-      : null, this.formatOptions.length > 0
+      ? h("input", { id: "inputFilter", class: "filter", placeholder: "filter", onInput: this.inputEvent })
+      : null), this.formatOptions.length > 0
       ? h("sas-checkbox-group", { slot: "container", max: this.max, options: this.formatOptions, values: this.values, selectAll: this.selectAll, selectAllText: this.selectAllText })
       : h("slot", { slot: "container" }), h("div", { slot: "container", class: "hide", id: "no-match-tip" }, this.getNoMatchTipTextContent(), this.noMatchAction === 'show_no_match_add_new_option'
       ? h("p", { onClick: this.addNewOptionClickEvent, class: "no-match-add-new-option-button" }, "Add")