@skbkontur/react-ui 2.17.3 → 2.17.4-source-maps.1

package/components/Button/Button.d.ts

@@ -1,99 +1,99 @@
-import React from 'react';
-import { CommonProps } from '../../internal/CommonWrapper';
-export declare type ButtonSize = 'small' | 'medium' | 'large';
-export declare type ButtonType = 'button' | 'submit' | 'reset';
-export declare type ButtonUse = 'default' | 'primary' | 'success' | 'danger' | 'pay' | 'link';
-export interface ButtonProps extends CommonProps {
-    /** @ignore */
-    _noPadding?: boolean;
-    /** @ignore */
-    _noRightPadding?: boolean;
-    /**
-     * Визуально нажатое состояние.
-     */
-    active?: boolean;
-    /** `type TextAlignProperty = "inherit" | "initial" | "unset" | "center" | "end" | "justify" | "left" | "match-parent" | "right" | "start"` */
-    align?: React.CSSProperties['textAlign'];
-    /**
-     * Кнопка со стрелкой.
-     *
-     * `type ButtonArrow = boolean | "left"`
-     */
-    arrow?: boolean | 'left';
-    autoFocus?: boolean;
-    borderless?: boolean;
-    checked?: boolean;
-    children?: React.ReactNode;
-    /** @ignore */
-    corners?: number;
-    disabled?: boolean;
-    /** @ignore */
-    disableFocus?: boolean;
-    error?: boolean;
-    focused?: boolean;
-    /**
-     * Иконка слева от текста кнопки.
-     */
-    icon?: React.ReactElement<any>;
-    loading?: boolean;
-    narrow?: boolean;
-    onBlur?: React.FocusEventHandler<HTMLButtonElement>;
-    onClick?: React.MouseEventHandler<HTMLButtonElement>;
-    onFocus?: React.FocusEventHandler<HTMLButtonElement>;
-    onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;
-    onMouseEnter?: React.MouseEventHandler<HTMLButtonElement>;
-    onMouseLeave?: React.MouseEventHandler<HTMLButtonElement>;
-    onMouseOver?: React.MouseEventHandler<HTMLButtonElement>;
-    /** `type ButtonSize = "small" | "medium" | "large"` */
-    size?: ButtonSize;
-    /** `type ButtonType = "button" | "submit" | "reset"` */
-    type?: ButtonType;
-    /**
-     * Вариант использования. Влияет на цвет кнопки.
-     *
-     * `type ButtonUse = "default" | "primary" | "success" | "danger" | "pay" | "link"`
-     */
-    use?: ButtonUse;
-    /** @ignore */
-    visuallyFocused?: boolean;
-    warning?: boolean;
-    width?: number | string;
-}
-export interface ButtonState {
-    focusedByTab: boolean;
-}
-export declare class Button extends React.Component<ButtonProps, ButtonState> {
-    static __KONTUR_REACT_UI__: string;
-    static __BUTTON__: boolean;
-    static TOP_LEFT: number;
-    static TOP_RIGHT: number;
-    static BOTTOM_RIGHT: number;
-    static BOTTOM_LEFT: number;
-    static defaultProps: {
-        use: string;
-        size: string;
-        type: string;
-    };
-    state: {
-        focusedByTab: boolean;
-    };
-    private theme;
-    private node;
-    componentDidMount(): void;
-    /**
-     * @public
-     */
-    focus(): void;
-    /**
-     * @public
-     */
-    blur(): void;
-    render(): JSX.Element;
-    private renderMain;
-    private getSizeClassName;
-    private getSizeIconClassName;
-    private handleFocus;
-    private handleBlur;
-    private _ref;
-}
-export declare const isButton: (child: React.ReactChild) => child is React.ReactElement<ButtonProps, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
+import React from 'react';
+import { CommonProps } from '../../internal/CommonWrapper';
+export declare type ButtonSize = 'small' | 'medium' | 'large';
+export declare type ButtonType = 'button' | 'submit' | 'reset';
+export declare type ButtonUse = 'default' | 'primary' | 'success' | 'danger' | 'pay' | 'link';
+export interface ButtonProps extends CommonProps {
+    /** @ignore */
+    _noPadding?: boolean;
+    /** @ignore */
+    _noRightPadding?: boolean;
+    /**
+     * Визуально нажатое состояние.
+     */
+    active?: boolean;
+    /** `type TextAlignProperty = "inherit" | "initial" | "unset" | "center" | "end" | "justify" | "left" | "match-parent" | "right" | "start"` */
+    align?: React.CSSProperties['textAlign'];
+    /**
+     * Кнопка со стрелкой.
+     *
+     * `type ButtonArrow = boolean | "left"`
+     */
+    arrow?: boolean | 'left';
+    autoFocus?: boolean;
+    borderless?: boolean;
+    checked?: boolean;
+    children?: React.ReactNode;
+    /** @ignore */
+    corners?: number;
+    disabled?: boolean;
+    /** @ignore */
+    disableFocus?: boolean;
+    error?: boolean;
+    focused?: boolean;
+    /**
+     * Иконка слева от текста кнопки.
+     */
+    icon?: React.ReactElement<any>;
+    loading?: boolean;
+    narrow?: boolean;
+    onBlur?: React.FocusEventHandler<HTMLButtonElement>;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    onFocus?: React.FocusEventHandler<HTMLButtonElement>;
+    onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;
+    onMouseEnter?: React.MouseEventHandler<HTMLButtonElement>;
+    onMouseLeave?: React.MouseEventHandler<HTMLButtonElement>;
+    onMouseOver?: React.MouseEventHandler<HTMLButtonElement>;
+    /** `type ButtonSize = "small" | "medium" | "large"` */
+    size?: ButtonSize;
+    /** `type ButtonType = "button" | "submit" | "reset"` */
+    type?: ButtonType;
+    /**
+     * Вариант использования. Влияет на цвет кнопки.
+     *
+     * `type ButtonUse = "default" | "primary" | "success" | "danger" | "pay" | "link"`
+     */
+    use?: ButtonUse;
+    /** @ignore */
+    visuallyFocused?: boolean;
+    warning?: boolean;
+    width?: number | string;
+}
+export interface ButtonState {
+    focusedByTab: boolean;
+}
+export declare class Button extends React.Component<ButtonProps, ButtonState> {
+    static __KONTUR_REACT_UI__: string;
+    static __BUTTON__: boolean;
+    static TOP_LEFT: number;
+    static TOP_RIGHT: number;
+    static BOTTOM_RIGHT: number;
+    static BOTTOM_LEFT: number;
+    static defaultProps: {
+        use: string;
+        size: string;
+        type: string;
+    };
+    state: {
+        focusedByTab: boolean;
+    };
+    private theme;
+    private node;
+    componentDidMount(): void;
+    /**
+     * @public
+     */
+    focus(): void;
+    /**
+     * @public
+     */
+    blur(): void;
+    render(): JSX.Element;
+    private renderMain;
+    private getSizeClassName;
+    private getSizeIconClassName;
+    private handleFocus;
+    private handleBlur;
+    private _ref;
+}
+export declare const isButton: (child: React.ReactChild) => child is React.ReactElement<ButtonProps, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;

package/components/Button/Button.md

@@ -1,89 +1,89 @@
-Button example
-
-```jsx harmony
-import OkIcon from '@skbkontur/react-icons/Ok';
-import { Button } from '@skbkontur/react-ui';
-
-<Button icon={<OkIcon />}>Ok</Button>;
-```
-
-Button has different use styles
-
-```jsx harmony
-import { Gapped } from '@skbkontur/react-ui';
-
-<Gapped>
-  <Button use="default">Default</Button>
-  <Button use="primary">Primary</Button>
-  <Button use="success">Success</Button>
-  <Button use="danger">Danger</Button>
-  <Button use="pay">Pay</Button>
-  <Button use="link">Link</Button>
-</Gapped>;
-```
-
-Button can have different sizes
-
-```jsx harmony
-import { Gapped } from '@skbkontur/react-ui';
-
-<Gapped>
-  <Button size="small">Small</Button>
-  <Button size="medium">Medium</Button>
-  <Button size="large">Large</Button>
-</Gapped>;
-```
-
-Кнопки-стрелки
-
-```jsx harmony
-import { Gapped, Button } from '@skbkontur/react-ui';
-
-<Gapped gap={25}>
-  <Gapped gap={5}>
-    <Button arrow="left" size="medium">
-      Назад
-    </Button>
-    <Button arrow size="medium">
-      Далее
-    </Button>
-  </Gapped>
-  <Gapped gap={5}>
-    <Button arrow="left" size="large">
-      Назад
-    </Button>
-    <Button arrow size="large">
-      Далее
-    </Button>
-  </Gapped>
-</Gapped>;
-```
-
-Кнопка в сочетании со спиннером
-
-```jsx harmony
-import OkIcon from '@skbkontur/react-icons/Ok';
-import { Button, Spinner } from '@skbkontur/react-ui';
-
-const initialState = {
-  loading: false,
-  success: false,
-};
-
-const delay = (time = 0) => data => new Promise(resolve => setTimeout(resolve, time, data));
-
-const handleLoadingStart = () => {
-  delay(2000)()
-    .then(() => new Promise(resolve => setState({ loading: false, success: true }, resolve)))
-    .then(delay(1000))
-    .then(() => setState({ success: false }));
-};
-
-const handleClick = () => {
-  setState({ loading: true, success: false }, handleLoadingStart);
-};
-
-<Button width={150} onClick={handleClick} disabled={state.loading}>
-  {state.loading ? <Spinner type="mini" caption={null} /> : state.success ? <OkIcon /> : 'Сохранить'}
-</Button>;
-```
+Button example
+
+```jsx harmony
+import OkIcon from '@skbkontur/react-icons/Ok';
+import { Button } from '@skbkontur/react-ui';
+
+<Button icon={<OkIcon />}>Ok</Button>;
+```
+
+Button has different use styles
+
+```jsx harmony
+import { Gapped } from '@skbkontur/react-ui';
+
+<Gapped>
+  <Button use="default">Default</Button>
+  <Button use="primary">Primary</Button>
+  <Button use="success">Success</Button>
+  <Button use="danger">Danger</Button>
+  <Button use="pay">Pay</Button>
+  <Button use="link">Link</Button>
+</Gapped>;
+```
+
+Button can have different sizes
+
+```jsx harmony
+import { Gapped } from '@skbkontur/react-ui';
+
+<Gapped>
+  <Button size="small">Small</Button>
+  <Button size="medium">Medium</Button>
+  <Button size="large">Large</Button>
+</Gapped>;
+```
+
+Кнопки-стрелки
+
+```jsx harmony
+import { Gapped, Button } from '@skbkontur/react-ui';
+
+<Gapped gap={25}>
+  <Gapped gap={5}>
+    <Button arrow="left" size="medium">
+      Назад
+    </Button>
+    <Button arrow size="medium">
+      Далее
+    </Button>
+  </Gapped>
+  <Gapped gap={5}>
+    <Button arrow="left" size="large">
+      Назад
+    </Button>
+    <Button arrow size="large">
+      Далее
+    </Button>
+  </Gapped>
+</Gapped>;
+```
+
+Кнопка в сочетании со спиннером
+
+```jsx harmony
+import OkIcon from '@skbkontur/react-icons/Ok';
+import { Button, Spinner } from '@skbkontur/react-ui';
+
+const initialState = {
+  loading: false,
+  success: false,
+};
+
+const delay = (time = 0) => data => new Promise(resolve => setTimeout(resolve, time, data));
+
+const handleLoadingStart = () => {
+  delay(2000)()
+    .then(() => new Promise(resolve => setState({ loading: false, success: true }, resolve)))
+    .then(delay(1000))
+    .then(() => setState({ success: false }));
+};
+
+const handleClick = () => {
+  setState({ loading: true, success: false }, handleLoadingStart);
+};
+
+<Button width={150} onClick={handleClick} disabled={state.loading}>
+  {state.loading ? <Spinner type="mini" caption={null} /> : state.success ? <OkIcon /> : 'Сохранить'}
+</Button>;
+```

package/components/Button/Button.mixins/Button.mixins.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Button.mixins.ts"],"names":["css","shift","getBtnPadding","fontSize","paddingY","paddingX","fontFamilyCompensation","additionalOffset","paddingTop","paddingBottom","offset","parseInt","shiftUp","top","bottom","buttonUseMixin","btnBackground","btnBackgroundStart","btnBackgroundEnd","arrowBackgroundStart","arrowBackgroundEnd","shadow","shadowArrow","shadowArrowLeft","color","border","selectorChecked","selectorArrow","selectorArrowLeft","buttonHoverMixin","btnShadow","arrowShadow","arrowLeftShadow","btnBorder","buttonActiveMixin","arrowBackground","arrowLeftBackground","selectorActive","buttonSizeMixin","height","heightShift","lineHeight","selectorLink","selectorFallback","buttonArrowMixin","left","right","size","transform","buttonLoadingArrowMixin","leftArrowTop","background","delay","btn_loading_arrow"],"mappings":"itFAAA,SAASA,GAAT,QAAoB,2BAApB;AACA,SAASC,KAAT,QAAsB,qCAAtB;;AAEA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB;AACpBC,QADoB;AAEpBC,QAFoB;AAGpBC,QAHoB;AAIpBC,sBAJoB;AAKpBC,gBALoB;AAMT,KADXA,gBACW,cADXA,gBACW,GADQ,CACR;AACX,MAAIC,UAAU,GAAGJ,QAAjB;AACA,MAAIK,aAAa,GAAGL,QAApB;AACA,MAAMM,MAAM,GAAGC,QAAQ,CAACL,sBAAD,CAAR,IAAoC,CAAnD;;AAEA,MAAMM,OAAO,GAAG,SAAVA,OAAU,CAACC,GAAD,EAAcC,MAAd,EAA8BJ,MAA9B,EAAiD;AAC/D,WAAO,CAACT,KAAK,CAACY,GAAD,OAAS,CAACH,MAAV,CAAN,EAA2BT,KAAK,CAACa,MAAD,OAAYJ,MAAZ,CAAhC,CAAP;AACD,GAFD;;AAIA,MAAIP,QAAQ,KAAK,MAAb,IAAuBO,MAA3B,EAAmC;AACHE,IAAAA,OAAO,CAACJ,UAAD,EAAaC,aAAb,EAA4BC,MAA5B,CADJ,CAChCF,UADgC,eACpBC,aADoB;AAElC;AACD,MAAIF,gBAAJ,EAAsB;AACUK,IAAAA,OAAO,CAACJ,UAAD,EAAaC,aAAb,EAA4BF,gBAA5B,CADjB,CACnBC,UADmB,gBACPC,aADO;AAErB;;AAED,SAAUD,UAAV,SAAwBH,QAAxB,SAAoCI,aAApC;AACD,CAvBD;;AAyBA,OAAO,IAAMM,cAAc,GAAG,SAAjBA,cAAiB;AAC5BC,aAD4B;AAE5BC,kBAF4B;AAG5BC,gBAH4B;AAI5BC,oBAJ4B;AAK5BC,kBAL4B;AAM5BC,MAN4B;AAO5BC,WAP4B;AAQ5BC,eAR4B;AAS5BC,KAT4B;AAU5BC,MAV4B;AAW5BC,eAX4B;AAY5BC,aAZ4B;AAa5BC,iBAb4B;AAczB;AACH,SAAO5B,GAAP;AACgBiB,EAAAA,kBAAkB,KAAKC,gBAAvB,IAA2CF,aAA3C;AACVA,EAAAA,aADU;AAESC,EAAAA,kBAFT,UAEgCC,gBAFhC,MADhB;AAIWM,EAAAA,KAJX;AAKgBH,EAAAA,MALhB;AAMYI,EAAAA,MANZ;;AAQUC,EAAAA,eARV,EAQ8BC,aAR9B;AASkBR,EAAAA,oBAAoB,KAAKC,kBAAzB;AACVD,EAAAA,oBADU;AAE0BA,EAAAA,oBAF1B,UAEmDC,kBAFnD,MATlB;AAYkBE,EAAAA,WAZlB;;;AAeUI,EAAAA,eAfV,EAe8BE,iBAf9B;AAgBkBT,EAAAA,oBAAoB,KAAKC,kBAAzB;AACVD,EAAAA,oBADU;AAEsBA,EAAAA,oBAFtB,UAE+CC,kBAF/C,MAhBlB;AAmBkBG,EAAAA,eAnBlB;;;AAsBD,CArCM;;AAuCP,OAAO,IAAMM,gBAAgB,GAAG,SAAnBA,gBAAmB;AAC9Bb,aAD8B;AAE9BC,kBAF8B;AAG9BC,gBAH8B;AAI9BC,oBAJ8B;AAK9BC,kBAL8B;AAM9BU,SAN8B;AAO9BC,WAP8B;AAQ9BC,eAR8B;AAS9BC,SAT8B;AAU9BN,aAV8B;AAW9BC,iBAX8B;AAY3B;AACH,SAAO5B,GAAP;;AAEkBiB,EAAAA,kBAAkB,KAAKC,gBAAvB,IAA2CF,aAA3C;AACVA,EAAAA,aADU;AAESC,EAAAA,kBAFT,UAEgCC,gBAFhC,MAFlB;AAKkBY,EAAAA,SALlB;AAMoBG,EAAAA,SANpB;;AAQMN,EAAAA,aARN;AASoBR,EAAAA,oBAAoB,KAAKC,kBAAzB;AACVD,EAAAA,oBADU;AAE0BA,EAAAA,oBAF1B,UAEmDC,kBAFnD,MATpB;AAYoBW,EAAAA,WAZpB;;;AAeMH,EAAAA,iBAfN;AAgBoBT,EAAAA,oBAAoB,KAAKC,kBAAzB;AACVD,EAAAA,oBADU;AAEsBA,EAAAA,oBAFtB,UAE+CC,kBAF/C,MAhBpB;AAmBoBY,EAAAA,eAnBpB;;;;AAuBD,CApCM;;AAsCP,OAAO,IAAME,iBAAiB,GAAG,SAApBA,iBAAoB;AAC/BlB,aAD+B;AAE/BmB,eAF+B;AAG/BC,mBAH+B;AAI/BN,SAJ+B;AAK/BC,WAL+B;AAM/BC,eAN+B;AAO/BK,cAP+B;AAQ/BV,aAR+B;AAS/BC,iBAT+B;AAU5B;AACH,SAAO5B,GAAP;;AAEKqC,EAAAA,cAFL;AAGkBrB,EAAAA,aAHlB;AAIkBc,EAAAA,SAJlB;;AAMMH,EAAAA,aANN;AAOoBQ,EAAAA,eAPpB;AAQoBJ,EAAAA,WARpB;;;AAWMH,EAAAA,iBAXN;AAYoBQ,EAAAA,mBAZpB;AAaoBJ,EAAAA,eAbpB;;;;AAiBD,CA5BM;;AA8BP,OAAO,IAAMM,eAAe,GAAG,SAAlBA,eAAkB;AAC7BnC,QAD6B;AAE7BoC,MAF6B;AAG7BC,WAH6B;AAI7BC,UAJ6B;AAK7BpC,QAL6B;AAM7BD,QAN6B;AAO7BE,sBAP6B;AAQ7BoC,YAR6B;AAS7BC,gBAT6B;AAU1B;AACH,SAAO3C,GAAP;AACeG,EAAAA,QADf;;AAGUuC,EAAAA,YAHV;;AAKczC,EAAAA,KAAK,CAACsC,MAAD,EAASC,WAAT,CALnB;AAMetC,EAAAA,aAAa,CAACC,QAAD,EAAWC,QAAX,EAAqBC,QAArB,EAA+BC,sBAA/B,CAN5B;AAOmBmC,EAAAA,UAPnB;;AASOE,EAAAA,gBATP;AAUiBzC,EAAAA,aAAa,CAACC,QAAD,EAAWC,QAAX,EAAqBC,QAArB,EAA+BC,sBAA/B,EAAuD,CAAvD,CAV9B;;;;AAcD,CAzBM;;AA2BP,OAAO,IAAMsC,gBAAgB,GAAG,SAAnBA,gBAAmB;AAC9B/B,GAD8B;AAE9BgC,IAF8B;AAG9BC,KAH8B;AAI9BC,IAJ8B;AAK9BC,SAL8B;AAM9BrB,aAN8B;AAO9BC,iBAP8B;AAQ3B;AACH,SAAO5B,GAAP;AACI2B,EAAAA,aADJ;AAEWd,EAAAA,GAFX;AAGaiC,EAAAA,KAHb;AAIcC,EAAAA,IAJd;AAKaA,EAAAA,IALb;AAMiBC,EAAAA,SANjB;;;;AAUIpB,EAAAA,iBAVJ;AAWYiB,EAAAA,IAXZ;;;;AAeD,CAxBM;;AA0BP,OAAO,IAAMI,uBAAuB,GAAG,SAA1BA,uBAA0B;AACrCpC,GADqC;AAErCqC,YAFqC;AAGrCL,IAHqC;AAIrCN,MAJqC;AAKrCY,UALqC;AAMrCC,KANqC;AAOrCC,iBAPqC;AAQrC1B,aARqC;AASrCC,iBATqC;AAUlC;AACH,SAAO5B,GAAP;AACI2B,EAAAA,aADJ;;;;AAKWd,EAAAA,GALX;;;AAQc0B,EAAAA,MARd;AASkBY,EAAAA,UATlB;;;;AAaiBE,EAAAA,iBAbjB;;;AAgBIzB,EAAAA,iBAhBJ;AAiBWsB,EAAAA,YAjBX;AAkBYL,EAAAA,IAlBZ;;;AAqBuBO,EAAAA,KArBvB;;;AAwBD,CAnCM","sourcesContent":["import { css } from '../../lib/theming/Emotion';\r\nimport { shift } from '../../lib/styles/DimensionFunctions';\r\n\r\nconst getBtnPadding = (\r\n  fontSize: string,\r\n  paddingY: string,\r\n  paddingX: string,\r\n  fontFamilyCompensation: string,\r\n  additionalOffset = 0,\r\n): string => {\r\n  let paddingTop = paddingY;\r\n  let paddingBottom = paddingY;\r\n  const offset = parseInt(fontFamilyCompensation) || 0;\r\n\r\n  const shiftUp = (top: string, bottom: string, offset: number) => {\r\n    return [shift(top, `${-offset}`), shift(bottom, `${offset}`)];\r\n  };\r\n\r\n  if (fontSize === '16px' && offset) {\r\n    [paddingTop, paddingBottom] = shiftUp(paddingTop, paddingBottom, offset);\r\n  }\r\n  if (additionalOffset) {\r\n    [paddingTop, paddingBottom] = shiftUp(paddingTop, paddingBottom, additionalOffset);\r\n  }\r\n\r\n  return `${paddingTop} ${paddingX} ${paddingBottom}`;\r\n};\r\n\r\nexport const buttonUseMixin = (\r\n  btnBackground: string,\r\n  btnBackgroundStart: string,\r\n  btnBackgroundEnd: string,\r\n  arrowBackgroundStart: string,\r\n  arrowBackgroundEnd: string,\r\n  shadow: string,\r\n  shadowArrow: string,\r\n  shadowArrowLeft: string,\r\n  color: string,\r\n  border: string,\r\n  selectorChecked: string,\r\n  selectorArrow: string,\r\n  selectorArrowLeft: string,\r\n) => {\r\n  return css`\r\n    background: ${btnBackgroundStart === btnBackgroundEnd && btnBackground\r\n      ? btnBackground\r\n      : `linear-gradient(${btnBackgroundStart}, ${btnBackgroundEnd})`};\r\n    color: ${color};\r\n    box-shadow: ${shadow};\r\n    border: ${border};\r\n\r\n    &:not(${selectorChecked}) ${selectorArrow} {\r\n      background: ${arrowBackgroundStart === arrowBackgroundEnd\r\n        ? arrowBackgroundStart\r\n        : `linear-gradient(to bottom right, ${arrowBackgroundStart}, ${arrowBackgroundEnd})`};\r\n      box-shadow: ${shadowArrow};\r\n    }\r\n\r\n    &:not(${selectorChecked}) ${selectorArrowLeft} {\r\n      background: ${arrowBackgroundStart === arrowBackgroundEnd\r\n        ? arrowBackgroundStart\r\n        : `linear-gradient(to top left, ${arrowBackgroundStart}, ${arrowBackgroundEnd})`};\r\n      box-shadow: ${shadowArrowLeft};\r\n    }\r\n  `;\r\n};\r\n\r\nexport const buttonHoverMixin = (\r\n  btnBackground: string,\r\n  btnBackgroundStart: string,\r\n  btnBackgroundEnd: string,\r\n  arrowBackgroundStart: string,\r\n  arrowBackgroundEnd: string,\r\n  btnShadow: string,\r\n  arrowShadow: string,\r\n  arrowLeftShadow: string,\r\n  btnBorder: string,\r\n  selectorArrow: string,\r\n  selectorArrowLeft: string,\r\n) => {\r\n  return css`\r\n    &:hover {\r\n      background: ${btnBackgroundStart === btnBackgroundEnd && btnBackground\r\n        ? btnBackground\r\n        : `linear-gradient(${btnBackgroundStart}, ${btnBackgroundEnd})`};\r\n      box-shadow: ${btnShadow};\r\n      border-color: ${btnBorder};\r\n\r\n      ${selectorArrow} {\r\n        background: ${arrowBackgroundStart === arrowBackgroundEnd\r\n          ? arrowBackgroundStart\r\n          : `linear-gradient(to bottom right, ${arrowBackgroundStart}, ${arrowBackgroundEnd})`};\r\n        box-shadow: ${arrowShadow};\r\n      }\r\n\r\n      ${selectorArrowLeft} {\r\n        background: ${arrowBackgroundStart === arrowBackgroundEnd\r\n          ? arrowBackgroundStart\r\n          : `linear-gradient(to top left, ${arrowBackgroundStart}, ${arrowBackgroundEnd})`};\r\n        box-shadow: ${arrowLeftShadow};\r\n      }\r\n    }\r\n  `;\r\n};\r\n\r\nexport const buttonActiveMixin = (\r\n  btnBackground: string,\r\n  arrowBackground: string,\r\n  arrowLeftBackground: string,\r\n  btnShadow: string,\r\n  arrowShadow: string,\r\n  arrowLeftShadow: string,\r\n  selectorActive: string,\r\n  selectorArrow: string,\r\n  selectorArrowLeft: string,\r\n) => {\r\n  return css`\r\n    &:active,\r\n    &${selectorActive} {\r\n      background: ${btnBackground};\r\n      box-shadow: ${btnShadow};\r\n\r\n      ${selectorArrow} {\r\n        background: ${arrowBackground};\r\n        box-shadow: ${arrowShadow};\r\n      }\r\n\r\n      ${selectorArrowLeft} {\r\n        background: ${arrowLeftBackground};\r\n        box-shadow: ${arrowLeftShadow};\r\n      }\r\n    }\r\n  `;\r\n};\r\n\r\nexport const buttonSizeMixin = (\r\n  fontSize: string,\r\n  height: string, // todo: remove, in IE broke screenshots without height\r\n  heightShift: string, // todo: remove, in IE broke screenshots without height\r\n  lineHeight: string,\r\n  paddingX: string,\r\n  paddingY: string,\r\n  fontFamilyCompensation: string,\r\n  selectorLink: string,\r\n  selectorFallback: string,\r\n) => {\r\n  return css`\r\n    font-size: ${fontSize} !important;\r\n\r\n    &:not(${selectorLink}) {\r\n      box-sizing: border-box;\r\n      height: ${shift(height, heightShift)};\r\n      padding: ${getBtnPadding(fontSize, paddingY, paddingX, fontFamilyCompensation)};\r\n      line-height: ${lineHeight};\r\n\r\n      &${selectorFallback} {\r\n        padding: ${getBtnPadding(fontSize, paddingY, paddingX, fontFamilyCompensation, 1)};\r\n      }\r\n    }\r\n  `;\r\n};\r\n\r\nexport const buttonArrowMixin = (\r\n  top: string,\r\n  left: string,\r\n  right: string,\r\n  size: string,\r\n  transform: string,\r\n  selectorArrow: string,\r\n  selectorArrowLeft: string,\r\n) => {\r\n  return css`\r\n    ${selectorArrow} {\r\n      top: ${top};\r\n      right: ${right};\r\n      height: ${size};\r\n      width: ${size};\r\n      transform: ${transform};\r\n      overflow: hidden;\r\n    }\r\n\r\n    ${selectorArrowLeft} {\r\n      left: ${left};\r\n      transform: rotate(232deg) skewX(25deg) skewY(8deg) !important;\r\n    }\r\n  `;\r\n};\r\n\r\nexport const buttonLoadingArrowMixin = (\r\n  top: string,\r\n  leftArrowTop: string,\r\n  left: string,\r\n  height: string,\r\n  background: string,\r\n  delay: string,\r\n  btn_loading_arrow: string,\r\n  selectorArrow: string,\r\n  selectorArrowLeft: string,\r\n) => {\r\n  return css`\r\n    ${selectorArrow}::before {\r\n      content: '';\r\n      display: block;\r\n      position: absolute;\r\n      top: ${top};\r\n      left: -207px;\r\n      right: -72px;\r\n      height: ${height};\r\n      background: ${background};\r\n      background-size: 41px 100%;\r\n      opacity: 0.2;\r\n      transform: translateX(50px) rotate(-44.3deg);\r\n      animation: ${btn_loading_arrow} 1s linear infinite;\r\n    }\r\n\r\n    ${selectorArrowLeft}::before {\r\n      top: ${leftArrowTop};\r\n      left: ${left};\r\n      animation-direction: reverse;\r\n      transform: translateX(42px) rotate(-44.3deg);\r\n      animation-delay: ${delay};\r\n    }\r\n  `;\r\n};\r\n"]}
+{"version":3,"sources":["Button.mixins.ts"],"names":["css","shift","getBtnPadding","fontSize","paddingY","paddingX","fontFamilyCompensation","additionalOffset","paddingTop","paddingBottom","offset","parseInt","shiftUp","top","bottom","buttonUseMixin","btnBackground","btnBackgroundStart","btnBackgroundEnd","arrowBackgroundStart","arrowBackgroundEnd","shadow","shadowArrow","shadowArrowLeft","color","border","selectorChecked","selectorArrow","selectorArrowLeft","buttonHoverMixin","btnShadow","arrowShadow","arrowLeftShadow","btnBorder","buttonActiveMixin","arrowBackground","arrowLeftBackground","selectorActive","buttonSizeMixin","height","heightShift","lineHeight","selectorLink","selectorFallback","buttonArrowMixin","left","right","size","transform","buttonLoadingArrowMixin","leftArrowTop","background","delay","btn_loading_arrow"],"mappings":"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","sourcesContent":["import { css } from '../../lib/theming/Emotion';\nimport { shift } from '../../lib/styles/DimensionFunctions';\n\nconst getBtnPadding = (\n  fontSize: string,\n  paddingY: string,\n  paddingX: string,\n  fontFamilyCompensation: string,\n  additionalOffset = 0,\n): string => {\n  let paddingTop = paddingY;\n  let paddingBottom = paddingY;\n  const offset = parseInt(fontFamilyCompensation) || 0;\n\n  const shiftUp = (top: string, bottom: string, offset: number) => {\n    return [shift(top, `${-offset}`), shift(bottom, `${offset}`)];\n  };\n\n  if (fontSize === '16px' && offset) {\n    [paddingTop, paddingBottom] = shiftUp(paddingTop, paddingBottom, offset);\n  }\n  if (additionalOffset) {\n    [paddingTop, paddingBottom] = shiftUp(paddingTop, paddingBottom, additionalOffset);\n  }\n\n  return `${paddingTop} ${paddingX} ${paddingBottom}`;\n};\n\nexport const buttonUseMixin = (\n  btnBackground: string,\n  btnBackgroundStart: string,\n  btnBackgroundEnd: string,\n  arrowBackgroundStart: string,\n  arrowBackgroundEnd: string,\n  shadow: string,\n  shadowArrow: string,\n  shadowArrowLeft: string,\n  color: string,\n  border: string,\n  selectorChecked: string,\n  selectorArrow: string,\n  selectorArrowLeft: string,\n) => {\n  return css`\n    background: ${btnBackgroundStart === btnBackgroundEnd && btnBackground\n      ? btnBackground\n      : `linear-gradient(${btnBackgroundStart}, ${btnBackgroundEnd})`};\n    color: ${color};\n    box-shadow: ${shadow};\n    border: ${border};\n\n    &:not(${selectorChecked}) ${selectorArrow} {\n      background: ${arrowBackgroundStart === arrowBackgroundEnd\n        ? arrowBackgroundStart\n        : `linear-gradient(to bottom right, ${arrowBackgroundStart}, ${arrowBackgroundEnd})`};\n      box-shadow: ${shadowArrow};\n    }\n\n    &:not(${selectorChecked}) ${selectorArrowLeft} {\n      background: ${arrowBackgroundStart === arrowBackgroundEnd\n        ? arrowBackgroundStart\n        : `linear-gradient(to top left, ${arrowBackgroundStart}, ${arrowBackgroundEnd})`};\n      box-shadow: ${shadowArrowLeft};\n    }\n  `;\n};\n\nexport const buttonHoverMixin = (\n  btnBackground: string,\n  btnBackgroundStart: string,\n  btnBackgroundEnd: string,\n  arrowBackgroundStart: string,\n  arrowBackgroundEnd: string,\n  btnShadow: string,\n  arrowShadow: string,\n  arrowLeftShadow: string,\n  btnBorder: string,\n  selectorArrow: string,\n  selectorArrowLeft: string,\n) => {\n  return css`\n    &:hover {\n      background: ${btnBackgroundStart === btnBackgroundEnd && btnBackground\n        ? btnBackground\n        : `linear-gradient(${btnBackgroundStart}, ${btnBackgroundEnd})`};\n      box-shadow: ${btnShadow};\n      border-color: ${btnBorder};\n\n      ${selectorArrow} {\n        background: ${arrowBackgroundStart === arrowBackgroundEnd\n          ? arrowBackgroundStart\n          : `linear-gradient(to bottom right, ${arrowBackgroundStart}, ${arrowBackgroundEnd})`};\n        box-shadow: ${arrowShadow};\n      }\n\n      ${selectorArrowLeft} {\n        background: ${arrowBackgroundStart === arrowBackgroundEnd\n          ? arrowBackgroundStart\n          : `linear-gradient(to top left, ${arrowBackgroundStart}, ${arrowBackgroundEnd})`};\n        box-shadow: ${arrowLeftShadow};\n      }\n    }\n  `;\n};\n\nexport const buttonActiveMixin = (\n  btnBackground: string,\n  arrowBackground: string,\n  arrowLeftBackground: string,\n  btnShadow: string,\n  arrowShadow: string,\n  arrowLeftShadow: string,\n  selectorActive: string,\n  selectorArrow: string,\n  selectorArrowLeft: string,\n) => {\n  return css`\n    &:active,\n    &${selectorActive} {\n      background: ${btnBackground};\n      box-shadow: ${btnShadow};\n\n      ${selectorArrow} {\n        background: ${arrowBackground};\n        box-shadow: ${arrowShadow};\n      }\n\n      ${selectorArrowLeft} {\n        background: ${arrowLeftBackground};\n        box-shadow: ${arrowLeftShadow};\n      }\n    }\n  `;\n};\n\nexport const buttonSizeMixin = (\n  fontSize: string,\n  height: string, // todo: remove, in IE broke screenshots without height\n  heightShift: string, // todo: remove, in IE broke screenshots without height\n  lineHeight: string,\n  paddingX: string,\n  paddingY: string,\n  fontFamilyCompensation: string,\n  selectorLink: string,\n  selectorFallback: string,\n) => {\n  return css`\n    font-size: ${fontSize} !important;\n\n    &:not(${selectorLink}) {\n      box-sizing: border-box;\n      height: ${shift(height, heightShift)};\n      padding: ${getBtnPadding(fontSize, paddingY, paddingX, fontFamilyCompensation)};\n      line-height: ${lineHeight};\n\n      &${selectorFallback} {\n        padding: ${getBtnPadding(fontSize, paddingY, paddingX, fontFamilyCompensation, 1)};\n      }\n    }\n  `;\n};\n\nexport const buttonArrowMixin = (\n  top: string,\n  left: string,\n  right: string,\n  size: string,\n  transform: string,\n  selectorArrow: string,\n  selectorArrowLeft: string,\n) => {\n  return css`\n    ${selectorArrow} {\n      top: ${top};\n      right: ${right};\n      height: ${size};\n      width: ${size};\n      transform: ${transform};\n      overflow: hidden;\n    }\n\n    ${selectorArrowLeft} {\n      left: ${left};\n      transform: rotate(232deg) skewX(25deg) skewY(8deg) !important;\n    }\n  `;\n};\n\nexport const buttonLoadingArrowMixin = (\n  top: string,\n  leftArrowTop: string,\n  left: string,\n  height: string,\n  background: string,\n  delay: string,\n  btn_loading_arrow: string,\n  selectorArrow: string,\n  selectorArrowLeft: string,\n) => {\n  return css`\n    ${selectorArrow}::before {\n      content: '';\n      display: block;\n      position: absolute;\n      top: ${top};\n      left: -207px;\n      right: -72px;\n      height: ${height};\n      background: ${background};\n      background-size: 41px 100%;\n      opacity: 0.2;\n      transform: translateX(50px) rotate(-44.3deg);\n      animation: ${btn_loading_arrow} 1s linear infinite;\n    }\n\n    ${selectorArrowLeft}::before {\n      top: ${leftArrowTop};\n      left: ${left};\n      animation-direction: reverse;\n      transform: translateX(42px) rotate(-44.3deg);\n      animation-delay: ${delay};\n    }\n  `;\n};\n"]}

package/components/Button/Button.mixins.d.ts

@@ -1,6 +1,6 @@
-export declare const buttonUseMixin: (btnBackground: string, btnBackgroundStart: string, btnBackgroundEnd: string, arrowBackgroundStart: string, arrowBackgroundEnd: string, shadow: string, shadowArrow: string, shadowArrowLeft: string, color: string, border: string, selectorChecked: string, selectorArrow: string, selectorArrowLeft: string) => string;
-export declare const buttonHoverMixin: (btnBackground: string, btnBackgroundStart: string, btnBackgroundEnd: string, arrowBackgroundStart: string, arrowBackgroundEnd: string, btnShadow: string, arrowShadow: string, arrowLeftShadow: string, btnBorder: string, selectorArrow: string, selectorArrowLeft: string) => string;
-export declare const buttonActiveMixin: (btnBackground: string, arrowBackground: string, arrowLeftBackground: string, btnShadow: string, arrowShadow: string, arrowLeftShadow: string, selectorActive: string, selectorArrow: string, selectorArrowLeft: string) => string;
-export declare const buttonSizeMixin: (fontSize: string, height: string, heightShift: string, lineHeight: string, paddingX: string, paddingY: string, fontFamilyCompensation: string, selectorLink: string, selectorFallback: string) => string;
-export declare const buttonArrowMixin: (top: string, left: string, right: string, size: string, transform: string, selectorArrow: string, selectorArrowLeft: string) => string;
-export declare const buttonLoadingArrowMixin: (top: string, leftArrowTop: string, left: string, height: string, background: string, delay: string, btn_loading_arrow: string, selectorArrow: string, selectorArrowLeft: string) => string;
+export declare const buttonUseMixin: (btnBackground: string, btnBackgroundStart: string, btnBackgroundEnd: string, arrowBackgroundStart: string, arrowBackgroundEnd: string, shadow: string, shadowArrow: string, shadowArrowLeft: string, color: string, border: string, selectorChecked: string, selectorArrow: string, selectorArrowLeft: string) => string;
+export declare const buttonHoverMixin: (btnBackground: string, btnBackgroundStart: string, btnBackgroundEnd: string, arrowBackgroundStart: string, arrowBackgroundEnd: string, btnShadow: string, arrowShadow: string, arrowLeftShadow: string, btnBorder: string, selectorArrow: string, selectorArrowLeft: string) => string;
+export declare const buttonActiveMixin: (btnBackground: string, arrowBackground: string, arrowLeftBackground: string, btnShadow: string, arrowShadow: string, arrowLeftShadow: string, selectorActive: string, selectorArrow: string, selectorArrowLeft: string) => string;
+export declare const buttonSizeMixin: (fontSize: string, height: string, heightShift: string, lineHeight: string, paddingX: string, paddingY: string, fontFamilyCompensation: string, selectorLink: string, selectorFallback: string) => string;
+export declare const buttonArrowMixin: (top: string, left: string, right: string, size: string, transform: string, selectorArrow: string, selectorArrowLeft: string) => string;
+export declare const buttonLoadingArrowMixin: (top: string, leftArrowTop: string, left: string, height: string, background: string, delay: string, btn_loading_arrow: string, selectorArrow: string, selectorArrowLeft: string) => string;