@refinitiv-ui/elements 7.9.1 → 7.10.1

package/lib/select/index.d.ts

@@ -1,5 +1,5 @@
 import { JSXInterface } from '../jsx';
-import { CSSResultGroup, ControlElement, MultiValue, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
+import { CSSResultGroup, FormFieldElement, MultiValue, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
 import '../icon/index.js';
 import '../item/index.js';
 import '../overlay/index.js';
@@ -12,16 +12,24 @@ export type { SelectData, SelectDataItem };
  * @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.
  */
-export declare class Select extends ControlElement implements MultiValue {
+export declare class Select extends FormFieldElement implements MultiValue {
     /**
      * Element version number
      * @returns version number
      */
     static get version(): string;
-    protected readonly defaultRole: string | null;
     /**
      * A `CSSResultGroup` that will be used
      * to style the host, slotted children
@@ -51,22 +59,10 @@ export declare class Select extends ControlElement implements MultiValue {
      * @readonly
      */
     get labels(): string[];
-    /**
-     * Placeholder to display when no value is set
-     */
-    placeholder: string;
     /**
      * Toggles the opened state of the list
      */
     opened: boolean;
-    /**
-     * Set error state
-     */
-    error: boolean;
-    /**
-     * Set warning state
-     */
-    warning: boolean;
     /**
      * Switch to multiple select input
      * @ignore
@@ -111,11 +107,6 @@ export declare class Select extends ControlElement implements MultiValue {
      * Reference to the label element
      */
     private labelRef;
-    /**
-     * Called when connected to DOM
-     * @returns {void}
-     */
-    connectedCallback(): void;
     /**
      * Updates the element
      * @param changedProperties Properties that has changed
@@ -369,10 +360,6 @@ export declare class Select extends ControlElement implements MultiValue {
      * Template for label
      */
     private get labelTemplate();
-    /**
-     * Edit template when select is not readonly or disabled
-     */
-    private get editTemplate();
     /**
      * Get default slot template
      */
@@ -382,9 +369,17 @@ export declare class Select extends ControlElement implements MultiValue {
      */
     private get dataContent();
     /**
-     * Edit template when select is not readonly or disabled
+     * `ef-items` template generated from slot or `data`
+     */
+    private get itemsTemplate();
+    /**
+     * Template of a listbox containing ef-item(s)
+     */
+    private get listboxTemplate();
+    /**
+     * Area that allows select to be clickable and toggle between open and close
      */
-    private get popupTemplate();
+    private get triggerTemplate();
     /**
      * A `TemplateResult` that will be used
      * to render the updated internal template.
@@ -405,7 +400,7 @@ declare global {
 
   namespace JSX {
     interface IntrinsicElements {
-      'ef-select': Partial<Select> | JSXInterface.ControlHTMLAttributes<Select>;
+      'ef-select': Partial<Select> | JSXInterface.HTMLAttributes<Select>;
     }
   }
 }

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';
@@ -44,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 */
@@ -60,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.
@@ -151,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;
@@ -173,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;
-      }
     `;
     }
     /**
@@ -279,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
@@ -312,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);
     }
@@ -871,17 +844,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
      */
@@ -895,37 +857,44 @@ 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
+        >`
+            : nothing;
+    }
+    /**
+     * 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
@@ -933,11 +902,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([
@@ -946,18 +929,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 };