@emuanalytics/flow-rdf-ui 4.0.5 → 4.0.6

package/dist/components/date-time-picker/date-time-picker.styles.mjs

@@ -0,0 +1,260 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles.mjs';
+import formControlStyles from '../../styles/form-control.styles.mjs';
+
+const styles = css`
+  ${componentStyles}
+  ${formControlStyles}
+
+  :host {
+    display: block;
+  }
+
+  /** The popup */
+  .datepicker {
+    flex: 1 1 auto;
+    display: inline-flex;
+    width: 100%;
+    position: relative;
+    vertical-align: middle;
+    --arrow-color: var(--flow-ui-color-neutral-300);
+  }
+
+  .datepicker::part(popup) {
+    z-index: var(--flow-ui-z-index-dropdown);
+  }
+
+  .datepicker[data-current-placement^='top']::part(popup) {
+    transform-origin: bottom;
+  }
+
+  .datepicker[data-current-placement^='bottom']::part(popup) {
+    transform-origin: top;
+  }
+
+  /* Combobox */
+  .datepicker__combobox {
+    flex: 1;
+    display: flex;
+    width: 100%;
+    min-width: 0;
+    position: relative;
+    align-items: center;
+    justify-content: start;
+    font-family: var(--flow-ui-input-font-family);
+    font-weight: var(--flow-ui-input-font-weight);
+    letter-spacing: var(--flow-ui-input-letter-spacing);
+    vertical-align: middle;
+    overflow: hidden;
+    cursor: pointer;
+    transition:
+      var(--flow-ui-transition-fast) color,
+      var(--flow-ui-transition-fast) border,
+      var(--flow-ui-transition-fast) box-shadow,
+      var(--flow-ui-transition-fast) background-color;
+  }
+
+  .datepicker__display-input {
+    position: relative;
+    width: 100%;
+    font: inherit;
+    border: none;
+    background: none;
+    color: var(--flow-ui-input-color);
+    cursor: inherit;
+    overflow: hidden;
+    padding: 0;
+    margin: 0;
+    -webkit-appearance: none;
+  }
+
+  .datepicker:not(.datepicker--disabled):hover .datepicker__display-input {
+    color: var(--flow-ui-input-color-hover);
+  }
+
+  .datepicker__display-input:focus {
+    outline: none;
+  }
+
+  .datepicker__value-input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: -1;
+  }
+
+  .datepicker--standard .datepicker__combobox {
+    background-color: var(--flow-ui-input-background-color);
+    border: solid var(--flow-ui-input-border-width) var(--flow-ui-input-border-color);
+  }
+
+  .datepicker--standard.datepicker--disabled .datepicker__combobox {
+    background-color: var(--flow-ui-input-background-color-disabled);
+    border-color: var(--flow-ui-input-border-color-disabled);
+    color: var(--flow-ui-input-color-disabled);
+    opacity: 0.5;
+    cursor: not-allowed;
+    outline: none;
+  }
+
+  .datepicker--standard:not(.datepicker--disabled).datepicker--open .datepicker__combobox,
+  .datepicker--standard:not(.datepicker--disabled).datepicker--focused .datepicker__combobox {
+    background-color: var(--flow-ui-input-background-color-focus);
+    border-color: var(--flow-ui-input-border-color-focus);
+    box-shadow: 0 0 0 var(--flow-ui-focus-ring-width) var(--flow-ui-input-focus-ring-color);
+  }
+
+  .datepicker--filled .datepicker__combobox {
+    border: none;
+    background-color: var(--flow-ui-input-filled-background-color);
+    color: var(--flow-ui-input-color);
+  }
+
+  .datepicker--filled:hover:not(.datepicker--disabled) .datepicker__combobox {
+    background-color: var(--flow-ui-input-filled-background-color-hover);
+  }
+
+  .datepicker--filled.datepicker--disabled .datepicker__combobox {
+    background-color: var(--flow-ui-input-filled-background-color-disabled);
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .datepicker--filled:not(.datepicker--disabled).datepicker--open .datepicker__combobox,
+  .datepicker--filled:not(.datepicker--disabled).datepicker--focused .datepicker__combobox {
+    background-color: var(--flow-ui-input-filled-background-color-focus);
+    outline: var(--flow-ui-focus-ring);
+  }
+
+  /* Sizes */
+  .datepicker--small .datepicker__combobox {
+    border-radius: var(--flow-ui-input-border-radius-small);
+    font-size: var(--flow-ui-input-font-size-small);
+    min-height: var(--flow-ui-input-height-small);
+    padding-block: 0;
+    padding-inline: var(--flow-ui-input-spacing-small);
+  }
+
+  .datepicker--small .datepicker__clear {
+    margin-inline-start: var(--flow-ui-input-spacing-small);
+  }
+
+  .datepicker--small .datepicker__prefix::slotted(*) {
+    margin-inline-end: var(--flow-ui-input-spacing-small);
+  }
+
+  .datepicker--medium .datepicker__combobox {
+    border-radius: var(--flow-ui-input-border-radius-medium);
+    font-size: var(--flow-ui-input-font-size-medium);
+    min-height: var(--flow-ui-input-height-medium);
+    padding-block: 0;
+    padding-inline: var(--flow-ui-input-spacing-medium);
+  }
+
+  .datepicker--medium .datepicker__clear {
+    margin-inline-start: var(--flow-ui-input-spacing-medium);
+  }
+
+  .datepicker--medium .datepicker__prefix::slotted(*) {
+    margin-inline-end: var(--flow-ui-input-spacing-medium);
+  }
+
+  .datepicker--large .datepicker__combobox {
+    border-radius: var(--flow-ui-input-border-radius-large);
+    font-size: var(--flow-ui-input-font-size-large);
+    min-height: var(--flow-ui-input-height-large);
+    padding-block: 0;
+    padding-inline: var(--flow-ui-input-spacing-large);
+  }
+
+  .datepicker--large .datepicker__clear {
+    margin-inline-start: var(--flow-ui-input-spacing-large);
+  }
+
+  .datepicker--large .datepicker__prefix::slotted(*) {
+    margin-inline-end: var(--flow-ui-input-spacing-large);
+  }
+
+  /* Pills */
+  .datepicker--pill.datepicker--small .datepicker__combobox {
+    border-radius: var(--flow-ui-input-height-small);
+  }
+
+  .datepicker--pill.datepicker--medium .datepicker__combobox {
+    border-radius: var(--flow-ui-input-height-medium);
+  }
+
+  .datepicker--pill.datepicker--large .datepicker__combobox {
+    border-radius: var(--flow-ui-input-height-large);
+  }
+
+  /* Prefix */
+  .datepicker__prefix {
+    flex: 0;
+    display: inline-flex;
+    align-items: center;
+    color: var(--flow-ui-input-placeholder-color);
+  }
+
+  /* Clear button */
+  .datepicker__clear {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: inherit;
+    color: var(--flow-ui-input-icon-color);
+    border: none;
+    background: none;
+    padding: 0;
+    transition: var(--flow-ui-transition-fast) color;
+    cursor: pointer;
+  }
+
+  .datepicker__clear:hover {
+    color: var(--flow-ui-input-icon-color-hover);
+  }
+
+  .datepicker__clear:focus {
+    outline: none;
+  }
+
+  /* Mode icon (calendar/clock) */
+  .datepicker__mode-icon {
+    color: var(--flow-ui-color-neutral-400);
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    margin-inline-start: var(--flow-ui-spacing-small);
+  }
+
+  .datepicker--open .datepicker__mode-icon {
+    color: var(--flow-ui-color-primary-500);
+  }
+
+  /* Calendar container */
+  .datepicker__calendar-container {
+    display: block;
+    position: relative;
+    font-family: var(--flow-ui-font-sans);
+    font-size: var(--flow-ui-font-size-medium);
+    font-weight: var(--flow-ui-font-weight-normal);
+    box-shadow: var(--flow-ui-shadow-large);
+    background: var(--flow-ui-panel-background-color);
+    border: solid var(--flow-ui-panel-border-width) var(--flow-ui-panel-border-color);
+    border-radius: var(--flow-ui-border-radius-medium);
+    padding: var(--flow-ui-spacing-x-small);
+    overflow: auto;
+    overscroll-behavior: none;
+
+    /* Make sure it adheres to the popup's auto size */
+    max-width: var(--auto-size-available-width);
+    max-height: var(--auto-size-available-height);
+  }
+`;
+
+export { styles as default };

package/dist/components/details/details.component.mjs

@@ -0,0 +1,194 @@
+import { html } from 'lit';
+import { query, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { stopAnimations, animateTo, shimKeyframesHeightAuto } from '../../internal/animate.mjs';
+import { boolean } from '../../internal/boolean.mjs';
+import { waitForEvent } from '../../internal/event.mjs';
+import FlowRdfElement from '../../internal/flow-ui-rdf-element.mjs';
+import { watch } from '../../internal/watch.mjs';
+import { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry.mjs';
+import { LocalizeController } from '../../utilities/localize.mjs';
+import styles from './details.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 FlowUiDetails extends FlowRdfElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.open = false;
+    this.disabled = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.open = boolean(this.open, true);
+    this.disabled = boolean(this.disabled, true);
+  }
+  firstUpdated() {
+    this.body.hidden = !this.open;
+    this.body.style.height = this.open ? "auto" : "0";
+  }
+  handleSummaryClick() {
+    if (!this.disabled) {
+      if (this.open) {
+        this.hide();
+      } else {
+        this.show();
+      }
+      this.header.focus();
+    }
+  }
+  handleSummaryKeyDown(event) {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      if (this.open) {
+        this.hide();
+      } else {
+        this.show();
+      }
+    }
+    if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
+      event.preventDefault();
+      this.hide();
+    }
+    if (event.key === "ArrowDown" || event.key === "ArrowRight") {
+      event.preventDefault();
+      this.show();
+    }
+  }
+  async handleOpenChange() {
+    if (this.open) {
+      const slShow = this.emit("flow-ui-show", { cancelable: true });
+      if (slShow.defaultPrevented) {
+        this.open = false;
+        return;
+      }
+      await stopAnimations(this.body);
+      this.body.hidden = false;
+      const { keyframes, options } = getAnimation(this, "details.show", { dir: this.localize.dir() });
+      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
+      this.body.style.height = "auto";
+      this.emit("flow-ui-after-show");
+    } else {
+      const slHide = this.emit("flow-ui-hide", { cancelable: true });
+      if (slHide.defaultPrevented) {
+        this.open = true;
+        return;
+      }
+      await stopAnimations(this.body);
+      const { keyframes, options } = getAnimation(this, "details.hide", { dir: this.localize.dir() });
+      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
+      this.body.hidden = true;
+      this.body.style.height = "auto";
+      this.emit("flow-ui-after-hide");
+    }
+  }
+  /** Shows the details. */
+  async show() {
+    if (this.open || this.disabled) {
+      return void 0;
+    }
+    this.open = true;
+    return waitForEvent(this, "flow-ui-after-show");
+  }
+  /** Hides the details */
+  async hide() {
+    if (!this.open || this.disabled) {
+      return void 0;
+    }
+    this.open = false;
+    return waitForEvent(this, "flow-ui-after-hide");
+  }
+  render() {
+    const isRtl = this.localize.dir() === "rtl";
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+      details: true,
+      "details--open": this.open,
+      "details--disabled": this.disabled,
+      "details--rtl": isRtl
+    })}
+      >
+        <div
+          part="header"
+          id="header"
+          class="details__header"
+          role="button"
+          aria-expanded=${this.open ? "true" : "false"}
+          aria-controls="content"
+          aria-disabled=${this.disabled ? "true" : "false"}
+          tabindex=${this.disabled ? "-1" : "0"}
+          @click=${this.handleSummaryClick}
+          @keydown=${this.handleSummaryKeyDown}
+        >
+          <slot name="summary" part="summary" class="details__summary">${this.summary}</slot>
+
+          <span part="summary-icon" class="details__summary-icon">
+            <slot name="expand-icon">
+              <flow-ui-icon library="system" name=${isRtl ? "chevron-left" : "chevron-right"}></flow-ui-icon>
+            </slot>
+            <slot name="collapse-icon">
+              <flow-ui-icon library="system" name=${isRtl ? "chevron-left" : "chevron-right"}></flow-ui-icon>
+            </slot>
+          </span>
+        </div>
+
+        <div class="details__body" role="region" aria-labelledby="header">
+          <slot part="content" id="content" class="details__content"></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+FlowUiDetails.styles = styles;
+__decorateClass([
+  query(".details")
+], FlowUiDetails.prototype, "details", 2);
+__decorateClass([
+  query(".details__header")
+], FlowUiDetails.prototype, "header", 2);
+__decorateClass([
+  query(".details__body")
+], FlowUiDetails.prototype, "body", 2);
+__decorateClass([
+  query(".details__expand-icon-slot")
+], FlowUiDetails.prototype, "expandIconSlot", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiDetails.prototype, "open", 2);
+__decorateClass([
+  property()
+], FlowUiDetails.prototype, "summary", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiDetails.prototype, "disabled", 2);
+__decorateClass([
+  watch("open", { waitUntilFirstUpdate: true })
+], FlowUiDetails.prototype, "handleOpenChange", 1);
+setDefaultAnimation("details.show", {
+  keyframes: [
+    { height: "0", opacity: "0" },
+    { height: "auto", opacity: "1" }
+  ],
+  options: { duration: 250, easing: "linear" }
+});
+setDefaultAnimation("details.hide", {
+  keyframes: [
+    { height: "auto", opacity: "1" },
+    { height: "0", opacity: "0" }
+  ],
+  options: { duration: 250, easing: "linear" }
+});
+
+export { FlowUiDetails as default };

package/dist/components/details/details.mjs

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

package/dist/components/details/details.styles.mjs

@@ -0,0 +1,85 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles.mjs';
+
+const styles = css`
+  ${componentStyles}
+
+  :host {
+    display: block;
+  }
+
+  .details {
+    border: solid 1px var(--flow-ui-color-neutral-200);
+    border-radius: var(--flow-ui-border-radius-medium);
+    background-color: var(--flow-ui-color-neutral-0);
+    overflow-anchor: none;
+  }
+
+  .details--disabled {
+    opacity: 0.5;
+  }
+
+  .details__header {
+    display: flex;
+    align-items: center;
+    border-radius: inherit;
+    padding: var(--flow-ui-spacing-medium);
+    user-select: none;
+    cursor: pointer;
+  }
+
+  .details__header:focus {
+    outline: none;
+  }
+
+  .details__header:focus-visible {
+    outline: var(--flow-ui-focus-ring);
+    outline-offset: calc(1px + var(--flow-ui-focus-ring-offset));
+  }
+
+  .details--disabled .details__header {
+    cursor: not-allowed;
+  }
+
+  .details--disabled .details__header:focus-visible {
+    outline: none;
+    box-shadow: none;
+  }
+
+  .details__summary {
+    flex: 1 1 auto;
+    display: flex;
+    align-items: center;
+  }
+
+  .details__summary-icon {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    transition: var(--flow-ui-transition-medium) rotate ease;
+  }
+
+  .details--open .details__summary-icon {
+    rotate: 90deg;
+  }
+
+  .details--open.details--rtl .details__summary-icon {
+    rotate: -90deg;
+  }
+
+  .details--open slot[name='expand-icon'],
+  .details:not(.details--open) slot[name='collapse-icon'] {
+    display: none;
+  }
+
+  .details__body {
+    overflow: hidden;
+  }
+
+  .details__content {
+    display: block;
+    padding: var(--flow-ui-spacing-medium);
+  }
+`;
+
+export { styles as default };