@emuanalytics/flow-rdf-ui 4.0.5 → 4.0.6

package/dist/components/tag/tag.styles.mjs

@@ -0,0 +1,130 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles.mjs';
+
+const styles = css`
+  ${componentStyles}
+
+  :host {
+    display: inline-block;
+  }
+
+  .tag {
+    display: flex;
+    align-items: center;
+    border: solid 1px;
+    line-height: 1;
+    white-space: nowrap;
+    user-select: none;
+  }
+
+  .tag__remove::part(base) {
+    color: inherit;
+    padding: 0;
+  }
+
+  /*
+   * Variant modifiers
+   */
+
+  .tag--primary {
+    background-color: var(--flow-ui-color-primary-50);
+    border-color: var(--flow-ui-color-primary-200);
+    color: var(--flow-ui-color-primary-800);
+  }
+
+  .tag--primary:active > flow-ui-icon-button {
+    color: var(--flow-ui-color-primary-500);
+  }
+
+  .tag--secondary {
+    background-color: var(--flow-ui-color-secondary-50);
+    border-color: var(--flow-ui-color-secondary-200);
+    color: var(--flow-ui-color-primary-800);
+  }
+
+  .tag--secondary:active > flow-ui-icon-button {
+    color: var(--flow-ui-color-secondary-500);
+  }
+
+  .tag--success {
+    background-color: var(--flow-ui-color-success-50);
+    border-color: var(--flow-ui-color-success-200);
+    color: var(--flow-ui-color-success-800);
+  }
+
+  .tag--success:active > flow-ui-icon-button {
+    color: var(--flow-ui-color-success-600);
+  }
+
+  .tag--neutral {
+    background-color: var(--flow-ui-color-neutral-50);
+    border-color: var(--flow-ui-color-neutral-200);
+    color: var(--flow-ui-color-neutral-800);
+  }
+
+  .tag--neutral:active > flow-ui-icon-button {
+    color: var(--flow-ui-color-neutral-600);
+  }
+
+  .tag--warning {
+    background-color: var(--flow-ui-color-warning-50);
+    border-color: var(--flow-ui-color-warning-200);
+    color: var(--flow-ui-color-warning-800);
+  }
+
+  .tag--warning:active > flow-ui-icon-button {
+    color: var(--flow-ui-color-warning-600);
+  }
+
+  .tag--danger {
+    background-color: var(--flow-ui-color-danger-50);
+    border-color: var(--flow-ui-color-danger-200);
+    color: var(--flow-ui-color-danger-800);
+  }
+
+  .tag--danger:active > flow-ui-icon-button {
+    color: var(--flow-ui-color-danger-600);
+  }
+
+  /*
+   * Size modifiers
+   */
+
+  .tag--small {
+    font-size: var(--flow-ui-button-font-size-small);
+    height: calc(var(--flow-ui-input-height-small) * 0.8);
+    line-height: calc(var(--flow-ui-input-height-small) - var(--flow-ui-input-border-width) * 2);
+    border-radius: var(--flow-ui-input-border-radius-small);
+    padding: 0 var(--flow-ui-spacing-x-small);
+  }
+
+  .tag--medium {
+    font-size: var(--flow-ui-button-font-size-medium);
+    height: calc(var(--flow-ui-input-height-medium) * 0.8);
+    line-height: calc(var(--flow-ui-input-height-medium) - var(--flow-ui-input-border-width) * 2);
+    border-radius: var(--flow-ui-input-border-radius-medium);
+    padding: 0 var(--flow-ui-spacing-small);
+  }
+
+  .tag--large {
+    font-size: var(--flow-ui-button-font-size-large);
+    height: calc(var(--flow-ui-input-height-large) * 0.8);
+    line-height: calc(var(--flow-ui-input-height-large) - var(--flow-ui-input-border-width) * 2);
+    border-radius: var(--flow-ui-input-border-radius-large);
+    padding: 0 var(--flow-ui-spacing-medium);
+  }
+
+  .tag__remove {
+    margin-inline-start: var(--flow-ui-spacing-x-small);
+  }
+
+  /*
+   * Pill modifier
+   */
+
+  .tag--pill {
+    border-radius: var(--flow-ui-border-radius-pill);
+  }
+`;
+
+export { styles as default };

package/dist/components/textarea/textarea.component.mjs

@@ -0,0 +1,359 @@
+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 { HasSlotController } from '../../internal/slot.mjs';
+import { watch } from '../../internal/watch.mjs';
+import styles from './textarea.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 FlowUiTextarea 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.name = "";
+    this.value = "";
+    this.size = "medium";
+    this.filled = false;
+    this.label = "";
+    this.helpText = "";
+    this.placeholder = "";
+    this.rows = 4;
+    this.resize = "vertical";
+    this.disabled = false;
+    this.readonly = false;
+    this.form = "";
+    this.required = false;
+    this.spellcheck = true;
+    this.defaultValue = "";
+  }
+  /** Gets the validity state object */
+  get validity() {
+    return this.input.validity;
+  }
+  /** Gets the validation message */
+  get validationMessage() {
+    return this.input.validationMessage;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.filled = boolean(this.filled, true);
+    this.disabled = boolean(this.disabled, true);
+    this.readonly = boolean(this.readonly, true);
+    this.required = boolean(this.required, true);
+    this.autofocus = boolean(this.autofocus, true);
+    this.resizeObserver = new ResizeObserver(() => this.setTextareaHeight());
+    this.updateComplete.then(() => {
+      this.setTextareaHeight();
+      this.resizeObserver.observe(this.input);
+    });
+  }
+  firstUpdated() {
+    this.formControlController.updateValidity();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.resizeObserver.unobserve(this.input);
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    this.emit("flow-ui-blur");
+  }
+  handleChange() {
+    this.value = this.input.value;
+    this.setTextareaHeight();
+    this.emit("flow-ui-change");
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    this.emit("flow-ui-focus");
+  }
+  handleInput() {
+    this.value = this.input.value;
+    this.emit("flow-ui-input");
+  }
+  handleInvalid(event) {
+    this.formControlController.setValidity(false);
+    this.formControlController.emitInvalidEvent(event);
+  }
+  setTextareaHeight() {
+    if (this.resize === "auto") {
+      this.input.style.height = "auto";
+      this.input.style.height = `${this.input.scrollHeight}px`;
+    } else {
+      this.input.style.height = void 0;
+    }
+  }
+  handleDisabledChange() {
+    this.formControlController.setValidity(this.disabled);
+  }
+  handleRowsChange() {
+    this.setTextareaHeight();
+  }
+  async handleValueChange() {
+    await this.updateComplete;
+    this.formControlController.updateValidity();
+    this.setTextareaHeight();
+  }
+  /** Sets focus on the textarea. */
+  focus(options) {
+    this.input.focus(options);
+  }
+  /** Removes focus from the textarea. */
+  blur() {
+    this.input.blur();
+  }
+  /** Selects all the text in the textarea. */
+  select() {
+    this.input.select();
+  }
+  /** Gets or sets the textarea's scroll position. */
+  scrollPosition(position) {
+    if (position) {
+      if (typeof position.top === "number")
+        this.input.scrollTop = position.top;
+      if (typeof position.left === "number")
+        this.input.scrollLeft = position.left;
+      return void 0;
+    }
+    return {
+      top: this.input.scrollTop,
+      left: this.input.scrollTop
+    };
+  }
+  /** Sets the start and end positions of the text selection (0-based). */
+  setSelectionRange(selectionStart, selectionEnd, selectionDirection = "none") {
+    this.input.setSelectionRange(selectionStart, selectionEnd, selectionDirection);
+  }
+  /** Replaces a range of text with a new string. */
+  setRangeText(replacement, start, end, selectMode) {
+    this.input.setRangeText(replacement, start, end, selectMode);
+    if (this.value !== this.input.value) {
+      this.value = this.input.value;
+    }
+    if (this.value !== this.input.value) {
+      this.value = this.input.value;
+      this.setTextareaHeight();
+    }
+  }
+  /** 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--has-label": hasLabel,
+      "form-control--has-help-text": hasHelpText
+    })}
+      >
+        <label
+          part="form-control-label"
+          class="form-control__label"
+          for="input"
+          aria-hidden=${hasLabel ? "false" : "true"}
+        >
+          <slot name="label">${this.label}</slot>
+        </label>
+
+        <div part="form-control-input" class="form-control-input">
+          <div
+            part="base"
+            class=${classMap({
+      textarea: true,
+      "textarea--small": this.size === "small",
+      "textarea--medium": this.size === "medium",
+      "textarea--large": this.size === "large",
+      "textarea--standard": !this.filled,
+      "textarea--filled": this.filled,
+      "textarea--disabled": this.disabled,
+      "textarea--focused": this.hasFocus,
+      "textarea--empty": !this.value,
+      "textarea--resize-none": this.resize === "none",
+      "textarea--resize-vertical": this.resize === "vertical",
+      "textarea--resize-auto": this.resize === "auto"
+    })}
+          >
+            <textarea
+              part="textarea"
+              id="input"
+              class="textarea__control"
+              title=${this.title}
+              name=${ifDefined(this.name)}
+              .value=${live(this.value)}
+              ?disabled=${this.disabled}
+              ?readonly=${this.readonly}
+              ?required=${this.required}
+              placeholder=${ifDefined(this.placeholder)}
+              rows=${ifDefined(this.rows)}
+              minlength=${ifDefined(this.minlength)}
+              maxlength=${ifDefined(this.maxlength)}
+              autocapitalize=${ifDefined(this.autocapitalize)}
+              autocorrect=${ifDefined(this.autocorrect)}
+              ?autofocus=${this.autofocus}
+              spellcheck=${ifDefined(this.spellcheck)}
+              enterkeyhint=${ifDefined(this.enterkeyhint)}
+              inputmode=${ifDefined(this.inputmode)}
+              aria-describedby="help-text"
+              @change=${this.handleChange}
+              @input=${this.handleInput}
+              @invalid=${this.handleInvalid}
+              @focus=${this.handleFocus}
+              @blur=${this.handleBlur}
+            ></textarea>
+          </div>
+        </div>
+
+        <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>
+    `;
+  }
+}
+FlowUiTextarea.styles = styles;
+__decorateClass([
+  query(".textarea__control")
+], FlowUiTextarea.prototype, "input", 2);
+__decorateClass([
+  state()
+], FlowUiTextarea.prototype, "hasFocus", 2);
+__decorateClass([
+  property()
+], FlowUiTextarea.prototype, "title", 2);
+__decorateClass([
+  property()
+], FlowUiTextarea.prototype, "name", 2);
+__decorateClass([
+  property()
+], FlowUiTextarea.prototype, "value", 2);
+__decorateClass([
+  property({ reflect: true })
+], FlowUiTextarea.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiTextarea.prototype, "filled", 2);
+__decorateClass([
+  property()
+], FlowUiTextarea.prototype, "label", 2);
+__decorateClass([
+  property({ attribute: "help-text" })
+], FlowUiTextarea.prototype, "helpText", 2);
+__decorateClass([
+  property()
+], FlowUiTextarea.prototype, "placeholder", 2);
+__decorateClass([
+  property({ type: Number })
+], FlowUiTextarea.prototype, "rows", 2);
+__decorateClass([
+  property()
+], FlowUiTextarea.prototype, "resize", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiTextarea.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiTextarea.prototype, "readonly", 2);
+__decorateClass([
+  property({ reflect: true })
+], FlowUiTextarea.prototype, "form", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiTextarea.prototype, "required", 2);
+__decorateClass([
+  property({ type: Number })
+], FlowUiTextarea.prototype, "minlength", 2);
+__decorateClass([
+  property({ type: Number })
+], FlowUiTextarea.prototype, "maxlength", 2);
+__decorateClass([
+  property()
+], FlowUiTextarea.prototype, "autocapitalize", 2);
+__decorateClass([
+  property()
+], FlowUiTextarea.prototype, "autocorrect", 2);
+__decorateClass([
+  property()
+], FlowUiTextarea.prototype, "autocomplete", 2);
+__decorateClass([
+  property({ type: Boolean })
+], FlowUiTextarea.prototype, "autofocus", 2);
+__decorateClass([
+  property()
+], FlowUiTextarea.prototype, "enterkeyhint", 2);
+__decorateClass([
+  property({
+    type: Boolean,
+    converter: {
+      // Allow "true|false" attribute values but keep the property boolean
+      fromAttribute: (value) => boolean(value),
+      toAttribute: (value) => value ? "true" : "false"
+    }
+  })
+], FlowUiTextarea.prototype, "spellcheck", 2);
+__decorateClass([
+  property()
+], FlowUiTextarea.prototype, "inputmode", 2);
+__decorateClass([
+  defaultValue()
+], FlowUiTextarea.prototype, "defaultValue", 2);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], FlowUiTextarea.prototype, "handleDisabledChange", 1);
+__decorateClass([
+  watch("rows", { waitUntilFirstUpdate: true })
+], FlowUiTextarea.prototype, "handleRowsChange", 1);
+__decorateClass([
+  watch("value", { waitUntilFirstUpdate: true })
+], FlowUiTextarea.prototype, "handleValueChange", 1);
+
+export { FlowUiTextarea as default };

package/dist/components/textarea/textarea.mjs

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

package/dist/components/textarea/textarea.styles.mjs

@@ -0,0 +1,171 @@
+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;
+  }
+
+  .textarea {
+    display: flex;
+    align-items: center;
+    position: relative;
+    width: 100%;
+    font-family: var(--flow-ui-input-font-family);
+    font-weight: var(--flow-ui-input-font-weight);
+    line-height: var(--flow-ui-line-height-normal);
+    letter-spacing: var(--flow-ui-input-letter-spacing);
+    vertical-align: middle;
+    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;
+    cursor: text;
+  }
+
+  /* Standard textareas */
+  .textarea--standard {
+    background-color: var(--flow-ui-input-background-color);
+    border: solid var(--flow-ui-input-border-width) var(--flow-ui-input-border-color);
+  }
+
+  .textarea--standard:hover:not(.textarea--disabled) {
+    background-color: var(--flow-ui-input-background-color-hover);
+    border-color: var(--flow-ui-input-border-color-hover);
+  }
+  .textarea--standard:hover:not(.textarea--disabled) .textarea__control {
+    color: var(--flow-ui-input-color-hover);
+  }
+
+  .textarea--standard.textarea--focused:not(.textarea--disabled) {
+    background-color: var(--flow-ui-input-background-color-focus);
+    border-color: var(--flow-ui-input-border-color-focus);
+    color: var(--flow-ui-input-color-focus);
+    box-shadow: 0 0 0 var(--flow-ui-focus-ring-width) var(--flow-ui-input-focus-ring-color);
+  }
+
+  .textarea--standard.textarea--focused:not(.textarea--disabled) .textarea__control {
+    color: var(--flow-ui-input-color-focus);
+  }
+
+  .textarea--standard.textarea--disabled {
+    background-color: var(--flow-ui-input-background-color-disabled);
+    border-color: var(--flow-ui-input-border-color-disabled);
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .textarea--standard.textarea--disabled .textarea__control {
+    color: var(--flow-ui-input-color-disabled);
+  }
+
+  .textarea--standard.textarea--disabled .textarea__control::placeholder {
+    color: var(--flow-ui-input-placeholder-color-disabled);
+  }
+
+  /* Filled textareas */
+  .textarea--filled {
+    border: none;
+    background-color: var(--flow-ui-input-filled-background-color);
+    color: var(--flow-ui-input-color);
+  }
+
+  .textarea--filled:hover:not(.textarea--disabled) {
+    background-color: var(--flow-ui-input-filled-background-color-hover);
+  }
+
+  .textarea--filled.textarea--focused:not(.textarea--disabled) {
+    background-color: var(--flow-ui-input-filled-background-color-focus);
+    outline: var(--flow-ui-focus-ring);
+    outline-offset: var(--flow-ui-focus-ring-offset);
+  }
+
+  .textarea--filled.textarea--disabled {
+    background-color: var(--flow-ui-input-filled-background-color-disabled);
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .textarea__control {
+    flex: 1 1 auto;
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    line-height: 1.4;
+    color: var(--flow-ui-input-color);
+    border: none;
+    background: none;
+    box-shadow: none;
+    cursor: inherit;
+    -webkit-appearance: none;
+  }
+
+  .textarea__control::-webkit-search-decoration,
+  .textarea__control::-webkit-search-cancel-button,
+  .textarea__control::-webkit-search-results-button,
+  .textarea__control::-webkit-search-results-decoration {
+    -webkit-appearance: none;
+  }
+
+  .textarea__control::placeholder {
+    color: var(--flow-ui-input-placeholder-color);
+    user-select: none;
+  }
+
+  .textarea__control:focus {
+    outline: none;
+  }
+
+  /*
+   * Size modifiers
+   */
+
+  .textarea--small {
+    border-radius: var(--flow-ui-input-border-radius-small);
+    font-size: var(--flow-ui-input-font-size-small);
+  }
+
+  .textarea--small .textarea__control {
+    padding: 0.5em var(--flow-ui-input-spacing-small);
+  }
+
+  .textarea--medium {
+    border-radius: var(--flow-ui-input-border-radius-medium);
+    font-size: var(--flow-ui-input-font-size-medium);
+  }
+
+  .textarea--medium .textarea__control {
+    padding: 0.5em var(--flow-ui-input-spacing-medium);
+  }
+
+  .textarea--large {
+    border-radius: var(--flow-ui-input-border-radius-large);
+    font-size: var(--flow-ui-input-font-size-large);
+  }
+
+  .textarea--large .textarea__control {
+    padding: 0.5em var(--flow-ui-input-spacing-large);
+  }
+
+  /*
+   * Resize types
+   */
+
+  .textarea--resize-none .textarea__control {
+    resize: none;
+  }
+
+  .textarea--resize-vertical .textarea__control {
+    resize: vertical;
+  }
+
+  .textarea--resize-auto .textarea__control {
+    height: auto;
+    resize: none;
+    overflow-y: hidden;
+  }
+`;
+
+export { styles as default };