@trilogy-ds/react 0.0.1-beta-1 → 0.0.1-beta-3

package/lib/components/select/web/SelectDynamic.js

@@ -0,0 +1,54 @@
+import { hashClass } from '../../../helpers';
+import clsx from 'clsx';
+import { useUtils } from '../hooks/utils';
+import { useAccessibility } from '../hooks/accessibility';
+import React from 'react';
+import { Icon } from '../../icon';
+import SelectOption from '../option';
+import { has } from '../../../services';
+const SelectDynamic = ({ styled, onChange, nullable, disabled, onFocus, onBlur, children, selected, name, id, testId, classNameOptions, selecteClasses, label, iconName, ...others }) => {
+    const { handleChangeSelect, handleFocusCurrentOption, handleFocusSelect, handleOpenSelect, isOpenSelect, setIsOpenSelect, optionRefs, selectRef, selectedOption, } = useUtils({
+        onChange,
+        nullable,
+        disabled,
+        onFocus,
+        onBlur,
+        children,
+        selected,
+        name,
+        id,
+    });
+    const { handleKeyDown } = useAccessibility(isOpenSelect, handleChangeSelect, setIsOpenSelect, optionRefs, selectRef, handleFocusCurrentOption);
+    const optionsClasses = React.useMemo(() => hashClass(styled, clsx('select-options', classNameOptions)), [classNameOptions, styled]);
+    const selectedValueClasses = React.useMemo(() => hashClass(styled, clsx('select-value', !label && 'no-label')), [styled]);
+    const controlClasses = React.useMemo(() => hashClass(styled, clsx('control', (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) && has('dynamic-placeholder'))), [styled, selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value]);
+    return (React.createElement("div", { className: hashClass(styled, clsx('field')) },
+        React.createElement("div", { className: controlClasses },
+            React.createElement("div", { ref: selectRef, onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, id: id, "data-testid": testId, "data-select-name": name, className: selecteClasses, onClick: handleOpenSelect, onFocus: handleFocusSelect, "aria-haspopup": 'listbox', "aria-label": label, "aria-disabled": disabled, role: 'listbox', ...others },
+                iconName && React.createElement(Icon, { name: iconName, size: 'small' }),
+                label && React.createElement("label", null, label),
+                (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.name) && React.createElement("span", { className: selectedValueClasses }, selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.name)),
+            React.createElement("div", { "data-is-open-options": isOpenSelect, className: optionsClasses, "aria-expanded": isOpenSelect, "aria-hidden": !isOpenSelect }, React.Children.map(children, (child, index) => {
+                if (React.isValidElement(child)) {
+                    const props = {
+                        ...child.props,
+                        selected: child.props.value === (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value),
+                        onClick: () => {
+                            handleChangeSelect({
+                                selectValue: child.props.value,
+                                selectName: child.props.children || child.props.label,
+                                selectId: child.props.id,
+                                disabled: child.props.disabled,
+                            });
+                            if (child.props.onClick)
+                                child.props.onClick();
+                        },
+                    };
+                    return (React.createElement("div", { "data-is-disabled": child.props.disabled, className: hashClass(styled, clsx('option-container')), "data-is-active": child.props.value === (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value), "data-index": child.props.value, "data-id": child.props.id, "data-textcontent": child.props.children || child.props.label, onKeyDown: (e) => handleKeyDown(e, child), ref: (element) => (optionRefs.current[index] = element), tabIndex: child.props.value === (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) ? 0 : -1, onMouseEnter: () => { var _a; return (_a = optionRefs.current[index]) === null || _a === void 0 ? void 0 : _a.focus(); }, onMouseLeave: () => { var _a; return (_a = optionRefs.current[index]) === null || _a === void 0 ? void 0 : _a.blur(); } },
+                        React.createElement(SelectOption, { ...props })));
+                }
+                return null;
+            })))));
+};
+export default SelectDynamic;
+//# sourceMappingURL=SelectDynamic.js.map

package/lib/components/select/web/SelectDynamic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectDynamic.js","sourceRoot":"","sources":["../../../../components/select/web/SelectDynamic.tsx"],"names":[],"mappings":"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"}

package/lib/components/select/web/SelectNative.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { IAccessibleSelect } from '../SelectProps';
+declare const SelectNative: ({ selecteClasses, onChange, onFocus, onBlur, id, name, disabled, children, label, iconName, styled, testId, accessibilityLabel, selected, ...others }: IAccessibleSelect) => JSX.Element;
+export default SelectNative;

package/lib/components/select/web/SelectNative.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Icon } from '../../icon';
+import { hashClass } from '../../../helpers';
+import clsx from 'clsx';
+import { has } from '../../../services';
+const SelectNative = ({ selecteClasses, onChange, onFocus, onBlur, id, name, disabled, children, label, iconName, styled, testId, accessibilityLabel, selected, ...others }) => {
+    const controlClasses = React.useMemo(() => hashClass(styled, clsx('control', has('dynamic-placeholder'))), [styled]);
+    return (React.createElement("div", { className: hashClass(styled, clsx('field')) },
+        React.createElement("div", { className: controlClasses },
+            React.createElement("div", { className: selecteClasses },
+                iconName && React.createElement(Icon, { name: iconName, size: 'small' }),
+                React.createElement("select", { className: hashClass(styled, clsx(!label && 'no-label')), value: selected, "aria-label": accessibilityLabel, "data-testid": testId, role: 'listbox', onChange: (e) => {
+                        if (onChange) {
+                            onChange({
+                                selectValue: e.target.value,
+                                selectName: e.target.name,
+                                selectId: e.target.id,
+                                name: e.target.name,
+                            });
+                        }
+                    }, onFocus: onFocus, onBlur: onBlur, id: id ? String(id) : undefined, name: name, disabled: disabled, ...others }, children),
+                label && React.createElement("label", { htmlFor: id }, label)))));
+};
+export default SelectNative;
+//# sourceMappingURL=SelectNative.js.map

package/lib/components/select/web/SelectNative.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectNative.js","sourceRoot":"","sources":["../../../../components/select/web/SelectNative.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AAEjC,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAC5C,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAEvC,MAAM,YAAY,GAAG,CAAC,EACpB,cAAc,EACd,QAAQ,EACR,OAAO,EACP,MAAM,EACN,EAAE,EACF,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,MAAM,EACN,MAAM,EACN,kBAAkB,EAClB,QAAQ,EACR,GAAG,MAAM,EACS,EAAe,EAAE;IACnC,MAAM,cAAc,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,MAAM,EAAE,IAAI,CAAC,SAAS,EAAE,GAAG,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;IAEpH,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QAC9C,6BAAK,SAAS,EAAE,cAAc;YAC5B,6BAAK,SAAS,EAAE,cAAc;gBAC3B,QAAQ,IAAI,oBAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,OAAO,GAAG;gBAClD,gCACE,SAAS,EAAE,SAAS,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,KAAK,IAAI,UAAU,CAAC,CAAC,EACxD,KAAK,EAAE,QAAQ,gBACH,kBAAkB,iBACjB,MAAM,EACnB,IAAI,EAAC,SAAS,EACd,QAAQ,EAAE,CAAC,CAAuC,EAAE,EAAE;wBACpD,IAAI,QAAQ,EAAE;4BACZ,QAAQ,CAAC;gCACP,WAAW,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK;gCAC3B,UAAU,EAAE,CAAC,CAAC,MAAM,CAAC,IAAI;gCACzB,QAAQ,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE;gCACrB,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,IAAI;6BACpB,CAAC,CAAA;yBACH;oBACH,CAAC,EACD,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS,EAC/B,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,KACd,MAAM,IAET,QAAQ,CACF;gBACR,KAAK,IAAI,+BAAO,OAAO,EAAE,EAAE,IAAG,KAAK,CAAS,CACzC,CACF,CACF,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,YAAY,CAAA"}

package/lib/components/select/web/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SelectDynamic } from './SelectDynamic';
+export { default as SelectNative } from './SelectNative';

package/lib/components/select/web/index.js

@@ -0,0 +1,3 @@
+export { default as SelectDynamic } from './SelectDynamic';
+export { default as SelectNative } from './SelectNative';
+//# sourceMappingURL=index.js.map

package/lib/components/select/web/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/select/web/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC1D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAA"}

package/lib/components/selector/Selector.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { SelectorProps } from './SelectorProps';
+/**
+ * Selector Component
+ * @param children {ReactNode} Children for Selector
+ * @param onClick onClick event
+ * @param activeIndex {number} default active tab index
+ * @param disabled {boolean} Disabled Selector
+ * @param clipped {boolean} Remove the separator bar
+ * @param align {Alignable} Horizontal Align
+ * - -------------------------- WEB PROPERTIES -------------------------------
+ * @param className {string} Additionnal CSS Classes
+ * @param fullwidth {boolean} Fullwidth Selector
+ */
+declare const Selector: ({ children, className, onClick, activeIndex, disabled, align, justify, ...others }: SelectorProps) => JSX.Element;
+export default Selector;

package/lib/components/selector/Selector.js

@@ -0,0 +1,65 @@
+import React, { useEffect, useState } from 'react';
+import clsx from 'clsx';
+import SelectorItem from './item';
+import { Text } from '../text';
+import { is } from '../../services/classify';
+import { getAlignClassName } from '../../objects';
+/**
+ * Selector Component
+ * @param children {ReactNode} Children for Selector
+ * @param onClick onClick event
+ * @param activeIndex {number} default active tab index
+ * @param disabled {boolean} Disabled Selector
+ * @param clipped {boolean} Remove the separator bar
+ * @param align {Alignable} Horizontal Align
+ * - -------------------------- WEB PROPERTIES -------------------------------
+ * @param className {string} Additionnal CSS Classes
+ * @param fullwidth {boolean} Fullwidth Selector
+ */
+const Selector = ({ children, className, onClick, activeIndex, disabled, align, justify, ...others }) => {
+    const [activateIndex, setActivateIndex] = useState(activeIndex || 0);
+    const classes = clsx('selector', align && is(getAlignClassName(align)), justify && is(justify), className);
+    const isActive = (index, childPropsActive) => {
+        if (typeof childPropsActive !== 'undefined' && !activateIndex) {
+            return childPropsActive;
+        }
+        if (index === activateIndex) {
+            return true;
+        }
+    };
+    const toggleActive = (e, index) => {
+        if (disabled) {
+            return false;
+        }
+        setActivateIndex(index);
+        if (onClick) {
+            onClick(e);
+        }
+    };
+    useEffect(() => {
+        setActivateIndex(activateIndex);
+    }, [activateIndex]);
+    return (React.createElement("div", { className: classes, role: 'tablist', ...others },
+        React.createElement("ul", null, children &&
+            Array.isArray(children) &&
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            children.map((child, index) => {
+                const props = {
+                    active: Boolean(isActive(index, child.props.active)) || false,
+                    key: index,
+                    tabIndex: index,
+                    onClick: (event) => {
+                        toggleActive(event, index);
+                        if (child) {
+                            if (child.props.onClick) {
+                                child.props.onClick(event);
+                            }
+                        }
+                    },
+                };
+                return typeof child.valueOf() === 'string' ? (React.createElement(SelectorItem, { active: props.active, onClick: (e) => onClick === null || onClick === void 0 ? void 0 : onClick(e) },
+                    React.createElement(Text, null, String(child)))) : (React.cloneElement(child, props));
+            }))));
+};
+export default Selector;
+//# sourceMappingURL=Selector.js.map

package/lib/components/selector/Selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Selector.js","sourceRoot":"","sources":["../../../components/selector/Selector.tsx"],"names":[],"mappings":"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"}

package/lib/components/selector/Selector.native.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { SelectorProps } from './SelectorProps';
+/**
+ * Selector Component
+ * @param children {ReactNode} Children for Selector
+ * @param onClick onClick event
+ * @param activeIndex {number} default active selector index (0 by default)
+ * @param disabled {boolean} Disabled Selector
+ * @param inverted {boolean} change selector style to inverted
+ * @param align {Alignable} Horizontal Align
+ * @param end {selectorEnd: {message: string, onClick: onClick event}} Add last SelectorItem style to SECONDAY color
+ */
+declare const Selector: {
+    ({ children, onClick, activeIndex, disabled, inverted, align, end, testId, accessibilityLabel, ...others }: SelectorProps): JSX.Element;
+    displayName: string;
+};
+export default Selector;

package/lib/components/selector/Selector.native.js

@@ -0,0 +1,72 @@
+import React, { useEffect, useState } from 'react';
+import { StyleSheet, ScrollView, View } from 'react-native';
+import { Text, TextLevels } from '../text';
+import SelectorItem from './item';
+import { getAlignStyle } from '../../objects';
+/**
+ * Selector Component
+ * @param children {ReactNode} Children for Selector
+ * @param onClick onClick event
+ * @param activeIndex {number} default active selector index (0 by default)
+ * @param disabled {boolean} Disabled Selector
+ * @param inverted {boolean} change selector style to inverted
+ * @param align {Alignable} Horizontal Align
+ * @param end {selectorEnd: {message: string, onClick: onClick event}} Add last SelectorItem style to SECONDAY color
+ */
+const Selector = ({ children, onClick, activeIndex = 0, disabled, inverted, align, end, testId, accessibilityLabel, ...others }) => {
+    const [activateIndex, setActivateIndex] = useState(activeIndex);
+    useEffect(() => {
+        setActivateIndex(activeIndex);
+    }, [activeIndex]);
+    const isActive = (index, childPropsActive) => {
+        if (typeof childPropsActive !== 'undefined' && !activateIndex) {
+            return childPropsActive;
+        }
+        if (index === activateIndex) {
+            return true;
+        }
+    };
+    const toggleActive = (e, index) => {
+        if (disabled) {
+            return false;
+        }
+        setActivateIndex(index);
+        if (onClick) {
+            onClick(e);
+        }
+    };
+    const styles = StyleSheet.create({
+        selector: {
+            height: 'auto',
+            width: '100%',
+            alignSelf: getAlignStyle(align),
+        },
+    });
+    return (React.createElement(View, { style: styles.selector, testID: testId, accessibilityLabel: accessibilityLabel, accessible: !!accessibilityLabel, ...others },
+        React.createElement(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false },
+            children &&
+                Array.isArray(children) &&
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                children.map((child, index) => {
+                    const props = {
+                        active: Boolean(isActive(index, child.props.active)) || false,
+                        key: index,
+                        selectorIndex: index,
+                        inverted: inverted,
+                        onClick: (event) => {
+                            toggleActive(event, index);
+                            if (child) {
+                                if (child.props.onClick) {
+                                    child.props.onClick(event);
+                                }
+                            }
+                        },
+                    };
+                    return typeof child.valueOf() === 'string' ? (React.createElement(SelectorItem, { active: props.active, onClick: (e) => onClick === null || onClick === void 0 ? void 0 : onClick(e) },
+                        React.createElement(Text, { level: TextLevels.THREE }, String(child)))) : (React.cloneElement(child, props));
+                }),
+            end && (React.createElement(SelectorItem, { end: true, onClick: (e) => { var _a; return (_a = end.onClick) === null || _a === void 0 ? void 0 : _a.call(end, e); } }, end.message)))));
+};
+Selector.displayName = 'Selector';
+export default Selector;
+//# sourceMappingURL=Selector.native.js.map

package/lib/components/selector/Selector.native.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Selector.native.js","sourceRoot":"","sources":["../../../components/selector/Selector.native.tsx"],"names":[],"mappings":"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"}

package/lib/components/selector/SelectorProps.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { ClickEvent } from '../../events/OnClickEvent';
+import { Centerable } from '../../objects/facets/Centerable';
+import { AlignableProps } from '../../objects/facets/Alignable';
+import { JustifiableProps } from '../../objects/facets/Justifiable';
+import { Accessibility, Clickable } from '../../objects';
+/**
+ * Selector Interface
+ */
+interface SelectorEnd {
+    message: string;
+    onClick: ClickEvent;
+}
+export interface SelectorProps extends Centerable, AlignableProps, JustifiableProps, Clickable, Accessibility {
+    children: React.ReactNode;
+    disabled?: boolean;
+    activeIndex?: number;
+    className?: string;
+    inverted?: boolean;
+    end?: SelectorEnd;
+}
+export {};

package/lib/components/selector/SelectorProps.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=SelectorProps.js.map

package/lib/components/selector/SelectorProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectorProps.js","sourceRoot":"","sources":["../../../components/selector/SelectorProps.ts"],"names":[],"mappings":""}

package/lib/components/selector/index.d.ts

@@ -0,0 +1,3 @@
+import Selector from './Selector';
+import SelectorItem from './item';
+export { Selector, SelectorItem };

package/lib/components/selector/index.js

@@ -0,0 +1,4 @@
+import Selector from './Selector';
+import SelectorItem from './item';
+export { Selector, SelectorItem };
+//# sourceMappingURL=index.js.map

package/lib/components/selector/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../components/selector/index.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,YAAY,CAAA;AACjC,OAAO,YAAY,MAAM,QAAQ,CAAA;AAEjC,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,CAAA"}

package/lib/components/selector/item/SelectorItem.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { SelectorItemProps } from './SelectorItemProps';
+/**
+ * Selector Item Component
+ * @param active {boolean} active tab item
+ * @param children {ReactChild} React Child Element
+ * @param onClick onClick Event
+ * @param inverted {boolean} change style to inverted item
+ * @param end {boolean} Change last SelectorItem style to SECONDAY color
+ * - -------------------------- WEB PROPERTIES -------------------------------
+ * @param className {string} Additionnal CSS Classes
+ */
+declare const SelectorItem: ({ active, children, className, onClick, ...others }: SelectorItemProps) => JSX.Element;
+export default SelectorItem;

package/lib/components/selector/item/SelectorItem.js

@@ -0,0 +1,40 @@
+import React, { useEffect, useState } from 'react';
+import clsx from 'clsx';
+import { Text, TextMarkup } from '../../text';
+/**
+ * Selector Item Component
+ * @param active {boolean} active tab item
+ * @param children {ReactChild} React Child Element
+ * @param onClick onClick Event
+ * @param inverted {boolean} change style to inverted item
+ * @param end {boolean} Change last SelectorItem style to SECONDAY color
+ * - -------------------------- WEB PROPERTIES -------------------------------
+ * @param className {string} Additionnal CSS Classes
+ */
+const SelectorItem = ({ active, children, className, onClick, ...others }) => {
+    const [activeItem, setActiveItem] = useState(active || false);
+    // TODO: Update react component when web component (CSS) is ready
+    // accessibility
+    const a11y = {
+        li: {
+            role: 'presentation',
+        },
+        a: {
+            role: 'selector',
+            'aria-selected': activeItem,
+        },
+    };
+    useEffect(() => {
+        setActiveItem(active || false);
+    }, [active]);
+    return (React.createElement("li", { className: clsx(className, { 'is-active': activeItem }), ...a11y.li, ...others, onClick: (e) => {
+            const target = e.target;
+            setActiveItem(active || false);
+            target.active = active;
+            if (onClick) {
+                onClick(e);
+            }
+        } }, children && typeof children.valueOf() === 'string' && (React.createElement(Text, { markup: TextMarkup.A, ...a11y.a, ...others }, String(children)))));
+};
+export default SelectorItem;
+//# sourceMappingURL=SelectorItem.js.map

package/lib/components/selector/item/SelectorItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectorItem.js","sourceRoot":"","sources":["../../../../components/selector/item/SelectorItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAClD,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAG7C;;;;;;;;;GASG;AACH,MAAM,YAAY,GAAG,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,MAAM,EAAqB,EAAe,EAAE;IAC3G,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAU,MAAM,IAAI,KAAK,CAAC,CAAA;IAEtE,iEAAiE;IAEjE,gBAAgB;IAChB,MAAM,IAAI,GAAG;QACX,EAAE,EAAE;YACF,IAAI,EAAE,cAAc;SACrB;QACD,CAAC,EAAE;YACD,IAAI,EAAE,UAAU;YAChB,eAAe,EAAE,UAAU;SAC5B;KACF,CAAA;IAED,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,CAAC,MAAM,IAAI,KAAK,CAAC,CAAA;IAChC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;IAEZ,OAAO,CACL,4BACE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,EAAE,WAAW,EAAE,UAAU,EAAE,CAAC,KACnD,IAAI,CAAC,EAAE,KACP,MAAM,EACV,OAAO,EAAE,CAAC,CAAmB,EAAE,EAAE;YAC/B,MAAM,MAAM,GAAG,CAAC,CAAC,MAAyB,CAAA;YAC1C,aAAa,CAAC,MAAM,IAAI,KAAK,CAAC,CAAA;YAC9B,MAAM,CAAC,MAAM,GAAG,MAAM,CAAA;YACtB,IAAI,OAAO,EAAE;gBACX,OAAO,CAAC,CAAC,CAAC,CAAA;aACX;QACH,CAAC,IAEA,QAAQ,IAAI,OAAO,QAAQ,CAAC,OAAO,EAAE,KAAK,QAAQ,IAAI,CACrD,oBAAC,IAAI,IAAC,MAAM,EAAE,UAAU,CAAC,CAAC,KAAM,IAAI,CAAC,CAAC,KAAM,MAAM,IAC/C,MAAM,CAAC,QAAQ,CAAC,CACZ,CACR,CACE,CACN,CAAA;AACH,CAAC,CAAA;AAED,eAAe,YAAY,CAAA"}

package/lib/components/selector/item/SelectorItem.native.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { SelectorItemProps } from './SelectorItemProps';
+/**
+ * Selector Item Component
+ * @param active {boolean} active tab item
+ * @param children {ReactChild} React Child Element
+ * @param onClick onClick Event
+ * @param inverted {boolean} change style to inverted item
+ * @param end {boolean} Change last SelectorItem style to SECONDAY color
+ */
+declare const SelectorItem: {
+    ({ active, children, onClick, inverted, end, selectorIndex, testId, accessibilityLabel, ...others }: SelectorItemProps): JSX.Element;
+    displayName: string;
+};
+export default SelectorItem;

package/lib/components/selector/item/SelectorItem.native.js

@@ -0,0 +1,73 @@
+import React, { useState, useEffect } from 'react';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import { Text, TextLevels } from '../../text';
+import { getColorStyle, TrilogyColor } from '../../../objects/facets/Color';
+import { Spacer, SpacerSize } from '../../spacer';
+/**
+ * Selector Item Component
+ * @param active {boolean} active tab item
+ * @param children {ReactChild} React Child Element
+ * @param onClick onClick Event
+ * @param inverted {boolean} change style to inverted item
+ * @param end {boolean} Change last SelectorItem style to SECONDAY color
+ */
+const SelectorItem = ({ active, children, onClick, inverted, end, selectorIndex, testId, accessibilityLabel, ...others }) => {
+    const [activeItem, setActiveItem] = useState(active || false);
+    const styles = StyleSheet.create({
+        selectorItem: {
+            flexDirection: 'row',
+            justifyContent: 'center',
+            alignItems: 'center',
+            minWidth: 75,
+            height: 36,
+            borderRadius: 16,
+            paddingLeft: 16,
+            paddingRight: 16,
+            paddingTop: 8,
+            backgroundColor: 'transparent',
+            borderColor: inverted ? getColorStyle(TrilogyColor.WHITE) : getColorStyle(TrilogyColor.TERTIARY),
+            borderWidth: 1,
+        },
+        text: {
+            color: activeItem ? getColorStyle(TrilogyColor.WHITE) : getColorStyle(TrilogyColor.TERTIARY),
+            textAlign: 'center',
+            paddingBottom: 10,
+        },
+        invertedText: {
+            color: activeItem ? getColorStyle(TrilogyColor.TERTIARY) : getColorStyle(TrilogyColor.WHITE),
+            textAlign: 'center',
+            paddingBottom: 10,
+        },
+        active: {
+            backgroundColor: inverted ? getColorStyle(TrilogyColor.WHITE) : getColorStyle(TrilogyColor.TERTIARY),
+            borderColor: inverted ? getColorStyle(TrilogyColor.TERTIARY) : getColorStyle(TrilogyColor.WHITE),
+        },
+        end: {
+            backgroundColor: getColorStyle(TrilogyColor.WHITE),
+            borderColor: getColorStyle(TrilogyColor.SECONDARY),
+        },
+        endText: {
+            color: getColorStyle(TrilogyColor.SECONDARY),
+            textAlign: 'center',
+            paddingBottom: 10,
+        },
+        firstItem: {
+            marginLeft: 15,
+        },
+    });
+    useEffect(() => {
+        setActiveItem(active || false);
+    }, [active]);
+    return (React.createElement(React.Fragment, null,
+        selectorIndex === 0 && React.createElement(View, { style: styles.firstItem }),
+        React.createElement(TouchableOpacity, { testID: testId, accessibilityLabel: accessibilityLabel, accessible: !!accessibilityLabel, style: [styles.selectorItem, activeItem && styles.active, end && styles.end], onPress: (e) => {
+                setActiveItem(active || false);
+                if (onClick) {
+                    onClick(e);
+                }
+            }, ...others }, children && typeof children.valueOf() === 'string' && (React.createElement(Text, { style: end ? styles.endText : inverted ? styles.invertedText : styles.text, level: TextLevels.TWO }, String(children)))),
+        React.createElement(Spacer, { horizontal: true, size: SpacerSize.SMALL })));
+};
+SelectorItem.displayName = 'SelectorItem';
+export default SelectorItem;
+//# sourceMappingURL=SelectorItem.native.js.map

package/lib/components/selector/item/SelectorItem.native.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectorItem.native.js","sourceRoot":"","sources":["../../../../components/selector/item/SelectorItem.native.tsx"],"names":[],"mappings":"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"}

package/lib/components/selector/item/SelectorItemProps.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { Accessibility, Clickable } from '../../../objects';
+/**
+ * Selector Item Interface
+ */
+export interface SelectorItemProps extends Clickable, Accessibility {
+    children: React.ReactChild;
+    active?: boolean;
+    className?: string;
+    id?: string;
+    inverted?: boolean;
+    end?: boolean;
+    selectorIndex?: number;
+}

package/lib/components/selector/item/SelectorItemProps.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=SelectorItemProps.js.map

package/lib/components/selector/item/SelectorItemProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectorItemProps.js","sourceRoot":"","sources":["../../../../components/selector/item/SelectorItemProps.ts"],"names":[],"mappings":""}

package/lib/components/selector/item/index.d.ts

@@ -0,0 +1,2 @@
+import SelectorItem from './SelectorItem';
+export default SelectorItem;

package/lib/components/selector/item/index.js

@@ -0,0 +1,3 @@
+import SelectorItem from './SelectorItem';
+export default SelectorItem;
+//# sourceMappingURL=index.js.map

package/lib/components/selector/item/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/selector/item/index.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,gBAAgB,CAAA;AAEzC,eAAe,YAAY,CAAA"}

package/lib/components/slice/Slice.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { SliceProps } from './SliceProps';
+/**
+ * Slice Component
+ * @param children {React.ReactNode} Children for Slice
+ * @param onClick {Function} onClick Event Slice
+ * ------------------ WEB PROPERTIES ---------------------
+ * @param disabled {boolean} Disabled Slice
+ * @param longCta {boolean} Change to the CTA line
+ * @param selectable {boolean} Apply Field, Control classes wrapped
+ * @param className {string} Additionnal CSS Classes
+ */
+declare const Slice: ({ children, className, onClick, disabled, longCta, selectable, testId, ...others }: SliceProps) => JSX.Element;
+export default Slice;

package/lib/components/slice/Slice.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { has, is } from '../../services/classify';
+import { hashClass } from '../../helpers';
+import clsx from 'clsx';
+import { useTrilogyContext } from '../../context';
+/**
+ * Slice Component
+ * @param children {React.ReactNode} Children for Slice
+ * @param onClick {Function} onClick Event Slice
+ * ------------------ WEB PROPERTIES ---------------------
+ * @param disabled {boolean} Disabled Slice
+ * @param longCta {boolean} Change to the CTA line
+ * @param selectable {boolean} Apply Field, Control classes wrapped
+ * @param className {string} Additionnal CSS Classes
+ */
+const Slice = ({ children, className, onClick, disabled, longCta, selectable, testId, ...others }) => {
+    const { styled } = useTrilogyContext();
+    const classes = hashClass(styled, clsx('slice', disabled && is('disabled'), longCta && has('long-cta'), className));
+    if (selectable) {
+        return (React.createElement("div", { "data-testid": testId, onClick: onClick && onClick, className: classes, ...others },
+            React.createElement("div", { className: hashClass(styled, clsx('field')) },
+                React.createElement("div", { className: hashClass(styled, clsx('control')) }, children))));
+    }
+    return (React.createElement("div", { onClick: onClick && onClick, className: classes, ...others }, children));
+};
+export default Slice;
+//# sourceMappingURL=Slice.js.map

package/lib/components/slice/Slice.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slice.js","sourceRoot":"","sources":["../../../components/slice/Slice.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,yBAAyB,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AACzC,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAA;AAEjD;;;;;;;;;GASG;AACH,MAAM,KAAK,GAAG,CAAC,EACb,QAAQ,EACR,SAAS,EACT,OAAO,EACP,QAAQ,EACR,OAAO,EACP,UAAU,EACV,MAAM,EACN,GAAG,MAAM,EACE,EAAe,EAAE;IAC5B,MAAM,EAAE,MAAM,EAAE,GAAG,iBAAiB,EAAE,CAAA;IAEtC,MAAM,OAAO,GAAG,SAAS,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,IAAI,EAAE,CAAC,UAAU,CAAC,EAAE,OAAO,IAAI,GAAG,CAAC,UAAU,CAAC,EAAE,SAAS,CAAC,CAAC,CAAA;IAEnH,IAAI,UAAU,EAAE;QACd,OAAO,CACL,4CAAkB,MAAM,EAAE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,SAAS,EAAE,OAAO,KAAM,MAAM;YACnF,6BAAK,SAAS,EAAE,SAAS,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;gBAC9C,6BAAK,SAAS,EAAE,SAAS,CAAC,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,IAAG,QAAQ,CAAO,CAChE,CACF,CACP,CAAA;KACF;IAED,OAAO,CACL,6BAAK,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,SAAS,EAAE,OAAO,KAAM,MAAM,IAC7D,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,KAAK,CAAA"}

package/lib/components/slice/Slice.native.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { SliceProps } from './SliceProps';
+import { ComponentName } from '../enumsComponentsName';
+/**
+ * Slice component
+ * @param children {React.ReactNode} Slice children
+ * @param onClick {Function} OnClick Event
+ */
+declare const Slice: {
+    ({ children, onClick, ...others }: SliceProps): JSX.Element;
+    displayName: ComponentName;
+};
+export default Slice;