@emuanalytics/flow-rdf-ui 4.0.5 → 4.0.6

package/dist/components/avatar/avatar.styles.mjs

@@ -0,0 +1,70 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles.mjs';
+
+const styles = css`
+  ${componentStyles}
+
+  :host {
+    display: inline-block;
+
+    --size: 3rem;
+  }
+
+  .avatar {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    width: var(--size);
+    height: var(--size);
+    background-color: var(--flow-ui-color-neutral-400);
+    font-family: var(--flow-ui-font-sans);
+    font-size: calc(var(--size) * 0.5);
+    font-weight: var(--flow-ui-font-weight-normal);
+    color: var(--flow-ui-color-neutral-0);
+    user-select: none;
+    vertical-align: middle;
+  }
+
+  .avatar--circle,
+  .avatar--circle .avatar__image {
+    border-radius: var(--flow-ui-border-radius-circle);
+  }
+
+  .avatar--rounded,
+  .avatar--rounded .avatar__image {
+    border-radius: var(--flow-ui-border-radius-medium);
+  }
+
+  .avatar--square {
+    border-radius: 0;
+  }
+
+  .avatar__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .avatar__initials {
+    line-height: 1;
+    text-transform: uppercase;
+  }
+
+  .avatar__image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    overflow: hidden;
+  }
+`;
+
+export { styles as default };

package/dist/components/badge/badge.component.mjs

@@ -0,0 +1,62 @@
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { boolean } from '../../internal/boolean.mjs';
+import FlowRdfElement from '../../internal/flow-ui-rdf-element.mjs';
+import styles from './badge.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 FlowUiBadge extends FlowRdfElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "primary";
+    this.pill = false;
+    this.pulse = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.pill = boolean(this.pill, true);
+    this.pulse = boolean(this.pulse, true);
+  }
+  render() {
+    return html`
+      <slot
+        part="base"
+        class=${classMap({
+      badge: true,
+      "badge--primary": this.variant === "primary",
+      "badge--secondary": this.variant === "secondary",
+      "badge--success": this.variant === "success",
+      "badge--neutral": this.variant === "neutral",
+      "badge--warning": this.variant === "warning",
+      "badge--danger": this.variant === "danger",
+      "badge--pill": this.pill,
+      "badge--pulse": this.pulse
+    })}
+        role="status"
+      ></slot>
+    `;
+  }
+}
+FlowUiBadge.styles = styles;
+__decorateClass([
+  property({ reflect: true })
+], FlowUiBadge.prototype, "variant", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiBadge.prototype, "pill", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiBadge.prototype, "pulse", 2);
+
+export { FlowUiBadge as default };

package/dist/components/badge/badge.mjs

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

package/dist/components/badge/badge.styles.mjs

@@ -0,0 +1,105 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles.mjs';
+
+const styles = css`
+  ${componentStyles}
+
+  :host {
+    display: inline-flex;
+  }
+
+  .badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: max(12px, 0.75em);
+    font-weight: var(--flow-ui-font-weight-semibold);
+    letter-spacing: var(--flow-ui-letter-spacing-normal);
+    line-height: 1;
+    border-radius: var(--flow-ui-border-radius-small);
+    border: solid 1px var(--flow-ui-color-neutral-0);
+    white-space: nowrap;
+    padding: 0.35em 0.6em;
+    user-select: none;
+    cursor: inherit;
+  }
+
+  /* Variant modifiers */
+  .badge--primary {
+    background-color: var(--flow-ui-color-primary-500);
+    color: var(--flow-ui-color-neutral-0);
+  }
+
+  .badge--secondary {
+    background-color: var(--flow-ui-color-secondary-500);
+    color: var(--flow-ui-color-neutral-0);
+  }
+
+  .badge--success {
+    background-color: var(--flow-ui-color-success-600);
+    color: var(--flow-ui-color-neutral-0);
+  }
+
+  .badge--neutral {
+    background-color: var(--flow-ui-color-neutral-600);
+    color: var(--flow-ui-color-neutral-0);
+  }
+
+  .badge--warning {
+    background-color: var(--flow-ui-color-warning-600);
+    color: var(--flow-ui-color-neutral-0);
+  }
+
+  .badge--danger {
+    background-color: var(--flow-ui-color-danger-600);
+    color: var(--flow-ui-color-neutral-0);
+  }
+
+  /* Pill modifier */
+  .badge--pill {
+    border-radius: var(--flow-ui-border-radius-pill);
+  }
+
+  /* Pulse modifier */
+  .badge--pulse {
+    animation: pulse 1.5s infinite;
+  }
+
+  .badge--pulse.badge--primary {
+    --pulse-color: var(--flow-ui-color-primary-500);
+  }
+
+  .badge--pulse.badge--secondary {
+    --pulse-color: var(--flow-ui-color-secondary-500);
+  }
+
+  .badge--pulse.badge--success {
+    --pulse-color: var(--flow-ui-color-success-600);
+  }
+
+  .badge--pulse.badge--neutral {
+    --pulse-color: var(--flow-ui-color-neutral-600);
+  }
+
+  .badge--pulse.badge--warning {
+    --pulse-color: var(--flow-ui-color-warning-600);
+  }
+
+  .badge--pulse.badge--danger {
+    --pulse-color: var(--flow-ui-color-danger-600);
+  }
+
+  @keyframes pulse {
+    0% {
+      box-shadow: 0 0 0 0 var(--pulse-color);
+    }
+    70% {
+      box-shadow: 0 0 0 0.5rem transparent;
+    }
+    100% {
+      box-shadow: 0 0 0 0 transparent;
+    }
+  }
+`;
+
+export { styles as default };

package/dist/components/breadcrumb/breadcrumb.component.mjs

@@ -0,0 +1,82 @@
+import { html } from 'lit';
+import { query, property } from 'lit/decorators.js';
+import FlowRdfElement from '../../internal/flow-ui-rdf-element.mjs';
+import { LocalizeController } from '../../utilities/localize.mjs';
+import styles from './breadcrumb.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 FlowUiBreadcrumb extends FlowRdfElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.separatorDir = this.localize.dir();
+    this.label = "";
+  }
+  // Generates a clone of the separator element to use for each breadcrumb item
+  getSeparator() {
+    const separator = this.separatorSlot.assignedElements({ flatten: true })[0];
+    const clone = separator.cloneNode(true);
+    [clone, ...clone.querySelectorAll("[id]")].forEach((el) => el.removeAttribute("id"));
+    clone.setAttribute("data-default", "");
+    clone.slot = "separator";
+    return clone;
+  }
+  handleSlotChange() {
+    const items = [...this.defaultSlot.assignedElements({ flatten: true })].filter(
+      (item) => item.tagName.toLowerCase() === "flow-ui-breadcrumb-item"
+    );
+    items.forEach((item, index) => {
+      const separator = item.querySelector('[slot="separator"]');
+      if (separator === null) {
+        item.append(this.getSeparator());
+      } else if (separator.hasAttribute("data-default")) {
+        separator.replaceWith(this.getSeparator());
+      } else ;
+      if (index === items.length - 1) {
+        item.setAttribute("aria-current", "page");
+      } else {
+        item.removeAttribute("aria-current");
+      }
+    });
+  }
+  render() {
+    if (this.separatorDir !== this.localize.dir()) {
+      this.separatorDir = this.localize.dir();
+      this.updateComplete.then(() => this.handleSlotChange());
+    }
+    return html`
+      <nav part="base" class="breadcrumb" aria-label=${this.label}>
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </nav>
+
+      <slot name="separator" hidden aria-hidden="true">
+        <flow-ui-icon
+          name=${this.localize.dir() === "rtl" ? "chevron-left" : "chevron-right"}
+          library="system"
+        ></flow-ui-icon>
+      </slot>
+    `;
+  }
+}
+FlowUiBreadcrumb.styles = styles;
+__decorateClass([
+  query("slot")
+], FlowUiBreadcrumb.prototype, "defaultSlot", 2);
+__decorateClass([
+  query('slot[name="separator"]')
+], FlowUiBreadcrumb.prototype, "separatorSlot", 2);
+__decorateClass([
+  property()
+], FlowUiBreadcrumb.prototype, "label", 2);
+
+export { FlowUiBreadcrumb as default };

package/dist/components/breadcrumb/breadcrumb.mjs

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

package/dist/components/breadcrumb/breadcrumb.styles.mjs

@@ -0,0 +1,14 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles.mjs';
+
+const styles = css`
+  ${componentStyles}
+
+  .breadcrumb {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+`;
+
+export { styles as default };

package/dist/components/breadcrumb-item/breadcrumb-item.component.mjs

@@ -0,0 +1,73 @@
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import FlowRdfElement from '../../internal/flow-ui-rdf-element.mjs';
+import { HasSlotController } from '../../internal/slot.mjs';
+import styles from './breadcrumb-item.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 FlowUiBreadcrumbItem extends FlowRdfElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "prefix", "suffix");
+    this.rel = "noreferrer noopener";
+  }
+  render() {
+    const isLink = this.href ? true : false;
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+      "breadcrumb-item": true,
+      "breadcrumb-item--has-prefix": this.hasSlotController.test("prefix"),
+      "breadcrumb-item--has-suffix": this.hasSlotController.test("suffix")
+    })}
+      >
+        <slot name="prefix" part="prefix" class="breadcrumb-item__prefix"></slot>
+
+        ${isLink ? html`
+              <a
+                part="label"
+                class="breadcrumb-item__label breadcrumb-item__label--link"
+                href="${this.href}"
+                target="${ifDefined(this.target ? this.target : void 0)}"
+                rel=${ifDefined(this.target ? this.rel : void 0)}
+              >
+                <slot></slot>
+              </a>
+            ` : html`
+              <button part="label" type="button" class="breadcrumb-item__label breadcrumb-item__label--button">
+                <slot></slot>
+              </button>
+            `}
+
+        <slot name="suffix" part="suffix" class="breadcrumb-item__suffix"></slot>
+
+        <slot name="separator" part="separator" class="breadcrumb-item__separator" aria-hidden="true"></slot>
+      </div>
+    `;
+  }
+}
+FlowUiBreadcrumbItem.styles = styles;
+__decorateClass([
+  property()
+], FlowUiBreadcrumbItem.prototype, "href", 2);
+__decorateClass([
+  property()
+], FlowUiBreadcrumbItem.prototype, "target", 2);
+__decorateClass([
+  property()
+], FlowUiBreadcrumbItem.prototype, "rel", 2);
+
+export { FlowUiBreadcrumbItem as default };

package/dist/components/breadcrumb-item/breadcrumb-item.mjs

@@ -0,0 +1,5 @@
+import FlowUiBreadcrumbItem from './breadcrumb-item.component.mjs';
+
+
+
+export { FlowUiBreadcrumbItem as default };

package/dist/components/breadcrumb-item/breadcrumb-item.styles.mjs

@@ -0,0 +1,90 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles.mjs';
+
+const styles = css`
+  ${componentStyles}
+
+  :host {
+    display: inline-flex;
+  }
+
+  .breadcrumb-item {
+    display: inline-flex;
+    align-items: center;
+    font-family: var(--flow-ui-font-sans);
+    font-size: var(--flow-ui-font-size-small);
+    font-weight: var(--flow-ui-font-weight-semibold);
+    color: var(--flow-ui-color-neutral-600);
+    line-height: var(--flow-ui-line-height-normal);
+    white-space: nowrap;
+  }
+
+  .breadcrumb-item__label {
+    display: inline-block;
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+    text-decoration: none;
+    color: inherit;
+    background: none;
+    border: none;
+    border-radius: var(--flow-ui-border-radius-medium);
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+    transition: var(--flow-ui-transition-fast) --color;
+  }
+
+  :host(:not(:last-of-type)) .breadcrumb-item__label {
+    color: var(--flow-ui-color-primary-500);
+  }
+
+  :host(:not(:last-of-type)) .breadcrumb-item__label:hover {
+    color: var(--flow-ui-color-primary-400);
+  }
+
+  :host(:not(:last-of-type)) .breadcrumb-item__label:active {
+    color: var(--flow-ui-color-primary-500);
+  }
+
+  .breadcrumb-item__label:focus {
+    outline: none;
+  }
+
+  .breadcrumb-item__label:focus-visible {
+    outline: var(--flow-ui-focus-ring);
+    outline-offset: var(--flow-ui-focus-ring-offset);
+  }
+
+  .breadcrumb-item__prefix,
+  .breadcrumb-item__suffix {
+    display: none;
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+  }
+
+  .breadcrumb-item--has-prefix .breadcrumb-item__prefix {
+    display: inline-flex;
+    margin-inline-end: var(--flow-ui-spacing-x-small);
+  }
+
+  .breadcrumb-item--has-suffix .breadcrumb-item__suffix {
+    display: inline-flex;
+    margin-inline-start: var(--flow-ui-spacing-x-small);
+  }
+
+  :host(:last-of-type) .breadcrumb-item__separator {
+    display: none;
+  }
+
+  .breadcrumb-item__separator {
+    display: inline-flex;
+    align-items: center;
+    margin: 0 var(--flow-ui-spacing-x-small);
+    user-select: none;
+  }
+`;
+
+export { styles as default };