@emuanalytics/flow-rdf-ui 4.0.4 → 4.0.6

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

@@ -0,0 +1,76 @@
+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 { isStringFull } from '../../internal/type-checks.mjs';
+import { watch } from '../../internal/watch.mjs';
+import styles from './stepper-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 FlowUiStepperPanel extends FlowRdfElement {
+  constructor() {
+    super(...arguments);
+    this.attrId = ++id;
+    this.componentId = `flow-ui-stepper-panel-${this.attrId}`;
+    this.name = "";
+    this.title = "";
+    this.subTitle = "";
+    this.active = false;
+    this.complete = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.active = boolean(this.active, true);
+    this.complete = boolean(this.complete, true);
+    this.id = isStringFull(this.id) ? this.id : this.componentId;
+    this.setAttribute("role", "tabpanel");
+  }
+  handleStateChange() {
+    this.setAttribute("aria-hidden", this.active ? "false" : "true");
+  }
+  render() {
+    return html`
+      <slot
+        part="base"
+        class=${classMap({
+      "stepper-panel": true,
+      "stepper-panel--active": this.active,
+      "stepper-panel--complete": this.complete
+    })}
+      ></slot>
+    `;
+  }
+}
+FlowUiStepperPanel.styles = styles;
+__decorateClass([
+  property({ reflect: true })
+], FlowUiStepperPanel.prototype, "name", 2);
+__decorateClass([
+  property({ reflect: true })
+], FlowUiStepperPanel.prototype, "title", 2);
+__decorateClass([
+  property({ attribute: "sub-title", reflect: true })
+], FlowUiStepperPanel.prototype, "subTitle", 2);
+__decorateClass([
+  property({ reflect: true, type: Boolean })
+], FlowUiStepperPanel.prototype, "active", 2);
+__decorateClass([
+  property({ reflect: true, type: Boolean })
+], FlowUiStepperPanel.prototype, "complete", 2);
+__decorateClass([
+  watch("state")
+], FlowUiStepperPanel.prototype, "handleStateChange", 1);
+
+export { FlowUiStepperPanel as default };

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

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

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

@@ -0,0 +1,22 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles.mjs';
+
+const styles = css`
+  ${componentStyles}
+
+  :host {
+    --padding: 0;
+    display: none;
+  }
+
+  :host([active]) {
+    display: block;
+  }
+
+  .stepper-panel {
+    display: block;
+    padding: var(--padding);
+  }
+`;
+
+export { styles as default };

package/dist/components/switch/switch.component.mjs

@@ -0,0 +1,211 @@
+import { html } from 'lit';
+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 { live } from 'lit/directives/live.js';
+import { boolean } from '../../internal/boolean.mjs';
+import { defaultValue } from '../../internal/default-value.mjs';
+import { FlowRdfFormControl } from '../../internal/flow-ui-rdf-element.mjs';
+import { FormControlController } from '../../internal/form.mjs';
+import { watch } from '../../internal/watch.mjs';
+import styles from './switch.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 FlowUiSwitch extends FlowRdfFormControl {
+  constructor() {
+    super(...arguments);
+    this.formControlController = new FormControlController(this, {
+      value: (control) => control.checked ? control.value || "on" : void 0,
+      defaultValue: (control) => control.defaultChecked,
+      setValue: (control, checked) => control.checked = checked
+    });
+    this.hasFocus = false;
+    this.title = "";
+    this.name = "";
+    this.size = "medium";
+    this.disabled = false;
+    this.checked = false;
+    this.defaultChecked = false;
+    this.form = "";
+    this.required = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.checked = boolean(this.checked, true);
+    this.disabled = boolean(this.disabled, true);
+    this.required = boolean(this.required, true);
+  }
+  /** Gets the validity state object */
+  get validity() {
+    return this.input.validity;
+  }
+  /** Gets the validation message */
+  get validationMessage() {
+    return this.input.validationMessage;
+  }
+  firstUpdated() {
+    this.formControlController.updateValidity();
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    this.emit("flow-ui-blur");
+  }
+  handleInput() {
+    this.emit("flow-ui-input");
+  }
+  handleInvalid(event) {
+    this.formControlController.setValidity(false);
+    this.formControlController.emitInvalidEvent(event);
+  }
+  handleClick() {
+    this.checked = !this.checked;
+    this.emit("flow-ui-change");
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    this.emit("flow-ui-focus");
+  }
+  handleKeyDown(event) {
+    if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      this.checked = false;
+      this.emit("flow-ui-change");
+      this.emit("flow-ui-input");
+    }
+    if (event.key === "ArrowRight") {
+      event.preventDefault();
+      this.checked = true;
+      this.emit("flow-ui-change");
+      this.emit("flow-ui-input");
+    }
+  }
+  handleCheckedChange() {
+    this.input.checked = this.checked;
+    this.formControlController.updateValidity();
+  }
+  handleDisabledChange() {
+    this.formControlController.setValidity(true);
+  }
+  /** Simulates a click on the switch. */
+  click() {
+    this.input.click();
+  }
+  /** Sets focus on the switch. */
+  focus(options) {
+    this.input.focus(options);
+  }
+  /** Removes focus from the switch. */
+  blur() {
+    this.input.blur();
+  }
+  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
+  checkValidity() {
+    return this.input.checkValidity();
+  }
+  /** Gets the associated form, if one exists. */
+  getForm() {
+    return this.formControlController.getForm();
+  }
+  /** Checks for validity and shows the browser's validation message if the control is invalid. */
+  reportValidity() {
+    return this.input.reportValidity();
+  }
+  /** Sets a custom validation message. Pass an empty string to restore validity. */
+  setCustomValidity(message) {
+    this.input.setCustomValidity(message);
+    this.formControlController.updateValidity();
+  }
+  render() {
+    return html`
+      <label
+        part="base"
+        class=${classMap({
+      switch: true,
+      "switch--checked": this.checked,
+      "switch--disabled": this.disabled,
+      "switch--focused": this.hasFocus,
+      "switch--small": this.size === "small",
+      "switch--medium": this.size === "medium",
+      "switch--large": this.size === "large"
+    })}
+      >
+        <input
+          class="switch__input"
+          type="checkbox"
+          title=${this.title}
+          name=${this.name}
+          value=${ifDefined(this.value)}
+          .checked=${live(this.checked)}
+          .disabled=${this.disabled}
+          .required=${this.required}
+          role="switch"
+          aria-checked=${this.checked ? "true" : "false"}
+          @click=${this.handleClick}
+          @input=${this.handleInput}
+          @invalid=${this.handleInvalid}
+          @blur=${this.handleBlur}
+          @focus=${this.handleFocus}
+          @keydown=${this.handleKeyDown}
+        />
+
+        <span part="control" class="switch__control">
+          <span part="thumb" class="switch__thumb"></span>
+        </span>
+
+        <slot part="label" class="switch__label"></slot>
+      </label>
+    `;
+  }
+}
+FlowUiSwitch.styles = styles;
+__decorateClass([
+  query('input[type="checkbox"]')
+], FlowUiSwitch.prototype, "input", 2);
+__decorateClass([
+  state()
+], FlowUiSwitch.prototype, "hasFocus", 2);
+__decorateClass([
+  property()
+], FlowUiSwitch.prototype, "title", 2);
+__decorateClass([
+  property()
+], FlowUiSwitch.prototype, "name", 2);
+__decorateClass([
+  property()
+], FlowUiSwitch.prototype, "value", 2);
+__decorateClass([
+  property({ reflect: true })
+], FlowUiSwitch.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiSwitch.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiSwitch.prototype, "checked", 2);
+__decorateClass([
+  defaultValue("checked")
+], FlowUiSwitch.prototype, "defaultChecked", 2);
+__decorateClass([
+  property({ reflect: true })
+], FlowUiSwitch.prototype, "form", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiSwitch.prototype, "required", 2);
+__decorateClass([
+  watch("checked", { waitUntilFirstUpdate: true })
+], FlowUiSwitch.prototype, "handleCheckedChange", 1);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], FlowUiSwitch.prototype, "handleDisabledChange", 1);
+
+export { FlowUiSwitch as default };

package/dist/components/switch/switch.mjs

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

package/dist/components/switch/switch.styles.mjs

@@ -0,0 +1,166 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles.mjs';
+
+const styles = css`
+  ${componentStyles}
+
+  :host {
+    display: inline-block;
+  }
+
+  :host([size='small']) {
+    --height: var(--flow-ui-toggle-size-small);
+    --thumb-size: calc(var(--flow-ui-toggle-size-small) + 4px);
+    --width: calc(var(--height) * 2);
+
+    font-size: var(--flow-ui-input-font-size-small);
+  }
+
+  :host([size='medium']) {
+    --height: var(--flow-ui-toggle-size-medium);
+    --thumb-size: calc(var(--flow-ui-toggle-size-medium) + 4px);
+    --width: calc(var(--height) * 2);
+
+    font-size: var(--flow-ui-input-font-size-medium);
+  }
+
+  :host([size='large']) {
+    --height: var(--flow-ui-toggle-size-large);
+    --thumb-size: calc(var(--flow-ui-toggle-size-large) + 4px);
+    --width: calc(var(--height) * 2);
+
+    font-size: var(--flow-ui-input-font-size-large);
+  }
+
+  .switch {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    font-family: var(--flow-ui-input-font-family);
+    font-size: inherit;
+    font-weight: var(--flow-ui-input-font-weight);
+    color: var(--flow-ui-input-label-color);
+    vertical-align: middle;
+    cursor: pointer;
+  }
+
+  .switch__control {
+    flex: 0 0 auto;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--width);
+    height: var(--height);
+    background-color: var(--flow-ui-color-neutral-400);
+    border: solid var(--flow-ui-input-border-width) var(--flow-ui-color-neutral-400);
+    border-radius: var(--height);
+    transition: var(--flow-ui-transition-fast) border-color, var(--flow-ui-transition-fast) background-color;
+  }
+
+  .switch__control .switch__thumb {
+    width: var(--thumb-size);
+    height: var(--thumb-size);
+    background-color: var(--flow-ui-color-neutral-0);
+    border-radius: 50%;
+    border: solid var(--flow-ui-input-border-width) var(--flow-ui-color-neutral-400);
+    translate: calc((var(--width) - var(--height)) / -2);
+    transition: var(--flow-ui-transition-fast) translate ease, var(--flow-ui-transition-fast) background-color,
+      var(--flow-ui-transition-fast) border-color, var(--flow-ui-transition-fast) box-shadow;
+  }
+
+  .switch__input {
+    position: absolute;
+    opacity: 0;
+    padding: 0;
+    margin: 0;
+    pointer-events: none;
+  }
+
+  /* Hover */
+  .switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover {
+    background-color: var(--flow-ui-color-neutral-400);
+    border-color: var(--flow-ui-color-neutral-400);
+  }
+
+  .switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover .switch__thumb {
+    background-color: var(--flow-ui-color-neutral-0);
+    border-color: var(--flow-ui-color-neutral-400);
+  }
+
+  /* Focus */
+  .switch:not(.switch--checked):not(.switch--disabled) .switch__input:focus-visible ~ .switch__control {
+    background-color: var(--flow-ui-color-neutral-400);
+    border-color: var(--flow-ui-color-neutral-400);
+  }
+
+  .switch:not(.switch--checked):not(.switch--disabled) .switch__input:focus-visible ~ .switch__control .switch__thumb {
+    background-color: var(--flow-ui-color-neutral-0);
+    border-color: var(--flow-ui-color-primary-500);
+    outline: var(--flow-ui-focus-ring);
+    outline-offset: var(--flow-ui-focus-ring-offset);
+  }
+
+  /* Checked */
+  .switch--checked .switch__control {
+    background-color: var(--flow-ui-color-primary-500);
+    border-color: var(--flow-ui-color-primary-500);
+  }
+
+  .switch--checked .switch__control .switch__thumb {
+    background-color: var(--flow-ui-color-neutral-0);
+    border-color: var(--flow-ui-color-primary-500);
+    translate: calc((var(--width) - var(--height)) / 2);
+  }
+
+  /* Checked + hover */
+  .switch.switch--checked:not(.switch--disabled) .switch__control:hover {
+    background-color: var(--flow-ui-color-primary-500);
+    border-color: var(--flow-ui-color-primary-500);
+  }
+
+  .switch.switch--checked:not(.switch--disabled) .switch__control:hover .switch__thumb {
+    background-color: var(--flow-ui-color-neutral-0);
+    border-color: var(--flow-ui-color-primary-500);
+  }
+
+  /* Checked + focus */
+  .switch.switch--checked:not(.switch--disabled) .switch__input:focus-visible ~ .switch__control {
+    background-color: var(--flow-ui-color-primary-500);
+    border-color: var(--flow-ui-color-primary-500);
+  }
+
+  .switch.switch--checked:not(.switch--disabled) .switch__input:focus-visible ~ .switch__control .switch__thumb {
+    background-color: var(--flow-ui-color-neutral-0);
+    border-color: var(--flow-ui-color-primary-500);
+    outline: var(--flow-ui-focus-ring);
+    outline-offset: var(--flow-ui-focus-ring-offset);
+  }
+
+  /* Disabled */
+  .switch--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .switch__label {
+    display: inline-block;
+    line-height: var(--height);
+    margin-inline-start: 0.5em;
+    user-select: none;
+  }
+
+  :host([required]) .switch__label::after {
+    content: var(--flow-ui-input-required-content);
+    margin-inline-start: var(--flow-ui-input-required-content-offset);
+  }
+
+  @media (forced-colors: active) {
+    .switch.switch--checked:not(.switch--disabled) .switch__control:hover .switch__thumb,
+    .switch--checked .switch__control .switch__thumb {
+      background-color: ButtonText;
+    }
+  }
+`;
+
+export { styles as default };

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

@@ -0,0 +1,159 @@
+import { html } from 'lit';
+import { query, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { boolean } from '../../internal/boolean.mjs';
+import FlowRdfElement from '../../internal/flow-ui-rdf-element.mjs';
+import { HasSlotController } from '../../internal/slot.mjs';
+import { watch } from '../../internal/watch.mjs';
+import { LocalizeController } from '../../utilities/localize.mjs';
+import styles from './tab.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 FlowUiTab extends FlowRdfElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.hasSlotController = new HasSlotController(this, "[default]", "icon");
+    this.attrId = ++id;
+    this.componentId = `flow-ui-tab-${this.attrId}`;
+    this.panel = "";
+    this.active = false;
+    this.iconOnly = false;
+    this.closable = false;
+    this.disabled = false;
+    this.tooltipPlacement = "top";
+    this.tooltipDistance = -4;
+    this.tooltipSkidding = 0;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.active = boolean(this.active, true);
+    this.disabled = boolean(this.disabled, true);
+    this.iconOnly = boolean(this.iconOnly, true);
+    this.closable = boolean(this.closable, true);
+    this.setAttribute("role", "tab");
+  }
+  handleCloseClick(event) {
+    event.stopPropagation();
+    this.emit("flow-ui-close");
+  }
+  handleActiveChange() {
+    this.setAttribute("aria-selected", this.active ? "true" : "false");
+  }
+  handleDisabledChange() {
+    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+  }
+  /** Sets focus to the tab. */
+  focus(options) {
+    this.tab.focus(options);
+  }
+  /** Removes focus from the tab. */
+  blur() {
+    this.tab.blur();
+  }
+  render() {
+    this.id = this.id.length > 0 ? this.id : this.componentId;
+    const hasIcon = this.hasSlotController.test("icon");
+    const tabTemplate = html`
+      <div
+        part="base"
+        class=${classMap({
+      tab: true,
+      "tab--active": this.active,
+      "tab--closable": this.closable,
+      "tab--disabled": this.disabled
+    })}
+        tabindex=${this.disabled ? "-1" : "0"}
+      >
+        <div class="tab__label-wrapper">
+          ${hasIcon ? html`
+                <div class="tab__icon" part="icon"><slot name="icon"></slot></div>
+              ` : ""}
+          ${this.iconOnly ? "" : html`
+                <div class="tab__label" part="label">
+                  <slot></slot>
+                </div>
+              `}
+        </div>
+        ${this.closable ? html`
+              <flow-ui-icon-button
+                part="close-button"
+                exportparts="base:close-button__base"
+                name="x-lg"
+                library="system"
+                label=${this.localize.term("close")}
+                class="tab__close-button"
+                @click=${this.handleCloseClick}
+                tabindex="-1"
+              ></flow-ui-icon-button>
+            ` : ""}
+      </div>
+    `;
+    if (this.iconOnly) {
+      return html`
+        <flow-ui-tooltip
+          class=${classMap({
+        tab__tooltip: true
+      })}
+          hoist
+          placement=${ifDefined(this.tooltipPlacement)}
+          distance=${ifDefined(this.tooltipDistance)}
+          skidding=${ifDefined(this.tooltipSkidding)}
+        >
+          ${tabTemplate}
+          <slot slot="content"></slot>
+        </flow-ui-tooltip>
+      `;
+    } else {
+      return tabTemplate;
+    }
+  }
+}
+FlowUiTab.styles = styles;
+__decorateClass([
+  query(".tab")
+], FlowUiTab.prototype, "tab", 2);
+__decorateClass([
+  property({ reflect: true })
+], FlowUiTab.prototype, "panel", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiTab.prototype, "active", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "icon-only" })
+], FlowUiTab.prototype, "iconOnly", 2);
+__decorateClass([
+  property({ type: Boolean })
+], FlowUiTab.prototype, "closable", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiTab.prototype, "disabled", 2);
+__decorateClass([
+  property({ attribute: "tooltip-placement" })
+], FlowUiTab.prototype, "tooltipPlacement", 2);
+__decorateClass([
+  property({ attribute: "tooltip-distance", type: Number })
+], FlowUiTab.prototype, "tooltipDistance", 2);
+__decorateClass([
+  property({ attribute: "tooltip-skidding", type: Number })
+], FlowUiTab.prototype, "tooltipSkidding", 2);
+__decorateClass([
+  watch("active")
+], FlowUiTab.prototype, "handleActiveChange", 1);
+__decorateClass([
+  watch("disabled")
+], FlowUiTab.prototype, "handleDisabledChange", 1);
+
+export { FlowUiTab as default };

package/dist/components/tab/tab.mjs

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