@refinitiv-ui/elements 5.3.3 → 5.7.0

package/lib/tab-bar/helpers/animate.js

@@ -0,0 +1,53 @@
+var Easings;
+(function (Easings) {
+    Easings["EaseOutQuad"] = "easeOutQuad";
+})(Easings || (Easings = {}));
+const ANIMATION_DURATION = 100; // specifies the length of time an animation should take to complete
+const DEFAULT_EASING = Easings.EaseOutQuad;
+/**
+ * Common easing equations from https://easings.net
+ * @param name type of easing
+ * @returns easing function
+ */
+const functionEasings = {
+    /**
+     * Decelerating to zero velocity
+     * @param time current time or position
+     * @returns easing value
+     */
+    easeOutQuad: (time) => {
+        return time * (2 - time);
+    }
+};
+/**
+ * Common easing equations from https://easings.net
+ * @param configs animate config
+ * @returns {void}
+ */
+const tweenAnimate = (configs) => {
+    let animate;
+    const { target, startPosition, endPosition, duration = ANIMATION_DURATION, easing = DEFAULT_EASING, complete } = configs;
+    if (!target) {
+        throw new TypeError('No target argument passed');
+    }
+    const startTime = 'now' in window.performance ? performance.now() : new Date().getTime();
+    const delta = endPosition - startPosition;
+    const tweenLoop = () => {
+        const currentTime = 'now' in window.performance ? performance.now() : new Date().getTime();
+        const step = Math.min(1, ((currentTime - startTime) / duration));
+        const factor = functionEasings[easing](step); // factor can be a decimal
+        configs.target.scrollLeft = startPosition + delta * factor;
+        if (step < 1 && configs.target.scrollLeft !== endPosition) {
+            animate = requestAnimationFrame(tweenLoop);
+        }
+        else {
+            cancelAnimationFrame(animate);
+            if (typeof complete === 'function') {
+                complete();
+            }
+            return;
+        }
+    };
+    tweenLoop();
+};
+export { tweenAnimate, ANIMATION_DURATION };

package/lib/tab-bar/index.d.ts

@@ -0,0 +1,108 @@
+import { JSXInterface } from '../jsx';
+import { TemplateResult, CSSResultGroup, PropertyValues, ResponsiveElement, ElementSize } from '@refinitiv-ui/core';
+import '../button/index.js';
+/**
+ * Container for tabs
+ */
+export declare class TabBar extends ResponsiveElement {
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
+    /**
+     * A `CSSResultGroup` that will be used
+     * to style the host, slotted children
+     * and the internal template of the element.
+     * @returns CSS template
+     */
+    static get styles(): CSSResultGroup;
+    /**
+     * Specify tab's horizontal alignment
+     */
+    alignment: 'left' | 'center' | 'right';
+    /**
+     * Use level styling from theme
+     */
+    level: '1' | '2' | '3';
+    /**
+     * Use to switch from horizontal to vertical layout.
+     */
+    vertical: boolean;
+    private content;
+    private leftBtn;
+    private rightBtn;
+    private isScrolling;
+    /**
+     * Called after the element’s DOM has been updated the first time.
+     * register scroll event on content element to toggle scroll button
+     * @param changedProperties Properties that has changed
+     * @returns {void}
+     */
+    protected firstUpdated(changedProperties: PropertyValues): void;
+    /**
+     * Called when the element’s DOM has been updated and rendered
+     * @param changedProperties Properties that has changed
+     * @returns {void}
+     */
+    protected updated(changedProperties: PropertyValues): void;
+    /**
+     * private method but can't override
+     * access modifiers in typescript.
+     * @ignore
+     * @param size element dimensions
+     * @returns {void}
+     */
+    resizedCallback(size: ElementSize): void;
+    /**
+     * Hide all scroll buttons
+     * @returns {void}
+     */
+    private hideScrollButtons;
+    /**
+     * Hide/Show scroll button when element is overflow.
+     * @param elementWidth width of element
+     * @returns {void}
+     */
+    private toggleScrollButton;
+    /**
+     * Set tab level attribute accordingly
+     * @returns {void}
+     */
+    private setLevel;
+    /**
+     * Detects when slot changes
+     * @returns {void}
+     */
+    private onSlotChange;
+    /**
+     * Update scroll position when clicked on left button
+     * @returns {void}
+     */
+    private handleScrollLeft;
+    /**
+     * Update scroll position when clicked on right button
+     * @returns {void}
+     */
+    private handleScrollRight;
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return Render template
+     */
+    protected render(): TemplateResult;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ef-tab-bar': TabBar;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'ef-tab-bar': Partial<TabBar> | JSXInterface.HTMLAttributes<TabBar>;
+    }
+  }
+}
+
+export {};

package/lib/tab-bar/index.js

@@ -0,0 +1,218 @@
+import { __decorate } from "tslib";
+import { html, css, ResponsiveElement } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
+import { VERSION } from '../version.js';
+import { tweenAnimate } from './helpers/animate.js';
+import '../button/index.js';
+const BAR_TRAVEL_DISTANCE = 150; // scroll distance
+/**
+ * Container for tabs
+ */
+let TabBar = class TabBar extends ResponsiveElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Specify tab's horizontal alignment
+         */
+        this.alignment = 'left';
+        /**
+         * Use level styling from theme
+         */
+        this.level = '1';
+        /**
+         * Use to switch from horizontal to vertical layout.
+         */
+        this.vertical = false;
+    }
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
+    /**
+     * A `CSSResultGroup` that will be used
+     * to style the host, slotted children
+     * and the internal template of the element.
+     * @returns CSS template
+     */
+    static get styles() {
+        return css `
+      :host {
+        display: flex;
+      }
+      :host([alignment=center]) {
+        justify-content: center;
+      }
+      :host([alignment=right]) {
+        justify-content: flex-end;
+      }
+    `;
+    }
+    /**
+     * Called after the element’s DOM has been updated the first time.
+     * register scroll event on content element to toggle scroll button
+     * @param changedProperties Properties that has changed
+     * @returns {void}
+     */
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        this.content.addEventListener('scroll', () => {
+            // Clear our timeout throughout the scroll
+            window.clearTimeout(this.isScrolling);
+            // Set a timeout to run after scrolling ends
+            this.isScrolling = window.setTimeout(() => {
+                this.toggleScrollButton(this.content.clientWidth);
+            }, 66); // equal 15 fps for compatibility
+        });
+    }
+    /**
+     * Called when the element’s DOM has been updated and rendered
+     * @param changedProperties Properties that has changed
+     * @returns {void}
+     */
+    updated(changedProperties) {
+        /* istanbul ignore else */
+        if (changedProperties.has('level')) {
+            this.setLevel();
+        }
+        if (changedProperties.has('vertical')) {
+            // if tab bar changed from horizontal to vertical
+            if (this.vertical) {
+                this.hideScrollButtons();
+            }
+        }
+        super.updated(changedProperties);
+    }
+    /**
+     * private method but can't override
+     * access modifiers in typescript.
+     * @ignore
+     * @param size element dimensions
+     * @returns {void}
+     */
+    resizedCallback(size) {
+        if (!this.vertical) {
+            this.toggleScrollButton(size.width);
+        }
+    }
+    /**
+     * Hide all scroll buttons
+     * @returns {void}
+     */
+    hideScrollButtons() {
+        this.leftBtn.style.setProperty('display', 'none');
+        this.rightBtn.style.setProperty('display', 'none');
+    }
+    /**
+     * Hide/Show scroll button when element is overflow.
+     * @param elementWidth width of element
+     * @returns {void}
+     */
+    toggleScrollButton(elementWidth) {
+        const { scrollLeft, scrollWidth } = this.content;
+        if (this.vertical) {
+            return;
+        }
+        // handle left button
+        if (scrollLeft > 0) {
+            this.leftBtn.style.setProperty('display', 'flex');
+        }
+        else {
+            this.leftBtn.style.setProperty('display', 'none');
+        }
+        // handle right button
+        if (Math.floor(scrollWidth - scrollLeft) > Math.round(elementWidth)) {
+            this.rightBtn.style.setProperty('display', 'flex');
+        }
+        else {
+            this.rightBtn.style.setProperty('display', 'none');
+        }
+    }
+    /**
+     * Set tab level attribute accordingly
+     * @returns {void}
+     */
+    setLevel() {
+        const tabList = this.querySelectorAll('ef-tab');
+        tabList.forEach((tab) => {
+            tab.level = this.level;
+        });
+    }
+    /**
+     * Detects when slot changes
+     * @returns {void}
+     */
+    onSlotChange() {
+        this.setLevel();
+    }
+    /**
+     * Update scroll position when clicked on left button
+     * @returns {void}
+     */
+    handleScrollLeft() {
+        const { scrollLeft } = this.content;
+        const availableScrollLeft = scrollLeft;
+        let endPosition = scrollLeft - BAR_TRAVEL_DISTANCE;
+        // If the space available is less than one half lots of our desired distance, just move to the leftest
+        if (availableScrollLeft < BAR_TRAVEL_DISTANCE * 1.5) {
+            endPosition = 0;
+        }
+        tweenAnimate({ target: this.content, startPosition: scrollLeft, endPosition });
+    }
+    /**
+     * Update scroll position when clicked on right button
+     * @returns {void}
+     */
+    handleScrollRight() {
+        const { scrollLeft, scrollWidth, clientWidth } = this.content;
+        const availableScrollRight = scrollWidth - (scrollLeft + clientWidth);
+        let endPosition = scrollLeft + BAR_TRAVEL_DISTANCE;
+        // If the space available is less than one half lots of our desired distance, just move the whole amount
+        if (availableScrollRight < BAR_TRAVEL_DISTANCE * 1.5) {
+            endPosition = scrollLeft + availableScrollRight;
+        }
+        tweenAnimate({ target: this.content, startPosition: scrollLeft, endPosition });
+    }
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return Render template
+     */
+    render() {
+        return html `
+    <ef-button icon="left" part="left-btn" @tap=${this.handleScrollLeft}></ef-button>
+      <div part="content">
+        <slot @slotchange=${this.onSlotChange}></slot>
+      </div>
+    <ef-button icon="right" part="right-btn" @tap=${this.handleScrollRight}></ef-button>
+    `;
+    }
+};
+__decorate([
+    property({ type: String, reflect: true })
+], TabBar.prototype, "alignment", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], TabBar.prototype, "level", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TabBar.prototype, "vertical", void 0);
+__decorate([
+    query('[part="content"')
+], TabBar.prototype, "content", void 0);
+__decorate([
+    query('[part="left-btn"]')
+], TabBar.prototype, "leftBtn", void 0);
+__decorate([
+    query('[part="right-btn"]')
+], TabBar.prototype, "rightBtn", void 0);
+TabBar = __decorate([
+    customElement('ef-tab-bar', {
+        alias: 'coral-tab-bar'
+    })
+], TabBar);
+export { TabBar };

package/lib/tab-bar/themes/halo/dark/index.js

@@ -0,0 +1,4 @@
+import '@refinitiv-ui/elements/lib/tab/themes/halo/dark';
+import '@refinitiv-ui/elements/lib/button/themes/halo/dark';
+
+elf.customStyles.define('ef-tab-bar', ':host{position:relative;background-color:#1a1a1a}:host [part=content]{display:flex;overflow:hidden}:host [part=left-btn],:host [part=right-btn]{display:none;position:absolute;height:auto;margin:auto;z-index:2;top:0;bottom:0;background-color:#404040;width:36px;border:none}:host [part=left-btn]:hover,:host [part=right-btn]:hover{background-color:#334bff}:host [part=left-btn]:active,:host [part=right-btn]:active{background-color:#0f1e8a}:host [part=left-btn]:focus:not([focused]),:host [part=left-btn][focused=visible],:host [part=right-btn]:focus:not([focused]),:host [part=right-btn][focused=visible]{background-color:#4158ff}:host [part=left-btn]:focus:not([focused]):not([active]):not(:hover),:host [part=left-btn][focused=visible]:not([active]):not(:hover),:host [part=right-btn]:focus:not([focused]):not([active]):not(:hover),:host [part=right-btn][focused=visible]:not([active]):not(:hover){color:#6678ff;background-color:#404040}:host [part=left-btn]{left:0}:host [part=right-btn]{right:0}:host([vertical]){width:180px;flex-shrink:0}:host([vertical]) [part=content]{flex-direction:column}:host([vertical]) [part=content] ::slotted(ef-tab){justify-content:flex-start;border-bottom:1px solid #404040}:host [part=left-btn]::after,:host [part=right-btn]::after{content:\'\';position:absolute;margin:auto;width:1px;background:#404040;height:70%;top:0;bottom:0}:host([level="1"]) [part=left-btn]::after,:host([level="1"]) [part=right-btn]::after{content:none}:host([level="1"]) [part=left-btn]{border-right:1px solid #0d0d0d}:host([level="1"]) [part=right-btn]{border-left:1px solid #0d0d0d}:host([level="2"]) [part=left-btn]::after,:host([level="3"]) [part=left-btn]::after{right:0}:host([level="2"]) [part=right-btn]::after,:host([level="3"]) [part=right-btn]::after{left:0}:host([level="2"]) [part=left-btn]:not(:active):not(:hover),:host([level="2"]) [part=right-btn]:not(:active):not(:hover){background-color:#262626}:host([level="2"]) [part=left-btn]::after,:host([level="2"]) [part=right-btn]::after{height:70%}:host([level="3"]) [part=left-btn],:host([level="3"]) [part=right-btn]{border-color:transparent}:host([level="3"]) [part=left-btn]:not(:active):not(:hover),:host([level="3"]) [part=right-btn]:not(:active):not(:hover){background-color:#0d0d0d}:host([level="3"]) [part=left-btn]::after,:host([level="3"]) [part=right-btn]::after{height:30%}:host([vertical]) [part=content] ::slotted(ef-tab){border-bottom-color:transparent;border-right:none!important;background:linear-gradient(#1a1a1a,#1a1a1a) left calc(100% + 1px)/2% 1px no-repeat,linear-gradient(#1a1a1a,#1a1a1a) right calc(100% + 1px)/2% 1px no-repeat,linear-gradient(#404040,#404040) center calc(100% + 1px)/100% 1px no-repeat}:host([vertical]) [part=content] ::slotted(ef-tab[active]:not(:active):not(:hover)){background:linear-gradient(#0d0d0d,#0d0d0d) left calc(100% + 1px)/2% 1px no-repeat,linear-gradient(#0d0d0d,#0d0d0d) right calc(100% + 1px)/2% 1px no-repeat,linear-gradient(#404040,#404040) center calc(100% + 1px)/100% 1px no-repeat}:host([vertical]) [part=content] ::slotted(ef-tab:not([active]):not(:active):not(:hover)){background-color:#1a1a1a}:host([vertical]) [part=content] ::slotted(ef-tab:hover){color:#fff;background-color:#334bff}:host([vertical]) [part=content] ::slotted(ef-tab:active){background-color:#0f1e8a}:host([vertical][level="1"]) [part=content] ::slotted(ef-tab[active]:not(:active):not(:hover)),:host([vertical][level="3"]) [part=content] ::slotted(ef-tab[active]:not(:active):not(:hover)){color:#6678ff;background-color:#0d0d0d}');

package/lib/tab-bar/themes/halo/light/index.js

@@ -0,0 +1,4 @@
+import '@refinitiv-ui/elements/lib/tab/themes/halo/light';
+import '@refinitiv-ui/elements/lib/button/themes/halo/light';
+
+elf.customStyles.define('ef-tab-bar', ':host{position:relative;background-color:#f2f2f2}:host [part=content]{display:flex;overflow:hidden}:host [part=left-btn],:host [part=right-btn]{display:none;position:absolute;height:auto;margin:auto;z-index:2;top:0;bottom:0;background-color:#e6e6e6;width:36px;border:none}:host [part=left-btn]:hover,:host [part=right-btn]:hover{background-color:#334bff}:host [part=left-btn]:active,:host [part=right-btn]:active{background-color:#0f1e8a}:host [part=left-btn]:focus:not([focused]),:host [part=left-btn][focused=visible],:host [part=right-btn]:focus:not([focused]),:host [part=right-btn][focused=visible]{background-color:#4158ff}:host [part=left-btn]:focus:not([focused]):not([active]):not(:hover),:host [part=left-btn][focused=visible]:not([active]):not(:hover),:host [part=right-btn]:focus:not([focused]):not([active]):not(:hover),:host [part=right-btn][focused=visible]:not([active]):not(:hover){color:#6678ff;background-color:#e6e6e6}:host [part=left-btn]{left:0}:host [part=right-btn]{right:0}:host([vertical]){width:180px;flex-shrink:0}:host([vertical]) [part=content]{flex-direction:column}:host([vertical]) [part=content] ::slotted(ef-tab){justify-content:flex-start;border-bottom:1px solid #d9d9d9}:host [part=left-btn]::after,:host [part=right-btn]::after{content:\'\';position:absolute;margin:auto;width:1px;background:#d9d9d9;height:70%;top:0;bottom:0}:host([level="1"]) [part=left-btn]::after,:host([level="1"]) [part=right-btn]::after{content:none}:host([level="1"]) [part=left-btn]{border-right:1px solid #fff}:host([level="1"]) [part=right-btn]{border-left:1px solid #fff}:host([level="2"]) [part=left-btn]::after,:host([level="3"]) [part=left-btn]::after{right:0}:host([level="2"]) [part=right-btn]::after,:host([level="3"]) [part=right-btn]::after{left:0}:host([level="2"]) [part=left-btn]:not(:active):not(:hover),:host([level="2"]) [part=right-btn]:not(:active):not(:hover){background-color:#f2f2f2}:host([level="2"]) [part=left-btn]::after,:host([level="2"]) [part=right-btn]::after{height:70%}:host([level="3"]) [part=left-btn],:host([level="3"]) [part=right-btn]{border-color:transparent}:host([level="3"]) [part=left-btn]:not(:active):not(:hover),:host([level="3"]) [part=right-btn]:not(:active):not(:hover){background-color:#fff}:host([level="3"]) [part=left-btn]::after,:host([level="3"]) [part=right-btn]::after{height:30%}:host([vertical]) [part=content] ::slotted(ef-tab){border-bottom-color:transparent;border-right:none!important;background:linear-gradient(#f2f2f2,#f2f2f2) left calc(100% + 1px)/2% 1px no-repeat,linear-gradient(#f2f2f2,#f2f2f2) right calc(100% + 1px)/2% 1px no-repeat,linear-gradient(#d9d9d9,#d9d9d9) center calc(100% + 1px)/100% 1px no-repeat}:host([vertical]) [part=content] ::slotted(ef-tab[active]:not(:active):not(:hover)){background:linear-gradient(#fff,#fff) left calc(100% + 1px)/2% 1px no-repeat,linear-gradient(#fff,#fff) right calc(100% + 1px)/2% 1px no-repeat,linear-gradient(#d9d9d9,#d9d9d9) center calc(100% + 1px)/100% 1px no-repeat}:host([vertical]) [part=content] ::slotted(ef-tab:not([active]):not(:active):not(:hover)){background-color:#f2f2f2}:host([vertical]) [part=content] ::slotted(ef-tab:hover){color:#fff;background-color:#334bff}:host([vertical]) [part=content] ::slotted(ef-tab:active){background-color:#0f1e8a}:host([vertical][level="1"]) [part=content] ::slotted(ef-tab[active]:not(:active):not(:hover)),:host([vertical][level="3"]) [part=content] ::slotted(ef-tab[active]:not(:active):not(:hover)){color:#334bff;background-color:#fff}');

package/lib/tab-bar/themes/solar/charcoal/index.js

@@ -0,0 +1,4 @@
+import '@refinitiv-ui/elements/lib/tab/themes/solar/charcoal';
+import '@refinitiv-ui/elements/lib/button/themes/solar/charcoal';
+
+elf.customStyles.define('ef-tab-bar', ':host{position:relative;background-color:#151516}:host [part=content]{display:flex;overflow:hidden}:host [part=left-btn],:host [part=right-btn]{display:none;position:absolute;height:auto;margin:auto;z-index:2;top:0;bottom:0;background-color:#3c3c42}:host [part=left-btn]:hover,:host [part=right-btn]:hover{background-color:#4a4a4f}:host [part=left-btn]:active,:host [part=right-btn]:active{background-color:#38383d}:host [part=left-btn]:focus:not([focused]),:host [part=left-btn][focused=visible],:host [part=right-btn]:focus:not([focused]),:host [part=right-btn][focused=visible]{background-color:#ffa041}:host [part=left-btn]:focus:not([focused]):not([active]):not(:hover),:host [part=left-btn][focused=visible]:not([active]):not(:hover),:host [part=right-btn]:focus:not([focused]):not([active]):not(:hover),:host [part=right-btn][focused=visible]:not([active]):not(:hover){color:#e2e2e2;background-color:#3c3c42}:host [part=left-btn]{left:0}:host [part=right-btn]{right:0}:host([vertical]){width:180px;flex-shrink:0}:host([vertical]) [part=content]{flex-direction:column}:host([vertical]) [part=content] ::slotted(ef-tab){justify-content:flex-start;border:none;border-bottom:1px solid #000}:host(:not([vertical])) [part=content] ::slotted(ef-tab:first-of-type){border-left:1px solid #000}');

package/lib/tab-bar/themes/solar/pearl/index.js

@@ -0,0 +1,4 @@
+import '@refinitiv-ui/elements/lib/tab/themes/solar/pearl';
+import '@refinitiv-ui/elements/lib/button/themes/solar/pearl';
+
+elf.customStyles.define('ef-tab-bar', ':host{position:relative;background-color:#c2c2c2}:host [part=content]{display:flex;overflow:hidden}:host [part=left-btn],:host [part=right-btn]{display:none;position:absolute;height:auto;margin:auto;z-index:2;top:0;bottom:0;background-color:#fafbfc}:host [part=left-btn]:hover,:host [part=right-btn]:hover{background-color:#fafbfc}:host [part=left-btn]:active,:host [part=right-btn]:active{background-color:#e8e9ea}:host [part=left-btn]:focus:not([focused]),:host [part=left-btn][focused=visible],:host [part=right-btn]:focus:not([focused]),:host [part=right-btn][focused=visible]{background-color:#ffb771}:host [part=left-btn]:focus:not([focused]):not([active]):not(:hover),:host [part=left-btn][focused=visible]:not([active]):not(:hover),:host [part=right-btn]:focus:not([focused]):not([active]):not(:hover),:host [part=right-btn][focused=visible]:not([active]):not(:hover){color:#1d1d1d;background-color:#fafbfc}:host [part=left-btn]{left:0}:host [part=right-btn]{right:0}:host([vertical]){width:180px;flex-shrink:0}:host([vertical]) [part=content]{flex-direction:column}:host([vertical]) [part=content] ::slotted(ef-tab){justify-content:flex-start;border:none;border-bottom:1px solid #a9afba}:host(:not([vertical])) [part=content] ::slotted(ef-tab:first-of-type){border-left:1px solid #a9afba}');

package/lib/text-field/custom-elements.json

@@ -0,0 +1,210 @@
+{
+  "version": "experimental",
+  "tags": [
+    {
+      "name": "ef-text-field",
+      "description": "Form control element for text",
+      "attributes": [
+        {
+          "name": "pattern",
+          "description": "Set regular expression for input validation",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "placeholder",
+          "description": "Set place holder text",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "error",
+          "description": "Set state to error",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "warning",
+          "description": "Set state to warning",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "icon",
+          "description": "Specify icon to display in input. Value can be icon name",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "icon-has-action",
+          "description": "Specify when icon need to be clickable",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "transparent",
+          "description": "Disables all other states and border/background styles.\nUse with advanced composite elements requiring e.g. multi selection in\ncombo-box when parent container handles element states.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "maxlength",
+          "description": "Set character max limit",
+          "type": "number | null"
+        },
+        {
+          "name": "minlength",
+          "description": "Set character min limit",
+          "type": "number | null"
+        },
+        {
+          "name": "value",
+          "description": "Input's value",
+          "type": "string",
+          "default": "0"
+        },
+        {
+          "name": "readonly",
+          "description": "Set readonly state",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "disabled",
+          "description": "Set disabled state",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "properties": [
+        {
+          "name": "pattern",
+          "attribute": "pattern",
+          "description": "Set regular expression for input validation",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "placeholder",
+          "attribute": "placeholder",
+          "description": "Set place holder text",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "error",
+          "attribute": "error",
+          "description": "Set state to error",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "warning",
+          "attribute": "warning",
+          "description": "Set state to warning",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "icon",
+          "attribute": "icon",
+          "description": "Specify icon to display in input. Value can be icon name",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "iconHasAction",
+          "attribute": "icon-has-action",
+          "description": "Specify when icon need to be clickable",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "transparent",
+          "attribute": "transparent",
+          "description": "Disables all other states and border/background styles.\nUse with advanced composite elements requiring e.g. multi selection in\ncombo-box when parent container handles element states.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "maxLength",
+          "attribute": "maxlength",
+          "description": "Set character max limit",
+          "type": "number | null"
+        },
+        {
+          "name": "minLength",
+          "attribute": "minlength",
+          "description": "Set character min limit",
+          "type": "number | null"
+        },
+        {
+          "name": "selectionStart",
+          "description": "Selection start index",
+          "type": "number | null"
+        },
+        {
+          "name": "selectionEnd",
+          "description": "Selection end index",
+          "type": "number | null"
+        },
+        {
+          "name": "value",
+          "attribute": "value",
+          "description": "Input's value",
+          "type": "string",
+          "default": "0"
+        },
+        {
+          "name": "readonly",
+          "attribute": "readonly",
+          "description": "Set readonly state",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Set disabled state",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "events": [
+        {
+          "name": "value-changed",
+          "description": "Dispatched when value changes"
+        },
+        {
+          "name": "error-changed",
+          "description": "Dispatched when error state changes"
+        },
+        {
+          "name": "icon-click",
+          "description": "Dispatched only when element has icon-has-action attribute and icon is clicked"
+        }
+      ],
+      "methods": [
+        {
+          "name": "select",
+          "description": "Select the contents of input",
+          "params": []
+        },
+        {
+          "name": "setSelectionRange",
+          "description": "Set the selection range",
+          "params": [
+            {
+              "name": "startSelection",
+              "description": "Start of selection"
+            },
+            {
+              "name": "endSelection",
+              "description": "End of the selection"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

package/lib/text-field/custom-elements.md

@@ -0,0 +1,37 @@
+# ef-text-field
+
+Form control element for text
+
+## Properties
+
+| Property         | Attribute         | Type             | Default | Description                                      |
+|------------------|-------------------|------------------|---------|--------------------------------------------------|
+| `disabled`       | `disabled`        | `boolean`        | false   | Set disabled state                               |
+| `error`          | `error`           | `boolean`        | false   | Set state to error                               |
+| `icon`           | `icon`            | `string`         | ""      | Specify icon to display in input. Value can be icon name |
+| `iconHasAction`  | `icon-has-action` | `boolean`        | false   | Specify when icon need to be clickable           |
+| `maxLength`      | `maxlength`       | `number \| null` | null    | Set character max limit                          |
+| `minLength`      | `minlength`       | `number \| null` | null    | Set character min limit                          |
+| `pattern`        | `pattern`         | `string`         | ""      | Set regular expression for input validation      |
+| `placeholder`    | `placeholder`     | `string`         | ""      | Set place holder text                            |
+| `readonly`       | `readonly`        | `boolean`        | false   | Set readonly state                               |
+| `selectionEnd`   |                   | `number \| null` |         | Selection end index                              |
+| `selectionStart` |                   | `number \| null` |         | Selection start index                            |
+| `transparent`    | `transparent`     | `boolean`        | false   | Disables all other states and border/background styles.<br />Use with advanced composite elements requiring e.g. multi selection in<br />combo-box when parent container handles element states. |
+| `value`          | `value`           | `string`         | 0       | Input's value                                    |
+| `warning`        | `warning`         | `boolean`        | false   | Set state to warning                             |
+
+## Methods
+
+| Method              | Type                                             | Description                                      |
+|---------------------|--------------------------------------------------|--------------------------------------------------|
+| `select`            | `(): void`                                       | Select the contents of input                     |
+| `setSelectionRange` | `(startSelection: number, endSelection: number): void` | Set the selection range<br /><br />**startSelection**: Start of selection<br />**endSelection**: End of the selection |
+
+## Events
+
+| Event           | Description                                      |
+|-----------------|--------------------------------------------------|
+| `error-changed` | Dispatched when error state changes              |
+| `icon-click`    | Dispatched only when element has icon-has-action attribute and icon is clicked |
+| `value-changed` | Dispatched when value changes                    |