@alfalab/core-components-international-phone-input 1.0.0

package/esm/components/country-select/Component.js

@@ -0,0 +1,52 @@
+import { __rest, __assign } from 'tslib';
+import React, { useMemo, useCallback } from 'react';
+import { VirtualOptionsList, BaseOption } from '@alfalab/core-components-select/esm/shared';
+import { getDataTestId } from '@alfalab/core-components-shared/esm';
+import { WorldMagnifierMIcon } from '@alfalab/icons-glyph/WorldMagnifierMIcon';
+import { FlagIcon } from '../flag-icon/component.js';
+import { EMPTY_COUNTRY_SELECT_FIELD, SelectField } from '../select-field/component.js';
+import 'classnames';
+import '../flag-icon/flagSprite.js';
+import 'react-merge-refs';
+import '@alfalab/hooks';
+
+var styles = {"component":"international-phone-input__component_g8rhr","option":"international-phone-input__option_g8rhr","flag":"international-phone-input__flag_g8rhr","countryName":"international-phone-input__countryName_g8rhr","dialCode":"international-phone-input__dialCode_g8rhr","flagIconWrapper":"international-phone-input__flagIconWrapper_g8rhr","emptyCountryIcon":"international-phone-input__emptyCountryIcon_g8rhr"};
+require('./index.css')
+
+var CountrySelect = function (_a) {
+    var hideCountrySelect = _a.hideCountrySelect, countries = _a.countries, country = _a.country, dataTestId = _a.dataTestId, fieldWidth = _a.fieldWidth, onChange = _a.onChange, _b = _a.view, view = _b === void 0 ? 'desktop' : _b, SelectComponent = _a.SelectComponent, restProps = __rest(_a, ["hideCountrySelect", "countries", "country", "dataTestId", "fieldWidth", "onChange", "view", "SelectComponent"]);
+    var options = useMemo(function () {
+        return (countries === null || countries === void 0 ? void 0 : countries.map(function (areas) {
+            var _a = areas[0], iso2 = _a.iso2, dialCode = _a.dialCode, name = _a.name;
+            return {
+                key: iso2,
+                value: areas[0],
+                content: (React.createElement("span", { className: styles.option },
+                    React.createElement(FlagIcon, { country: iso2, className: styles.flag }),
+                    React.createElement("span", { className: styles.optionTextWrap },
+                        React.createElement("span", { className: styles.countryName }, name),
+                        React.createElement("span", { className: styles.dialCode },
+                            "+",
+                            dialCode)))),
+            };
+        })) || [];
+    }, [countries]);
+    var renderOptionsList = useCallback(function (props) { return (React.createElement("div", { style: { width: fieldWidth || 0 } },
+        React.createElement(VirtualOptionsList, __assign({}, props, { optionsListWidth: 'field' })))); }, [fieldWidth]);
+    var renderFlagIcon = function () { return (React.createElement("span", { className: styles.flagIconWrapper }, (country === null || country === void 0 ? void 0 : country.iso2) ? (React.createElement(FlagIcon, { country: country.iso2 })) : (React.createElement(WorldMagnifierMIcon, { className: styles.emptyCountryIcon })))); };
+    var renderCountrySelect = function () {
+        var _a;
+        var selected = (_a = options.find(function (c) { return c.key === (country === null || country === void 0 ? void 0 : country.iso2); })) === null || _a === void 0 ? void 0 : _a.key;
+        return (
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+        React.createElement("div", { className: styles.component, onClick: function (event) { return event.stopPropagation(); } },
+            React.createElement(SelectComponent, __assign({ Option: BaseOption }, restProps, { dataTestId: getDataTestId(dataTestId, 'country-select'), options: options, selected: selected || EMPTY_COUNTRY_SELECT_FIELD, onChange: onChange, Field: SelectField, OptionsList: view === 'mobile' ? VirtualOptionsList : renderOptionsList }, (view === 'mobile' && {
+                bottomSheetProps: {
+                    title: 'Выберите страну',
+                },
+            })))));
+    };
+    return hideCountrySelect || options.length < 2 ? renderFlagIcon() : renderCountrySelect();
+};
+
+export { CountrySelect };

package/esm/components/country-select/index.css

@@ -0,0 +1,47 @@
+/* hash: 1hqzw */
+:root {
+} /* deprecated */ :root {
+    --color-light-graphic-secondary: #86868a;
+    --color-light-text-secondary: rgba(60, 60, 67, 0.66); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+    --gap-xs: 8px;
+    --gap-s: 12px;
+} :root {
+} :root {
+    --text-secondary-color: var(--color-light-text-secondary);
+} .international-phone-input__component_g8rhr {
+    position: static;
+    display: flex;
+    min-width: initial;
+    height: 100%;
+} .international-phone-input__option_g8rhr {
+    display: flex;
+    align-items: flex-start;
+    padding: var(--gap-s);
+} .international-phone-input__flag_g8rhr {
+    flex-shrink: 0;
+    margin-right: var(--gap-xs);
+} .international-phone-input__countryName_g8rhr {
+    margin-right: var(--gap-xs);
+} .international-phone-input__dialCode_g8rhr {
+    color: var(--text-secondary-color);
+} .international-phone-input__flagIconWrapper_g8rhr {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 24px;
+    height: 24px;
+    margin-left: var(--gap-s);
+} .international-phone-input__emptyCountryIcon_g8rhr {
+    color: var(--color-light-graphic-secondary);
+}

package/esm/components/country-select/index.d.ts

@@ -0,0 +1 @@
+export { CountrySelect, SharedCountrySelectProps } from "./Component";

package/esm/components/country-select/index.js

@@ -0,0 +1,12 @@
+export { CountrySelect } from './Component.js';
+import 'tslib';
+import 'react';
+import '@alfalab/core-components-select/esm/shared';
+import '@alfalab/core-components-shared/esm';
+import '@alfalab/icons-glyph/WorldMagnifierMIcon';
+import '../flag-icon/component.js';
+import 'classnames';
+import '../flag-icon/flagSprite.js';
+import '../select-field/component.js';
+import 'react-merge-refs';
+import '@alfalab/hooks';

package/esm/components/flag-icon/component.d.ts

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+type FlagIconProps = {
+    /**
+     * Код страны из <a href="https://ru.wikipedia.org/wiki/ISO_3166-1_alpha-2" target="_blank">ISO 3166-1 alpha-2</a>
+     */
+    country?: string;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+};
+/**
+ * Компонент флага в виде иконки.
+ */
+declare const FlagIcon: FC<FlagIconProps>;
+export { FlagIconProps, FlagIcon };

package/esm/components/flag-icon/component.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import cn from 'classnames';
+import { flagSprite } from './flagSprite.js';
+
+var styles = {"flagIcon":"international-phone-input__flagIcon_1xrmt","flagPlaceholder":"international-phone-input__flagPlaceholder_1xrmt"};
+require('./index.css')
+
+/**
+ * Компонент флага в виде иконки.
+ */
+var FlagIcon = function (_a) {
+    var _b = _a.country, country = _b === void 0 ? '' : _b, className = _a.className;
+    return flagSprite[country] ? (React.createElement("span", { className: cn(styles.flagIcon, className), "data-test-id": "flag-icon-".concat(country), 
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML: { __html: flagSprite[country] } })) : (React.createElement("div", { className: cn(styles.flagPlaceholder, className) }));
+};
+
+export { FlagIcon };

package/esm/components/flag-icon/flagSprite.d.ts

@@ -0,0 +1,2 @@
+declare const flagSprite: Record<string, string>;
+export { flagSprite };