@homecode/ui 4.18.16 → 4.18.17

package/dist/esm/src/components/Form/Form.js

@@ -1,2 +1,286 @@
-import{jsx,jsxs}from"react/jsx-runtime";import{Component}from"react";import{createStore}from"justorm/react";import cn from"classnames";import compare from"compareq";import pick from"lodash.pick";import omit from"lodash.omit";import{Input}from"../Input/Input.js";import S from"./Form.styl.js";import{cloneValues,getNotEmpty,getInitialTouched,patchWithCustomMessages,dropFocusFromSubmit,getVal}from"./Form.helpers.js";import{Validator}from"./Validator.js";import"../Spinner/Spinner.styl.js";import"../Button/Button.styl.js";import"./SubmitButtons/SubmitButtons.styl.js";const STORE_FIELDS_EXPOSED=["isDirty","isEmpty","isValid","isLoading","values","errors","touched","changed","disabled"];function Field(t){const{value:e,error:s,markEdited:i,isChanged:a,isTouched:o,clearMargins:r,component:l=Input,className:n,onChange:h,onBlur:d,handleChange:c,handleBlur:u,children:m,...p}=t,{name:g,isHidden:v}=p,b="boolean"==typeof e?"checked":"value";t=cn(n,S.field,v&&S.hidden,r&&S.clearMargins,i&&a&&S.changed);return Object.assign(p,{name:g,[b]:e,onChange:function(t,e){e=getVal(t,e,b),h&&!1===h(t,e)||c(g,e)},onBlur:function(t){d&&!1===d(t)||u(g)},error:o&&s?.message}),jsxs("div",{className:t,children:[jsx(l,{...p}),m]})}class Form extends Component{store;validationSchema;defaultValues={};constructor(t){super(t);var{initialValues:t,validationSchema:e,defaultDisabled:s}=t,e=(this.updateDefaultValues(),this.validationSchema=e,cloneValues(t)),i=getNotEmpty(this.defaultValues,t),s=Object(s);this.store=createStore(this,{values:e,touched:getInitialTouched(t),changed:{},notEmpty:i,disabled:s,isLoading:!1,isDirty:!1,...this.getValidationState({values:e,disabled:s}),isEmpty:0===Object.keys(i).length})}componentDidMount(){this.calcChangedAll(),this.validate(),this.onInit()}shouldComponentUpdate({defaultValues:t,initialValues:e,validationSchema:s}){var i=!compare(s,this.props.validationSchema),a=!compare(e,this.props.initialValues),t=!compare(t,this.props.defaultValues);return this.validationSchema=s,a&&this.setInitialVals(e),t&&this.updateDefaultValues(),(a||t)&&this.calcChangedAll(e),(a||i)&&this.validate(),!0}updateDefaultValues(t=this.props){var{defaultValues:t,initialValues:e}=t;return t||cloneValues(e)}setInitialVals(t={}){this.store.values=cloneValues(t),this.validate(),this.onInit()}setValue=(t,e)=>{var s=this.store["values"];s[t]=e,this.calcChanged(t,e),this.validate()};setValues=t=>{var e=this.store["values"];return Object.assign(e,t),this.calcChangedAll(),this.validate(),e};setDisabled=(t,e)=>{var s=this.store["disabled"];"object"==typeof t?Object.assign(s,t):e?s[t]=!0:delete s[t]};reset=()=>{var t=this.props["initialValues"];this.setValues(t),this.store.touched=getInitialTouched(t)};field=t=>jsx(Field,{...this.getFieldProps(t)});getFieldProps(t){var e=this.props["markEdited"],s=t["name"],{values:i,changed:a,touched:o,errors:r}=this.store.originalObject,t={...t,value:i[s],markEdited:e,isChanged:a[s],isTouched:o[s],error:r?.[s],handleChange:this.onChange,handleBlur:this.onBlur};return!1===this.validationSchema?.[s].empty&&(t.required=!0),t}getFormAPI(){return{...pick(this.store.originalObject,STORE_FIELDS_EXPOSED),Field:this.field,setValue:this.setValue,setValues:this.setValues,setDisabled:this.setDisabled,reset:this.reset,submit:this.onSubmit}}getValidationState(t){t=this.getValidationErrors(t);return{isValid:0===Object.keys(t).length,errors:t}}getValidationErrors(t=this.store.originalObject){const{values:o,disabled:r}=t;var e;return this.validationSchema&&(t=Object.entries(this.validationSchema).reduce((t,[e,{...s}])=>{const{type:i,check:a}=s;return r[e]?t:("custom"===i&&(s.check=function(...t){return a.call(this,...t,o)}),{...t,[e]:s})},{}),"object"==typeof(e=Validator.validate(o,t)))?patchWithCustomMessages(e,t):{}}calcChanged(t,e){var s=this.props["initialValues"],{changed:i,notEmpty:a}=this.store;compare(e,s[t])?delete i[t]:i[t]=!0,compare(e,this.defaultValues[t])?delete a[t]:a[t]=!0,Object.assign(this.store,{isDirty:0<Object.keys(i).length,isEmpty:0===Object.keys(a).length})}calcChangedAll(i=this.props.initialValues){var t=this.store.originalObject["values"],e=getNotEmpty(this.defaultValues,t),t=Object.entries(t).reduce((t,[e,s])=>compare(i[e],s)?t:{...t,[e]:!0},{});Object.assign(this.store,{changed:t,isDirty:0<Object.keys(t).length,isEmpty:0===Object.keys(e).length})}validate(){Object.assign(this.store,this.getValidationState())}onInit(){var t=this.props["onInit"];t&&t(this.getFormAPI())}onSubmit=async t=>{var e=this.props["onSubmit"],s=this.store.originalObject["values"];t?.preventDefault(),dropFocusFromSubmit(),e&&(this.store.isLoading=!0,await e({...s}),this.store.isLoading=!1)};onChange=(t,e)=>{var s,i=this.props["onChange"],{values:a,touched:o}=this.store;a[t]===e||(s={...a.originalObject,[t]:e},i&&!1===i(s))||(a[t]=e,o[t]=!0,this.handleChange(t,e))};onBlur=t=>{this.store.touched[t]=!0};handleChange(t,e){this.calcChanged(t,e),this.validate()}render(){const{className:t,children:e,...s}=this.props;var i=this.store["isLoading"],i=cn(S.root,t,i&&S.isLoading),a=omit(s,["defaultValues","defaultDisabled","initialValues","validationSchema","onInit","onChange","onSubmit"]);return jsx("form",{className:i,...a,onSubmit:this.onSubmit,children:e(this.getFormAPI())})}}export{Form};
-//# sourceMappingURL=Form.js.map
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Component } from 'react';
+import { createStore } from 'justorm/react';
+import cn from 'classnames';
+import compare from 'compareq';
+import pick from 'lodash.pick';
+import omit from 'lodash.omit';
+import { Input } from '../Input/Input.js';
+import S from './Form.styl.js';
+import { cloneValues, getNotEmpty, getInitialTouched, patchWithCustomMessages, dropFocusFromSubmit, getVal } from './Form.helpers.js';
+import { Validator } from './Validator.js';
+import '../Spinner/Spinner.styl.js';
+import '../Button/Button.styl.js';
+import './SubmitButtons/SubmitButtons.styl.js';
+
+const STORE_FIELDS_EXPOSED = [
+    'isDirty',
+    'isEmpty',
+    'isValid',
+    'isLoading',
+    'values',
+    'errors',
+    'touched',
+    'changed',
+    'disabled',
+];
+function Field(props) {
+    const { value, error, markEdited, isChanged, isTouched, clearMargins, component: Control = Input, className, onChange, onBlur, handleChange, handleBlur, children, ...controlProps } = props;
+    const { name, isHidden } = controlProps;
+    const valField = typeof value === 'boolean' ? 'checked' : 'value';
+    const classes = cn(className, S.field, isHidden && S.hidden, clearMargins && S.clearMargins, markEdited && isChanged && S.changed);
+    function handleFieldChange(e, val) {
+        const v = getVal(e, val, valField);
+        if (onChange && onChange(e, v) === false)
+            return;
+        handleChange(name, v);
+    }
+    function handleFieldBlur(e) {
+        if (onBlur && onBlur(e) === false)
+            return;
+        handleBlur(name);
+    }
+    Object.assign(controlProps, {
+        name,
+        [valField]: value,
+        onChange: handleFieldChange,
+        onBlur: handleFieldBlur,
+        error: isTouched && error?.message,
+    });
+    return (jsxs("div", { className: classes, children: [jsx(Control, { ...controlProps }), children] }));
+}
+class Form extends Component {
+    store;
+    validationSchema;
+    defaultValues = {};
+    constructor(props) {
+        super(props);
+        const { initialValues, validationSchema, defaultDisabled } = props;
+        this.updateDefaultValues();
+        this.validationSchema = validationSchema;
+        const values = cloneValues(initialValues);
+        const notEmpty = getNotEmpty(this.defaultValues, initialValues);
+        const disabled = Object(defaultDisabled);
+        this.store = createStore(this, {
+            values,
+            touched: getInitialTouched(initialValues),
+            changed: {},
+            notEmpty,
+            disabled,
+            isLoading: false,
+            isDirty: false,
+            // TODO: do not validate here (only when Field is mounted)
+            ...this.getValidationState({ values, disabled }),
+            isEmpty: Object.keys(notEmpty).length === 0,
+        });
+    }
+    componentDidMount() {
+        this.calcChangedAll();
+        this.validate();
+        this.onInit();
+    }
+    shouldComponentUpdate({ defaultValues, initialValues, validationSchema, }) {
+        const validationChanged = !compare(validationSchema, this.props.validationSchema);
+        const initialValsChanged = !compare(initialValues, this.props.initialValues);
+        const defaultValsChanged = !compare(defaultValues, this.props.defaultValues);
+        this.validationSchema = validationSchema;
+        if (initialValsChanged) {
+            this.setInitialVals(initialValues);
+        }
+        if (defaultValsChanged)
+            this.updateDefaultValues();
+        if (initialValsChanged || defaultValsChanged) {
+            this.calcChangedAll(initialValues);
+        }
+        if (initialValsChanged || validationChanged) {
+            this.validate();
+        }
+        return true;
+    }
+    updateDefaultValues(props = this.props) {
+        const { defaultValues, initialValues } = props;
+        return defaultValues || cloneValues(initialValues);
+    }
+    setInitialVals(initialValues = {}) {
+        this.store.values = cloneValues(initialValues);
+        this.validate();
+        this.onInit();
+    }
+    setValue = (field, val) => {
+        const { values } = this.store;
+        values[field] = val;
+        this.calcChanged(field, val);
+        this.validate();
+    };
+    setValues = vals => {
+        const { values } = this.store;
+        Object.assign(values, vals);
+        this.calcChangedAll();
+        this.validate();
+        return values;
+    };
+    setDisabled = (name, isDisabled) => {
+        const { disabled } = this.store;
+        if (typeof name === 'object') {
+            Object.assign(disabled, name);
+            return;
+        }
+        if (isDisabled) {
+            disabled[name] = true;
+        }
+        else {
+            delete disabled[name];
+        }
+    };
+    reset = () => {
+        const { initialValues } = this.props;
+        this.setValues(initialValues);
+        this.store.touched = getInitialTouched(initialValues);
+    };
+    field = (props) => jsx(Field, { ...this.getFieldProps(props) });
+    getFieldProps(props) {
+        const { markEdited } = this.props;
+        const { name } = props;
+        const { values, changed, touched, errors } = this.store.originalObject;
+        const fieldProps = {
+            ...props,
+            value: values[name],
+            markEdited,
+            isChanged: changed[name],
+            isTouched: touched[name],
+            error: errors?.[name],
+            handleChange: this.onChange,
+            handleBlur: this.onBlur,
+        };
+        if (this.validationSchema?.[name].empty === false)
+            fieldProps.required = true;
+        return fieldProps;
+    }
+    getFormAPI() {
+        return {
+            ...pick(this.store.originalObject, STORE_FIELDS_EXPOSED),
+            Field: this.field,
+            setValue: this.setValue,
+            setValues: this.setValues,
+            setDisabled: this.setDisabled,
+            reset: this.reset,
+            submit: this.onSubmit,
+        };
+    }
+    getValidationState(store) {
+        const errors = this.getValidationErrors(store);
+        const isValid = Object.keys(errors).length === 0;
+        return { isValid, errors };
+    }
+    getValidationErrors(store = this.store.originalObject) {
+        const { values, disabled } = store;
+        if (!this.validationSchema)
+            return {};
+        // @ts-ignore
+        const schema = Object.entries(this.validationSchema).reduce((acc, [field, { ...rule }]) => {
+            const { type, check } = rule;
+            if (disabled[field])
+                return acc;
+            if (type === 'custom') {
+                // NOTE: pass all `values` to custom checker function
+                // to allow create validator for dependent fields
+                // @ts-ignore
+                rule.check = function checkWrap(...args) {
+                    // @ts-ignore
+                    return check.call(this, ...args, values);
+                };
+            }
+            return { ...acc, [field]: rule };
+        }, {});
+        const res = Validator.validate(values, schema);
+        if (typeof res === 'object')
+            return patchWithCustomMessages(res, schema);
+        return {};
+    }
+    calcChanged(field, val) {
+        const { initialValues } = this.props;
+        const { changed, notEmpty } = this.store;
+        if (compare(val, initialValues[field])) {
+            delete changed[field];
+        }
+        else {
+            changed[field] = true;
+        }
+        if (compare(val, this.defaultValues[field])) {
+            delete notEmpty[field];
+        }
+        else {
+            notEmpty[field] = true;
+        }
+        Object.assign(this.store, {
+            isDirty: Object.keys(changed).length > 0,
+            isEmpty: Object.keys(notEmpty).length === 0,
+        });
+    }
+    calcChangedAll(initialValues = this.props.initialValues) {
+        const { values } = this.store.originalObject;
+        const notEmpty = getNotEmpty(this.defaultValues, values);
+        const changed = Object.entries(values).reduce((acc, [field, val]) => compare(initialValues[field], val) ? acc : { ...acc, [field]: true }, {});
+        Object.assign(this.store, {
+            changed,
+            isDirty: Object.keys(changed).length > 0,
+            isEmpty: Object.keys(notEmpty).length === 0,
+        });
+    }
+    validate() {
+        Object.assign(this.store, this.getValidationState());
+    }
+    onInit() {
+        const { onInit } = this.props;
+        if (onInit)
+            onInit(this.getFormAPI());
+    }
+    onSubmit = async (e) => {
+        const { onSubmit } = this.props;
+        const { values } = this.store.originalObject;
+        e?.preventDefault();
+        dropFocusFromSubmit();
+        if (!onSubmit)
+            return;
+        this.store.isLoading = true;
+        await onSubmit({ ...values });
+        this.store.isLoading = false;
+    };
+    onChange = (field, val) => {
+        const { onChange } = this.props;
+        const { values, touched } = this.store;
+        if (values[field] === val)
+            return;
+        const newValues = { ...values.originalObject, [field]: val };
+        // @ts-ignore
+        if (onChange && onChange(newValues) === false)
+            return;
+        values[field] = val;
+        touched[field] = true;
+        this.handleChange(field, val);
+    };
+    onBlur = (name) => {
+        this.store.touched[name] = true;
+    };
+    handleChange(field, val) {
+        this.calcChanged(field, val);
+        this.validate();
+    }
+    render() {
+        const { className, children, ...rest } = this.props;
+        const { isLoading } = this.store;
+        const classes = cn(S.root, className, isLoading && S.isLoading);
+        const formProps = omit(rest, [
+            'defaultValues',
+            'defaultDisabled',
+            'initialValues',
+            'validationSchema',
+            'onInit',
+            'onChange',
+            'onSubmit',
+        ]);
+        return (jsx("form", { className: classes, ...formProps, onSubmit: this.onSubmit, children: children(this.getFormAPI()) }));
+    }
+}
+
+export { Form };

package/dist/esm/src/components/Form/Form.styl.js

@@ -1,2 +1,7 @@
-import styleInject from"../../../node_modules/style-inject/dist/style-inject.es.js";var css_248z='.Form_root__EzxOr{margin:0 auto;max-width:100%;width:100%}.Form_isLoading__D1sPp{opacity:.8;pointer-events:none;transition:opacity .2s ease-out}.Form_field__S50yT{position:relative}.Form_field__S50yT+.Form_field__S50yT{margin-top:10px}.Form_field__S50yT+.Form_field__S50yT.Form_clearMargins__-KvTS{margin-top:0}.Form_field__S50yT.Form_changed__j-elu:after{background-color:$primaryColor;border-radius:50%;box-shadow:0 0 0 1px hsla(0,0%,100%,.8);content:"";height:6px;pointer-events:none;position:absolute;right:-2px;top:-2px;width:6px;z-index:1}.Form_hidden__MId3H{display:none}.Form_error__J7BaB{color:#e91b20;font-size:80%;margin:5px}',S={root:"Form_root__EzxOr",isLoading:"Form_isLoading__D1sPp",field:"Form_field__S50yT",clearMargins:"Form_clearMargins__-KvTS",changed:"Form_changed__j-elu",hidden:"Form_hidden__MId3H",error:"Form_error__J7BaB"};styleInject(css_248z);export{S as default};
-//# sourceMappingURL=Form.styl.js.map
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".Form_root__EzxOr{margin:0 auto;max-width:100%;width:100%}.Form_isLoading__D1sPp{opacity:.8;pointer-events:none;transition:opacity .2s ease-out}.Form_field__S50yT{position:relative}.Form_field__S50yT+.Form_field__S50yT{margin-top:10px}.Form_field__S50yT+.Form_field__S50yT.Form_clearMargins__-KvTS{margin-top:0}.Form_field__S50yT.Form_changed__j-elu:after{background-color:$primaryColor;border-radius:50%;box-shadow:0 0 0 1px hsla(0,0%,100%,.8);content:\"\";height:6px;pointer-events:none;position:absolute;right:-2px;top:-2px;width:6px;z-index:1}.Form_hidden__MId3H{display:none}.Form_error__J7BaB{color:#e91b20;font-size:80%;margin:5px}";
+var S = {"root":"Form_root__EzxOr","isLoading":"Form_isLoading__D1sPp","field":"Form_field__S50yT","clearMargins":"Form_clearMargins__-KvTS","changed":"Form_changed__j-elu","hidden":"Form_hidden__MId3H","error":"Form_error__J7BaB"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/src/components/Form/Form.types.js

@@ -1,2 +1 @@
 
-//# sourceMappingURL=Form.types.js.map

package/dist/esm/src/components/Form/SubmitButtons/SubmitButtons.js

@@ -1,2 +1,8 @@
-import{jsx}from"react/jsx-runtime";import cn from"classnames";import{Button}from"../../Button/Button.js";import S from"./SubmitButtons.styl.js";const SubmitButtons=({buttons:t,className:s,...o})=>jsx("div",{className:cn(S.root,s),...o,children:t.map(t=>jsx(Button,{className:cn(S.item,t.className),...t}))});export{SubmitButtons};
-//# sourceMappingURL=SubmitButtons.js.map
+import { jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { Button } from '../../Button/Button.js';
+import S from './SubmitButtons.styl.js';
+
+const SubmitButtons = ({ buttons, className, ...props }) => (jsx("div", { className: cn(S.root, className), ...props, children: buttons.map(buttonProps => (jsx(Button, { className: cn(S.item, buttonProps.className), ...buttonProps }))) }));
+
+export { SubmitButtons };

package/dist/esm/src/components/Form/SubmitButtons/SubmitButtons.styl.js

@@ -1,2 +1,7 @@
-import styleInject from"../../../../node_modules/style-inject/dist/style-inject.es.js";var css_248z=".SubmitButtons_root__sXP-n{display:flex;justify-content:flex-end;margin-top:15px}.SubmitButtons_item__f0l6w+.SubmitButtons_item__f0l6w{margin-left:10px}",S={root:"SubmitButtons_root__sXP-n",item:"SubmitButtons_item__f0l6w"};styleInject(css_248z);export{S as default};
-//# sourceMappingURL=SubmitButtons.styl.js.map
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".SubmitButtons_root__sXP-n{display:flex;justify-content:flex-end;margin-top:15px}.SubmitButtons_item__f0l6w+.SubmitButtons_item__f0l6w{margin-left:10px}";
+var S = {"root":"SubmitButtons_root__sXP-n","item":"SubmitButtons_item__f0l6w"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/src/components/Form/Validator.js

@@ -1,18 +1,36 @@
-import FastestValidator from"fastest-validator";const Validator=new FastestValidator({messages:{momentDate:"Invalid date",momentRange:"Invalid dates range"}});Validator.add("momentDate",function({messages:a}){return{source:`
+import FastestValidator from 'fastest-validator';
+
+const Validator = new FastestValidator({
+    messages: {
+        momentDate: 'Invalid date',
+        momentRange: 'Invalid dates range',
+    },
+});
+Validator.add('momentDate', function momentDate({ messages }) {
+    return {
+        source: `
       if (!value.isValid())
         // @ts-ignore
-        ${this.makeError({type:"momentDate",actual:"value",messages:a})}
+        ${this.makeError({ type: 'momentDate', actual: 'value', messages })}
 
       return value;
-    `}}),Validator.add("momentRange",function({messages:a}){return{source:`
+    `,
+    };
+});
+Validator.add('momentRange', function momentRange({ messages }) {
+    return {
+        source: `
       const isValid =
         value.startDate && value.startDate.isValid() &&
         value.endDate && value.endDate.isValid();
 
       if (!isValid)
         // @ts-ignore
-        ${this.makeError({type:"momentRange",actual:"value",messages:a})}
+        ${this.makeError({ type: 'momentRange', actual: 'value', messages })}
 
       return value;
-    `}});export{Validator};
-//# sourceMappingURL=Validator.js.map
+    `,
+    };
+});
+
+export { Validator };

package/dist/esm/src/components/Gallery/Dots/Dots.js

@@ -1,2 +1,9 @@
-import{jsx}from"react/jsx-runtime";import cn from"classnames";import S from"./Dots.styl.js";function Dots({index:t,count:s}){return jsx("div",{className:S.root,children:jsx("div",{className:S.inner,children:Array.from({length:s}).map((s,r)=>jsx("div",{className:cn(S.item,r===t&&S.active)},r))})})}export{Dots as default};
-//# sourceMappingURL=Dots.js.map
+import { jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import S from './Dots.styl.js';
+
+function Dots({ index, count }) {
+    return (jsx("div", { className: S.root, children: jsx("div", { className: S.inner, children: Array.from({ length: count }).map((_, i) => (jsx("div", { className: cn(S.item, i === index && S.active) }, i))) }) }));
+}
+
+export { Dots as default };

package/dist/esm/src/components/Gallery/Dots/Dots.styl.js

@@ -1,2 +1,7 @@
-import styleInject from"../../../../node_modules/style-inject/dist/style-inject.es.js";var css_248z=".Dots_root__dTavT{bottom:1%;display:flex;justify-content:center;-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);overflow:hidden;padding:0 10%;pointer-events:none;position:absolute;width:100%}.Dots_inner__0Nqa9{align-items:center;display:flex}.Dots_item__gEVuS{background-color:var(--accent-color-alpha-200);border-radius:50%;box-shadow:0 0 0 1px var(--decent-color-alpha-500);flex-shrink:0;height:8px;margin:3px;transition:.1s ease-out;transition-property:background-color,transform;width:8px}.Dots_item__gEVuS.Dots_active__gAUAj{background-color:var(--accent-color-alpha-500);transform:scale(1.2)}",S={root:"Dots_root__dTavT",inner:"Dots_inner__0Nqa9",item:"Dots_item__gEVuS",active:"Dots_active__gAUAj"};styleInject(css_248z);export{S as default};
-//# sourceMappingURL=Dots.styl.js.map
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".Dots_root__dTavT{bottom:1%;display:flex;justify-content:center;-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);overflow:hidden;padding:0 10%;pointer-events:none;position:absolute;width:100%}.Dots_inner__0Nqa9{align-items:center;display:flex}.Dots_item__gEVuS{background-color:var(--accent-color-alpha-200);border-radius:50%;box-shadow:0 0 0 1px var(--decent-color-alpha-500);flex-shrink:0;height:8px;margin:3px;transition:.1s ease-out;transition-property:background-color,transform;width:8px}.Dots_item__gEVuS.Dots_active__gAUAj{background-color:var(--accent-color-alpha-500);transform:scale(1.2)}";
+var S = {"root":"Dots_root__dTavT","inner":"Dots_inner__0Nqa9","item":"Dots_item__gEVuS","active":"Dots_active__gAUAj"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/src/components/Gallery/Gallery.js

@@ -1,2 +1,180 @@
-import{jsxs,jsx,Fragment}from"react/jsx-runtime";import{Component,createRef}from"react";import{createStore}from"justorm/react";import Time from"timen";import compare from"compareq";import cn from"classnames";import omit from"lodash.omit";import{Button}from"../Button/Button.js";import{Icon}from"../Icon/Icon.js";import{Spinner}from"../Spinner/Spinner.js";import throttle from"../../tools/throttle.js";import{circularSlice}from"../../tools/array.js";import S from"./Gallery.styl.js";import{Lazy}from"../Lazy/Lazy.js";const THRESHOLD=50,DURATION=200,DIR_NAME={1:"left","-1":"right"};function getInitialState(t,e){return circularSlice(t,e,3)}function Arr({className:t,size:e,icon:i,...s}){return jsx(Button,{className:cn(S.arr,t),size:e,variant:"clear",...s,children:jsx(Icon,{type:i,size:e})})}function Item({src:t,size:e,isLoaded:i,isError:s,onLoad:r,onError:o}){var n={};return i&&(n.backgroundImage=`url(${t})`),jsx("div",{className:S.item,style:n,children:!i&&(s?jsx(Icon,{type:"brokenImage",className:S.brokenImage}):jsxs(Fragment,{children:[jsx("img",{src:t,onLoad:r,onError:o}),jsx(Spinner,{size:e})]}))})}class Gallery extends Component{store;items;index=0;timers=Time.create();startX=null;innerRef=createRef();static defaultProps={size:"m",animation:!0,startIndex:0};constructor(t){super(t);t=t.startIndex;this.recenter(),this.index=t,this.store=createStore(this,{items:this.getStateItems(),movingDirection:0,loading:{},errors:{},isDragging:!1})}componentDidMount(){this.init()}componentWillUnmount(){this.timers.clear()}componentDidUpdate(t){var{items:e,startIndex:i}=this.props;t.startIndex===i&&compare(t.items,e)||(this.index=i,this.recenter(),this.store.items=this.getStateItems())}getStateItems(){return this.isSingle()?[this.props.items[0]]:getInitialState(this.items,this.index)}recenter(){var[...t]=this.props.items;this.items=[t.pop(),...t]}init(){var t=this.store["items"];1<t.length&&this.subscribe()}subscribe(){document.addEventListener("keydown",this.onKeyDown)}isSingle=()=>this.props.items.length<2;onKeyDown=t=>{if(!this.isSingle())return"ArrowRight"===t.key?(t.stopPropagation(),this.move(-1)):"ArrowLeft"===t.key?(t.stopPropagation(),this.move(1)):void 0};onPointerDown=t=>{this.startX=t.pageX};onPointerMove=t=>{null===this.startX||(t=this.getDelta(t),Math.abs(t)<THRESHOLD)||(this.store.isDragging=!0,this.setTransformDelta(t))};onPointerUp=t=>{this.startX&&(t=this.getDelta(t),this.startX=null,this.store.isDragging)&&t&&(this.store.isDragging=!1,t=t/Math.abs(t),this.move(t))};getDelta=t=>t.pageX-this.startX;setTransformDelta=t=>{this.innerRef.current.style.transform=`translateX(calc(-100% / 3 + ${t}px))`};removeTransformDelta=()=>{this.innerRef.current.style.transform=""};move=throttle(function(t){var e=this.props["animation"];if(this.store.isDragging=!1,this.startX=null,!e)return this.switch(t);this.store.movingDirection=t,this.timers.clear(),this.timers.after(DURATION,()=>this.switch(t))},DURATION);switch(t){this.index+=-1*t,this.store.items=circularSlice(this.items,this.index,3),this.store.movingDirection=0,this.removeTransformDelta();t=this.props.onChange;const{items:e,loading:i}=this.store;t?.(this.index,this.items[this.index]),e.forEach(t=>{"boolean"!=typeof i[t]&&(i[t]=!1)})}render(){const{className:t,size:i,showArrows:e,showDots:s,initialBounce:r,cover:o,...n}=this.props,{items:a,movingDirection:m,loading:h,errors:c,isDragging:l}=this.store;var p=DIR_NAME[m],g=this.isSingle(),d=omit(n,["items","onChange","animation","startIndex"]),f=cn(S.root,g&&S.single,o&&S.cover,t),p=cn(S.inner,r&&S.initialBounce,S[p]);return g||(d.onPointerDown=this.onPointerDown,d.onPointerMove=this.onPointerMove,l&&(d.onPointerUp=this.onPointerUp,d.onPointerLeave=this.onPointerUp)),jsxs("div",{className:f,...d,children:[jsx("div",{className:p,ref:this.innerRef,children:a.map((t,e)=>jsx(Item,{src:t,size:i,isLoaded:h[t],isError:c[t],onLoad:()=>h[t]=!0,onError:()=>c[t]=!0},e+"_"+t))}),!g&&e&&!l&&jsxs(Fragment,{children:[jsx(Arr,{className:S.left,size:i,icon:"chevronLeft",onClick:()=>this.move(1)}),jsx(Arr,{className:S.right,size:i,icon:"chevronRight",onClick:()=>this.move(-1)})]}),s&&jsx(Lazy,{hideSpinner:!0,loader:()=>import("./Dots/Dots.js"),index:this.index%a.length,count:a.length})]})}}export{Gallery};
-//# sourceMappingURL=Gallery.js.map
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { Component, createRef } from 'react';
+import { createStore } from 'justorm/react';
+import Time from 'timen';
+import compare from 'compareq';
+import cn from 'classnames';
+import omit from 'lodash.omit';
+import { Button } from '../Button/Button.js';
+import { Icon } from '../Icon/Icon.js';
+import { Spinner } from '../Spinner/Spinner.js';
+import throttle from '../../tools/throttle.js';
+import { circularSlice } from '../../tools/array.js';
+import S from './Gallery.styl.js';
+import { Lazy } from '../Lazy/Lazy.js';
+
+const THRESHOLD = 50;
+const DURATION = 200;
+const DIR_NAME = {
+    '1': 'left',
+    '-1': 'right',
+};
+function getInitialState(items, startIndex) {
+    return circularSlice(items, startIndex, 3);
+}
+function Arr({ className, size, icon, ...rest }) {
+    return (jsx(Button, { className: cn(S.arr, className), size: size, variant: "clear", ...rest, children: jsx(Icon, { type: icon, size: size }) }));
+}
+function Item({ src, size, isLoaded, isError, onLoad, onError }) {
+    const style = {};
+    if (isLoaded)
+        style.backgroundImage = `url(${src})`;
+    return (jsx("div", { className: S.item, style: style, children: !isLoaded &&
+            (isError ? (jsx(Icon, { type: "brokenImage", className: S.brokenImage })) : (jsxs(Fragment, { children: [jsx("img", { src: src, onLoad: onLoad, onError: onError }), jsx(Spinner, { size: size })] }))) }));
+}
+class Gallery extends Component {
+    store;
+    items;
+    index = 0;
+    timers = Time.create();
+    startX = null;
+    innerRef = createRef();
+    static defaultProps = {
+        size: 'm',
+        animation: true,
+        startIndex: 0,
+    };
+    constructor(props) {
+        super(props);
+        const { startIndex, items } = props;
+        this.recenter();
+        this.index = startIndex;
+        this.store = createStore(this, {
+            items: this.getStateItems(),
+            movingDirection: 0,
+            loading: {},
+            errors: {},
+            isDragging: false,
+        });
+    }
+    componentDidMount() {
+        this.init();
+    }
+    componentWillUnmount() {
+        this.timers.clear();
+    }
+    componentDidUpdate(prevProps) {
+        const { items, startIndex } = this.props;
+        if (prevProps.startIndex !== startIndex ||
+            !compare(prevProps.items, items)) {
+            this.index = startIndex;
+            this.recenter();
+            this.store.items = this.getStateItems();
+        }
+    }
+    getStateItems() {
+        return this.isSingle()
+            ? [this.props.items[0]]
+            : getInitialState(this.items, this.index);
+    }
+    recenter() {
+        const [...items] = this.props.items;
+        this.items = [items.pop(), ...items];
+    }
+    init() {
+        const { items } = this.store;
+        if (items.length > 1)
+            this.subscribe();
+    }
+    subscribe() {
+        document.addEventListener('keydown', this.onKeyDown);
+    }
+    isSingle = () => this.props.items.length < 2;
+    onKeyDown = e => {
+        if (this.isSingle())
+            return;
+        if (e.key === 'ArrowRight') {
+            e.stopPropagation();
+            return this.move(-1);
+        }
+        if (e.key === 'ArrowLeft') {
+            e.stopPropagation();
+            return this.move(1);
+        }
+    };
+    onPointerDown = e => {
+        this.startX = e.pageX;
+    };
+    onPointerMove = e => {
+        if (this.startX === null)
+            return;
+        const delta = this.getDelta(e);
+        if (Math.abs(delta) < THRESHOLD)
+            return;
+        this.store.isDragging = true;
+        this.setTransformDelta(delta);
+    };
+    onPointerUp = e => {
+        if (!this.startX)
+            return;
+        const delta = this.getDelta(e);
+        this.startX = null;
+        if (!this.store.isDragging || !delta)
+            return;
+        this.store.isDragging = false;
+        const dir = delta / Math.abs(delta);
+        this.move(dir);
+    };
+    getDelta = e => e.pageX - this.startX;
+    setTransformDelta = (delta) => {
+        this.innerRef.current.style.transform = `translateX(calc(-100% / 3 + ${delta}px))`;
+    };
+    removeTransformDelta = () => {
+        this.innerRef.current.style.transform = '';
+    };
+    move = throttle(function (direction) {
+        const { animation } = this.props;
+        this.store.isDragging = false;
+        this.startX = null;
+        if (!animation)
+            return this.switch(direction);
+        this.store.movingDirection = direction;
+        this.timers.clear();
+        this.timers.after(DURATION, () => this.switch(direction));
+    }, DURATION);
+    switch(direction) {
+        this.index += direction * -1;
+        this.store.items = circularSlice(this.items, this.index, 3);
+        this.store.movingDirection = 0;
+        this.removeTransformDelta();
+        const { onChange } = this.props;
+        const { items, loading } = this.store;
+        onChange?.(this.index, this.items[this.index]);
+        items.forEach(src => {
+            if (typeof loading[src] !== 'boolean')
+                loading[src] = false;
+        });
+    }
+    render() {
+        const { className, size, showArrows, showDots, initialBounce, cover, ...rest } = this.props;
+        const { items, movingDirection, loading, errors, isDragging } = this.store;
+        const dirName = DIR_NAME[movingDirection];
+        const isSingle = this.isSingle();
+        const props = omit(rest, ['items', 'onChange', 'animation', 'startIndex']);
+        const classes = cn(S.root, isSingle && S.single, cover && S.cover, className);
+        const innerClasses = cn(S.inner, initialBounce && S.initialBounce, S[dirName]);
+        if (!isSingle) {
+            props.onPointerDown = this.onPointerDown;
+            props.onPointerMove = this.onPointerMove;
+            if (isDragging) {
+                props.onPointerUp = this.onPointerUp;
+                props.onPointerLeave = this.onPointerUp;
+            }
+        }
+        return (jsxs("div", { className: classes, ...props, children: [jsx("div", { className: innerClasses, ref: this.innerRef, children: items.map((src, i) => (jsx(Item, { src: src, size: size, isLoaded: loading[src], isError: errors[src], onLoad: () => (loading[src] = true), onError: () => (errors[src] = true) }, `${i}_${src}`))) }), !isSingle && showArrows && !isDragging && (jsxs(Fragment, { children: [jsx(Arr, { className: S.left, size: size, icon: "chevronLeft", onClick: () => this.move(1) }), jsx(Arr, { className: S.right, size: size, icon: "chevronRight", onClick: () => this.move(-1) })] })), showDots && (jsx(Lazy, { hideSpinner: true, 
+                    // @ts-ignore
+                    loader: () => import('./Dots/Dots.js'), index: this.index % items.length, count: items.length }))] }));
+    }
+}
+
+export { Gallery };

package/dist/esm/src/components/Gallery/Gallery.styl.js

@@ -1,2 +1,7 @@
-import styleInject from"../../../node_modules/style-inject/dist/style-inject.es.js";var css_248z=".Gallery_item__P4qTJ,.Gallery_root__-Crit{height:100%;width:100%}.Gallery_root__-Crit{overflow:hidden;position:relative}.Gallery_inner__4FAPt{-webkit-backface-visibility:hidden;backface-visibility:hidden;display:flex;height:100%;position:absolute;touch-action:none;transform:translate3d(-33.33333%,0,0);width:calc(300% + 1px)}.Gallery_single__Wfd9h .Gallery_inner__4FAPt{transform:none;width:100%}.Gallery_single__Wfd9h .Gallery_item__P4qTJ{width:100%}.Gallery_inner__4FAPt.Gallery_left__zrrmv,.Gallery_inner__4FAPt.Gallery_right__dpZ-m{transition:transform 0s ease-out;transition-duration:.2s}.Gallery_inner__4FAPt.Gallery_left__zrrmv{transform:translateZ(0)!important}.Gallery_inner__4FAPt.Gallery_right__dpZ-m{transform:translate3d(-66.66667%,0,0)!important}.Gallery_inner__4FAPt.Gallery_initialBounce__nZnKd{animation:Gallery_bounce__buqva 1s ease-out}.Gallery_item__P4qTJ{align-items:center;background-position:50%;background-repeat:no-repeat;background-size:contain;display:flex;justify-content:center;width:33.33333%}.Gallery_cover__ZGx5X .Gallery_item__P4qTJ{background-size:cover}.Gallery_item__P4qTJ>img{opacity:0;pointer-events:none;position:absolute}.Gallery_brokenImage__Bj3O-{height:50%;opacity:.2;width:50%}.Gallery_arr__knicI{background:transparent!important;height:100%;min-height:100%;opacity:0;padding:10%;position:absolute;top:0;transition:opacity .1s ease-out}.Gallery_arr__knicI.Gallery_left__zrrmv{justify-content:flex-start;left:0}.Gallery_arr__knicI.Gallery_right__dpZ-m{justify-content:flex-end;right:0;width:77%}.Gallery_arr__knicI:hover{opacity:1}@keyframes Gallery_bounce__buqva{0%{left:0}50%{left:-20%}80%{left:10%}to{left:0}}",S={root:"Gallery_root__-Crit",item:"Gallery_item__P4qTJ",inner:"Gallery_inner__4FAPt",single:"Gallery_single__Wfd9h",left:"Gallery_left__zrrmv",right:"Gallery_right__dpZ-m",initialBounce:"Gallery_initialBounce__nZnKd",bounce:"Gallery_bounce__buqva",cover:"Gallery_cover__ZGx5X",brokenImage:"Gallery_brokenImage__Bj3O-",arr:"Gallery_arr__knicI"};styleInject(css_248z);export{S as default};
-//# sourceMappingURL=Gallery.styl.js.map
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".Gallery_item__P4qTJ,.Gallery_root__-Crit{height:100%;width:100%}.Gallery_root__-Crit{overflow:hidden;position:relative}.Gallery_inner__4FAPt{-webkit-backface-visibility:hidden;backface-visibility:hidden;display:flex;height:100%;position:absolute;touch-action:none;transform:translate3d(-33.33333%,0,0);width:calc(300% + 1px)}.Gallery_single__Wfd9h .Gallery_inner__4FAPt{transform:none;width:100%}.Gallery_single__Wfd9h .Gallery_item__P4qTJ{width:100%}.Gallery_inner__4FAPt.Gallery_left__zrrmv,.Gallery_inner__4FAPt.Gallery_right__dpZ-m{transition:transform 0s ease-out;transition-duration:.2s}.Gallery_inner__4FAPt.Gallery_left__zrrmv{transform:translateZ(0)!important}.Gallery_inner__4FAPt.Gallery_right__dpZ-m{transform:translate3d(-66.66667%,0,0)!important}.Gallery_inner__4FAPt.Gallery_initialBounce__nZnKd{animation:Gallery_bounce__buqva 1s ease-out}.Gallery_item__P4qTJ{align-items:center;background-position:50%;background-repeat:no-repeat;background-size:contain;display:flex;justify-content:center;width:33.33333%}.Gallery_cover__ZGx5X .Gallery_item__P4qTJ{background-size:cover}.Gallery_item__P4qTJ>img{opacity:0;pointer-events:none;position:absolute}.Gallery_brokenImage__Bj3O-{height:50%;opacity:.2;width:50%}.Gallery_arr__knicI{background:transparent!important;height:100%;min-height:100%;opacity:0;padding:10%;position:absolute;top:0;transition:opacity .1s ease-out}.Gallery_arr__knicI.Gallery_left__zrrmv{justify-content:flex-start;left:0}.Gallery_arr__knicI.Gallery_right__dpZ-m{justify-content:flex-end;right:0;width:77%}.Gallery_arr__knicI:hover{opacity:1}@keyframes Gallery_bounce__buqva{0%{left:0}50%{left:-20%}80%{left:10%}to{left:0}}";
+var S = {"root":"Gallery_root__-Crit","item":"Gallery_item__P4qTJ","inner":"Gallery_inner__4FAPt","single":"Gallery_single__Wfd9h","left":"Gallery_left__zrrmv","right":"Gallery_right__dpZ-m","initialBounce":"Gallery_initialBounce__nZnKd","bounce":"Gallery_bounce__buqva","cover":"Gallery_cover__ZGx5X","brokenImage":"Gallery_brokenImage__Bj3O-","arr":"Gallery_arr__knicI"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/src/components/Heading/Heading.js

@@ -1,2 +1,37 @@
-import{jsxs,jsx}from"react/jsx-runtime";import{memo,useEffect}from"react";import{scrollIntoView}from"../../tools/scroll.js";import S from"./Heading.styl.js";let subscribersCount=0;function onClick(e){var t,s=e.target?.getAttribute("href");s&&/#/.test(s)&&([t,s]=s.split("#"),s=document.getElementById(s))&&(scrollIntoView(s),e.stopPropagation())}function subscribe(){0===subscribersCount&&window.addEventListener("click",onClick,!0),subscribersCount++}function unsubscribe(){0==--subscribersCount&&window.removeEventListener("click",onClick,!0)}const Heading=memo(function({id:e,text:t}){return useEffect(()=>(subscribe(),unsubscribe)),jsxs("h2",{className:S.root,id:e,children:[jsx("a",{href:location.pathname+"#"+e,className:S.link,children:"#"}),t]})});export{Heading};
-//# sourceMappingURL=Heading.js.map
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { memo, useEffect } from 'react';
+import { scrollIntoView } from '../../tools/scroll.js';
+import S from './Heading.styl.js';
+
+let subscribersCount = 0;
+function onClick(e) {
+    const href = e.target?.getAttribute('href');
+    if (!href || !/#/.test(href))
+        return;
+    const [path, hash] = href.split('#');
+    const heading = document.getElementById(hash);
+    if (heading) {
+        scrollIntoView(heading);
+        e.stopPropagation();
+    }
+}
+function subscribe() {
+    if (subscribersCount === 0) {
+        window.addEventListener('click', onClick, true);
+    }
+    subscribersCount++;
+}
+function unsubscribe() {
+    if (--subscribersCount === 0) {
+        window.removeEventListener('click', onClick, true);
+    }
+}
+const Heading = memo(function Heading({ id, text }) {
+    useEffect(() => {
+        subscribe();
+        return unsubscribe;
+    });
+    return (jsxs("h2", { className: S.root, id: id, children: [jsx("a", { href: `${location.pathname}#${id}`, className: S.link, children: "#" }), text] }));
+});
+
+export { Heading };