@getflip/swirl-components 0.2.0 → 0.3.0

package/dist/cjs/flip-dialog.cjs.entry.js

@@ -2,412 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-bd89db61.js');
-const index$1 = require('./index-b9715722.js');
-
-var focusableSelectors = [
-  'a[href]:not([tabindex^="-"])',
-  'area[href]:not([tabindex^="-"])',
-  'input:not([type="hidden"]):not([type="radio"]):not([disabled]):not([tabindex^="-"])',
-  'input[type="radio"]:not([disabled]):not([tabindex^="-"])',
-  'select:not([disabled]):not([tabindex^="-"])',
-  'textarea:not([disabled]):not([tabindex^="-"])',
-  'button:not([disabled]):not([tabindex^="-"])',
-  'iframe:not([tabindex^="-"])',
-  'audio[controls]:not([tabindex^="-"])',
-  'video[controls]:not([tabindex^="-"])',
-  '[contenteditable]:not([tabindex^="-"])',
-  '[tabindex]:not([tabindex^="-"])',
-];
-
-var TAB_KEY = 'Tab';
-var ESCAPE_KEY = 'Escape';
-
-/**
- * Define the constructor to instantiate a dialog
- *
- * @constructor
- * @param {Element} element
- */
-function A11yDialog(element) {
-  // Prebind the functions that will be bound in addEventListener and
-  // removeEventListener to avoid losing references
-  this._show = this.show.bind(this);
-  this._hide = this.hide.bind(this);
-  this._maintainFocus = this._maintainFocus.bind(this);
-  this._bindKeypress = this._bindKeypress.bind(this);
-
-  this.$el = element;
-  this.shown = false;
-  this._id = this.$el.getAttribute('data-a11y-dialog') || this.$el.id;
-  this._previouslyFocused = null;
-  this._listeners = {};
-
-  // Initialise everything needed for the dialog to work properly
-  this.create();
-}
-
-/**
- * Set up everything necessary for the dialog to be functioning
- *
- * @param {(NodeList | Element | string)} targets
- * @return {this}
- */
-A11yDialog.prototype.create = function () {
-  this.$el.setAttribute('aria-hidden', true);
-  this.$el.setAttribute('aria-modal', true);
-  this.$el.setAttribute('tabindex', -1);
-
-  if (!this.$el.hasAttribute('role')) {
-    this.$el.setAttribute('role', 'dialog');
-  }
-
-  // Keep a collection of dialog openers, each of which will be bound a click
-  // event listener to open the dialog
-  this._openers = $$('[data-a11y-dialog-show="' + this._id + '"]');
-  this._openers.forEach(
-    function (opener) {
-      opener.addEventListener('click', this._show);
-    }.bind(this)
-  );
-
-  // Keep a collection of dialog closers, each of which will be bound a click
-  // event listener to close the dialog
-  const $el = this.$el;
-
-  this._closers = $$('[data-a11y-dialog-hide]', this.$el)
-    // This filter is necessary in case there are nested dialogs, so that
-    // only closers from the current dialog are retrieved and effective
-    .filter(function (closer) {
-      // Testing for `[aria-modal="true"]` is not enough since this attribute
-      // and the collect of closers is done at instantation time, when nested
-      // dialogs might not have yet been instantiated. Note that if the dialogs
-      // are manually instantiated, this could still fail because none of these
-      // selectors would match; this would cause closers to close all parent
-      // dialogs instead of just the current one
-      return closer.closest('[aria-modal="true"], [data-a11y-dialog]') === $el
-    })
-    .concat($$('[data-a11y-dialog-hide="' + this._id + '"]'));
-
-  this._closers.forEach(
-    function (closer) {
-      closer.addEventListener('click', this._hide);
-    }.bind(this)
-  );
-
-  // Execute all callbacks registered for the `create` event
-  this._fire('create');
-
-  return this
-};
-
-/**
- * Show the dialog element, disable all the targets (siblings), trap the
- * current focus within it, listen for some specific key presses and fire all
- * registered callbacks for `show` event
- *
- * @param {CustomEvent} event
- * @return {this}
- */
-A11yDialog.prototype.show = function (event) {
-  // If the dialog is already open, abort
-  if (this.shown) {
-    return this
-  }
-
-  // Keep a reference to the currently focused element to be able to restore
-  // it later
-  this._previouslyFocused = document.activeElement;
-  this.$el.removeAttribute('aria-hidden');
-  this.shown = true;
-
-  // Set the focus to the dialog element
-  moveFocusToDialog(this.$el);
-
-  // Bind a focus event listener to the body element to make sure the focus
-  // stays trapped inside the dialog while open, and start listening for some
-  // specific key presses (TAB and ESC)
-  document.body.addEventListener('focus', this._maintainFocus, true);
-  document.addEventListener('keydown', this._bindKeypress);
-
-  // Execute all callbacks registered for the `show` event
-  this._fire('show', event);
-
-  return this
-};
-
-/**
- * Hide the dialog element, enable all the targets (siblings), restore the
- * focus to the previously active element, stop listening for some specific
- * key presses and fire all registered callbacks for `hide` event
- *
- * @param {CustomEvent} event
- * @return {this}
- */
-A11yDialog.prototype.hide = function (event) {
-  // If the dialog is already closed, abort
-  if (!this.shown) {
-    return this
-  }
-
-  this.shown = false;
-  this.$el.setAttribute('aria-hidden', 'true');
-
-  // If there was a focused element before the dialog was opened (and it has a
-  // `focus` method), restore the focus back to it
-  // See: https://github.com/KittyGiraudel/a11y-dialog/issues/108
-  if (this._previouslyFocused && this._previouslyFocused.focus) {
-    this._previouslyFocused.focus();
-  }
-
-  // Remove the focus event listener to the body element and stop listening
-  // for specific key presses
-  document.body.removeEventListener('focus', this._maintainFocus, true);
-  document.removeEventListener('keydown', this._bindKeypress);
-
-  // Execute all callbacks registered for the `hide` event
-  this._fire('hide', event);
-
-  return this
-};
-
-/**
- * Destroy the current instance (after making sure the dialog has been hidden)
- * and remove all associated listeners from dialog openers and closers
- *
- * @return {this}
- */
-A11yDialog.prototype.destroy = function () {
-  // Hide the dialog to avoid destroying an open instance
-  this.hide();
-
-  // Remove the click event listener from all dialog openers
-  this._openers.forEach(
-    function (opener) {
-      opener.removeEventListener('click', this._show);
-    }.bind(this)
-  );
-
-  // Remove the click event listener from all dialog closers
-  this._closers.forEach(
-    function (closer) {
-      closer.removeEventListener('click', this._hide);
-    }.bind(this)
-  );
-
-  // Execute all callbacks registered for the `destroy` event
-  this._fire('destroy');
-
-  // Keep an object of listener types mapped to callback functions
-  this._listeners = {};
-
-  return this
-};
-
-/**
- * Register a new callback for the given event type
- *
- * @param {string} type
- * @param {Function} handler
- */
-A11yDialog.prototype.on = function (type, handler) {
-  if (typeof this._listeners[type] === 'undefined') {
-    this._listeners[type] = [];
-  }
-
-  this._listeners[type].push(handler);
-
-  return this
-};
-
-/**
- * Unregister an existing callback for the given event type
- *
- * @param {string} type
- * @param {Function} handler
- */
-A11yDialog.prototype.off = function (type, handler) {
-  var index = (this._listeners[type] || []).indexOf(handler);
-
-  if (index > -1) {
-    this._listeners[type].splice(index, 1);
-  }
-
-  return this
-};
-
-/**
- * Iterate over all registered handlers for given type and call them all with
- * the dialog element as first argument, event as second argument (if any). Also
- * dispatch a custom event on the DOM element itself to make it possible to
- * react to the lifecycle of auto-instantiated dialogs.
- *
- * @access private
- * @param {string} type
- * @param {CustomEvent} event
- */
-A11yDialog.prototype._fire = function (type, event) {
-  var listeners = this._listeners[type] || [];
-  var domEvent = new CustomEvent(type, { detail: event });
-
-  this.$el.dispatchEvent(domEvent);
-
-  listeners.forEach(
-    function (listener) {
-      listener(this.$el, event);
-    }.bind(this)
-  );
-};
-
-/**
- * Private event handler used when listening to some specific key presses
- * (namely ESCAPE and TAB)
- *
- * @access private
- * @param {Event} event
- */
-A11yDialog.prototype._bindKeypress = function (event) {
-  // This is an escape hatch in case there are nested dialogs, so the keypresses
-  // are only reacted to for the most recent one
-  const focused = document.activeElement;
-  if (focused && focused.closest('[aria-modal="true"]') !== this.$el) return
-
-  // If the dialog is shown and the ESCAPE key is being pressed, prevent any
-  // further effects from the ESCAPE key and hide the dialog, unless its role
-  // is 'alertdialog', which should be modal
-  if (
-    this.shown &&
-    event.key === ESCAPE_KEY &&
-    this.$el.getAttribute('role') !== 'alertdialog'
-  ) {
-    event.preventDefault();
-    this.hide(event);
-  }
-
-  // If the dialog is shown and the TAB key is being pressed, make sure the
-  // focus stays trapped within the dialog element
-  if (this.shown && event.key === TAB_KEY) {
-    trapTabKey(this.$el, event);
-  }
-};
-
-/**
- * Private event handler used when making sure the focus stays within the
- * currently open dialog
- *
- * @access private
- * @param {Event} event
- */
-A11yDialog.prototype._maintainFocus = function (event) {
-  // If the dialog is shown and the focus is not within a dialog element (either
-  // this one or another one in case of nested dialogs) or within an element
-  // with the `data-a11y-dialog-focus-trap-ignore` attribute, move it back to
-  // its first focusable child.
-  // See: https://github.com/KittyGiraudel/a11y-dialog/issues/177
-  if (
-    this.shown &&
-    !event.target.closest('[aria-modal="true"]') &&
-    !event.target.closest('[data-a11y-dialog-ignore-focus-trap]')
-  ) {
-    moveFocusToDialog(this.$el);
-  }
-};
-
-/**
- * Convert a NodeList into an array
- *
- * @param {NodeList} collection
- * @return {Array<Element>}
- */
-function toArray(collection) {
-  return Array.prototype.slice.call(collection)
-}
-
-/**
- * Query the DOM for nodes matching the given selector, scoped to context (or
- * the whole document)
- *
- * @param {String} selector
- * @param {Element} [context = document]
- * @return {Array<Element>}
- */
-function $$(selector, context) {
-  return toArray((context || document).querySelectorAll(selector))
-}
-
-/**
- * Set the focus to the first element with `autofocus` with the element or the
- * element itself
- *
- * @param {Element} node
- */
-function moveFocusToDialog(node) {
-  var focused = node.querySelector('[autofocus]') || node;
-
-  focused.focus();
-}
-
-/**
- * Get the focusable children of the given element
- *
- * @param {Element} node
- * @return {Array<Element>}
- */
-function getFocusableChildren(node) {
-  return $$(focusableSelectors.join(','), node).filter(function (child) {
-    return !!(
-      child.offsetWidth ||
-      child.offsetHeight ||
-      child.getClientRects().length
-    )
-  })
-}
-
-/**
- * Trap the focus inside the given element
- *
- * @param {Element} node
- * @param {Event} event
- */
-function trapTabKey(node, event) {
-  var focusableChildren = getFocusableChildren(node);
-  var focusedItemIndex = focusableChildren.indexOf(document.activeElement);
-
-  // If the SHIFT key is being pressed while tabbing (moving backwards) and
-  // the currently focused item is the first one, move the focus to the last
-  // focusable item from the dialog element
-  if (event.shiftKey && focusedItemIndex === 0) {
-    focusableChildren[focusableChildren.length - 1].focus();
-    event.preventDefault();
-    // If the SHIFT key is not being pressed (moving forwards) and the currently
-    // focused item is the last one, move the focus to the first focusable item
-    // from the dialog element
-  } else if (
-    !event.shiftKey &&
-    focusedItemIndex === focusableChildren.length - 1
-  ) {
-    focusableChildren[0].focus();
-    event.preventDefault();
-  }
-}
-
-function instantiateDialogs() {
-  $$('[data-a11y-dialog]').forEach(function (node) {
-    new A11yDialog(node);
-  });
-}
-
-if (typeof document !== 'undefined') {
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', instantiateDialogs);
-  } else {
-    if (window.requestAnimationFrame) {
-      window.requestAnimationFrame(instantiateDialogs);
-    } else {
-      window.setTimeout(instantiateDialogs, 16);
-    }
-  }
-}
+const index = require('./index-72831c5f.js');
+const a11yDialog_esm = require('./a11y-dialog.esm-4a3287ed.js');
+const index$1 = require('./index-b8470262.js');
+require('./_commonjsHelpers-a5111d61.js');
 
 const flipDialogCss = ":host{--flip-ghost-button-background-default:var(--s-surface-overlay-default);--flip-ghost-button-background-hovered:var(--s-surface-overlay-hovered);--flip-ghost-button-background-pressed:var(--s-surface-overlay-pressed);display:block}:host *{box-sizing:border-box}.dialog{position:fixed;z-index:var(--s-z-40);display:flex;justify-content:center;align-items:center;inset:0}.dialog[aria-hidden=\"true\"]{display:none}.dialog:not(.dialog--closing) .dialog__backdrop{-webkit-animation:0.15s dialog-backdrop-fade-in;animation:0.15s dialog-backdrop-fade-in}@media (prefers-reduced-motion){.dialog:not(.dialog--closing) .dialog__backdrop{-webkit-animation:none;animation:none}}.dialog:not(.dialog--closing) .dialog__body{-webkit-animation:0.15s dialog-scale-in;animation:0.15s dialog-scale-in}@media (prefers-reduced-motion){.dialog:not(.dialog--closing) .dialog__body{-webkit-animation:none;animation:none}}.dialog--closing{-webkit-animation:0.15s dialog-fade-out;animation:0.15s dialog-fade-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@media (prefers-reduced-motion){.dialog--closing{-webkit-animation:none;animation:none}}.dialog__backdrop{position:fixed;background-color:rgba(0, 0, 0, 0.2);inset:0}.dialog__body{z-index:var(--s-z-40);overflow-x:hidden;overflow-y:auto;width:18.5rem;max-height:90vh;padding-top:var(--s-space-24);padding-right:var(--s-space-8);padding-bottom:var(--s-space-8);padding-left:var(--s-space-8);border-radius:var(--s-border-radius-xl);background-color:var(--s-surface-overlay-default);text-align:center;box-shadow:0.125rem 0.25rem 1rem rgba(0, 0, 0, 0.14)}.dialog__heading{margin:0;margin-bottom:var(--s-space-8);font-size:var(--s-font-size-lg);font-weight:var(--s-font-weight-semibold);line-height:var(--s-line-height-lg)}.dialog__content{margin-bottom:var(--s-space-24);line-height:var(--s-line-height-base)}.dialog__content ::slotted(*){margin:0}@-webkit-keyframes dialog-scale-in{from{transform:scale(0)}to{transform:scale(1)}}@keyframes dialog-scale-in{from{transform:scale(0)}to{transform:scale(1)}}@-webkit-keyframes dialog-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes dialog-backdrop-fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes dialog-fade-out{from{opacity:1}to{opacity:0}}@keyframes dialog-fade-out{from{opacity:1}to{opacity:0}}";
 
@@ -436,7 +34,7 @@ const FlipDialog = class {
     };
   }
   componentDidLoad() {
-    this.dialog = new A11yDialog(this.dialogEl);
+    this.dialog = new a11yDialog_esm.A11yDialog(this.dialogEl);
     this.dialog.on("show", () => {
       var _a;
       (_a = this.controlsContainerEl
@@ -474,3 +72,5 @@ const FlipDialog = class {
 FlipDialog.style = flipDialogCss;
 
 exports.flip_dialog = FlipDialog;
+
+//# sourceMappingURL=flip-dialog.cjs.entry.js.map

package/dist/cjs/flip-dialog.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"flip-dialog.entry.cjs.js","mappings":"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","names":["A11yDialog","classnames","h","Host"],"sources":["./src/components/flip-dialog/flip-dialog.css?tag=flip-dialog&encapsulation=shadow","./src/components/flip-dialog/flip-dialog.tsx"],"sourcesContent":[":host {\n  --flip-ghost-button-background-default: var(--s-surface-overlay-default);\n  --flip-ghost-button-background-hovered: var(--s-surface-overlay-hovered);\n  --flip-ghost-button-background-pressed: var(--s-surface-overlay-pressed);\n\n  display: block;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n.dialog {\n  position: fixed;\n  z-index: var(--s-z-40);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  inset: 0;\n\n  &[aria-hidden=\"true\"] {\n    display: none;\n  }\n}\n\n.dialog:not(.dialog--closing) {\n  & .dialog__backdrop {\n    animation: 0.15s dialog-backdrop-fade-in;\n\n    @media (prefers-reduced-motion) {\n      animation: none;\n    }\n  }\n\n  & .dialog__body {\n    animation: 0.15s dialog-scale-in;\n\n    @media (prefers-reduced-motion) {\n      animation: none;\n    }\n  }\n}\n\n.dialog--closing {\n  animation: 0.15s dialog-fade-out;\n  animation-fill-mode: forwards;\n\n  @media (prefers-reduced-motion) {\n    animation: none;\n  }\n}\n\n.dialog__backdrop {\n  position: fixed;\n  background-color: rgba(0, 0, 0, 0.2);\n  inset: 0;\n}\n\n.dialog__body {\n  z-index: var(--s-z-40);\n  overflow-x: hidden;\n  overflow-y: auto;\n  width: 18.5rem;\n  max-height: 90vh;\n  padding-top: var(--s-space-24);\n  padding-right: var(--s-space-8);\n  padding-bottom: var(--s-space-8);\n  padding-left: var(--s-space-8);\n  border-radius: var(--s-border-radius-xl);\n  background-color: var(--s-surface-overlay-default);\n  text-align: center;\n  box-shadow: 0.125rem 0.25rem 1rem rgba(0, 0, 0, 0.14);\n}\n\n.dialog__heading {\n  margin: 0;\n  margin-bottom: var(--s-space-8);\n  font-size: var(--s-font-size-lg);\n  font-weight: var(--s-font-weight-semibold);\n  line-height: var(--s-line-height-lg);\n}\n\n.dialog__content {\n  margin-bottom: var(--s-space-24);\n  line-height: var(--s-line-height-base);\n\n  & ::slotted(*) {\n    margin: 0;\n  }\n}\n\n@keyframes dialog-scale-in {\n  from {\n    transform: scale(0);\n  }\n  to {\n    transform: scale(1);\n  }\n}\n\n@keyframes dialog-backdrop-fade-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes dialog-fade-out {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n","import {\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from \"@stencil/core\";\nimport A11yDialog from \"a11y-dialog\";\nimport classnames from \"classnames\";\n\nexport type FlipDialogIntent = \"primary\" | \"critical\";\n\n/**\n * @slot slot - The dialog content\n */\n@Component({\n  shadow: true,\n  styleUrl: \"flip-dialog.css\",\n  tag: \"flip-dialog\",\n})\nexport class FlipDialog {\n  @Prop() hideLabel?: boolean;\n  @Prop() intent?: FlipDialogIntent = \"primary\";\n  @Prop() label!: string;\n  @Prop() primaryActionLabel?: string;\n  @Prop() secondaryActionLabel?: string;\n\n  @Event() primaryAction: EventEmitter<MouseEvent>;\n  @Event() secondaryAction: EventEmitter<MouseEvent>;\n\n  @State() closing = false;\n\n  private controlsContainerEl: HTMLElement;\n  private dialog: A11yDialog;\n  private dialogEl: HTMLDivElement;\n\n  componentDidLoad() {\n    this.dialog = new A11yDialog(this.dialogEl);\n\n    this.dialog.on(\"show\", () => {\n      this.controlsContainerEl\n        .querySelector<HTMLButtonElement>(\"flip-button button\")\n        ?.focus();\n    });\n  }\n\n  disconnectedCallback() {\n    this.dialog?.destroy();\n  }\n\n  /**\n   * Open the dialog.\n   */\n  @Method()\n  async open() {\n    this.dialog.show();\n  }\n\n  /**\n   * Close the dialog.\n   */\n  @Method()\n  async close() {\n    if (this.closing) {\n      return;\n    }\n\n    this.closing = true;\n\n    setTimeout(() => {\n      this.dialog.hide();\n      this.closing = false;\n    }, 150);\n  }\n\n  onKeyDown = (event: KeyboardEvent) => {\n    if (event.code === \"Escape\") {\n      this.close();\n    }\n  };\n\n  private onBackdropClick = () => {\n    this.close();\n  };\n\n  private onPrimaryAction = (event: MouseEvent) => {\n    this.primaryAction.emit(event);\n    this.close();\n  };\n\n  private onSecondaryAction = (event: MouseEvent) => {\n    this.secondaryAction.emit(event);\n    this.close();\n  };\n\n  render() {\n    const className = classnames(\"dialog\", { \"dialog--closing\": this.closing });\n\n    return (\n      <Host>\n        <div\n          aria-describedby=\"content\"\n          aria-hidden=\"true\"\n          aria-labelledby={this.hideLabel ? undefined : \"label\"}\n          aria-label={this.hideLabel ? this.label : undefined}\n          aria-modal=\"true\"\n          class={className}\n          onKeyDown={this.onKeyDown}\n          ref={(el) => (this.dialogEl = el)}\n          role=\"alertdialog\"\n        >\n          <div class=\"dialog__backdrop\" onClick={this.onBackdropClick}></div>\n          <div class=\"dialog__body\" role=\"document\">\n            {!this.hideLabel && (\n              <h2 class=\"dialog__heading\" id=\"label\">\n                {this.label}\n              </h2>\n            )}\n            <div class=\"dialog__content\" id=\"content\">\n              <slot></slot>\n            </div>\n            <flip-button-group\n              class=\"dialog__controls\"\n              ref={(el) => (this.controlsContainerEl = el)}\n              stretch\n              wrap\n            >\n              {this.secondaryActionLabel && (\n                <flip-button\n                  label={this.secondaryActionLabel}\n                  onClick={this.onSecondaryAction}\n                ></flip-button>\n              )}\n              {this.primaryActionLabel && (\n                <flip-button\n                  intent={this.intent}\n                  label={this.primaryActionLabel}\n                  onClick={this.onPrimaryAction}\n                  variant={this.intent === \"critical\" ? \"ghost\" : \"flat\"}\n                ></flip-button>\n              )}\n            </flip-button-group>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/flip-empty-state.cjs.entry.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-72831c5f.js');
+
+const flipEmptyStateCss = ":host{display:block}:host *{box-sizing:border-box}.empty-state{display:flex;max-width:28rem;align-items:center;flex-direction:column;gap:var(--s-space-16)}.empty-state__illustration{max-width:16rem}.empty-state__body{display:flex;align-items:center;flex-direction:column;gap:var(--s-space-8)}";
+
+const FlipEmptyState = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: "empty-state" }, this.illustration && (index.h("img", { alt: "", class: "empty-state__illustration", src: this.illustration })), index.h("div", { class: "empty-state__body" }, this.heading && (index.h("flip-heading", { align: "center", as: "p", text: this.heading })), index.h("div", { class: "empty-state__content" }, index.h("flip-text", { align: "center", color: "subdued" }, index.h("slot", null)))))));
+  }
+};
+FlipEmptyState.style = flipEmptyStateCss;
+
+exports.flip_empty_state = FlipEmptyState;
+
+//# sourceMappingURL=flip-empty-state.cjs.entry.js.map

package/dist/cjs/flip-empty-state.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"flip-empty-state.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,sSAAsS;;MCOnT,cAAc;;;;EAIzB,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,iBAAK,KAAK,EAAC,aAAa,IACrB,IAAI,CAAC,YAAY,KAChBA,iBACE,GAAG,EAAC,EAAE,EACN,KAAK,EAAC,2BAA2B,EACjC,GAAG,EAAE,IAAI,CAAC,YAAY,GACtB,CACH,EAEDA,iBAAK,KAAK,EAAC,mBAAmB,IAC3B,IAAI,CAAC,OAAO,KACXA,0BACE,KAAK,EAAC,QAAQ,EACd,EAAE,EAAC,GAAG,EACN,IAAI,EAAE,IAAI,CAAC,OAAO,GACJ,CACjB,EAEDA,iBAAK,KAAK,EAAC,sBAAsB,IAC/BA,uBAAW,KAAK,EAAC,QAAQ,EAAC,KAAK,EAAC,SAAS,IACvCA,qBAAa,CACH,CACR,CACF,CACF,CACD,EACP;GACH;;;;;;","names":["h","Host"],"sources":["./src/components/flip-empty-state/flip-empty-state.css?tag=flip-empty-state&encapsulation=shadow","./src/components/flip-empty-state/flip-empty-state.tsx"],"sourcesContent":[":host {\n  display: block;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n.empty-state {\n  display: flex;\n  max-width: 28rem;\n  align-items: center;\n  flex-direction: column;\n  gap: var(--s-space-16);\n}\n\n.empty-state__illustration {\n  max-width: 16rem;\n}\n\n.empty-state__body {\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  gap: var(--s-space-8);\n}\n","import { Component, h, Host, Prop } from \"@stencil/core\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-empty-state.css\",\n  tag: \"flip-empty-state\",\n})\nexport class FlipEmptyState {\n  @Prop() heading?: string;\n  @Prop() illustration?: string;\n\n  render() {\n    return (\n      <Host>\n        <div class=\"empty-state\">\n          {this.illustration && (\n            <img\n              alt=\"\"\n              class=\"empty-state__illustration\"\n              src={this.illustration}\n            />\n          )}\n\n          <div class=\"empty-state__body\">\n            {this.heading && (\n              <flip-heading\n                align=\"center\"\n                as=\"p\"\n                text={this.heading}\n              ></flip-heading>\n            )}\n\n            <div class=\"empty-state__content\">\n              <flip-text align=\"center\" color=\"subdued\">\n                <slot></slot>\n              </flip-text>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/flip-file-uploader.cjs.entry.js

@@ -2,8 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-bd89db61.js');
-const index$1 = require('./index-b9715722.js');
+const index = require('./index-72831c5f.js');
+const index$1 = require('./index-b8470262.js');
+require('./_commonjsHelpers-a5111d61.js');
 
 const flipFileUploaderCss = ".sc-flip-file-uploader-h{display:block;width:100%}.sc-flip-file-uploader-h *.sc-flip-file-uploader{box-sizing:border-box}.file-uploader.sc-flip-file-uploader{width:100%}.file-uploader--show-dropzone.sc-flip-file-uploader .file-uploader__dropzone.sc-flip-file-uploader{position:relative;display:flex;width:100%;height:10rem;margin-top:var(--s-space-16);justify-content:center;align-items:center;border:var(--s-border-width-default) dashed var(--s-border-strong);border-radius:var(--s-border-radius-s);flex-direction:column}.file-uploader--show-dropzone.sc-flip-file-uploader .file-uploader__dropzone.sc-flip-file-uploader:focus-within{border-color:var(--s-focus-default);border-width:0.125rem}.file-uploader--show-dropzone.sc-flip-file-uploader .file-uploader__input.sc-flip-file-uploader{position:absolute;display:block;cursor:pointer;opacity:0;inset:0}.file-uploader--disabled.sc-flip-file-uploader .file-uploader__input.sc-flip-file-uploader{cursor:default}.file-uploader--disabled.sc-flip-file-uploader .file-uploader__dropzone-cta.sc-flip-file-uploader,.file-uploader--disabled.sc-flip-file-uploader .file-uploader__drag-drop-label.sc-flip-file-uploader{color:var(--s-text-disabled)}.file-uploader--disabled.sc-flip-file-uploader .file-uploader__dropzone-icon.sc-flip-file-uploader{color:var(--s-text-disabled)}.file-uploader__label.sc-flip-file-uploader{display:block;font-weight:var(--s-font-weight-semibold);line-height:var(--s-line-height-base)}.file-uploader__description.sc-flip-file-uploader{display:block;margin-top:var(--s-space-4);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}.file-uploader__dropzone-icon.sc-flip-file-uploader{color:var(--s-icon-highlight)}.file-uploader__dropzone-label.sc-flip-file-uploader{margin-top:var(--s-space-16);line-height:var(--s-line-height-base)}.file-uploader__dropzone-cta.sc-flip-file-uploader{color:var(--s-interactive-primary-default);font-weight:var(--s-font-weight-medium)}.file-uploader__upload-button.sc-flip-file-uploader{margin-top:var(--s-space-16)}.file-uploader__input.sc-flip-file-uploader{display:none}";
 
@@ -47,3 +48,5 @@ const FlipFileUploader = class {
 FlipFileUploader.style = flipFileUploaderCss;
 
 exports.flip_file_uploader = FlipFileUploader;
+
+//# sourceMappingURL=flip-file-uploader.cjs.entry.js.map

package/dist/cjs/flip-file-uploader.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"flip-file-uploader.entry.cjs.js","mappings":"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","names":["classnames","h","Host"],"sources":["./src/components/flip-file-uploader/flip-file-uploader.css?tag=flip-file-uploader&encapsulation=scoped","./src/components/flip-file-uploader/flip-file-uploader.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n.file-uploader {\n  width: 100%;\n}\n\n.file-uploader--show-dropzone {\n  & .file-uploader__dropzone {\n    position: relative;\n    display: flex;\n    width: 100%;\n    height: 10rem;\n    margin-top: var(--s-space-16);\n    justify-content: center;\n    align-items: center;\n    border: var(--s-border-width-default) dashed var(--s-border-strong);\n    border-radius: var(--s-border-radius-s);\n    flex-direction: column;\n\n    &:focus-within {\n      border-color: var(--s-focus-default);\n      border-width: 0.125rem;\n    }\n  }\n\n  & .file-uploader__input {\n    position: absolute;\n    display: block;\n    cursor: pointer;\n    opacity: 0;\n    inset: 0;\n  }\n}\n\n.file-uploader--disabled {\n  & .file-uploader__input {\n    cursor: default;\n  }\n\n  & .file-uploader__dropzone-cta,\n  & .file-uploader__drag-drop-label {\n    color: var(--s-text-disabled);\n  }\n\n  & .file-uploader__dropzone-icon {\n    color: var(--s-text-disabled);\n  }\n}\n\n.file-uploader__label {\n  display: block;\n  font-weight: var(--s-font-weight-semibold);\n  line-height: var(--s-line-height-base);\n}\n\n.file-uploader__description {\n  display: block;\n  margin-top: var(--s-space-4);\n  font-size: var(--s-font-size-sm);\n  line-height: var(--s-line-height-sm);\n}\n\n.file-uploader__dropzone-icon {\n  color: var(--s-icon-highlight);\n}\n\n.file-uploader__dropzone-label {\n  margin-top: var(--s-space-16);\n  line-height: var(--s-line-height-base);\n}\n\n.file-uploader__dropzone-cta {\n  color: var(--s-interactive-primary-default);\n  font-weight: var(--s-font-weight-medium);\n}\n\n.file-uploader__upload-button {\n  margin-top: var(--s-space-16);\n}\n\n.file-uploader__input {\n  display: none;\n}\n","import {\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n} from \"@stencil/core\";\nimport classnames from \"classnames\";\nimport { FlipFormInput } from \"../../utils\";\n\n@Component({\n  /**\n   * Form controls in shadow dom can still not be associated with labels in the\n   * light dom, cross browser. So for now we disable shadow dom for form\n   * controls (inputs, buttons, selects, etc.). Instead we use Stencil's scoping.\n   * https://caniuse.com/?search=attachInternals\n   */\n  scoped: true,\n  shadow: false,\n  styleUrl: \"flip-file-uploader.css\",\n  tag: \"flip-file-uploader\",\n})\nexport class FlipFileUploader implements FlipFormInput<FileList> {\n  @Prop() accept?: string;\n  @Prop() ctaLabel?: string = \"Click to upload\";\n  @Prop() description?: string;\n  @Prop() disabled?: boolean;\n  @Prop() dragDropLabel?: string = \"or drag and drop.\";\n  @Prop() inputId!: string;\n  @Prop() inputName!: string;\n  @Prop() label!: string;\n  @Prop() multiple?: boolean;\n  @Prop() showDropzone?: boolean = true;\n  @Prop() uploadButtonLabel?: string = \"Select file\";\n\n  @Event() valueChange: EventEmitter<FileList>;\n\n  private inputEl: HTMLInputElement;\n\n  /**\n   * Reset the file input.\n   */\n  @Method()\n  public async reset() {\n    this.inputEl.value = \"\";\n  }\n\n  private onChange = (event: Event) => {\n    const fileList = (event.target as HTMLInputElement).files;\n\n    this.valueChange.emit(fileList);\n  };\n\n  private onUploadButtonClick = () => {\n    this.inputEl.click();\n  };\n\n  render() {\n    const ariaDescribedby = Boolean(this.description)\n      ? `${this.inputId}-description ${this.inputId}-additional-label`\n      : `${this.inputId}-additional-label`;\n\n    const tabIndex = this.showDropzone ? 0 : -1;\n\n    const className = classnames(\"file-uploader\", {\n      \"file-uploader--disabled\": this.disabled,\n      \"file-uploader--show-dropzone\": this.showDropzone,\n    });\n\n    return (\n      <Host>\n        <div class={className}>\n          <label\n            class=\"file-uploader__label\"\n            htmlFor={this.inputId}\n            id={`${this.inputEl}-label`}\n          >\n            {this.label}\n          </label>\n\n          {this.description && (\n            <span\n              class=\"file-uploader__description\"\n              id={`${this.inputId}-description`}\n            >\n              {this.description}\n            </span>\n          )}\n\n          <div class=\"file-uploader__dropzone\">\n            {this.showDropzone ? (\n              [\n                <flip-icon-cloud-upload class=\"file-uploader__dropzone-icon\"></flip-icon-cloud-upload>,\n                <div\n                  class=\"file-uploader__dropzone-label\"\n                  id={`${this.inputId}-additional-label`}\n                >\n                  <span class=\"file-uploader__dropzone-cta\">\n                    {this.ctaLabel}\n                  </span>{\" \"}\n                  <span class=\"file-uploader__drag-drop-label\">\n                    {this.dragDropLabel}\n                  </span>\n                </div>,\n              ]\n            ) : (\n              <flip-button\n                class=\"file-uploader__upload-button\"\n                disabled={this.disabled}\n                flipAriaDescribedby={ariaDescribedby}\n                intent=\"primary\"\n                label={this.uploadButtonLabel}\n                onClick={this.onUploadButtonClick}\n                variant=\"flat\"\n              ></flip-button>\n            )}\n\n            <input\n              accept={this.accept}\n              aria-describedby={ariaDescribedby}\n              aria-disabled={this.disabled}\n              autoComplete=\"off\"\n              class=\"file-uploader__input\"\n              disabled={this.disabled}\n              id={this.inputId}\n              multiple={this.multiple}\n              name={this.inputName}\n              onChange={this.onChange}\n              ref={(el) => (this.inputEl = el)}\n              tabIndex={tabIndex}\n              type=\"file\"\n            />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}