@carbon/ibmdotcom-web-components 1.37.0-rc.2 → 1.37.0-rc.3

package/es/components/filter-panel/filter-panel-composite.js

@@ -1,13 +1,16 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/assertThisInitialized"));
@@ -19,11 +22,9 @@ var _litElement = require("lit-element");
 var _settings = _interopRequireDefault(require("carbon-components/es/globals/js/settings.js"));
 var _ = _interopRequireDefault(require("../../internal/vendor/@carbon/web-components/icons/filter/16.js"));
 var _hostListener = _interopRequireDefault(require("../../internal/vendor/@carbon/web-components/globals/mixins/host-listener.js"));
-var _layout = require("@carbon/layout");
 require("./filter-group.js");
 require("./filter-panel.js");
 require("./filter-panel-modal.js");
-var _unsafeHtml = require("lit-html/directives/unsafe-html.js");
 var _hostListener2 = _interopRequireDefault(require("../../internal/vendor/@carbon/web-components/globals/decorators/host-listener.js"));
 var _settings2 = _interopRequireDefault(require("../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings.js"));
 var _stableSelector = _interopRequireDefault(require("../../globals/mixins/stable-selector.js"));
@@ -33,7 +34,10 @@ var _filterPanelCheckbox = _interopRequireDefault(require("./filter-panel-checkb
 var _filterPanelInputSelect = _interopRequireDefault(require("./filter-panel-input-select.js"));
 var _filterPanelInputSelectItem = _interopRequireDefault(require("./filter-panel-input-select-item.js"));
 var _carbonElement = require("../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _mediaQuery = _interopRequireWildcard(require("../../component-mixins/media-query/media-query.js"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /**
                                                                                                                                                                                                                                                                                                                                            * @license
@@ -45,16 +49,15 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
                                                                                                                                                                                                                                                                                                                                            */
 var prefix = _settings["default"].prefix;
 var ddsPrefix = _settings2["default"].stablePrefix;
-var breakpoint = parseFloat(_layout.breakpoints.lg.width) * _layout.baseFontSize;
 
 /**
  * Filter panel composite
  *
  * @element dds-filter-panel-composite
  */
-var DDSFilterPanelComposite = (0, _decorate2["default"])([(0, _carbonElement.carbonElement)("".concat(ddsPrefix, "-filter-panel-composite"))], function (_initialize, _HostListenerMixin) {
-  var DDSFilterPanelComposite = /*#__PURE__*/function (_HostListenerMixin2) {
-    (0, _inherits2["default"])(DDSFilterPanelComposite, _HostListenerMixin2);
+var DDSFilterPanelComposite = (0, _decorate2["default"])([(0, _carbonElement.carbonElement)("".concat(ddsPrefix, "-filter-panel-composite"))], function (_initialize, _MediaQueryMixin) {
+  var DDSFilterPanelComposite = /*#__PURE__*/function (_MediaQueryMixin2) {
+    (0, _inherits2["default"])(DDSFilterPanelComposite, _MediaQueryMixin2);
     var _super = _createSuper(DDSFilterPanelComposite);
     function DDSFilterPanelComposite() {
       var _this;
@@ -67,7 +70,7 @@ var DDSFilterPanelComposite = (0, _decorate2["default"])([(0, _carbonElement.car
       return _this;
     }
     return (0, _createClass2["default"])(DDSFilterPanelComposite);
-  }(_HostListenerMixin);
+  }(_MediaQueryMixin);
   return {
     F: DDSFilterPanelComposite,
     d: [{
@@ -84,7 +87,7 @@ var DDSFilterPanelComposite = (0, _decorate2["default"])([(0, _carbonElement.car
           var stableSelector = _filterPanelInputSelectItem["default"].stableSelector;
           _this2._focusElement = "".concat(stableSelector, "[value=\"").concat(value, "\"]");
 
-          // remove the DDSInputSelect (header) value from list to add an inner child instead
+          // Remove the DDSInputSelect (header) value from list to add an inner child instead.
           _this2._selectedValues = _this2._selectedValues.filter(function (e) {
             return e !== headerValue;
           });
@@ -95,14 +98,13 @@ var DDSFilterPanelComposite = (0, _decorate2["default"])([(0, _carbonElement.car
             return;
           }
           if (!_this2._selectedValues.includes(value)) {
-            _this2._selectedValues.push(value);
+            _this2._selectedValues = [].concat((0, _toConsumableArray2["default"])(_this2._selectedValues), [value]);
           }
           if (lastValue && _this2._selectedValues.includes(lastValue)) {
             _this2._selectedValues = _this2._selectedValues.filter(function (e) {
               return e !== lastValue;
             });
           }
-          _this2.renderStatus();
         };
       }
     }, {
@@ -115,32 +117,31 @@ var DDSFilterPanelComposite = (0, _decorate2["default"])([(0, _carbonElement.car
           var _this3$shadowRoot;
           var value = event.detail.value;
 
-          // toggle checkbox in filter panel modal
+          // Toggle checkbox in filter panel modal.
           _this3.querySelectorAll("".concat(ddsPrefix, "-filter-panel-checkbox")).forEach(function (e) {
             if (e.getAttribute('value') === value) {
               var _e$closest;
               e.toggleAttribute('checked');
-              (_e$closest = e.closest("".concat(ddsPrefix, "-filter-group-item"))) === null || _e$closest === void 0 ? void 0 : _e$closest.setAttribute('open', '');
+              (_e$closest = e.closest("".concat(ddsPrefix, "-filter-group-item"))) === null || _e$closest === void 0 || _e$closest.setAttribute('open', '');
               var stableSelector = _filterPanelCheckbox["default"].stableSelector;
               _this3._focusElement = "".concat(stableSelector, "[value=\"").concat(value, "\"]");
             }
           });
           var filterGroupItems = _this3.querySelectorAll("".concat(ddsPrefix, "-filter-group-item"));
-          (_this3$shadowRoot = _this3.shadowRoot) === null || _this3$shadowRoot === void 0 ? void 0 : _this3$shadowRoot.querySelectorAll("".concat(ddsPrefix, "-filter-group-item")).forEach(function (filterGroupItem, index) {
+          (_this3$shadowRoot = _this3.shadowRoot) === null || _this3$shadowRoot === void 0 || _this3$shadowRoot.querySelectorAll("".concat(ddsPrefix, "-filter-group-item")).forEach(function (filterGroupItem, index) {
             if (filterGroupItem.open) {
               filterGroupItems[index].open = true;
             }
           });
 
-          // toggle value in list
+          // Toggle value in list.
           if (!_this3._selectedValues.includes(value)) {
-            _this3._selectedValues.push(value);
+            _this3._selectedValues = [].concat((0, _toConsumableArray2["default"])(_this3._selectedValues), [value]);
           } else {
             _this3._selectedValues = _this3._selectedValues.filter(function (e) {
               return e !== value;
             });
           }
-          _this3.renderStatus();
         };
       }
     }, {
@@ -156,7 +157,7 @@ var DDSFilterPanelComposite = (0, _decorate2["default"])([(0, _carbonElement.car
           if (match !== -1) {
             _this4._filterGroupsAllRevealed[match].value = event.detail.value;
           } else {
-            _this4._filterGroupsAllRevealed.push(event.detail);
+            _this4._filterGroupsAllRevealed = [].concat((0, _toConsumableArray2["default"])(_this4._filterGroupsAllRevealed), [event.detail]);
           }
         };
       }
@@ -181,15 +182,15 @@ var DDSFilterPanelComposite = (0, _decorate2["default"])([(0, _carbonElement.car
           var stableSelector = _filterPanelInputSelect["default"].stableSelector;
           _this6._focusElement = "".concat(stableSelector, "[header-value=\"").concat(headerValue, "\"]");
 
-          // toggle checkbox in filter panel modal
+          // Toggle checkbox in filter panel modal.
           _this6.querySelectorAll("".concat(ddsPrefix, "-filter-panel-input-select")).forEach(function (e) {
-            // capture the element counterpart in Filter Panel Modal
+            // Capture the element counterpart in Filter Panel Modal.
             if (e.getAttribute('header-value') === headerValue) {
               var currentGroup = e.closest("".concat(ddsPrefix, "-filter-group-item"));
-              currentGroup === null || currentGroup === void 0 ? void 0 : currentGroup.setAttribute('open', '');
+              currentGroup === null || currentGroup === void 0 || currentGroup.setAttribute('open', '');
 
               // Clears all other sibling items in the Filter Group
-              currentGroup === null || currentGroup === void 0 ? void 0 : currentGroup.querySelectorAll("".concat(ddsPrefix, "-filter-panel-input-select")).forEach(function (inputSelect) {
+              currentGroup === null || currentGroup === void 0 || currentGroup.querySelectorAll("".concat(ddsPrefix, "-filter-panel-input-select")).forEach(function (inputSelect) {
                 if (inputSelect === e) return;
                 _this6._selectedValues = _this6._selectedValues.filter(function (str) {
                   return str !== inputSelect.getAttribute('header-value');
@@ -202,15 +203,14 @@ var DDSFilterPanelComposite = (0, _decorate2["default"])([(0, _carbonElement.car
             }
           });
 
-          // toggle value in list
+          // Toggle value in list.
           if (!_this6._selectedValues.includes(headerValue)) {
-            _this6._selectedValues.push(headerValue);
+            _this6._selectedValues = [].concat((0, _toConsumableArray2["default"])(_this6._selectedValues), [headerValue]);
           } else {
             _this6._selectedValues = _this6._selectedValues.filter(function (e) {
               return e !== headerValue;
             });
           }
-          _this6.renderStatus();
         };
       }
     }, {
@@ -220,7 +220,7 @@ var DDSFilterPanelComposite = (0, _decorate2["default"])([(0, _carbonElement.car
       value: function value() {
         var _this7 = this;
         return function () {
-          _this7.renderStatus();
+          _this7._setHeadingFromSlot(_this7._headingSlot);
         };
       }
     }, {
@@ -243,7 +243,7 @@ var DDSFilterPanelComposite = (0, _decorate2["default"])([(0, _carbonElement.car
           var _this8$shadowRoot, _this8$shadowRoot2, _this8$shadowRoot3;
           _this8._selectedValues = [];
 
-          // handles clear when clearing from the static filter panel modal
+          // Handles clear when clearing from the static filter panel modal.
           _this8._contents.forEach(function (group) {
             group.querySelectorAll("".concat(ddsPrefix, "-filter-panel-checkbox")).forEach(function (e) {
               e.removeAttribute('checked');
@@ -259,20 +259,24 @@ var DDSFilterPanelComposite = (0, _decorate2["default"])([(0, _carbonElement.car
           });
 
           // handles clear when clearing from the filter panel static
-          (_this8$shadowRoot = _this8.shadowRoot) === null || _this8$shadowRoot === void 0 ? void 0 : _this8$shadowRoot.querySelectorAll("".concat(ddsPrefix, "-filter-panel-checkbox")).forEach(function (e) {
+          (_this8$shadowRoot = _this8.shadowRoot) === null || _this8$shadowRoot === void 0 || _this8$shadowRoot.querySelectorAll("".concat(ddsPrefix, "-filter-panel-checkbox")).forEach(function (e) {
             e.removeAttribute('checked');
           });
-          (_this8$shadowRoot2 = _this8.shadowRoot) === null || _this8$shadowRoot2 === void 0 ? void 0 : _this8$shadowRoot2.querySelectorAll("".concat(ddsPrefix, "-filter-panel-input-select-item")).forEach(function (e) {
+          (_this8$shadowRoot2 = _this8.shadowRoot) === null || _this8$shadowRoot2 === void 0 || _this8$shadowRoot2.querySelectorAll("".concat(ddsPrefix, "-filter-panel-input-select-item")).forEach(function (e) {
             e.removeAttribute('selected');
             e.removeAttribute('is-open');
           });
-          (_this8$shadowRoot3 = _this8.shadowRoot) === null || _this8$shadowRoot3 === void 0 ? void 0 : _this8$shadowRoot3.querySelectorAll("".concat(ddsPrefix, "-filter-panel-input-select")).forEach(function (e) {
+          (_this8$shadowRoot3 = _this8.shadowRoot) === null || _this8$shadowRoot3 === void 0 || _this8$shadowRoot3.querySelectorAll("".concat(ddsPrefix, "-filter-panel-input-select")).forEach(function (e) {
             e.removeAttribute('selected');
             e.removeAttribute('is-open');
           });
-          _this8.renderStatus();
         };
       }
+    }, {
+      kind: "field",
+      decorators: [(0, _litElement.query)('slot[name=heading]')],
+      key: "_headingSlot",
+      value: void 0
     }, {
       kind: "field",
       decorators: [(0, _litElement.property)({
@@ -354,9 +358,9 @@ var DDSFilterPanelComposite = (0, _decorate2["default"])([(0, _carbonElement.car
     }, {
       kind: "field",
       decorators: [(0, _litElement.property)()],
-      key: "_title",
+      key: "_heading",
       value: function value() {
-        return [];
+        return '';
       }
     }, {
       kind: "field",
@@ -365,13 +369,6 @@ var DDSFilterPanelComposite = (0, _decorate2["default"])([(0, _carbonElement.car
       value: function value() {
         return [];
       }
-    }, {
-      kind: "field",
-      decorators: [(0, _litElement.property)()],
-      key: "_filterButtonTitle",
-      value: function value() {
-        return '';
-      }
     }, {
       kind: "field",
       decorators: [(0, _litElement.property)()],
@@ -381,10 +378,10 @@ var DDSFilterPanelComposite = (0, _decorate2["default"])([(0, _carbonElement.car
       }
     }, {
       kind: "field",
-      decorators: [(0, _litElement.property)()],
+      decorators: [(0, _litElement.state)()],
       key: "_isMobile",
       value: function value() {
-        return window.innerWidth < breakpoint;
+        return this.carbonBreakpoints.lg.matches;
       }
     }, {
       kind: "field",
@@ -393,36 +390,29 @@ var DDSFilterPanelComposite = (0, _decorate2["default"])([(0, _carbonElement.car
       value: function value() {
         return null;
       }
-    }, {
-      kind: "field",
-      decorators: [(0, _hostListener2["default"])('window:resize')],
-      key: "_handleWindowResize",
-      value: function value() {
-        var _this9 = this;
-        return function () {
-          _this9._isMobile = window.innerWidth < breakpoint;
-        };
-      }
     }, {
       kind: "method",
-      key: "_querySelectorMobile",
+      key: "mediaQueryCallbackMaxLG",
       value:
       /**
-       * sets the array for the filter button title
+       * Sets the heading text, to be composed with the current count.
        */
       /**
        * sets the selected values into an array
        */
-      /**
-       * sets the filter button title
-       */
       /**
        * stores which filter groups have revealed filters
        */
       /**
        * An element to set focus to on render.
        */
-      function () {
+      function mediaQueryCallbackMaxLG() {
+        this._isMobile = this.carbonBreakpoints.lg.matches;
+      }
+    }, {
+      kind: "method",
+      key: "_querySelectorMobile",
+      value: function () {
         var _querySelectorMobile2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(id) {
           return _regenerator["default"].wrap(function _callee$(_context) {
             while (1) switch (_context.prev = _context.next) {
@@ -511,16 +501,16 @@ var DDSFilterPanelComposite = (0, _decorate2["default"])([(0, _carbonElement.car
       key: "_handleSlotChange",
       value: function _handleSlotChange(_ref) {
         var target = _ref.target;
-        var contents = this._contents = target.assignedNodes().filter(function (node) {
+        this._contents = target.assignedNodes().filter(function (node) {
           return node.nodeType !== Node.TEXT_NODE || node.textContent.trim();
         });
         // Calculate initial this._selectedValues. Look at the first node, which is
         // expected to be <dds-filter-group>.
-        if (contents[0] instanceof Element) {
-          var items = Array.from(contents[0].querySelectorAll("".concat(ddsPrefix, "-filter-panel-checkbox[checked],\n            ").concat(ddsPrefix, "-filter-panel-input-select[selected],\n            ").concat(ddsPrefix, "-filter-panel-input-select-item[selected]")));
+        if (this._contents[0] instanceof Element) {
+          var items = Array.from(this._contents[0].querySelectorAll("".concat(ddsPrefix, "-filter-panel-checkbox[checked],\n            ").concat(ddsPrefix, "-filter-panel-input-select[selected],\n            ").concat(ddsPrefix, "-filter-panel-input-select-item[selected]")));
           this._selectedValues = items.map(function (item) {
-            var _item$getAttribute;
-            return (_item$getAttribute = item.getAttribute('value')) !== null && _item$getAttribute !== void 0 ? _item$getAttribute : '';
+            var _ref2, _item$getAttribute;
+            return (_ref2 = (_item$getAttribute = item.getAttribute('value')) !== null && _item$getAttribute !== void 0 ? _item$getAttribute : item.getAttribute('header-value')) !== null && _ref2 !== void 0 ? _ref2 : '';
           }).filter(function (item) {
             return !!item;
           });
@@ -528,38 +518,63 @@ var DDSFilterPanelComposite = (0, _decorate2["default"])([(0, _carbonElement.car
       }
     }, {
       kind: "method",
-      key: "renderStatus",
-      value: function renderStatus() {
-        this._filterButtonTitle = "\n      ".concat(this._title[0].innerText).concat(this._selectedValues.length > 0 ? " (".concat(this._selectedValues.length, ")") : '', "\n    ");
+      key: "_getComposedHeadingFilterCount",
+      value: function _getComposedHeadingFilterCount() {
+        var filterCount = this._selectedValues.length > 0 ? " (".concat(this._selectedValues.length, ")") : '';
+        return "".concat(this._heading).concat(filterCount);
       }
 
       /**
-       * Handles `slotchange` event.
+       * Handles `slotchange` event for the heading slot.
        *
        * @param event The event.
        */
     }, {
       kind: "method",
-      key: "_handleTitleSlotChange",
-      value: function _handleTitleSlotChange(_ref2) {
-        var target = _ref2.target;
-        this._title = target.assignedNodes().filter(function (node) {
+      key: "_handleHeadingSlotChange",
+      value: function _handleHeadingSlotChange(_ref3) {
+        var target = _ref3.target;
+        this._setHeadingFromSlot(target);
+      }
+    }, {
+      kind: "method",
+      key: "_setHeadingFromSlot",
+      value: function _setHeadingFromSlot(slot) {
+        // Clean slate.
+        this._heading = '';
+
+        // Work through candidate headings, ultimately we're only interested in the
+        // first non-empty node.
+        var candidateHeadings = slot.assignedNodes().filter(function (node) {
           return node.nodeType !== Node.TEXT_NODE || node.textContent.trim();
         });
-        this._filterButtonTitle = this._title[0].innerText;
+
+        // If we found something, lets retain it's textContent as the heading.
+        if (candidateHeadings.length > 0) {
+          this._heading = candidateHeadings[0].textContent ? candidateHeadings[0].textContent.trim() : '';
+        }
       }
 
       /**
        * Renders original content into the modal and listens for changes to this
-       * content to then be stored in `this._title` and `this._content`.
+       * content to then be stored in `this._heading` and `this._contents`.
        */
     }, {
       kind: "field",
       key: "_renderModal",
+      value: function value() {
+        var _this9 = this;
+        return function () {
+          return (0, _litElement.html)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    <dds-filter-panel-modal\n      ?open=", "\n      heading=\"", "\"\n      ?has-selections=\"", "\">\n      <slot @slotchange=\"", "\"></slot>\n    </dds-filter-panel-modal>\n  "])), _this9.openFilterModal, _this9._getComposedHeadingFilterCount(), _this9._selectedValues.length, _this9._handleSlotChange);
+        };
+      }
+    }, {
+      kind: "field",
+      key: "_renderMobile",
       value: function value() {
         var _this10 = this;
         return function () {
-          return (0, _litElement.html)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    <dds-filter-panel-modal\n      ?open=", "\n      heading=\"", "\"\n      ?has-selections=\"", "\">\n      <slot name=\"heading\" @slotchange=\"", "\"></slot>\n      <slot @slotchange=\"", "\"></slot>\n    </dds-filter-panel-modal>\n  "])), _this10.openFilterModal, _this10._filterButtonTitle, _this10._selectedValues.length, _this10._handleTitleSlotChange, _this10._handleSlotChange);
+          return (0, _litElement.html)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    <button class=\"bx--filter-button\" @click=", ">\n      <div class=\"", "--filter__modal__button\">\n        ", " ", "\n      </div>\n    </button>\n    ", "\n  "])), _this10._openModal, prefix, _this10._getComposedHeadingFilterCount(), (0, _["default"])(), _this10._renderModal());
         };
       }
     }, {
@@ -568,11 +583,7 @@ var DDSFilterPanelComposite = (0, _decorate2["default"])([(0, _carbonElement.car
       value: function value() {
         var _this11 = this;
         return function () {
-          return (0, _litElement.html)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    <dds-filter-panel\n      heading=\"", "\"\n      ?has-selections=\"", "\">\n      ", "\n      ", "\n    </dds-filter-panel>\n  "])), _this11._filterButtonTitle, _this11._selectedValues.length, _this11._title.map(function (e) {
-            return (0, _litElement.html)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])([" ", " "])), (0, _unsafeHtml.unsafeHTML)(e.outerHTML));
-          }), _this11._contents.map(function (e) {
-            return (0, _litElement.html)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])([" ", " "])), (0, _unsafeHtml.unsafeHTML)(e.outerHTML));
-          }));
+          return (0, _litElement.html)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    <dds-filter-panel\n      heading=\"", "\"\n      ?has-selections=\"", "\">\n      <slot @slotchange=\"", "\"></slot>\n    </dds-filter-panel>\n  "])), _this11._getComposedHeadingFilterCount(), _this11._selectedValues.length, _this11._handleSlotChange);
         };
       }
     }, {
@@ -583,7 +594,12 @@ var DDSFilterPanelComposite = (0, _decorate2["default"])([(0, _carbonElement.car
        * Renders copies of slotted elements into the desktop presentation.
        */
       function render() {
-        return (0, _litElement.html)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n      <button class=\"bx--filter-button\" @click=", ">\n        <div class=\"", "--filter__modal__button\">\n          ", " ", "\n        </div>\n      </button>\n      ", " ", "\n    "])), this._openModal, prefix, this._filterButtonTitle, (0, _["default"])(), this._renderModal(), this._renderDesktop());
+        // Note that the <slot name="heading"> contents, intended to be
+        // <dds-filter-panel-heading> are never shown as is. The text contents
+        // are composed, using this._getComposedHeadingFilterCount(), together with
+        // the current filter count, and passed as an attribute to
+        // <dds-filter-panel-modal> and <dds-filter-panel>.
+        return (0, _litElement.html)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n      <slot\n        name=\"heading\"\n        @slotchange=\"", "\"></slot>\n      ", "\n    "])), this._handleHeadingSlotChange, this._isMobile ? this._renderMobile() : this._renderDesktop());
       }
     }, {
       kind: "method",
@@ -604,7 +620,7 @@ var DDSFilterPanelComposite = (0, _decorate2["default"])([(0, _carbonElement.car
               case 4:
                 targetElement = _context4.sent;
                 if (targetElement instanceof HTMLElement) {
-                  targetElement === null || targetElement === void 0 ? void 0 : targetElement.focus();
+                  targetElement === null || targetElement === void 0 || targetElement.focus();
                 }
                 this._focusElement = null;
               case 7:
@@ -711,8 +727,7 @@ var DDSFilterPanelComposite = (0, _decorate2["default"])([(0, _carbonElement.car
       }
     }]
   };
-}, (0, _hostListener["default"])((0, _stableSelector["default"])(_litElement.LitElement)));
+}, (0, _mediaQuery["default"])((0, _hostListener["default"])((0, _stableSelector["default"])(_litElement.LitElement)), (0, _defineProperty2["default"])({}, _mediaQuery.MQBreakpoints.LG, _mediaQuery.MQDirs.MAX)));
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-var _default = DDSFilterPanelComposite;
-exports["default"] = _default;
+var _default = exports["default"] = DDSFilterPanelComposite;
 //# sourceMappingURL=filter-panel-composite.js.map