@emuanalytics/flow-rdf-ui 4.0.4 → 4.0.6

package/dist/components/icon-button/icon-button.component.mjs

@@ -0,0 +1,239 @@
+import { query, state, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { html, literal } from 'lit/static-html.js';
+import { boolean } from '../../internal/boolean.mjs';
+import { waitForEvent } from '../../internal/event.mjs';
+import FlowRdfElement from '../../internal/flow-ui-rdf-element.mjs';
+import { HasSlotController } from '../../internal/slot.mjs';
+import styles from './icon-button.styles.mjs';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+class FlowUiIconButton extends FlowRdfElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "tooltip");
+    this.tooltipAnimating = false;
+    this.hasFocus = false;
+    this.label = "";
+    this.tooltip = "";
+    this.tooltipPlacement = "top";
+    this.tooltipDistance = 8;
+    this.tooltipSkidding = 0;
+    this.disabled = false;
+    this.confirm = "";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.disabled = boolean(this.disabled, true);
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    this.emit("flow-ui-blur");
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    this.emit("flow-ui-focus");
+  }
+  handleClick(event) {
+    const hasConfirm = this.confirm || this.hasSlotController.test("confirm");
+    if (this.disabled || hasConfirm) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+    if (hasConfirm) {
+      this.showConfirm();
+    }
+  }
+  /** Simulates a click on the icon button. */
+  click() {
+    this.button.click();
+  }
+  /** Sets focus on the icon button. */
+  focus(options) {
+    this.button.focus(options);
+  }
+  /** Removes focus from the icon button. */
+  blur() {
+    this.button.blur();
+  }
+  /** Hide the confirmation tooltip if it is showing */
+  hideConfirm() {
+    if (this.tooltipElem && this.tooltipElem.open && !this.tooltipAnimating) {
+      waitForEvent(this.tooltipElem, "flow-ui-after-hide").then(() => {
+        this.tooltipAnimating = false;
+      });
+      this.tooltipAnimating = true;
+      this.tooltipElem.hide();
+    }
+  }
+  /** Show the confirmation tooltip */
+  showConfirm() {
+    if (this.tooltipElem && !this.tooltipElem.open && !this.tooltipAnimating) {
+      waitForEvent(this.tooltipElem, "flow-ui-after-show").then(() => {
+        this.tooltipAnimating = false;
+        this.confirmButton.focus();
+      });
+      this.tooltipAnimating = true;
+      this.tooltipElem.show();
+    }
+  }
+  handleConfirmClick() {
+    this.hideConfirm();
+    this.click();
+  }
+  renderWithTooltip(contents) {
+    return html`
+      <flow-ui-tooltip
+        class=${classMap({
+      "icon-button__tooltip": true
+    })}
+        trigger="hover"
+        placement=${this.tooltipPlacement}
+        distance=${this.tooltipDistance}
+        skidding=${this.tooltipSkidding}
+        hoist
+      >
+        <slot name="tooltip" slot="content">${this.tooltip}</slot>
+        ${contents}
+      </flow-ui-tooltip>
+    `;
+  }
+  renderWithConfirmation(contents) {
+    return html`
+      <flow-ui-tooltip
+        class=${classMap({
+      "icon-button__tooltip": true,
+      "icon-button__tooltip--confirm": true
+    })}
+        trigger="manual"
+        placement=${this.tooltipPlacement}
+        distance=${this.tooltipDistance}
+        skidding=${this.tooltipSkidding}
+        hoist
+      >
+        <div class="confirm__wrapper" slot="content">
+          <span class="confirm__label"><slot name="confirm">${this.confirm}</slot></span>
+          <flow-ui-button
+            variant="danger"
+            size="small"
+            class="icon-button__confirm_button"
+            @focusout=${this.hideConfirm}
+            @click=${this.handleConfirmClick}
+          >
+            OK
+          </flow-ui-button>
+        </div>
+        ${contents}
+      </flow-ui-tooltip>
+    `;
+  }
+  render() {
+    const isLink = this.href ? true : false;
+    const tag = isLink ? literal`a` : literal`button`;
+    const hasTooltip = this.tooltip || this.hasSlotController.test("tooltip");
+    const hasConfirm = this.confirm || this.hasSlotController.test("confirm");
+    const iconButton = html`
+      <${tag}
+        part="base"
+        class=${classMap({
+      "icon-button": true,
+      "icon-button--disabled": !isLink && this.disabled,
+      "icon-button--focused": this.hasFocus
+    })}
+        ?disabled=${ifDefined(isLink ? void 0 : this.disabled)}
+        type=${ifDefined(isLink ? void 0 : "button")}
+        href=${ifDefined(isLink ? this.href : void 0)}
+        target=${ifDefined(isLink ? this.target : void 0)}
+        download=${ifDefined(isLink ? this.download : void 0)}
+        rel=${ifDefined(isLink && this.target ? "noreferrer noopener" : void 0)}
+        role=${ifDefined(isLink ? void 0 : "button")}
+        aria-disabled=${this.disabled ? "true" : "false"}
+        aria-label="${this.label}"
+        tabindex=${this.disabled ? "-1" : "0"}
+        @blur=${this.handleBlur}
+        @focus=${this.handleFocus}
+        @click=${this.handleClick}
+      >
+        <flow-ui-icon
+          class="icon-button__icon"
+          name=${ifDefined(this.name)}
+          library=${ifDefined(this.library)}
+          src=${ifDefined(this.src)}
+          aria-hidden="true"
+        ></flow-ui-icon>
+      </${tag}>
+    `;
+    if (hasTooltip) {
+      return this.renderWithTooltip(iconButton);
+    } else if (hasConfirm) {
+      return this.renderWithConfirmation(iconButton);
+    } else {
+      return iconButton;
+    }
+  }
+}
+FlowUiIconButton.styles = styles;
+__decorateClass([
+  query(".icon-button")
+], FlowUiIconButton.prototype, "button", 2);
+__decorateClass([
+  query(".icon-button__tooltip")
+], FlowUiIconButton.prototype, "tooltipElem", 2);
+__decorateClass([
+  query(".icon-button__confirm_button")
+], FlowUiIconButton.prototype, "confirmButton", 2);
+__decorateClass([
+  state()
+], FlowUiIconButton.prototype, "hasFocus", 2);
+__decorateClass([
+  property()
+], FlowUiIconButton.prototype, "name", 2);
+__decorateClass([
+  property()
+], FlowUiIconButton.prototype, "library", 2);
+__decorateClass([
+  property()
+], FlowUiIconButton.prototype, "src", 2);
+__decorateClass([
+  property()
+], FlowUiIconButton.prototype, "href", 2);
+__decorateClass([
+  property()
+], FlowUiIconButton.prototype, "target", 2);
+__decorateClass([
+  property()
+], FlowUiIconButton.prototype, "download", 2);
+__decorateClass([
+  property()
+], FlowUiIconButton.prototype, "label", 2);
+__decorateClass([
+  property()
+], FlowUiIconButton.prototype, "tooltip", 2);
+__decorateClass([
+  property({ attribute: "tooltip-placement" })
+], FlowUiIconButton.prototype, "tooltipPlacement", 2);
+__decorateClass([
+  property({ attribute: "tooltip-distance", type: Number })
+], FlowUiIconButton.prototype, "tooltipDistance", 2);
+__decorateClass([
+  property({ attribute: "tooltip-skidding", type: Number })
+], FlowUiIconButton.prototype, "tooltipSkidding", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiIconButton.prototype, "disabled", 2);
+__decorateClass([
+  property()
+], FlowUiIconButton.prototype, "confirm", 2);
+
+export { FlowUiIconButton as default };

package/dist/components/icon-button/icon-button.mjs

@@ -0,0 +1,5 @@
+import FlowUiIconButton from './icon-button.component.mjs';
+
+
+
+export { FlowUiIconButton as default };

package/dist/components/icon-button/icon-button.styles.mjs

@@ -0,0 +1,81 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles.mjs';
+
+const styles = css`
+  ${componentStyles}
+
+  :host {
+    display: inline-block;
+    color: var(--flow-ui-color-neutral-600);
+
+    --hover-color: var(--flow-ui-color-primary-500);
+    --active-color: var(--flow-ui-color-primary-400);
+    --icon-size: inherit;
+  }
+
+  .icon-button {
+    position: relative;
+    width: 100%;
+    /* Start new stacking context to allow z-index: -1 on :before pseudo-element */
+    isolation: isolate;
+    flex: 0 0 auto;
+    display: flex;
+    flex-direction: column;
+    gap: var(--flow-ui-spacing-x-small);
+    align-items: center;
+    background: none;
+    border: none;
+    border-radius: var(--flow-ui-border-radius-medium);
+    font-size: inherit;
+    color: inherit;
+    padding: var(--flow-ui-spacing-x-small);
+    cursor: pointer;
+    transition: var(--flow-ui-transition-x-fast) color;
+    -webkit-appearance: none;
+  }
+
+  .icon-button:hover:not(.icon-button--disabled),
+  .icon-button:focus-visible:not(.icon-button--disabled) {
+    color: var(--hover-color);
+  }
+
+  .icon-button:active:not(.icon-button--disabled) {
+    color: var(--active-color);
+  }
+
+  .icon-button:focus {
+    outline: none;
+  }
+
+  .icon-button--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .icon-button:focus-visible {
+    outline: var(--flow-ui-focus-ring);
+    outline-offset: var(--flow-ui-focus-ring-offset);
+  }
+
+  .icon-button__icon {
+    pointer-events: none;
+    font-size: var(--icon-size);
+  }
+
+  /* Tooltip */
+  .icon-button__tooltip {
+    --show-delay: var(--flow-ui-button-tooltip-delay);
+  }
+
+  /* Icon button with confirmation */
+  .icon-button__tooltip--confirm::part(body) {
+    padding: var(--flow-ui-spacing-2x-small);
+    pointer-events: all;
+  }
+
+  .icon-button__tooltip--confirm .confirm__label {
+    margin-inline: var(--flow-ui-spacing-x-small);
+  }
+`;
+
+export { styles as default };