@getflip/swirl-components 0.1.0

package/dist/components/flip-dialog.js

@@ -0,0 +1,518 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { d as defineCustomElement$4 } from './flip-button2.js';
+import { d as defineCustomElement$3 } from './flip-button-group2.js';
+import { d as defineCustomElement$2 } from './flip-stack2.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 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}}";
+
+const FlipDialog$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.primaryAction = createEvent(this, "primaryAction", 7);
+    this.secondaryAction = createEvent(this, "secondaryAction", 7);
+    this.intent = "primary";
+    this.closing = false;
+    this.onKeyDown = (event) => {
+      if (event.code === "Escape") {
+        this.close();
+      }
+    };
+    this.onBackdropClick = () => {
+      this.close();
+    };
+    this.onPrimaryAction = (event) => {
+      this.primaryAction.emit(event);
+      this.close();
+    };
+    this.onSecondaryAction = (event) => {
+      this.secondaryAction.emit(event);
+      this.close();
+    };
+  }
+  componentDidLoad() {
+    this.dialog = new A11yDialog(this.dialogEl);
+    this.dialog.on("show", () => {
+      var _a;
+      (_a = this.controlsContainerEl
+        .querySelector("flip-button button")) === null || _a === void 0 ? void 0 : _a.focus();
+    });
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.destroy();
+  }
+  /**
+   * Open the dialog.
+   */
+  async open() {
+    this.dialog.show();
+  }
+  /**
+   * Close the dialog.
+   */
+  async close() {
+    if (this.closing) {
+      return;
+    }
+    this.closing = true;
+    setTimeout(() => {
+      this.dialog.hide();
+      this.closing = false;
+    }, 150);
+  }
+  render() {
+    const className = classnames("dialog", { "dialog--closing": this.closing });
+    return (h(Host, null, h("div", { "aria-describedby": "content", "aria-hidden": "true", "aria-labelledby": this.hideLabel ? undefined : "label", "aria-label": this.hideLabel ? this.label : undefined, "aria-modal": "true", class: className, onKeyDown: this.onKeyDown, ref: (el) => (this.dialogEl = el), role: "alertdialog" }, h("div", { class: "dialog__backdrop", onClick: this.onBackdropClick }), h("div", { class: "dialog__body", role: "document" }, !this.hideLabel && (h("h2", { class: "dialog__heading", id: "label" }, this.label)), h("div", { class: "dialog__content", id: "content" }, h("slot", null)), h("flip-button-group", { class: "dialog__controls", ref: (el) => (this.controlsContainerEl = el), stretch: true, wrap: true }, this.secondaryActionLabel && (h("flip-button", { label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("flip-button", { intent: this.intent, label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: this.intent === "critical" ? "ghost" : "flat" })))))));
+  }
+  static get style() { return flipDialogCss; }
+}, [1, "flip-dialog", {
+    "hideLabel": [4, "hide-label"],
+    "intent": [1],
+    "label": [1],
+    "primaryActionLabel": [1, "primary-action-label"],
+    "secondaryActionLabel": [1, "secondary-action-label"],
+    "closing": [32],
+    "open": [64],
+    "close": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["flip-dialog", "flip-button", "flip-button-group", "flip-stack"];
+  components.forEach(tagName => { switch (tagName) {
+    case "flip-dialog":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FlipDialog$1);
+      }
+      break;
+    case "flip-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "flip-button-group":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "flip-stack":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const FlipDialog = FlipDialog$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { FlipDialog, defineCustomElement };

package/dist/components/flip-icon-add-photo.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface FlipIconAddPhoto extends Components.FlipIconAddPhoto, HTMLElement {}
+export const FlipIconAddPhoto: {
+  prototype: FlipIconAddPhoto;
+  new (): FlipIconAddPhoto;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/flip-icon-add-photo.js

@@ -0,0 +1,37 @@
+import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
+
+const flipIconCss = ":host{display:inline-flex}";
+
+const FlipIconAddPhoto$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.size = 24;
+  }
+  render() {
+    return (h("svg", { class: "flip-icon", fill: "none", height: this.size, part: "icon", viewBox: `0 0 ${this.size} ${this.size}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, null, h("path", { d: "M1.99999 14.6666C1.63332 14.6666 1.31955 14.5362 1.05866 14.2753C0.797323 14.014 0.666656 13.7 0.666656 13.3333V5.33331C0.666656 4.96665 0.797323 4.65287 1.05866 4.39198C1.31955 4.13065 1.63332 3.99998 1.99999 3.99998H4.09999L4.93332 3.09998C5.05555 2.96665 5.20266 2.86109 5.37466 2.78331C5.5471 2.70554 5.72777 2.66665 5.91666 2.66665H8.66666C8.85555 2.66665 9.01399 2.73042 9.14199 2.85798C9.26955 2.98598 9.33332 3.14442 9.33332 3.33331V4.66665C9.33332 4.85553 9.39732 5.01398 9.52532 5.14198C9.65288 5.26953 9.8111 5.33331 9.99999 5.33331H11.3333V6.66665C11.3333 6.85553 11.3973 7.01376 11.5253 7.14131C11.6529 7.26931 11.8111 7.33331 12 7.33331H13.3333C13.5222 7.33331 13.6804 7.39709 13.808 7.52465C13.936 7.65265 14 7.81109 14 7.99998V13.3333C14 13.7 13.8695 14.014 13.6087 14.2753C13.3473 14.5362 13.0333 14.6666 12.6667 14.6666H1.99999ZM7.33332 12.3333C8.16666 12.3333 8.8751 12.0418 9.45866 11.4586C10.0418 10.8751 10.3333 10.1666 10.3333 9.33331C10.3333 8.49998 10.0418 7.79153 9.45866 7.20798C8.8751 6.62487 8.16666 6.33331 7.33332 6.33331C6.49999 6.33331 5.79155 6.62487 5.20799 7.20798C4.62488 7.79153 4.33332 8.49998 4.33332 9.33331C4.33332 10.1666 4.62488 10.8751 5.20799 11.4586C5.79155 12.0418 6.49999 12.3333 7.33332 12.3333ZM12.6667 3.99998H12C11.8111 3.99998 11.6529 3.9362 11.5253 3.80865C11.3973 3.68065 11.3333 3.5222 11.3333 3.33331C11.3333 3.14442 11.3973 2.98598 11.5253 2.85798C11.6529 2.73042 11.8111 2.66665 12 2.66665H12.6667V1.99998C12.6667 1.81109 12.7307 1.65265 12.8587 1.52465C12.9862 1.39709 13.1444 1.33331 13.3333 1.33331C13.5222 1.33331 13.6804 1.39709 13.808 1.52465C13.936 1.65265 14 1.81109 14 1.99998V2.66665H14.6667C14.8555 2.66665 15.0138 2.73042 15.1413 2.85798C15.2693 2.98598 15.3333 3.14442 15.3333 3.33331C15.3333 3.5222 15.2693 3.68065 15.1413 3.80865C15.0138 3.9362 14.8555 3.99998 14.6667 3.99998H14V4.66665C14 4.85553 13.936 5.01398 13.808 5.14198C13.6804 5.26953 13.5222 5.33331 13.3333 5.33331C13.1444 5.33331 12.9862 5.26953 12.8587 5.14198C12.7307 5.01398 12.6667 4.85553 12.6667 4.66665V3.99998Z", fill: "currentColor" }))), this.size === 24 && (h(Fragment, null, h("path", { d: "M3 22C2.45 22 1.97933 21.8043 1.588 21.413C1.196 21.021 1 20.55 1 20V8C1 7.45 1.196 6.97933 1.588 6.588C1.97933 6.196 2.45 6 3 6H6.15L7.4 4.65C7.58333 4.45 7.804 4.29167 8.062 4.175C8.32067 4.05833 8.59167 4 8.875 4H13C13.2833 4 13.521 4.09567 13.713 4.287C13.9043 4.479 14 4.71667 14 5V7C14 7.28333 14.096 7.521 14.288 7.713C14.4793 7.90433 14.7167 8 15 8H17V10C17 10.2833 17.096 10.5207 17.288 10.712C17.4793 10.904 17.7167 11 18 11H20C20.2833 11 20.5207 11.0957 20.712 11.287C20.904 11.479 21 11.7167 21 12V20C21 20.55 20.8043 21.021 20.413 21.413C20.021 21.8043 19.55 22 19 22H3ZM11 18.5C12.25 18.5 13.3127 18.0627 14.188 17.188C15.0627 16.3127 15.5 15.25 15.5 14C15.5 12.75 15.0627 11.6873 14.188 10.812C13.3127 9.93733 12.25 9.5 11 9.5C9.75 9.5 8.68733 9.93733 7.812 10.812C6.93733 11.6873 6.5 12.75 6.5 14C6.5 15.25 6.93733 16.3127 7.812 17.188C8.68733 18.0627 9.75 18.5 11 18.5ZM19 6H18C17.7167 6 17.4793 5.90433 17.288 5.713C17.096 5.521 17 5.28333 17 5C17 4.71667 17.096 4.479 17.288 4.287C17.4793 4.09567 17.7167 4 18 4H19V3C19 2.71667 19.096 2.479 19.288 2.287C19.4793 2.09567 19.7167 2 20 2C20.2833 2 20.5207 2.09567 20.712 2.287C20.904 2.479 21 2.71667 21 3V4H22C22.2833 4 22.5207 4.09567 22.712 4.287C22.904 4.479 23 4.71667 23 5C23 5.28333 22.904 5.521 22.712 5.713C22.5207 5.90433 22.2833 6 22 6H21V7C21 7.28333 20.904 7.521 20.712 7.713C20.5207 7.90433 20.2833 8 20 8C19.7167 8 19.4793 7.90433 19.288 7.713C19.096 7.521 19 7.28333 19 7V6Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M3.49999 25.6666C2.85832 25.6666 2.30921 25.4384 1.85266 24.9818C1.39532 24.5245 1.16666 23.975 1.16666 23.3333V9.33331C1.16666 8.69165 1.39532 8.14254 1.85266 7.68598C2.30921 7.22865 2.85832 6.99998 3.49999 6.99998H7.17499L8.63332 5.42498C8.84721 5.19165 9.10466 5.00692 9.40566 4.87081C9.70743 4.7347 10.0236 4.66665 10.3542 4.66665H15.1667C15.4972 4.66665 15.7745 4.77826 15.9985 5.00148C16.2217 5.22548 16.3333 5.50276 16.3333 5.83331V8.16665C16.3333 8.4972 16.4453 8.77448 16.6693 8.99848C16.8925 9.2217 17.1694 9.33331 17.5 9.33331H19.8333V11.6666C19.8333 11.9972 19.9453 12.2741 20.1693 12.4973C20.3925 12.7213 20.6694 12.8333 21 12.8333H23.3333C23.6639 12.8333 23.9408 12.9449 24.164 13.1681C24.388 13.3921 24.5 13.6694 24.5 14V23.3333C24.5 23.975 24.2717 24.5245 23.8152 24.9818C23.3578 25.4384 22.8083 25.6666 22.1667 25.6666H3.49999ZM12.8333 21.5833C14.2917 21.5833 15.5314 21.0731 16.5527 20.0526C17.5731 19.0314 18.0833 17.7916 18.0833 16.3333C18.0833 14.875 17.5731 13.6352 16.5527 12.614C15.5314 11.5935 14.2917 11.0833 12.8333 11.0833C11.375 11.0833 10.1352 11.5935 9.11399 12.614C8.09354 13.6352 7.58332 14.875 7.58332 16.3333C7.58332 17.7916 8.09354 19.0314 9.11399 20.0526C10.1352 21.0731 11.375 21.5833 12.8333 21.5833ZM22.1667 6.99998H21C20.6694 6.99998 20.3925 6.88837 20.1693 6.66515C19.9453 6.44115 19.8333 6.16387 19.8333 5.83331C19.8333 5.50276 19.9453 5.22548 20.1693 5.00148C20.3925 4.77826 20.6694 4.66665 21 4.66665H22.1667V3.49998C22.1667 3.16942 22.2787 2.89215 22.5027 2.66815C22.7259 2.44492 23.0028 2.33331 23.3333 2.33331C23.6639 2.33331 23.9408 2.44492 24.164 2.66815C24.388 2.89215 24.5 3.16942 24.5 3.49998V4.66665H25.6667C25.9972 4.66665 26.2741 4.77826 26.4973 5.00148C26.7213 5.22548 26.8333 5.50276 26.8333 5.83331C26.8333 6.16387 26.7213 6.44115 26.4973 6.66515C26.2741 6.88837 25.9972 6.99998 25.6667 6.99998H24.5V8.16665C24.5 8.4972 24.388 8.77448 24.164 8.99848C23.9408 9.2217 23.6639 9.33331 23.3333 9.33331C23.0028 9.33331 22.7259 9.2217 22.5027 8.99848C22.2787 8.77448 22.1667 8.4972 22.1667 8.16665V6.99998Z", fill: "currentColor" })))));
+  }
+  static get style() { return flipIconCss; }
+}, [1, "flip-icon-add-photo", {
+    "size": [2]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["flip-icon-add-photo"];
+  components.forEach(tagName => { switch (tagName) {
+    case "flip-icon-add-photo":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FlipIconAddPhoto$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const FlipIconAddPhoto = FlipIconAddPhoto$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { FlipIconAddPhoto, defineCustomElement };

package/dist/components/flip-icon-add.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface FlipIconAdd extends Components.FlipIconAdd, HTMLElement {}
+export const FlipIconAdd: {
+  prototype: FlipIconAdd;
+  new (): FlipIconAdd;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/flip-icon-add.js

@@ -0,0 +1,37 @@
+import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
+
+const flipIconCss = ":host{display:inline-flex}";
+
+const FlipIconAdd$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.size = 24;
+  }
+  render() {
+    return (h("svg", { class: "flip-icon", fill: "none", height: this.size, part: "icon", viewBox: `0 0 ${this.size} ${this.size}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, null, h("path", { d: "M8 12.7666C7.78889 12.7666 7.60845 12.6915 7.45867 12.5413C7.30845 12.3915 7.23334 12.2111 7.23334 11.9999V8.76661H4C3.78889 8.76661 3.60845 8.6915 3.45867 8.54128C3.30845 8.3915 3.23334 8.21105 3.23334 7.99994C3.23334 7.78883 3.30845 7.60839 3.45867 7.45861C3.60845 7.30839 3.78889 7.23328 4 7.23328H7.23334V3.99994C7.23334 3.78883 7.30845 3.60817 7.45867 3.45794C7.60845 3.30817 7.78889 3.23328 8 3.23328C8.21112 3.23328 8.39156 3.30817 8.54134 3.45794C8.69156 3.60817 8.76667 3.78883 8.76667 3.99994V7.23328H12C12.2111 7.23328 12.3916 7.30839 12.5413 7.45861C12.6916 7.60839 12.7667 7.78883 12.7667 7.99994C12.7667 8.21105 12.6916 8.3915 12.5413 8.54128C12.3916 8.6915 12.2111 8.76661 12 8.76661H8.76667V11.9999C8.76667 12.2111 8.69156 12.3915 8.54134 12.5413C8.39156 12.6915 8.21112 12.7666 8 12.7666V12.7666Z", fill: "currentColor" }))), this.size === 24 && (h(Fragment, null, h("path", { d: "M12 19.15C11.6833 19.15 11.4127 19.0373 11.188 18.812C10.9627 18.5873 10.85 18.3166 10.85 18V13.15H6.00001C5.68334 13.15 5.41267 13.0373 5.18801 12.812C4.96267 12.5873 4.85001 12.3166 4.85001 12C4.85001 11.6833 4.96267 11.4126 5.18801 11.188C5.41267 10.9626 5.68334 10.85 6.00001 10.85H10.85V5.99998C10.85 5.68331 10.9627 5.41231 11.188 5.18698C11.4127 4.96231 11.6833 4.84998 12 4.84998C12.3167 4.84998 12.5873 4.96231 12.812 5.18698C13.0373 5.41231 13.15 5.68331 13.15 5.99998V10.85H18C18.3167 10.85 18.5873 10.9626 18.812 11.188C19.0373 11.4126 19.15 11.6833 19.15 12C19.15 12.3166 19.0373 12.5873 18.812 12.812C18.5873 13.0373 18.3167 13.15 18 13.15H13.15V18C13.15 18.3166 13.0373 18.5873 12.812 18.812C12.5873 19.0373 12.3167 19.15 12 19.15Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M14 22.3417C13.6305 22.3417 13.3148 22.2102 13.0527 21.9473C12.7898 21.6852 12.6583 21.3694 12.6583 21V15.3417H6.99999C6.63055 15.3417 6.31477 15.2102 6.05266 14.9473C5.78977 14.6852 5.65833 14.3694 5.65833 14C5.65833 13.6305 5.78977 13.3148 6.05266 13.0527C6.31477 12.7898 6.63055 12.6583 6.99999 12.6583H12.6583V6.99999C12.6583 6.63055 12.7898 6.31438 13.0527 6.05149C13.3148 5.78938 13.6305 5.65833 14 5.65833C14.3694 5.65833 14.6852 5.78938 14.9473 6.05149C15.2102 6.31438 15.3417 6.63055 15.3417 6.99999V12.6583H21C21.3694 12.6583 21.6852 12.7898 21.9473 13.0527C22.2102 13.3148 22.3417 13.6305 22.3417 14C22.3417 14.3694 22.2102 14.6852 21.9473 14.9473C21.6852 15.2102 21.3694 15.3417 21 15.3417H15.3417V21C15.3417 21.3694 15.2102 21.6852 14.9473 21.9473C14.6852 22.2102 14.3694 22.3417 14 22.3417V22.3417Z", fill: "currentColor" })))));
+  }
+  static get style() { return flipIconCss; }
+}, [1, "flip-icon-add", {
+    "size": [2]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["flip-icon-add"];
+  components.forEach(tagName => { switch (tagName) {
+    case "flip-icon-add":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FlipIconAdd$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const FlipIconAdd = FlipIconAdd$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { FlipIconAdd, defineCustomElement };

package/dist/components/flip-icon-admin-panel-settings.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface FlipIconAdminPanelSettings extends Components.FlipIconAdminPanelSettings, HTMLElement {}
+export const FlipIconAdminPanelSettings: {
+  prototype: FlipIconAdminPanelSettings;
+  new (): FlipIconAdminPanelSettings;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;