@enact/limestone 1.3.0

package/FlexiblePopupPanels/FlexiblePopupPanels.js

@@ -0,0 +1,177 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.FlexiblePopupPanelsBase = exports.FlexiblePopupPanels = void 0;
+var _kind = _interopRequireDefault(require("@enact/core/kind"));
+var _util = require("@enact/core/util");
+var _I18nDecorator = require("@enact/i18n/I18nDecorator");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = require("react");
+var _Panels = require("../internal/Panels");
+var _useNavButtonFocus = require("./useNavButtonFocus");
+var _FlexiblePopupPanelsModule = _interopRequireDefault(require("./FlexiblePopupPanels.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["noAnimation"];
+/**
+ * An instance of {@link limestone/Panels.Panels|Panels} which restricts the `Panel` to the left
+ * or right side of the screen inside a popup. This panel flexes both horizontally and vertically,
+ * with the Header positioned outside the Panel background area. This is typically used for a single
+ * setting or control at a time, for maximum background area viewing.
+ *
+ * @class FlexiblePopupPanels
+ * @memberof limestone/FlexiblePopupPanels
+ * @ui
+ * @public
+ */
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+var FlexiblePopupPanelsBase = exports.FlexiblePopupPanelsBase = (0, _kind["default"])({
+  name: 'FlexiblePopupPanels',
+  propTypes: /** @lends limestone/FlexiblePopupPanels.FlexiblePopupPanels.prototype */{
+    /**
+     * Specifies when and how to show `nextButton` on `FlexiblePopupPanels.Panel`.
+     *
+     * * `'auto'` will display the `nextButton` if more than one `FlexiblePopupPanels.Panel` exists
+     * * `'always'` will always display the `nextButton`
+     * * `'never'` will always hide the `nextButton`
+     *
+     * Note, children values will override the generalized parent visibility settings. In this
+     * case, a customized `nextButton` on `FlexiblePopupPanels.Panel` will take precedence over the
+     * `nextButtonVisibility` value.
+     *
+     * @type {('auto'|'always'|'never')}
+     * @default 'auto'
+     * @public
+     */
+    nextButtonVisibility: _propTypes["default"].oneOf(['auto', 'always', 'never']),
+    /**
+    * Called when the index value is changed.
+    *
+    * @type {Function}
+    * @param {Object} event
+    * @public
+    */
+    onChange: _propTypes["default"].func,
+    /**
+     * Called when the next button is clicked in `FlexiblePopupPanels.Panel`.
+     *
+     * Calling `preventDefault` on the passed event will prevent advancing to the next panel.
+     *
+     * @type {Function}
+     * @public
+     */
+    onNextClick: _propTypes["default"].func,
+    /**
+     * Called when the previous button is clicked in `FlexiblePopupPanels.Panel`.
+     *
+     * Calling `preventDefault` on the passed event will prevent navigation to the previous panel.
+     *
+     * @type {Function}
+     * @public
+     */
+    onPrevClick: _propTypes["default"].func,
+    /**
+     * Specifies when and how to show `prevButton` on `FlexiblePopupPanels.Panel`.
+     *
+     * * `'auto'` will display the `prevButton` if more than one `FlexiblePopupPanels.Panel` exists
+     * * `'always'` will always display the `prevButton`
+     * * `'never'` will always hide the `prevButton`
+     *
+     * Note, children values will override the generalized parent visibility settings. In this case,
+     * if user provides a customized `prevButton` on `FlexiblePopupPanels.Panel` will take precedence over the `prevButtonVisibility` value.
+     *
+     * @type {('auto'|'always'|'never')}
+     * @default 'auto'
+     * @public
+     */
+    prevButtonVisibility: _propTypes["default"].oneOf(['auto', 'always', 'never']),
+    /**
+     * Indicates the locale's text direction is right-to-left.
+     *
+     * @type {Boolean}
+     * @private
+     */
+    rtl: _propTypes["default"].bool
+  },
+  defaultProps: {
+    nextButtonVisibility: 'auto',
+    prevButtonVisibility: 'auto'
+  },
+  styles: {
+    css: _FlexiblePopupPanelsModule["default"],
+    className: 'viewport'
+  },
+  computed: {
+    children: function children(_ref) {
+      var _children = _ref.children,
+        nextButtonVisibility = _ref.nextButtonVisibility,
+        onChange = _ref.onChange,
+        onNextClick = _ref.onNextClick,
+        onPrevClick = _ref.onPrevClick,
+        prevButtonVisibility = _ref.prevButtonVisibility;
+      return (0, _util.mapAndFilterChildren)(_children, function (child) {
+        var props = {
+          nextButtonVisibility: nextButtonVisibility,
+          onChange: onChange,
+          onNextClick: onNextClick,
+          onPrevClick: onPrevClick,
+          prevButtonVisibility: prevButtonVisibility
+        };
+        return /*#__PURE__*/(0, _react.cloneElement)(child, props);
+      });
+    },
+    onBack: function onBack(_ref2) {
+      var onChange = _ref2.onChange;
+      return onChange;
+    },
+    className: function className(_ref3) {
+      var children = _ref3.children,
+        nextButtonVisibility = _ref3.nextButtonVisibility,
+        prevButtonVisibility = _ref3.prevButtonVisibility,
+        rtl = _ref3.rtl,
+        styler = _ref3.styler;
+      var isPrevButtonVisible = Boolean(prevButtonVisibility === 'always' || prevButtonVisibility === 'auto' && (children === null || children === void 0 ? void 0 : children.length) > 1);
+      var isNextButtonVisible = Boolean(nextButtonVisibility === 'always' || nextButtonVisibility === 'auto' && (children === null || children === void 0 ? void 0 : children.length) > 1);
+      return styler.append({
+        noNavButton: rtl && !isNextButtonVisible || !rtl && !isPrevButtonVisible
+      });
+    }
+  },
+  render: function render(_ref4) {
+    var noAnimation = _ref4.noAnimation,
+      props = _objectWithoutProperties(_ref4, _excluded);
+    delete props.nextButtonVisibility;
+    delete props.onChange;
+    delete props.onNextClick;
+    delete props.onPrevClick;
+    delete props.prevButtonVisibility;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Panels.Viewport, _objectSpread(_objectSpread({}, props), {}, {
+      noAnimation: typeof ENACT_PACK_NO_ANIMATION !== 'undefined' && ENACT_PACK_NO_ANIMATION || noAnimation
+    }));
+  }
+});
+var FlexiblePopupPanels = exports.FlexiblePopupPanels = (0, _Panels.PopupDecorator)({
+  className: 'flexiblePopupPanels',
+  css: _FlexiblePopupPanelsModule["default"],
+  noAlertRole: true,
+  noOutline: true,
+  panelArranger: _Panels.FadeAndSlideArranger,
+  panelType: 'flexiblePopup'
+}, (0, _useNavButtonFocus.NavButtonFocusDecorator)((0, _I18nDecorator.I18nContextDecorator)({
+  rtlProp: 'rtl'
+}, FlexiblePopupPanelsBase)));
+
+// Directly set the defaultProps for position to the left side so it initially draws on the correct
+// side. The real default is assigned in PopupDecorator, but should still be overridable by an app.
+FlexiblePopupPanels.defaultProps = _objectSpread(_objectSpread({}, FlexiblePopupPanels.defaultProps), {}, {
+  position: 'left'
+});
+var _default = exports["default"] = FlexiblePopupPanels;

package/FlexiblePopupPanels/FlexiblePopupPanels.module.css

@@ -0,0 +1,291 @@
+.flexiblePopupPanels.popup {
+  padding: 1.25rem 0;
+  margin: 0;
+  max-height: 100vh;
+  min-width: 23.75rem;
+  box-sizing: border-box;
+}
+.flexiblePopupPanels.popup.narrow {
+  /* Needed to prevent global class being added in the DOM */
+}
+.flexiblePopupPanels .viewport {
+  position: relative;
+}
+.flexiblePopupPanels .viewport .panel {
+  padding: 0 1.25rem 1.40625rem;
+  height: calc(100vh - 2.5rem );
+}
+.flexiblePopupPanels .viewport.noNavButton .bodyLayout {
+  padding-left: 0;
+}
+.flexiblePopupPanels .viewport.noNavButton .bodyLayout .content {
+  margin-left: 0;
+}
+.flexiblePopupPanels .viewport.noNavButton .header {
+  margin-left: 0;
+}
+.flexiblePopupPanels .navCellBefore {
+  direction: rtl;
+}
+:global(.enact-locale-right-to-left) .flexiblePopupPanels .navCellBefore {
+  direction: ltr;
+}
+.flexiblePopupPanels .navCellAfter {
+  /* identifies the "after" cell */
+}
+.flexiblePopupPanels .body .navButton {
+  position: absolute;
+  transform: translate(0, -50%);
+  margin: 0;
+}
+.flexiblePopupPanels .body .navButton:global(.largeText) {
+  font-family: "Limestone";
+  font-size: var(--primitive-font-size-54);
+  font-style: normal;
+  font-weight: var(--primitive-font-weight-semibold);
+  font-kerning: normal;
+  height: 2.25rem;
+  line-height: 2rem;
+  min-width: 2.25rem;
+}
+:global(.enact-locale-non-latin) .flexiblePopupPanels .body .navButton:global(.largeText) {
+  font-family: "Limestone";
+}
+:global(.enact-locale-non-latin) .flexiblePopupPanels .body .navButton:global(.largeText) {
+  font-family: "Limestone";
+  font-size: var(--primitive-font-size-48);
+  font-style: normal;
+  font-weight: var(--primitive-font-weight-bold);
+}
+.flexiblePopupPanels > .body {
+  position: relative;
+  pointer-events: none;
+  padding: 0;
+}
+:global(.enact-locale-right-to-left) .flexiblePopupPanels > .body {
+  padding: 0;
+}
+.flexiblePopupPanels.fullHeight .bodyLayout {
+  height: 100%;
+}
+.flexiblePopupPanels:global(.neutral) {
+  background-color: transparent;
+}
+.flexiblePopupPanels:global(.neutral) .header,
+.flexiblePopupPanels:global(.neutral) .content {
+  border-radius: var(--semantic-radius-overlay);
+  box-shadow: 0 0.75rem 1rem 0 color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  outline-color: var(--semantic-color-stroke-overlay-default);
+  outline-style: solid;
+  outline-width: 0.021rem;
+  outline-offset: -0.021rem;
+}
+:global(.noAnimation) .flexiblePopupPanels:global(.neutral) .header,
+:global(.noAnimation) .flexiblePopupPanels:global(.neutral) .content {
+  box-shadow: none;
+}
+.flexiblePopupPanels:global(.neutral).scrimTranslucent .header,
+.flexiblePopupPanels:global(.neutral).scrimTranslucent .content {
+  background-color: var(--semantic-color-background-overlay-default);
+}
+.flexiblePopupPanels:global(.neutral).scrimNone .header,
+.flexiblePopupPanels:global(.neutral).scrimTransparent .header,
+.flexiblePopupPanels:global(.neutral).scrimNone .content,
+.flexiblePopupPanels:global(.neutral).scrimTransparent .content {
+  background-color: color(from var(--semantic-color-background-overlay-default) srgb r g b / 0.95);
+}
+:global(.enact-a11y-high-contrast) .flexiblePopupPanels:global(.neutral):global(.highContrast) {
+  background-color: transparent;
+}
+:global(.enact-a11y-high-contrast) .flexiblePopupPanels:global(.neutral):global(.highContrast) .header,
+:global(.enact-a11y-high-contrast) .flexiblePopupPanels:global(.neutral):global(.highContrast) .content {
+  border-radius: var(--semantic-radius-overlay);
+  box-shadow: 0 0.75rem 1rem 0 color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  outline-color: #7c848b;
+  outline-style: solid;
+  outline-width: 0.021rem;
+  outline-offset: -0.021rem;
+}
+:global(.noAnimation) :global(.enact-a11y-high-contrast) .flexiblePopupPanels:global(.neutral):global(.highContrast) .header,
+:global(.noAnimation) :global(.enact-a11y-high-contrast) .flexiblePopupPanels:global(.neutral):global(.highContrast) .content {
+  box-shadow: none;
+}
+:global(.enact-a11y-high-contrast) .flexiblePopupPanels:global(.neutral):global(.highContrast).scrimTranslucent .header,
+:global(.enact-a11y-high-contrast) .flexiblePopupPanels:global(.neutral):global(.highContrast).scrimTranslucent .content {
+  background-color: var(--semantic-color-background-overlay-default);
+}
+:global(.enact-a11y-high-contrast) .flexiblePopupPanels:global(.neutral):global(.highContrast).scrimNone .header,
+:global(.enact-a11y-high-contrast) .flexiblePopupPanels:global(.neutral):global(.highContrast).scrimTransparent .header,
+:global(.enact-a11y-high-contrast) .flexiblePopupPanels:global(.neutral):global(.highContrast).scrimNone .content,
+:global(.enact-a11y-high-contrast) .flexiblePopupPanels:global(.neutral):global(.highContrast).scrimTransparent .content {
+  background-color: var(--semantic-color-background-overlay-default);
+}
+.flexiblePopupPanels:global(.light) {
+  background-color: transparent;
+}
+.flexiblePopupPanels:global(.light) .header,
+.flexiblePopupPanels:global(.light) .content {
+  border-radius: var(--semantic-radius-overlay);
+  box-shadow: 0 0.75rem 1rem 0 color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  outline-color: var(--semantic-color-stroke-overlay-default);
+  outline-style: solid;
+  outline-width: 0.021rem;
+  outline-offset: -0.021rem;
+}
+:global(.noAnimation) .flexiblePopupPanels:global(.light) .header,
+:global(.noAnimation) .flexiblePopupPanels:global(.light) .content {
+  box-shadow: none;
+}
+.flexiblePopupPanels:global(.light).scrimTranslucent .header,
+.flexiblePopupPanels:global(.light).scrimTranslucent .content {
+  background-color: var(--semantic-color-background-overlay-default);
+}
+.flexiblePopupPanels:global(.light).scrimNone .header,
+.flexiblePopupPanels:global(.light).scrimTransparent .header,
+.flexiblePopupPanels:global(.light).scrimNone .content,
+.flexiblePopupPanels:global(.light).scrimTransparent .content {
+  background-color: color(from var(--semantic-color-background-overlay-default) srgb r g b / 0.95);
+}
+.flexiblePopupPanels:global(.game) {
+  --semantic-color-surface-default: #2d224c;
+  --semantic-color-surface-default-focused: #6d2fa1;
+  --semantic-color-on-surface-main-focused: #e6e6e6;
+  background-color: transparent;
+}
+.flexiblePopupPanels:global(.game) .header,
+.flexiblePopupPanels:global(.game) .content {
+  border-radius: var(--semantic-radius-overlay);
+  box-shadow: 0 0.75rem 1rem 0 color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  outline-color: var(--semantic-color-stroke-overlay-default);
+  outline-style: solid;
+  outline-width: 0.021rem;
+  outline-offset: -0.021rem;
+}
+:global(.noAnimation) .flexiblePopupPanels:global(.game) .header,
+:global(.noAnimation) .flexiblePopupPanels:global(.game) .content {
+  box-shadow: none;
+}
+.flexiblePopupPanels:global(.game).scrimTranslucent .header,
+.flexiblePopupPanels:global(.game).scrimTranslucent .content {
+  background-color: var(--semantic-color-background-overlay-default);
+}
+.flexiblePopupPanels:global(.game).scrimNone .header,
+.flexiblePopupPanels:global(.game).scrimTransparent .header,
+.flexiblePopupPanels:global(.game).scrimNone .content,
+.flexiblePopupPanels:global(.game).scrimTransparent .content {
+  background-color: color(from var(--semantic-color-background-overlay-default) srgb r g b / 0.95);
+}
+:global(.green) .flexiblePopupPanels:global(.game) {
+  --semantic-color-surface-default: #1F2C24;
+  --semantic-color-surface-default-focused: #3ea07d;
+  background-color: transparent;
+}
+:global(.green) .flexiblePopupPanels:global(.game) .header,
+:global(.green) .flexiblePopupPanels:global(.game) .content {
+  border-radius: var(--semantic-radius-overlay);
+  box-shadow: 0 0.75rem 1rem 0 color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  outline-color: var(--semantic-color-stroke-overlay-default);
+  outline-style: solid;
+  outline-width: 0.021rem;
+  outline-offset: -0.021rem;
+}
+:global(.noAnimation) :global(.green) .flexiblePopupPanels:global(.game) .header,
+:global(.noAnimation) :global(.green) .flexiblePopupPanels:global(.game) .content {
+  box-shadow: none;
+}
+:global(.green) .flexiblePopupPanels:global(.game).scrimTranslucent .header,
+:global(.green) .flexiblePopupPanels:global(.game).scrimTranslucent .content {
+  background-color: var(--semantic-color-background-overlay-default);
+}
+:global(.green) .flexiblePopupPanels:global(.game).scrimNone .header,
+:global(.green) .flexiblePopupPanels:global(.game).scrimTransparent .header,
+:global(.green) .flexiblePopupPanels:global(.game).scrimNone .content,
+:global(.green) .flexiblePopupPanels:global(.game).scrimTransparent .content {
+  background-color: color(from var(--semantic-color-background-overlay-default) srgb r g b / 0.95);
+}
+:global(.orange) .flexiblePopupPanels:global(.game) {
+  --semantic-color-surface-default: #422923;
+  --semantic-color-surface-default-focused: #b85f23;
+  background-color: transparent;
+}
+:global(.orange) .flexiblePopupPanels:global(.game) .header,
+:global(.orange) .flexiblePopupPanels:global(.game) .content {
+  border-radius: var(--semantic-radius-overlay);
+  box-shadow: 0 0.75rem 1rem 0 color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  outline-color: var(--semantic-color-stroke-overlay-default);
+  outline-style: solid;
+  outline-width: 0.021rem;
+  outline-offset: -0.021rem;
+}
+:global(.noAnimation) :global(.orange) .flexiblePopupPanels:global(.game) .header,
+:global(.noAnimation) :global(.orange) .flexiblePopupPanels:global(.game) .content {
+  box-shadow: none;
+}
+:global(.orange) .flexiblePopupPanels:global(.game).scrimTranslucent .header,
+:global(.orange) .flexiblePopupPanels:global(.game).scrimTranslucent .content {
+  background-color: var(--semantic-color-background-overlay-default);
+}
+:global(.orange) .flexiblePopupPanels:global(.game).scrimNone .header,
+:global(.orange) .flexiblePopupPanels:global(.game).scrimTransparent .header,
+:global(.orange) .flexiblePopupPanels:global(.game).scrimNone .content,
+:global(.orange) .flexiblePopupPanels:global(.game).scrimTransparent .content {
+  background-color: color(from var(--semantic-color-background-overlay-default) srgb r g b / 0.95);
+}
+.panel {
+  pointer-events: none;
+}
+.panel .bodyLayout {
+  max-height: -webkit-fill-available;
+  pointer-events: auto;
+  padding: 0 2.25rem;
+}
+.panel > *:first-child {
+  pointer-events: auto;
+}
+.panel.auto .body,
+.panel.small .body,
+.panel.large .body {
+  padding: 0;
+}
+.panel.auto .header,
+.panel.small .header,
+.panel.large .header {
+  margin-left: 3.5rem;
+  margin-right: 3.5rem;
+}
+.panel .content {
+  margin: 0 1.25rem;
+  padding: 1.25rem 0.5rem;
+  box-sizing: border-box;
+}
+.panel.auto {
+  /* Available for export */
+}
+.panel.small:nth-child(2),
+.panel.large:nth-child(2) {
+  left: -50%;
+}
+.panel.small .bodyLayout,
+.panel.large .bodyLayout {
+  width: 100%;
+}
+.panel.small .content,
+.panel.small .header {
+  width: 12.5rem;
+}
+.panel.small + .panel.large {
+  left: -17.5rem;
+}
+.panel.large .content,
+.panel.large .header {
+  width: 27.5rem;
+}
+.panel.large + .panel.small {
+  left: -32.5rem;
+}
+:global(.enact-locale-right-to-left) .panel > .body {
+  direction: ltr;
+}
+:global(.enact-locale-right-to-left) .panel > .body .bodyLayout {
+  direction: rtl;
+}

package/FlexiblePopupPanels/Header.js

@@ -0,0 +1,110 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.HeaderBase = exports.Header = void 0;
+var _handle = require("@enact/core/handle");
+var _kind = _interopRequireDefault(require("@enact/core/kind"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _$L = _interopRequireDefault(require("../internal/$L"));
+var _Panels = require("../internal/Panels");
+var _util = require("../internal/Panels/util");
+var _Header = _interopRequireDefault(require("../Panels/Header"));
+var _FlexiblePopupPanelsModule = _interopRequireDefault(require("./FlexiblePopupPanels.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /**
+ * A header component for `FlexiblePopupPanels.Panel` with a `title` and `subtitle`, supporting several configurable
+ * {@link ui/Slottable.Slottable|slots} for components.
+ *
+ * @class Header
+ * @extends limestone/Panels.Header
+ * @memberof limestone/FlexiblePopupPanels
+ * @ui
+ * @public
+ */
+var HeaderBase = exports.HeaderBase = (0, _kind["default"])({
+  name: 'Header',
+  contextType: _Panels.PanelsStateContext,
+  propTypes: /** @lends limestone/FlexiblePopupPanels.Header.prototype */{
+    /**
+     * Hint string read when focusing the application close button.
+     *
+     * @type {String}
+     * @default 'Exit app'
+     * @public
+     */
+    closeButtonAriaLabel: _propTypes["default"].string,
+    /**
+     * Background opacity of the application close button.
+     *
+     * @type {('opaque'|'transparent')}
+     * @default 'transparent'
+     * @public
+     */
+    closeButtonBackgroundOpacity: _propTypes["default"].oneOf(['opaque', 'transparent']),
+    /**
+     * Omits the close button.
+     *
+     * @type {Boolean}
+     * @default false
+     * @public
+     */
+    noCloseButton: _propTypes["default"].bool,
+    /**
+     * Called when the app close button is clicked.
+     *
+     * @type {Function}
+     * @public
+     */
+    onClose: _propTypes["default"].func
+  },
+  styles: {
+    css: _FlexiblePopupPanelsModule["default"],
+    className: 'header'
+  },
+  computed: {
+    backButtonAriaLabel: function backButtonAriaLabel(_ref) {
+      var closeButtonAriaLabel = _ref.closeButtonAriaLabel;
+      return closeButtonAriaLabel == null ? (0, _$L["default"])('Exit app') : closeButtonAriaLabel;
+    },
+    backButtonBackgroundOpacity: function backButtonBackgroundOpacity(_ref2) {
+      var closeButtonBackgroundOpacity = _ref2.closeButtonBackgroundOpacity;
+      return closeButtonBackgroundOpacity;
+    },
+    className: function className(_ref3, _ref4) {
+      var noCloseButton = _ref3.noCloseButton,
+        styler = _ref3.styler;
+      var count = _ref4.count;
+      return styler.append({
+        'showBack': count > 1 && noCloseButton
+      });
+    },
+    noBackButton: function noBackButton(_ref5) {
+      var noCloseButton = _ref5.noCloseButton;
+      return noCloseButton;
+    }
+  },
+  handlers: {
+    onBack: (0, _handle.forwardCustom)('onClose')
+  },
+  render: function render(props) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Header["default"], _objectSpread(_objectSpread({
+      type: "mini"
+    }, props), {}, {
+      noCloseButton: true
+    }));
+  }
+});
+var Header = exports.Header = (0, _util.ContextAsDefaults)({
+  props: ['closeButtonAriaLabel', 'closeButtonBackgroundOpacity', 'noCloseButton', 'onClose']
+}, HeaderBase);
+
+// Relay the defaultSlot property to our version of Header
+Header.defaultSlot = _Header["default"].defaultSlot;
+var _default = exports["default"] = Header;