@haiilo/catalyst 1.3.0 → 2.0.0

package/dist/collection/scss/core/_toast.scss

@@ -1,87 +0,0 @@
-@use '../variables' as *;
-@use '../mixins' as *;
-
-$-background-color: cat-token('color.base.white');
-$-text-color: cat-token('color.base.black');
-$-title-border: cat-token('color.base.neutral.300');
-$-shadow: cat-token('color.ui.border.dark');
-$-error-color: cat-token('color.theme.danger.text');
-$-info-color: cat-token('color.base.orange.700');
-$-success-color: cat-token('color.theme.success.text');
-$-secondary-color: cat-token('color.base.black');
-$-primary-color: cat-token('color.base.brand.400');
-
-.cat-toastify {
-  background: $-background-color;
-  color: $-text-color;
-  padding: 0;
-  border-radius: 0.5rem;
-  @include cat-elevation(1);
-
-  .toast-close {
-    float: right;
-    font-size: 20px;
-    margin-top: 0.5rem;
-    position: absolute;
-    top: 0;
-    right: 0;
-    z-index: 10;
-  }
-
-  .cat-toastify-wrapper {
-    display: block;
-    position: relative;
-
-    .cat-toastify-icon-wrapper {
-      position: absolute;
-      top: 1.1rem;
-      left: 1.125rem;
-
-      &.error {
-        color: $-error-color;
-      }
-
-      &.success {
-        color: $-success-color;
-      }
-
-      &.primary {
-        color: $-primary-color;
-      }
-
-      &.secondary {
-        color: $-secondary-color;
-      }
-
-      &.info {
-        color: $-info-color;
-      }
-    }
-
-    .cat-toastify-title-wrapper {
-      width: 100%;
-      padding: 1.2rem 1.2rem 1.2rem 3rem;
-
-      &.has-message {
-        margin-bottom: -2.25rem;
-      }
-
-      .cat-toastify-title {
-        width: 100%;
-        padding-right: 1.5rem;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        font-size: 15px;
-        line-height: 20px;
-        color: $-text-color;
-      }
-    }
-
-    .cat-toastify-message {
-      width: 100%;
-      padding: 1.5rem 1.5rem 1.5rem 3rem;
-      color: $-text-color;
-    }
-  }
-}

package/dist/components/cat-menu.js

@@ -1,174 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { a as autoUpdate, c as computePosition, o as offset, f as flip } from './floating-ui.dom.esm.js';
-import { c as createFocusTrap } from './focus-trap.esm.js';
-import { l as loglevel } from './loglevel.js';
-import { t as tabbable, f as firstTabbable } from './first-tabbable.js';
-
-const catMenuCss = ":host{display:contents}:host([hidden]){display:none}::slotted(nav){padding-top:0.5rem;padding-bottom:0.5rem;min-width:8rem;max-width:16rem}.content{position:absolute;background:white;display:none;overflow:auto;-webkit-overflow-scrolling:touch;min-height:2rem;max-height:calc(100vh - 48px);box-shadow:0 1px 4px 0 rgba(16, 29, 48, 0.2);border-radius:var(--cat-border-radius-m, 0.25rem);z-index:100}";
-
-let nextUniqueId = 0;
-const CatMenu$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.catOpen = createEvent(this, "catOpen", 7);
-    this.catClose = createEvent(this, "catClose", 7);
-    this.id = nextUniqueId++;
-    /**
-     * The placement of the menu.
-     */
-    this.placement = 'bottom-start';
-    /**
-     * Do not close the menu on outside clicks.
-     */
-    this.noAutoClose = false;
-  }
-  clickHandler(event) {
-    if (!this.trigger) {
-      this.initTrigger();
-      this.show();
-    }
-    // hide menu on button click
-    if (!this.noAutoClose && this.content && event.composedPath().includes(this.content)) {
-      this.close();
-    }
-  }
-  /**
-   * Closes the menu.
-   */
-  async close() {
-    var _a;
-    (_a = this.trap) === null || _a === void 0 ? void 0 : _a.deactivate();
-    this.hide();
-  }
-  componentDidLoad() {
-    this.initTrigger();
-    this.keyListener = event => {
-      if (this.content && ['ArrowDown', 'ArrowUp'].includes(event.key)) {
-        const targetElements = tabbable(this.content, { includeContainer: false, getShadowRoot: true });
-        const activeElement = firstTabbable(document.activeElement);
-        const activeIdx = activeElement ? targetElements.indexOf(activeElement) : -1;
-        const activeOff = event.key === 'ArrowDown' ? 1 : -1;
-        const targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;
-        targetElements[targetIdx].focus();
-        event.preventDefault();
-      }
-    };
-    document.addEventListener('keydown', this.keyListener);
-  }
-  disconnectedCallback() {
-    if (this.keyListener) {
-      document.removeEventListener('keydown', this.keyListener);
-    }
-  }
-  render() {
-    return (h(Host, null, h("slot", { name: "trigger", ref: el => (this.triggerSlot = el) }), h("div", { class: "content", ref: el => (this.content = el) }, h("slot", { name: "content" }))));
-  }
-  get contentId() {
-    return `cat-menu-${this.id}`;
-  }
-  initTrigger() {
-    var _a, _b, _c, _d, _e;
-    this.trigger = this.findTrigger();
-    (_a = this.trigger) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-haspopup', 'true');
-    (_b = this.trigger) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-expanded', 'false');
-    (_c = this.trigger) === null || _c === void 0 ? void 0 : _c.setAttribute('aria-controls', this.contentId);
-    (_d = this.content) === null || _d === void 0 ? void 0 : _d.setAttribute('id', this.contentId);
-    if (this.trigger && this.content) {
-      (_e = this.trigger) === null || _e === void 0 ? void 0 : _e.addEventListener('click', () => {
-        var _a;
-        ((_a = this.trap) === null || _a === void 0 ? void 0 : _a.active) ? this.close() : this.show();
-      });
-      autoUpdate(this.trigger, this.content, () => this.update());
-    }
-  }
-  show() {
-    var _a;
-    if (this.content) {
-      this.content.style.display = 'block';
-      (_a = this.trigger) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', 'true');
-      this.catOpen.emit();
-      this.trap = this.trap
-        ? this.trap.updateContainerElements(this.content)
-        : createFocusTrap(this.content, {
-          tabbableOptions: {
-            getShadowRoot: true
-          },
-          allowOutsideClick: true,
-          clickOutsideDeactivates: event => !this.noAutoClose &&
-            (!this.content || !event.composedPath().includes(this.content)) &&
-            (!this.trigger || !event.composedPath().includes(this.trigger)),
-          onPostDeactivate: () => this.close()
-        });
-      this.trap.activate();
-    }
-  }
-  hide() {
-    var _a;
-    if (this.content) {
-      this.content.style.display = '';
-      (_a = this.trigger) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', 'false');
-      this.catClose.emit();
-    }
-  }
-  update() {
-    if (this.trigger && this.content) {
-      computePosition(this.trigger, this.content, {
-        placement: this.placement,
-        middleware: [offset(CatMenu$1.OFFSET), flip()]
-      }).then(({ x, y }) => {
-        if (this.content) {
-          Object.assign(this.content.style, {
-            left: `${x}px`,
-            top: `${y}px`
-          });
-        }
-      });
-    }
-  }
-  findTrigger() {
-    var _a, _b;
-    let trigger;
-    const elems = ((_a = this.triggerSlot) === null || _a === void 0 ? void 0 : _a.assignedElements()) || [];
-    while (!trigger && elems.length) {
-      const elem = elems.shift();
-      trigger = (elem === null || elem === void 0 ? void 0 : elem.hasAttribute('data-trigger'))
-        ? elem
-        : (_b = elem === null || elem === void 0 ? void 0 : elem.querySelector('[data-trigger]')) !== null && _b !== void 0 ? _b : undefined;
-    }
-    if (!trigger) {
-      trigger = firstTabbable(this.triggerSlot);
-    }
-    if (!trigger) {
-      loglevel.error('Cannot find tabbable element. Use [data-trigger] to set the trigger.');
-    }
-    return trigger;
-  }
-  static get style() { return catMenuCss; }
-}, [1, "cat-menu", {
-    "placement": [1],
-    "noAutoClose": [4, "no-auto-close"],
-    "close": [64]
-  }, [[0, "catClick", "clickHandler"]]]);
-CatMenu$1.OFFSET = 4;
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["cat-menu"];
-  components.forEach(tagName => { switch (tagName) {
-    case "cat-menu":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, CatMenu$1);
-      }
-      break;
-  } });
-}
-
-const CatMenu = CatMenu$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { CatMenu, defineCustomElement };
-
-//# sourceMappingURL=cat-menu.js.map

package/dist/components/cat-menu.js.map

@@ -1 +0,0 @@
-{"file":"cat-menu.js","mappings":"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","names":["CatMenu","focusTrap.createFocusTrap","log"],"sources":["./src/components/cat-menu/cat-menu.scss?tag=cat-menu&encapsulation=shadow","./src/components/cat-menu/cat-menu.tsx"],"sourcesContent":["@import 'variables';\n@import 'mixins';\n\n$-min-width: 8rem;\n$-max-width: 16rem;\n$-min-height: 2rem;\n$-max-height: calc(100vh - 48px);\n\n:host {\n  display: contents;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n::slotted(nav) {\n  padding-top: $cat-body-margin-bottom * 0.5;\n  padding-bottom: $cat-body-margin-bottom * 0.5;\n  min-width: $-min-width;\n  max-width: $-max-width;\n}\n\n.content {\n  position: absolute;\n  background: cat-token('color.ui.background.body');\n  display: none;\n  overflow: auto;\n  -webkit-overflow-scrolling: touch;\n  min-height: $-min-height;\n  max-height: $-max-height;\n  @include cat-elevation(1);\n  border-radius: cat-border-radius('m');\n  z-index: $cat-menu-z-index;\n}\n","import { autoUpdate, computePosition, flip, offset, Placement } from '@floating-ui/dom';\nimport { Component, Event, EventEmitter, h, Host, Listen, Method, Prop } from '@stencil/core';\nimport * as focusTrap from 'focus-trap';\nimport log from 'loglevel';\nimport { FocusableElement, tabbable } from 'tabbable';\nimport firstTabbable from '../../utils/first-tabbable';\n\nlet nextUniqueId = 0;\n\n@Component({\n  tag: 'cat-menu',\n  styleUrl: 'cat-menu.scss',\n  shadow: true\n})\nexport class CatMenu {\n  private static readonly OFFSET = 4;\n  private readonly id = nextUniqueId++;\n  private triggerSlot?: HTMLSlotElement;\n  private trigger?: FocusableElement;\n  private content?: HTMLElement;\n  private trap?: focusTrap.FocusTrap;\n  private keyListener?: (event: KeyboardEvent) => void;\n\n  /**\n   * The placement of the menu.\n   */\n  @Prop() placement: Placement = 'bottom-start';\n\n  /**\n   * Do not close the menu on outside clicks.\n   */\n  @Prop() noAutoClose = false;\n\n  /**\n   * Emitted when the menu is opened.\n   */\n  @Event() catOpen!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the menu is closed.\n   */\n  @Event() catClose!: EventEmitter<FocusEvent>;\n\n  @Listen('catClick')\n  clickHandler(event: CustomEvent<MouseEvent>) {\n    if (!this.trigger) {\n      this.initTrigger();\n      this.show();\n    }\n\n    // hide menu on button click\n    if (!this.noAutoClose && this.content && event.composedPath().includes(this.content)) {\n      this.close();\n    }\n  }\n\n  /**\n   * Closes the menu.\n   */\n  @Method()\n  async close(): Promise<void> {\n    this.trap?.deactivate();\n    this.hide();\n  }\n\n  componentDidLoad(): void {\n    this.initTrigger();\n    this.keyListener = event => {\n      if (this.content && ['ArrowDown', 'ArrowUp'].includes(event.key)) {\n        const targetElements = tabbable(this.content, { includeContainer: false, getShadowRoot: true });\n        const activeElement = firstTabbable(document.activeElement);\n        const activeIdx = activeElement ? targetElements.indexOf(activeElement) : -1;\n        const activeOff = event.key === 'ArrowDown' ? 1 : -1;\n        const targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;\n        targetElements[targetIdx].focus();\n        event.preventDefault();\n      }\n    };\n    document.addEventListener('keydown', this.keyListener);\n  }\n\n  disconnectedCallback(): void {\n    if (this.keyListener) {\n      document.removeEventListener('keydown', this.keyListener);\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot name=\"trigger\" ref={el => (this.triggerSlot = el as HTMLSlotElement)}></slot>\n        <div class=\"content\" ref={el => (this.content = el)}>\n          <slot name=\"content\"></slot>\n        </div>\n      </Host>\n    );\n  }\n\n  private get contentId() {\n    return `cat-menu-${this.id}`;\n  }\n\n  private initTrigger() {\n    this.trigger = this.findTrigger();\n    this.trigger?.setAttribute('aria-haspopup', 'true');\n    this.trigger?.setAttribute('aria-expanded', 'false');\n    this.trigger?.setAttribute('aria-controls', this.contentId);\n    this.content?.setAttribute('id', this.contentId);\n    if (this.trigger && this.content) {\n      this.trigger?.addEventListener('click', () => {\n        this.trap?.active ? this.close() : this.show();\n      });\n      autoUpdate(this.trigger, this.content, () => this.update());\n    }\n  }\n\n  private show() {\n    if (this.content) {\n      this.content.style.display = 'block';\n      this.trigger?.setAttribute('aria-expanded', 'true');\n      this.catOpen.emit();\n      this.trap = this.trap\n        ? this.trap.updateContainerElements(this.content)\n        : focusTrap.createFocusTrap(this.content, {\n            tabbableOptions: {\n              getShadowRoot: true\n            },\n            allowOutsideClick: true,\n            clickOutsideDeactivates: event =>\n              !this.noAutoClose &&\n              (!this.content || !event.composedPath().includes(this.content)) &&\n              (!this.trigger || !event.composedPath().includes(this.trigger)),\n            onPostDeactivate: () => this.close()\n          });\n      this.trap.activate();\n    }\n  }\n\n  private hide() {\n    if (this.content) {\n      this.content.style.display = '';\n      this.trigger?.setAttribute('aria-expanded', 'false');\n      this.catClose.emit();\n    }\n  }\n\n  private update() {\n    if (this.trigger && this.content) {\n      computePosition(this.trigger, this.content, {\n        placement: this.placement,\n        middleware: [offset(CatMenu.OFFSET), flip()]\n      }).then(({ x, y }) => {\n        if (this.content) {\n          Object.assign(this.content.style, {\n            left: `${x}px`,\n            top: `${y}px`\n          });\n        }\n      });\n    }\n  }\n\n  private findTrigger(): FocusableElement | undefined {\n    let trigger: FocusableElement | undefined;\n    const elems = this.triggerSlot?.assignedElements() || [];\n    while (!trigger && elems.length) {\n      const elem = elems.shift();\n      trigger = elem?.hasAttribute('data-trigger')\n        ? (elem as HTMLElement)\n        : elem?.querySelector('[data-trigger]') ?? undefined;\n    }\n    if (!trigger) {\n      trigger = firstTabbable(this.triggerSlot);\n    }\n    if (!trigger) {\n      log.error('Cannot find tabbable element. Use [data-trigger] to set the trigger.');\n    }\n    return trigger;\n  }\n}\n"],"version":3}