@emuanalytics/flow-rdf-ui 4.0.5 → 4.0.6

package/dist/components/tab-group/tab-group.styles.mjs

@@ -0,0 +1,386 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles.mjs';
+
+const styles = css`
+  ${componentStyles}
+
+  :host {
+    --indicator-color: var(--flow-ui-color-primary-500);
+    --track-color: var(--flow-ui-divider-color);
+    --track-width: 2px;
+
+    --background-color: var(--flow-ui-panel-background-color);
+    --color: var(--flow-ui-panel-color);
+
+    display: block;
+  }
+
+  .tab-group {
+    height: 100%;
+    display: flex;
+    justify-content: start;
+    border-radius: 0;
+    overflow: hidden;
+
+    background-color: var(--background-color);
+    color: var(--color);
+  }
+
+  /* Ensure nav is positioned when tab-group is placed in a split panel and the panel is closed */
+  .tab-group--end,
+  .tab-group--bottom {
+    justify-content: end;
+  }
+
+  .tab-group__nav-container {
+    display: flex;
+    flex: 0 0 auto;
+    position: relative;
+  }
+
+  .tab-group__nav {
+    flex: 1;
+    /* Hide scrollbar in Firefox */
+    scrollbar-width: none;
+  }
+
+  .tab-group__nav::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+
+  .tab-group__nav-accessories {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .tab-group__accessory-divider {
+    --spacing: var(--flow-ui-spacing-x-small);
+    --inset: var(--flow-ui-spacing-x-small);
+  }
+
+  .tab-group__tabs {
+    display: flex;
+    position: relative;
+    align-items: end;
+  }
+
+  .tab-group__track {
+    position: absolute;
+  }
+
+  .tab-group__indicator {
+    position: absolute;
+    transition:
+      var(--flow-ui-transition-fast) translate ease,
+      var(--flow-ui-transition-fast) width ease;
+  }
+
+  .tab-group__body-wrapper {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .tab-group__body {
+    display: block;
+    flex: 1;
+    overflow: auto;
+  }
+
+  .tab-group__scroll-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--flow-ui-spacing-x-large);
+  }
+
+  /* Make tab panels take up full height */
+  ::slotted(flow-ui-tab-panel) {
+    height: 100%;
+  }
+
+  /*
+   * Top
+   */
+
+  .tab-group--top {
+    flex-direction: column;
+
+    /* Prevent horizontal tabs from wrapping label */
+    --flow-ui-tab-max-width: 100%;
+  }
+
+  .tab-group--top .tab-group__nav-container {
+    order: 1;
+  }
+
+  .tab-group--top .tab-group__track {
+    width: 100%;
+    bottom: 0;
+    border-bottom: solid var(--track-width) var(--track-color);
+  }
+
+  .tab-group--top .tab-group__nav-accessories {
+    padding-bottom: var(--track-width);
+  }
+
+  .tab-group--top .tab-group__nav-accessories--start {
+    padding-inline-start: var(--flow-ui-spacing-2x-small);
+  }
+
+  .tab-group--top .tab-group__nav-accessories--end {
+    padding-inline-end: var(--flow-ui-spacing-2x-small);
+  }
+
+  .tab-group--top .tab-group__nav {
+    display: flex;
+    overflow-x: auto;
+  }
+
+  .tab-group--top .tab-group__tabs {
+    flex: 1 1 auto;
+    position: relative;
+    flex-direction: row;
+    border-bottom: solid var(--track-width) var(--track-color);
+  }
+
+  .tab-group--top .tab-group__scroll-button {
+    border-bottom: solid var(--track-width) var(--track-color);
+  }
+
+  .tab-group--top .tab-group__indicator {
+    bottom: calc(-1 * var(--track-width));
+    border-bottom: solid var(--track-width) var(--indicator-color);
+  }
+
+  .tab-group--top .tab-group__body-wrapper {
+    order: 2;
+  }
+
+  .tab-group--top ::slotted(flow-ui-tab-panel) {
+    --padding: var(--flow-ui-spacing-medium) 0;
+  }
+
+  /*
+   * Bottom
+   */
+
+  .tab-group--bottom {
+    flex-direction: column;
+
+    /* Prevent horizontal tabs from wrapping label */
+    --flow-ui-tab-max-width: 100%;
+  }
+
+  .tab-group--bottom .tab-group__nav-container {
+    order: 2;
+  }
+
+  .tab-group--bottom .tab-group__track {
+    width: 100%;
+    top: 0;
+    border-top: solid var(--track-width) var(--track-color);
+  }
+
+  .tab-group--bottom .tab-group__nav-accessories {
+    padding-top: var(--track-width);
+  }
+
+  .tab-group--bottom .tab-group__nav-accessories--start {
+    padding-inline-start: var(--flow-ui-spacing-2x-small);
+  }
+
+  .tab-group--bottom .tab-group__nav-accessories--end {
+    padding-inline-end: var(--flow-ui-spacing-2x-small);
+  }
+
+  .tab-group--bottom .tab-group__nav {
+    overflow-x: auto;
+  }
+
+  .tab-group--bottom .tab-group__tabs {
+    flex: 1 1 auto;
+    position: relative;
+    flex-direction: row;
+    border-top: solid var(--track-width) var(--track-color);
+  }
+
+  .tab-group--bottom .tab-group__scroll-button {
+    border-top: solid var(--track-width) var(--track-color);
+  }
+
+  .tab-group--bottom .tab-group__indicator {
+    top: calc(-1 * var(--track-width));
+    border-top: solid var(--track-width) var(--indicator-color);
+  }
+
+  .tab-group--bottom .tab-group__body-wrapper {
+    order: 1;
+  }
+
+  .tab-group--bottom ::slotted(flow-ui-tab-panel) {
+    --padding: var(--flow-ui-spacing-medium) 0;
+  }
+
+  /*
+   * Start
+   */
+
+  .tab-group--start {
+    flex-direction: row;
+  }
+
+  .tab-group--start .tab-group__nav-container {
+    order: 1;
+    flex-direction: column;
+  }
+
+  .tab-group--start .tab-group__track {
+    height: 100%;
+    right: 0;
+    border-right: solid var(--track-width) var(--track-color);
+  }
+
+  .tab-group--start .tab-group__nav-accessories {
+    flex-direction: column;
+    padding-right: var(--track-width);
+  }
+
+  .tab-group--start .tab-group__nav-accessories--start {
+    padding-top: var(--flow-ui-spacing-2x-small);
+  }
+
+  .tab-group--start .tab-group__nav-accessories--end {
+    padding-bottom: var(--flow-ui-spacing-2x-small);
+  }
+
+  .tab-group--start .tab-group__nav {
+    overflow-y: auto;
+  }
+
+  .tab-group--start .tab-group__tabs {
+    flex: 0 0 auto;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .tab-group--start .tab-group__indicator {
+    right: 0;
+    border-right: solid var(--track-width) var(--indicator-color);
+  }
+
+  .tab-group--start.tab-group--rtl .tab-group__indicator {
+    right: auto;
+    left: calc(-1 * var(--track-width));
+  }
+
+  .tab-group--start .tab-group__body-wrapper {
+    flex: 1 1 auto;
+    order: 2;
+  }
+
+  .tab-group--start ::slotted(flow-ui-tab-panel) {
+    --padding: 0 var(--flow-ui-spacing-medium);
+  }
+
+  .tab-group--start .tab-group__scroll-button {
+    left: 0;
+    right: 0;
+    width: unset;
+    height: var(--flow-ui-spacing-x-large);
+  }
+
+  .tab-group--start .tab-group__scroll-button--start {
+    top: 0;
+    bottom: auto;
+  }
+
+  .tab-group--start .tab-group__scroll-button--end {
+    top: auto;
+    bottom: 0;
+  }
+
+  /*
+   * End
+   */
+
+  .tab-group--end {
+    flex-direction: row;
+  }
+
+  .tab-group--end .tab-group__nav-container {
+    order: 2;
+    flex-direction: column;
+  }
+
+  .tab-group--end .tab-group__track {
+    height: 100%;
+    left: 0;
+    border-left: solid var(--track-width) var(--track-color);
+  }
+
+  .tab-group--end .tab-group__nav-accessories {
+    flex-direction: column;
+    padding-left: var(--track-width);
+  }
+
+  .tab-group--end .tab-group__nav-accessories--start {
+    padding-top: var(--flow-ui-spacing-2x-small);
+  }
+
+  .tab-group--end .tab-group__nav-accessories--end {
+    padding-bottom: var(--flow-ui-spacing-2x-small);
+  }
+
+  .tab-group--end .tab-group__nav {
+    overflow-y: auto;
+  }
+
+  .tab-group--end .tab-group__tabs {
+    flex: 0 0 auto;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .tab-group--end .tab-group__indicator {
+    left: 0;
+    border-left: solid var(--track-width) var(--indicator-color);
+  }
+
+  .tab-group--end.tab-group--rtl .tab-group__indicator {
+    right: calc(-1 * var(--track-width));
+    left: auto;
+  }
+
+  .tab-group--end .tab-group__body-wrapper {
+    flex: 1 1 auto;
+    order: 1;
+  }
+
+  .tab-group--end ::slotted(flow-ui-tab-panel) {
+    --padding: 0 var(--flow-ui-spacing-medium);
+  }
+
+  .tab-group--end .tab-group__scroll-button {
+    left: 0;
+    right: 0;
+    width: unset;
+    height: var(--flow-ui-spacing-x-large);
+    border-left: solid var(--track-width) var(--track-color);
+  }
+
+  .tab-group--end .tab-group__scroll-button--start {
+    top: 0;
+    bottom: auto;
+  }
+
+  .tab-group--end .tab-group__scroll-button--end {
+    top: auto;
+    bottom: 0;
+  }
+`;
+
+export { styles as default };

package/dist/components/tab-panel/tab-panel.component.mjs

@@ -0,0 +1,72 @@
+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 { watch } from '../../internal/watch.mjs';
+import styles from './tab-panel.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;
+};
+let id = 0;
+class FlowUiTabPanel extends FlowRdfElement {
+  constructor() {
+    super(...arguments);
+    this.attrId = ++id;
+    this.componentId = `flow-ui-tab-panel-${this.attrId}`;
+    this.name = "";
+    this.active = false;
+    this.scrollable = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.active = boolean(this.active, true);
+    this.scrollable = boolean(this.scrollable, true);
+    this.id = this.id.length > 0 ? this.id : this.componentId;
+    this.setAttribute("role", "tabpanel");
+  }
+  handleActiveChange() {
+    this.setAttribute("aria-hidden", this.active ? "false" : "true");
+  }
+  render() {
+    return html`
+      <div
+        class=${classMap({
+      panel: true,
+      "panel--active": this.active,
+      "panel--scrollable": this.scrollable
+    })}
+      >
+        <div class="panel__body-wrapper">
+          <div part="body" class="panel__body">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+FlowUiTabPanel.styles = styles;
+__decorateClass([
+  property({ reflect: true })
+], FlowUiTabPanel.prototype, "name", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiTabPanel.prototype, "active", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiTabPanel.prototype, "scrollable", 2);
+__decorateClass([
+  watch("active")
+], FlowUiTabPanel.prototype, "handleActiveChange", 1);
+
+export { FlowUiTabPanel as default };

package/dist/components/tab-panel/tab-panel.mjs

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

package/dist/components/tab-panel/tab-panel.styles.mjs

@@ -0,0 +1,55 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles.mjs';
+
+const styles = css`
+  ${componentStyles}
+
+  :host {
+    display: none;
+    min-height: 0;
+
+    --padding: 0;
+    --background-color: var(--flow-ui-panel-background-color);
+    --color: var(--flow-ui-panel-color);
+  }
+
+  :host([active]) {
+    display: block;
+  }
+
+  .panel {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--background-color);
+    color: var(--color);
+  }
+
+  /* Body */
+  .panel__body-wrapper {
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  /* For scrollable panel - enable scroll and (optionally) add padding to scrollable content */
+  .panel--scrollable .panel__body-wrapper {
+    overflow-y: auto;
+  }
+
+  .panel--scrollable .panel__body {
+    padding: var(--padding);
+  }
+
+  /* For non-scrollable panel - fix body at 100% and disable scroll. Padding is added to wrapper */
+  .panel:not(.panel--scrollable) .panel__body-wrapper {
+    padding: var(--padding);
+  }
+
+  .panel:not(.panel--scrollable) .panel__body {
+    height: 100%;
+    overflow-y: hidden;
+  }
+`;
+
+export { styles as default };

package/dist/components/tag/tag.component.mjs

@@ -0,0 +1,94 @@
+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 { LocalizeController } from '../../utilities/localize.mjs';
+import FlowUiIconButton from '../icon-button/icon-button.component.mjs';
+import styles from './tag.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 FlowUiTag extends FlowRdfElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.variant = "neutral";
+    this.size = "medium";
+    this.pill = false;
+    this.removable = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.pill = boolean(this.pill, true);
+    this.removable = boolean(this.removable, true);
+  }
+  handleRemoveClick() {
+    this.emit("flow-ui-remove");
+  }
+  render() {
+    return html`
+      <span
+        part="base"
+        class=${classMap({
+      tag: true,
+      // Types
+      "tag--primary": this.variant === "primary",
+      "tag--secondary": this.variant === "secondary",
+      "tag--success": this.variant === "success",
+      "tag--neutral": this.variant === "neutral",
+      "tag--warning": this.variant === "warning",
+      "tag--danger": this.variant === "danger",
+      "tag--text": this.variant === "text",
+      // Sizes
+      "tag--small": this.size === "small",
+      "tag--medium": this.size === "medium",
+      "tag--large": this.size === "large",
+      // Modifiers
+      "tag--pill": this.pill,
+      "tag--removable": this.removable
+    })}
+      >
+        <slot part="content" class="tag__content"></slot>
+
+        ${this.removable ? html`
+              <flow-ui-icon-button
+                part="remove-button"
+                exportparts="base:remove-button__base"
+                name="x-lg"
+                library="system"
+                label=${this.localize.term("remove")}
+                class="tag__remove"
+                @click=${this.handleRemoveClick}
+                tabindex="-1"
+              ></flow-ui-icon-button>
+            ` : ""}
+      </span>
+    `;
+  }
+}
+FlowUiTag.styles = styles;
+FlowUiTag.dependencies = { "flow-icon-button": FlowUiIconButton };
+__decorateClass([
+  property({ reflect: true })
+], FlowUiTag.prototype, "variant", 2);
+__decorateClass([
+  property({ reflect: true })
+], FlowUiTag.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiTag.prototype, "pill", 2);
+__decorateClass([
+  property({ type: Boolean })
+], FlowUiTag.prototype, "removable", 2);
+
+export { FlowUiTag as default };

package/dist/components/tag/tag.mjs

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