@refinitiv-ui/elements 6.14.2 → 6.15.0

package/lib/select/index.js

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { ControlElement, FocusedPropertyKey, css, html } from '@refinitiv-ui/core';
+import { FocusedPropertyKey, FormFieldElement, css, html, nothing } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { createRef, ref } from '@refinitiv-ui/core/directives/ref.js';
@@ -21,6 +21,12 @@ const observerOptions = {
     characterData: true,
     attributeFilter: ['label', 'value', 'selected', 'disabled', 'readonly']
 };
+// the same event listener options should be used with both addEventListener() & removeEventListener()
+// https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener#matching_event_listeners_for_removal
+const eventListenerOptions = {
+    /* need this for IE11, otherwise the event is not removed */ capture: true,
+    passive: true
+};
 const LABEL_SEPARATOR = ', '; // TODO: for multiselect
 const POPUP_POSITION = ['bottom-start', 'top-start'];
 const KEY_SEARCH_DEBOUNCER = 300;
@@ -38,13 +44,21 @@ var Navigation;
  * @attr {boolean} disabled - Set disabled state
  * @prop {boolean} [disabled=false] - Set disabled state
  *
+ * @attr {string} placeholder - Set placeholder text
+ * @prop {string} [placeholder=""] - Set placeholder text
+ *
+ * @attr {boolean} error - Set error state
+ * @prop {boolean} [error=false] - Set error state
+ *
+ * @attr {boolean} warning - Set warning state
+ * @prop {boolean} [warning=false] - Set warning state
+ *
  * @fires value-changed - Fired when the user commits a value change. The event is not triggered if `value` property is changed programmatically.
  * @fires opened-changed - Fired when the user opens or closes control's popup. The event is not triggered if `opened` property is changed programmatically.
  */
-let Select = class Select extends ControlElement {
+let Select = class Select extends FormFieldElement {
     constructor() {
         super(...arguments);
-        this.defaultRole = 'combobox';
         this.composer = new CollectionComposer([]);
         this._data = null;
         this.popupDynamicStyles = {}; /* set popup min-width based on select width or CSS vars */
@@ -54,22 +68,10 @@ let Select = class Select extends ControlElement {
         this.keySearchTerm = ''; /* used for quick search */
         this.keySearchThrottler = new TimeoutTaskRunner(KEY_SEARCH_DEBOUNCER);
         this.resizeThrottler = new AnimationTaskRunner();
-        /**
-         * Placeholder to display when no value is set
-         */
-        this.placeholder = '';
         /**
          * Toggles the opened state of the list
          */
         this.opened = false;
-        /**
-         * Set error state
-         */
-        this.error = false;
-        /**
-         * Set warning state
-         */
-        this.warning = false;
         /**
          * This variable is here to ensure that the value and data are in sync when data is set after the value.
          * This is developer error to use both, selected and value to control the selections.
@@ -145,6 +147,9 @@ let Select = class Select extends ControlElement {
         display: none;
       }
       #box {
+        outline: none;
+        width: 100%;
+        height: 100%;
         align-items: center;
         display: inline-flex;
         flex-flow: row nowrap;
@@ -167,19 +172,6 @@ let Select = class Select extends ControlElement {
         left: 0;
         cursor: pointer;
       }
-      #select {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        width: 100%;
-        height: 100%;
-        opacity: 0;
-        border: none;
-        padding: 0;
-        margin: 0;
-      }
     `;
     }
     /**
@@ -273,15 +265,6 @@ let Select = class Select extends ControlElement {
         }
         return this.selectedSlotItems.map((item) => this.getItemValue(item));
     }
-    /**
-     * Called when connected to DOM
-     * @returns {void}
-     */
-    connectedCallback() {
-        super.connectedCallback();
-        // Indicating that this select has a popup of type listbox
-        this.setAttribute('aria-haspopup', 'listbox');
-    }
     /**
      * Updates the element
      * @param changedProperties Properties that has changed
@@ -306,10 +289,6 @@ let Select = class Select extends ControlElement {
             else {
                 this.closing();
             }
-            this.setAttribute('aria-expanded', this.opened ? 'true' : 'false');
-        }
-        if (changedProperties.has('error')) {
-            this.setAttribute('aria-invalid', this.error ? 'true' : 'false');
         }
         super.update(changedProperties);
     }
@@ -483,22 +462,14 @@ let Select = class Select extends ControlElement {
     onPopupOpened({ target }) {
         this.scrollToSelected();
         this.setItemHighlight(this.getSelectedElements()[0]);
-        const eventOptions = {
-            capture: true,
-            passive: true
-        };
-        target?.addEventListener('scroll', this.onPopupScroll, eventOptions);
+        target?.addEventListener('scroll', this.onPopupScroll, eventListenerOptions);
     }
     /**
      * Run when popup gets closed
      * @returns {void}
      */
     onPopupClosed({ target }) {
-        const eventOptions = {
-            /* need this for IE11, otherwise the event is not removed */ capture: true,
-            passive: true
-        };
-        target?.removeEventListener('scroll', this.onPopupScroll, eventOptions);
+        target?.removeEventListener('scroll', this.onPopupScroll, eventListenerOptions);
         this.setItemHighlight();
         this.popupScrollTop = 0;
     }
@@ -877,17 +848,6 @@ let Select = class Select extends ControlElement {
     get labelTemplate() {
         return html `<div part="label" ${ref(this.labelRef)}>${this.labelText}</div>`;
     }
-    /**
-     * Edit template when select is not readonly or disabled
-     */
-    get editTemplate() {
-        if (!this.readonly && !this.disabled) {
-            return html `
-        <div id="trigger" @tapstart="${this.toggleOpened}"></div>
-        ${this.popupTemplate}
-      `;
-        }
-    }
     /**
      * Get default slot template
      */
@@ -901,37 +861,46 @@ let Select = class Select extends ControlElement {
         return html `${this.composer.queryItems(() => true).map((item) => this.toItem(item))}`;
     }
     /**
-     * Edit template when select is not readonly or disabled
-     */
-    get popupTemplate() {
-        if (this.lazyRendered) {
-            return html `<ef-overlay
-        ${ref(this.menuRef)}
-        tabindex="-1"
-        id="menu"
-        part="list"
-        role="listbox"
-        style=${styleMap(this.popupDynamicStyles)}
-        with-shadow
-        lock-position-target
-        .positionTarget=${this}
-        .position=${POPUP_POSITION}
-        ?opened=${this.opened}
-        @tap=${this.onPopupTap}
-        @mousemove=${this.onPopupMouseMove}
-        @keydown=${this.onPopupKeyDown}
-        @opened-changed="${this.onPopupOpenedChanged}"
-        @opened="${this.onPopupOpened}"
-        @refit=${this.onPopupRefit}
-        @closed="${this.onPopupClosed}"
-        >${this.hasDataItems() ? this.dataContent : this.slottedContent}</ef-overlay
-      >`;
-        }
-        else {
-            // This code is required because IE11 polyfill need items to be within a slot
-            // to make MutationObserver to observe items correctly
-            return html `<div style="display: none !important;"><slot></slot></div>`;
-        }
+     * `ef-items` template generated from slot or `data`
+     */
+    get itemsTemplate() {
+        return this.hasDataItems() ? this.dataContent : this.slottedContent;
+    }
+    /**
+     * Template of a listbox containing ef-item(s)
+     */
+    get listboxTemplate() {
+        return this.lazyRendered
+            ? html `<ef-overlay
+          ${ref(this.menuRef)}
+          tabindex="-1"
+          id="menu"
+          part="list"
+          role="listbox"
+          style=${styleMap(this.popupDynamicStyles)}
+          with-shadow
+          lock-position-target
+          .positionTarget=${this}
+          .position=${POPUP_POSITION}
+          ?opened=${this.opened}
+          @tap=${this.onPopupTap}
+          @mousemove=${this.onPopupMouseMove}
+          @keydown=${this.onPopupKeyDown}
+          @opened-changed="${this.onPopupOpenedChanged}"
+          @opened="${this.onPopupOpened}"
+          @refit=${this.onPopupRefit}
+          @closed="${this.onPopupClosed}"
+          >${this.itemsTemplate}</ef-overlay
+        >`
+            : // This code is required because IE11 polyfill need items to be within a slot
+                // to make MutationObserver to observe items correctly
+                html `<div style="display: none !important;"><slot></slot></div>`;
+    }
+    /**
+     * Area that allows select to be clickable and toggle between open and close
+     */
+    get triggerTemplate() {
+        return html ` <div id="trigger" @tapstart="${this.toggleOpened}"></div>`;
     }
     /**
      * A `TemplateResult` that will be used
@@ -939,11 +908,25 @@ let Select = class Select extends ControlElement {
      * @return Render template
      */
     render() {
-        return html ` <div id="box">
+        return html `<div
+        id="box"
+        tabindex="0"
+        role="combobox"
+        placeholder=${this.placeholder || nothing}
+        aria-haspopup="listbox"
+        aria-controls="menu"
+        aria-invalid=${this.error ? 'true' : 'false'}
+        aria-expanded=${this.opened ? 'true' : 'false'}
+        aria-required=${this.inputAriaRequired}
+        aria-label=${this.inputAriaLabel ?? nothing}
+        aria-description=${this.inputAriaDescription ?? nothing}
+      >
         <div id="text">${this.placeholderHidden() ? this.labelTemplate : this.placeholderTemplate}</div>
-        <ef-icon icon="down" part="icon"></ef-icon>
+        <ef-icon aria-hidden="true" icon="down" part="icon"></ef-icon>
       </div>
-      ${this.editTemplate}`;
+      ${!this.readonly && !this.disabled
+            ? html ` ${this.triggerTemplate} ${this.listboxTemplate} `
+            : nothing}`;
     }
 };
 __decorate([
@@ -952,18 +935,9 @@ __decorate([
 __decorate([
     property({ type: Array, attribute: false })
 ], Select.prototype, "labels", null);
-__decorate([
-    property({ type: String })
-], Select.prototype, "placeholder", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], Select.prototype, "opened", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], Select.prototype, "error", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], Select.prototype, "warning", void 0);
 __decorate([
     property({ type: Boolean })
 ], Select.prototype, "multiple", null);

package/lib/slider/elements/slider-marker.d.ts

@@ -0,0 +1,49 @@
+import { JSXInterface } from '../../jsx';
+import { BasicElement, CSSResultGroup, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
+export declare class SliderMarker extends BasicElement {
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
+    static get styles(): CSSResultGroup;
+    /**
+     * Used to determine the position of the marker on the scale.
+     */
+    value: string;
+    /**
+     * Specify label alignment
+     */
+    labelAlign: 'left' | 'right' | 'center' | null;
+    /**
+     * On first updated lifecycle
+     * @param changedProperties changed properties
+     * @returns {void}
+     */
+    protected firstUpdated(changedProperties: PropertyValues): void;
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @returns Render template
+     */
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-slider-marker': SliderMarker;
+    }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ef-slider-marker': SliderMarker;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'ef-slider-marker': Partial<SliderMarker> | JSXInterface.HTMLAttributes<SliderMarker>;
+    }
+  }
+}
+
+export {};

package/lib/slider/elements/slider-marker.js

@@ -0,0 +1,72 @@
+import { __decorate } from "tslib";
+import { BasicElement, css, html } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/decorators/property.js';
+import { VERSION } from '../../version.js';
+let SliderMarker = class SliderMarker extends BasicElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Used to determine the position of the marker on the scale.
+         */
+        this.value = '';
+        /**
+         * Specify label alignment
+         */
+        this.labelAlign = null;
+    }
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
+    static get styles() {
+        return css `
+      :host {
+        position: absolute;
+      }
+      [part='marker'] {
+        width: 100%;
+        height: 100%;
+      }
+      [part='label'] {
+        white-space: nowrap;
+        position: absolute;
+      }
+    `;
+    }
+    /**
+     * On first updated lifecycle
+     * @param changedProperties changed properties
+     * @returns {void}
+     */
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        this.setAttribute('aria-hidden', 'true');
+    }
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @returns Render template
+     */
+    render() {
+        return html `
+      <div part="marker"></div>
+      <div part="label">
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], SliderMarker.prototype, "value", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'label-align' })
+], SliderMarker.prototype, "labelAlign", void 0);
+SliderMarker = __decorate([
+    customElement('ef-slider-marker')
+], SliderMarker);
+export { SliderMarker };