@rolster/react-components 19.0.0 → 19.0.2

package/dist/esm/components/atoms/Badge/Badge.css

@@ -1,5 +1,7 @@
 .rls-badge {
   --pvt-dimension: var(--rlc-badge-dimension, var(--rls-sizing-x12));
+  --pvt-font-color: var(--rls-app-color-050);
+  --pvt-background: var(--rls-app-color-700);
   --pvt-contrast-font-color: var(--rls-app-color-600);
   --pvt-contrast-background: var(--rls-app-color-200);
   position: relative;
@@ -26,10 +28,10 @@
   background: var(--pvt-contrast-background);
 }
 .rls-badge[rls-theme] {
+  --pvt-font-color: var(--rls-theme-color-050);
+  --pvt-background: var(--rls-theme-color-500);
   --pvt-contrast-font-color: var(--rls-theme-color-700);
   --pvt-contrast-background: var(--rls-theme-color-100);
-  color: var(--rls-theme-color-050);
-  background: var(--rls-theme-color-500);
 }
 .rls-badge > span {
   font-size: inherit;

package/dist/esm/components/atoms/Badge/Badge.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../../src/components/atoms/Badge/Badge.scss"],"names":[],"mappings":"AAOA,WACE,mEACA,oDACA,oDAEA,kBACA,qBACA,WACA,+BACA,4BACA,iCACA,4DACA,sBACA,qEACA,yEACA,kBACA,oFAIA,+BACA,oCACA,6EAEA,qBACE,qCACA,0CAGF,sBACE,sDACA,sDAEA,iCACA,sCAGF,gBACE,kBACA,uBACA","file":"Badge.css"}
+{"version":3,"sourceRoot":"","sources":["../../../../../src/components/atoms/Badge/Badge.scss"],"names":[],"mappings":"AAOA,WACE,mEACA,2CACA,2CACA,oDACA,oDAEA,kBACA,qBACA,WACA,+BACA,4BACA,iCACA,4DACA,sBACA,qEACA,yEACA,kBACA,oFAIA,+BACA,oCACA,6EAEA,qBACE,qCACA,0CAGF,sBACE,6CACA,6CACA,sDACA,sDAGF,gBACE,kBACA,uBACA","file":"Badge.css"}

package/dist/esm/components/organisms/FieldClock/FieldClock.css

@@ -0,0 +1,71 @@
+.rls-field-clock {
+  --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
+  --pvt-font-size: var(--rlc-field-clock-font-size, var(--rls-input-font-size));
+  --pvt-letter-spacing: var(
+    --rlc-field-clock-letter-spacing,
+    var(--rls-input-letter-spacing)
+  );
+  --pvt-action-dimension: var(
+    --rlc-field-box-action-dimension,
+    var(--rls-sizing-x12)
+  );
+  --pvt-action-background: var(
+    --rlc-field-box-action-background,
+    var(--rls-app-color-200)
+  );
+  --pvt-control-width: calc(100% - var(--pvt-action-dimension));
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+}
+.rls-field-clock .rls-field-box--readonly {
+  --pvt-control-width: 100%;
+}
+.rls-field-clock .rls-field-box__body {
+  column-gap: var(--rls-sizing-x2);
+}
+.rls-field-clock__control {
+  position: relative;
+  width: var(--pvt-control-width);
+  height: var(--rls-sizing-x12);
+  line-height: var(--rls-sizing-x12);
+  padding: 0rem;
+  cursor: default;
+  border: none;
+  outline: none;
+  background: rgba(0, 0, 0, 0);
+  color: var(--rls-app-color-900);
+  font-weight: var(--rls-font-weight-medium);
+  font-size: var(--pvt-font-size);
+  letter-spacing: var(--pvt-letter-spacing);
+}
+.rls-field-clock__control::placeholder {
+  color: var(--rls-app-color-400);
+}
+.rls-field-clock__control:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.rls-field-clock__action {
+  --rlc-icon-dimension: calc(var(--pvt-action-dimension) - 2rem);
+  width: var(--pvt-action-dimension);
+  height: var(--pvt-action-dimension);
+  color: var(--rls-app-color-600);
+  padding: 0rem;
+  outline: none;
+  border-radius: var(--rlc-field-box-action-radius, var(--rls-sizing-x2));
+  background: var(--pvt-action-background);
+}
+.rls-field-clock__action:disabled {
+  opacity: 0.5;
+  background: rgba(0, 0, 0, 0);
+}
+.rls-field-clock__action .rls-icon {
+  margin: 1rem;
+}
+.rls-field-clock-modal {
+  --rlc-modal-background: transparent;
+  --rlc-modal-max-width: 150rem;
+  --rlc-picker-clock-radius: var(--rls-sizing-x4);
+  --rlc-picker-clock-background: var(--rls-app-color-050);
+} /*# sourceMappingURL=FieldClock.css.map */

package/dist/esm/components/organisms/FieldClock/FieldClock.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../../../src/components/organisms/FieldClock/FieldClock.scss"],"names":[],"mappings":"AAOA,iBACE,wEAEA,8EAEA,+FAKA,uFAKA,4FAKA,8DAEA,kBACA,WACA,sBAEA,0CACE,0BAGF,sCACE,gCAGF,0BACE,kBACA,+BACA,6BACA,kCACA,aACA,eACA,YACA,aACA,yBACA,+BACA,0CACA,+BACA,yCAEA,uCACE,+BAGF,mCACE,WACA,mBAIJ,yBACE,+DAEA,kCACA,mCACA,+BACA,aACA,aACA,uEACA,wCAEA,kCACE,WACA,yBAGF,mCACE,YAKN,uBACE,oCACA,8BACA,gDACA","file":"FieldClock.css"}

package/dist/esm/components/organisms/FieldClock/FieldClock.d.ts

@@ -0,0 +1,37 @@
+import { Time } from '@rolster/dates';
+import { ReactControl } from '@rolster/react-forms';
+import { ReactNode } from 'react';
+import { RlsComponent } from '../../definitions';
+import './FieldClock.css';
+interface FieldClockProps extends RlsComponent {
+    disabled?: boolean;
+    formControl?: ReactControl<HTMLElement, Time> | ReactControl<HTMLElement, Time | undefined>;
+    msgErrorDisabled?: boolean;
+    onValue?: ((value?: Time) => void) | ((value: Time) => void);
+    placeholder?: string;
+    readOnly?: boolean;
+    value?: Time;
+    time?: Time;
+}
+interface FieldClockDefinedProps extends FieldClockProps {
+    formControl: ReactControl<HTMLElement, Time>;
+    value: Time;
+    onValue?: (value: Time) => void;
+}
+interface FieldClockUndefinedProps extends FieldClockProps {
+    formControl: ReactControl<HTMLElement, Time | undefined>;
+    value: undefined;
+    onValue?: (value?: Time) => void;
+}
+interface FieldClockVoidProps extends Omit<FieldClockProps, 'value'> {
+    formControl: ReactControl<HTMLElement, Time | undefined>;
+    onValue?: (value?: Time) => void;
+}
+interface FieldClockEmptyProps extends Omit<FieldClockProps, 'formControl' | 'value'> {
+    onValue?: (value?: Time) => void;
+}
+export declare function RlsFieldClock(props: FieldClockDefinedProps): ReactNode;
+export declare function RlsFieldClock(props: FieldClockUndefinedProps): ReactNode;
+export declare function RlsFieldClock(props: FieldClockVoidProps): ReactNode;
+export declare function RlsFieldClock(props: FieldClockEmptyProps): ReactNode;
+export {};

package/dist/esm/components/organisms/FieldClock/FieldClock.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PickerListenerEvent } from '@rolster/components';
+import { useCallback, useMemo, useState } from 'react';
+import { renderClassStatus } from '../../../helpers/css';
+import { RlsIcon } from '../../atoms/Icon/Icon';
+import { RlsMessageFormError } from '../../molecules/MessageFormError/MessageFormError';
+import { RlsModal } from '../Modal/Modal';
+import { RlsPickerClock } from '../PickerClock/PickerClock';
+import './FieldClock.css';
+export function RlsFieldClock({ children, disabled, formControl, identifier, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, time, value: valueInitial }) {
+    const [value, setValue] = useState(formControl?.value ?? valueInitial);
+    const [modalIsVisible, setModalIsVisible] = useState(false);
+    const _disabled = useMemo(() => {
+        return formControl?.disabled || disabled;
+    }, [formControl?.disabled, disabled]);
+    const className = useMemo(() => {
+        return renderClassStatus('rls-field-box', {
+            disabled: _disabled,
+            readonly: readOnly
+        });
+    }, [_disabled, readOnly]);
+    const { icon, valueInput } = useMemo(() => {
+        return {
+            icon: value ? 'trash-2' : 'timer',
+            valueInput: value?.normalizeMeridiemFormat || ''
+        };
+    }, [value]);
+    const onClickInput = useCallback(() => {
+        !readOnly && setModalIsVisible(true);
+    }, [readOnly]);
+    const onChange = useCallback((value) => {
+        setValue(value);
+        onValue?.(value);
+    }, [onValue]);
+    const onClickAction = useCallback(() => {
+        if (value) {
+            formControl?.setValue(valueInitial);
+            formControl?.touch();
+            onChange(valueInitial);
+        }
+        else {
+            setModalIsVisible(true);
+        }
+    }, [value, formControl, valueInitial, onChange]);
+    const onListener = useCallback(({ event, value }) => {
+        event !== PickerListenerEvent.Cancel && onChange(value);
+        formControl?.touch();
+        setModalIsVisible(false);
+    }, [formControl, onChange]);
+    return (_jsxs("div", { id: identifier, className: "rls-field-date", "rls-theme": rlsTheme, children: [_jsxs("div", { className: className, children: [children && _jsx("span", { className: "rls-field-box__label", children: children }), _jsx("div", { className: "rls-field-box__component", children: _jsxs("div", { className: "rls-field-box__body", children: [_jsx("input", { className: "rls-field-date__control", type: "text", value: valueInput, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: _disabled }), !readOnly && (_jsx("button", { className: "rls-field-date__action", onClick: onClickAction, disabled: _disabled, children: _jsx(RlsIcon, { value: icon }) }))] }) }), !msgErrorDisabled && (_jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), _jsx(RlsModal, { className: "rls-field-clock-modal", visible: modalIsVisible, rlsTheme: rlsTheme, children: _jsx(RlsPickerClock, { formControl: formControl, time: time, disabled: _disabled, onListener: onListener }) })] }));
+}
+//# sourceMappingURL=FieldClock.js.map

package/dist/esm/components/organisms/FieldClock/FieldClock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldClock.js","sourceRoot":"","sources":["../../../../../src/components/organisms/FieldClock/FieldClock.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAkB,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAG1E,OAAO,EAAa,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAEhD,OAAO,EAAE,mBAAmB,EAAE,MAAM,mDAAmD,CAAC;AACxF,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAC5D,OAAO,kBAAkB,CAAC;AAyC1B,MAAM,UAAU,aAAa,CAAC,EAC5B,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,OAAO,EACP,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,KAAK,EAAE,YAAY,EACH;IAChB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,WAAW,EAAE,KAAK,IAAI,YAAY,CAAC,CAAC;IACvE,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5D,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7B,OAAO,WAAW,EAAE,QAAQ,IAAI,QAAQ,CAAC;IAC3C,CAAC,EAAE,CAAC,WAAW,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEtC,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7B,OAAO,iBAAiB,CAAC,eAAe,EAAE;YACxC,QAAQ,EAAE,SAAS;YACnB,QAAQ,EAAE,QAAQ;SACnB,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE1B,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,OAAO,CAAC,GAAG,EAAE;QACxC,OAAO;YACL,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO;YACjC,UAAU,EAAE,KAAK,EAAE,uBAAuB,IAAI,EAAE;SACjD,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE;QACpC,CAAC,QAAQ,IAAI,iBAAiB,CAAC,IAAI,CAAC,CAAC;IACvC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,KAAY,EAAE,EAAE;QACf,QAAQ,CAAC,KAAK,CAAC,CAAC;QAChB,OAAO,EAAE,CAAC,KAAa,CAAC,CAAC;IAC3B,CAAC,EACD,CAAC,OAAO,CAAC,CACV,CAAC;IAEF,MAAM,aAAa,GAAG,WAAW,CAAC,GAAG,EAAE;QACrC,IAAI,KAAK,EAAE,CAAC;YACV,WAAW,EAAE,QAAQ,CAAC,YAAoB,CAAC,CAAC;YAC5C,WAAW,EAAE,KAAK,EAAE,CAAC;YACrB,QAAQ,CAAC,YAAY,CAAC,CAAC;QACzB,CAAC;aAAM,CAAC;YACN,iBAAiB,CAAC,IAAI,CAAC,CAAC;QAC1B,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEjD,MAAM,UAAU,GAAG,WAAW,CAC5B,CAAC,EAAE,KAAK,EAAE,KAAK,EAAwB,EAAE,EAAE;QACzC,KAAK,KAAK,mBAAmB,CAAC,MAAM,IAAI,QAAQ,CAAC,KAAK,CAAC,CAAC;QACxD,WAAW,EAAE,KAAK,EAAE,CAAC;QACrB,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAC3B,CAAC,EACD,CAAC,WAAW,EAAE,QAAQ,CAAC,CACxB,CAAC;IAEF,OAAO,CACL,eAAK,EAAE,EAAE,UAAU,EAAE,SAAS,EAAC,gBAAgB,eAAY,QAAQ,aACjE,eAAK,SAAS,EAAE,SAAS,aACtB,QAAQ,IAAI,eAAM,SAAS,EAAC,sBAAsB,YAAE,QAAQ,GAAQ,EAErE,cAAK,SAAS,EAAC,0BAA0B,YACvC,eAAK,SAAS,EAAC,qBAAqB,aAClC,gBACE,SAAS,EAAC,yBAAyB,EACnC,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,IAAI,EACd,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,YAAY,EACrB,QAAQ,EAAE,SAAS,GACnB,EAED,CAAC,QAAQ,IAAI,CACZ,iBACE,SAAS,EAAC,wBAAwB,EAClC,OAAO,EAAE,aAAa,EACtB,QAAQ,EAAE,SAAS,YAEnB,KAAC,OAAO,IAAC,KAAK,EAAE,IAAI,GAAI,GACjB,CACV,IACG,GACF,EAEL,CAAC,gBAAgB,IAAI,CACpB,KAAC,mBAAmB,IAClB,SAAS,EAAC,sBAAsB,EAChC,WAAW,EAAE,WAAW,GACxB,CACH,IACG,EAEN,KAAC,QAAQ,IACP,SAAS,EAAC,uBAAuB,EACjC,OAAO,EAAE,cAAc,EACvB,QAAQ,EAAE,QAAQ,YAElB,KAAC,cAAc,IACb,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,SAAS,EACnB,UAAU,EAAE,UAAU,GACtB,GACO,IACP,CACP,CAAC;AACJ,CAAC"}

package/dist/esm/components/organisms/FieldDate/FieldDate.css

@@ -1,8 +1,8 @@
 .rls-field-date {
   --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
-  --pvt-font-size: var(--rlc-datefield-font-size, var(--rls-input-font-size));
+  --pvt-font-size: var(--rlc-field-date-font-size, var(--rls-input-font-size));
   --pvt-letter-spacing: var(
-    --rlc-datefield-letter-spacing,
+    --rlc-field-date-letter-spacing,
     var(--rls-input-letter-spacing)
   );
   --pvt-action-dimension: var(

package/dist/esm/components/organisms/FieldDate/FieldDate.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../../src/components/organisms/FieldDate/FieldDate.scss"],"names":[],"mappings":"AAOA,gBACE,wEAEA,4EAEA,6FAKA,uFAKA,4FAKA,8DAEA,kBACA,WACA,sBAEA,yCACE,0BAGF,qCACE,gCAGF,yBACE,kBACA,+BACA,6BACA,kCACA,aACA,eACA,YACA,aACA,yBACA,+BACA,0CACA,+BACA,yCAEA,sCACE,+BAGF,kCACE,WACA,mBAIJ,wBACE,+DAEA,kCACA,mCACA,+BACA,aACA,aACA,uEACA,wCAEA,iCACE,WACA,yBAGF,kCACE,YAKN,sBACE,oCACA,8BACA,+CACA","file":"FieldDate.css"}
+{"version":3,"sourceRoot":"","sources":["../../../../../src/components/organisms/FieldDate/FieldDate.scss"],"names":[],"mappings":"AAOA,gBACE,wEAEA,6EAEA,8FAKA,uFAKA,4FAKA,8DAEA,kBACA,WACA,sBAEA,yCACE,0BAGF,qCACE,gCAGF,yBACE,kBACA,+BACA,6BACA,kCACA,aACA,eACA,YACA,aACA,yBACA,+BACA,0CACA,+BACA,yCAEA,sCACE,+BAGF,kCACE,WACA,mBAIJ,wBACE,+DAEA,kCACA,mCACA,+BACA,aACA,aACA,uEACA,wCAEA,iCACE,WACA,yBAGF,kCACE,YAKN,sBACE,oCACA,8BACA,+CACA","file":"FieldDate.css"}

package/dist/esm/components/organisms/FieldDate/FieldDate.js

@@ -9,9 +9,9 @@ import { RlsMessageFormError } from '../../molecules/MessageFormError/MessageFor
 import { RlsModal } from '../Modal/Modal';
 import { RlsPickerDate } from '../PickerDate/PickerDate';
 import './FieldDate.css';
-export function RlsFieldDate({ children, date, disabled, formControl, format, identifier, maxDate, minDate, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, value: _value }) {
+export function RlsFieldDate({ children, date, disabled, formControl, format, identifier, maxDate, minDate, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, value: valueInitial }) {
     const today = useRef(new Date()); // Initial current date in component
-    const [value, setValue] = useState(formControl?.value ?? _value);
+    const [value, setValue] = useState(formControl?.value ?? valueInitial);
     const [modalIsVisible, setModalIsVisible] = useState(false);
     const _disabled = useMemo(() => {
         return formControl?.disabled || disabled;
@@ -46,14 +46,14 @@ export function RlsFieldDate({ children, date, disabled, formControl, format, id
     }, [onValue]);
     const onClickAction = useCallback(() => {
         if (value) {
-            formControl?.setValue(_value);
+            formControl?.setValue(valueInitial);
             formControl?.touch();
-            onChange(_value);
+            onChange(valueInitial);
         }
         else {
             setModalIsVisible(true);
         }
-    }, [value, formControl, _value, onChange]);
+    }, [value, formControl, valueInitial, onChange]);
     const onListener = useCallback(({ event, value }) => {
         event !== PickerListenerEvent.Cancel && onChange(value);
         formControl?.touch();

package/dist/esm/components/organisms/FieldDate/FieldDate.js.map

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

package/dist/esm/components/organisms/FieldDateRange/FieldDateRange.css

@@ -1,8 +1,11 @@
 .rls-field-date-range {
   --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
-  --pvt-font-size: var(--rlc-datefield-font-size, var(--rls-input-font-size));
+  --pvt-font-size: var(
+    --rlc-field-date-range-font-size,
+    var(--rls-input-font-size)
+  );
   --pvt-letter-spacing: var(
-    --rlc-datefield-letter-spacing,
+    --rlc-field-date-range-letter-spacing,
     var(--rls-input-letter-spacing)
   );
   --pvt-action-dimension: var(

package/dist/esm/components/organisms/FieldDateRange/FieldDateRange.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../../src/components/organisms/FieldDateRange/FieldDateRange.scss"],"names":[],"mappings":"AAOA,sBACE,wEAEA,4EAEA,6FAKA,uFAKA,4FAKA,8DAEA,kBACA,WACA,sBAEA,+CACE,0BAGF,+BACE,kBACA,+BACA,6BACA,kCACA,aACA,eACA,YACA,aACA,yBACA,+BACA,0CACA,+BACA,yCAEA,4CACE,+BAGF,wCACE,WACA,mBAIJ,8BACE,+DAEA,kCACA,mCACA,+BACA,aACA,aACA,uEACA,wCAEA,uCACE,WACA,yBAGF,wCACE,YAKN,4BACE,oCACA,8BACA,qDACA","file":"FieldDateRange.css"}
+{"version":3,"sourceRoot":"","sources":["../../../../../src/components/organisms/FieldDateRange/FieldDateRange.scss"],"names":[],"mappings":"AAOA,sBACE,wEAEA,qFAKA,oGAKA,uFAKA,4FAKA,8DAEA,kBACA,WACA,sBAEA,+CACE,0BAGF,+BACE,kBACA,+BACA,6BACA,kCACA,aACA,eACA,YACA,aACA,yBACA,+BACA,0CACA,+BACA,yCAEA,4CACE,+BAGF,wCACE,WACA,mBAIJ,8BACE,+DAEA,kCACA,mCACA,+BACA,aACA,aACA,uEACA,wCAEA,uCACE,WACA,yBAGF,wCACE,YAKN,4BACE,oCACA,8BACA,qDACA","file":"FieldDateRange.css"}

package/dist/esm/components/organisms/PickerClock/PickerClock.css

@@ -0,0 +1,116 @@
+.rls-picker-clock {
+  position: relative;
+  display: flex;
+  width: 150rem;
+  flex-direction: column;
+  row-gap: var(--rls-sizing-x8);
+  overflow: hidden;
+  user-select: none;
+  padding: var(--rlc-picker-clock-padding, 0rem);
+  box-sizing: border-box;
+  border-radius: var(--rlc-picker-clock-radius, 0rem);
+  background: var(--rlc-picker-clock-background, transparent);
+}
+.rls-picker-clock__header {
+  display: flex;
+  column-gap: var(--rls-sizing-x8);
+  padding: var(--rls-sizing-x4) var(--rls-sizing-x4) 0rem var(--rls-sizing-x4);
+  box-sizing: border-box;
+  justify-content: center;
+}
+.rls-picker-clock__title {
+  display: flex;
+  width: auto;
+  column-gap: var(--rls-sizing-x2);
+  align-items: center;
+}
+.rls-picker-clock__title__value {
+  width: 16rem;
+  text-align: center;
+  font-size: var(--rls-heading4-font-size);
+  font-weight: var(--rls-font-weight-semibold);
+  color: var(--rls-app-color-600);
+}
+.rls-picker-clock__title__value--active {
+  color: var(--rls-theme-color-500);
+}
+.rls-picker-clock__title__value:hover {
+  color: var(--rls-app-color-900);
+}
+.rls-picker-clock__title__separator {
+  font-size: var(--rls-title-font-size);
+  font-weight: var(--rls-font-weight-semibold);
+}
+.rls-picker-clock__zone {
+  display: flex;
+  width: auto;
+  column-gap: var(--rls-sizing-x4);
+  align-items: center;
+}
+.rls-picker-clock__zone__value {
+  width: 18rem;
+  text-align: center;
+  padding: var(--rls-sizing-x1) var(--rls-sizing-x2);
+  border-radius: var(--rls-sizing-x2);
+  font-size: var(--rls-body-font-size);
+  font-weight: var(--rls-font-weight-semibold);
+  background: var(--rls-app-color-200);
+}
+.rls-picker-clock__zone__value--active {
+  background: var(--rls-theme-gradient-500);
+  color: var(--rls-theme-color-050);
+}
+.rls-picker-clock__body {
+  display: flex;
+  justify-content: center;
+}
+.rls-picker-clock__plate {
+  width: 120rem;
+  height: 120rem;
+  border-radius: 50%;
+  border: var(--rls-app-border-2-200);
+  box-sizing: border-box;
+  overflow: hidden;
+}
+.rls-picker-clock__canvas {
+  position: absolute;
+}
+.rls-picker-clock__canvas__line {
+  stroke: var(--rls-theme-color-500);
+  stroke-width: var(--rls-sizing-x1);
+}
+.rls-picker-clock__canvas__center {
+  fill: var(--rls-theme-color-500);
+}
+.rls-picker-clock__canvas__indicator {
+  fill: var(--rls-theme-color-300);
+}
+.rls-picker-clock__canvas__point {
+  fill: var(--rls-theme-color-050);
+}
+.rls-picker-clock__tick {
+  position: absolute;
+  width: var(--rls-sizing-x14);
+  height: var(--rls-sizing-x14);
+  line-height: var(--rls-sizing-x14);
+  text-align: center;
+  cursor: pointer;
+  font-size: var(--rls-paragraph-font-size);
+  font-weight: var(--rls-font-weight-semibold);
+}
+.rls-picker-clock__footer {
+  --rlc-button-width: 100%;
+  display: flex;
+  column-gap: var(--rls-sizing-x6);
+  align-items: center;
+  padding: var(--rls-sizing-x4) var(--rls-sizing-x8) var(--rls-sizing-x6)
+    var(--rls-sizing-x8);
+  overflow: hidden;
+  box-sizing: border-box;
+}
+.rls-picker-clock__footer--today {
+  display: flex;
+  width: var(--rls-sizing-x16);
+  align-items: center;
+  justify-content: center;
+} /*# sourceMappingURL=PickerClock.css.map */

package/dist/esm/components/organisms/PickerClock/PickerClock.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../../../src/components/organisms/PickerClock/PickerClock.scss"],"names":[],"mappings":"AAOA,kBACE,kBACA,aACA,aACA,sBACA,6BACA,gBACA,iBACA,8CACA,sBACA,mDACA,2DAEA,0BACE,aACA,gCACA,4EACA,sBACA,uBAGF,yBACE,aACA,WACA,gCACA,mBAEA,gCACE,YACA,kBACA,wCACA,4CACA,+BAEA,wCACE,iCAGF,sCACE,+BAIJ,oCACE,qCACA,4CAIJ,wBACE,aACA,WACA,gCACA,mBAEA,+BACE,YACA,kBACA,kDACA,mCACA,oCACA,4CACA,oCAEA,uCACE,yCACA,iCAKN,wBACE,aACA,uBAGF,yBACE,aACA,cACA,kBACA,mCACA,sBACA,gBAGF,0BACE,kBAEA,gCACE,kCACA,kCAGF,kCACE,gCAGF,qCACE,gCAGF,iCACE,gCAIJ,wBACE,kBACA,4BACA,6BACA,kCACA,kBACA,eACA,yCACA,4CAGF,0BACE,yBAEA,aACA,gCACA,mBACA,4FAEA,gBACA,sBAEA,iCACE,aACA,4BACA,mBACA","file":"PickerClock.css"}

package/dist/esm/components/organisms/PickerClock/PickerClock.d.ts

@@ -0,0 +1,13 @@
+import { PickerListener } from '@rolster/components';
+import { Time } from '@rolster/dates';
+import { ReactControl } from '@rolster/react-forms';
+import { RlsComponent } from '../../definitions';
+import './PickerClock.css';
+interface PickerClockProps extends RlsComponent {
+    disabled?: boolean;
+    formControl?: ReactControl<HTMLElement, Time> | ReactControl<HTMLElement, Time | undefined>;
+    onListener?: (listener: PickerListener<Time>) => void;
+    time?: Time;
+}
+export declare function RlsPickerClock({ formControl, onListener, rlsTheme, time }: PickerClockProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/organisms/PickerClock/PickerClock.js

@@ -0,0 +1,208 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PickerListenerEvent } from '@rolster/components';
+import { Time } from '@rolster/dates';
+import { i18nSubscribe } from '@rolster/i18n';
+import { useCallback, useEffect, useEffectEvent, useMemo, useRef, useState } from 'react';
+import { renderClassStatus } from '../../../helpers/css';
+import { reactI18n } from '../../../i18n';
+import { RlsButton } from '../../atoms/Button/Button';
+import { RlsButtonAction } from '../../atoms/ButtonAction/ButtonAction';
+import './PickerClock.css';
+function formatTime(value) {
+    return String(value).padStart(2, '0');
+}
+const CLOCK_VALUES = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+const RADIUS = 48;
+const DIAL_RADIUS = 60;
+const TICK_RADIUS = 7;
+function RlsPickerClockTick({ onValue, selectionIsHours, value }) {
+    const styleTick = useMemo(() => {
+        const radian = (value / 6) * Math.PI;
+        const x = Math.sin(radian) * RADIUS;
+        const y = Math.cos(radian) * RADIUS;
+        return {
+            left: `${DIAL_RADIUS + x - TICK_RADIUS - 1}rem`,
+            top: `${DIAL_RADIUS - y - TICK_RADIUS - 1}rem`
+        };
+    }, []);
+    const label = useMemo(() => {
+        if (selectionIsHours) {
+            return formatTime(value);
+        }
+        if (value === 12) {
+            return formatTime(0);
+        }
+        return formatTime(value * 5);
+    }, [selectionIsHours]);
+    const onClick = useCallback((event) => {
+        event.preventDefault();
+        onValue(value);
+    }, [onValue]);
+    return (_jsx("div", { className: "rls-picker-clock__tick", style: styleTick, onClick: onClick, children: label }));
+}
+export function RlsPickerClock({ formControl, onListener, rlsTheme, time }) {
+    const timeInitial = useMemo(() => {
+        return formControl?.value ?? time ?? Time.now();
+    }, [formControl?.value, time]);
+    const plateElement = useRef(null);
+    const lineElement = useRef(null);
+    const centerElement = useRef(null);
+    const indicatorElement = useRef(null);
+    const pointElement = useRef(null);
+    const [labels, setLabels] = useState({
+        timeActionCancel: reactI18n('dateActionCancel'),
+        timeActionSelect: reactI18n('dateActionSelect')
+    });
+    const [zoneIsPM, setZoneIsPM] = useState(timeInitial.hour >= 12);
+    const [hour, setHour] = useState(zoneIsPM ? timeInitial.hour - 12 : timeInitial.hour);
+    const [minute, setMinute] = useState(timeInitial.minute);
+    const [selectionIsHours, setSelectionIsHours] = useState(true);
+    const selectionIsActive = useRef(false);
+    const radianUnit = useMemo(() => {
+        return Math.PI / (selectionIsHours ? 6 : 30);
+    }, [selectionIsHours]);
+    const hourFormat = useMemo(() => {
+        return formatTime(hour === 0 ? 12 : hour);
+    }, [hour]);
+    const minuteFormat = useMemo(() => {
+        return formatTime(minute);
+    }, [minute]);
+    const classNameHour = useMemo(() => {
+        return renderClassStatus('rls-picker-clock__title__value', {
+            active: selectionIsHours
+        });
+    }, [selectionIsHours]);
+    const classNameMinute = useMemo(() => {
+        return renderClassStatus('rls-picker-clock__title__value', {
+            active: !selectionIsHours
+        });
+    }, [selectionIsHours]);
+    const classNameAM = useMemo(() => {
+        return renderClassStatus('rls-picker-clock__zone__value', {
+            active: !zoneIsPM
+        });
+    }, [zoneIsPM]);
+    const classNamePM = useMemo(() => {
+        return renderClassStatus('rls-picker-clock__zone__value', {
+            active: zoneIsPM
+        });
+    }, [zoneIsPM]);
+    const refreshClockHour = useEffectEvent(() => {
+        refreshClock(hour > 12 ? hour - 12 : hour);
+    });
+    const refreshClockMinute = useEffectEvent(() => {
+        refreshClock(minute);
+    });
+    useEffect(() => {
+        return i18nSubscribe(() => {
+            setLabels({
+                timeActionCancel: reactI18n('dateActionCancel'),
+                timeActionSelect: reactI18n('dateActionSelect')
+            });
+        });
+    }, []);
+    useEffect(() => {
+        selectionIsHours ? refreshClockHour() : refreshClockMinute();
+    }, [selectionIsHours]);
+    const refreshComponent = useCallback((clientX, clientY) => {
+        const rectangle = plateElement.current.getBoundingClientRect();
+        const centerX = rectangle.left + rectangle.width / 2;
+        const centerY = rectangle.top + rectangle.height / 2;
+        const positionX = clientX - centerX;
+        const positionY = clientY - centerY;
+        const angle = Math.atan2(-positionX, positionY) + Math.PI;
+        const value = Math.round(angle / radianUnit);
+        refreshClock(value);
+        selectionIsHours ? setHour(value === 0 ? 12 : value) : setMinute(value);
+    }, [selectionIsHours, radianUnit]);
+    const refreshClock = useCallback((value) => {
+        const angle = value * radianUnit;
+        const x2 = Math.sin(angle) * (RADIUS - TICK_RADIUS);
+        const y2 = -Math.cos(angle) * (RADIUS - TICK_RADIUS);
+        const cx = Math.sin(angle) * RADIUS;
+        const cy = -Math.cos(angle) * RADIUS;
+        lineElement.current.setAttribute('x2', `${x2 - 1}rem`);
+        lineElement.current.setAttribute('y2', `${y2 - 1}rem`);
+        indicatorElement.current.setAttribute('cx', `${cx - 1}rem`);
+        indicatorElement.current.setAttribute('cy', `${cy - 1}rem`);
+        pointElement.current.setAttribute('cx', `${cx - 1}rem`);
+        pointElement.current.setAttribute('cy', `${cy - 1}rem`);
+        pointElement.current.style.visibility =
+            selectionIsHours || value % 5 === 0 ? 'hidden' : 'visible';
+    }, [selectionIsHours, radianUnit]);
+    const onClickHour = useCallback(() => {
+        setSelectionIsHours(true);
+    }, []);
+    const onClickMinute = useCallback(() => {
+        setSelectionIsHours(false);
+    }, []);
+    const onClickAM = useCallback(() => {
+        setZoneIsPM(false);
+    }, []);
+    const onClickPM = useCallback(() => {
+        setZoneIsPM(true);
+    }, []);
+    const onActiveSelection = useCallback(() => {
+        selectionIsActive.current = true;
+    }, []);
+    const onMouseSelection = useCallback((event) => {
+        if (selectionIsActive.current) {
+            event.preventDefault();
+            refreshComponent(event.clientX, event.clientY);
+        }
+    }, [refreshComponent]);
+    const onTouchSelection = useCallback((event) => {
+        const touch = event.touches.item(0);
+        if (selectionIsActive.current && touch) {
+            refreshComponent(touch.clientX, touch.clientY);
+        }
+    }, [refreshComponent]);
+    const onInactiveSelection = useCallback(() => {
+        selectionIsActive.current = false;
+    }, []);
+    const onClickValue = useCallback((value) => {
+        if (selectionIsHours) {
+            setHour(value);
+            refreshClock(value);
+        }
+        else {
+            const minute = value === 12 ? 0 : value * 5;
+            setMinute(minute);
+            refreshClock(minute);
+        }
+    }, [selectionIsHours]);
+    const onCancel = useCallback(() => {
+        onListener?.({ event: PickerListenerEvent.Cancel });
+    }, [onListener]);
+    const onCurrentTime = useCallback(() => {
+        const currentTime = Time.now();
+        formControl?.setValue(currentTime);
+        setHour(currentTime.hour);
+        setMinute(currentTime.minute);
+        onListener?.({
+            event: PickerListenerEvent.Select,
+            value: currentTime
+        });
+    }, [formControl, onListener]);
+    const onSelect = useCallback(() => {
+        const hourValue = zoneIsPM
+            ? hour !== 12
+                ? hour + 12
+                : 12
+            : hour === 12
+                ? 0
+                : hour;
+        const timeValue = new Time(hourValue, minute);
+        formControl?.setValue(timeValue);
+        onListener?.({
+            event: PickerListenerEvent.Select,
+            value: timeValue
+        });
+    }, [formControl, hour, minute, zoneIsPM, onListener]);
+    return (_jsxs("div", { className: "rls-picker-clock", "rls-theme": rlsTheme, children: [_jsxs("div", { className: "rls-picker-clock__header", children: [_jsxs("div", { className: "rls-picker-clock__title", children: [_jsx("span", { className: classNameHour, onClick: onClickHour, children: hourFormat }), _jsx("span", { className: "rls-picker-clock__title__separator", children: ":" }), _jsx("span", { className: classNameMinute, onClick: onClickMinute, children: minuteFormat })] }), _jsxs("div", { className: "rls-picker-clock__zone", children: [_jsx("span", { className: classNameAM, onClick: onClickAM, children: "AM" }), _jsx("span", { className: classNamePM, onClick: onClickPM, children: "PM" })] })] }), _jsx("div", { className: "rls-picker-clock__body", children: _jsxs("div", { className: "rls-picker-clock__plate", ref: plateElement, onMouseDown: onActiveSelection, onMouseMove: onMouseSelection, onMouseUp: onInactiveSelection, onMouseLeave: onInactiveSelection, onTouchStart: onActiveSelection, onTouchMove: onTouchSelection, onTouchEnd: onInactiveSelection, children: [_jsx("div", { className: "rls-picker-clock__canvas", children: _jsx("svg", { width: "120rem", height: "120rem", children: _jsxs("g", { style: {
+                                        transform: `translate(${DIAL_RADIUS}rem, ${DIAL_RADIUS}rem)`
+                                    }, children: [_jsx("line", { ref: lineElement, className: "rls-picker-clock__canvas__line", x1: "-1", y1: "-1" }), _jsx("circle", { ref: centerElement, className: "rls-picker-clock__canvas__center", r: "4", cx: "-1", cy: "-1" }), _jsx("circle", { ref: indicatorElement, className: "rls-picker-clock__canvas__indicator", r: `${TICK_RADIUS}rem` }), _jsx("circle", { ref: pointElement, className: "rls-picker-clock__canvas__point", r: "3.5" })] }) }) }), _jsx("div", { className: "rls-picker-clock__hours", children: CLOCK_VALUES.map((value) => {
+                                return (_jsx(RlsPickerClockTick, { value: value, selectionIsHours: selectionIsHours, onValue: onClickValue }, value));
+                            }) })] }) }), _jsxs("div", { className: "rls-picker-clock__footer", children: [_jsx("div", { className: "rls-picker-clock__footer--cancel", children: _jsx(RlsButton, { type: "flat", onClick: onCancel, children: labels.timeActionCancel }) }), _jsx("div", { className: "rls-picker-clock__footer--today", children: _jsx(RlsButtonAction, { icon: "timer", onClick: onCurrentTime }) }), _jsx("div", { className: "rls-picker-clock__footer--ok", children: _jsx(RlsButton, { type: "gradient", onClick: onSelect, children: labels.timeActionSelect }) })] })] }));
+}
+//# sourceMappingURL=PickerClock.js.map