wini-web-components 2.8.4 → 2.8.6

package/src/component/pagination/pagination.module.css

@@ -1,48 +0,0 @@
-.custom-pagination {
-    width: 100%;
-    height: 100%;
-    justify-content: space-between;
-    gap: 1.6rem;
-}
-
-.custom-pagination>.row {
-    gap: 1.6rem;
-    height: 100%;
-}
-
-.items-per-page-container {
-    gap: 8px;
-    height: 100%;
-}
-
-.pagination {
-    gap: 0.8rem;
-}
-
-.pagination>li {
-    width: 2.4rem;
-    height: 2.4rem;
-    color: #161C2499;
-    justify-content: center;
-    border-radius: 0.4rem;
-    font-weight: 600;
-}
-
-.pagination>li * {
-    color: inherit;
-    font: inherit;
-    font-size: inherit;
-    font-family: inherit;
-    line-height: inherit;
-    font-weight: inherit;
-    text-align: inherit;
-    letter-spacing: inherit;
-}
-
-.pagination>li.active {
-    background-color: var(--infor-background);
-}
-
-.pagination>li.active {
-    color: var(--infor-main-color);
-}

package/src/component/pagination/pagination.tsx

@@ -1,88 +0,0 @@
-import { CSSProperties, useEffect, useRef } from "react";
-import ReactPaginate from "react-paginate";
-import styles from './pagination.module.css';
-import { Select1 } from "../select1/select1";
-import { Text } from "../text/text";
-import { TextField } from "../text-field/text-field";
-import { Winicon } from "../wini-icon/winicon";
-import { useTranslation } from "react-i18next";
-
-interface Props {
-    id?: string,
-    currentPage: number,
-    itemPerPage: number,
-    totalItem: number,
-    onChangePage: Function,
-    hideGoToPage?: boolean,
-    hidePageSize?: boolean,
-    style: CSSProperties,
-}
-
-export function Pagination({ id, currentPage, itemPerPage, totalItem, onChangePage, hidePageSize = false, hideGoToPage = false, style }: Props) {
-    const goToPageRef = useRef<TextField>(null)
-    const { t } = useTranslation()
-
-    useEffect(() => {
-        if (goToPageRef.current) {
-            const _inputPage = goToPageRef.current.getInput()
-            if (_inputPage) _inputPage.value = currentPage.toString()
-        }
-    }, [currentPage])
-
-    if (currentPage > 1 && (totalItem === 0 || (Math.floor(totalItem / itemPerPage) + (totalItem % itemPerPage === 0 ? 0 : 1)) < currentPage)) {
-        onChangePage(1, itemPerPage);
-        return <div></div>;
-    } else if (totalItem > 0) {
-        return <div id={id} className={`${styles['custom-pagination']} row`} style={style}>
-            {hidePageSize ? null : <div className="row" style={{ gap: '0.8rem' }}>
-                <Select1
-                    readOnly
-                    placeholder={itemPerPage.toString()}
-                    options={[10, 20, 50, 80, 100, 150, 200].map((item, _) => { return { id: item, name: item } })}
-                    style={{ borderRadius: '0.4rem', width: '5.6rem', padding: '0 0.8rem', height: '2.4rem' }}
-                    onChange={(ev: any) => {
-                        onChangePage(currentPage, isNaN(parseInt(ev.id)) ? itemPerPage : parseInt(ev.id));
-                    }}
-                />
-                <Text className="body-3">{t("ofItems", { totalItem: totalItem })}</Text>
-            </div>}
-            <div style={{ flex: 1 }} />
-            <ReactPaginate
-                onPageChange={(ev) => {
-                    onChangePage(ev.selected + 1, itemPerPage);
-                }}
-                forcePage={currentPage - 1}
-                breakClassName="row button-text-3"
-                breakLabel="..."
-                pageCount={Math.ceil(totalItem / itemPerPage)}
-                previousClassName="row"
-                previousLabel={<Winicon src={"fill/arrows/left-arrow"} size={"1.4rem"} />}
-                nextClassName="row"
-                nextLabel={<Winicon src={"fill/arrows/right-arrow"} size={"1.4rem"} />}
-                containerClassName={`${styles['pagination']} row`}
-                pageClassName="row button-text-3"
-                activeClassName={styles['active']}
-                hrefBuilder={(pageIndex: number) =>
-                    pageIndex >= 1 && pageIndex <= Math.ceil(totalItem / itemPerPage) ? `/page/${pageIndex}` : '#'
-                }
-                renderOnZeroPageCount={null}
-            />
-            {hideGoToPage ? null : <>
-                <div style={{ height: '1.6rem', backgroundColor: "var(--neutral-bolder-border-color)", width: 1 }} />
-                <Text className="label-3">{t("go")} {t("page").toLowerCase()}</Text>
-                <TextField
-                    ref={goToPageRef as any}
-                    style={{ width: '4.8rem', textAlign: "center", padding: 0, height: '2.4rem', borderRadius: '0.4rem' }}
-                    className="body-3"
-                    type="number"
-                    onBlur={(ev) => {
-                        const _tmp = ev.target.value.trim().length ? parseInt(ev.target.value.trim()) : undefined
-                        if (_tmp && !isNaN(_tmp) && _tmp > 0 && _tmp <= Math.ceil(totalItem / itemPerPage)) {
-                            onChangePage(_tmp, itemPerPage)
-                        } else ev.target.value = ""
-                    }}
-                />
-            </>}
-        </div>
-    } else return <div id={id} />
-}

package/src/component/popup/popup.css

@@ -1,136 +0,0 @@
-.popup-overlay {
-    position: fixed;
-    top: 0 !important;
-    left: 0 !important;
-    right: 0 !important;
-    bottom: 0 !important;
-    width: 100dvw !important;
-    height: 100dvh !important;
-    background-color: #000000B2;
-    display: flex !important;
-    justify-content: center;
-    align-items: center;
-    z-index: 99;
-}
-
-.popup-container {
-    position: relative;
-    background-color: var(--neutral-absolute-background-color);
-    border-radius: 0.8rem;
-    border: var(--neutral-main-border);
-    overflow: visible;
-    max-width: 86%;
-    max-height: 80%;
-}
-
-.popup-header {
-    align-items: center;
-    justify-content: start;
-    padding: 1.6rem 2.4rem;
-    border-bottom: var(--neutral-main-border);
-}
-
-.popup-footer {
-    column-gap: 0.8rem;
-    justify-content: end;
-    padding: 1.2rem 2.4rem;
-    border-top: var(--neutral-main-border);
-}
-
-.popup-container>.popup-close-btn {
-    position: absolute;
-    right: 0;
-    top: 0;
-    transform: translate(50%, -50%);
-    width: 3.2rem;
-    height: 3.2rem;
-    padding: 0.6rem;
-    border-radius: 50%;
-    align-items: center;
-    justify-content: center;
-    background-color: var(--neutral-absolute-background-color);
-    box-shadow: 0px 15px 50px 0px rgba(27, 32, 50, .1);
-}
-
-.popup-overlay.hidden-overlay {
-    background-color: transparent;
-    width: fit-content !important;
-    height: fit-content !important;
-}
-
-.popup-overlay.hidden-overlay>* {
-    position: fixed !important;
-    z-index: 99;
-    border-radius: 0.8rem;
-    background-color: var(--neutral-absolute-background-color);
-}
-
-.popup-overlay>* {
-    transition: width 0.8s ease-in-out, max-width 0.8s ease-in-out, height 0.8s ease-in-out, max-height 0.8s ease-in-out, border-radius 0.8s ease-in-out;
-    box-shadow: 2px 0px 16px 0px hsla(0, 0%, 0%, 0.04);
-}
-
-.popup-overlay.hidden-overlay>.popup-container {
-    position: absolute;
-    width: max-content;
-    height: max-content;
-    background-color: transparent;
-}
-
-.popup-overlay.hidden-overlay>.popup-container .popup-close-btn {
-    display: none !important;
-}
-
-@keyframes open-drawer-right-to-left {
-    0% {
-        transform: translateX(100%);
-    }
-
-    100% {
-        transform: translateX(0);
-    }
-}
-
-.right-drawer {
-    top: 0;
-    right: 0;
-    height: 100dvh;
-    animation: open-drawer-right-to-left 0.6s ease-in-out;
-    animation-fill-mode: forwards;
-}
-
-@keyframes open-drawer-left-to-right {
-    0% {
-        transform: translateX(-100%);
-    }
-
-    100% {
-        transform: translateX(0);
-    }
-}
-
-.left-drawer {
-    top: 0;
-    left: 0;
-    height: 100dvh;
-    animation: open-drawer-left-to-right 0.6s ease-in-out;
-    animation-fill-mode: forwards;
-}
-
-@keyframes show-dropdown-popup {
-    0% {
-        opacity: 0;
-        height: 0;
-        width: 0;
-        transform: scale(0);
-    }
-
-    100% {
-        opacity: 1;
-        transform: scale(1);
-    }
-}
-
-.dropdown-popup {
-    animation: show-dropdown-popup 0.4s ease-in-out;
-}

package/src/component/popup/popup.tsx

@@ -1,125 +0,0 @@
-import React, { CSSProperties, ReactNode, useEffect, useRef } from 'react'
-import './popup.css'
-
-interface PopupState {
-    readonly open?: boolean,
-    heading?: ReactNode,
-    body?: ReactNode,
-    content?: ReactNode,
-    footer?: ReactNode,
-    clickOverlayClosePopup?: boolean,
-    style?: CSSProperties,
-    className?: string,
-    hideButtonClose?: boolean,
-}
-
-export const showPopup = (props: {
-    ref: React.RefObject<Popup | undefined>,
-    heading?: ReactNode,
-    content?: ReactNode,
-    body?: ReactNode,
-    footer?: ReactNode,
-    clickOverlayClosePopup?: boolean,
-    style?: CSSProperties,
-    className?: string,
-    hideButtonClose?: boolean
-}) => {
-    props.ref?.current?.onOpen({
-        heading: props.heading,
-        content: props.content,
-        body: props.body,
-        footer: props.footer,
-        clickOverlayClosePopup: props.clickOverlayClosePopup,
-        style: props.style,
-        className: props.className,
-        hideButtonClose: props.hideButtonClose
-    })
-}
-
-export const closePopup = (ref: React.RefObject<Popup>) => {
-    ref.current.onClose()
-}
-
-export class Popup extends React.Component<Object, PopupState> {
-    constructor(props: Object | Readonly<Object>) {
-        super(props);
-    }
-    state: Readonly<PopupState> = {
-        open: false,
-    }
-
-    onOpen(data: PopupState) {
-        this.setState({ open: true, ...data })
-    }
-
-    onClose() {
-        this.setState({ open: false })
-    }
-
-    render() {
-        return (
-            <>
-                {this.state.open &&
-                    <PopupOverlay className={this.state.clickOverlayClosePopup ? 'hidden-overlay' : ''} onClose={this.state.clickOverlayClosePopup ? () => { this.onClose() } : undefined}>
-                        {this.state.content ?? <div className={`popup-container col ${this.state.className ?? ""}`} onClick={e => e.stopPropagation()} style={this.state.style} >
-                            {this.state.heading}
-                            {this.state.body}
-                            {this.state.footer}
-                            {this.state.hideButtonClose ? null : <button type='button' onClick={() => this.onClose()} className='popup-close-btn row' >
-                                <svg width='100%' height='100%' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg' style={{ width: '2rem', height: '2rem' }} >
-                                    <path fillRule='evenodd' clipRule='evenodd' d='M16.4223 4.7559C16.7477 4.43047 16.7477 3.90283 16.4223 3.57739C16.0968 3.25195 15.5692 3.25195 15.2438 3.57739L9.99967 8.82147L4.7556 3.57739C4.43016 3.25195 3.90252 3.25195 3.57709 3.57739C3.25165 3.90283 3.25165 4.43047 3.57709 4.7559L8.82116 9.99998L3.57709 15.2441C3.25165 15.5695 3.25165 16.0971 3.57709 16.4226C3.90252 16.748 4.43016 16.748 4.7556 16.4226L9.99967 11.1785L15.2438 16.4226C15.5692 16.748 16.0968 16.748 16.4223 16.4226C16.7477 16.0971 16.7477 15.5695 16.4223 15.2441L11.1782 9.99998L16.4223 4.7559Z' fill='#00204D' fillOpacity={0.6} />
-                                </svg>
-                            </button>}
-                        </div>}
-                    </PopupOverlay>}
-            </>
-        )
-    }
-}
-
-export function PopupOverlay({ children, onClose, className, style, onOpen }: { children?: ReactNode, className?: string, onClose?: (ev: MouseEvent) => void, style?: CSSProperties, onOpen?: (ev: HTMLDivElement) => void }) {
-    const overlayRef = useRef<HTMLDivElement>(null)
-
-    useEffect(() => {
-        if (overlayRef.current && onClose) {
-            const onClickDropDown = (ev: any) => {
-                if (ev.target === overlayRef.current || !overlayRef.current!.contains(ev.target)) onClose(ev)
-            }
-            window.document.body.addEventListener("mousedown", onClickDropDown)
-            return () => {
-                window.document.body.removeEventListener("mousedown", onClickDropDown)
-            }
-        }
-    }, [overlayRef.current])
-
-    useEffect(() => {
-        if (overlayRef.current && onOpen) onOpen(overlayRef.current)
-    }, [overlayRef.current, onOpen])
-
-    useEffect(() => {
-        if (overlayRef.current && overlayRef.current.firstChild) {
-            const popupContent = overlayRef.current.firstChild as HTMLElement
-            const rect = popupContent.getBoundingClientRect()
-            if (rect.x < 0) {
-                popupContent.style.left = "0px"
-                popupContent.style.right = "unset"
-            } else if (rect.right > document.body.offsetWidth) {
-                popupContent.style.right = "0px"
-                popupContent.style.left = "unset"
-            }
-            if (rect.y < 0) {
-                popupContent.style.top = "0px"
-                popupContent.style.bottom = "unset"
-            } else if (rect.bottom > document.body.offsetHeight) {
-                popupContent.style.bottom = "0px"
-                popupContent.style.top = "unset"
-            }
-        }
-    }, [overlayRef])
-
-    return <div
-        ref={overlayRef}
-        className={`popup-overlay ${className ?? ""}`}
-        style={style}
-    >{children}</div>
-}

package/src/component/progress-bar/progress-bar.module.css

@@ -1,42 +0,0 @@
-.progress-bar-container {
-    row-gap: 1.2rem;
-    width: 38.2rem;
-}
-
-.progress-bar-container>.progress-bar-title {
-    justify-content: space-between;
-    width: 100%;
-}
-
-.progress-bar-container>.progress-bar-tile {
-    column-gap: 1.6rem;
-    width: 100%;
-    height: 2.2rem;
-}
-
-.progress-bar-container>.progress-bar-tile>.progress-bar-value {
-    border-radius: 10rem;
-    width: 100%;
-    flex: 1;
-    height: 0.6rem;
-    position: relative;
-    overflow: hidden;
-    background-color: var(--full-color);
-}
-
-.progress-bar-container>.progress-bar-tile>.progress-bar-value::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: var(--percent);
-    height: 0.6rem;
-    border-radius: 10rem;
-    background-color: var(--percent-color);
-    transition: width ease-in-out 1s;
-}
-
-.status-icon>div {
-    width: 1.6rem !important;
-    height: 1.6rem !important;
-}

package/src/component/progress-bar/progress-bar.tsx

@@ -1,33 +0,0 @@
-import { CSSProperties, ReactNode, useState } from 'react'
-import styles from './progress-bar.module.css'
-import React from 'react'
-import { ComponentStatus, getStatusIcon, Winicon } from '../../index'
-
-export function ProgressBar({ id, status = ComponentStatus.INFOR, percent = 100, titleText, title, hideTitle = false, progressBarOnly = false, fullColor = 'var(--neutral-main-background-color)', percentColor = 'var(--primary-main-color)', style, progressBarStyle }: {
-    id?: string,
-    percent: number,
-    titleText?: string,
-    title?: ReactNode,
-    hideTitle: boolean,
-    progressBarOnly: boolean,
-    fullColor: string,
-    percentColor: string,
-    style?: CSSProperties,
-    status: ComponentStatus,
-    progressBarStyle?: CSSProperties
-}) {
-    const [openDetails, setOpenDetails] = useState(true)
-
-    return <div id={id} className={`col ${styles["progress-bar-container"]}`} style={style ? { padding: progressBarOnly ? '0' : '1.6rem 2.4rem', ...style } : { padding: progressBarOnly ? '0' : '1.6rem 2.4rem' }}>
-        {(hideTitle || progressBarOnly) ? null : (title ?? <div className={`row ${styles["progress-bar-title"]}`}>
-            <div className="heading-8">{titleText}</div>
-            <Winicon src={openDetails ? "fill/arrows/down-arrow" : "fill/arrows/up-arrow"} onClick={() => { setOpenDetails(!openDetails) }} />
-        </div>)}
-        {openDetails ? <div className={`row ${styles["progress-bar-tile"]}`} >
-            <div className={styles["progress-bar-value"]} style={{ '--percent-color': percentColor, '--full-color': fullColor, '--percent': `${percent}%`, ...(progressBarStyle ?? {}) } as CSSProperties}></div>
-            {progressBarOnly || status === ComponentStatus.INFOR ? null : <div className={`${styles["status-icon"]}`}>{getStatusIcon(status)}</div>}
-            {progressBarOnly ? null : <div className='label-4'>{percent}/100</div>}
-        </div> : null}
-
-    </div>
-}

package/src/component/progress-circle/progress-circle.tsx

@@ -1,25 +0,0 @@
-import { CSSProperties } from 'react'
-import './progress-circle.css'
-import React from 'react'
-
-export function ProgressCircle(props: {
-    id?: string,
-    /** value:  0 - 100 (%)*/
-    percent?: number,
-    style?: CSSProperties,
-    fillColor?: string,
-    percentColor?: string,
-    strokeWidth?: number,
-    strokeColor?: string,
-    textStyle?: CSSProperties
-}) {
-    const radius = 30 - (props.strokeWidth ?? 4)
-    const diameter = Math.PI * 2 * radius;
-    const strokeOffset = (1 - ((props.percent ?? 0) / 100)) * diameter;
-    return <svg id={props.id} width="100%" height="100%" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ width: '6rem', height: '6rem', ...(props.style ?? {}) }} >
-        <path d={`M 30,30 m 0,-${radius} a ${radius},${radius} 0 1 1 0,${2 * radius} a ${radius},${radius} 0 1 1 0,-${2 * radius}`} style={{ fill: "none", stroke: props.strokeColor ?? "var(--neutral-main-background-color)", strokeWidth: props.strokeWidth ?? '4px', }} />
-        <path d={`M 30,30 m 0,-${radius} a ${radius},${radius} 0 1 1 0,${2 * radius} a ${radius},${radius} 0 1 1 0,-${2 * radius}`} style={{ fill: props.fillColor ?? "none", stroke: props.percentColor ?? "var(--primary-main-color)", strokeWidth: props.strokeWidth ?? '4px', strokeLinecap: 'round', strokeDasharray: `${diameter}px ${diameter}px`, strokeDashoffset: `${strokeOffset}px` }} />
-        <text x="50%" y="50%" dy=".3em" textAnchor="middle" fontSize={"1.6rem"} fontWeight={'600'} style={{ fill: "var(neutral-text-title-color)", ...(props.textStyle ?? {}) }}>{props.percent ?? 0}%</text>
-    </svg>
-}
-

package/src/component/radio-button/radio-button.module.css

@@ -1,51 +0,0 @@
-.radio-btn-container {
-    height: max(var(--size), 14px);
-    width: max(var(--size), 14px);
-    aspect-ratio: 1 / 1 !important;
-    border-radius: 50%;
-    box-sizing: border-box;
-    border: 2px solid var(--off-color);
-    background-color: transparent !important;
-    transition: border-color ease-in-out 0.5s;
-    justify-content: center;
-    cursor: pointer;
-}
-
-.radio-btn-container>input {
-    display: none;
-    opacity: 0;
-    cursor: pointer;
-}
-
-.radio-btn-container>.checkmark {
-    height: inherit;
-    width: inherit;
-    scale: 0.5;
-    transform-origin: center center;
-    border-radius: 50%;
-    aspect-ratio: 1 / 1;
-    visibility: hidden;
-    opacity: 0;
-    transition: visibility, opacity ease-in-out 0.5s;
-}
-
-.radio-btn-container>input:checked~.checkmark {
-    visibility: visible;
-    opacity: 1;
-    background-color: var(--active-color);
-}
-
-.radio-btn-container:has(> input:checked) {
-    border-color: var(--active-color) !important;
-}
-
-.radio-btn-container:has(input:disabled) {
-    pointer-events: none !important;
-    border-color: var(--off-color) !important;
-    background-color: var(--neutral-disable-background-color) !important;
-}
-
-.radio-btn-container>input:disabled~.checkmark {
-    display: block !important;
-    background-color: var(--neutral-text-disabled-color);
-}

package/src/component/radio-button/radio-button.tsx

@@ -1,60 +0,0 @@
-import React, { CSSProperties } from 'react';
-import styles from './radio-button.module.css';
-import { UseFormRegister } from 'react-hook-form';
-
-interface RadioButtonProps {
-    id?: string,
-    onChange?: React.ChangeEventHandler<HTMLInputElement>,
-    value?: string | number | readonly string[],
-    disabled?: boolean,
-    style?: CSSProperties,
-    size?: number | string,
-    defaultChecked?: boolean,
-    name?: string,
-    activeColor?: string,
-    offColor?: string,
-    className?: string,
-    register?: UseFormRegister<{}>,
-}
-
-
-export class RadioButton extends React.Component<RadioButtonProps> {
-    render(): React.ReactNode {
-        let convertStyle: CSSProperties = {
-            '--off-color': this.props.offColor ?? 'var(--neutral-bolder-border-color)',
-            '--active-color': this.props.activeColor ?? 'var(--primary-main-color)',
-            '--size': this.props.size ? (typeof this.props.size === 'number') ? `${this.props.size}px` : this.props.size : '20px'
-        } as CSSProperties
-        if (this.props.style) {
-            delete this.props.style.width
-            delete this.props.style.minWidth
-            delete this.props.style.maxWidth
-            delete this.props.style.height
-            delete this.props.style.minHeight
-            delete this.props.style.maxHeight
-            convertStyle = {
-                ...this.props.style,
-                ...convertStyle,
-            }
-        }
-
-        return <label id={this.props.id} className={`row ${styles['radio-btn-container']} ${this.props.className ?? ''}`} style={convertStyle} >
-            {this.props.register ?
-                <input
-                    {...this.props.register}
-                    type="radio"
-                    value={this.props.value}
-                    disabled={this.props.disabled}
-                /> :
-                <input type="radio"
-                    name={this.props.name}
-                    value={this.props.value}
-                    defaultChecked={this.props.defaultChecked}
-                    disabled={this.props.disabled}
-                    onChange={this.props.onChange}
-                />
-            }
-            <span className={styles['checkmark']}></span>
-        </label>
-    }
-}

package/src/component/rating/rating.module.css

@@ -1,11 +0,0 @@
-.rating-container {
-    gap: 0.8rem;
-}
-
-.rating-container svg {
-    cursor: pointer;
-}
-
-.rating-container svg > * {
-    pointer-events: none !important;
-}