@ama-pt/agora-design-system 0.1.16 → 0.2.0

package/dist/components/ui/organisms/input-date/input-date.js

@@ -1,178 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import classNames from 'classnames';
-import React, { useEffect, useRef, useState } from 'react';
-import { Button, stringToBoolean } from '../../../index';
-import { Icon } from '../../atoms/icon';
-import DatePickerDialog from './date-picker-dialog.class';
-import './input-date.scss';
-const defaultLanguage = {
-    days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
-    daysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
-    months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
-    monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
-    chooseDate: 'Choose Date',
-    previousYear: 'previous year',
-    previousMonth: 'previous month',
-    nextMonth: 'next month',
-    nextYear: 'next year',
-    btnOKText: 'OK',
-    btnCancelText: 'Cancel',
-    btnTodayText: 'Today'
-};
-const InnerInputDate = (_a, ref) => {
-    var _b;
-    var { label = 'Input Label', ariaLabel, hideLabel, showOverlayInfo, hasError, disabled, readOnly, feedbackText, overlayInfoText, toggleDateAltIconText, feedbackState = 'info', className = '', isOptional, language, dateEventList, id } = _a, props = __rest(_a, ["label", "ariaLabel", "hideLabel", "showOverlayInfo", "hasError", "disabled", "readOnly", "feedbackText", "overlayInfoText", "toggleDateAltIconText", "feedbackState", "className", "isOptional", "language", "dateEventList", "id"]);
-    const propsClone = Object.assign({}, props);
-    const { onChange } = propsClone;
-    const [currentValue, setCurrentValue] = useState((_b = propsClone.value) !== null && _b !== void 0 ? _b : '');
-    const datePickerWrapper = useRef(null);
-    const langs = language || defaultLanguage;
-    const [inputIsFocus, setInputIsFocus] = useState(false);
-    let datePickerDialog;
-    /**
-     * Dictionary of possible icons feedback.
-     */
-    const feedbackStateIconsMap = {
-        info: 'agora-solid-info-mark',
-        danger: 'agora-solid-alert-triangle',
-        success: 'agora-solid-check-circle',
-        warning: 'agora-solid-alert-circle'
-    };
-    useEffect(() => {
-        if ((datePickerWrapper === null || datePickerWrapper === void 0 ? void 0 : datePickerWrapper.current) !== null) {
-            const datePickers = datePickerWrapper.current.querySelector('.date-picker');
-            if (datePickers) {
-                datePickerDialog = new DatePickerDialog(datePickers, langs, dateEventList);
-                datePickerDialog.init();
-            }
-        }
-        return () => {
-            if (datePickerDialog) {
-                datePickerDialog.dispose();
-                datePickerDialog = null;
-            }
-        };
-    }, []);
-    /**
-     * Builds main Classes for whole component
-     */
-    const inputClassBuilder = () => {
-        return {
-            // main wrapper class
-            inputWrapperClasses: classNames('agora-date-picker', {
-                'input-disabled': disabled,
-                'input-has-error': stringToBoolean(hasError)
-            }),
-            // classes for above input sections [label and hint icon]
-            labelSectionClasses: classNames('input-label-wrapper', 'flex', 'items-end', {
-                'mb-8': label && !stringToBoolean(hideLabel),
-                'justify-end': !label || stringToBoolean(hideLabel),
-                'justify-between': label && !stringToBoolean(hideLabel)
-            }),
-            // text input component classes
-            inputClasses: classNames('date-picker-input', 'flex-1', className)
-        };
-    };
-    const { inputWrapperClasses, labelSectionClasses, inputClasses } = inputClassBuilder();
-    const handleChange = (evt) => {
-        const actualValue = evt.currentTarget.value;
-        setCurrentValue(actualValue);
-        onChange === null || onChange === void 0 ? void 0 : onChange(evt);
-    };
-    // prevent to open default date-picker
-    const handleBlockDefaultPickerDate = (evt) => {
-        if (evt.type === 'keydown') {
-            evt.preventDefault();
-            if (evt.code === 'Space') {
-                evt.preventDefault();
-            }
-        }
-        if (evt.type === 'click') {
-            evt.preventDefault();
-        }
-    };
-    if (stringToBoolean(isOptional)) {
-        delete propsClone.required;
-    }
-    else {
-        propsClone.required = true;
-    }
-    const handleInputFocus = (evt) => {
-        var _a;
-        setInputIsFocus(true);
-        (_a = propsClone.onFocus) === null || _a === void 0 ? void 0 : _a.call(propsClone, evt);
-    };
-    const handleInputBlur = (evt) => {
-        var _a;
-        setInputIsFocus(false);
-        (_a = propsClone.onBlur) === null || _a === void 0 ? void 0 : _a.call(propsClone, evt);
-    };
-    delete propsClone.value;
-    const wrapperClass = classNames('input-wrapper flex relative items-center group', {
-        'is-focus': inputIsFocus
-    });
-    const feedbackIconWrapperClasses = classNames('mr-8 feedback-icon-wrapper', stringToBoolean(hasError) ? 'feedback-icon-wrapper-danger' : `feedback-icon-wrapper-${feedbackState}`);
-    return (React.createElement("div", { className: inputWrapperClasses, ref: datePickerWrapper },
-        React.createElement("div", { className: "date-picker" },
-            React.createElement("div", { className: "date" },
-                React.createElement("div", { className: labelSectionClasses },
-                    React.createElement("label", { hidden: hideLabel && hideLabel !== 'true', htmlFor: id, className: "text-primary-900 text-interaction-input-label" }, label)),
-                React.createElement("div", { className: wrapperClass },
-                    React.createElement("input", Object.assign({ value: currentValue, className: inputClasses, type: "date", disabled: disabled, readOnly: readOnly, maxLength: 10, id: id, onKeyDown: handleBlockDefaultPickerDate, onClick: handleBlockDefaultPickerDate, "aria-invalid": stringToBoolean(hasError), "aria-label": ariaLabel || label, "aria-required": !stringToBoolean(isOptional), "aria-describedby": id }, propsClone, { ref: ref, onChange: handleChange, onFocus: handleInputFocus, onBlur: handleInputBlur })),
-                    React.createElement("button", { disabled: disabled || readOnly, type: "button", className: "input-btn-toggle bg-transparent", "aria-label": toggleDateAltIconText },
-                        React.createElement(Icon, { name: "agora-line-calendar", alt: toggleDateAltIconText })))),
-            React.createElement("div", { className: "flex items-center justify-between" },
-                React.createElement("div", { className: "flex items-center input-feedback mt-8" },
-                    feedbackText && (React.createElement("span", { className: feedbackIconWrapperClasses }, !stringToBoolean(hasError) ? (React.createElement(Icon, { name: feedbackStateIconsMap[feedbackState], dimensions: "s", alt: feedbackText })) : (React.createElement(Icon, { name: "agora-solid-alert-triangle", dimensions: "s", alt: feedbackText })))),
-                    React.createElement("p", { className: "text-type-specs-caption text-neutral-700" }, feedbackText))),
-            React.createElement("div", { className: "date-picker-dialog hidden", role: "dialog", "aria-modal": "true", "aria-label": langs.chooseDate },
-                React.createElement("div", { className: "header p-16 text-white uppercase font-bold" },
-                    React.createElement("h2", { id: "id-grid-label", className: "month-year flex justify-center py-8 w-full text-black font-bold text-m-light normal-case", "aria-live": "polite" }, langs.chooseDate),
-                    React.createElement("div", { className: "flex justify-between" },
-                        React.createElement("div", { className: "flex" },
-                            React.createElement(Button, { appearance: "outline", className: "prev-year", "aria-label": langs.previousYear },
-                                React.createElement(Icon, { "aria-hidden": true, name: "agora-line-chevrons-left" })),
-                            React.createElement(Button, { appearance: "outline", className: "prev-month", "aria-label": langs.previousMonth },
-                                React.createElement(Icon, { "aria-hidden": true, name: "agora-line-chevron-left" }))),
-                        React.createElement("div", { className: "flex" },
-                            React.createElement(Button, { appearance: "outline", className: "next-month", "aria-label": langs.nextMonth },
-                                React.createElement(Icon, { "aria-hidden": true, name: "agora-line-chevron-right" })),
-                            React.createElement(Button, { appearance: "outline", type: "button", className: "next-year", "aria-label": langs.nextYear },
-                                React.createElement(Icon, { "aria-hidden": true, name: "agora-line-chevrons-right" }))))),
-                React.createElement("div", { className: "table-wrap" },
-                    React.createElement("table", { className: "dates", role: "grid", "aria-labelledby": "id-grid-label" },
-                        React.createElement("thead", null,
-                            React.createElement("tr", null, langs === null || langs === void 0 ? void 0 : langs.daysShort.map((day, index) => (React.createElement("th", { key: index, "aria-hidden": true, scope: "col", abbr: day }, day))))),
-                        React.createElement("tbody", null))),
-                React.createElement("div", { className: "mt-8 mx-16 border-1 border-neutral-300" }),
-                React.createElement("div", { className: "flex justify-between items-center" },
-                    React.createElement("div", { className: "mx-16 md:mx-32 my-16" },
-                        React.createElement(Button, { value: "todayButton", appearance: "link" }, langs === null || langs === void 0 ? void 0 : langs.btnTodayText)),
-                    React.createElement("div", { className: "text-right px-16 my-16 flex gap-8" },
-                        React.createElement(Button, { appearance: "outline", value: "cancel" },
-                            ' ',
-                            langs.btnCancelText),
-                        React.createElement(Button, { value: "ok", className: "dialog-button", appearance: "solid" },
-                            ' ',
-                            langs.btnOKText,
-                            ' '))),
-                showOverlayInfo && (React.createElement("div", { className: "py-16 px-16 bg-primary-200 text-neutral-900 flex items-center gap-8", "aria-live": "polite" },
-                    React.createElement("div", null,
-                        React.createElement(Icon, { "aria-hidden": true, name: "agora-solid-info-mark" })),
-                    React.createElement("div", null,
-                        React.createElement("p", null,
-                            " ",
-                            overlayInfoText,
-                            " "))))))));
-};
-export const InputDate = React.forwardRef(InnerInputDate);

package/dist/components/ui/organisms/input-date/input-date.scss

@@ -1 +0,0 @@
-.input-wrapper.is-focus::before{position:absolute;border-width:2px;--tw-border-opacity:1;border-color:rgb(3 74 216 / var(--tw-border-opacity));content:"";top:-4px;right:-4px;bottom:-4px;left:-4px;border-radius:7px}.agora-date-picker{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative}.agora-date-picker input[type=date]::-webkit-calendar-picker-indicator,.agora-date-picker input[type=date]::-webkit-inner-spin-button{display:none;-webkit-appearance:none}.agora-date-picker .sr-only{position:absolute;top:-2000em;left:2000em}.agora-date-picker .input-btn-toggle{position:absolute;right:8px;top:8px;display:flex;align-items:center;justify-content:center;--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));height:44px;width:44px}.agora-date-picker .input-btn-toggle svg>*{fill:#2b363c;opacity:.7}.agora-date-picker .input-btn-toggle:focus,.agora-date-picker .input-btn-toggle:focus-visible{border-radius:4px!important;border-width:2px!important;--tw-border-opacity:1!important;border-color:rgb(3 74 216 / var(--tw-border-opacity))!important;outline:2px solid transparent!important;outline-offset:2px!important}.agora-date-picker .input-btn-toggle:disabled{cursor:not-allowed;--tw-bg-opacity:1;background-color:rgb(241 243 248 / var(--tw-bg-opacity));opacity:.5}.agora-date-picker .feedback-icon-wrapper-info svg>*{fill:#0079bf}.agora-date-picker .feedback-icon-wrapper-success svg>*{fill:#008558}.agora-date-picker .feedback-icon-wrapper-danger svg>*{fill:#de2d3b}.agora-date-picker .feedback-icon-wrapper-warning svg>*{fill:#f2a222}.agora-date-picker .date-picker{position:relative}.agora-date-picker .date-picker .focus{--tw-border-opacity:1!important;border-color:rgb(3 74 216 / var(--tw-border-opacity))!important;outline-style:solid!important;outline-width:2px!important;outline-offset:2px!important;outline-color:#034ad8!important}.agora-date-picker .date-picker .date-picker-input{position:relative;display:flex;width:100%;border-radius:4px;border-width:2px;--tw-border-opacity:1;border-color:rgb(205 210 220 / var(--tw-border-opacity));padding-left:16px;padding-right:16px;height:60px}.agora-date-picker .date-picker .date-picker-input input{width:100%}.agora-date-picker .date-picker .date-picker-input input:focus{outline:2px solid transparent;outline-offset:2px}.agora-date-picker .date-picker .date-picker-input:hover:not(:focus):not(:disabled):not(:-moz-read-only){--tw-border-opacity:1;border-color:rgb(71 81 100 / var(--tw-border-opacity))}.agora-date-picker .date-picker .date-picker-input:hover:not(:focus):not(:disabled):not(:read-only){--tw-border-opacity:1;border-color:rgb(71 81 100 / var(--tw-border-opacity))}.agora-date-picker .date-picker .date-picker-input:hover:not(:focus):not(:disabled):not(:-moz-read-only)~.input-btn-toggle svg>*{fill:#2b363c;opacity:1}.agora-date-picker .date-picker .date-picker-input:hover:not(:focus):not(:disabled):not(:read-only)~.input-btn-toggle svg>*{fill:#2b363c;opacity:1}.agora-date-picker .date-picker .date-picker-input:-moz-read-only{cursor:not-allowed!important;--tw-border-opacity:1!important;border-color:rgb(241 243 248 / var(--tw-border-opacity))!important;--tw-bg-opacity:1!important;background-color:rgb(241 243 248 / var(--tw-bg-opacity))!important}.agora-date-picker .date-picker .date-picker-input:disabled,.agora-date-picker .date-picker .date-picker-input:read-only{cursor:not-allowed!important;--tw-border-opacity:1!important;border-color:rgb(241 243 248 / var(--tw-border-opacity))!important;--tw-bg-opacity:1!important;background-color:rgb(241 243 248 / var(--tw-bg-opacity))!important}.agora-date-picker .date-picker .date-picker-input:-moz-read-only:focus:-moz-read-only,.agora-date-picker .date-picker .date-picker-input:disabled:focus:-moz-read-only{--tw-border-opacity:1!important;border-color:rgb(3 74 216 / var(--tw-border-opacity))!important}.agora-date-picker .date-picker .date-picker-input:disabled:focus:read-only,.agora-date-picker .date-picker .date-picker-input:read-only:focus:read-only{--tw-border-opacity:1!important;border-color:rgb(3 74 216 / var(--tw-border-opacity))!important}.agora-date-picker .date-picker .date-picker-input~.input-btn-toggle:active{visibility:visible}.agora-date-picker .date-picker .date-picker-input:not(:focus){outline-width:0}.agora-date-picker .date-picker .date-picker-input:not(:disabled):focus{--tw-border-opacity:1;border-color:rgb(3 74 216 / var(--tw-border-opacity));outline:2px solid transparent;outline-offset:2px;outline-color:#034ad8}.agora-date-picker .date-picker .date-picker-input:not(:disabled):focus~.input-btn-toggle svg>*{fill:#034ad8;opacity:1}.agora-date-picker .date-picker-dialog{position:absolute;clear:both;border-radius:4px;border-width:2px;border-style:solid;--tw-border-opacity:1;border-color:rgb(225 228 234 / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));padding:0;--tw-shadow:0px 12px 16px 4px rgba(0, 0, 0, 0.07);--tw-shadow-colored:0px 12px 16px 4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);width:352px;top:100px}@media (max-width:768px){.agora-date-picker .date-picker-dialog{top:105px;width:328px}}.agora-date-picker .date-picker-dialog .header button{width:60px;height:60px;min-width:60px;margin:0 4px 0 4px}.agora-date-picker .date-picker-dialog .header button svg>*{--tw-bg-opacity:1;background-color:rgb(3 74 216 / var(--tw-bg-opacity));fill:#034ad8}.agora-date-picker .date-picker-dialog .header button:active svg>*,.agora-date-picker .date-picker-dialog .header button:hover svg>*{--tw-bg-opacity:1;background-color:rgb(3 74 216 / var(--tw-bg-opacity));fill:#034ad8}.agora-date-picker .date-picker-dialog .table-wrap{padding-left:16px;padding-right:16px}.agora-date-picker .date-picker-dialog .table-wrap thead{margin-bottom:16px}.agora-date-picker .date-picker-dialog .table-wrap thead tr th{margin-left:8px;margin-right:8px;--tw-bg-opacity:1;background-color:rgb(241 243 248 / var(--tw-bg-opacity));font-weight:500}.agora-date-picker .date-picker-dialog .table-wrap tbody::before{display:block;height:8px}.agora-date-picker .date-picker-dialog .dates{width:100%;border-collapse:inherit;border-spacing:4px 0}.agora-date-picker .date-picker-dialog .dates td{margin:0;box-sizing:border-box;height:40px;width:40px;border-radius:4px;border-width:2px;border-color:transparent;--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));font-size:1rem;line-height:1.75rem;letter-spacing:0;font-weight:300;padding:4px}.agora-date-picker .date-picker-dialog .dates td.event-disabled{cursor:not-allowed!important;--tw-text-opacity:1!important;color:rgb(156 166 184 / var(--tw-text-opacity))!important}.agora-date-picker .date-picker-dialog .dates td.event-disabled::before{content:"";height:2px;width:26px;top:17px;left:5px;opacity:1;position:absolute;--tw-bg-opacity:1;background-color:rgb(43 54 60 / var(--tw-bg-opacity))}.agora-date-picker .date-picker-dialog .dates td:focus{z-index:50;outline-style:solid;outline-width:0;outline-offset:0;outline-color:#034ad8}.agora-date-picker .date-picker-dialog .dates td:hover{--tw-bg-opacity:1;background-color:rgb(229 238 255 / var(--tw-bg-opacity));padding:0}.agora-date-picker .date-picker-dialog .dates td.disabled{--tw-text-opacity:1;color:rgb(43 54 60 / var(--tw-text-opacity));opacity:.2}.agora-date-picker .date-picker-dialog .dates td[aria-selected]{--tw-bg-opacity:1!important;background-color:rgb(3 74 216 / var(--tw-bg-opacity))!important;--tw-text-opacity:1!important;color:rgb(255 255 255 / var(--tw-text-opacity))!important}.agora-date-picker .date-picker-dialog .dates td[aria-selected] .event-date{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.agora-date-picker .date-picker-dialog .dates td[tabindex="0"]{border-width:2px;--tw-border-opacity:1;border-color:rgb(3 74 216 / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));font-weight:700;--tw-text-opacity:1;color:rgb(3 74 216 / var(--tw-text-opacity))}.agora-date-picker .date-picker-dialog .dates td:not(.disabled):hover{--tw-text-opacity:1;color:rgb(3 74 216 / var(--tw-text-opacity));padding:2px}.agora-date-picker .date-picker-dialog .dates td,.agora-date-picker .date-picker-dialog .dates th{position:relative;box-sizing:border-box;text-align:center}.agora-date-picker .date-picker-dialog .dates td .event-date,.agora-date-picker .date-picker-dialog .dates th .event-date{position:absolute;--tw-bg-opacity:1;background-color:rgb(3 74 216 / var(--tw-bg-opacity));top:4px;right:4px;width:4px;height:4px;border-radius:100%}.agora-date-picker .date-picker-dialog .dates td .event-disabled,.agora-date-picker .date-picker-dialog .dates th .event-disabled{cursor:not-allowed!important;--tw-text-opacity:1!important;color:rgb(156 166 184 / var(--tw-text-opacity))!important;height:2px;width:26px;top:17px;left:5px;opacity:1;position:absolute;--tw-bg-opacity:1;background-color:rgb(43 54 60 / var(--tw-bg-opacity))}.agora-date-picker .date-picker-dialog .next-month,.agora-date-picker .date-picker-dialog .next-year,.agora-date-picker .date-picker-dialog .prev-month,.agora-date-picker .date-picker-dialog .prev-year{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity));padding:4px}.agora-date-picker.input-has-error .input-btn-toggle{--tw-bg-opacity:1;background-color:rgb(254 241 242 / var(--tw-bg-opacity))}.agora-date-picker.input-has-error .input-btn-toggle svg>*{fill:#2b363c}.agora-date-picker.input-has-error .date-picker-input:not(:disabled):not(:-moz-read-only){border-width:2px!important;--tw-border-opacity:1!important;border-color:rgb(222 45 59 / var(--tw-border-opacity))!important;--tw-bg-opacity:1!important;background-color:rgb(254 241 242 / var(--tw-bg-opacity))!important}.agora-date-picker.input-has-error .date-picker-input:not(:disabled):not(:read-only){border-width:2px!important;--tw-border-opacity:1!important;border-color:rgb(222 45 59 / var(--tw-border-opacity))!important;--tw-bg-opacity:1!important;background-color:rgb(254 241 242 / var(--tw-bg-opacity))!important}

package/dist/components/ui/organisms/input-phone/index.js

@@ -1 +0,0 @@
-export { InputPhone, PhoneCountryISOs, PhoneCountryCodes } from './input-phone';

package/dist/components/ui/organisms/input-phone/input-phone.js

@@ -1,210 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import classNames from 'classnames';
-import React, { forwardRef, useEffect, useId, useImperativeHandle, useRef, useState } from 'react';
-import { stringToBoolean } from '../../../index';
-import { Icon } from '../../atoms/icon';
-import { DropdownList, DropdownSection } from '../../molecules/dropdown-list';
-import './input-phone.scss';
-import FlagsList from './resources/config';
-export const PhoneCountryCodes = FlagsList.map((l) => l.code);
-export const PhoneCountryISOs = FlagsList.map((l) => l.iso);
-const InnerInputPhone = (_a, ref) => {
-    var _b;
-    var { label = 'Input Label', defaultISO, defaultCode, comboboxAriaLabel, hideLabel, hasError, hasFeedback, feedbackText, feedbackState = 'info', className = '', searchInputAriaLabel, searchInputPlaceholder, searchNoResultsText, visibleCount, required = true, searchable } = _a, props = __rest(_a, ["label", "defaultISO", "defaultCode", "comboboxAriaLabel", "hideLabel", "hasError", "hasFeedback", "feedbackText", "feedbackState", "className", "searchInputAriaLabel", "searchInputPlaceholder", "searchNoResultsText", "visibleCount", "required", "searchable"]);
-    const generatedId = useId();
-    const dropDownSectionGeneratedId = useId();
-    const propsClone = Object.assign({}, props);
-    propsClone.id = propsClone.id || generatedId;
-    const controlRef = useRef(null);
-    const wrapperRef = useRef(null);
-    const buttonRef = useRef(null);
-    const inputRef = useRef(null);
-    const [hasValue, setHasValue] = useState(propsClone.value ? propsClone.value.toString().length > 0 : false);
-    const [showOverlay, setShowOverlay] = useState(false);
-    const [isFocused, setIsFocused] = useState(false);
-    let initial = FlagsList[0];
-    const searchForProp = defaultISO || defaultCode;
-    if (searchForProp) {
-        initial =
-            FlagsList.find((country) => {
-                return country.code === searchForProp || country.iso.toLocaleLowerCase() === searchForProp.toLocaleLowerCase();
-            }) || initial;
-    }
-    const [currentCountry, setCurrentCountry] = useState(Object.assign(Object.assign({}, initial), { flag: `data:image/png;base64, ${initial.flag}` }));
-    useImperativeHandle(ref, () => {
-        return {
-            current: inputRef.current,
-            iso: currentCountry.iso,
-            code: currentCountry.code
-        };
-    }, []);
-    /*
-      INPUT HANDLERS
-    */
-    const handleChangeEvent = (evt) => {
-        var _a;
-        const { value } = evt.currentTarget;
-        setHasValue(value.length > 0);
-        (_a = propsClone.onChange) === null || _a === void 0 ? void 0 : _a.call(propsClone, {
-            current: inputRef.current,
-            iso: currentCountry.iso,
-            code: currentCountry.code
-        });
-    };
-    const handleInputFocus = () => {
-        setIsFocused(true);
-        setShowOverlay(false);
-    };
-    const handleInputBlur = (evt) => {
-        if (!evt.relatedTarget) {
-            setIsFocused(false);
-        }
-    };
-    const handleInputKeyDown = (evt) => {
-        if (evt.code === 'Tab') {
-            setIsFocused(false);
-        }
-    };
-    /*
-      BUTTON HANDLERS
-    */
-    const handleBtnSelectClicked = () => {
-        var _a;
-        if (propsClone.disabled || propsClone.readOnly) {
-            return;
-        }
-        if (!showOverlay) {
-            (_a = controlRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-        }
-        setShowOverlay(!showOverlay);
-    };
-    /*
-      DROPDOWN EVENT HANDLERS
-    */
-    const handleDropdownDismiss = () => {
-        var _a, _b, _c;
-        setShowOverlay(false);
-        // if next focused element is inside the component
-        if ((_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement)) {
-            (_c = (_b = wrapperRef.current) === null || _b === void 0 ? void 0 : _b.querySelector('input')) === null || _c === void 0 ? void 0 : _c.focus();
-        }
-    };
-    const onDropdownChange = (results) => {
-        var _a, _b, _c, _d, _e, _f;
-        // focus input ref and automatically lose focus
-        (_b = (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('input')) === null || _b === void 0 ? void 0 : _b.focus();
-        // set value
-        setCurrentCountry({
-            country: (_c = results[0].data) === null || _c === void 0 ? void 0 : _c.country,
-            code: (_d = results[0].data) === null || _d === void 0 ? void 0 : _d.code,
-            iso: results[0].value,
-            flag: results[0].icon
-        });
-        (_e = propsClone.onChange) === null || _e === void 0 ? void 0 : _e.call(propsClone, {
-            current: inputRef.current,
-            iso: results[0].value,
-            code: (_f = results[0].data) === null || _f === void 0 ? void 0 : _f.code
-        });
-    };
-    const onDropdownControlBlur = (evt) => {
-        var _a, _b;
-        const isRelatedTargetInputTel = ((_a = evt.relatedTarget) === null || _a === void 0 ? void 0 : _a.getAttribute('type')) === 'tel';
-        if (isRelatedTargetInputTel || !evt.relatedTarget || !((_b = wrapperRef.current) === null || _b === void 0 ? void 0 : _b.contains(evt.relatedTarget))) {
-            setShowOverlay(false);
-        }
-    };
-    const feedbackStateIconsMap = {
-        info: 'agora-solid-info-mark',
-        danger: 'agora-solid-alert-triangle',
-        success: 'agora-solid-check-circle',
-        warning: 'agora-solid-alert-circle'
-    };
-    const inputClassBuilder = () => {
-        return {
-            inputWrapperClasses: classNames('agora-input-phone-wrapper', {
-                'input-has-error': stringToBoolean(hasError)
-            }),
-            labelSectionClasses: classNames('input-label-wrapper', 'flex', 'items-end', {
-                'mb-8': label && !stringToBoolean(hideLabel),
-                'justify-end': !label || stringToBoolean(hideLabel),
-                'justify-between': label && !stringToBoolean(hideLabel)
-            }),
-            inputClasses: classNames('agora-input-text', 'flex-1', className),
-            inputWrapper: classNames('input-wrapper flex relative items-center', {
-                'is-focused': isFocused || showOverlay,
-                'has-value': hasValue,
-                'input-disabled': propsClone.disabled,
-                'input-readonly': propsClone.readOnly
-            }),
-            overlayClasses: classNames('country-list-overlay', {
-                'is-visible': showOverlay,
-                'no-visible': !showOverlay
-            }),
-            feedbackIconWrapperClasses: classNames('mr-8 feedback-icon-wrapper', stringToBoolean(hasError) ? 'feedback-icon-wrapper-danger' : `feedback-icon-wrapper-${feedbackState}`)
-        };
-    };
-    const { inputWrapperClasses, labelSectionClasses, inputClasses, inputWrapper, overlayClasses, feedbackIconWrapperClasses } = inputClassBuilder();
-    //  REMOVE ARIA DESCENDANT ON HIDE OVERLAY
-    useEffect(() => {
-        var _a;
-        if (!showOverlay) {
-            (_a = controlRef.current) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', '');
-        }
-    }, [showOverlay]);
-    //  PREVENT NON NUMERIC INPUTS
-    useEffect(() => {
-        var _a;
-        const keypressHandler = (evt) => {
-            if (/\d/.test(evt.key)) {
-                return true;
-            }
-            evt.preventDefault();
-            evt.stopPropagation();
-            return false;
-        };
-        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('keypress', keypressHandler);
-        return () => {
-            var _a;
-            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('keypress', keypressHandler);
-        };
-    }, []);
-    return (React.createElement("div", { hidden: !!propsClone.hidden, className: inputWrapperClasses, ref: wrapperRef },
-        React.createElement("div", { className: labelSectionClasses },
-            React.createElement("label", { hidden: stringToBoolean(hideLabel), htmlFor: propsClone.id, className: "text-primary-900 text-interaction-input-label" }, label)),
-        React.createElement("div", { className: "opacity-0 absolute -z-10", ref: controlRef, id: `${propsClone.id}-dropdown-control`, role: "combobox", "aria-controls": `${propsClone.id}-dropdown-container`, "aria-expanded": showOverlay, "aria-label": hideLabel ? propsClone['aria-label'] || label : propsClone['aria-label'], "aria-haspopup": "listbox", "aria-required": required, tabIndex: -1, onBlur: onDropdownControlBlur }, currentCountry.country),
-        React.createElement("div", null,
-            React.createElement("div", { className: inputWrapper },
-                React.createElement("button", { ref: buttonRef, type: "button", "aria-label": comboboxAriaLabel, className: `btn-indicator ${showOverlay && 'btn-indicator-arrow-up'}  flex`, onClick: handleBtnSelectClicked, tabIndex: propsClone.disabled ? -1 : 0 },
-                    React.createElement("img", { className: "icon-md", src: `${currentCountry.flag}`, alt: currentCountry.country, width: 26 }),
-                    React.createElement(Icon, { name: "agora-solid-arrow-down", "aria-hidden": true, className: "ml-8" })),
-                React.createElement("span", { className: "country-code text-neutral-300", "aria-disabled": true },
-                    "+(", (_b = currentCountry.code) !== null && _b !== void 0 ? _b : FlagsList[0].code,
-                    ")"),
-                React.createElement("input", Object.assign({ type: "tel", id: propsClone.id, className: inputClasses }, propsClone, { disabled: propsClone.disabled, readOnly: propsClone.readOnly, "aria-invalid": stringToBoolean(hasError), "aria-disabled": stringToBoolean(propsClone.disabled), "aria-required": required, onFocus: handleInputFocus, onBlur: handleInputBlur, onKeyDown: handleInputKeyDown, ref: inputRef, onChange: handleChangeEvent }))),
-            React.createElement("div", { className: overlayClasses }, showOverlay && (React.createElement(DropdownList, { "aria-label": propsClone['aria-label'], searchable: searchable, searchInputAriaLabel: searchInputAriaLabel, searchInputPlaceholder: searchInputPlaceholder, searchNoResultsText: searchNoResultsText, controlRef: controlRef, id: `${propsClone.id}-dropdown-container`, visibleCount: visibleCount, onDismiss: handleDropdownDismiss, onChange: onDropdownChange },
-                React.createElement(DropdownSection, { type: "text", id: dropDownSectionGeneratedId, hasIcon: true, items: FlagsList.map((country) => ({
-                        text: `+(${country.code}) ${country.country}`,
-                        value: country.iso,
-                        selected: country.iso.toLocaleLowerCase() === currentCountry.iso.toLocaleLowerCase(),
-                        icon: `data:image/png;base64, ${country.flag}`,
-                        data: {
-                            country: country.country,
-                            code: country.code
-                        }
-                    })) }))))),
-        stringToBoolean(hasFeedback) && feedbackText && (React.createElement("div", { className: "flex items-center input-feedback mt-8" },
-            React.createElement("span", { className: feedbackIconWrapperClasses },
-                React.createElement(Icon, { name: !stringToBoolean(hasError) ? feedbackStateIconsMap[feedbackState] : 'agora-solid-alert-triangle', dimensions: "s", "aria-hidden": true })),
-            React.createElement("p", { className: "text-s-regular text-neutral-700" }, feedbackText)))));
-};
-export const InputPhone = forwardRef(InnerInputPhone);

package/dist/components/ui/organisms/input-phone/input-phone.scss

@@ -1 +0,0 @@
-.agora-input-phone-wrapper{position:relative;display:flex;flex-direction:column}.agora-input-phone-wrapper .country-list-overlay{pointer-events:none;position:absolute;width:100%;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}.agora-input-phone-wrapper .country-list-overlay.is-visible{pointer-events:auto;margin-top:8px;opacity:1}.agora-input-phone-wrapper .country-list-overlay.no-visible{pointer-events:auto}.agora-input-phone-wrapper .icon-md{height:24px!important;width:36px!important}.agora-input-phone-wrapper .btn-indicator{position:relative;margin-right:16px;display:flex;min-width:-moz-fit-content;min-width:fit-content;align-items:center;justify-content:space-between;border-radius:4px;border-width:2px;border-color:transparent;padding-left:16px;padding-right:16px;min-height:60px}.agora-input-phone-wrapper .btn-indicator::after{position:absolute;--tw-bg-opacity:1;background-color:rgb(205 210 220 / var(--tw-bg-opacity));content:"";width:2px;height:60px;right:-4px;z-index:-1}.agora-input-phone-wrapper .btn-indicator svg{--tw-rotate:0deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transition-property:all;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.agora-input-phone-wrapper .btn-indicator-arrow-up svg{--tw-rotate:180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.agora-input-phone-wrapper .btn-indicator:focus{border-radius:4px;border-width:2px;--tw-border-opacity:1;border-color:rgb(3 74 216 / var(--tw-border-opacity));outline-width:0}.agora-input-phone-wrapper .feedback-icon-wrapper-info svg>*{fill:#0079bf}.agora-input-phone-wrapper .feedback-icon-wrapper-success svg>*{fill:#008558}.agora-input-phone-wrapper .feedback-icon-wrapper-danger svg>*{fill:#de2d3b}.agora-input-phone-wrapper .feedback-icon-wrapper-warning svg>*{fill:#f2a222}.agora-input-phone-wrapper .input-wrapper{overflow:hidden;border-radius:4px;border-width:2px;--tw-border-opacity:1;border-color:rgb(205 210 220 / var(--tw-border-opacity));padding-right:16px;font-size:1rem;line-height:1.75rem;letter-spacing:0;font-weight:400;--tw-text-opacity:1;color:rgb(43 54 60 / var(--tw-text-opacity));outline:2px solid transparent;outline-offset:2px;transition-property:all;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.agora-input-phone-wrapper .input-wrapper.is-focused{--tw-border-opacity:1;border-color:rgb(3 74 216 / var(--tw-border-opacity));outline-style:solid;outline-width:2px;outline-offset:2px;outline-color:#034ad8}.agora-input-phone-wrapper .input-wrapper.is-focused .btn-indicator{border-color:transparent}.agora-input-phone-wrapper .input-wrapper.is-focused .btn-indicator::after{--tw-bg-opacity:1;background-color:rgb(3 74 216 / var(--tw-bg-opacity))}.agora-input-phone-wrapper .input-wrapper.input-disabled,.agora-input-phone-wrapper .input-wrapper.input-readonly{pointer-events:none;cursor:not-allowed!important;--tw-border-opacity:1!important;border-color:rgb(241 243 248 / var(--tw-border-opacity))!important;--tw-bg-opacity:1!important;background-color:rgb(241 243 248 / var(--tw-bg-opacity))!important}.agora-input-phone-wrapper .input-wrapper.input-disabled .btn-indicator::after,.agora-input-phone-wrapper .input-wrapper.input-readonly .btn-indicator::after{opacity:.1}.agora-input-phone-wrapper .input-wrapper.has-value:not(.is-focused):not(.input-disabled):not(.input-readonly){--tw-border-opacity:1;border-color:rgb(156 166 184 / var(--tw-border-opacity))}.agora-input-phone-wrapper .input-wrapper.has-value:not(.is-focused):not(.input-disabled):not(.input-readonly) .btn-indicator::after{--tw-bg-opacity:1;background-color:rgb(156 166 184 / var(--tw-bg-opacity))}.agora-input-phone-wrapper .input-wrapper:hover:not(.is-focused):not(.input-disabled):not(.input-readonly){--tw-border-opacity:1;border-color:rgb(71 81 100 / var(--tw-border-opacity))}.agora-input-phone-wrapper .input-wrapper:hover:not(.is-focused):not(.input-disabled):not(.input-readonly) .btn-indicator::after{--tw-bg-opacity:1;background-color:rgb(71 81 100 / var(--tw-bg-opacity))}.agora-input-phone-wrapper .agora-input-text{width:100%;border-style:none;padding-left:8px;padding-right:16px;height:60px}.agora-input-phone-wrapper .agora-input-text.has-leading-icon{padding-left:56px}.agora-input-phone-wrapper .agora-input-text:hover:not(:focus):not(:disabled):not(:-moz-read-only){border-style:none}.agora-input-phone-wrapper .agora-input-text:hover:not(:focus):not(:disabled):not(:read-only){border-style:none}.agora-input-phone-wrapper .agora-input-text:-moz-read-only{cursor:not-allowed!important;--tw-border-opacity:1!important;border-color:rgb(241 243 248 / var(--tw-border-opacity))!important;--tw-bg-opacity:1!important;background-color:rgb(241 243 248 / var(--tw-bg-opacity))!important}.agora-input-phone-wrapper .agora-input-text:disabled,.agora-input-phone-wrapper .agora-input-text:read-only{cursor:not-allowed!important;--tw-border-opacity:1!important;border-color:rgb(241 243 248 / var(--tw-border-opacity))!important;--tw-bg-opacity:1!important;background-color:rgb(241 243 248 / var(--tw-bg-opacity))!important}.agora-input-phone-wrapper .agora-input-text:-moz-read-only:focus:-moz-read-only,.agora-input-phone-wrapper .agora-input-text:disabled:focus:-moz-read-only{--tw-border-opacity:1!important;border-color:rgb(3 74 216 / var(--tw-border-opacity))!important}.agora-input-phone-wrapper .agora-input-text:disabled:focus:read-only,.agora-input-phone-wrapper .agora-input-text:read-only:focus:read-only{--tw-border-opacity:1!important;border-color:rgb(3 74 216 / var(--tw-border-opacity))!important}.agora-input-phone-wrapper .agora-input-text~.input-btn-clear:active{visibility:visible!important}.agora-input-phone-wrapper .agora-input-text.has-value:not(:-moz-read-only){--tw-border-opacity:1;border-color:rgb(156 166 184 / var(--tw-border-opacity))}.agora-input-phone-wrapper .agora-input-text.has-value:not(:read-only){--tw-border-opacity:1;border-color:rgb(156 166 184 / var(--tw-border-opacity))}.agora-input-phone-wrapper .agora-input-text:not(:focus){outline-width:0}.agora-input-phone-wrapper .agora-input-text:not(:disabled):focus{outline:2px solid transparent;outline-offset:2px}.agora-input-phone-wrapper.input-has-error .input-wrapper{--tw-border-opacity:1!important;border-color:rgb(222 45 59 / var(--tw-border-opacity))!important;--tw-bg-opacity:1!important;background-color:rgb(254 241 242 / var(--tw-bg-opacity))!important}.agora-input-phone-wrapper.input-has-error .input-wrapper input{background-color:transparent}.agora-input-phone-wrapper.input-has-error .input-wrapper .btn-indicator::after{--tw-bg-opacity:1!important;background-color:rgb(222 45 59 / var(--tw-bg-opacity))!important;z-index:1}