@emuanalytics/flow-rdf-ui 4.0.18 → 4.1.0-preview.0

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

@@ -8,6 +8,8 @@ const styles = css`
     display: inline-block;
 
     --size: 3rem;
+    --background-color: var(--flow-ui-avatar-background-color, var(--flow-ui-color-neutral-600));
+    --color: var(--flow-ui-avatar-color, var(--flow-ui-color-neutral-200));
   }
 
   .avatar {
@@ -17,11 +19,11 @@ const styles = css`
     position: relative;
     width: var(--size);
     height: var(--size);
-    background-color: var(--flow-ui-color-neutral-400);
+    background-color: var(--background-color);
     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);
+    color: var(--color);
     user-select: none;
     vertical-align: middle;
   }

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

@@ -6,6 +6,8 @@ const styles = css`
 
   :host {
     display: inline-flex;
+    --color: var(--flow-ui-color-primary-contrast);
+    --background-color: var(--flow-ui-color-primary-500);
   }
 
   .badge {
@@ -22,37 +24,40 @@ const styles = css`
     padding: 0.35em 0.6em;
     user-select: none;
     cursor: inherit;
+
+    background-color: var(--background-color);
+    color: var(--color);
   }
 
   /* Variant modifiers */
-  .badge--primary {
-    background-color: var(--flow-ui-color-primary-500);
-    color: var(--flow-ui-color-neutral-0);
+  :host([variant='primary']) {
+    --color: var(--flow-ui-color-neutral-0);
+    --background-color: var(--flow-ui-color-primary-500);
   }
 
-  .badge--secondary {
-    background-color: var(--flow-ui-color-secondary-500);
-    color: var(--flow-ui-color-neutral-0);
+  :host([variant='secondary']) {
+    --color: var(--flow-ui-color-neutral-0);
+    --background-color: var(--flow-ui-color-secondary-500);
   }
 
-  .badge--success {
-    background-color: var(--flow-ui-color-success-600);
-    color: var(--flow-ui-color-neutral-0);
+  :host([variant='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);
+  :host([variant='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);
+  :host([variant='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);
+  :host([variant='danger']) {
+    --background-color: var(--flow-ui-color-danger-600);
+    --color: var(--flow-ui-color-neutral-0);
   }
 
   /* Pill modifier */

package/dist/components/base-control/base-control.component.mjs

@@ -0,0 +1,193 @@
+import { html, nothing } from 'lit';
+import { query, state, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { boolean } from '../../internal/boolean.mjs';
+import { FlowRdfFormControl } from '../../internal/flow-ui-rdf-element.mjs';
+import { FormControlController } from '../../internal/form.mjs';
+import { HasSlotController } from '../../internal/slot.mjs';
+import { watch } from '../../internal/watch.mjs';
+import formControlStyles from '../../styles/form-control.styles.mjs';
+import styles from './base-control.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 FlowUiBaseControl extends FlowRdfFormControl {
+  constructor() {
+    super(...arguments);
+    this.formControlController = new FormControlController(this, {
+      assumeInteractionOn: ["flow-ui-blur", "flow-ui-input"]
+    });
+    this.hasSlotController = new HasSlotController(this, "help-text", "label");
+    this.hasFocus = false;
+    this.title = "";
+    this.size = "medium";
+    this.filled = false;
+    this.pill = false;
+    this.label = "";
+    this.helpText = "";
+    this.disabled = false;
+    this.form = "";
+    this.required = false;
+    this.inline = false;
+    this.divider = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    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");
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    this.emit("flow-ui-focus");
+  }
+  handleDisabledChange() {
+    this.formControlController.setValidity(this.disabled);
+  }
+  /** Sets focus on the input. */
+  focus(options) {
+    this.input.focus(options);
+  }
+  /** Removes focus from the input. */
+  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() {
+    const hasLabelSlot = this.hasSlotController.test("label");
+    const hasHelpTextSlot = this.hasSlotController.test("help-text");
+    const hasLabel = this.label ? true : !!hasLabelSlot;
+    const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
+    return html`
+      <div
+        part="form-control"
+        class=${classMap({
+      "form-control": true,
+      "form-control--small": this.size === "small",
+      "form-control--medium": this.size === "medium",
+      "form-control--large": this.size === "large",
+      "form-control--inline": this.inline,
+      "form-control--disabled": this.disabled,
+      "form-control--focused": this.hasFocus,
+      "form-control--has-label": hasLabel,
+      "form-control--has-help-text": hasHelpText,
+      "form-control--has-divider": this.divider,
+      "form-control--filled": this.filled,
+      "form-control--pill": this.pill
+    })}
+      >
+        <label
+          part="form-control-label"
+          class="form-control__label"
+          for="input"
+          aria-hidden=${hasLabel ? "false" : "true"}
+        >
+          <slot name="label">${this.label}</slot>
+        </label>
+
+        <slot
+          name="help-text"
+          part="form-control-help-text"
+          id="help-text"
+          class="form-control__help-text"
+          aria-hidden=${hasHelpText ? "false" : "true"}
+        >
+          ${this.helpText}
+        </slot>
+
+        <div part="form-control-input" class=${classMap({
+      "form-control__input": true
+    })}>
+            <input class="input__control" placeholder="Enter text" ?disabled=${this.disabled} ?required=${this.required} @focus=${this.handleFocus} @blur=${this.handleBlur}></input>
+        </div>
+        ${this.divider ? this.renderDivider() : nothing}
+        </div>
+
+      </div>
+    `;
+  }
+}
+FlowUiBaseControl.styles = [formControlStyles, styles];
+__decorateClass([
+  query(".input__control")
+], FlowUiBaseControl.prototype, "input", 2);
+__decorateClass([
+  state()
+], FlowUiBaseControl.prototype, "hasFocus", 2);
+__decorateClass([
+  property()
+], FlowUiBaseControl.prototype, "title", 2);
+__decorateClass([
+  property({ reflect: true })
+], FlowUiBaseControl.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiBaseControl.prototype, "filled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiBaseControl.prototype, "pill", 2);
+__decorateClass([
+  property()
+], FlowUiBaseControl.prototype, "label", 2);
+__decorateClass([
+  property({ attribute: "help-text" })
+], FlowUiBaseControl.prototype, "helpText", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiBaseControl.prototype, "disabled", 2);
+__decorateClass([
+  property({ reflect: true })
+], FlowUiBaseControl.prototype, "form", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiBaseControl.prototype, "required", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiBaseControl.prototype, "inline", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiBaseControl.prototype, "divider", 2);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], FlowUiBaseControl.prototype, "handleDisabledChange", 1);
+
+export { FlowUiBaseControl as default };

package/dist/components/base-control/base-control.mjs

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

package/dist/components/base-control/base-control.styles.mjs

@@ -0,0 +1,39 @@
+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: inline-block;
+  }
+
+  .form-control__input {
+    padding-inline: var(--input-spacing);
+  }
+
+  .form-control__input input {
+    flex: 1;
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    height: 100%;
+    color: var(--input-color);
+    border: none;
+    background: none;
+    box-shadow: none;
+    padding: 0;
+    margin: 0;
+    cursor: inherit;
+    outline: none;
+    -webkit-appearance: none;
+  }
+
+  .form-control.form-control--inline input {
+    min-width: 15ch;
+  }
+`;
+
+export { styles as default };

package/dist/components/calendar/calendar.component.mjs

@@ -124,6 +124,8 @@ class FlowUiCalendar extends FlowRdfElement {
           @click=${() => this.stepDisplayDate({ month: -1 })}
         ></flow-ui-icon-button>
         <flow-ui-select
+          inline
+          sync="width"
           class="calendar__month-select calendar__header-select"
           value=${this._displayDate.month}
           @flow-ui-change=${this.handleHeaderSelectChange}
@@ -135,6 +137,8 @@ class FlowUiCalendar extends FlowRdfElement {
     )}
         </flow-ui-select>
         <flow-ui-select
+          inline
+          sync="width"
           class="calendar__year-select calendar__header-select"
           value=${this._displayDate.year}
           @flow-ui-change=${this.handleHeaderSelectChange}

package/dist/components/calendar/calendar.styles.mjs

@@ -92,15 +92,9 @@ const styles = css`
     background-color: var(--flow-ui-color-primary-500);
   }
 
-  .calendar__header-select::part(combobox) {
-    background-color: inherit;
-    border: none;
-    min-height: auto;
-    gap: var(--flow-ui-spacing-x-small);
-  }
-
-  .calendar__header-select::part(expand-icon) {
-    margin: 0;
+  .calendar__header {
+    justify-content: space-between;
+    padding-inline: var(--flow-ui-spacing-small);
   }
 
   .calendar__header-select::part(listbox) {

package/dist/components/checkbox/checkbox.component.mjs

@@ -10,6 +10,7 @@ import { FormControlController } from '../../internal/form.mjs';
 import { HasSlotController } from '../../internal/slot.mjs';
 import { watch } from '../../internal/watch.mjs';
 import styles from './checkbox.styles.mjs';
+import formControlStyles from '../../styles/form-control.styles.mjs';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -41,7 +42,6 @@ class FlowUiCheckbox extends FlowRdfFormControl {
     this.defaultChecked = false;
     this.form = "";
     this.required = false;
-    this.fullWidth = false;
   }
   connectedCallback() {
     super.connectedCallback();
@@ -49,7 +49,6 @@ class FlowUiCheckbox extends FlowRdfFormControl {
     this.indeterminate = boolean(this.indeterminate, true);
     this.disabled = boolean(this.disabled, true);
     this.required = boolean(this.required, true);
-    this.fullWidth = boolean(this.fullWidth, true);
   }
   /** Gets the validity state object */
   get validity() {
@@ -134,14 +133,7 @@ class FlowUiCheckbox extends FlowRdfFormControl {
       "checkbox--indeterminate": this.indeterminate,
       "checkbox--small": this.size === "small",
       "checkbox--medium": this.size === "medium",
-      "checkbox--large": this.size === "large",
-      "checkbox--primary": this.variant === "primary",
-      "checkbox--secondary": this.variant === "secondary",
-      "checkbox--success": this.variant === "success",
-      "checkbox--warning": this.variant === "warning",
-      "checkbox--danger": this.variant === "danger",
-      "checkbox--neutral": this.variant === "neutral",
-      "checkbox--full-width": this.fullWidth
+      "checkbox--large": this.size === "large"
     })}
       >
         <input
@@ -193,7 +185,7 @@ class FlowUiCheckbox extends FlowRdfFormControl {
     `;
   }
 }
-FlowUiCheckbox.styles = styles;
+FlowUiCheckbox.styles = [formControlStyles, styles];
 __decorateClass([
   query('input[type="checkbox"]')
 ], FlowUiCheckbox.prototype, "input", 2);
@@ -230,12 +222,6 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], FlowUiCheckbox.prototype, "required", 2);
-__decorateClass([
-  property()
-], FlowUiCheckbox.prototype, "variant", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, attribute: "full-width" })
-], FlowUiCheckbox.prototype, "fullWidth", 2);
 __decorateClass([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], FlowUiCheckbox.prototype, "handleDisabledChange", 1);

package/dist/components/checkbox/checkbox.styles.mjs

@@ -7,9 +7,8 @@ const styles = css`
   :host {
     display: inline-block;
 
-    --checkbox-color: var(--flow-ui-color-secondary-500);
-    --checkbox-check-color: var(--flow-ui-color-secondary-contrast);
-    --checkbox-hover-color: var(--flow-ui-color-secondary-400);
+    --checkbox-color: var(--flow-ui-checkbox-color, var(--flow-ui-color-primary-500));
+    --checkbox-check-color: var(--flow-ui-checkbox-check-color, var(--flow-ui-color-primary-contrast));
   }
 
   .checkbox {
@@ -39,54 +38,6 @@ const styles = css`
     font-size: var(--flow-ui-input-font-size-large);
   }
 
-  /* Color variants */
-  .checkbox--primary {
-    --checkbox-color: var(--flow-ui-color-primary-500);
-    --checkbox-hover-color: var(--flow-ui-color-primary-400);
-  }
-
-  .checkbox--secondary {
-    --checkbox-color: var(--flow-ui-color-secondary-500);
-    --checkbox-hover-color: var(--flow-ui-color-secondary-400);
-  }
-
-  .checkbox--success {
-    --checkbox-color: var(--flow-ui-color-success-500);
-    --checkbox-hover-color: var(--flow-ui-color-success-400);
-  }
-
-  .checkbox--warning {
-    --checkbox-color: var(--flow-ui-color-warning-500);
-    --checkbox-hover-color: var(--flow-ui-color-warning-400);
-  }
-
-  .checkbox--danger {
-    --checkbox-color: var(--flow-ui-color-danger-500);
-    --checkbox-hover-color: var(--flow-ui-color-danger-400);
-  }
-
-  .checkbox--neutral {
-    --checkbox-color: var(--flow-ui-color-neutral-500);
-    --checkbox-hover-color: var(--flow-ui-color-neutral-400);
-  }
-
-  /* Alternative 'full-width' style */
-  :host([full-width]) {
-    display: block;
-    margin-top: var(--flow-ui-spacing-small);
-  }
-
-  .checkbox--full-width {
-    display: flex;
-    flex-direction: row-reverse;
-    align-items: center;
-  }
-
-  .checkbox--full-width .checkbox__label {
-    flex: 1;
-    margin: 0;
-  }
-
   .checkbox__control {
     flex: 0 0 auto;
     position: relative;
@@ -140,13 +91,6 @@ const styles = css`
     background-color: var(--checkbox-color);
   }
 
-  /* Checked/indeterminate + hover */
-  .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,
-  .checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__control:hover {
-    border-color: var(--checkbox-hover-color);
-    background-color: var(--checkbox-hover-color);
-  }
-
   /* Checked/indeterminate + focus */
   .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__input:focus-visible ~ .checkbox__control,
   .checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__input:focus-visible ~ .checkbox__control {